@suzumiyaaoba/mdxr 0.1.0

package/src/ui/bridge.tsx

@@ -0,0 +1,207 @@
+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 { fmtNum, niceBounds } from "./chart.js";
+import { isEl } from "./children.js";
+import { RAIL_BG_CLS, TEXT, TEXT_MICRO, TEXT_SUB, TONE_TEXT } from "./tones.js";
+
+/**
+ * Bridge / running-total waterfall — a start total carried to an end total
+ * by signed <Delta> contributions. `total` pillars re-anchor the running
+ * sum at their value; deltas float from the previous sum to the new one.
+ */
+
+const DELTA_SCHEMA = v.looseObject({
+  name: v.string(),
+  note: v.optional(v.string()),
+  total: BOOLISH_PROP,
+  value: NUMISH,
+});
+
+type DeltaSpec = v.InferOutput<typeof DELTA_SCHEMA>;
+
+export const Delta = defineComponent(
+  {
+    description:
+      "ブリッジの1増減。<Bridge> の子。name/value は必須 (value は符号付き)、total で累計の柱 (0→value)、note で補足",
+    schema: DELTA_SCHEMA,
+  },
+  // Standalone use: a `name ±value` chip so misplaced deltas still render.
+  ({ name, value, total }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {name}
+      <span className="opacity-70">
+        {attrTrue(total) ? "=" : ""}
+        {value}
+      </span>
+    </span>
+  )
+);
+
+interface Step {
+  /** Column top (larger of from/to). */
+  high: number;
+  /** Column bottom (smaller of from/to). */
+  low: number;
+  n: number;
+  spec: DeltaSpec;
+  /** Running total after this step. */
+  sum: number;
+}
+
+/** Bar color — neutral for totals, emerald/red for up/down deltas. */
+const barCls = (isTotal: boolean, positive: boolean): string => {
+  if (isTotal) {
+    return "bg-neutral-400";
+  }
+  return positive ? "bg-emerald-500" : "bg-red-500";
+};
+
+/** Value label color matching barCls. */
+const valueCls = (isTotal: boolean, positive: boolean): string => {
+  if (isTotal) {
+    return TEXT.muted;
+  }
+  return positive ? TONE_TEXT.emerald : TONE_TEXT.red;
+};
+
+const collectDeltas = (
+  children: ReactNode
+): { rest: ReactNode[]; steps: Step[] } => {
+  const steps: Step[] = [];
+  const rest: ReactNode[] = [];
+  let sum = 0;
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Delta)) {
+      const spec = parseProps(DELTA_SCHEMA, child.props, "Delta");
+      const n = numOf(spec.value) ?? 0;
+      const isTotal = attrTrue(spec.total);
+      const low = isTotal ? Math.min(0, n) : Math.min(sum, sum + n);
+      const high = isTotal ? Math.max(0, n) : Math.max(sum, sum + n);
+      sum = isTotal ? n : sum + n;
+      steps.push({ high, low, n, spec, sum });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, steps };
+};
+
+export const Bridge = defineComponent(
+  {
+    description:
+      "ブリッジコンテナ (開始値→増減→終了値の waterfall チャート)。<Delta name value> を並べる。value は符号付き、total で絶対値の柱。unit は値の単位",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, unit, children }) => {
+    const { steps, rest } = collectDeltas(children);
+    const ext = niceBounds(
+      Math.min(0, ...steps.map((s) => s.low)),
+      Math.max(1, ...steps.map((s) => s.high))
+    );
+    const span = ext.max - ext.min || 1;
+    const pctOf = (val: number): number => ((val - ext.min) / span) * 100;
+
+    return (
+      <ChartPanel
+        figure={
+          nonEmpty(unit)
+            ? `${fmtNum(ext.min)}–${fmtNum(ext.max)}${unit}`
+            : undefined
+        }
+        icon="lucide:chart-column-big"
+        title={title}
+      >
+        <div className="px-4 py-3">
+          <div className="relative">
+            <div aria-hidden className="absolute inset-0 h-36">
+              {ext.ticks
+                .filter((t) => t > ext.min && t < ext.max)
+                .map((t) => (
+                  <div
+                    className={`absolute h-px w-full ${RAIL_BG_CLS} ${t === 0 ? "" : "opacity-50"}`}
+                    key={t}
+                    style={{ bottom: `${pctOf(t)}%` }}
+                  />
+                ))}
+            </div>
+            <div className="relative flex h-36 items-stretch gap-x-3">
+              {steps.map((s, i) => {
+                const isTotal = attrTrue(s.spec.total);
+                const cls = barCls(isTotal, s.n >= 0);
+                const prevSum = i === 0 ? undefined : steps[i - 1]?.sum;
+                return (
+                  <div className="min-w-0 flex-1" key={i}>
+                    <div className="relative h-full">
+                      <div
+                        className={`absolute w-full rounded-sm ${cls}`}
+                        style={{
+                          bottom: `${pctOf(s.low)}%`,
+                          height: `${Math.max(1, pctOf(s.high) - pctOf(s.low))}%`,
+                        }}
+                        title={`${s.spec.name} · ${fmtNum(s.n)}${unit ?? ""} → ${fmtNum(s.sum)}`}
+                      />
+                      {/* connector at the previous column's running total */}
+                      {prevSum === undefined ? null : (
+                        <div
+                          aria-hidden
+                          className={`absolute -left-3 h-px w-3 ${RAIL_BG_CLS}`}
+                          style={{ bottom: `${pctOf(prevSum)}%` }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className="flex gap-x-3">
+            {steps.map((s, i) => {
+              const isTotal = attrTrue(s.spec.total);
+              const positive = s.n >= 0;
+              return (
+                <div className="min-w-0 flex-1" key={i}>
+                  <div className="mt-1 truncate text-center text-xs">
+                    {s.spec.name}
+                  </div>
+                  <div
+                    className={`truncate text-center font-mono ${TEXT_MICRO} tabular-nums ${valueCls(isTotal, positive)}`}
+                  >
+                    {isTotal
+                      ? fmtNum(s.n)
+                      : `${positive ? "+" : ""}${fmtNum(s.n)}`}
+                  </div>
+                  {nonEmpty(s.spec.note) ? (
+                    <div
+                      className={`truncate text-center ${TEXT_SUB} ${TEXT.faint}`}
+                    >
+                      {s.spec.note}
+                    </div>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+          <div
+            className={`mt-1 flex justify-between font-mono ${TEXT_MICRO} ${TEXT.faint} tabular-nums`}
+          >
+            <span>{fmtNum(ext.min)}</span>
+            <span>
+              {fmtNum(ext.max)}
+              {unit}
+            </span>
+          </div>
+        </div>
+        {rest.length > 0 ? <div className="px-4 pb-3">{rest}</div> : null}
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/bumps.tsx

@@ -0,0 +1,178 @@
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty, safeHref } from "../guards.js";
+import { attrTrue, BOOLISH_PROP, NUMISH } from "./attrs.js";
+import { CaptionBar, ListPanel, ListRow, MaybeLink, RowNote } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  MINI_CHIP_CLS,
+  TEXT,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const BUMP_KINDS = ["major", "minor", "patch"] as const;
+export type BumpKind = (typeof BUMP_KINDS)[number];
+
+const isBumpKind = isOneOf(BUMP_KINDS);
+
+const KIND_STYLES: Record<BumpKind, { cls: string; label: string }> = {
+  major: { cls: TONE.red, label: "major" },
+  minor: { cls: TONE.amber, label: "minor" },
+  patch: { cls: TONE.neutral, label: "patch" },
+};
+
+/** `"1.2.3"` → `[1, 2, 3]` — ignores pre-release/build suffixes. */
+const semverParts = (x: unknown): number[] | undefined => {
+  if (typeof x !== "string" && typeof x !== "number") {
+    return undefined;
+  }
+  const m = /^v?(?<core>\d+(?:\.\d+){0,2})/u.exec(String(x).trim());
+  if (m?.groups === undefined) {
+    return undefined;
+  }
+  const parts = m.groups.core.split(".").map(Number);
+  while (parts.length < 3) {
+    parts.push(0);
+  }
+  return parts.every(Number.isFinite) ? parts : undefined;
+};
+
+/** Compare `from`/`to` semver triples → the highest differing segment. */
+const detectKind = (from: unknown, to: unknown): BumpKind | undefined => {
+  const a = semverParts(from);
+  const b = semverParts(to);
+  if (a === undefined || b === undefined) {
+    return undefined;
+  }
+  for (const [i, kind] of [
+    [0, "major"],
+    [1, "minor"],
+    [2, "patch"],
+  ] as const) {
+    if (a[i] !== b[i]) {
+      return kind;
+    }
+  }
+  return "patch";
+};
+
+export const Bump = defineComponent(
+  {
+    description:
+      "依存バージョンアップ1行。name は必須、from → to を表示し major|minor|patch を自動判定 (kind で上書き可)。breaking で警告チップ、cves に修正される脆弱性数、href で変更履歴リンク。children はメモ",
+    schema: v.looseObject({
+      breaking: BOOLISH_PROP,
+      cves: v.optional(NUMISH),
+      from: v.optional(v.string()),
+      href: v.optional(v.string()),
+      kind: v.optional(v.picklist(BUMP_KINDS)),
+      name: v.string(),
+      note: v.optional(v.string()),
+      to: v.optional(v.string()),
+    }),
+  },
+  ({ name, from, to, kind, breaking, cves, note, href, children }) => {
+    const k = isBumpKind(kind) ? kind : detectKind(from, to);
+    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>
+        {nonEmpty(from) || nonEmpty(to) ? (
+          <span className="inline-flex items-center gap-1 font-mono text-xs">
+            <span className={TEXT.muted}>{from ?? "?"}</span>
+            <Icon
+              className={`h-3 w-3 ${TEXT.faint}`}
+              name="lucide:arrow-right"
+            />
+            <span className={TEXT.code}>{to ?? "?"}</span>
+          </span>
+        ) : null}
+        {k === undefined ? null : (
+          <span className={`${MINI_CHIP_CLS} ${KIND_STYLES[k].cls}`}>
+            {KIND_STYLES[k].label}
+          </span>
+        )}
+        {attrTrue(breaking) ? (
+          <span className={`${MINI_CHIP_CLS} ${TONE.orange}`}>
+            <Icon className="h-2.5 w-2.5" name="lucide:triangle-alert" />
+            breaking
+          </span>
+        ) : null}
+        {cves === undefined || cves === "" ? null : (
+          <span className={`${MINI_CHIP_CLS} ${TONE.emerald}`}>
+            <Icon className="h-2.5 w-2.5" name="lucide:shield-check" />
+            {cves} {String(cves) === "1" ? "CVE" : "CVEs"}
+          </span>
+        )}
+        {nonEmpty(note) ? (
+          <span className={`text-sm ${TEXT.muted}`}>{note}</span>
+        ) : null}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const Bumps = defineComponent(
+  {
+    description:
+      "依存バージョンアップ一覧のコンテナ。<Bump> を並べ、major|minor|patch 別の件数を自動集計。title はキャプション",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, children }) => {
+    const counts = new Map<BumpKind, number>();
+    for (const node of flattenChildren(children)) {
+      if (!isEl(node, Bump)) {
+        continue;
+      }
+      const k = propOf(node, "kind");
+      const kind = isBumpKind(k)
+        ? k
+        : detectKind(propOf(node, "from"), propOf(node, "to"));
+      if (kind !== undefined) {
+        counts.set(kind, (counts.get(kind) ?? 0) + 1);
+      }
+    }
+    const total = [...counts.values()].reduce((a, b) => a + b, 0);
+    const caption = nonEmpty(title) || total > 0;
+    return (
+      <ListPanel>
+        {caption ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:package-open" />
+            {nonEmpty(title) ? title : "Dependency upgrades"}
+            <span className="ml-auto flex items-center gap-x-2 font-medium">
+              {BUMP_KINDS.map((k) => {
+                const c = counts.get(k);
+                return c === undefined ? null : (
+                  <span
+                    className={`${MINI_CHIP_CLS} ${KIND_STYLES[k].cls}`}
+                    key={k}
+                  >
+                    {c} {k}
+                  </span>
+                );
+              })}
+            </span>
+          </CaptionBar>
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/callout.tsx

@@ -0,0 +1,106 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { TrimBody } from "./bits.js";
+import { Icon } from "./icon.js";
+import { EDGE_PANEL_CLS } from "./tones.js";
+
+export const CALLOUT_KINDS = [
+  "note",
+  "tip",
+  "important",
+  "warning",
+  "caution",
+  "danger",
+  "decision",
+  "goal",
+  "nongoal",
+  "question",
+  "answer",
+] as const;
+export type CalloutKind = (typeof CALLOUT_KINDS)[number];
+
+const KINDS: Record<CalloutKind, { label: string; cls: string; icon: string }> =
+  {
+    answer: {
+      cls: "border-cyan-500 bg-cyan-50 text-cyan-950 dark:bg-cyan-950/40 dark:text-cyan-100",
+      icon: "lucide:message-circle-check",
+      label: "Answer",
+    },
+    caution: {
+      cls: "border-orange-500 bg-orange-50 text-orange-950 dark:bg-orange-950/40 dark:text-orange-100",
+      icon: "lucide:octagon-alert",
+      label: "Caution",
+    },
+    danger: {
+      cls: "border-red-600 bg-red-50 text-red-950 dark:bg-red-950/40 dark:text-red-100",
+      icon: "lucide:octagon-x",
+      label: "Danger",
+    },
+    decision: {
+      cls: "border-indigo-500 bg-indigo-50 text-indigo-950 dark:bg-indigo-950/40 dark:text-indigo-100",
+      icon: "lucide:scale",
+      label: "Decision",
+    },
+    goal: {
+      cls: "border-teal-500 bg-teal-50 text-teal-950 dark:bg-teal-950/40 dark:text-teal-100",
+      icon: "lucide:target",
+      label: "Goal",
+    },
+    important: {
+      cls: "border-violet-500 bg-violet-50 text-violet-950 dark:bg-violet-950/40 dark:text-violet-100",
+      icon: "lucide:message-square-warning",
+      label: "Important",
+    },
+    nongoal: {
+      cls: "border-neutral-400 bg-neutral-50 text-neutral-800 dark:bg-neutral-900/40 dark:text-neutral-200",
+      icon: "lucide:circle-slash",
+      label: "Non-goal",
+    },
+    note: {
+      cls: "border-sky-500 bg-sky-50 text-sky-950 dark:bg-sky-950/40 dark:text-sky-100",
+      icon: "lucide:info",
+      label: "Note",
+    },
+    question: {
+      cls: "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-950 dark:bg-fuchsia-950/40 dark:text-fuchsia-100",
+      icon: "lucide:circle-question-mark",
+      label: "Question",
+    },
+    tip: {
+      cls: "border-emerald-500 bg-emerald-50 text-emerald-950 dark:bg-emerald-950/40 dark:text-emerald-100",
+      icon: "lucide:lightbulb",
+      label: "Tip",
+    },
+    warning: {
+      cls: "border-amber-500 bg-amber-50 text-amber-950 dark:bg-amber-950/40 dark:text-amber-100",
+      icon: "lucide:triangle-alert",
+      label: "Warning",
+    },
+  };
+
+export const Callout = defineComponent(
+  {
+    description:
+      "強調ブロック。`:::note` / `> [!NOTE]` などの規約からも生成される",
+    schema: v.looseObject({
+      kind: v.optional(v.picklist(CALLOUT_KINDS), "note"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ kind, title, children }) => {
+    const k = KINDS[kind];
+    return (
+      <aside className={`${EDGE_PANEL_CLS} ${k.cls}`}>
+        <div className="flex items-center gap-1.5 font-semibold">
+          <Icon className="h-4 w-4 shrink-0" name={k.icon} />
+          <span>{k.label}</span>
+          {title !== undefined && title !== "" ? (
+            <span className="font-normal opacity-75">{title}</span>
+          ) : null}
+        </div>
+        <TrimBody className="mt-1.5">{children}</TrimBody>
+      </aside>
+    );
+  }
+);

package/src/ui/changes.tsx

@@ -0,0 +1,89 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import {
+  ListPanel,
+  ListRow,
+  MaybeLink,
+  RowIcon,
+  RowNote,
+  Tag,
+} from "./bits.js";
+import { fileIcon } from "./file-icon.js";
+import { useFileLink } from "./file-link.js";
+import { LINK_CLS, MONO_CLS, TEXT, TONE_TEXT } from "./tones.js";
+
+export const CHANGE_KINDS = ["add", "modify", "delete", "rename"] as const;
+export type ChangeKind = (typeof CHANGE_KINDS)[number];
+
+const KINDS: Record<ChangeKind, { cls: string; icon: string; label: string }> =
+  {
+    add: {
+      cls: TONE_TEXT.emerald,
+      icon: "lucide:file-plus",
+      label: "Add",
+    },
+    delete: {
+      cls: TONE_TEXT.red,
+      icon: "lucide:file-x",
+      label: "Delete",
+    },
+    modify: {
+      cls: TONE_TEXT.sky,
+      icon: "lucide:file-pen",
+      label: "Modify",
+    },
+    rename: {
+      cls: TONE_TEXT.violet,
+      icon: "lucide:file-symlink",
+      label: "Rename",
+    },
+  };
+
+export const Changes = defineComponent(
+  {
+    description: "変更ファイル一覧のコンテナ。<Change> を並べる",
+  },
+  ({ children }) => <ListPanel as="div">{children}</ListPanel>
+);
+
+export const Change = defineComponent(
+  {
+    description:
+      "変更ファイル1行。kind は add|modify|delete|rename。rename 時は to に変更後パス。実在ファイルはエディタリンク（既定 vscode://）になり、href で上書き可。children は注記",
+    schema: v.looseObject({
+      href: v.optional(v.string()),
+      kind: v.optional(v.picklist(CHANGE_KINDS), "modify"),
+      path: v.string(),
+      to: v.optional(v.string()),
+    }),
+  },
+  ({ kind, path, to, href, children }) => {
+    const k = KINDS[kind];
+    const link = useFileLink(nonEmpty(to) ? to : path, undefined, href);
+    const label = (
+      <code className={MONO_CLS}>
+        {path}
+        {nonEmpty(to) ? (
+          <span className={TEXT.faint}>
+            {" → "}
+            {to}
+          </span>
+        ) : null}
+      </code>
+    );
+    return (
+      <ListRow>
+        <Tag className={k.cls} icon={k.icon}>
+          {k.label}
+        </Tag>
+        <RowIcon name={fileIcon(nonEmpty(to) ? to : path)} />
+        <MaybeLink className={LINK_CLS} href={link}>
+          {label}
+        </MaybeLink>
+        <RowNote>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);

package/src/ui/chart-bits.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement, ReactNode } from "react";
+
+import { CaptionBar, Panel } from "./bits.js";
+import type { SeriesStyle } from "./chart.js";
+import { Icon } from "./icon.js";
+import { CAPTION_TITLE_CLS, MONO_NUM_CLS, TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Shared chart furniture — the `Panel` + `CaptionBar` frame every chart
+ * panel uses, and the legend row mapping series names to palette swatches.
+ * Layout math lives in `chart.ts`; this file holds the JSX half.
+ */
+
+/** Titled chart frame — icon + title + an optional right-side figure. */
+export const ChartPanel = (props: {
+  children?: ReactNode;
+  /** Right-aligned caption figure (range total, max, …). */
+  figure?: ReactNode;
+  icon: string;
+  title?: string;
+}): ReactElement => (
+  <Panel>
+    {props.title === undefined || props.title === "" ? null : (
+      <CaptionBar className={CAPTION_TITLE_CLS}>
+        <Icon className="h-3.5 w-3.5" name={props.icon} />
+        <span className="min-w-0 flex-1 truncate">{props.title}</span>
+        {props.figure === undefined ? null : (
+          <span className={MONO_NUM_CLS}>{props.figure}</span>
+        )}
+      </CaptionBar>
+    )}
+    {props.children}
+  </Panel>
+);
+
+/** Legend row — colored square + series/item name, wrapping centered. */
+export const ChartLegend = (props: {
+  items: { name: string; style: SeriesStyle }[];
+}): ReactElement | null =>
+  props.items.length === 0 ? null : (
+    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 px-4 pb-3">
+      {props.items.map((item) => (
+        <span
+          className={`inline-flex items-center gap-1.5 ${TEXT_MICRO} ${TEXT.muted}`}
+          key={item.name}
+        >
+          <span className={`h-2 w-2 rounded-[2px] ${item.style.bg}`} />
+          {item.name}
+        </span>
+      ))}
+    </div>
+  );