@suzumiyaaoba/mdxr 0.1.0

package/src/ui/pre.tsx

@@ -0,0 +1,175 @@
+import { isValidElement, useContext } from "react";
+import type { ReactElement, ReactNode } from "react";
+
+import type { DocProps } from "../define.js";
+import { textOf } from "../define.js";
+import { DocContext } from "../doc-context.js";
+import { asString, isRecord, nonEmpty } from "../guards.js";
+import { fenceFilename, firstLine, splitPathLines } from "../lines.js";
+import { CaptionBar, CopyButton, MaybeLink, Panel } from "./bits.js";
+import type { DiffHl } from "./diff-parse.js";
+import { parseDiffHl } from "./diff-parse.js";
+import { DiffView } from "./diff.js";
+import { fileIcon } from "./file-icon.js";
+import { Icon } from "./icon.js";
+import { TERMINAL_LANGS, Transcript } from "./terminal.js";
+import { BORDER_CLS, LINK_CLS, SURFACE_CLS } from "./tones.js";
+
+/** "src/x.ts:40-52" → { path: "src/x.ts", line: "40" }; labels stay untouched. */
+const splitFileLine = (filename: string): { line?: string; path: string } => {
+  const { lines, path } = splitPathLines(filename);
+  return { line: firstLine(lines), path };
+};
+
+/** Editor link for a code-header filename, when it resolves to a real file. */
+const useFilenameLink = (filename: string | undefined): string | undefined => {
+  const { fileLink } = useContext(DocContext);
+  if (filename === undefined || fileLink === undefined) {
+    return undefined;
+  }
+  const target = splitFileLine(filename);
+  return nonEmpty(target.path) ? fileLink(target.path, target.line) : undefined;
+};
+
+/** Filename/language bar for a fenced block; links to the file when it exists. */
+export const CodeHeader = (props: {
+  filename?: string;
+  lang?: string;
+  text: string;
+}): ReactElement => {
+  const link = useFilenameLink(props.filename);
+  const label = (
+    <>
+      <Icon
+        className="h-3.5 w-3.5"
+        name={fileIcon(props.filename ?? props.lang ?? "code")}
+      />
+      {props.filename ?? props.lang ?? "code"}
+    </>
+  );
+  return (
+    <CaptionBar className="flex items-center justify-between">
+      <MaybeLink
+        className={`inline-flex items-center gap-1.5 font-mono ${LINK_CLS}`}
+        href={link}
+      >
+        {label}
+      </MaybeLink>
+      <CopyButton copy={props.text} title="Copy code" />
+    </CaptionBar>
+  );
+};
+
+/**
+ * ```console / ```terminal / ```shellsession fences render as a terminal
+ * transcript; `exit="N"` in the fence meta adds an exit-code badge and
+ * `title="…"` becomes the window title.
+ */
+const terminalView = (
+  lang: string | undefined,
+  meta: string,
+  text: string,
+  filename: string | undefined
+): ReactElement | undefined => {
+  if (lang === undefined || !TERMINAL_LANGS.has(lang)) {
+    return undefined;
+  }
+  const exit =
+    /(?:^|\s)exit=(?:"(?<dq>[^"]*)"|'(?<sq>[^']*)'|(?<bare>\S+))/u.exec(
+      meta
+    )?.groups;
+  return (
+    <Transcript
+      exit={exit?.dq ?? exit?.sq ?? exit?.bare}
+      text={text}
+      title={filename}
+    />
+  );
+};
+
+/**
+ * Fences that render as something other than a code block: ```mermaid becomes
+ * a diagram (mermaid loads from CDN only when present), console/terminal
+ * sessions become transcripts, ```diff/```patch become structured per-file
+ * diff cards. Returns undefined for ordinary code fences.
+ */
+const specialView = (
+  lang: string | undefined,
+  meta: string,
+  text: string,
+  filename: string | undefined,
+  hl: DiffHl | undefined
+): ReactElement | undefined => {
+  if (lang === "mermaid") {
+    return (
+      <pre
+        className={`mermaid my-6 flex justify-center rounded-lg border p-4 ${SURFACE_CLS} ${BORDER_CLS}`}
+      >
+        {text}
+      </pre>
+    );
+  }
+  if (lang === "diff" || lang === "patch") {
+    // An empty diff fence renders as nothing — fall back to a code block.
+    if (text.trim() === "") {
+      return undefined;
+    }
+    return <DiffView filename={filename} hl={hl} text={text} />;
+  }
+  return terminalView(lang, meta, text, filename);
+};
+
+/**
+ * Overrides the `pre` element: fenced code blocks become framed blocks with a
+ * filename/language header and a copy button. ```mermaid fences render as
+ * diagrams (mermaid is loaded from CDN only when present).
+ */
+export const Pre = (props: DocProps): ReactElement => {
+  const code = props.children;
+  const codeProps: Record<string, unknown> =
+    isRecord(code) && isRecord(code.props) ? code.props : {};
+  const lang = /language-(?<lang>[\w-]+)/u.exec(
+    asString(codeProps.className) ?? ""
+  )?.groups?.lang;
+  const meta =
+    asString(props.meta) ??
+    asString(codeProps.meta) ??
+    asString(codeProps.metastring) ??
+    "";
+  // Boundary-anchored: `data-title="x"` must not yield a filename header.
+  const filename = fenceFilename(meta);
+  const text = textOf(codeProps.children);
+
+  const special = specialView(
+    lang,
+    meta,
+    text,
+    filename,
+    parseDiffHl(asString(codeProps["data-diffhl"]))
+  );
+  if (special !== undefined) {
+    return special;
+  }
+
+  // `meta`/`metastring` are plumbing for the filename header, not markup —
+  // rebuild <code> with just class+children so they don't leak as attributes.
+  const cleanCode = isValidElement<{
+    children?: ReactNode;
+    className?: unknown;
+  }>(code) ? (
+    <code className={asString(code.props.className)}>
+      {code.props.children}
+    </code>
+  ) : (
+    code
+  );
+
+  return (
+    <Panel>
+      <CodeHeader filename={filename} lang={lang} text={text} />
+      <pre className="m-0 overflow-x-auto bg-white p-4 text-sm dark:bg-neutral-950">
+        {cleanCode}
+      </pre>
+    </Panel>
+  );
+};

