@suzumiyaaoba/mdxr 0.1.0

package/src/ui/score.tsx

@@ -0,0 +1,105 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { numOf, NUMISH } from "./attrs.js";
+import { BORDER_CLS, TEXT, TEXT_SUB } from "./tones.js";
+
+type Band = "amber" | "emerald" | "red";
+
+const STROKE_CLS: Record<Band, string> = {
+  amber: "stroke-amber-500",
+  emerald: "stroke-emerald-500",
+  red: "stroke-red-500",
+};
+
+const TEXT_BAND: Record<Band, string> = {
+  amber: "text-amber-600 dark:text-amber-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  red: "text-red-600 dark:text-red-400",
+};
+
+const bandOf = (pct: number): Band => {
+  if (pct >= 80) {
+    return "emerald";
+  }
+  if (pct >= 50) {
+    return "amber";
+  }
+  return "red";
+};
+
+/** `0..1` 以外の数値は 0-100 スケールとして扱う。 */
+const toPct = (value: number, max: number | undefined): number => {
+  if (max !== undefined && max > 0) {
+    return Math.min(100, Math.max(0, (value / max) * 100));
+  }
+  return Math.min(100, Math.max(0, value));
+};
+
+export const Score = defineComponent(
+  {
+    description:
+      "0-100 スコアのリングゲージ。value は必須 (max で分母変更可)。label で指標名、detail で補足行。80+ 緑・50+ 黄・それ以下赤。ヘルススキャン・品質スコアの表示向け。Row/Grid に並べられる",
+    schema: v.looseObject({
+      detail: v.optional(v.string()),
+      label: v.optional(v.string()),
+      max: v.optional(NUMISH),
+      value: NUMISH,
+    }),
+  },
+  ({ value, max, label, detail }) => {
+    const vNum = numOf(value) ?? 0;
+    const pct = toPct(vNum, numOf(max));
+    const band = bandOf(pct);
+    const shown = Number.isInteger(vNum) ? String(vNum) : vNum.toFixed(1);
+    return (
+      <div
+        className={`not-prose my-6 inline-flex items-center gap-3 rounded-lg border px-4 py-3 ${BORDER_CLS}`}
+      >
+        <svg className="h-14 w-14" viewBox="0 0 36 36">
+          <circle
+            className="stroke-neutral-200 dark:stroke-neutral-700"
+            cx="18"
+            cy="18"
+            fill="none"
+            r="15.9155"
+            strokeWidth="3"
+          />
+          <circle
+            className={STROKE_CLS[band]}
+            cx="18"
+            cy="18"
+            fill="none"
+            pathLength={100}
+            r="15.9155"
+            strokeDasharray={`${pct} 100`}
+            strokeDashoffset="25"
+            strokeLinecap="round"
+            strokeWidth="3"
+          />
+          <text
+            className={`fill-current font-semibold ${TEXT_BAND[band]}`}
+            dominantBaseline="central"
+            fontSize="9"
+            textAnchor="middle"
+            x="18"
+            y="18"
+          >
+            {shown}
+          </text>
+        </svg>
+        <div className="min-w-0">
+          {nonEmpty(label) ? (
+            <div className={`truncate text-sm font-medium ${TEXT.strong}`}>
+              {label}
+            </div>
+          ) : null}
+          <div className={`${TEXT_SUB} ${TEXT.muted}`}>
+            {nonEmpty(detail) ? detail : "score"}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);

package/src/ui/search.tsx

@@ -0,0 +1,120 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH, TITLE_PROP } from "./attrs.js";
+import { ListPanel, ListRow, Pill, RowIcon, RowNote } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import {
+  LOC_CLS,
+  MONO_CLS,
+  MONO_TAG_CLS,
+  SURFACE_CLS,
+  TEXT,
+  TONE,
+} from "./tones.js";
+
+interface HitsBadge {
+  label: string;
+  n: number | undefined;
+}
+
+/** "0" → "no hits"; "12" → "12 hits"; non-numeric text passes through verbatim. */
+const hitsBadge = (
+  hits: string | number | undefined
+): HitsBadge | undefined => {
+  if (hits === undefined) {
+    return undefined;
+  }
+  const text = String(hits);
+  const n = typeof hits === "number" ? hits : Math.trunc(Number(text));
+  if (Number.isNaN(n)) {
+    return { label: text, n: undefined };
+  }
+  return { label: n === 0 ? "no hits" : `${text} hit${n === 1 ? "" : "s"}`, n };
+};
+
+export const Search = defineComponent(
+  {
+    description:
+      "検索クエリ1行。pattern=検索パターン（必須）、path=対象スコープ、tool=ツール名 (rg/grep 等)、hits=ヒット数（0 は no hits、省略可）。children は注記",
+    schema: v.looseObject({
+      hits: v.optional(NUMISH),
+      path: v.optional(v.string()),
+      pattern: v.string(),
+      tool: v.optional(v.string()),
+    }),
+  },
+  ({ pattern, path, tool, hits, children }) => {
+    const badge = hitsBadge(hits);
+    return (
+      <ListRow>
+        <RowIcon name="lucide:search" />
+        <code className={MONO_CLS}>{pattern}</code>
+        {nonEmpty(path) ? <span className={LOC_CLS}>in {path}</span> : null}
+        {nonEmpty(tool) ? <span className={MONO_TAG_CLS}>{tool}</span> : null}
+        {badge === undefined ? null : (
+          <Pill
+            className={`shrink-0 ${
+              badge.n !== undefined && badge.n > 0 ? TONE.emerald : TONE.neutral
+            }`}
+          >
+            {badge.label}
+          </Pill>
+        )}
+        <RowNote>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+const isSearchEl = (node: ReactNode): node is ReactElement =>
+  isEl(node, Search);
+
+/** A <Search> child's parsed hit count (0 when the badge is absent). */
+const searchHits = (el: ReactElement): number => {
+  const h = propOf(el, "hits");
+  return typeof h === "string" || typeof h === "number"
+    ? (hitsBadge(h)?.n ?? 0)
+    : 0;
+};
+
+const summarizeSearches = (
+  children: ReactNode
+): { count: number; hits: number } => {
+  let count = 0;
+  let hits = 0;
+  for (const node of flattenChildren(children)) {
+    if (!isSearchEl(node)) {
+      continue;
+    }
+    count += 1;
+    hits += searchHits(node);
+  }
+  return { count, hits };
+};
+
+const searchSummary = (count: number, hits: number): string =>
+  `${count} search${count === 1 ? "" : "es"}${hits > 0 ? ` · ${hits} hits` : ""}`;
+
+export const Searches = defineComponent(
+  {
+    description:
+      "検索クエリログのコンテナ。<Search> を並べる。title でキャプションバー、件数とヒット合計を上部に表示",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => {
+    const { count, hits } = summarizeSearches(children);
+    return (
+      <ListPanel title={title}>
+        {count > 0 ? (
+          <div className={`${SURFACE_CLS} px-4 py-1.5 text-xs ${TEXT.muted}`}>
+            {searchSummary(count, hits)}
+          </div>
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/series.tsx

@@ -0,0 +1,38 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { BOOLISH_PROP } from "./attrs.js";
+import { CODE_CHIP_CLS } from "./bits.js";
+import { CHART_TONES } from "./chart.js";
+
+/**
+ * Named data series shared by <LineChart> and <Radar>: `values` is a
+ * comma-separated number list aligned with the chart's `labels`/`axes`.
+ */
+
+export const SERIES_SCHEMA = v.looseObject({
+  dash: BOOLISH_PROP,
+  name: v.string(),
+  tone: v.optional(v.picklist(CHART_TONES)),
+  values: v.string(),
+});
+
+export type SeriesSpec = v.InferOutput<typeof SERIES_SCHEMA>;
+
+export const Series = defineComponent(
+  {
+    description:
+      'データ系列。<LineChart>/<Radar> の子。name/values は必須 (values="12,8,4" のカンマ区切り)、tone で色、dash で破線',
+    schema: SERIES_SCHEMA,
+  },
+  // Standalone use: a `name values` chip so misplaced series still render.
+  ({ name, values, dash }): ReactElement => (
+    <span className={`font-mono ${CODE_CHIP_CLS}`}>
+      {name}
+      <span className="opacity-70">{values}</span>
+      {nonEmpty(dash) ? <span className="opacity-70">dash</span> : null}
+    </span>
+  )
+);

package/src/ui/severity.tsx

@@ -0,0 +1,69 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { isOneOf } from "../guards.js";
+import { Pill } from "./bits.js";
+import { TONE } from "./tones.js";
+
+export const SEVERITY_LEVELS = [
+  "critical",
+  "high",
+  "medium",
+  "low",
+  "info",
+] as const;
+export type SeverityLevel = (typeof SEVERITY_LEVELS)[number];
+
+export const isSeverity = isOneOf(SEVERITY_LEVELS);
+
+/** Optional `severity` schema entry — shared by Comment, Vuln and Incident. */
+export const SEVERITY_PROP = v.optional(v.picklist(SEVERITY_LEVELS), "medium");
+
+export const SEVERITY_STYLES: Record<
+  SeverityLevel,
+  { chip: string; icon: string; label: string }
+> = {
+  critical: {
+    chip: TONE.red,
+    icon: "lucide:siren",
+    label: "Critical",
+  },
+  high: {
+    chip: TONE.orange,
+    icon: "lucide:flame",
+    label: "High",
+  },
+  info: {
+    chip: TONE.neutral,
+    icon: "lucide:info",
+    label: "Info",
+  },
+  low: {
+    chip: TONE.sky,
+    icon: "lucide:circle-minus",
+    label: "Low",
+  },
+  medium: {
+    chip: TONE.amber,
+    icon: "lucide:triangle-alert",
+    label: "Medium",
+  },
+};
+
+export const Severity = defineComponent(
+  {
+    description:
+      "重要度ピル。level は critical|high|medium|low|info。レビュー指摘・脆弱性・インシデントの深刻度を示すインラインチップ",
+    schema: v.looseObject({
+      level: v.optional(v.picklist(SEVERITY_LEVELS), "medium"),
+    }),
+  },
+  ({ level, children }) => {
+    const s = SEVERITY_STYLES[level];
+    return (
+      <Pill className={s.chip} icon={s.icon}>
+        {children ?? s.label}
+      </Pill>
+    );
+  }
+);

package/src/ui/shadcn.tsx

@@ -0,0 +1,216 @@
+import * as v from "valibot";
+
+import * as accordion from "../components/ui/accordion.js";
+import * as alertDialog from "../components/ui/alert-dialog.js";
+import * as alert from "../components/ui/alert.js";
+import * as aspectRatio from "../components/ui/aspect-ratio.js";
+import * as attachment from "../components/ui/attachment.js";
+import * as avatar from "../components/ui/avatar.js";
+import * as badge from "../components/ui/badge.js";
+import * as breadcrumb from "../components/ui/breadcrumb.js";
+import * as bubble from "../components/ui/bubble.js";
+import * as buttonGroup from "../components/ui/button-group.js";
+import * as button from "../components/ui/button.js";
+import * as calendar from "../components/ui/calendar.js";
+import * as card from "../components/ui/card.js";
+import * as carousel from "../components/ui/carousel.js";
+import * as chart from "../components/ui/chart.js";
+import * as checkbox from "../components/ui/checkbox.js";
+import * as collapsible from "../components/ui/collapsible.js";
+import * as combobox from "../components/ui/combobox.js";
+import * as command from "../components/ui/command.js";
+import * as contextMenu from "../components/ui/context-menu.js";
+import * as dialog from "../components/ui/dialog.js";
+import * as direction from "../components/ui/direction.js";
+import * as drawer from "../components/ui/drawer.js";
+import * as dropdownMenu from "../components/ui/dropdown-menu.js";
+import * as empty from "../components/ui/empty.js";
+import * as field from "../components/ui/field.js";
+import * as fieldset from "../components/ui/fieldset.js";
+import * as frame from "../components/ui/frame.js";
+import * as hoverCard from "../components/ui/hover-card.js";
+import * as inputGroup from "../components/ui/input-group.js";
+import * as inputOtp from "../components/ui/input-otp.js";
+import * as input from "../components/ui/input.js";
+import * as item from "../components/ui/item.js";
+import * as kbd from "../components/ui/kbd.js";
+import * as label from "../components/ui/label.js";
+import * as marker from "../components/ui/marker.js";
+import * as menubar from "../components/ui/menubar.js";
+import * as messageScroller from "../components/ui/message-scroller.js";
+import * as message from "../components/ui/message.js";
+import * as meter from "../components/ui/meter.js";
+import * as nativeSelect from "../components/ui/native-select.js";
+import * as navigationMenu from "../components/ui/navigation-menu.js";
+import * as pagination from "../components/ui/pagination.js";
+import * as popover from "../components/ui/popover.js";
+import * as progress from "../components/ui/progress.js";
+import * as questionnaire from "../components/ui/questionnaire.js";
+import * as radioGroup from "../components/ui/radio-group.js";
+import * as resizable from "../components/ui/resizable.js";
+import * as scrollArea from "../components/ui/scroll-area.js";
+import * as select from "../components/ui/select.js";
+import * as separator from "../components/ui/separator.js";
+import * as sheet from "../components/ui/sheet.js";
+import * as sidebar from "../components/ui/sidebar.js";
+import * as skeleton from "../components/ui/skeleton.js";
+import * as slider from "../components/ui/slider.js";
+import * as spinner from "../components/ui/spinner.js";
+import * as switch_ from "../components/ui/switch.js";
+import * as table from "../components/ui/table.js";
+import * as tabs from "../components/ui/tabs.js";
+import * as textarea from "../components/ui/textarea.js";
+import * as toast from "../components/ui/toast.js";
+import * as toggleGroup from "../components/ui/toggle-group.js";
+import * as toggle from "../components/ui/toggle.js";
+import * as tooltip from "../components/ui/tooltip.js";
+import type { AnyComponent, ComponentMap, DocProps } from "../define.js";
+import { defineComponent } from "../define.js";
+import { isComponent, safeHref } from "../guards.js";
+
+/**
+ * URL-bearing props get a scriptable-scheme check before reaching the DOM —
+ * `looseObject` props mean `<BreadcrumbLink href="javascript:…">` would
+ * otherwise land on `<a href>` unchecked.
+ */
+const URL_PROPS = new Set([
+  "action",
+  "background",
+  "data",
+  "formaction",
+  "href",
+  "poster",
+  "src",
+  "xlinkhref",
+]);
+
+const sanitizeProps = (props: Record<string, unknown>): DocProps => {
+  const out: Record<string, unknown> = { ...props };
+  for (const k of Object.keys(out)) {
+    if (URL_PROPS.has(k.toLowerCase()) && typeof out[k] === "string") {
+      out[k] = safeHref(out[k]);
+    }
+  }
+  return out;
+};
+
+const MODULES: Record<string, Record<string, unknown>> = {
+  accordion,
+  alert,
+  "alert-dialog": alertDialog,
+  "aspect-ratio": aspectRatio,
+  attachment,
+  avatar,
+  badge,
+  breadcrumb,
+  bubble,
+  button,
+  "button-group": buttonGroup,
+  calendar,
+  card,
+  carousel,
+  chart,
+  checkbox,
+  collapsible,
+  combobox,
+  command,
+  "context-menu": contextMenu,
+  dialog,
+  direction,
+  drawer,
+  "dropdown-menu": dropdownMenu,
+  empty,
+  field,
+  fieldset,
+  frame,
+  "hover-card": hoverCard,
+  input,
+  "input-group": inputGroup,
+  "input-otp": inputOtp,
+  item,
+  kbd,
+  label,
+  marker,
+  menubar,
+  message,
+  "message-scroller": messageScroller,
+  meter,
+  "native-select": nativeSelect,
+  "navigation-menu": navigationMenu,
+  pagination,
+  popover,
+  progress,
+  questionnaire,
+  "radio-group": radioGroup,
+  resizable,
+  "scroll-area": scrollArea,
+  select,
+  separator,
+  sheet,
+  sidebar,
+  skeleton,
+  slider,
+  spinner,
+  switch: switch_,
+  table,
+  tabs,
+  textarea,
+  toast,
+  toggle,
+  "toggle-group": toggleGroup,
+  tooltip,
+};
+
+/**
+ * Wrap a shadcn/ui (Base UI) component for the document catalog. Props stay
+ * loose — MDX attributes arrive as strings — and each entry gets a catalog
+ * description noting that interactive parts come alive via hydration.
+ */
+const wrap = (
+  moduleName: string,
+  exportName: string,
+  Comp: AnyComponent
+): AnyComponent =>
+  defineComponent(
+    {
+      description: `shadcn/ui ${exportName} (${moduleName}) — Base UI; interactive after hydration.`,
+      schema: v.looseObject({}),
+    },
+    (props) => <Comp {...sanitizeProps(props)} />
+  );
+
+/**
+ * `[moduleName, exportName, component]` for every PascalCase function export
+ * of `src/components/ui/*`. Lowercase helpers (cva variants, hooks) and
+ * non-component constants are skipped by the `isComponent` + name filter.
+ */
+const componentEntries = (): [string, string, AnyComponent][] =>
+  Object.entries(MODULES).flatMap(([moduleName, mod]) =>
+    Object.entries(mod).flatMap(
+      ([name, comp]): [string, string, AnyComponent][] =>
+        /^[A-Z]/u.test(name) && isComponent(comp)
+          ? [[moduleName, name, comp]]
+          : []
+    )
+  );
+
+/** Component catalog entries, keyed by export name. */
+export const shadcnComponents: ComponentMap = Object.fromEntries(
+  componentEntries().map(([moduleName, name, comp]) => [
+    name,
+    wrap(moduleName, name, comp),
+  ])
+);
+
+/**
+ * shadcn export name → module specifier relative to this directory
+ * (`../components/ui/<name>.js`). The hydration bundle resolves each used
+ * component straight to its leaf module — the barrel would defeat
+ * tree-shaking.
+ */
+export const shadcnModules: Record<string, string> = Object.fromEntries(
+  componentEntries().map(([moduleName, name]) => [
+    name,
+    `../components/ui/${moduleName}.js`,
+  ])
+);

package/src/ui/spark.tsx

@@ -0,0 +1,86 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { numOf } from "./attrs.js";
+import { TONE_TEXT } from "./tones.js";
+
+export const SPARK_TONES = [
+  "neutral",
+  "emerald",
+  "amber",
+  "red",
+  "sky",
+  "violet",
+] as const;
+export type SparkTone = (typeof SPARK_TONES)[number];
+
+const PAD = 1.5;
+const W = 100;
+const H = 24;
+
+/** `"3, 8, 2, 12"` / `"3 8 2 12"` → finite numbers. */
+const parseValues = (x: unknown): number[] => {
+  if (typeof x !== "string") {
+    return [];
+  }
+  return x
+    .split(/[\s,]+/u)
+    .map((t) => numOf(t))
+    .filter((n): n is number => n !== undefined);
+};
+
+export const Spark = defineComponent(
+  {
+    description:
+      'インラインスパークライン (小さな折れ線 SVG)。values に数値列 ("3,8,2,12,5")、tone で色、label で aria ラベル。本文中のトレンド表示向け',
+    schema: v.looseObject({
+      label: v.optional(v.string()),
+      tone: v.optional(v.picklist(SPARK_TONES), "neutral"),
+      values: v.string(),
+    }),
+  },
+  ({ values, tone, label }) => {
+    const pts = parseValues(values);
+    if (pts.length < 2) {
+      return null;
+    }
+    const min = Math.min(...pts);
+    const max = Math.max(...pts);
+    const span = max - min || 1;
+    const stepX = (W - PAD * 2) / (pts.length - 1);
+    const points = pts
+      .map(
+        (p, i) =>
+          `${(PAD + i * stepX).toFixed(2)},${(
+            PAD +
+            (1 - (p - min) / span) * (H - PAD * 2)
+          ).toFixed(2)}`
+      )
+      .join(" ");
+    return (
+      <span
+        className={`not-prose mx-0.5 inline-flex align-middle ${TONE_TEXT[tone]}`}
+      >
+        <svg
+          aria-hidden={!nonEmpty(label)}
+          aria-label={nonEmpty(label) ? label : undefined}
+          className="h-4 w-16"
+          preserveAspectRatio="none"
+          role={nonEmpty(label) ? "img" : undefined}
+          viewBox={`0 0 ${W} ${H}`}
+        >
+          <polyline
+            fill="none"
+            points={points}
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+      </span>
+    );
+  }
+);

package/src/ui/stack.tsx

@@ -0,0 +1,57 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { GAPS } from "./layout.js";
+import { TRIM_CLS } from "./tones.js";
+
+const ITEMS: Record<string, string> = {
+  baseline: "items-baseline",
+  center: "items-center",
+  end: "items-end",
+  start: "items-start",
+  stretch: "",
+};
+
+export const Stack = defineComponent(
+  {
+    description:
+      "縦積みレイアウト。余白を持たないコンポーネント (Input/Textarea 等の shadcn/ui プリミティブ) を gap 付きで縦に並べる",
+    schema: v.looseObject({
+      className: v.optional(v.string()),
+      gap: v.optional(v.picklist(Object.keys(GAPS)), "md"),
+      items: v.optional(
+        v.picklist(["stretch", "start", "center", "end", "baseline"]),
+        "stretch"
+      ),
+    }),
+  },
+  ({ gap, items, className, children }) => (
+    <div
+      className={`my-6 flex flex-col ${GAPS[gap]} ${ITEMS[items]} ${className ?? ""} ${TRIM_CLS}`}
+    >
+      {children}
+    </div>
+  )
+);
+
+export const Row = defineComponent(
+  {
+    description:
+      "横並びレイアウト。Button/Badge などのインライン系コンポーネントを gap 付きで並べ、幅が足りなければ折り返す",
+    schema: v.looseObject({
+      className: v.optional(v.string()),
+      gap: v.optional(v.picklist(Object.keys(GAPS)), "sm"),
+      items: v.optional(
+        v.picklist(["stretch", "start", "center", "end", "baseline"]),
+        "center"
+      ),
+    }),
+  },
+  ({ gap, items, className, children }) => (
+    <div
+      className={`my-6 flex flex-wrap ${ITEMS[items]} ${GAPS[gap]} ${className ?? ""} ${TRIM_CLS}`}
+    >
+      {children}
+    </div>
+  )
+);