@suzumiyaaoba/mdxr 0.1.0

package/src/ui/json.tsx

@@ -0,0 +1,190 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent, textOf } from "../define.js";
+import { isRecord, nonEmpty } from "../guards.js";
+import { attrFalse, BOOLISH_PROP } from "./attrs.js";
+import { CaptionBar, CopyButton, FoldChev, Panel } from "./bits.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  COUNT_CHIP_CLS,
+  DISCLOSURE_ROW_CLS,
+  RAIL_CLS,
+  SUNKEN_CLS,
+  TEXT,
+  TREE_ROW_CLS,
+} from "./tones.js";
+
+/**
+ * Collapsible JSON tree — objects/arrays fold via nested native <details>
+ * (no client JS). The document supplies JSON as a `value` attribute or as a
+ * fenced ```json block child; the fence's raw text is what gets parsed.
+ */
+
+const MAX_DEPTH = 32;
+const MAX_STRING = 160;
+
+const closed = attrFalse;
+
+const Leaf = ({ value }: { value: unknown }): ReactElement => {
+  if (value === null) {
+    return (
+      <span className="text-neutral-400 italic dark:text-neutral-500">
+        null
+      </span>
+    );
+  }
+  if (typeof value === "string") {
+    const s =
+      value.length > MAX_STRING ? `${value.slice(0, MAX_STRING)}…` : value;
+    return (
+      <span className="break-all text-emerald-700 dark:text-emerald-400">
+        {JSON.stringify(s)}
+      </span>
+    );
+  }
+  if (typeof value === "number") {
+    return (
+      <span className="text-sky-700 tabular-nums dark:text-sky-400">
+        {String(value)}
+      </span>
+    );
+  }
+  if (typeof value === "boolean") {
+    return (
+      <span className="text-violet-700 dark:text-violet-400">
+        {String(value)}
+      </span>
+    );
+  }
+  return <span>{JSON.stringify(value)}</span>;
+};
+
+const Key = ({ name }: { name: number | string }): ReactElement => (
+  <>
+    <span className="text-sky-700 dark:text-sky-300">
+      {typeof name === "string" ? JSON.stringify(name) : name}
+    </span>
+    <span className={TEXT.faint}>:</span>
+  </>
+);
+
+const NodeView = ({
+  depth,
+  name,
+  openAll,
+  value,
+}: {
+  depth: number;
+  name?: number | string;
+  openAll: boolean;
+  value: unknown;
+}): ReactElement => {
+  const keyEl =
+    name === undefined ? null : (
+      <span className="inline-flex shrink-0 items-baseline gap-1">
+        <Key name={name} />
+      </span>
+    );
+  if (depth > MAX_DEPTH) {
+    return (
+      <div className={TREE_ROW_CLS}>
+        {keyEl}
+        <span className="text-neutral-400">…</span>
+      </div>
+    );
+  }
+  const isArr = Array.isArray(value);
+  if (!isArr && !isRecord(value)) {
+    return (
+      <div className={TREE_ROW_CLS}>
+        {keyEl}
+        <Leaf value={value} />
+      </div>
+    );
+  }
+  const entries: [number | string, unknown][] = isArr
+    ? value.map((item, i) => [i, item])
+    : Object.entries(value);
+  const openB = isArr ? "[" : "{";
+  const closeB = isArr ? "]" : "}";
+  if (entries.length === 0) {
+    return (
+      <div className={TREE_ROW_CLS}>
+        {keyEl}
+        <span className={TEXT.faint}>
+          {openB}
+          {closeB}
+        </span>
+      </div>
+    );
+  }
+  return (
+    <details className="group" open={openAll}>
+      <summary className={`list-none ${DISCLOSURE_ROW_CLS}`}>
+        <FoldChev />
+        {keyEl}
+        <span className={TEXT.faint}>{openB}</span>
+        <span className={`mdxr-count ${COUNT_CHIP_CLS}`}>
+          {entries.length} {isArr ? "items" : "keys"}
+        </span>
+      </summary>
+      <div className={`ml-[1.05rem] border-l pl-2.5 ${RAIL_CLS}`}>
+        {entries.map(([k, item]) => (
+          <NodeView
+            depth={depth + 1}
+            key={k}
+            name={k}
+            openAll={openAll}
+            value={item}
+          />
+        ))}
+      </div>
+      <div className={`ml-[1.05rem] ${TEXT.faint}`}>{closeB}</div>
+    </details>
+  );
+};
+
+export const Json = defineComponent(
+  {
+    description:
+      '折りたたみ可能な JSON ツリー (ネストした <details>、JS 不要)。value 属性に JSON 文字列、または子に ```json フェンス。open="false" で全階層を折り畳み。title でキャプション+コピー',
+    schema: v.looseObject({
+      open: BOOLISH_PROP,
+      title: v.optional(v.string()),
+      value: v.optional(v.string()),
+    }),
+  },
+  ({ title, open, value, children }) => {
+    const text = nonEmpty(value) ? value : textOf(children).trim();
+    if (!nonEmpty(text)) {
+      throw new Error(
+        "<Json> requires JSON text via the `value` attribute or a fenced block child"
+      );
+    }
+    let data: unknown;
+    try {
+      data = JSON.parse(text);
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      throw new Error(`<Json> invalid JSON: ${msg}`, { cause: error });
+    }
+    return (
+      <Panel className="mdxr-json">
+        {nonEmpty(title) ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:braces" />
+            <span className="min-w-0 flex-1 truncate">{title}</span>
+            <CopyButton copy={text} title="Copy JSON" />
+          </CaptionBar>
+        ) : null}
+        <div
+          className={`overflow-x-auto ${SUNKEN_CLS} px-4 py-3 font-mono text-[0.8125rem] leading-relaxed`}
+        >
+          <NodeView depth={0} openAll={!closed(open)} value={data} />
+        </div>
+      </Panel>
+    );
+  }
+);

