@suzumiyaaoba/mdxr 0.1.0

package/src/ui/meta.tsx

@@ -0,0 +1,73 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { hasIcon, Icon, normalizeIconName } from "./icon.js";
+import { TEXT } from "./tones.js";
+
+export const MetaItem = defineComponent(
+  {
+    description:
+      '<Meta> 内の1項目。label と内容を並べる。icon にアイコン名 (例: "lucide:tag") を付けられる',
+    schema: v.looseObject({
+      icon: v.optional(
+        v.pipe(
+          v.string(),
+          v.check(
+            (n) => hasIcon(n),
+            (i) => `unknown icon: ${i.input}`
+          )
+        )
+      ),
+      label: v.optional(v.string()),
+    }),
+  },
+  ({ label, icon, children }) => (
+    <span className="inline-flex items-baseline gap-1">
+      {icon === undefined ? null : (
+        <Icon
+          className={`h-3.5 w-3.5 self-center ${TEXT.faint}`}
+          name={normalizeIconName(icon)}
+        />
+      )}
+      {nonEmpty(label) ? <span className={TEXT.faint}>{label}:</span> : null}
+      <span className={`font-medium ${TEXT.body}`}>{children}</span>
+    </span>
+  )
+);
+
+const SHORTHAND: [string, "date" | "owner" | "version" | "updated", string][] =
+  [
+    ["Date", "date", "lucide:calendar"],
+    ["Owner", "owner", "lucide:user"],
+    ["Version", "version", "lucide:tag"],
+    ["Updated", "updated", "lucide:history"],
+  ];
+
+export const Meta = defineComponent(
+  {
+    description:
+      "文書メタ情報の行。date/owner/version/updated 属性か <MetaItem> を子に取る",
+    schema: v.looseObject({
+      date: v.optional(v.string()),
+      owner: v.optional(v.string()),
+      updated: v.optional(v.string()),
+      version: v.optional(v.string()),
+    }),
+  },
+  ({ date, owner, version, updated, children }) => {
+    const values = { date, owner, updated, version };
+    return (
+      <div className="not-prose my-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+        {SHORTHAND.map(([label, key, icon]) =>
+          nonEmpty(values[key]) ? (
+            <MetaItem icon={icon} key={key} label={label}>
+              {values[key]}
+            </MetaItem>
+          ) : null
+        )}
+        {children}
+      </div>
+    );
+  }
+);

package/src/ui/option.tsx