package/src/ui/priority.tsx

@@ -0,0 +1,51 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { Icon } from "./icon.js";
+import { TONE } from "./tones.js";
+
+export const PRIORITY_LEVELS = ["p0", "p1", "p2", "p3"] as const;
+export type PriorityLevel = (typeof PRIORITY_LEVELS)[number];
+
+const STYLES: Record<PriorityLevel, { cls: string; label: string }> = {
+  p0: {
+    cls: TONE.red,
+    label: "P0",
+  },
+  p1: {
+    cls: TONE.orange,
+    label: "P1",
+  },
+  p2: {
+    cls: TONE.amber,
+    label: "P2",
+  },
+  p3: {
+    cls: TONE.neutral,
+    label: "P3",
+  },
+};
+
+export const Priority = defineComponent(
+  {
+    description:
+      "優先度ピル。level は p0|p1|p2|p3。children を付けると補足表示になる",
+    schema: v.looseObject({
+      level: v.optional(v.picklist(PRIORITY_LEVELS), "p2"),
+    }),
+  },
+  ({ level, children }) => {
+    const s = STYLES[level];
+    return (
+      <span
+        className={`not-prose inline-flex items-baseline gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${s.cls}`}
+      >
+        <Icon className="h-3 w-3 self-center" name="lucide:flag" />
+        {s.label}
+        {children === undefined || children === "" ? null : (
+          <span className="font-normal">{children}</span>
+        )}
+      </span>
+    );
+  }
+);

package/src/ui/props.tsx

