@suzumiyaaoba/mdxr 0.1.0

package/src/ui/sankey.tsx

@@ -0,0 +1,287 @@
+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 { ChartPanel } from "./chart-bits.js";
+import {
+  CHART_TONES,
+  fmtNum,
+  layoutSankey,
+  textList,
+  toneOf,
+} from "./chart.js";
+import { isEl, propOf } from "./children.js";
+import { NODE_SCHEMA, Node } from "./graph-specs.js";
+import { Icon } from "./icon.js";
+import { TEXT } from "./tones.js";
+
+/**
+ * Sankey diagram — a quantity splitting/merging across stage columns;
+ * ribbon thickness ∝ `<Link>` `value`. Nodes are implicit from link
+ * endpoints; `<Node id label stage>` children rename/reorder them.
+ */
+
+const LINK_SCHEMA = v.looseObject({
+  from: v.string(),
+  label: v.optional(v.string()),
+  to: v.string(),
+  value: NUMISH,
+});
+
+export const Link = defineComponent(
+  {
+    description:
+      "サンキー図のフロー。<Sankey> の子。from/to はノード id、value は流量 (リボンの太さ)。label で補足",
+    schema: LINK_SCHEMA,
+  },
+  // Standalone use: a `from → to value` line so misplaced links still render.
+  ({ from, to, value, label }): ReactElement => (
+    <div
+      className={`not-prose flex items-center gap-2 py-0.5 font-mono text-xs ${TEXT.muted}`}
+    >
+      <span>{from}</span>
+      <Icon className="h-3 w-3" name="lucide:arrow-right" />
+      <span>{to}</span>
+      <span className="opacity-70">{value}</span>
+      {nonEmpty(label) ? <span className="opacity-70">{label}</span> : null}
+    </div>
+  )
+);
+
+interface SankeyData {
+  /** Display label per node id (defaults to id). */
+  labels: Map<string, string>;
+  links: { from: string; to: string; value: number }[];
+  nodes: { id: string; stage?: number; tone?: string }[];
+  rest: ReactNode[];
+}
+
+/** Raw `stage` attr → number; numbers pass through, strings parse, rest is undefined. */
+const stageOf = (raw: unknown): number | undefined => {
+  if (typeof raw === "number") {
+    return raw;
+  }
+  if (typeof raw === "string" && raw !== "") {
+    return numOf(raw);
+  }
+  return undefined;
+};
+
+/** Raw `tone` attr → palette tone name, or undefined for unknown values. */
+const toneOfProp = (raw: unknown): string | undefined =>
+  typeof raw === "string" && (CHART_TONES as readonly string[]).includes(raw)
+    ? raw
+    : undefined;
+
+const collectNode = (child: ReactElement, data: SankeyData): void => {
+  const spec = parseProps(NODE_SCHEMA, child.props, "Node");
+  data.nodes.push({
+    id: spec.id,
+    stage: stageOf(propOf(child, "stage")),
+    tone: toneOfProp(propOf(child, "tone")),
+  });
+  if (nonEmpty(spec.label)) {
+    data.labels.set(spec.id, spec.label);
+  }
+};
+
+const collectFlow = (children: ReactNode): SankeyData => {
+  const data: SankeyData = {
+    labels: new Map(),
+    links: [],
+    nodes: [],
+    rest: [],
+  };
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Link)) {
+      const spec = parseProps(LINK_SCHEMA, child.props, "Link");
+      data.links.push({
+        from: spec.from,
+        to: spec.to,
+        value: numOf(spec.value) ?? 0,
+      });
+    } else if (isEl(child, Node)) {
+      collectNode(child, data);
+    } else {
+      data.rest.push(child);
+    }
+  }
+  return data;
+};
+
+const VB_W = 640;
+const VB_H = 340;
+const TOP = 26;
+const BOTTOM = 12;
+const H = VB_H - TOP - BOTTOM;
+const BAR_W = 10;
+const GAP = 14;
+const L_MARGIN = 96;
+const R_MARGIN = 96;
+
+const AXIS_TEXT = "fill-neutral-500 dark:fill-neutral-400";
+
+/** Node label position — left of stage-0 bars, right of last-stage bars, centered above inner bars. */
+const labelPos = (
+  stage: number,
+  last: number,
+  barX: number
+): { anchor: "end" | "middle" | "start"; x: number } => {
+  if (stage === 0) {
+    return { anchor: "end", x: barX - 8 };
+  }
+  if (stage === last) {
+    return { anchor: "start", x: barX + BAR_W + 8 };
+  }
+  return { anchor: "middle", x: barX + BAR_W / 2 };
+};
+
+export const Sankey = defineComponent(
+  {
+    description:
+      'サンキー図コンテナ (量の分配・合流)。<Link from to value> がリボン、<Node id label stage> でラベル/列指定。stages="A,B,C" で列ヘッダ、unit は値の単位',
+    schema: v.looseObject({
+      stages: v.optional(v.string()),
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, stages, unit, children }) => {
+    const { links, nodes, labels, rest } = collectFlow(children);
+    const layout = layoutSankey(
+      { links, nodes: nodes.map((n) => ({ id: n.id, stage: n.stage })) },
+      H,
+      GAP
+    );
+    const colX = (stage: number): number =>
+      layout.stages <= 1
+        ? VB_W / 2
+        : L_MARGIN +
+          (stage / (layout.stages - 1)) * (VB_W - L_MARGIN - R_MARGIN - BAR_W);
+    const headers = textList(stages);
+    const nodeById = new Map(layout.nodes.map((n) => [n.id, n]));
+    const toneIdx = new Map(layout.nodes.map((n, i) => [n.id, i] as const));
+    const styleOfNode = (id: string): ReturnType<typeof toneOf> => {
+      const specTone = nodes.find((n) => n.id === id)?.tone;
+      return toneOf(specTone, toneIdx.get(id) ?? 0);
+    };
+    const last = layout.stages - 1;
+
+    return (
+      <ChartPanel icon="lucide:waypoints" title={title}>
+        <div className="overflow-x-auto px-4 py-3">
+          <svg
+            className="h-auto w-full min-w-[28rem]"
+            viewBox={`0 0 ${VB_W} ${VB_H}`}
+          >
+            <title>{title ?? "sankey diagram"}</title>
+            {headers.map((h, i) =>
+              i >= layout.stages ? null : (
+                <text
+                  className={AXIS_TEXT}
+                  fontSize={8}
+                  key={h}
+                  letterSpacing="0.12em"
+                  textAnchor="middle"
+                  x={colX(i) + BAR_W / 2}
+                  y={12}
+                >
+                  {h.toUpperCase()}
+                </text>
+              )
+            )}
+            {layout.links.map((l, i) => {
+              const s = nodeById.get(l.from);
+              const t = nodeById.get(l.to);
+              if (s === undefined || t === undefined) {
+                return null;
+              }
+              const x1 = colX(s.stage) + BAR_W;
+              const x2 = colX(t.stage);
+              const y0 = TOP + s.y + l.sy;
+              const y1 = TOP + t.y + l.ty;
+              const th = Math.max(1, l.value * layout.k);
+              const midX = (x1 + x2) / 2;
+              const d = `M${x1} ${y0}C${midX} ${y0} ${midX} ${y1} ${x2} ${y1}L${x2} ${y1 + th}C${midX} ${y1 + th} ${midX} ${y0 + th} ${x1} ${y0 + th}Z`;
+              return (
+                <path className={styleOfNode(l.from).soft} d={d} key={`l${i}`}>
+                  <title>
+                    {`${labels.get(l.from) ?? l.from} → ${labels.get(l.to) ?? l.to} · ${fmtNum(l.value)}${unit ?? ""}`}
+                  </title>
+                </path>
+              );
+            })}
+            {layout.nodes.map((n) => {
+              const x = colX(n.stage);
+              const label = labels.get(n.id) ?? n.id;
+              const edge = n.stage === 0 || n.stage === last;
+              const { anchor, x: textX } = labelPos(n.stage, last, x);
+              return (
+                <g key={n.id}>
+                  <rect
+                    className={styleOfNode(n.id).fill}
+                    height={n.h}
+                    rx={1.5}
+                    width={BAR_W}
+                    x={x}
+                    y={TOP + n.y}
+                  >
+                    <title>{`${label} · ${fmtNum(n.value)}${unit ?? ""}`}</title>
+                  </rect>
+                  {edge ? (
+                    <>
+                      <text
+                        className={AXIS_TEXT}
+                        fontSize={10}
+                        textAnchor={anchor}
+                        x={textX}
+                        y={TOP + n.y + n.h / 2 - 1}
+                      >
+                        {label}
+                      </text>
+                      <text
+                        className="fill-neutral-400 dark:fill-neutral-500"
+                        fontSize={8}
+                        textAnchor={anchor}
+                        x={textX}
+                        y={TOP + n.y + n.h / 2 + 10}
+                      >
+                        {fmtNum(n.value)}
+                        {unit}
+                      </text>
+                    </>
+                  ) : (
+                    <>
+                      <text
+                        className={AXIS_TEXT}
+                        fontSize={10}
+                        textAnchor={anchor}
+                        x={textX}
+                        y={TOP + n.y - 12}
+                      >
+                        {label}
+                      </text>
+                      <text
+                        className="fill-neutral-400 dark:fill-neutral-500"
+                        fontSize={8}
+                        textAnchor={anchor}
+                        x={textX}
+                        y={TOP + n.y - 3}
+                      >
+                        {fmtNum(n.value)}
+                        {unit}
+                      </text>
+                    </>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+        {rest.length > 0 ? <div className="px-4 pb-3">{rest}</div> : null}
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/scatter.tsx

@@ -0,0 +1,237 @@
+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, fmtNum, niceBounds, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Scatter plot — <Point> dots on two auto-scaled numeric axes (x/y props
+ * name them). `size` turns a point into a bubble; `name` labels it.
+ */
+
+const POINT_SCHEMA = v.looseObject({
+  name: v.optional(v.string()),
+  size: v.optional(NUMISH),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  x: NUMISH,
+  y: NUMISH,
+});
+
+type PointSpec = v.InferOutput<typeof POINT_SCHEMA>;
+
+export const Point = defineComponent(
+  {
+    description:
+      "散布図の1点。<Scatter> の子。x/y は必須、name でラベル、size でバブル化、tone で色",
+    schema: POINT_SCHEMA,
+  },
+  // Standalone use: an `(x, y)` chip so misplaced points still render.
+  ({ x, y, name }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {nonEmpty(name) ? name : "point"}
+      <span className="opacity-70">
+        ({x}, {y})
+      </span>
+    </span>
+  )
+);
+
+const collectPoints = (
+  children: ReactNode
+): { pts: { spec: PointSpec; x: number; y: number }[]; rest: ReactNode[] } => {
+  const pts: { spec: PointSpec; x: number; y: number }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Point)) {
+      const spec = parseProps(POINT_SCHEMA, child.props, "Point");
+      const x = numOf(spec.x);
+      const y = numOf(spec.y);
+      if (x !== undefined && y !== undefined) {
+        pts.push({ spec, x, y });
+      }
+    } else {
+      rest.push(child);
+    }
+  }
+  return { pts, rest };
+};
+
+const VB_W = 640;
+const VB_H = 360;
+const PLOT = { bottom: 316, left: 48, right: 628, top: 12 };
+
+const GRID_STROKE = "stroke-neutral-200 dark:stroke-neutral-700";
+const BASE_STROKE = "stroke-neutral-300 dark:stroke-neutral-600";
+const TICK_TEXT = "fill-neutral-400 dark:fill-neutral-500";
+
+export const Scatter = defineComponent(
+  {
+    description:
+      "散布図コンテナ (2変数の相関)。<Point x y> を並べる。x/y で軸名、size 指定でバブル。軸はデータから自動スケール",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      x: v.optional(v.string()),
+      y: v.optional(v.string()),
+    }),
+  },
+  ({ title, x, y, children }) => {
+    const { pts, rest } = collectPoints(children);
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    const xExt = niceBounds(Math.min(0, ...xs), Math.max(1, ...xs));
+    const yExt = niceBounds(Math.min(0, ...ys), Math.max(1, ...ys));
+    const xSpan = xExt.max - xExt.min || 1;
+    const ySpan = yExt.max - yExt.min || 1;
+    const xOf = (val: number): number =>
+      PLOT.left + ((val - xExt.min) / xSpan) * (PLOT.right - PLOT.left);
+    const yOf = (val: number): number =>
+      PLOT.bottom - ((val - yExt.min) / ySpan) * (PLOT.bottom - PLOT.top);
+    const maxSize = Math.max(0, ...pts.map((p) => numOf(p.spec.size) ?? 0));
+
+    return (
+      <ChartPanel icon="lucide:chart-scatter" title={title}>
+        <div className="px-4 py-3">
+          <svg className="h-auto w-full" viewBox={`0 0 ${VB_W} ${VB_H}`}>
+            <title>{title ?? "scatter plot"}</title>
+            {xExt.ticks.map((t) => (
+              <g key={`x${t}`}>
+                <line
+                  className={GRID_STROKE}
+                  strokeDasharray="2 3"
+                  strokeWidth={1}
+                  x1={xOf(t)}
+                  x2={xOf(t)}
+                  y1={PLOT.top}
+                  y2={PLOT.bottom}
+                />
+                <text
+                  className={TICK_TEXT}
+                  fontSize={9}
+                  textAnchor="middle"
+                  x={xOf(t)}
+                  y={PLOT.bottom + 14}
+                >
+                  {fmtNum(t)}
+                </text>
+              </g>
+            ))}
+            {yExt.ticks.map((t) => (
+              <g key={`y${t}`}>
+                <line
+                  className={GRID_STROKE}
+                  strokeDasharray="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}
+            />
+            <line
+              className={BASE_STROKE}
+              strokeWidth={1}
+              x1={PLOT.left}
+              x2={PLOT.left}
+              y1={PLOT.top}
+              y2={PLOT.bottom}
+            />
+            {nonEmpty(x) ? (
+              <text
+                className={TICK_TEXT}
+                fontSize={9}
+                letterSpacing="0.12em"
+                textAnchor="middle"
+                x={(PLOT.left + PLOT.right) / 2}
+                y={VB_H - 10}
+              >
+                {x.toUpperCase()}
+              </text>
+            ) : null}
+            {nonEmpty(y) ? (
+              <text
+                className={TICK_TEXT}
+                fontSize={9}
+                letterSpacing="0.12em"
+                textAnchor="middle"
+                transform={`rotate(-90 14 ${(PLOT.top + PLOT.bottom) / 2})`}
+                x={14}
+                y={(PLOT.top + PLOT.bottom) / 2}
+              >
+                {y.toUpperCase()}
+              </text>
+            ) : null}
+            {pts.map((p, i) => {
+              const style = toneOf(p.spec.tone, i);
+              const size = numOf(p.spec.size);
+              const r =
+                size === undefined || maxSize === 0
+                  ? 4
+                  : 4 + Math.sqrt(size / maxSize) * 10;
+              return (
+                <g key={i}>
+                  <circle
+                    className={size === undefined ? style.fill : style.soft}
+                    cx={xOf(p.x)}
+                    cy={yOf(p.y)}
+                    r={r}
+                  >
+                    <title>
+                      {`${p.spec.name ?? "point"} · ${fmtNum(p.x)}, ${fmtNum(p.y)}${size === undefined ? "" : ` · ${fmtNum(size)}`}`}
+                    </title>
+                  </circle>
+                  {size === undefined ? null : (
+                    <circle
+                      className={style.stroke}
+                      cx={xOf(p.x)}
+                      cy={yOf(p.y)}
+                      fill="none"
+                      r={r}
+                      strokeWidth={1}
+                    />
+                  )}
+                  {nonEmpty(p.spec.name) ? (
+                    <text
+                      className="fill-neutral-600 dark:fill-neutral-300"
+                      fontSize={9}
+                      x={xOf(p.x) + r + 3}
+                      y={yOf(p.y) + 3}
+                    >
+                      {p.spec.name}
+                    </text>
+                  ) : null}
+                </g>
+              );
+            })}
+          </svg>
+          {rest.length > 0 ? (
+            <div className={`${TEXT_MICRO} ${TEXT.muted}`}>{rest}</div>
+          ) : null}
+        </div>
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/schema.tsx

@@ -0,0 +1,113 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { RowNote, Section } from "./bits.js";
+import { Icon } from "./icon.js";
+import {
+  BORDER_CLS,
+  LOC_CLS,
+  MINI_CHIP_CLS,
+  SURFACE_CLS,
+  TEXT,
+  TEXT_SUB,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const DbField = defineComponent(
+  {
+    description:
+      'テーブルカラム1行。name/type は必須。pk / fk="table.col" / unique / null で制約チップ、default で既定値。children は説明文',
+    schema: v.looseObject({
+      default: v.optional(v.string()),
+      fk: v.optional(v.string()),
+      name: v.string(),
+      null: BOOLISH_PROP,
+      pk: BOOLISH_PROP,
+      type: v.string(),
+      unique: BOOLISH_PROP,
+    }),
+  },
+  ({ name, type, pk, fk, unique, null: nullable, default: def, children }) => (
+    <div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1 px-4 py-2">
+      <span className={`w-40 shrink-0 font-mono text-[0.85em] ${TEXT.code}`}>
+        {name}
+      </span>
+      <span className={`${MINI_CHIP_CLS} ${TONE.neutral} font-mono`}>
+        {type}
+      </span>
+      {attrTrue(pk) ? (
+        <span className={`${MINI_CHIP_CLS} ${TONE.amber}`}>
+          <Icon className="h-2.5 w-2.5" name="lucide:key-round" />
+          PK
+        </span>
+      ) : null}
+      {nonEmpty(fk) ? (
+        <span className={`${MINI_CHIP_CLS} ${TONE.sky}`}>
+          <Icon className="h-2.5 w-2.5" name="lucide:link" />
+          FK → {fk}
+        </span>
+      ) : null}
+      {attrTrue(unique) ? (
+        <span className={`${MINI_CHIP_CLS} ${TONE.violet}`}>unique</span>
+      ) : null}
+      {attrTrue(nullable) ? (
+        <span className={`${MINI_CHIP_CLS} ${TONE.neutral}`}>null</span>
+      ) : null}
+      {nonEmpty(def) ? (
+        <span className={`font-mono text-xs ${TEXT.faint}`}>= {def}</span>
+      ) : null}
+      <RowNote className={TRIM_CLS}>{children}</RowNote>
+    </div>
+  )
+);
+
+export const DbTable = defineComponent(
+  {
+    description:
+      "テーブル定義ブロック。name は必須、note で補足 (エンジン・行数など)。<DbField> をカラム行として並べる",
+    schema: v.looseObject({
+      name: v.string(),
+      note: v.optional(v.string()),
+    }),
+  },
+  ({ name, note, children }) => (
+    <div
+      className={`not-prose mb-4 overflow-hidden rounded-lg border last:mb-0 ${BORDER_CLS}`}
+    >
+      <div
+        className={`flex flex-wrap items-center gap-x-2 gap-y-1 border-b px-4 py-2 text-xs ${BORDER_CLS} ${SURFACE_CLS}`}
+      >
+        <Icon className={`h-3.5 w-3.5 ${TEXT.faint}`} name="lucide:table-2" />
+        <code className={`font-mono font-semibold ${TEXT.code}`}>{name}</code>
+        {nonEmpty(note) ? (
+          <span className={`ml-auto ${TEXT_SUB} ${TEXT.faint}`}>{note}</span>
+        ) : null}
+      </div>
+      <div className="divide-y divide-neutral-100 dark:divide-neutral-800/60">
+        {children}
+      </div>
+    </div>
+  )
+);
+
+export const Schema = defineComponent(
+  {
+    description:
+      "DB スキーマ定義のコンテナ。<DbTable> を並べる。title は見出し。マイグレーション計画・データモデル説明向け",
+    schema: v.looseObject({
+      engine: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, engine, children }) => (
+    <Section title={title}>
+      {nonEmpty(engine) ? (
+        <div className={`mb-2 ${LOC_CLS}`}>{engine}</div>
+      ) : null}
+      {children}
+    </Section>
+  )
+);