npm - mcp-react-toolkit - Versions diffs - 1.3.1 → 1.4.0 - Mend

mcp-react-toolkit 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (268) hide show

package/node_modules/@mcp-showcase/ui-kit/demo/result.html ADDED Viewed

@@ -0,0 +1,445 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Component Factory — @repo/ui</title>
+<style>
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{margin:0}
+:root{
+  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  /* light (default) */
+  --bg:#f7f7f6;
+  --surface:#ffffff;
+  --surface-2:#fbfbfa;
+  --text:#16161a;
+  --muted:#6b7280;
+  --faint:#9aa0aa;
+  --border:#ebe9e4;
+  --border-strong:#dedcd5;
+  --shadow:0 1px 2px rgba(16,16,20,.04),0 8px 24px -12px rgba(16,16,20,.10);
+  --ring:rgba(99,102,241,.45);
+  --good:#059669; --good-soft:#ecfdf5;
+  --warn:#d97706; --warn-soft:#fffbeb;
+  --bad:#e11d48;  --bad-soft:#fff1f2;
+  --sev-critical:#e11d48; --sev-high:#ea580c; --sev-medium:#d97706; --sev-low:#64748b;
+  --sev-critical-soft:#fff1f2; --sev-high-soft:#fff7ed; --sev-medium-soft:#fffbeb; --sev-low-soft:#f1f5f9;
+  --accent:var(--good);
+  --accent-soft:var(--good-soft);
+  --radius:14px;
+  --radius-sm:10px;
+}
+[data-theme="dark"]{
+  --bg:#0a0b0d;
+  --surface:#141519;
+  --surface-2:#0f1013;
+  --text:#f3f4f6;
+  --muted:#9aa1ad;
+  --faint:#6b7280;
+  --border:rgba(255,255,255,.07);
+  --border-strong:rgba(255,255,255,.12);
+  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -20px rgba(0,0,0,.7);
+  --ring:rgba(129,140,248,.55);
+  --good:#34d399; --good-soft:rgba(52,211,153,.12);
+  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12);
+  --bad:#fb7185;  --bad-soft:rgba(251,113,133,.12);
+  --sev-critical:#fb7185; --sev-high:#fb923c; --sev-medium:#fbbf24; --sev-low:#94a3b8;
+  --sev-critical-soft:rgba(251,113,133,.12); --sev-high-soft:rgba(251,146,60,.12);
+  --sev-medium-soft:rgba(251,191,36,.12); --sev-low-soft:rgba(148,163,184,.12);
+}
+[data-band="good"]{--accent:var(--good);--accent-soft:var(--good-soft)}
+[data-band="warn"]{--accent:var(--warn);--accent-soft:var(--warn-soft)}
+[data-band="bad"]{--accent:var(--bad);--accent-soft:var(--bad-soft)}
+body{
+  font-family:var(--font);
+  background:var(--bg);
+  color:var(--text);
+  font-size:14px;
+  line-height:1.5;
+  -webkit-font-smoothing:antialiased;
+  font-variant-numeric:tabular-nums;
+}
+.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
+.wrap{max-width:1040px;margin:0 auto;padding:28px 24px 64px}
+/* header */
+.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
+.brand{display:flex;align-items:center;gap:11px;min-width:0}
+.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;flex:none;border:1px solid var(--border)}
+.brand h1{font-size:15px;font-weight:650;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.brand .sub{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.hdr-actions{display:flex;align-items:center;gap:8px;flex:none}
+.btn{appearance:none;font-family:inherit;font-size:12.5px;font-weight:550;color:var(--text);
+  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:7px 11px;
+  cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.16s ease;line-height:1}
+.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
+.btn:active{transform:translateY(0)}
+.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
+.btn.icon{padding:7px;width:32px;height:32px;justify-content:center}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+[data-theme="dark"] .btn.primary{color:#0a0b0d}
+.btn.primary:hover{filter:brightness(1.05);color:#fff}
+[data-theme="dark"] .btn.primary:hover{color:#0a0b0d}
+/* hero */
+.hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
+  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:26px 28px;box-shadow:var(--shadow);margin-bottom:18px}
+.gauge{position:relative;width:148px;height:148px;flex:none}
+.gauge svg{transform:rotate(-90deg)}
+.gauge .track{stroke:var(--border-strong);fill:none}
+.gauge .arc{stroke:var(--accent);fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
+.gauge .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
+.gauge .score{font-size:42px;font-weight:680;letter-spacing:-.03em;line-height:1}
+.gauge .of{font-size:11px;color:var(--faint);margin-top:3px}
+.hero-meta{min-width:0}
+.grade-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
+.grade{font-size:13px;font-weight:650;color:var(--accent);background:var(--accent-soft);
+  border:1px solid var(--border);border-radius:7px;padding:3px 9px}
+.verdict{font-size:18px;font-weight:620;letter-spacing:-.01em}
+.hero p{color:var(--muted);margin:2px 0 14px;font-size:13px}
+.chips{display:flex;flex-wrap:wrap;gap:7px}
+.chip{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
+  border-radius:999px;padding:4px 10px;display:inline-flex;gap:5px}
+.chip b{color:var(--text);font-weight:600}
+/* section heading */
+.sec{margin:26px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
+.sec h2{font-size:13px;font-weight:620;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0}
+.sec .count{font-size:12px;color:var(--faint)}
+/* category cards */
+.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;
+  box-shadow:var(--shadow);transition:.16s ease;display:flex;flex-direction:column}
+.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
+.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
+.card .name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.card .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;flex:none}
+.badge.good{color:var(--good);background:var(--good-soft)}
+.badge.warn{color:var(--warn);background:var(--warn-soft)}
+.badge.bad{color:var(--bad);background:var(--bad-soft)}
+.card .sum{color:var(--muted);font-size:12.5px;line-height:1.45;min-height:3.9em;
+  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.bar{height:5px;border-radius:999px;background:var(--border-strong);overflow:hidden;margin-top:11px}
+.bar > i{display:block;height:100%;border-radius:999px;transition:width 1s cubic-bezier(.22,1,.36,1)}
+.bar > i.good{background:var(--good)} .bar > i.warn{background:var(--warn)} .bar > i.bad{background:var(--bad)}
+.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:11.5px;color:var(--faint)}
+/* toolbar */
+.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
+.search{flex:1;min-width:180px;position:relative}
+.search input{width:100%;font-family:inherit;font-size:13px;color:var(--text);background:var(--surface);
+  border:1px solid var(--border-strong);border-radius:9px;padding:8px 11px 8px 32px}
+.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
+.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint)}
+.filter{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px}
+.filter button{appearance:none;font-family:inherit;font-size:12px;font-weight:550;color:var(--muted);
+  background:transparent;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;transition:.14s}
+.filter button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
+.filter button:hover{color:var(--text)}
+/* table */
+.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  box-shadow:var(--shadow);overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
+thead th:nth-child(1),tbody td:nth-child(1){width:96px}
+thead th:nth-child(3),tbody td:nth-child(3){width:120px}
+thead th:nth-child(4),tbody td:nth-child(4){width:160px}
+thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
+  color:var(--faint);padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap}
+thead th .arr{opacity:.4;font-size:9px;margin-left:3px}
+thead th[aria-sort] .arr{opacity:1;color:var(--accent)}
+tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
+tbody tr:last-child{border-bottom:0}
+tbody tr:hover{background:var(--surface-2)}
+tbody td{padding:11px 16px;vertical-align:top}
+.sev{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;white-space:nowrap}
+.sev .pip{width:7px;height:7px;border-radius:999px;flex:none}
+.sev.critical{color:var(--sev-critical)} .sev.critical .pip{background:var(--sev-critical)}
+.sev.high{color:var(--sev-high)} .sev.high .pip{background:var(--sev-high)}
+.sev.medium{color:var(--sev-medium)} .sev.medium .pip{background:var(--sev-medium)}
+.sev.low{color:var(--sev-low)} .sev.low .pip{background:var(--sev-low)}
+.cell-title{font-weight:550;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.cell-file{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;word-break:normal;max-width:200px}
+.tag{font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
+  border-radius:6px;padding:2px 7px;white-space:nowrap}
+.empty{padding:40px 16px;text-align:center;color:var(--muted)}
+.empty .big{font-size:15px;color:var(--text);font-weight:600;margin-bottom:4px}
+/* drawer */
+.scrim{position:fixed;inset:0;background:rgba(10,11,13,.42);opacity:0;pointer-events:none;transition:.2s;z-index:40}
+.scrim.open{opacity:1;pointer-events:auto}
+.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--surface);
+  border-left:1px solid var(--border);box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);
+  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,1,.36,1);z-index:50;
+  display:flex;flex-direction:column}
+.drawer.open{transform:translateX(0)}
+.drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
+  padding:20px 22px 16px;border-bottom:1px solid var(--border)}
+.drawer header h3{margin:0;font-size:16px;font-weight:640;letter-spacing:-.01em;line-height:1.35}
+.drawer .body{padding:18px 22px;overflow-y:auto;flex:1}
+.drawer .field{margin-bottom:16px}
+.drawer .field .k{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
+.drawer .field .v{font-size:13.5px;color:var(--text)}
+.drawer .field .v.mono{font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all}
+.drawer .acts{padding:16px 22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px}
+.kv{display:flex;gap:8px;flex-wrap:wrap}
+.kv .pair{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:4px 9px}
+.kv .pair b{color:var(--text);font-weight:600}
+/* fix-first */
+.queue{display:flex;flex-direction:column;gap:8px}
+.qitem{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
+  border-radius:var(--radius-sm);padding:11px 14px;box-shadow:var(--shadow);cursor:pointer;transition:.14s}
+.qitem:hover{border-color:var(--accent);transform:translateX(2px)}
+.qitem .rank{width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
+  font-size:12px;font-weight:680;display:grid;place-items:center;flex:none}
+.qitem .qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.qitem .qt .t{display:block;font-weight:550;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.qitem .qt .s{display:block;font-size:11.5px;color:var(--faint)}
+/* toast */
+.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
+  background:var(--text);color:var(--bg);font-size:13px;font-weight:550;padding:10px 16px;border-radius:10px;
+  box-shadow:var(--shadow);transition:.22s;z-index:60;pointer-events:none;max-width:90vw}
+.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+.foot-note{margin-top:34px;text-align:center;font-size:11.5px;color:var(--faint)}
+.foot-note a{color:var(--muted)}
+@media (max-width:560px){
+  .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
+  .hero-meta{text-align:center}.chips{justify-content:center}.grade-row{justify-content:center}
+}
+/* result view */
+.result-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
+  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:22px 26px;box-shadow:var(--shadow);margin-bottom:18px}
+.result-hero .glyph{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;flex:none;border:1px solid var(--border)}
+.result-hero .rh-main{min-width:0;flex:1}
+.result-hero .rh-title{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1.2}
+.result-hero .rh-sub{color:var(--muted);font-size:13px;margin-top:3px}
+.status-pill{font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;white-space:nowrap}
+.status-pill.good{color:var(--good);background:var(--good-soft)}
+.status-pill.warn{color:var(--warn);background:var(--warn-soft)}
+.status-pill.bad{color:var(--bad);background:var(--bad-soft)}
+.result-hero .chips{margin-top:0}
+.changes{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
+.change-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .12s}
+.change-row:last-child{border-bottom:0}
+.change-row.clickable{cursor:pointer}
+.change-row.clickable:hover{background:var(--surface-2)}
+.kind{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;flex:none;width:74px;text-align:center}
+.kind.created{color:var(--good);background:var(--good-soft)}
+.kind.modified{color:var(--warn);background:var(--warn-soft)}
+.kind.deleted{color:var(--bad);background:var(--bad-soft)}
+.kind.renamed{color:var(--sev-low);background:var(--sev-low-soft)}
+.change-main{flex:1;min-width:0}
+.change-path{font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.change-sum{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.change-delta{font-family:var(--mono);font-size:11.5px;flex:none;white-space:nowrap}
+.change-delta .add{color:var(--good)} .change-delta .del{color:var(--bad)}
+.section{margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
+.section-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}
+.section-item:last-child{border-bottom:0}
+.section-item .ip{width:7px;height:7px;border-radius:999px;margin-top:6px;flex:none;background:var(--faint)}
+.section-item .ip.ok{background:var(--good)} .section-item .ip.warn{background:var(--warn)} .section-item .ip.error{background:var(--bad)}
+.section-item .it{font-size:13px;font-weight:550}
+.section-item .id{font-size:12px;color:var(--muted)}
+.next-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
+.diff{font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
+  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
+.diff .dl-add{color:var(--good)} .diff .dl-del{color:var(--bad)} .diff .dl-ctx{color:var(--muted)}
+@media (prefers-reduced-motion:reduce){
+  *{transition:none!important;animation:none!important}
+}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header class="hdr">
+    <div class="brand">
+      <span class="dot" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+      </span>
+      <div style="min-width:0">
+        <h1>Component Factory</h1>
+        <p class="sub">@repo/ui</p>
+      </div>
+    </div>
+    <div class="hdr-actions">
+      <button class="btn icon" id="theme-toggle" type="button" aria-label="Toggle colour theme" title="Toggle theme">
+        <span class="theme-sun" hidden><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span><span class="theme-moon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></span>
+      </button>
+      <button class="btn" id="export-btn" type="button" title="Copy summary as Markdown">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+        Export
+      </button>
+    </div>
+  </header>
+  <section class="result-hero" data-band="good">
+    <span class="glyph" aria-hidden="true">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+    </span>
+    <div class="rh-main">
+      <div class="rh-title">Created 3 files for Button</div>
+      <div class="rh-sub">shadcn/ui · Button</div>
+      <div class="chips" style="margin-top:10px"><span class="chip"><span>Created</span><b>3</b></span><span class="chip"><span>Template</span><b>shadcn/ui</b></span><span class="chip"><span>Variants</span><b>6</b></span></div>
+    </div>
+    <span class="status-pill good">Success</span>
+  </section>
+  <div class="sec"><h2>Next steps</h2></div>
+  <div class="next-steps"><button class="btn primary" type="button" data-action="review">Review the component</button><button class="btn" type="button" data-action="story">Generate more stories</button><button class="btn" type="button" data-action="barrel">Update barrel export</button></div>
+  <div class="sec"><h2>Changes</h2><span class="count">3 files</span></div>
+  <div class="changes">
+    <div class="change-row clickable" data-change="0" role="button" tabindex="0">
+      <span class="kind created">created</span>
+      <span class="change-main">
+        <span class="change-path">src/components/Button/Button.tsx</span>
+        <span class="change-sum">Component with 6 variants + 4 sizes</span>
+      </span>
+      <span class="change-delta"><span class="add">+84</span> </span>
+    </div>
+    <div class="change-row " >
+      <span class="kind created">created</span>
+      <span class="change-main">
+        <span class="change-path">src/components/Button/Button.test.tsx</span>
+        <span class="change-sum">Vitest + RTL suite, 8 cases</span>
+      </span>
+      <span class="change-delta"><span class="add">+52</span> </span>
+    </div>
+    <div class="change-row " >
+      <span class="kind created">created</span>
+      <span class="change-main">
+        <span class="change-path">src/components/Button/Button.stories.tsx</span>
+        <span class="change-sum">Storybook stories: Default, variants, sizes</span>
+      </span>
+      <span class="change-delta"><span class="add">+39</span> </span>
+    </div></div>
+    <div class="sec"><h2>Steps</h2><span class="count">4</span></div>
+    <div class="section">
+      <div class="section-item">
+        <span class="ip ok"></span>
+        <div style="min-width:0"><div class="it">Resolved shadcn/ui Button template</div></div>
+      </div>
+      <div class="section-item">
+        <span class="ip ok"></span>
+        <div style="min-width:0"><div class="it">Generated variants with CVA</div></div>
+      </div>
+      <div class="section-item">
+        <span class="ip ok"></span>
+        <div style="min-width:0"><div class="it">Wrote tests + stories</div></div>
+      </div>
+      <div class="section-item">
+        <span class="ip warn"></span>
+        <div style="min-width:0"><div class="it">Skipped: index barrel not updated</div><div class="id">Add `export * from &#39;./Button&#39;` to src/components/index.ts</div></div>
+      </div></div>
+<div class="foot-note">component-factory · generated 2026-06-27 · mcp-react-toolkit</div>
+</div>
+  <div class="scrim" id="scrim"></div>
+  <aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-labelledby="d-title">
+    <header>
+      <h3 id="d-title"></h3>
+      <button class="btn icon" id="d-close" type="button" aria-label="Close detail">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </header>
+    <div class="body" id="d-body"></div>
+    <div class="acts" id="d-acts"></div>
+  </aside>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+<script id="report-data" type="application/json">{"meta":{"title":"Component Factory","subtitle":"shadcn/ui · Button","target":"@repo/ui","generatedAt":"2026-06-27","tool":"component-factory"},"headline":"Created 3 files for Button","status":"success","stats":[{"label":"Created","value":"3"},{"label":"Template","value":"shadcn/ui"},{"label":"Variants","value":"6"}],"changes":[{"path":"src/components/Button/Button.tsx","kind":"created","summary":"Component with 6 variants + 4 sizes","additions":84,"language":"tsx","diff":"+ import { cva } from 'class-variance-authority';\n+ export const Button = ({ variant, size, ...props }) => {\n+   return \u003cbutton className={cn(buttonVariants({ variant, size }))} {...props} />;\n+ };"},{"path":"src/components/Button/Button.test.tsx","kind":"created","summary":"Vitest + RTL suite, 8 cases","additions":52,"language":"tsx"},{"path":"src/components/Button/Button.stories.tsx","kind":"created","summary":"Storybook stories: Default, variants, sizes","additions":39,"language":"tsx"}],"sections":[{"title":"Steps","items":[{"title":"Resolved shadcn/ui Button template","status":"ok"},{"title":"Generated variants with CVA","status":"ok"},{"title":"Wrote tests + stories","status":"ok"},{"title":"Skipped: index barrel not updated","detail":"Add `export * from './Button'` to src/components/index.ts","status":"warn"}]}],"nextActions":[{"id":"review","label":"Review the component","kind":"tool","tool":"component-reviewer","params":{"path":"src/components/Button/Button.tsx"},"fallback":"Review src/components/Button/Button.tsx."},{"id":"story","label":"Generate more stories","kind":"tool","tool":"storybook-generator","params":{"path":"src/components/Button/Button.tsx"},"fallback":"Generate Storybook stories for Button."},{"id":"barrel","label":"Update barrel export","kind":"prompt","prompt":"Add `export * from './Button'` to src/components/index.ts"}]}</script>
+<script>(function(){
+  "use strict";
+  function readEmbedded(){ var el=document.getElementById('report-data'); if(!el) return null;
+    try{ return JSON.parse(el.textContent||'null'); }catch(e){ return null; } }
+  function readUrl(){ try{ var p=new URLSearchParams(location.search).get('data'); if(!p) return null;
+    var bytes=Uint8Array.from(atob(p), function(c){ return c.charCodeAt(0); });
+    return JSON.parse(new TextDecoder().decode(bytes)); }catch(e){ return null; } }
+  var DATA = window.__REPORT__ || readEmbedded() || readUrl();
+  if(!DATA){ return; }
+  var EMBEDDED=false; try{ EMBEDDED = window.self !== window.top; }catch(e){ EMBEDDED=true; }
+  var HOST_ORIGIN = window.__MCP_HOST_ORIGIN__ || '*';
+  var root=document.documentElement, lastFocus=null;
+  function E(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
+  function $(id){ return document.getElementById(id); }
+  // theme
+  function store(k,v){ try{ if(v==null) return localStorage.getItem(k); localStorage.setItem(k,v); }catch(e){ return null; } }
+  function applyTheme(t){ root.setAttribute('data-theme',t);
+    var sun=document.querySelector('.theme-sun'), moon=document.querySelector('.theme-moon');
+    if(sun&&moon){ sun.hidden=t!=='dark'; moon.hidden=t==='dark'; } }
+  var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  applyTheme(store('mcp-ui-theme') || (prefersDark?'dark':'light'));
+  var tt=$('theme-toggle'); if(tt) tt.addEventListener('click', function(){
+    var n=root.getAttribute('data-theme')==='dark'?'light':'dark'; applyTheme(n); store('mcp-ui-theme',n); });
+  root.setAttribute('data-band', DATA.status==='partial'?'warn':'good');
+  // actions
+  var actionsById={}; (DATA.nextActions||[]).forEach(function(a){ actionsById[a.id]=a; });
+  function copy(text){ try{ if(navigator.clipboard&&navigator.clipboard.writeText) return navigator.clipboard.writeText(text); }catch(e){}
+    try{ var t=document.createElement('textarea'); t.value=text; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); }catch(e){} }
+  var toastTimer; function toast(msg){ var el=$('toast'); if(!el) return; el.textContent=msg; el.classList.add('show');
+    clearTimeout(toastTimer); toastTimer=setTimeout(function(){ el.classList.remove('show'); },2600); }
+  function runAction(id){ var a=actionsById[id]; if(!a) return;
+    if(a.kind==='link'){ if(!/^https?:\/\//i.test(a.href||'')){ toast('Unsafe link blocked'); return; } window.open(a.href,'_blank','noopener'); return; }
+    if(EMBEDDED){ var msg = a.kind==='tool' ? { type:'tool', messageId:'mcp-ui-'+Date.now(), payload:{ toolName:a.tool, params:a.params||{} } } : { type:'prompt', messageId:'mcp-ui-'+Date.now(), payload:{ prompt:a.prompt } };
+      try{ window.parent.postMessage(msg,HOST_ORIGIN); toast(a.kind==='tool'?('Running '+a.tool+' …'):'Sent to agent ✓'); return; }catch(e){} }
+    var text = a.kind==='tool' ? (a.fallback||('Run '+a.tool)) : (a.prompt||a.fallback||a.label); copy(text); toast('Copied — paste into your agent'); }
+  document.addEventListener('click', function(e){ var el=e.target.closest && e.target.closest('[data-action]');
+    if(el){ e.preventDefault(); runAction(el.getAttribute('data-action')); } });
+  // change diff drawer
+  var drawer=$('drawer'), scrim=$('scrim');
+  function renderDiff(diff){ return diff.split('\n').map(function(l){
+    var c = l.charAt(0)==='+' ? 'dl-add' : l.charAt(0)==='-' ? 'dl-del' : 'dl-ctx'; return '<span class="'+c+'">'+E(l)+'</span>'; }).join('\n'); }
+  function openChange(i){ var c=(DATA.changes||[])[i]; if(!c||!c.diff) return; lastFocus=document.activeElement;
+    $('d-title').textContent=c.path;
+    $('d-body').innerHTML='<div class="kv" style="margin-bottom:14px"><span class="pair"><b>'+E(c.kind)+'</b></span>'+(c.language?'<span class="pair">'+E(c.language)+'</span>':'')+'</div><div class="diff">'+renderDiff(c.diff)+'</div>';
+    $('d-acts').innerHTML='';
+    drawer.classList.add('open'); scrim.classList.add('open'); var dc=$('d-close'); if(dc) dc.focus(); }
+  function closeDrawer(){ drawer.classList.remove('open'); scrim.classList.remove('open'); if(lastFocus&&lastFocus.focus){ lastFocus.focus(); lastFocus=null; } }
+  document.addEventListener('click', function(e){ var r=e.target.closest && e.target.closest('.change-row[data-change]'); if(r) openChange(parseInt(r.getAttribute('data-change'),10)); });
+  document.addEventListener('keydown', function(e){ if((e.key==='Enter'||e.key===' ')){ var r=e.target.closest && e.target.closest('.change-row[data-change]'); if(r){ e.preventDefault(); openChange(parseInt(r.getAttribute('data-change'),10)); } } });
+  if(scrim) scrim.addEventListener('click', closeDrawer);
+  var dcl=$('d-close'); if(dcl) dcl.addEventListener('click', closeDrawer);
+  document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeDrawer(); });
+  // export
+  var ex=$('export-btn'); function md(s){ return String(s==null?'':s).replace(/[\r\n]+/g,' '); }
+  if(ex) ex.addEventListener('click', function(){ var L=[]; L.push('# '+md(DATA.meta.title)); L.push('');
+    L.push('**'+md(DATA.headline)+'** ('+DATA.status+')  '); L.push('**Target:** '+md(DATA.meta.target)); L.push('');
+    if((DATA.changes||[]).length){ L.push('## Changes'); (DATA.changes||[]).forEach(function(c){ L.push('- ['+c.kind.toUpperCase()+'] '+md(c.path)+(c.summary?(' — '+md(c.summary)):'')); }); L.push(''); }
+    (DATA.sections||[]).forEach(function(s){ L.push('## '+md(s.title)); s.items.forEach(function(it){ L.push('- '+md(it.title)+(it.detail?(' — '+md(it.detail)):'')); }); L.push(''); });
+    copy(L.join('\n')); toast('Summary copied as Markdown ✓'); });
+})();</script>
+</body>
+</html>

package/node_modules/@mcp-showcase/ui-kit/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "@mcp-showcase/ui-kit",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Reusable single-file HTML report UI for MCP tools — dependency-free, dual-theme, agentic. Flagship: Codebase Health Studio.",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "scripts": {
+    "build": "tsc && node build/generate-template.js",
+    "dev": "tsc --watch",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^5.0.0",
+    "vitest": "^2.0.0"
+  }
+}