@@ -0,0 +1,77 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { CaptionBar, Panel } from "./bits.js";
+import { BORDER_CLS, DIVIDE_CLS, TEXT, TONE_TEXT, TRIM_CLS } from "./tones.js";
+
+export const Props = defineComponent(
+  {
+    description:
+      "コンポーネント/関数の API 表コンテナ。of に対象名。<Prop> を子に取る",
+    schema: v.looseObject({
+      of: v.optional(v.string()),
+    }),
+  },
+  ({ of, children }) => (
+    <Panel>
+      {nonEmpty(of) ? (
+        <CaptionBar className="font-mono">{of}</CaptionBar>
+      ) : null}
+      <table className="m-0 w-full text-sm">
+        <thead>
+          <tr
+            className={`border-b text-left text-xs ${BORDER_CLS} ${TEXT.muted}`}
+          >
+            <th className="py-2 pr-3 pl-4 font-medium">Name</th>
+            <th className="px-3 py-2 font-medium">Type</th>
+            <th className="px-3 py-2 font-medium">Default</th>
+            <th className="py-2 pr-4 pl-3 font-medium">Description</th>
+          </tr>
+        </thead>
+        <tbody className={DIVIDE_CLS}>{children}</tbody>
+      </table>
+    </Panel>
+  )
+);
+
+const isTruthy = (x: unknown): boolean => attrTrue(x) || x === "required";
+
+export const Prop = defineComponent(
+  {
+    description:
+      "API 表の1行。name は必須。type/default は文字列。required を付けると必須マーク。children は説明文",
+    schema: v.looseObject({
+      default: v.optional(v.string()),
+      name: v.string(),
+      required: BOOLISH_PROP,
+      type: v.optional(v.string()),
+    }),
+  },
+  ({ name, type, required, default: def, children }) => (
+    <tr>
+      <td className="py-2 pr-3 pl-4 align-top font-mono text-[0.85em] whitespace-nowrap">
+        {name}
+        {isTruthy(required) ? (
+          <span className={`ml-0.5 ${TONE_TEXT.red}`} title="required">
+            *
+          </span>
+        ) : null}
+      </td>
+      <td
+        className={`px-3 py-2 align-top font-mono text-[0.85em] ${TEXT.muted}`}
+      >
+        {type ?? ""}
+      </td>
+      <td
+        className={`px-3 py-2 align-top font-mono text-[0.85em] ${TEXT.muted}`}
+      >
+        {nonEmpty(def) ? def : "—"}
+      </td>
+      <td className={`py-2 pr-4 pl-3 align-top ${TEXT.body} ${TRIM_CLS}`}>
+        {children}
+      </td>
+    </tr>
+  )
+);

package/src/ui/quadrant.tsx

