@suzumiyaaoba/mdxr 0.1.0

package/src/ui/verdict.tsx

@@ -0,0 +1,78 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Pill, TrimBody } from "./bits.js";
+import { Icon } from "./icon.js";
+import { EDGE_PANEL_CLS, TONE, TONE_BAND } from "./tones.js";
+
+export const VERDICTS = ["approve", "pass", "warn", "fail", "info"] as const;
+export type VerdictStatus = (typeof VERDICTS)[number];
+
+const STYLES: Record<
+  VerdictStatus,
+  { band: string; border: string; chip: string; icon: string; label: string }
+> = {
+  approve: {
+    band: TONE_BAND.emerald,
+    border: "border-emerald-500",
+    chip: TONE.emerald,
+    icon: "lucide:circle-check-big",
+    label: "Approved",
+  },
+  fail: {
+    band: TONE_BAND.red,
+    border: "border-red-500",
+    chip: TONE.red,
+    icon: "lucide:circle-x",
+    label: "Failed",
+  },
+  info: {
+    band: TONE_BAND.sky,
+    border: "border-sky-500",
+    chip: TONE.sky,
+    icon: "lucide:info",
+    label: "Note",
+  },
+  pass: {
+    band: TONE_BAND.emerald,
+    border: "border-emerald-500",
+    chip: TONE.emerald,
+    icon: "lucide:circle-check",
+    label: "Passed",
+  },
+  warn: {
+    band: TONE_BAND.amber,
+    border: "border-amber-500",
+    chip: TONE.amber,
+    icon: "lucide:triangle-alert",
+    label: "Warning",
+  },
+};
+
+export const Verdict = defineComponent(
+  {
+    description:
+      "判定バナー。status は approve|pass|warn|fail|info。レビューの合否・移行可否・検証結果の結論を目立つ帯で示す。label で表示文字を上書き可",
+    schema: v.looseObject({
+      label: v.optional(v.string()),
+      status: v.optional(v.picklist(VERDICTS), "info"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ status, title, label, children }) => {
+    const s = STYLES[status];
+    return (
+      <aside className={`${EDGE_PANEL_CLS} ${s.band} ${s.border}`}>
+        <div className="flex flex-wrap items-center gap-2">
+          <Icon className="h-4 w-4" label={s.label} name={s.icon} />
+          <Pill className={s.chip}>{nonEmpty(label) ? label : s.label}</Pill>
+          {nonEmpty(title) ? (
+            <span className="font-semibold">{title}</span>
+          ) : null}
+        </div>
+        <TrimBody className="mt-1.5">{children}</TrimBody>
+      </aside>
+    );
+  }
+);

package/src/ui/waterfall.tsx

@@ -0,0 +1,142 @@
+import { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH, numOf } from "./attrs.js";
+import { CaptionBar, Panel, RowLabel } from "./bits.js";
+import { indexChildren, useChildIndex } from "./child-index.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  MONO_NUM_CLS,
+  TEXT,
+  TEXT_MICRO,
+  TRACK_CLS,
+} from "./tones.js";
+
+/**
+ * Timing waterfall — horizontal span bars like an OTel trace view. `start`
+ * and `duration` accept numbers or strings with a unit suffix ("120ms",
+ * "1.2s"); the bar scale is `total` (defaults to the latest span end).
+ */
+
+const PALETTE = [
+  "bg-sky-500",
+  "bg-emerald-500",
+  "bg-amber-500",
+  "bg-violet-500",
+  "bg-rose-500",
+  "bg-cyan-500",
+  "bg-orange-500",
+  "bg-teal-500",
+] as const;
+
+/** Scale (same units as Span start/duration) handed down by <Waterfall>. */
+const ScaleCtx = createContext(1);
+
+export const Span = defineComponent(
+  {
+    description:
+      'ウォーターフォールの1区間。name は必須、duration も必須 (数値または "120ms")。start で開始オフセット、note で補足。バーの色は行番号で自動',
+    schema: v.looseObject({
+      duration: NUMISH,
+      name: v.string(),
+      note: v.optional(v.string()),
+      start: v.optional(NUMISH),
+    }),
+  },
+  ({ name, duration, note, start }) => {
+    const scale = useContext(ScaleCtx);
+    const { n } = useChildIndex();
+    const cls = PALETTE[(n > 0 ? n - 1 : 0) % PALETTE.length];
+    const s = numOf(start) ?? 0;
+    const d = numOf(duration) ?? 0;
+    const left = Math.min(100, Math.max(0, (s / scale) * 100));
+    const width = Math.min(100 - left, Math.max(0.4, (d / scale) * 100));
+    return (
+      <div className="grid grid-cols-[minmax(6rem,9rem)_minmax(0,1fr)_4.5rem] items-center gap-x-3 py-1">
+        <RowLabel name={name} sub={note} />
+        <div className={`relative h-4.5 rounded ${TRACK_CLS}`}>
+          <div
+            className={`absolute inset-y-0 rounded ${cls}`}
+            style={{ left: `${left}%`, width: `${width}%` }}
+          />
+        </div>
+        <div
+          className={`text-right font-mono ${TEXT_MICRO} tabular-nums ${TEXT.muted}`}
+        >
+          {String(duration)}
+        </div>
+      </div>
+    );
+  }
+);
+
+const spanDuration = (node: ReactNode): number | undefined => {
+  if (!isEl(node, Span)) {
+    return undefined;
+  }
+  const duration = numOf(propOf(node, "duration"));
+  if (duration === undefined) {
+    return undefined;
+  }
+  return (numOf(propOf(node, "start")) ?? 0) + duration;
+};
+
+export const Waterfall = defineComponent(
+  {
+    description:
+      "タイミングの滝グラフコンテナ (OTel トレース風)。<Span> を並べる。total でスケール上限を上書き (省略時は最終 end)、unit は total 表示用の単位",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      total: v.optional(NUMISH),
+      unit: v.optional(v.string(), "ms"),
+    }),
+  },
+  ({ title, total, unit, children }) => {
+    const ends = flattenChildren(children)
+      .map(spanDuration)
+      .filter((e): e is number => e !== undefined);
+    let maxEnd = 0;
+    for (const e of ends) {
+      maxEnd = Math.max(maxEnd, e);
+    }
+    const totalNum = numOf(total) ?? maxEnd;
+    const scale = totalNum > 0 ? totalNum : 1;
+    return (
+      <Panel>
+        {nonEmpty(title) ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:chart-bar" />
+            <span className="min-w-0 flex-1 truncate">{title}</span>
+            <span className={MONO_NUM_CLS}>
+              {totalNum}
+              {unit}
+            </span>
+          </CaptionBar>
+        ) : null}
+        <div className="px-4 py-3">
+          <div className="grid grid-cols-[minmax(6rem,9rem)_minmax(0,1fr)_4.5rem] gap-x-3 pb-1">
+            <span />
+            <span
+              className={`flex justify-between font-mono ${TEXT_MICRO} ${TEXT.faint} tabular-nums`}
+            >
+              <span>0</span>
+              <span>
+                {totalNum}
+                {unit}
+              </span>
+            </span>
+            <span />
+          </div>
+          <ScaleCtx.Provider value={scale}>
+            {indexChildren(children)}
+          </ScaleCtx.Provider>
+        </div>
+      </Panel>
+    );
+  }
+);