@suzumiyaaoba/mdxr 0.1.0

package/src/ui/file-link.ts

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+
+import { DocContext } from "../doc-context.js";
+import { nonEmpty, safeHref } from "../guards.js";
+import { firstLine } from "../lines.js";
+
+/**
+ * Resolve a component's `href` override or doc-relative `path`/`lines` to a
+ * link target. Explicit `href` always wins; without a render-time fileLink
+ * (e.g. Storybook) the component renders unlinked.
+ */
+export const useFileLink = (
+  relPath: string | undefined,
+  lines?: string,
+  href?: string
+): string | undefined => {
+  const { fileLink } = useContext(DocContext);
+  const override = safeHref(href);
+  if (override !== undefined) {
+    return override;
+  }
+  if (!nonEmpty(relPath) || fileLink === undefined) {
+    return undefined;
+  }
+  return fileLink(relPath, firstLine(lines));
+};
+
+/** `target`/`rel` for web URLs; editor schemes stay in the same tab. */
+export const linkTarget = (href: string): Record<string, string> =>
+  /^https?:/u.test(href)
+    ? { rel: "noopener noreferrer", target: "_blank" }
+    : {};

package/src/ui/file-ref.tsx

@@ -0,0 +1,39 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { FILE_LINK_PROPS } from "./attrs.js";
+import { CodeChip, CopyButton, MaybeLink, PathLabel } from "./bits.js";
+import { fileIcon } from "./file-icon.js";
+import { useFileLink } from "./file-link.js";
+import { Icon } from "./icon.js";
+import { LINK_CLS } from "./tones.js";
+
+export const FileRef = defineComponent(
+  {
+    description:
+      'ソースファイルへの参照チップ。lines="10-20" で行範囲を示せる。実在ファイルはエディタリンク（既定 vscode://）になり、href で上書き可。アイコンは拡張子から自動選択',
+    schema: v.looseObject({
+      ...FILE_LINK_PROPS,
+      path: v.string(),
+    }),
+  },
+  ({ path, lines, href }) => {
+    const link = useFileLink(path, lines, href);
+    const label = (
+      <PathLabel lines={lines} linesClassName="opacity-60" path={path} />
+    );
+    return (
+      <CodeChip>
+        <Icon className="h-3.5 w-3.5 opacity-60" name={fileIcon(path)} />
+        <MaybeLink className={LINK_CLS} href={link}>
+          {label}
+        </MaybeLink>
+        <CopyButton
+          className="-mr-0.5 opacity-40"
+          copy={path}
+          title="Copy path"
+        />
+      </CodeChip>
+    );
+  }
+);

package/src/ui/files.tsx