@@ -0,0 +1,172 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, parseProps } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH, numOf } from "./attrs.js";
+import { CODE_CHIP_CLS } from "./bits.js";
+import { ChartPanel } from "./chart-bits.js";
+import { CHART_TONES, textList, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { BORDER_CLS, RAIL_BG_CLS, TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Quadrant map — <Pin> items positioned on two 0–100 axes (`x`/`y` name
+ * them). Midlines split the square into four regions; `quadrants` labels
+ * them top-left → top-right → bottom-left → bottom-right.
+ */
+
+const PIN_SCHEMA = v.looseObject({
+  name: v.string(),
+  note: v.optional(v.string()),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  x: NUMISH,
+  y: NUMISH,
+});
+
+type PinSpec = v.InferOutput<typeof PIN_SCHEMA>;
+
+export const Pin = defineComponent(
+  {
+    description:
+      "クアドラントの1項目。<Quadrant> の子。name/x/y は必須 (x/y は 0–100)、note で補足、tone で色",
+    schema: PIN_SCHEMA,
+  },
+  // Standalone use: a `name (x, y)` chip so misplaced pins still render.
+  ({ name, x, y }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {name}
+      <span className="opacity-70">
+        ({x}, {y})
+      </span>
+    </span>
+  )
+);
+
+const collectPins = (
+  children: ReactNode
+): { pins: { spec: PinSpec; x: number; y: number }[]; rest: ReactNode[] } => {
+  const pins: { spec: PinSpec; x: number; y: number }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Pin)) {
+      const spec = parseProps(PIN_SCHEMA, child.props, "Pin");
+      const x = numOf(spec.x);
+      const y = numOf(spec.y);
+      if (x !== undefined && y !== undefined) {
+        pins.push({ spec, x, y });
+      }
+    } else {
+      rest.push(child);
+    }
+  }
+  return { pins, rest };
+};
+
+const CORNER_CLS = `absolute font-mono ${TEXT_MICRO} uppercase tracking-wider ${TEXT.faint}`;
+
+export const Quadrant = defineComponent(
+  {
+    description:
+      'クアドラントマップコンテナ (2軸ポジショニング)。<Pin name x y> を 0–100 空間に置く。x/y で軸名、quadrants="TL,TR,BL,BR" で各象限ラベル',
+    schema: v.looseObject({
+      quadrants: v.optional(v.string()),
+      title: v.optional(v.string()),
+      x: v.optional(v.string()),
+      y: v.optional(v.string()),
+    }),
+  },
+  ({ title, x, y, quadrants, children }) => {
+    const { pins, rest } = collectPins(children);
+    const corners = textList(quadrants);
+    return (
+      <ChartPanel icon="lucide:grid-2x2" title={title}>
+        <div className="px-4 py-4">
+          <div
+            className={`relative mx-auto aspect-square w-full max-w-md rounded-lg border ${BORDER_CLS}`}
+          >
+            {/* midlines */}
+            <div
+              aria-hidden
+              className={`absolute inset-y-0 left-1/2 w-px ${RAIL_BG_CLS}`}
+            />
+            <div
+              aria-hidden
+              className={`absolute inset-x-0 top-1/2 h-px ${RAIL_BG_CLS}`}
+            />
+            {/* quadrant labels */}
+            {corners[0] === undefined ? null : (
+              <span className={`${CORNER_CLS} top-2 left-2.5`}>
+                {corners[0]}
+              </span>
+            )}
+            {corners[1] === undefined ? null : (
+              <span className={`${CORNER_CLS} top-2 right-2.5`}>
+                {corners[1]}
+              </span>
+            )}
+            {corners[2] === undefined ? null : (
+              <span className={`${CORNER_CLS} bottom-2 left-2.5`}>
+                {corners[2]}
+              </span>
+            )}
+            {corners[3] === undefined ? null : (
+              <span className={`${CORNER_CLS} right-2.5 bottom-2`}>
+                {corners[3]}
+              </span>
+            )}
+            {pins.map((p, i) => {
+              const style = toneOf(p.spec.tone, i);
+              return (
+                <div
+                  className="absolute -translate-x-1/2 translate-y-1/2"
+                  key={p.spec.name}
+                  style={{
+                    bottom: `${Math.min(100, Math.max(0, p.y))}%`,
+                    left: `${Math.min(100, Math.max(0, p.x))}%`,
+                  }}
+                  title={`${p.spec.name} · ${p.x}, ${p.y}`}
+                >
+                  <div className="flex flex-col items-center">
+                    <span
+                      className={`mb-0.5 rounded px-1 text-[0.65rem] font-medium whitespace-nowrap ${TEXT.chip} bg-white/80 dark:bg-neutral-900/80`}
+                    >
+                      {p.spec.name}
+                    </span>
+                    <span
+                      className={`h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-neutral-950 ${style.bg}`}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {/* axis titles */}
+          <div className="mx-auto mt-1.5 flex max-w-md items-center justify-between">
+            {nonEmpty(y) ? (
+              <span
+                className={`font-mono ${TEXT_MICRO} uppercase ${TEXT.faint}`}
+              >
+                ↑ {y}
+              </span>
+            ) : (
+              <span />
+            )}
+            {nonEmpty(x) ? (
+              <span
+                className={`font-mono ${TEXT_MICRO} uppercase ${TEXT.faint}`}
+              >
+                {x} →
+              </span>
+            ) : (
+              <span />
+            )}
+          </div>
+          {rest.length > 0 ? (
+            <div className={`${TEXT_MICRO} ${TEXT.muted}`}>{rest}</div>
+          ) : null}
+        </div>
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/radar.tsx

@@ -0,0 +1,200 @@
+import type { ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, parseProps } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH, numOf } from "./attrs.js";
+import { ChartLegend, ChartPanel } from "./chart-bits.js";
+import {
+  fmtNum,
+  linePath,
+  niceScale,
+  numList,
+  polar,
+  textList,
+  toneOf,
+} from "./chart.js";
+import { isEl } from "./children.js";
+import { SERIES_SCHEMA, Series } from "./series.js";
+import type { SeriesSpec } from "./series.js";
+import { TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Radar/spider chart — each <Series> becomes a polygon across `axes`
+ * (3+ labels). Ring gridlines at quarter steps of `max` (default: the
+ * largest value, snapped to a nice bound).
+ */
+
+const VB = 340;
+const CX = VB / 2;
+const CY = VB / 2 + 4;
+const R = 118;
+
+const GRID_STROKE = "stroke-neutral-200 dark:stroke-neutral-700";
+const TICK_TEXT = "fill-neutral-400 dark:fill-neutral-500";
+const AXIS_TEXT = "fill-neutral-500 dark:fill-neutral-400";
+
+/** Label text-anchor — centered near the vertical, outward otherwise. */
+const anchorAt = (x: number): "end" | "middle" | "start" => {
+  if (Math.abs(x - CX) < 8) {
+    return "middle";
+  }
+  return x > CX ? "start" : "end";
+};
+
+const collectSeries = (
+  children: ReactNode
+): { rest: ReactNode[]; series: { nums: number[]; spec: SeriesSpec }[] } => {
+  const series: { nums: number[]; spec: SeriesSpec }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Series)) {
+      const spec = parseProps(SERIES_SCHEMA, child.props, "Series");
+      series.push({ nums: numList(spec.values), spec });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, series };
+};
+
+export const Radar = defineComponent(
+  {
+    description:
+      'レーダーチャートコンテナ (多変量比較)。<Series name values> を並べる。axes="Perf,DX,Tests" で軸ラベル (系列値と同数)、max/unit でスケールと単位',
+    schema: v.looseObject({
+      axes: v.optional(v.string()),
+      max: v.optional(NUMISH),
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, axes, max, unit, children }) => {
+    const { series, rest } = collectSeries(children);
+    const labels = textList(axes);
+    const n = Math.max(labels.length, ...series.map((s) => s.nums.length));
+    const all = series.flatMap((s) => s.nums);
+    const scale = niceScale(numOf(max) ?? Math.max(1, ...all));
+
+    const angleOf = (i: number): number => -Math.PI / 2 + (i / n) * Math.PI * 2;
+    const ringAt = (frac: number): string =>
+      `${linePath(
+        Array.from({ length: n }, (_, i) => polar(CX, CY, R * frac, angleOf(i)))
+      )}Z`;
+
+    return (
+      <ChartPanel
+        figure={nonEmpty(unit) ? `0–${fmtNum(scale.ceil)}${unit}` : undefined}
+        icon="lucide:target"
+        title={title}
+      >
+        <div className="px-4 py-3">
+          {n < 3 ? (
+            <p className={`text-sm ${TEXT.muted}`}>
+              Radar needs at least 3 axes.
+            </p>
+          ) : (
+            <svg
+              className="mx-auto h-auto w-full max-w-sm"
+              viewBox={`0 0 ${VB} ${VB}`}
+            >
+              <title>{title ?? "radar chart"}</title>
+              {[0.25, 0.5, 0.75, 1].map((f) => (
+                <path
+                  className={GRID_STROKE}
+                  d={ringAt(f)}
+                  fill="none"
+                  key={f}
+                  strokeDasharray={f === 1 ? undefined : "2 3"}
+                  strokeWidth={1}
+                />
+              ))}
+              {Array.from({ length: n }, (_, i) => (
+                <line
+                  className={GRID_STROKE}
+                  key={i}
+                  strokeWidth={1}
+                  x1={CX}
+                  x2={polar(CX, CY, R, angleOf(i)).x}
+                  y1={CY}
+                  y2={polar(CX, CY, R, angleOf(i)).y}
+                />
+              ))}
+              <text
+                className={TICK_TEXT}
+                fontSize={8}
+                textAnchor="middle"
+                x={CX}
+                y={CY - R - 6}
+              >
+                {fmtNum(scale.ceil)}
+                {unit}
+              </text>
+              {labels.map((label, i) => {
+                const p = polar(CX, CY, R + 18, angleOf(i));
+                const anchor = anchorAt(p.x);
+                return (
+                  <text
+                    className={AXIS_TEXT}
+                    fontSize={10}
+                    key={label}
+                    textAnchor={anchor}
+                    x={p.x}
+                    y={p.y + 3}
+                  >
+                    {label}
+                  </text>
+                );
+              })}
+              {series.map((s, si) => {
+                const style = toneOf(s.spec.tone, si);
+                const pts = s.nums.map((val, i) =>
+                  polar(
+                    CX,
+                    CY,
+                    R * Math.min(1, Math.max(0, val / scale.ceil)),
+                    angleOf(i)
+                  )
+                );
+                return (
+                  <g key={s.spec.name}>
+                    <path className={style.soft} d={`${linePath(pts)}Z`} />
+                    <path
+                      className={style.stroke}
+                      d={`${linePath(pts)}Z`}
+                      fill="none"
+                      strokeLinejoin="round"
+                      strokeWidth={1.6}
+                    />
+                    {pts.map((p, i) => (
+                      <circle
+                        className={style.fill}
+                        cx={p.x}
+                        cy={p.y}
+                        key={i}
+                        r={2}
+                      >
+                        <title>
+                          {`${s.spec.name}${labels[i] === undefined ? "" : ` · ${labels[i]}`} · ${fmtNum(s.nums[i] ?? 0)}${unit ?? ""}`}
+                        </title>
+                      </circle>
+                    ))}
+                  </g>
+                );
+              })}
+            </svg>
+          )}
+          {rest.length > 0 ? (
+            <div className={`${TEXT_MICRO} ${TEXT.muted}`}>{rest}</div>
+          ) : null}
+        </div>
+        <ChartLegend
+          items={series.map((s, i) => ({
+            name: s.spec.name,
+            style: toneOf(s.spec.tone, i),
+          }))}
+        />
+      </ChartPanel>
+    );
+  }
+);