1 files changed, 160 insertions, 0 deletions
diff --git a/_shared/components.css b/_shared/components.css
new file mode 100644
index 0000000..2b50d99
--- /dev/null
+++ b/_shared/components.css
@@ -0,0 +1,160 @@
+/* ============================================================
+   panto docs — static component styles.
+   Extracted from the Pantograph design system's React components
+   (Badge, Tag, Terminal, CodeBlock, Callout) so the docs render
+   identically as plain HTML, with no JavaScript and no React.
+   These mirror the styles those components inject at runtime.
+   ============================================================ */
+
+/* ---- Badge ----------------------------------------------------------- */
+.pg-badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-family: var(--font-display); font-weight: var(--weight-semibold);
+  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
+  text-transform: uppercase; line-height: 1; white-space: nowrap;
+  padding: 4px 7px; border-radius: var(--radius-xs);
+  border: var(--border-thin) solid transparent;
+}
+.pg-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
+.pg-badge--neutral { color: var(--ink-2); background: var(--paper-2); border-color: var(--paper-3); }
+.pg-badge--danger  { color: var(--red-deep); background: var(--red-wash); border-color: var(--red-soft); }
+.pg-badge--success { color: var(--green-deep); background: var(--green-wash); border-color: var(--green-soft); }
+.pg-badge--ink     { color: var(--paper-0); background: var(--ink-1); border-color: var(--ink-1); }
+.pg-badge--outline { color: var(--ink-2); background: transparent; border-color: var(--border-default); }
+
+/* ---- Tag ------------------------------------------------------------- */
+.pg-tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono); font-weight: var(--weight-medium);
+  font-size: var(--text-xs); line-height: 1; white-space: nowrap;
+  color: var(--ink-1); background: var(--paper-0);
+  padding: 5px 9px; border-radius: var(--radius-pill);
+  border: var(--border-thin) solid var(--border-default);
+}
+.pg-tag__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; background: var(--ink-3); }
+
+/* ---- Callout (admonition) -------------------------------------------- */
+.pg-callout {
+  display: flex; gap: 12px;
+  padding: 13px 15px;
+  background: var(--paper-0);
+  border: var(--border-thin) solid var(--border-hairline);
+  border-left: var(--border-thick) solid var(--ink-3);
+  border-radius: var(--radius-sm);
+}
+.pg-callout__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
+.pg-callout__icon svg { width: 100%; height: 100%; }
+.pg-callout__body { font: var(--weight-regular) var(--text-sm)/1.55 var(--font-sans); color: var(--ink-1); }
+.pg-callout__title {
+  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
+  letter-spacing: var(--tracking-label); text-transform: uppercase;
+  margin: 0 0 5px; color: var(--ink-2);
+}
+.pg-callout__body p { margin: 0 0 var(--space-2); }
+.pg-callout__body :last-child { margin-bottom: 0; }
+.pg-callout--note    { border-left-color: var(--ink-3); }
+.pg-callout--tip     { border-left-color: var(--green); background: var(--green-wash); }
+.pg-callout--tip .pg-callout__icon, .pg-callout--tip .pg-callout__title { color: var(--green-deep); }
+.pg-callout--warn    { border-left-color: var(--brass); background: #F0E7D0; }
+.pg-callout--warn .pg-callout__icon, .pg-callout--warn .pg-callout__title { color: #7A5E20; }
+.pg-callout--danger  { border-left-color: var(--red); background: var(--red-wash); }
+.pg-callout--danger .pg-callout__icon, .pg-callout--danger .pg-callout__title { color: var(--red-deep); }
+
+/* ---- CodeBlock ------------------------------------------------------- */
+.pg-code {
+  background: var(--surface-code);
+  border: var(--border-thin) solid var(--border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  font-family: var(--font-mono);
+}
+.pg-code__bar {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; background: var(--paper-2);
+  border-bottom: var(--border-thin) solid var(--border-hairline);
+}
+.pg-code__name { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--ink-2); }
+.pg-code__lang {
+  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
+  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
+  margin-left: auto; padding-right: 4px;
+}
+.pg-code__copy {
+  display: inline-flex; align-items: center; gap: 5px;
+  font: var(--weight-medium) var(--text-2xs)/1 var(--font-display);
+  letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--ink-3); background: none; border: 0; cursor: pointer;
+  padding: 4px 6px; border-radius: var(--radius-xs);
+  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
+}
+.pg-code__copy:hover { color: var(--ink-0); background: var(--paper-1); }
+.pg-code__copy--done { color: var(--green-deep); }
+.pg-code__copy svg { width: 13px; height: 13px; }
+.pg-code__copy .pg-code__check { display: none; }
+.pg-code__copy--done .pg-code__check { display: inline; }
+.pg-code__copy--done .pg-code__copyglyph { display: none; }
+.pg-code__scroll { overflow-x: auto; padding: 14px 16px; }
+.pg-code pre { font-size: var(--text-sm); line-height: var(--leading-mono); color: var(--ink-1); margin: 0; }
+.pg-code code { font-family: inherit; background: none; border: 0; padding: 0; color: inherit; }
+/* token colors for hand-marked spans */
+.pg-code .tok-kw { color: var(--green-deep); }
+.pg-code .tok-str { color: var(--red-deep); }
+.pg-code .tok-com { color: var(--ink-4); font-style: italic; }
+.pg-code .tok-fn { color: var(--ink-0); font-weight: 500; }
+.pg-code .tok-num { color: var(--brass); }
+
+/* ---- Terminal -------------------------------------------------------- */
+.pg-term {
+  background: var(--ink-1);
+  border: var(--border-thin) solid var(--ink-0);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-mono);
+}
+.pg-term__bar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 9px 12px; background: #232B3B;
+  border-bottom: var(--border-thin) solid #2E3749;
+}
+.pg-term__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
+.pg-term__title {
+  margin-left: 6px;
+  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
+  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--paper-4);
+}
+.pg-term__body { padding: 14px 16px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.65; }
+.pg-term__line { white-space: pre; color: var(--paper-2); }
+.pg-term__line .pg-term__prompt { color: var(--green-soft); user-select: none; }
+.pg-term__line .pg-term__panto { color: var(--red-soft); user-select: none; }
+.pg-term__line--cmd { color: var(--paper-0); }
+.pg-term__line--out { color: var(--paper-4); }
+.pg-term__line--ok { color: var(--green-soft); }
+.pg-term__line--err { color: var(--red-soft); }
+.pg-term__line--com { color: #6E7689; font-style: italic; }
+.pg-term__cursor {
+  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
+  background: var(--red); margin-left: 2px;
+  animation: pg-term-blink 1.1s steps(1) infinite;
+}
+@keyframes pg-term-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .pg-term__cursor { animation: none; } }
+/* panto TUI mock: welcome banner, user block, tool boxes, footer, input frame */
+.pg-term__line--accent { color: var(--red-soft); }
+.pg-term__line--dim { color: #6E7689; }
+.pg-term__user {
+  white-space: pre-wrap; color: var(--paper-0);
+  background: rgba(178,58,46,0.16); padding: 5px 10px; margin: 3px 0;
+}
+.pg-term__tool { margin: 3px 0; }
+.pg-term__tool-head { white-space: pre; color: var(--paper-0); padding-left: 1ch; }
+.pg-term__tool-body {
+  white-space: pre; color: var(--paper-4);
+  padding: 3px 0 0 calc(1ch + 8px); margin-left: 1ch;
+  border-left: 2px solid #2E3749;
+}
+.pg-term__add { color: var(--green-soft); }
+.pg-term__del { color: var(--red-soft); }
+.pg-term .pg-term__rule { border: 0; border-top: 1px solid #2E3749; margin: 7px 0; }
+.pg-term code { background: none; border: 0; padding: 0; color: var(--green-soft); font: inherit; }
+.pg-term__user code { color: inherit; }