@@ -0,0 +1,112 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty, own } from "../guards.js";
+import { FILE_LINK_PROPS, TITLE_PROP } from "./attrs.js";
+import {
+  ListPanel,
+  ListRow,
+  MaybeLink,
+  PathLabel,
+  RowIcon,
+  RowNote,
+  Tag,
+} from "./bits.js";
+import { fileIcon } from "./file-icon.js";
+import { useFileLink } from "./file-link.js";
+import { LINK_CLS, MONO_CLS, TEXT, TONE_TEXT } from "./tones.js";
+
+export const FILE_KINDS = [
+  "config",
+  "core",
+  "docs",
+  "entry",
+  "generated",
+  "test",
+  "types",
+] as const;
+
+const KINDS: Record<string, { cls: string; icon: string }> = {
+  config: {
+    cls: TONE_TEXT.neutral,
+    icon: "lucide:settings",
+  },
+  core: {
+    cls: TONE_TEXT.violet,
+    icon: "lucide:layers",
+  },
+  docs: {
+    cls: TONE_TEXT.neutral,
+    icon: "lucide:book-open",
+  },
+  entry: {
+    cls: TONE_TEXT.sky,
+    icon: "lucide:log-in",
+  },
+  generated: {
+    cls: TONE_TEXT.neutral,
+    icon: "lucide:bot",
+  },
+  test: {
+    cls: TONE_TEXT.amber,
+    icon: "lucide:flask-conical",
+  },
+  types: {
+    cls: TONE_TEXT.teal,
+    icon: "lucide:braces",
+  },
+};
+
+const FALLBACK_KIND = {
+  cls: TONE_TEXT.neutral,
+  icon: "lucide:tag",
+};
+
+export const Files = defineComponent(
+  {
+    description:
+      "関連ファイル一覧のコンテナ。<File> を並べる。title でキャプションバー",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => <ListPanel title={title}>{children}</ListPanel>
+);
+
+export const File = defineComponent(
+  {
+    description:
+      "関連ファイル1行。path は必須、lines で行範囲を併記。実在ファイルはエディタリンク（既定 vscode://）になり、href で上書き可。アイコンはファイル名/拡張子から自動選択。kind は entry|core|types|config|test|docs|generated など（既知の値はアイコン/色付き、それ以外も表示可）。children は役割の注記",
+    schema: v.looseObject({
+      ...FILE_LINK_PROPS,
+      kind: v.optional(v.string()),
+      path: v.string(),
+    }),
+  },
+  ({ path, lines, kind, href, children }) => {
+    // `own`: `kind` is a free-form string — "toString" would otherwise pull
+    // a function off the prototype instead of the fallback styling.
+    let r: { cls: string; icon: string } | undefined;
+    if (nonEmpty(kind)) {
+      r = own(KINDS, kind) ?? FALLBACK_KIND;
+    }
+    const link = useFileLink(path, lines, href);
+    const label = (
+      <code className={MONO_CLS}>
+        <PathLabel lines={lines} linesClassName={TEXT.faint} path={path} />
+      </code>
+    );
+    return (
+      <ListRow>
+        <RowIcon name={fileIcon(path)} />
+        <MaybeLink className={LINK_CLS} href={link}>
+          {label}
+        </MaybeLink>
+        {r === undefined ? null : (
+          <Tag className={r.cls} icon={r.icon}>
+            {kind}
+          </Tag>
+        )}
+        <RowNote>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);

package/src/ui/findings.tsx

@@ -0,0 +1,85 @@
+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 CONFIDENCES = ["confirmed", "inferred", "unverified"] as const;
+export type Confidence = (typeof CONFIDENCES)[number];
+
+export const isConfidence = isOneOf(CONFIDENCES);
+
+const CONF: Record<Confidence, { cls: string; icon: string; label: string }> = {
+  confirmed: {
+    cls: TONE.emerald,
+    icon: "lucide:badge-check",
+    label: "Confirmed",
+  },
+  inferred: {
+    cls: TONE.amber,
+    icon: "lucide:lightbulb",
+    label: "Inferred",
+  },
+  unverified: {
+    cls: TONE.neutral,
+    icon: "lucide:circle-dashed",
+    label: "Unverified",
+  },
+};
+
+export const Finding = defineComponent(
+  {
+    description:
+      "調査の発見事項。confidence は confirmed|inferred|unverified（確証済み/推論/未検証）。title と children（根拠・証拠）",
+    schema: v.looseObject({
+      confidence: v.optional(v.picklist(CONFIDENCES), "confirmed"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ confidence, title, children }) => {
+    const { n } = useChildIndex();
+    const c = CONF[confidence];
+    return (
+      <IndexedCard
+        n={n}
+        pill={
+          <Pill className={c.cls} icon={c.icon}>
+            {c.label}
+          </Pill>
+        }
+        title={title}
+      >
+        {children}
+      </IndexedCard>
+    );
+  }
+);
+
+export const Findings = defineComponent(
+  {
+    description:
+      "発見事項リストのコンテナ。<Finding> を並べ、confidence 別の件数サマリを上部に表示",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <CountedList
+      counts={countByProp(
+        children,
+        Finding,
+        "confidence",
+        isConfidence,
+        "confirmed"
+      )}
+      labelOf={(k) => (isConfidence(k) ? CONF[k].label.toLowerCase() : k)}
+      noun={["finding", "findings"]}
+      order={CONFIDENCES}
+      title={title}
+    >
+      {children}
+    </CountedList>
+  )
+);

package/src/ui/flow.tsx

@@ -0,0 +1,73 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { FILE_LINK_PROPS, TITLE_PROP } from "./attrs.js";
+import { LocLink, Section, TrimBody } from "./bits.js";
+import { indexChildren, useChildIndex } from "./child-index.js";
+import { Icon } from "./icon.js";
+import { CHIP_BORDER_CLS, RAIL_BG_CLS, TEXT } from "./tones.js";
+
+export const Flow = defineComponent(
+  {
+    description:
+      "呼び出し・実行フローのコンテナ。<FlowStep> を番号付きで縦に連結する。title で見出し",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <Section title={title}>
+      <ol className="not-prose m-0 list-none p-0">{indexChildren(children)}</ol>
+    </Section>
+  )
+);
+
+export const FlowStep = defineComponent(
+  {
+    description:
+      "フローの1ホップ。name は関数名や処理名、path/lines で発生箇所を併記（実在すればエディタリンク、href で上書き可）。children はその処理の説明",
+    schema: v.looseObject({
+      ...FILE_LINK_PROPS,
+      name: v.optional(v.string()),
+    }),
+  },
+  ({ name, path, lines, href, children }) => {
+    const { n, last } = useChildIndex();
+    return (
+      <li className="relative pt-1 pb-4 pl-10 last:pb-0">
+        {last ? null : (
+          <span
+            aria-hidden
+            className={`absolute top-9 bottom-0 left-[13px] w-px ${RAIL_BG_CLS}`}
+          />
+        )}
+        <span
+          aria-hidden
+          className={`bg-background absolute top-0 left-0 flex h-7 w-7 items-center justify-center rounded-full border ${CHIP_BORDER_CLS} font-mono text-xs font-medium ${TEXT.muted}`}
+        >
+          {n > 0 ? (
+            n
+          ) : (
+            <Icon className="h-3.5 w-3.5" name="lucide:circle-dot" />
+          )}
+        </span>
+        {nonEmpty(name) || nonEmpty(path) ? (
+          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+            {nonEmpty(name) ? (
+              <code
+                className={`font-mono text-[0.85em] font-semibold ${TEXT.strong}`}
+              >
+                {name}
+              </code>
+            ) : null}
+            {nonEmpty(path) ? (
+              <LocLink href={href} lines={lines} path={path} />
+            ) : null}
+          </div>
+        ) : null}
+        <TrimBody className={`mt-1.5 text-sm ${TEXT.body}`}>
+          {children}
+        </TrimBody>
+      </li>
+    );
+  }
+);

package/src/ui/funnel.tsx

@@ -0,0 +1,121 @@
+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, toneOf } from "./chart.js";
+import { isEl } from "./children.js";
+import { TEXT, TEXT_MICRO } from "./tones.js";
+
+/**
+ * Funnel/pyramid — centered bars shrinking through <Stage> rows. Each row
+ * carries the stage value and its share of the first stage; conversion
+ * between adjacent stages shows on the left when it drops.
+ */
+
+const STAGE_SCHEMA = v.looseObject({
+  name: v.string(),
+  note: v.optional(v.string()),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  value: NUMISH,
+});
+
+type StageSpec = v.InferOutput<typeof STAGE_SCHEMA>;
+
+export const Stage = defineComponent(
+  {
+    description:
+      "ファネルの1段。<Funnel> の子。name/value は必須、note で補足、tone で色指定",
+    schema: STAGE_SCHEMA,
+  },
+  // Standalone use: a `name value` chip so misplaced stages 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 collectStages = (
+  children: ReactNode
+): { rest: ReactNode[]; stages: { n: number; spec: StageSpec }[] } => {
+  const stages: { n: number; spec: StageSpec }[] = [];
+  const rest: ReactNode[] = [];
+  for (const child of flattenChildren(children)) {
+    if (isEl(child, Stage)) {
+      const spec = parseProps(STAGE_SCHEMA, child.props, "Stage");
+      stages.push({ n: Math.max(0, numOf(spec.value) ?? 0), spec });
+    } else {
+      rest.push(child);
+    }
+  }
+  return { rest, stages };
+};
+
+export const Funnel = defineComponent(
+  {
+    description:
+      "ファネルコンテナ (段階ごとの絞り込み/ピラミッド)。<Stage name value> を上から順に並べる。unit は値の単位",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      unit: v.optional(v.string()),
+    }),
+  },
+  ({ title, unit, children }) => {
+    const { stages, rest } = collectStages(children);
+    const first = stages[0]?.n ?? 0;
+    const max = Math.max(0, ...stages.map((s) => s.n));
+    return (
+      <ChartPanel
+        figure={
+          nonEmpty(unit) && first > 0 ? `${fmtNum(first)}${unit}` : undefined
+        }
+        icon="lucide:funnel"
+        title={title}
+      >
+        <div className="space-y-1.5 px-4 py-3">
+          {stages.map((s, i) => {
+            const prev = i === 0 ? undefined : stages[i - 1]?.n;
+            const conv =
+              prev !== undefined && prev > 0 ? (s.n / prev) * 100 : undefined;
+            const share = first === 0 ? 0 : (s.n / first) * 100;
+            const width = max === 0 ? 0 : (s.n / max) * 100;
+            return (
+              <div className="flex items-center gap-2" key={s.spec.name}>
+                <span
+                  className={`w-12 shrink-0 text-right font-mono ${TEXT_MICRO} tabular-nums ${TEXT.faint}`}
+                >
+                  {conv === undefined ? "" : `${Math.round(conv)}%`}
+                </span>
+                <div className="flex min-w-0 flex-1 justify-center">
+                  <div
+                    className={`flex h-7 min-w-10 items-center justify-center rounded ${toneOf(s.spec.tone, i).bg}`}
+                    style={{ width: `${Math.max(8, width)}%` }}
+                    title={`${s.spec.name} · ${fmtNum(s.n)}${unit ?? ""}`}
+                  >
+                    <span className="truncate px-2 text-xs font-medium text-white dark:text-neutral-900">
+                      {s.spec.name}
+                    </span>
+                  </div>
+                </div>
+                <span
+                  className={`w-24 shrink-0 font-mono ${TEXT_MICRO} tabular-nums ${TEXT.muted}`}
+                >
+                  {fmtNum(s.n)}
+                  {unit}
+                  {i === 0 ? "" : ` · ${Math.round(share)}%`}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+        {rest.length > 0 ? <div className="px-4 pb-3">{rest}</div> : null}
+      </ChartPanel>
+    );
+  }
+);