@suzumiyaaoba/mdxr 0.1.0

package/src/ui/tree.tsx

@@ -0,0 +1,281 @@
+import { Fragment } from "react";
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, textOf } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrFalse, BOOLISH_PROP } from "./attrs.js";
+import { FoldChev } from "./bits.js";
+import { isEl } from "./children.js";
+import { fileIcon, folderIcon } from "./file-icon.js";
+import { Icon } from "./icon.js";
+import {
+  BORDER_CLS,
+  DISCLOSURE_ROW_CLS,
+  RAIL_BG_CLS,
+  SUNKEN_CLS,
+  TEXT,
+  TONE_TEXT,
+  TREE_ROW_CLS,
+} from "./tones.js";
+
+type El = ReactElement<{ children?: ReactNode }>;
+
+/** `name — note` or `name # note` inside a list item attaches a muted note. */
+const NOTE_RE = /\s+(?:—|#)\s+/u;
+
+/** `...` or `…` as the whole name marks intentionally omitted entries. */
+const PLACEHOLDER_RE = /^(?:\.{3}|…)$/u;
+
+const closed = attrFalse;
+
+const NodeIcon = ({
+  dir,
+  name,
+}: {
+  dir: boolean;
+  name: string;
+}): ReactElement => (
+  <Icon
+    className={`h-3.5 w-3.5 shrink-0 self-center ${dir ? TONE_TEXT.amber : TEXT.faint}`}
+    name={dir ? folderIcon(name) : fileIcon(name)}
+  />
+);
+
+/** Horizontal tick joining a nested row to its parent's vertical rail. */
+const Tick = (): ReactElement => (
+  <span
+    aria-hidden
+    className={`absolute top-[0.72em] -left-3 h-px w-2.5 ${RAIL_BG_CLS}`}
+  />
+);
+
+/**
+ * Vertical rail joining a nested row to its siblings. `-top-0.5` bridges the
+ * `space-y-0.5` gap between rows so the line stays continuous; on the last row
+ * it stops at the tick, turning `├─` into `└─`.
+ */
+const Rail = ({ last }: { last: boolean }): ReactElement => (
+  <span
+    aria-hidden
+    className={`absolute -top-0.5 -left-3 w-px ${RAIL_BG_CLS} ${
+      last ? "h-[calc(0.72em_+_3px)]" : "bottom-0"
+    }`}
+  />
+);
+
+/**
+ * Column spacer matching the disclosure chevron's width so file rows align
+ * with directory rows (which lead with a chevron, like Starlight's FileTree).
+ */
+const Spacer = (): ReactElement => (
+  <span aria-hidden className="w-3 shrink-0" />
+);
+
+/** A tree row: guide tick plus its flex children. */
+const Row = ({
+  depth,
+  children,
+}: {
+  children?: ReactNode;
+  depth: number;
+}): ReactElement => (
+  <div className={TREE_ROW_CLS}>
+    {depth > 0 ? <Tick /> : null}
+    {children}
+  </div>
+);
+
+/** Muted `…` row marking omitted entries (Starlight-style placeholder). */
+const PlaceholderRow = ({ depth }: { depth: number }): ReactElement => (
+  <Row depth={depth}>
+    <Spacer />
+    <span className={TEXT.faint}>…</span>
+  </Row>
+);
+
+/** Icon + name; wrapped in a highlight pill when the name was bold. */
+const Entry = ({
+  dir,
+  highlighted,
+  label,
+  children,
+}: {
+  children?: ReactNode;
+  dir: boolean;
+  highlighted: boolean;
+  label: string;
+}): ReactElement => {
+  const nameEl = (
+    <span
+      className={`group-hover:text-sky-600 dark:group-hover:text-sky-400${dir ? " font-medium" : ""}`}
+    >
+      {children}
+    </span>
+  );
+  return highlighted ? (
+    <span className="-mx-1 inline-flex items-baseline gap-1.5 rounded bg-amber-500/15 px-1 outline-1 outline-amber-500/35">
+      <NodeIcon dir={dir} name={label} />
+      {nameEl}
+    </span>
+  ) : (
+    <>
+      <NodeIcon dir={dir} name={label} />
+      {nameEl}
+    </>
+  );
+};
+
+const nestedListCls = "mt-0.5 ml-[7px] list-none space-y-0.5 p-0 pl-3";
+
+/** A list item's pieces: label/note text, nested <ul>s, inline row content. */
+const rowParts = (
+  child: El
+): {
+  label: string;
+  name: string | null;
+  nested: El[];
+  note: string | null;
+  row: ReactNode[];
+} => {
+  const kids = flattenChildren(child.props.children);
+  const nested = kids.filter((k): k is El => isEl(k, "ul"));
+  const nestedSet = new Set<ReactNode>(nested);
+  const row = kids
+    .filter((k) => !nestedSet.has(k))
+    .flatMap((k): ReactNode[] =>
+      isEl(k, "p") ? flattenChildren(k.props.children) : [k]
+    );
+
+  const full = textOf(row);
+  const m = NOTE_RE.exec(full);
+  const name = m === null ? null : full.slice(0, m.index).trimEnd();
+  const note = m === null ? null : full.slice(m.index + m[0].length).trim();
+  return { label: (name ?? full).trim(), name, nested, note, row };
+};
+
+/** Render a `<ul>` element (and its nested lists) as file-tree rows. */
+const renderList = (
+  node: El,
+  depth: number,
+  expanded: boolean
+): ReactElement => {
+  const renderItem = (child: El, last: boolean): ReactElement => {
+    const { label, name, nested, note, row } = rowParts(child);
+
+    // A `...`/`…` entry marks omitted files — no icon, not collapsible.
+    if (PLACEHOLDER_RE.test(label)) {
+      return (
+        <li className="relative">
+          {depth > 0 ? <Rail last={last} /> : null}
+          <PlaceholderRow depth={depth} />
+        </li>
+      );
+    }
+
+    const isDir = nested.length > 0 || label.endsWith("/");
+    const entry = (
+      <Entry dir={isDir} highlighted={isEl(row[0], "strong")} label={label}>
+        {name ?? row}
+      </Entry>
+    );
+    const noteEl =
+      note === null ? null : (
+        <span className={`text-[0.85em] ${TEXT.faint}`}>{note}</span>
+      );
+
+    if (!isDir) {
+      return (
+        <li className="relative">
+          {depth > 0 ? <Rail last={last} /> : null}
+          <Row depth={depth}>
+            <Spacer />
+            {entry}
+            {noteEl}
+          </Row>
+        </li>
+      );
+    }
+
+    // Directory: collapsible via native <details>. A bare `dir/` (no children)
+    // starts closed and reveals a `…` placeholder — same as Starlight.
+    return (
+      <li className="relative">
+        {depth > 0 ? <Rail last={last} /> : null}
+        <details open={expanded && nested.length > 0}>
+          <summary className={`group ${DISCLOSURE_ROW_CLS}`}>
+            {depth > 0 ? <Tick /> : null}
+            <FoldChev className="group-hover:text-neutral-600 dark:group-hover:text-neutral-300" />
+            {entry}
+            {noteEl}
+          </summary>
+          {nested.length > 0 ? (
+            nested.map((ul, j) => (
+              <Fragment key={ul.key ?? j}>
+                {renderList(ul, depth + 1, expanded)}
+              </Fragment>
+            ))
+          ) : (
+            <ul className={nestedListCls}>
+              <li className="relative">
+                <Rail last />
+                <PlaceholderRow depth={depth + 1} />
+              </li>
+            </ul>
+          )}
+        </details>
+      </li>
+    );
+  };
+
+  const items = flattenChildren(node.props.children);
+  const lastLi = items.findLastIndex((c) => isEl(c, "li"));
+  return (
+    <ul
+      className={depth === 0 ? "m-0 list-none space-y-0.5 p-0" : nestedListCls}
+    >
+      {items.map((child, i) => {
+        if (!isEl(child, "li")) {
+          return <Fragment key={i}>{child}</Fragment>;
+        }
+        return (
+          <Fragment key={child.key ?? i}>
+            {renderItem(child, i === lastLi)}
+          </Fragment>
+        );
+      })}
+    </ul>
+  );
+};
+
+export const Tree = defineComponent(
+  {
+    description:
+      'ファイルツリー。子のネストしたリストを描画する。末尾 `/` または子を持つ項目はフォルダでクリックで折り畳める (JS 不要)。open="false" で全フォルダを初期折り畳み。`名前 — 注記` で注釈、`...` または `…` で省略プレースホルダ、`**太字**` でハイライト',
+    schema: v.looseObject({
+      open: BOOLISH_PROP,
+      root: v.optional(v.string()),
+    }),
+  },
+  ({ root, open, children }) => (
+    <div
+      className={`mdxr-tree not-prose my-6 overflow-x-auto rounded-lg border ${SUNKEN_CLS} px-4 py-3 font-mono text-sm ${BORDER_CLS}`}
+    >
+      {nonEmpty(root) ? (
+        <div className="mb-1.5 flex items-center gap-1.5 font-semibold">
+          <NodeIcon dir name={root} />
+          {root}
+        </div>
+      ) : null}
+      {flattenChildren(children).map((n, i) =>
+        isEl(n, "ul") ? (
+          <Fragment key={n.key ?? i}>
+            {renderList(n, 0, !closed(open))}
+          </Fragment>
+        ) : (
+          <Fragment key={i}>{n}</Fragment>
+        )
+      )}
+    </div>
+  )
+);

package/src/ui/treemap.tsx

@@ -0,0 +1,128 @@
+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, squarify, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { TEXT_MICRO } from "./tones.js";
+
+/**
+ * Treemap — part-of-whole areas packed by the squarified algorithm.
+ * <Tile> size ∝ `value`; labels carry name and share percent.
+ */
+
+const TILE_SCHEMA = v.looseObject({
+  name: v.string(),
+  note: v.optional(v.string()),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  value: NUMISH,
+});
+
+type TileSpec = v.InferOutput<typeof TILE_SCHEMA>;
+
+export const Tile = defineComponent(
+  {
+    description:
+      "ツリーマップの1領域。<Treemap> の子。name/value は必須、note で補足、tone で色指定",
+    schema: TILE_SCHEMA,
+  },
+  // Standalone use: a `name value` chip so misplaced tiles 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 collectTiles = (
+  children: ReactNode
+): { rest: ReactNode[]; tiles: { n: number; spec: TileSpec }[] } => {
+  const tiles: { n: number; spec: TileSpec }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Tile)) {
+      const spec = parseProps(TILE_SCHEMA, child.props, "Tile");
+      tiles.push({ n: Math.max(0, numOf(spec.value) ?? 0), spec });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, tiles };
+};
+
+/** Squarify space — a 16:9 canvas in percentage units. */
+const CANVAS = { h: 56.25, w: 100, x: 0, y: 0 };
+
+export const Treemap = defineComponent(
+  {
+    description:
+      "ツリーマップコンテナ (階層的な構成比)。<Tile name value> を並べる。面積は value に比例、squarified レイアウト。unit は値の単位",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, unit, children }) => {
+    const { tiles, rest } = collectTiles(children);
+    const total = tiles.reduce((a, t) => a + t.n, 0);
+    const rects = squarify(
+      tiles.map((t) => t.n),
+      CANVAS
+    );
+    return (
+      <ChartPanel
+        figure={nonEmpty(unit) ? `${fmtNum(total)}${unit}` : undefined}
+        icon="lucide:layout-grid"
+        title={title}
+      >
+        <div className="px-4 py-3">
+          <div className="relative aspect-video w-full">
+            {tiles.map((t, i) => {
+              const r = rects[i];
+              if (r === undefined || r.w <= 0 || r.h <= 0) {
+                return null;
+              }
+              const share = total === 0 ? 0 : (t.n / total) * 100;
+              const small = r.w < 16 || r.h < 12;
+              return (
+                <div
+                  className={`absolute overflow-hidden rounded border border-white dark:border-neutral-950 ${toneOf(t.spec.tone, i).tile}`}
+                  key={t.spec.name}
+                  style={{
+                    height: `${r.h}%`,
+                    left: `${r.x}%`,
+                    top: `${r.y}%`,
+                    width: `${r.w}%`,
+                  }}
+                  title={`${t.spec.name} · ${fmtNum(t.n)}${unit ?? ""} (${Math.round(share)}%)`}
+                >
+                  <div className="flex h-full flex-col p-1.5">
+                    <span className="truncate text-xs font-medium">
+                      {t.spec.name}
+                    </span>
+                    {small ? null : (
+                      <span
+                        className={`font-mono ${TEXT_MICRO} tabular-nums opacity-80`}
+                      >
+                        {fmtNum(t.n)}
+                        {unit}
+                        {` · ${Math.round(share)}%`}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {rest.length > 0 ? <div className="px-4 pb-3">{rest}</div> : null}
+      </ChartPanel>
+    );
+  }
+);

package/src/ui/venn.tsx

@@ -0,0 +1,258 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, parseProps } from "../define.js";
+import { NUMISH, numOf } from "./attrs.js";
+import { CODE_CHIP_CLS } from "./bits.js";
+import { ChartPanel } from "./chart-bits.js";
+import { CHART_TONES, fmtNum, textList, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Venn diagram — 2 or 3 <Set> circles plus <Overlap> labels at the
+ * intersections. Circles are uniform (a Venn is not to scale); values
+ * print inside each set's own region.
+ */
+
+const SET_SCHEMA = v.looseObject({
+  name: v.string(),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  value: NUMISH,
+});
+
+const OVERLAP_SCHEMA = v.looseObject({
+  sets: v.string(),
+  value: NUMISH,
+});
+
+type SetSpec = v.InferOutput<typeof SET_SCHEMA>;
+type OverlapSpec = v.InferOutput<typeof OVERLAP_SCHEMA>;
+
+export const Set = defineComponent(
+  {
+    description:
+      "ベン図の1集合。<Venn> の子 (2–3個)。name/value は必須、tone で色",
+    schema: SET_SCHEMA,
+  },
+  // Standalone use: a `name value` chip so misplaced sets still render.
+  ({ name, value }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {name}
+      <span className="opacity-70">{value}</span>
+    </span>
+  )
+);
+
+export const Overlap = defineComponent(
+  {
+    description:
+      'ベン図の重なり領域。<Venn> の子。sets="a,b" で対象の Set 名 (2個なら両方)、value は必須',
+    schema: OVERLAP_SCHEMA,
+  },
+  // Standalone use: a `a∩b value` chip so misplaced overlaps still render.
+  ({ sets, value }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {sets.replaceAll(",", "∩")}
+      <span className="opacity-70">{value}</span>
+    </span>
+  )
+);
+
+interface Circle {
+  cx: number;
+  cy: number;
+  r: number;
+  spec: SetSpec;
+  value: number;
+}
+
+const collectSets = (
+  children: ReactNode
+): {
+  overlaps: { names: string[]; spec: OverlapSpec; value: number }[];
+  rest: ReactNode[];
+  sets: { spec: SetSpec; value: number }[];
+} => {
+  const sets: { spec: SetSpec; value: number }[] = [];
+  const overlaps: { names: string[]; spec: OverlapSpec; value: number }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Set)) {
+      const spec = parseProps(SET_SCHEMA, child.props, "Set");
+      sets.push({ spec, value: numOf(spec.value) ?? 0 });
+    } else if (isEl(child, Overlap)) {
+      const spec = parseProps(OVERLAP_SCHEMA, child.props, "Overlap");
+      overlaps.push({
+        names: textList(spec.sets),
+        spec,
+        value: numOf(spec.value) ?? 0,
+      });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { overlaps, rest, sets };
+};
+
+const VB_W = 400;
+const VB_H = 300;
+
+/** Fixed circle geometry — index-aligned with the first 2–3 sets. */
+const GEOMETRY: { cx: number; cy: number; r: number }[][] = [
+  [],
+  [],
+  [
+    { cx: 150, cy: 150, r: 92 },
+    { cx: 250, cy: 150, r: 92 },
+  ],
+  [
+    { cx: 200, cy: 116, r: 78 },
+    { cx: 148, cy: 206, r: 78 },
+    { cx: 252, cy: 206, r: 78 },
+  ],
+];
+
+const NAME_TEXT = "fill-neutral-600 dark:fill-neutral-300";
+const VALUE_TEXT = "fill-neutral-500 dark:fill-neutral-400";
+
+export const Venn = defineComponent(
+  {
+    description:
+      'ベン図コンテナ (集合の重なり)。<Set name value> を 2–3 個と <Overlap sets="a,b" value> で交差部の値。unit は値の単位',
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, unit, children }) => {
+    const { sets, overlaps, rest } = collectSets(children);
+    const geom = GEOMETRY[sets.length] ?? GEOMETRY[3];
+    const circles: Circle[] = sets.map((s, i) => ({
+      ...(geom[i] ?? geom.at(-1)),
+      spec: s.spec,
+      value: s.value,
+    }));
+    // A set's own label sits at its centroid pushed away from the other
+    // circles' centers, so it lands in the non-overlapping region.
+    const ownLabel = (c: Circle): { x: number; y: number } => {
+      let dx = 0;
+      let dy = 0;
+      for (const o of circles) {
+        if (o !== c) {
+          dx += c.cx - o.cx;
+          dy += c.cy - o.cy;
+        }
+      }
+      const len = Math.hypot(dx, dy) || 1;
+      return {
+        x: c.cx + (dx / len) * c.r * 0.42,
+        y: c.cy + (dy / len) * c.r * 0.42,
+      };
+    };
+    // An overlap label sits at the mean of its member centers, pushed away
+    // from the non-members' centers (into the member-only lens).
+    const overlapLabel = (names: string[]): { x: number; y: number } => {
+      const isMember = (c: Circle): boolean =>
+        names.some(
+          (n) =>
+            c.spec.name === n || c.spec.name.toLowerCase() === n.toLowerCase()
+        );
+      const members = circles.filter(isMember);
+      const others = circles.filter((c) => !isMember(c));
+      const mx =
+        members.reduce((a, c) => a + c.cx, 0) / Math.max(1, members.length);
+      const my =
+        members.reduce((a, c) => a + c.cy, 0) / Math.max(1, members.length);
+      if (others.length === 0) {
+        return { x: mx, y: my };
+      }
+      const ox =
+        others.reduce((a, c) => a + c.cx, 0) / Math.max(1, others.length);
+      const oy =
+        others.reduce((a, c) => a + c.cy, 0) / Math.max(1, others.length);
+      const dx = mx - ox;
+      const dy = my - oy;
+      const len = Math.hypot(dx, dy) || 1;
+      return { x: mx + (dx / len) * 18, y: my + (dy / len) * 18 };
+    };
+
+    return (
+      <ChartPanel icon="lucide:blend" title={title}>
+        <div className="px-4 py-3">
+          {circles.length < 2 ? (
+            <p className={`text-sm ${TEXT.muted}`}>
+              Venn needs at least 2 sets.
+            </p>
+          ) : (
+            <svg
+              className="mx-auto h-auto w-full max-w-md"
+              viewBox={`0 0 ${VB_W} ${VB_H}`}
+            >
+              <title>{title ?? "venn diagram"}</title>
+              {circles.map((c, i) => {
+                const style = toneOf(c.spec.tone, i);
+                return (
+                  <circle
+                    className={`${style.soft} ${style.stroke}`}
+                    cx={c.cx}
+                    cy={c.cy}
+                    key={c.spec.name}
+                    r={c.r}
+                    strokeWidth={1.5}
+                  />
+                );
+              })}
+              {circles.map((c) => {
+                const p = ownLabel(c);
+                return (
+                  <g key={c.spec.name}>
+                    <text
+                      className={NAME_TEXT}
+                      fontSize={11}
+                      fontWeight={600}
+                      textAnchor="middle"
+                      x={p.x}
+                      y={p.y}
+                    >
+                      {c.spec.name}
+                    </text>
+                    <text
+                      className={VALUE_TEXT}
+                      fontSize={9}
+                      textAnchor="middle"
+                      x={p.x}
+                      y={p.y + 12}
+                    >
+                      {fmtNum(c.value)}
+                      {unit}
+                    </text>
+                  </g>
+                );
+              })}
+              {overlaps.map((o) => {
+                const p = overlapLabel(o.names);
+                return (
+                  <text
+                    className={VALUE_TEXT}
+                    fontSize={10}
+                    fontWeight={600}
+                    key={o.spec.sets}
+                    textAnchor="middle"
+                    x={p.x}
+                    y={p.y + 3}
+                  >
+                    {fmtNum(o.value)}
+                  </text>
+                );
+              })}
+            </svg>
+          )}
+          {rest.length > 0 ? (
+            <div className={`${TEXT_MICRO} ${TEXT.muted}`}>{rest}</div>
+          ) : null}
+        </div>
+      </ChartPanel>
+    );
+  }
+);