@@ -0,0 +1,64 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Pill, TrimBody } from "./bits.js";
+import { BORDER_CLS, TONE, TONE_BORDER } from "./tones.js";
+
+export const OPTION_STATUSES = [
+  "considered",
+  "recommended",
+  "rejected",
+] as const;
+export type OptionStatus = (typeof OPTION_STATUSES)[number];
+
+const STYLES: Record<
+  OptionStatus,
+  { card: string; chip: string; icon: string; label: string }
+> = {
+  considered: {
+    card: BORDER_CLS,
+    chip: TONE.neutral,
+    icon: "lucide:minus",
+    label: "Considered",
+  },
+  recommended: {
+    card: TONE_BORDER.emerald,
+    chip: TONE.emerald,
+    icon: "lucide:thumbs-up",
+    label: "Recommended",
+  },
+  rejected: {
+    card: `${BORDER_CLS} opacity-70`,
+    chip: TONE.red,
+    icon: "lucide:thumbs-down",
+    label: "Rejected",
+  },
+};
+
+export const Option = defineComponent(
+  {
+    description:
+      "検討した選択肢カード。status は recommended|considered|rejected。<Columns> と組み合わせて並べる",
+    schema: v.looseObject({
+      status: v.optional(v.picklist(OPTION_STATUSES), "considered"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, status, children }) => {
+    const s = STYLES[status];
+    return (
+      <div className={`my-6 rounded-lg border px-4 py-3 ${s.card}`}>
+        <div className="flex flex-wrap items-center gap-2">
+          {nonEmpty(title) ? (
+            <span className="font-semibold">{title}</span>
+          ) : null}
+          <Pill className={s.chip} icon={s.icon}>
+            {s.label}
+          </Pill>
+        </div>
+        <TrimBody className="mt-1.5 text-sm">{children}</TrimBody>
+      </div>
+    );
+  }
+);

package/src/ui/owner.tsx

@@ -0,0 +1,40 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { TEXT } from "./tones.js";
+
+/** `"Bob Tanaka"` → `"BT"`, `"@devin"` → `"D"` — avatar text from a name. */
+export const initials = (name: string): string => {
+  const clean = name.replace(/^@+/u, "").trim();
+  const parts = clean.split(/[\s._-]+/u).filter(Boolean);
+  const chars =
+    parts.length > 0
+      ? parts.slice(0, 2).map((w) => w.charAt(0))
+      : [clean.charAt(0)];
+  return chars.join("").toUpperCase();
+};
+
+export const Owner = defineComponent(
+  {
+    description: "担当者チップ。name は必須、role で役割を添えられる",
+    schema: v.looseObject({
+      name: v.string(),
+      role: v.optional(v.string()),
+    }),
+  },
+  ({ name, role }) => (
+    <span
+      className={`not-prose inline-flex items-center gap-1.5 rounded-full bg-neutral-100 py-0.5 pr-2 pl-0.5 text-xs ${TEXT.chip} dark:bg-neutral-800`}
+    >
+      <span
+        aria-hidden
+        className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-neutral-300 text-[9px] font-semibold text-neutral-700 dark:bg-neutral-600 dark:text-neutral-100"
+      >
+        {initials(name)}
+      </span>
+      <span className="font-medium">{name}</span>
+      {nonEmpty(role) ? <span className={TEXT.faint}>{role}</span> : null}
+    </span>
+  )
+);

package/src/ui/packages.tsx

@@ -0,0 +1,104 @@
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty, safeHref } from "../guards.js";
+import { NUMISH } from "./attrs.js";
+import { CaptionBar, ListPanel, ListRow, MaybeLink, RowNote } from "./bits.js";
+import { isEl } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  COUNT_CHIP_CLS,
+  LOC_CLS,
+  MINI_CHIP_CLS,
+  TEXT,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const PACKAGE_KINDS = ["dep", "dev", "peer", "optional"] as const;
+export type PackageKind = (typeof PACKAGE_KINDS)[number];
+
+const PKG_STYLES: Record<PackageKind, { cls: string; label: string }> = {
+  dep: { cls: TONE.sky, label: "dep" },
+  dev: { cls: TONE.neutral, label: "dev" },
+  optional: { cls: TONE.amber, label: "optional" },
+  peer: { cls: TONE.violet, label: "peer" },
+};
+
+export const Package = defineComponent(
+  {
+    description:
+      "パッケージ棚卸し1行。name は必須、version、kind は dep|dev|peer|optional、license にライセンス名、href でレジストリ/リポジトリリンク。children は用途メモ",
+    schema: v.looseObject({
+      href: v.optional(v.string()),
+      kind: v.optional(v.picklist(PACKAGE_KINDS)),
+      license: v.optional(v.string()),
+      name: v.string(),
+      note: v.optional(v.string()),
+      version: v.optional(NUMISH),
+    }),
+  },
+  ({ name, version, kind, license, note, href, children }) => {
+    const link = safeHref(href);
+    return (
+      <ListRow>
+        <Icon
+          className={`h-3.5 w-3.5 shrink-0 self-center ${TEXT.faint}`}
+          name="lucide:package"
+        />
+        <MaybeLink
+          className={`font-mono text-[0.85em] font-medium ${TEXT.code} no-underline hover:underline`}
+          href={link}
+        >
+          {name}
+        </MaybeLink>
+        {version === undefined || version === "" ? null : (
+          <code className={LOC_CLS}>{String(version)}</code>
+        )}
+        {kind === undefined ? null : (
+          <span className={`${MINI_CHIP_CLS} ${PKG_STYLES[kind].cls}`}>
+            {PKG_STYLES[kind].label}
+          </span>
+        )}
+        {nonEmpty(license) ? (
+          <span className={`${MINI_CHIP_CLS} ${TONE.neutral}`}>{license}</span>
+        ) : null}
+        {nonEmpty(note) ? (
+          <span className={`text-sm ${TEXT.muted}`}>{note}</span>
+        ) : null}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const Packages = defineComponent(
+  {
+    description:
+      "パッケージ一覧のコンテナ。<Package> を並べ、総数をキャプションに表示。title はキャプション",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, children }) => {
+    const total = flattenChildren(children).filter((n) =>
+      isEl(n, Package)
+    ).length;
+    const caption = nonEmpty(title) || total > 0;
+    return (
+      <ListPanel>
+        {caption ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:boxes" />
+            {nonEmpty(title) ? title : "Packages"}
+            {total > 0 ? (
+              <span className={`ml-auto ${COUNT_CHIP_CLS}`}>{total}</span>
+            ) : null}
+          </CaptionBar>
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/pathway.tsx

@@ -0,0 +1,96 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { CaptionBar, Panel } from "./bits.js";
+import { isEl } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  isStatus,
+  STATUS_ICON_CLS,
+  STATUS_ICONS,
+  STATUS_PROP,
+} from "./status-badge.js";
+import {
+  CAPTION_TITLE_CLS,
+  RAIL_BG_CLS,
+  TEXT,
+  TEXT_SUB,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const Stop = defineComponent(
+  {
+    description:
+      "経路ステップ1点。label は必須 (バージョン・環境名など)、status は todo|doing|done|blocked、note で補足 (codemod・レビュー待ちなど)、current で現在地マーク。children は説明文",
+    schema: v.looseObject({
+      current: BOOLISH_PROP,
+      label: v.string(),
+      note: v.optional(v.string()),
+      status: STATUS_PROP,
+    }),
+  },
+  // Rendered by Pathway — standalone use falls back to a chip row.
+  ({ label, note, status, current, children }) => {
+    const st = isStatus(status) ? status : "todo";
+    return (
+      <div className="flex w-28 shrink-0 flex-col items-center gap-1 px-1 text-center">
+        <Icon
+          className={`h-5 w-5 ${STATUS_ICON_CLS[st]} ${attrTrue(current) ? "rounded-full ring-2 ring-sky-400/60" : ""}`}
+          label={st}
+          name={STATUS_ICONS[st]}
+        />
+        <span className="font-mono text-xs font-semibold">{label}</span>
+        {nonEmpty(note) ? (
+          <span className={`${TEXT_SUB} ${TEXT.faint}`}>{note}</span>
+        ) : null}
+        {children === undefined ? null : (
+          <span className={`${TEXT_SUB} ${TEXT.muted} ${TRIM_CLS}`}>
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+export const Pathway = defineComponent(
+  {
+    description:
+      "経路ステッパー (バージョンパス v17→v18→v19、環境昇格 dev→staging→prod、段階ロールアウト)。<Stop> をコネクタ線付きで横に並べる。title はキャプション",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, children }): ReactElement => {
+    const stops = flattenChildren(children);
+    return (
+      <Panel>
+        {nonEmpty(title) ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:milestone" />
+            {title}
+          </CaptionBar>
+        ) : null}
+        <div className="flex items-start gap-x-1 overflow-x-auto px-4 py-4">
+          {stops.map((stop, i) => (
+            <div
+              className="flex flex-1 items-start last:flex-none"
+              key={isEl(stop, Stop) ? (stop.key ?? i) : i}
+            >
+              {stop}
+              {i < stops.length - 1 ? (
+                <div
+                  aria-hidden
+                  className={`mt-2.5 h-0.5 min-w-4 flex-1 rounded-full ${RAIL_BG_CLS}`}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </Panel>
+    );
+  }
+);

package/src/ui/phase.tsx

@@ -0,0 +1,41 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Due } from "./due.js";
+import { Owner } from "./owner.js";
+import { STATUS_PROP, StatusBadge } from "./status-badge.js";
+import { BORDER_CLS } from "./tones.js";
+
+export const Phase = defineComponent(
+  {
+    description:
+      "計画のフェーズ見出し。`:::phase` からも生成される。owner/due で担当・期限を示せる",
+    schema: v.looseObject({
+      due: v.optional(v.string()),
+      owner: v.optional(v.string()),
+      status: STATUS_PROP,
+      title: v.string(),
+    }),
+  },
+  ({ title, status, owner, due, children }) => {
+    const hasChips = status !== undefined || nonEmpty(owner) || nonEmpty(due);
+    return (
+      <section className="my-10">
+        <h2
+          className={`mt-0 flex flex-wrap items-center gap-3 border-b pb-2 ${BORDER_CLS}`}
+        >
+          {title}
+          {hasChips ? (
+            <span className="inline-flex items-center gap-2">
+              {status === undefined ? null : <StatusBadge status={status} />}
+              {nonEmpty(owner) ? <Owner name={owner} /> : null}
+              {nonEmpty(due) ? <Due date={due} /> : null}
+            </span>
+          ) : null}
+        </h2>
+        {children}
+      </section>
+    );
+  }
+);

package/src/ui/pie-chart.tsx

@@ -0,0 +1,170 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, parseProps } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP, NUMISH, numOf } from "./attrs.js";
+import { CODE_CHIP_CLS } from "./bits.js";
+import { ChartPanel } from "./chart-bits.js";
+import { CHART_TONES, fmtNum, sectorPath, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Pie/donut chart — part-of-whole share across <Slice> children. `donut`
+ * cuts a center hole carrying the total; legend rows show name · value · %.
+ */
+
+const SLICE_SCHEMA = v.looseObject({
+  name: v.string(),
+  note: v.optional(v.string()),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  value: NUMISH,
+});
+
+type SliceSpec = v.InferOutput<typeof SLICE_SCHEMA>;
+
+export const Slice = defineComponent(
+  {
+    description:
+      "円グラフの1区切り。<PieChart> の子。name/value は必須、tone で色、note で補足",
+    schema: SLICE_SCHEMA,
+  },
+  // Standalone use: a `name value` chip so misplaced slices still render.
+  ({ name, value, note }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {name}
+      <span className="opacity-70">{value}</span>
+      {nonEmpty(note) ? <span className="opacity-70">{note}</span> : null}
+    </span>
+  )
+);
+
+const collectSlices = (
+  children: ReactNode
+): { rest: ReactNode[]; slices: { n: number; spec: SliceSpec }[] } => {
+  const slices: { n: number; spec: SliceSpec }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Slice)) {
+      const spec = parseProps(SLICE_SCHEMA, child.props, "Slice");
+      slices.push({ n: Math.max(0, numOf(spec.value) ?? 0), spec });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, slices };
+};
+
+const VB = 200;
+const CX = VB / 2;
+const CY = VB / 2;
+const R1 = 92;
+const R0 = 58;
+
+export const PieChart = defineComponent(
+  {
+    description:
+      "円グラフ/ドーナツコンテナ (構成比)。<Slice name value> を並べる。donut で中央に穴 (合計を表示)、unit は凡例の値の単位",
+    schema: v.looseObject({
+      donut: BOOLISH_PROP,
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, donut, unit, children }) => {
+    const { slices, rest } = collectSlices(children);
+    const total = slices.reduce((a, s) => a + s.n, 0);
+    const hole = attrTrue(donut);
+    let angle = -Math.PI / 2;
+
+    const arcs = slices.map((s, i) => {
+      const span = total === 0 ? 0 : (s.n / total) * Math.PI * 2;
+      const a0 = angle;
+      const a1 = angle + span;
+      angle = a1;
+      return {
+        d: sectorPath(CX, CY, hole ? R0 : 0, R1, a0, a1),
+        i,
+        s,
+      };
+    });
+
+    return (
+      <ChartPanel
+        figure={nonEmpty(unit) ? `${fmtNum(total)}${unit}` : undefined}
+        icon="lucide:chart-pie"
+        title={title}
+      >
+        <div className="flex flex-col items-center gap-4 px-4 py-4 sm:flex-row sm:items-start">
+          <div className="relative h-44 w-44 shrink-0">
+            <svg className="h-full w-full" viewBox={`0 0 ${VB} ${VB}`}>
+              <title>{title ?? "pie chart"}</title>
+              {total === 0 ? (
+                <circle
+                  className="fill-neutral-200 dark:fill-neutral-700"
+                  cx={CX}
+                  cy={CY}
+                  r={hole ? (R0 + R1) / 2 : R1}
+                />
+              ) : null}
+              {arcs.map((a) => (
+                <path
+                  className={toneOf(a.s.spec.tone, a.i).fill}
+                  d={a.d}
+                  key={a.i}
+                >
+                  <title>
+                    {`${a.s.spec.name} · ${fmtNum(a.s.n)}${unit ?? ""} (${total === 0 ? 0 : Math.round((a.s.n / total) * 100)}%)`}
+                  </title>
+                </path>
+              ))}
+            </svg>
+            {hole ? (
+              <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                <span className="font-mono text-lg font-semibold tabular-nums">
+                  {fmtNum(total)}
+                </span>
+                {nonEmpty(unit) ? (
+                  <span className={`${TEXT_MICRO} ${TEXT.faint}`}>{unit}</span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          <ul className="min-w-0 flex-1 space-y-1.5 self-center sm:self-auto">
+            {slices.map((s, i) => {
+              const style = toneOf(s.spec.tone, i);
+              const pct = total === 0 ? 0 : (s.n / total) * 100;
+              return (
+                <li
+                  className="flex items-baseline gap-2 text-sm"
+                  key={s.spec.name}
+                >
+                  <span
+                    className={`h-2 w-2 shrink-0 self-center rounded-[2px] ${style.bg}`}
+                  />
+                  <span className="min-w-0 flex-1 truncate">
+                    {s.spec.name}
+                    {nonEmpty(s.spec.note) ? (
+                      <span className={`ml-1.5 ${TEXT_MICRO} ${TEXT.faint}`}>
+                        {s.spec.note}
+                      </span>
+                    ) : null}
+                  </span>
+                  <span
+                    className={`font-mono ${TEXT_MICRO} tabular-nums ${TEXT.muted}`}
+                  >
+                    {fmtNum(s.n)}
+                    {unit}
+                    {` · ${Math.round(pct)}%`}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        {rest.length > 0 ? <div className="px-4 pb-3">{rest}</div> : null}
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/plan.tsx

@@ -0,0 +1,77 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Meta } from "./meta.js";
+import { STATUS_PROP, StatusBadge } from "./status-badge.js";
+import { BORDER_CLS } from "./tones.js";
+
+interface PlanHeaderProps {
+  date?: string | undefined;
+  owner?: string | undefined;
+  status?: string | undefined;
+  title?: string | undefined;
+  updated?: string | undefined;
+  version?: string | undefined;
+}
+
+const hasMeta = (p: PlanHeaderProps): boolean =>
+  [p.date, p.owner, p.version, p.updated].some(nonEmpty);
+
+/**
+ * The document header row shared by `<Plan>` and the frontmatter-generated
+ * header in render.ts. `status` is validated by StatusBadge's own schema.
+ */
+export const PlanHeader = (p: PlanHeaderProps): ReactElement => (
+  <header className={`mb-8 border-b pb-4 ${BORDER_CLS}`}>
+    <div className="flex flex-wrap items-center gap-3">
+      {nonEmpty(p.title) ? <h1 className="m-0">{p.title}</h1> : null}
+      {nonEmpty(p.status) ? <StatusBadge status={p.status} /> : null}
+    </div>
+    {hasMeta(p) ? (
+      <Meta
+        date={p.date}
+        owner={p.owner}
+        updated={p.updated}
+        version={p.version}
+      />
+    ) : null}
+  </header>
+);
+
+export const Plan = defineComponent(
+  {
+    description:
+      "ドキュメントのルート要素。title/status/date/owner/version/updated のヘッダを描画する",
+    schema: v.looseObject({
+      date: v.optional(v.string()),
+      owner: v.optional(v.string()),
+      status: STATUS_PROP,
+      title: v.optional(v.string()),
+      updated: v.optional(v.string()),
+      version: v.optional(v.string()),
+    }),
+  },
+  ({ title, status, date, owner, version, updated, children }) => {
+    const showHeader =
+      nonEmpty(title) ||
+      nonEmpty(status) ||
+      [date, owner, version, updated].some(nonEmpty);
+    return (
+      <article>
+        {showHeader ? (
+          <PlanHeader
+            date={date}
+            owner={owner}
+            status={status}
+            title={title}
+            updated={updated}
+            version={version}
+          />
+        ) : null}
+        {children}
+      </article>
+    );
+  }
+);