@suzumiyaaoba/mdxr 0.1.0

package/src/ui/hypothesis.tsx

@@ -0,0 +1,94 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { isOneOf } from "../guards.js";
+import { TITLE_PROP } from "./attrs.js";
+import { CountedList, IndexedCard, Pill } from "./bits.js";
+import { useChildIndex } from "./child-index.js";
+import { countByProp } from "./children.js";
+import { TONE } from "./tones.js";
+
+export const HYPOTHESIS_STATUSES = [
+  "supported",
+  "refuted",
+  "untested",
+] as const;
+export type HypothesisStatus = (typeof HYPOTHESIS_STATUSES)[number];
+
+export const isHypothesisStatus = isOneOf(HYPOTHESIS_STATUSES);
+
+const STYLES: Record<
+  HypothesisStatus,
+  { cls: string; icon: string; label: string }
+> = {
+  refuted: {
+    cls: TONE.red,
+    icon: "lucide:circle-x",
+    label: "Refuted",
+  },
+  supported: {
+    cls: TONE.emerald,
+    icon: "lucide:circle-check",
+    label: "Supported",
+  },
+  untested: {
+    cls: TONE.neutral,
+    icon: "lucide:flask-conical",
+    label: "Untested",
+  },
+};
+
+export const Hypothesis = defineComponent(
+  {
+    description:
+      "検証対象の仮説。status は supported|refuted|untested（支持された/棄却された/未検証）。title と children（検証内容・証拠）",
+    schema: v.looseObject({
+      status: v.optional(v.picklist(HYPOTHESIS_STATUSES), "untested"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ status, title, children }) => {
+    const { n } = useChildIndex();
+    const s = STYLES[status];
+    return (
+      <IndexedCard
+        n={n}
+        pill={
+          <Pill className={s.cls} icon={s.icon}>
+            {s.label}
+          </Pill>
+        }
+        title={title}
+      >
+        {children}
+      </IndexedCard>
+    );
+  }
+);
+
+export const Hypotheses = defineComponent(
+  {
+    description:
+      "仮説リストのコンテナ。<Hypothesis> を並べ、status 別の件数サマリを上部に表示",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <CountedList
+      counts={countByProp(
+        children,
+        Hypothesis,
+        "status",
+        isHypothesisStatus,
+        "untested"
+      )}
+      labelOf={(k) =>
+        isHypothesisStatus(k) ? STYLES[k].label.toLowerCase() : k
+      }
+      noun={["hypothesis", "hypotheses"]}
+      order={HYPOTHESIS_STATUSES}
+      title={title}
+    >
+      {children}
+    </CountedList>
+  )
+);

package/src/ui/icon.tsx

@@ -0,0 +1,80 @@
+import { icons as lucide } from "@iconify-json/lucide";
+import { icons as vscodeIcons } from "@iconify-json/vscode-icons";
+import { addCollection, Icon as IconifyIcon, iconLoaded } from "@iconify/react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+
+// Bundled icon sets, registered once so names resolve synchronously during
+// static rendering (no runtime fetch — the Iconify API is never used).
+addCollection(lucide);
+addCollection(vscodeIcons);
+
+/**
+ * Every icon name resolved while a document renders. The renderer drains this
+ * around each render so the hydration bundle can register exactly the used
+ * subset — the full sets are several MB. On the client the set fills but is
+ * never read.
+ */
+const usedIcons = new Set<string>();
+
+/** Drain the recorded icon names (returns them and resets for the next render). */
+export const takeUsedIcons = (): string[] => {
+  const names = [...usedIcons];
+  usedIcons.clear();
+  return names;
+};
+
+const DEFAULT_PREFIX = "lucide";
+
+/** Normalize `name` to `prefix:name`; bare names use the lucide set. */
+export const normalizeIconName = (name: string): string =>
+  name.includes(":") ? name : `${DEFAULT_PREFIX}:${name}`;
+
+/** True when `name` resolves to a registered icon. */
+export const hasIcon = (name: unknown): name is string => {
+  if (typeof name !== "string") {
+    return false;
+  }
+  const normalized = normalizeIconName(name);
+  const loaded = iconLoaded(normalized);
+  // Record successful probes too: a false on the client must match a false
+  // here, and a true result typically ends up rendered via <Icon>.
+  if (loaded) {
+    usedIcons.add(normalized);
+  }
+  return loaded;
+};
+
+export const Icon = defineComponent(
+  {
+    description:
+      'Iconify アイコン (lucide と vscode-icons 同梱)。name="lucide:rocket"（"rocket" でも可）や "vscode-icons:file-type-typescript"。label で意味を持つ画像、省略時は装飾 (aria-hidden)。className でサイズ/色を指定',
+    schema: v.looseObject({
+      className: v.optional(v.string()),
+      label: v.optional(v.string()),
+      name: v.pipe(
+        v.string(),
+        v.check(
+          (n) => iconLoaded(normalizeIconName(n)),
+          (i) => `unknown icon: ${i.input}`
+        )
+      ),
+    }),
+  },
+  ({ name, label, className }) => {
+    const normalized = normalizeIconName(name);
+    usedIcons.add(normalized);
+    return (
+      <IconifyIcon
+        ssr
+        aria-hidden={!nonEmpty(label)}
+        aria-label={nonEmpty(label) ? label : undefined}
+        className={className}
+        icon={normalized}
+        inline
+      />
+    );
+  }
+);

package/src/ui/incident.tsx

@@ -0,0 +1,130 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { isOneOf, nonEmpty } from "../guards.js";
+import { Panel, Pill, TrimBody } from "./bits.js";
+import { Icon } from "./icon.js";
+import { SEVERITY_LEVELS, Severity } from "./severity.js";
+import { BORDER_CLS, TEXT, TEXT_SUB, TONE, TONE_TEXT } from "./tones.js";
+
+export const INCIDENT_STATUSES = [
+  "investigating",
+  "identified",
+  "monitoring",
+  "resolved",
+] as const;
+export type IncidentStatus = (typeof INCIDENT_STATUSES)[number];
+
+const isIncidentStatus = isOneOf(INCIDENT_STATUSES);
+
+const INCIDENT_STYLES: Record<
+  IncidentStatus,
+  { cls: string; icon: string; label: string }
+> = {
+  identified: {
+    cls: TONE.amber,
+    icon: "lucide:crosshair",
+    label: "Identified",
+  },
+  investigating: {
+    cls: TONE.orange,
+    icon: "lucide:search",
+    label: "Investigating",
+  },
+  monitoring: {
+    cls: TONE.sky,
+    icon: "lucide:activity",
+    label: "Monitoring",
+  },
+  resolved: {
+    cls: TONE.emerald,
+    icon: "lucide:circle-check",
+    label: "Resolved",
+  },
+};
+
+const MetaRow = (props: {
+  label: string;
+  value: string | undefined;
+}): ReactElement | null =>
+  nonEmpty(props.value) ? (
+    <div className="flex items-baseline gap-2">
+      <span className={`w-20 shrink-0 ${TEXT_SUB} ${TEXT.faint}`}>
+        {props.label}
+      </span>
+      <span className="text-sm">{props.value}</span>
+    </div>
+  ) : null;
+
+export const Incident = defineComponent(
+  {
+    description:
+      "インシデント/ポストモーテムのヘッダブロック。title は必須、severity (critical|high|medium|low|info) と status (investigating|identified|monitoring|resolved) のピル、started/detected/resolved/duration/impact をメタ行に表示。children は概要文",
+    schema: v.looseObject({
+      detected: v.optional(v.string()),
+      duration: v.optional(v.string()),
+      impact: v.optional(v.string()),
+      resolved: v.optional(v.string()),
+      severity: v.optional(v.picklist(SEVERITY_LEVELS)),
+      started: v.optional(v.string()),
+      status: v.optional(v.picklist(INCIDENT_STATUSES)),
+      title: v.string(),
+    }),
+  },
+  ({
+    title,
+    severity,
+    status,
+    started,
+    detected,
+    resolved,
+    duration,
+    impact,
+    children,
+  }) => {
+    const st = isIncidentStatus(status) ? INCIDENT_STYLES[status] : undefined;
+    const meta = [
+      ["Started", started],
+      ["Detected", detected],
+      ["Resolved", resolved],
+      ["Duration", duration],
+    ] as const;
+    const hasMeta = meta.some(([, val]) => nonEmpty(val)) || nonEmpty(impact);
+    return (
+      <Panel className="px-4 py-3">
+        <div className="flex flex-wrap items-center gap-2">
+          {severity === undefined ? null : <Severity level={severity} />}
+          {st === undefined ? null : (
+            <Pill className={st.cls} icon={st.icon}>
+              {st.label}
+            </Pill>
+          )}
+          <span className="font-semibold">{title}</span>
+        </div>
+        {hasMeta ? (
+          <div className={`mt-2 space-y-1 border-t pt-2 ${BORDER_CLS}`}>
+            {meta.map(([label, val]) => (
+              <MetaRow key={label} label={label} value={val} />
+            ))}
+            {nonEmpty(impact) ? (
+              <div className="flex items-baseline gap-2">
+                <span className={`w-20 shrink-0 ${TEXT_SUB} ${TEXT.faint}`}>
+                  Impact
+                </span>
+                <span className={`text-sm font-medium ${TONE_TEXT.red}`}>
+                  <Icon
+                    className="mr-1 inline h-3.5 w-3.5 align-[-2px]"
+                    name="lucide:zap"
+                  />
+                  {impact}
+                </span>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+        <TrimBody className="mt-2 text-sm">{children}</TrimBody>
+      </Panel>
+    );
+  }
+);

package/src/ui/index.ts

@@ -0,0 +1,342 @@
+import type { ComponentMap } from "../define.js";
+import { Approval, Approvals } from "./approvals.js";
+import { Ask, Choice, Question } from "./ask.js";
+import { Audit, Vuln } from "./audit.js";
+import { Bar, BarChart } from "./bar-chart.js";
+import { Bench, Benchmarks } from "./benchmarks.js";
+import { Board, BoardCard, Lane } from "./board.js";
+import { Bridge, Delta } from "./bridge.js";
+import { Bump, Bumps } from "./bumps.js";
+import { Callout } from "./callout.js";
+import { Change, Changes } from "./changes.js";
+import { Check, Checks } from "./checks.js";
+import { Cmd } from "./cmd.js";
+import { Column, Columns } from "./columns.js";
+import { Comments } from "./comments.js";
+import { After, Before } from "./compare.js";
+import { Decision } from "./decision.js";
+import { Dep, Deps } from "./deps.js";
+import { Details } from "./details.js";
+import { DiffStat } from "./diffstat.js";
+import { Due } from "./due.js";
+import { Effort } from "./effort.js";
+import { Endpoint, Endpoints } from "./endpoints.js";
+import { EnvVar, EnvVars } from "./envvars.js";
+import { Figure } from "./figure.js";
+import { FileRef } from "./file-ref.js";
+import { File, Files } from "./files.js";
+import { Finding, Findings } from "./findings.js";
+import { Flow, FlowStep } from "./flow.js";
+import { Funnel, Stage } from "./funnel.js";
+import { Gantt, Milestone, Task } from "./gantt.js";
+import { Gauge, Gauges } from "./gauges.js";
+import { Glossary, Term } from "./glossary.js";
+import { Edge, Graph, Node } from "./graph.js";
+import { Cell, Grid } from "./grid.js";
+import { Hypotheses, Hypothesis } from "./hypothesis.js";
+import { Icon } from "./icon.js";
+import { Incident } from "./incident.js";
+import { Del, Ins } from "./ins-del.js";
+import { Json } from "./json.js";
+import { LineChart } from "./line-chart.js";
+import { Matrix } from "./matrix.js";
+import { Meta, MetaItem } from "./meta.js";
+import { Option } from "./option.js";
+import { Owner } from "./owner.js";
+import { Package, Packages } from "./packages.js";
+import { Pathway, Stop } from "./pathway.js";
+import { Phase } from "./phase.js";
+import { PieChart, Slice } from "./pie-chart.js";
+import { Plan } from "./plan.js";
+import { Pre } from "./pre.js";
+import { Priority } from "./priority.js";
+import { Prop, Props } from "./props.js";
+import { Pin, Quadrant } from "./quadrant.js";
+import { Radar } from "./radar.js";
+import { Commit, Issue, PR, Ref } from "./ref.js";
+import { Entry, Release } from "./release.js";
+import { Req, Reqs } from "./req.js";
+import { Comment, Review } from "./review.js";
+import { Risk } from "./risk.js";
+import { Link, Sankey } from "./sankey.js";
+import { Point, Scatter } from "./scatter.js";
+import { DbField, DbTable, Schema } from "./schema.js";
+import { Score } from "./score.js";
+import { Search, Searches } from "./search.js";
+import { Series } from "./series.js";
+import { Severity } from "./severity.js";
+import { shadcnComponents } from "./shadcn.js";
+import { Spark } from "./spark.js";
+import { Row, Stack } from "./stack.js";
+import { Stat, Stats } from "./stats.js";
+import { StatusBadge } from "./status-badge.js";
+import { Day, Service, StatusPage, Uptime } from "./statuspage.js";
+import { Step, Steps } from "./steps.js";
+import { Summary } from "./summary.js";
+import { SymbolRef } from "./symbol-ref.js";
+import { Terminal } from "./terminal.js";
+import { Test, Tests } from "./tests.js";
+import { Event, Timeline } from "./timeline.js";
+import { Toc } from "./toc.js";
+import { Trace, TraceFrame } from "./trace.js";
+import { Tree } from "./tree.js";
+import { Tile, Treemap } from "./treemap.js";
+import { Overlap, Set, Venn } from "./venn.js";
+import { Verdict } from "./verdict.js";
+import { Span, Waterfall } from "./waterfall.js";
+
+export { Approval, Approvals } from "./approvals.js";
+export { Ask, Choice, Question, QUESTION_TYPES } from "./ask.js";
+export { Audit, Vuln } from "./audit.js";
+export { Bar, BarChart } from "./bar-chart.js";
+export { Bench, BENCH_BETTER, Benchmarks } from "./benchmarks.js";
+export { Bridge, Delta } from "./bridge.js";
+export { Bump, BUMP_KINDS, Bumps } from "./bumps.js";
+export { Callout, CALLOUT_KINDS } from "./callout.js";
+export { Change, CHANGE_KINDS, Changes } from "./changes.js";
+export { Check, CHECK_STATUSES, Checks } from "./checks.js";
+export { Cmd } from "./cmd.js";
+export { Column, Columns } from "./columns.js";
+export { Comments } from "./comments.js";
+export { Board, BoardCard, Lane } from "./board.js";
+export { After, Before } from "./compare.js";
+export { Decision, DECISION_STATUSES } from "./decision.js";
+export { Dep, DEP_KINDS, Deps } from "./deps.js";
+export { Details } from "./details.js";
+export { DiffView, parseDiff } from "./diff.js";
+export type { DiffCommentSpec, FileDiff } from "./diff.js";
+export { DiffStat } from "./diffstat.js";
+export { Due } from "./due.js";
+export { Effort, EFFORT_SIZES } from "./effort.js";
+export { Endpoint, Endpoints, HTTP_METHODS } from "./endpoints.js";
+export { EnvVar, EnvVars } from "./envvars.js";
+export { Figure } from "./figure.js";
+export { FileRef } from "./file-ref.js";
+export { File, FILE_KINDS, Files } from "./files.js";
+export { CONFIDENCES, Finding, Findings } from "./findings.js";
+export { Flow, FlowStep } from "./flow.js";
+export { Funnel, Stage } from "./funnel.js";
+export { Gantt, Milestone, Task } from "./gantt.js";
+export { Gauge, GAUGE_TONES, Gauges } from "./gauges.js";
+export { Glossary, Term } from "./glossary.js";
+export { Edge, Graph, Node } from "./graph.js";
+export { Cell, Grid } from "./grid.js";
+export { Hypotheses, Hypothesis, HYPOTHESIS_STATUSES } from "./hypothesis.js";
+export { hasIcon, Icon, normalizeIconName } from "./icon.js";
+export { Incident, INCIDENT_STATUSES } from "./incident.js";
+export { Del, Ins } from "./ins-del.js";
+export { Json } from "./json.js";
+export { LineChart } from "./line-chart.js";
+export { Matrix } from "./matrix.js";
+export { Meta, MetaItem } from "./meta.js";
+export { Option, OPTION_STATUSES } from "./option.js";
+export { Owner } from "./owner.js";
+export { Package, PACKAGE_KINDS, Packages } from "./packages.js";
+export { Pathway, Stop } from "./pathway.js";
+export { Phase } from "./phase.js";
+export { PieChart, Slice } from "./pie-chart.js";
+export { Pin, Quadrant } from "./quadrant.js";
+export { Plan, PlanHeader } from "./plan.js";
+export { Pre } from "./pre.js";
+export { Priority, PRIORITY_LEVELS } from "./priority.js";
+export { Prop, Props } from "./props.js";
+export { Radar } from "./radar.js";
+export { Commit, Issue, PR, Ref } from "./ref.js";
+export { Entry, ENTRY_KINDS, Release } from "./release.js";
+export { Req, Reqs } from "./req.js";
+export { Comment, Review, REVIEW_VERDICTS } from "./review.js";
+export { Risk, RISK_LEVELS } from "./risk.js";
+export { Link, Sankey } from "./sankey.js";
+export { Point, Scatter } from "./scatter.js";
+export { DbField, DbTable, Schema } from "./schema.js";
+export { Score } from "./score.js";
+export { Search, Searches } from "./search.js";
+export { Series } from "./series.js";
+export { isSeverity, Severity, SEVERITY_LEVELS } from "./severity.js";
+export { Row, Stack } from "./stack.js";
+export { Spark, SPARK_TONES } from "./spark.js";
+export { Stat, Stats } from "./stats.js";
+export { StatusBadge, STATUSES } from "./status-badge.js";
+export {
+  Day,
+  DAY_STATUSES,
+  Service,
+  SERVICE_STATUSES,
+  StatusPage,
+  Uptime,
+} from "./statuspage.js";
+export { Step, Steps } from "./steps.js";
+export { Summary } from "./summary.js";
+export { SYMBOL_KINDS, SymbolRef } from "./symbol-ref.js";
+export { TERMINAL_LANGS, Terminal } from "./terminal.js";
+export {
+  formatDuration,
+  parseDuration,
+  Test,
+  TEST_STATUSES,
+  Tests,
+} from "./tests.js";
+export { Event, Timeline } from "./timeline.js";
+export { Toc } from "./toc.js";
+export { FRAME_KINDS, Trace, TraceFrame } from "./trace.js";
+export { Tree } from "./tree.js";
+export { Tile, Treemap } from "./treemap.js";
+export { Overlap, Set, Venn } from "./venn.js";
+export { Verdict, VERDICTS } from "./verdict.js";
+export { Span, Waterfall } from "./waterfall.js";
+
+/**
+ * The built-in component catalog available inside mdxr documents.
+ * `pre` overrides fenced code blocks; the rest are usable as MDX JSX elements.
+ * shadcn/ui (Base UI) primitives are included — rendered documents carry a
+ * hydration bundle, so interactive parts work in the browser.
+ * `Toc` and `CodeFile` are remark-level features (injected/expanded before
+ * render); `Toc` still needs this entry so MDX accepts the element.
+ */
+export const builtinComponents: ComponentMap = {
+  After,
+  Approval,
+  Approvals,
+  Ask,
+  Audit,
+  Bar,
+  BarChart,
+  Before,
+  Bench,
+  Benchmarks,
+  Board,
+  BoardCard,
+  Bridge,
+  Bump,
+  Bumps,
+  Callout,
+  Cell,
+  Change,
+  Changes,
+  Check,
+  Checks,
+  Choice,
+  Cmd,
+  Column,
+  Columns,
+  Comment,
+  Comments,
+  Commit,
+  Day,
+  DbField,
+  DbTable,
+  Decision,
+  Del,
+  Delta,
+  Dep,
+  Deps,
+  Details,
+  DiffStat,
+  Due,
+  Edge,
+  Effort,
+  Endpoint,
+  Endpoints,
+  Entry,
+  EnvVar,
+  EnvVars,
+  Event,
+  Figure,
+  File,
+  FileRef,
+  Files,
+  Finding,
+  Findings,
+  Flow,
+  FlowStep,
+  Funnel,
+  Gantt,
+  Gauge,
+  Gauges,
+  Glossary,
+  Graph,
+  Grid,
+  Hypotheses,
+  Hypothesis,
+  Icon,
+  Incident,
+  Ins,
+  Issue,
+  Json,
+  Lane,
+  LineChart,
+  Link,
+  Matrix,
+  Meta,
+  MetaItem,
+  Milestone,
+  Node,
+  Option,
+  Overlap,
+  Owner,
+  PR,
+  Package,
+  Packages,
+  Pathway,
+  Phase,
+  PieChart,
+  Pin,
+  Plan,
+  Point,
+  Priority,
+  Prop,
+  Props,
+  Quadrant,
+  Question,
+  Radar,
+  Ref,
+  Release,
+  Req,
+  Reqs,
+  Review,
+  Risk,
+  Row,
+  Sankey,
+  Scatter,
+  Schema,
+  Score,
+  Search,
+  Searches,
+  Series,
+  Service,
+  Set,
+  Severity,
+  Slice,
+  Span,
+  Spark,
+  Stack,
+  Stage,
+  Stat,
+  Stats,
+  StatusBadge,
+  StatusPage,
+  Step,
+  Steps,
+  Stop,
+  Summary,
+  SymbolRef,
+  Task,
+  Term,
+  Terminal,
+  Test,
+  Tests,
+  Tile,
+  Timeline,
+  Toc,
+  Trace,
+  TraceFrame,
+  Tree,
+  Treemap,
+  Uptime,
+  Venn,
+  Verdict,
+  Vuln,
+  Waterfall,
+  pre: Pre,
+  ...shadcnComponents,
+};

package/src/ui/ins-del.tsx

@@ -0,0 +1,41 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { TITLE_PROP } from "./attrs.js";
+
+/**
+ * Inline word-level edits for prose/config changes — the inline counterpart
+ * of Before/After blocks and ```diff fences. Renders semantic <ins>/<del>.
+ */
+export const Ins = defineComponent(
+  {
+    description:
+      "挿入テキスト (インライン、緑+下線)。<Del> と対で before/after の差分を文やコード片に示す",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <ins
+      className="rounded bg-emerald-500/15 px-0.5 py-px text-emerald-800 underline decoration-emerald-600/50 decoration-1 underline-offset-2 dark:text-emerald-300 dark:decoration-emerald-400/50"
+      title={nonEmpty(title) ? title : "inserted"}
+    >
+      {children}
+    </ins>
+  )
+);
+
+export const Del = defineComponent(
+  {
+    description:
+      "削除テキスト (インライン、赤+取り消し線)。<Ins> と対で before/after の差分を文やコード片に示す",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <del
+      className="rounded bg-red-500/15 px-0.5 py-px text-red-800 decoration-red-500/70 decoration-1 dark:text-red-300"
+      title={nonEmpty(title) ? title : "deleted"}
+    >
+      {children}
+    </del>
+  )
+);