package/src/ui/layout.ts

@@ -0,0 +1,9 @@
+/** `gap` picklist → class, shared by Grid/Stack/Row so spacing stays uniform. */
+export const GAPS: Record<string, string> = {
+  lg: "gap-6",
+  md: "gap-4",
+  none: "gap-0",
+  sm: "gap-2",
+  xl: "gap-8",
+  xs: "gap-1",
+};

package/src/ui/line-chart.tsx

@@ -0,0 +1,251 @@
+import { useId } from "react";
+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 { ChartLegend, ChartPanel } from "./chart-bits.js";
+import {
+  areaPath,
+  fmtNum,
+  linePath,
+  niceBounds,
+  numList,
+  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";
+
+/**
+ * Line chart — one or more <Series> trend lines over evenly-spaced
+ * categories (`labels`). The y domain snaps to round bounds (`min`/`max`
+ * override); `area` adds a soft fill under each line.
+ */
+
+const VB_W = 640;
+const VB_H = 280;
+const PLOT = { bottom: 244, left: 44, right: 628, top: 12 };
+
+/** Gridline stroke — the SVG counterpart of RAIL_BG_CLS. */
+const GRID_STROKE = "stroke-neutral-200 dark:stroke-neutral-700";
+const BASE_STROKE = "stroke-neutral-300 dark:stroke-neutral-600";
+/** Tick/label text — the SVG counterpart of TEXT.faint. */
+const TICK_TEXT = "fill-neutral-400 dark:fill-neutral-500";
+
+interface SeriesData {
+  dash: boolean;
+  name: string;
+  nums: number[];
+  spec: SeriesSpec;
+}
+
+const collectSeries = (
+  children: ReactNode
+): { rest: ReactNode[]; series: SeriesData[] } => {
+  const series: SeriesData[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Series)) {
+      const spec = parseProps(SERIES_SCHEMA, child.props, "Series");
+      series.push({
+        dash: attrTrue(spec.dash),
+        name: spec.name,
+        nums: numList(spec.values),
+        spec,
+      });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, series };
+};
+
+/** One plotted series — optional area fill under the line plus point markers. */
+const SeriesG = (props: {
+  cats: string[];
+  filled: boolean;
+  s: SeriesData;
+  si: number;
+  unit: string | undefined;
+  xOf: (i: number) => number;
+  yOf: (v: number) => number;
+}): ReactElement => {
+  const { cats, filled, s, si, unit, xOf, yOf } = props;
+  const style = toneOf(s.spec.tone, si);
+  const pts = s.nums.map((val, i) => ({ x: xOf(i), y: yOf(val) }));
+  return (
+    <g>
+      {filled && pts.length > 1 ? (
+        <path className={style.soft} d={areaPath(pts, PLOT.bottom)} />
+      ) : null}
+      <path
+        className={style.stroke}
+        d={linePath(pts)}
+        fill="none"
+        strokeDasharray={s.dash ? "4 3" : undefined}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.8}
+      />
+      {pts.map((p, i) => (
+        <circle className={style.fill} cx={p.x} cy={p.y} key={i} r={2.2}>
+          <title>
+            {`${s.name}${cats[i] === undefined ? "" : ` · ${cats[i]}`} · ${fmtNum(s.nums[i] ?? 0)}${unit ?? ""}`}
+          </title>
+        </circle>
+      ))}
+    </g>
+  );
+};
+
+/** Gridlines, y tick labels, x category labels, and the baseline. */
+const Axes = (props: {
+  cats: string[];
+  ticks: number[];
+  xOf: (i: number) => number;
+  yOf: (v: number) => number;
+}): ReactElement => {
+  const { cats, ticks, xOf, yOf } = props;
+  const [firstTick] = ticks;
+  return (
+    <>
+      {ticks.map((t) => (
+        <g key={t}>
+          <line
+            className={GRID_STROKE}
+            strokeDasharray={t === firstTick ? undefined : "2 3"}
+            strokeWidth={1}
+            x1={PLOT.left}
+            x2={PLOT.right}
+            y1={yOf(t)}
+            y2={yOf(t)}
+          />
+          <text
+            className={TICK_TEXT}
+            fontSize={9}
+            textAnchor="end"
+            x={PLOT.left - 6}
+            y={yOf(t) + 3}
+          >
+            {fmtNum(t)}
+          </text>
+        </g>
+      ))}
+      <line
+        className={BASE_STROKE}
+        strokeWidth={1}
+        x1={PLOT.left}
+        x2={PLOT.right}
+        y1={PLOT.bottom}
+        y2={PLOT.bottom}
+      />
+      {cats.map((label, i) => (
+        <text
+          className={TICK_TEXT}
+          fontSize={9}
+          key={label}
+          textAnchor="middle"
+          x={xOf(i)}
+          y={PLOT.bottom + 16}
+        >
+          {label}
+        </text>
+      ))}
+    </>
+  );
+};
+
+export const LineChart = defineComponent(
+  {
+    description:
+      '折れ線グラフコンテナ (推移)。<Series name values="1,2,3"> を並べる。labels="Mon,Tue" で x 軸ラベル、area で塗りつぶし、min/max/unit でスケールと単位',
+    schema: v.looseObject({
+      area: BOOLISH_PROP,
+      labels: v.optional(v.string()),
+      max: v.optional(NUMISH),
+      min: v.optional(NUMISH),
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, labels, area, min, max, unit, children }) => {
+    const clipId = useId().replaceAll(":", "");
+    const { series, rest } = collectSeries(children);
+    const cats = textList(labels);
+    const n = Math.max(cats.length, ...series.map((s) => s.nums.length));
+    const all = series.flatMap((s) => s.nums);
+    const lo = numOf(min);
+    const hi = numOf(max);
+    const extent = niceBounds(
+      lo ?? Math.min(0, ...all),
+      hi ?? Math.max(1, ...all)
+    );
+    const yMin = lo ?? extent.min;
+    const yMax = hi ?? extent.max;
+    const span = yMax - yMin || 1;
+
+    const xOf = (i: number): number =>
+      n <= 1
+        ? (PLOT.left + PLOT.right) / 2
+        : PLOT.left + (i / (n - 1)) * (PLOT.right - PLOT.left);
+    const yOf = (val: number): number =>
+      PLOT.bottom - ((val - yMin) / span) * (PLOT.bottom - PLOT.top);
+
+    const ticks = extent.ticks.filter((t) => t >= yMin && t <= yMax);
+    const filled = attrTrue(area);
+
+    return (
+      <ChartPanel
+        figure={
+          nonEmpty(unit) ? `${fmtNum(yMin)}–${fmtNum(yMax)}${unit}` : undefined
+        }
+        icon="lucide:chart-line"
+        title={title}
+      >
+        <div className="px-4 py-3">
+          <svg className="h-auto w-full" viewBox={`0 0 ${VB_W} ${VB_H}`}>
+            <title>{title ?? "line chart"}</title>
+            <defs>
+              <clipPath id={clipId}>
+                <rect
+                  height={PLOT.bottom - PLOT.top}
+                  width={PLOT.right - PLOT.left}
+                  x={PLOT.left}
+                  y={PLOT.top}
+                />
+              </clipPath>
+            </defs>
+            <Axes cats={cats} ticks={ticks} xOf={xOf} yOf={yOf} />
+            <g clipPath={`url(#${clipId})`}>
+              {series.map((s, si) => (
+                <SeriesG
+                  cats={cats}
+                  filled={filled}
+                  key={s.name}
+                  s={s}
+                  si={si}
+                  unit={unit}
+                  xOf={xOf}
+                  yOf={yOf}
+                />
+              ))}
+            </g>
+          </svg>
+          {rest.length > 0 ? (
+            <div className={`${TEXT_MICRO} ${TEXT.muted}`}>{rest}</div>
+          ) : null}
+        </div>
+        <ChartLegend
+          items={series.map((s, i) => ({
+            name: s.name,
+            style: toneOf(s.spec.tone, i),
+          }))}
+        />
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/matrix.tsx

@@ -0,0 +1,208 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, textOf } from "../define.js";
+import { nonEmpty, own } from "../guards.js";
+import { CaptionBar, Panel } from "./bits.js";
+import { isEl } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  BORDER_CLS,
+  DIVIDE_CLS,
+  SURFACE_CLS,
+  TEXT,
+  TONE_TEXT,
+} from "./tones.js";
+
+/**
+ * Comparison matrix — rows come from a nested Markdown list, cells are
+ * `|`-separated: `- Feature | yes | no | partial`. Cell values map to icons
+ * (yes/✓ → check, no/✗ → cross, partial/~ → minus); anything else renders
+ * as text. Column headers come from the `cols` prop.
+ */
+
+type CellKind = "empty" | "no" | "partial" | "text" | "yes";
+
+const CELL_KINDS: Record<string, CellKind> = {
+  "-": "empty",
+  "?": "empty",
+  false: "no",
+  maybe: "partial",
+  n: "no",
+  ng: "no",
+  no: "no",
+  o: "yes",
+  ok: "yes",
+  partial: "partial",
+  true: "yes",
+  warn: "partial",
+  x: "no",
+  y: "yes",
+  yes: "yes",
+  "~": "partial",
+  "×": "no",
+  "–": "empty",
+  "—": "empty",
+  "△": "partial",
+  "○": "yes",
+  "✅": "yes",
+  "✓": "yes",
+  "✔": "yes",
+  "✕": "no",
+  "✗": "no",
+  "✘": "no",
+  "❌": "no",
+  "？": "empty",
+};
+
+const cellKind = (cell: string): CellKind => {
+  const key = cell.trim().toLowerCase();
+  return own(CELL_KINDS, key) ?? (key === "" ? "empty" : "text");
+};
+
+const Cell = ({ cell }: { cell: string }): ReactElement => {
+  const kind = cellKind(cell);
+  if (kind === "yes") {
+    return (
+      <Icon
+        className={`h-4 w-4 ${TONE_TEXT.emerald}`}
+        label="yes"
+        name="lucide:check"
+      />
+    );
+  }
+  if (kind === "no") {
+    return (
+      <Icon className={`h-4 w-4 ${TONE_TEXT.red}`} label="no" name="lucide:x" />
+    );
+  }
+  if (kind === "partial") {
+    return (
+      <Icon
+        className={`h-4 w-4 ${TONE_TEXT.amber}`}
+        label="partial"
+        name="lucide:minus"
+      />
+    );
+  }
+  if (kind === "empty") {
+    return <span className={TEXT.ghost}>—</span>;
+  }
+  return <span className={`text-xs ${TEXT.body}`}>{cell.trim()}</span>;
+};
+
+type El = ReactElement<{ children?: ReactNode }>;
+
+/** A list item → row cells: first `|`-segment is the label, rest are cells. */
+const rowCells = (li: El): string[] => {
+  const kids = flattenChildren(li.props.children);
+  const text = kids
+    .flatMap((k): ReactNode[] =>
+      isEl(k, "p") ? flattenChildren(k.props.children) : [k]
+    )
+    .map((k) => textOf(k))
+    .join("");
+  return text.split("|").map((c) => c.trim());
+};
+
+/** Nested <ul>/<li> children → one cells array per list item. */
+const collectRows = (children: ReactNode): string[][] => {
+  const rows: string[][] = [];
+  for (const child of flattenChildren(children)) {
+    if (!isEl(child, "ul")) {
+      continue;
+    }
+    for (const li of flattenChildren(child.props.children)) {
+      if (isEl(li, "li")) {
+        rows.push(rowCells(li));
+      }
+    }
+  }
+  return rows;
+};
+
+interface GridStyle {
+  gridTemplateColumns: string;
+}
+
+const MatrixHeader = ({
+  colCount,
+  grid,
+  headers,
+}: {
+  colCount: number;
+  grid: GridStyle;
+  headers: string[];
+}): ReactElement => (
+  <div className={`grid border-b ${SURFACE_CLS} ${BORDER_CLS}`} style={grid}>
+    <div className="px-4 py-2" />
+    {Array.from({ length: colCount }, (_, i) => (
+      <div
+        className={`px-2 py-2 text-center text-xs font-semibold ${TEXT.body}`}
+        key={i}
+      >
+        {headers[i] ?? ""}
+      </div>
+    ))}
+  </div>
+);
+
+const MatrixRow = ({
+  cells,
+  colCount,
+  grid,
+}: {
+  cells: string[];
+  colCount: number;
+  grid: GridStyle;
+}): ReactElement => (
+  <div className="grid items-center" style={grid}>
+    <div className="px-4 py-2 text-sm font-medium">{cells[0]}</div>
+    {Array.from({ length: colCount }, (_, j) => (
+      <div className="px-2 py-2 text-center" key={j}>
+        <Cell cell={cells[j + 1] ?? ""} />
+      </div>
+    ))}
+  </div>
+);
+
+export const Matrix = defineComponent(
+  {
+    description:
+      '比較マトリクス。cols はカンマ区切りの列名 ("Option A, Option B")。子のネストしたリスト1行が1行になり、"- 項目 | yes | no" のように | でセルを区切る。セル値 yes|no|partial|✓|✗|△|– はアイコン化、他は文字列のまま',
+    schema: v.looseObject({
+      cols: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, cols, children }) => {
+    const headers = (cols ?? "")
+      .split(",")
+      .map((c) => c.trim())
+      .filter((c) => c !== "");
+    const rows = collectRows(children);
+    const colCount = Math.max(
+      headers.length,
+      ...rows.map((r) => Math.max(0, r.length - 1)),
+      1
+    );
+    const grid = {
+      gridTemplateColumns: `minmax(8rem,1.4fr) repeat(${colCount}, minmax(4.5rem,1fr))`,
+    };
+    return (
+      <Panel>
+        {nonEmpty(title) ? (
+          <CaptionBar className="font-medium">{title}</CaptionBar>
+        ) : null}
+        {headers.length > 0 ? (
+          <MatrixHeader colCount={colCount} grid={grid} headers={headers} />
+        ) : null}
+        <div className={DIVIDE_CLS}>
+          {rows.map((cells, i) => (
+            <MatrixRow cells={cells} colCount={colCount} grid={grid} key={i} />
+          ))}
+        </div>
+      </Panel>
+    );
+  }
+);