base site: claude design plus some tweaks

1 files changed, 1878 insertions, 0 deletions

diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/_ds_bundle.js b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/_ds_bundle.js
new file mode 100644
index 0000000..f584806
--- /dev/null
+++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/_ds_bundle.js
@@ -0,0 +1,1878 @@
+/* @ds-bundle: {"format":3,"namespace":"PantographDesignSystem_56a1c7","components":[{"name":"Callout","sourcePath":"components/code/Callout.jsx"},{"name":"CodeBlock","sourcePath":"components/code/CodeBlock.jsx"},{"name":"Terminal","sourcePath":"components/code/Terminal.jsx"},{"name":"Badge","sourcePath":"components/core/Badge.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Card","sourcePath":"components/core/Card.jsx"},{"name":"IconButton","sourcePath":"components/core/IconButton.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"}],"sourceHashes":{"components/code/Callout.jsx":"dc74992ca3a8","components/code/CodeBlock.jsx":"75f95cdb07d4","components/code/Terminal.jsx":"32207bf1f8d8","components/core/Badge.jsx":"c04491952135","components/core/Button.jsx":"c43631b0d758","components/core/Card.jsx":"b4474a239d87","components/core/IconButton.jsx":"bd55860ce51f","components/core/Tag.jsx":"c8a2e8432e9a","components/forms/Input.jsx":"4c58262a357e","components/forms/Select.jsx":"a2a13ccf0cb7","components/forms/Switch.jsx":"2737a3f2e747","components/navigation/Tabs.jsx":"d3f184460fa6","ui_kits/docs/App.jsx":"7a59cd523900","ui_kits/docs/DocsHeader.jsx":"2eb476264c51","ui_kits/docs/DocsSidebar.jsx":"a091bd208645","ui_kits/docs/ReferencePage.jsx":"d0855f29aced","ui_kits/home/Features.jsx":"48ac29e811d8","ui_kits/home/Hero.jsx":"2dc3333c9b3b","ui_kits/home/HomeApp.jsx":"f2a18138face","ui_kits/home/HomeHeader.jsx":"dfc98c37e66f","ui_kits/home/InstallSection.jsx":"aec2cdd7dae8"},"inlinedExternals":[],"unexposedExports":[]} */
+
+(() => {
+
+const __ds_ns = (window.PantographDesignSystem_56a1c7 = window.PantographDesignSystem_56a1c7 || {});
+
+const __ds_scope = {};
+
+(__ds_ns.__errors = __ds_ns.__errors || []);
+
+// components/code/Callout.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-callout-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .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 :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); }
+  `;
+  document.head.appendChild(el);
+}
+const ICONS = {
+  note: /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 16v-4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 8h.01"
+  })),
+  tip: /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 18h6"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 22h4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"
+  })),
+  warn: /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 9v4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 17h.01"
+  })),
+  danger: /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m15 9-6 6"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m9 9 6 6"
+  }))
+};
+const DEFAULT_TITLES = {
+  note: 'Note',
+  tip: 'Tip',
+  warn: 'Warning',
+  danger: 'Danger'
+};
+
+/**
+ * Callout — a documentation admonition (note / tip / warn / danger).
+ */
+function Callout({
+  variant = 'note',
+  title,
+  icon,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const heading = title === undefined ? DEFAULT_TITLES[variant] : title;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: ['pg-callout', `pg-callout--${variant}`, className].filter(Boolean).join(' ')
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: "pg-callout__icon"
+  }, icon || ICONS[variant]), /*#__PURE__*/React.createElement("div", {
+    className: "pg-callout__body"
+  }, heading ? /*#__PURE__*/React.createElement("p", {
+    className: "pg-callout__title"
+  }, heading) : null, children));
+}
+Object.assign(__ds_scope, { Callout });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/code/Callout.jsx", error: String((e && e.message) || e) }); }
+
+// components/code/CodeBlock.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-codeblock-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .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__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--nobar { }
+  /* 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); }
+  `;
+  document.head.appendChild(el);
+}
+const CopyGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "9",
+  y: "9",
+  width: "11",
+  height: "11",
+  rx: "2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M5 15V5a2 2 0 0 1 2-2h10"
+}));
+const CheckGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "m20 6-11 11-5-5"
+}));
+
+/**
+ * CodeBlock — a code surface with an optional title bar, language label,
+ * and copy button. Pass a raw `code` string or pre-marked JSX children.
+ */
+function CodeBlock({
+  code = null,
+  language = null,
+  filename = null,
+  showBar = true,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const [copied, setCopied] = React.useState(false);
+  const preRef = React.useRef(null);
+  const copy = () => {
+    const text = code != null ? code : preRef.current ? preRef.current.innerText : '';
+    if (navigator.clipboard) navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1400);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: ['pg-code', className].filter(Boolean).join(' ')
+  }, rest), showBar ? /*#__PURE__*/React.createElement("div", {
+    className: "pg-code__bar"
+  }, filename ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-code__name"
+  }, filename) : null, language ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-code__lang"
+  }, language) : null, /*#__PURE__*/React.createElement("button", {
+    className: ['pg-code__copy', copied ? 'pg-code__copy--done' : ''].join(' '),
+    onClick: copy
+  }, copied ? /*#__PURE__*/React.createElement(CheckGlyph, null) : /*#__PURE__*/React.createElement(CopyGlyph, null), copied ? 'Copied' : 'Copy')) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pg-code__scroll"
+  }, /*#__PURE__*/React.createElement("pre", {
+    ref: preRef
+  }, /*#__PURE__*/React.createElement("code", null, children != null ? children : code))));
+}
+Object.assign(__ds_scope, { CodeBlock });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/code/CodeBlock.jsx", error: String((e && e.message) || e) }); }
+
+// components/code/Terminal.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-terminal-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .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; } }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Terminal — a panto CLI window. Render with a `lines` array, or pass
+ * children for full control. Line types: cmd, out, ok, err, com.
+ */
+function Terminal({
+  title = 'panto',
+  lines = null,
+  cursor = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: ['pg-term', className].filter(Boolean).join(' ')
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: "pg-term__bar"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pg-term__dot",
+    style: {
+      background: 'var(--red)'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "pg-term__dot",
+    style: {
+      background: 'var(--brass)'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "pg-term__dot",
+    style: {
+      background: 'var(--green)'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "pg-term__title"
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "pg-term__body"
+  }, lines ? lines.map((l, i) => {
+    const type = l.type || 'out';
+    if (type === 'cmd') {
+      return /*#__PURE__*/React.createElement("div", {
+        key: i,
+        className: "pg-term__line pg-term__line--cmd"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: l.shell === 'panto' ? 'pg-term__panto' : 'pg-term__prompt'
+      }, l.shell === 'panto' ? 'panto ▸ ' : '$ '), l.text);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: `pg-term__line pg-term__line--${type}`
+    }, l.text);
+  }) : children, cursor ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-term__cursor"
+  }) : null));
+}
+Object.assign(__ds_scope, { Terminal });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/code/Terminal.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Badge.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-badge-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .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); }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Badge — a small engraved-label status marker (Stable, Beta, Deprecated, …).
+ */
+function Badge({
+  variant = 'neutral',
+  dot = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const cls = ['pg-badge', `pg-badge--${variant}`, className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: cls
+  }, rest), dot ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-badge__dot"
+  }) : null, children);
+}
+Object.assign(__ds_scope, { Badge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Badge.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Button.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* Injects the Button stylesheet once. Components in this system are
+   self-contained: they reference design tokens via CSS custom
+   properties and ship their own scoped CSS. */
+const STYLE_ID = 'pg-button-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-btn {
+    --_bg: var(--ink-1); --_fg: var(--paper-0); --_bd: var(--ink-1);
+    display: inline-flex; align-items: center; justify-content: center;
+    gap: var(--space-2); box-sizing: border-box;
+    font-family: var(--font-sans); font-weight: var(--weight-semibold);
+    line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
+    background: var(--_bg); color: var(--_fg);
+    border: var(--border-medium) solid var(--_bd);
+    border-radius: var(--radius-sm);
+    cursor: pointer; text-decoration: none; user-select: none;
+    transition: background var(--dur-fast) var(--ease-out),
+                border-color var(--dur-fast) var(--ease-out),
+                transform var(--dur-fast) var(--ease-out),
+                box-shadow var(--dur-fast) var(--ease-out);
+    box-shadow: var(--shadow-xs);
+  }
+  .pg-btn:hover { background: var(--_bgh, var(--_bg)); border-color: var(--_bdh, var(--_bd)); }
+  .pg-btn:active { transform: translateY(1px); box-shadow: none; }
+  .pg-btn:focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }
+  .pg-btn[disabled] { cursor: not-allowed; opacity: 0.45; box-shadow: none; transform: none; }
+
+  .pg-btn--sm { font-size: var(--text-xs); padding: 6px 12px; }
+  .pg-btn--md { font-size: var(--text-sm); padding: 9px 16px; }
+  .pg-btn--lg { font-size: var(--text-base); padding: 12px 22px; }
+  .pg-btn--block { display: flex; width: 100%; }
+
+  .pg-btn--primary   { --_bg: var(--ink-1); --_fg: var(--paper-0); --_bd: var(--ink-1); --_bgh: var(--ink-0); --_bdh: var(--ink-0); }
+  .pg-btn--accent    { --_bg: var(--red); --_fg: var(--paper-0); --_bd: var(--red); --_bgh: var(--red-deep); --_bdh: var(--red-deep); }
+  .pg-btn--secondary { --_bg: var(--paper-0); --_fg: var(--ink-1); --_bd: var(--border-default); --_bgh: var(--paper-2); --_bdh: var(--ink-3); }
+  .pg-btn--ghost     { --_bg: transparent; --_fg: var(--ink-1); --_bd: transparent; --_bgh: var(--paper-2); --_bdh: transparent; box-shadow: none; }
+  .pg-btn--danger    { --_bg: transparent; --_fg: var(--red-deep); --_bd: var(--red); --_bgh: var(--red-wash); --_bdh: var(--red-deep); box-shadow: none; }
+  .pg-btn__icon { display: inline-flex; width: 1.05em; height: 1.05em; }
+  .pg-btn__icon svg { width: 100%; height: 100%; }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Button — the primary action control. Machined edges, instrument palette.
+ */
+function Button({
+  variant = 'primary',
+  size = 'md',
+  block = false,
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  as = 'button',
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const Tag = as;
+  const cls = ['pg-btn', `pg-btn--${variant}`, `pg-btn--${size}`, block ? 'pg-btn--block' : '', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    className: cls,
+    disabled: Tag === 'button' ? disabled : undefined
+  }, rest), icon ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-btn__icon"
+  }, icon) : null, children, iconRight ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-btn__icon"
+  }, iconRight) : null);
+}
+Object.assign(__ds_scope, { Button });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Card.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-card-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-card {
+    display: block; box-sizing: border-box;
+    background: var(--surface-card);
+    border: var(--border-thin) solid var(--border-hairline);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+  }
+  .pg-card--flat { box-shadow: none; }
+  .pg-card--sunken { background: var(--surface-sunken); box-shadow: var(--shadow-inset); border-color: var(--paper-3); }
+  .pg-card--interactive { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
+  .pg-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-1px); }
+  /* top engraved tick rule, like a scale edge */
+  .pg-card--ruled { border-top: var(--border-thick) solid var(--ink-1); }
+  .pg-card--ruled.pg-card--accent { border-top-color: var(--red); }
+
+  .pg-card__header {
+    display: flex; align-items: center; gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-bottom: var(--border-thin) solid var(--border-hairline);
+  }
+  .pg-card__title { font: var(--weight-semibold) var(--text-lg)/1.2 var(--font-sans); color: var(--text-strong); margin: 0; }
+  .pg-card__body { padding: var(--space-5); }
+  .pg-card__footer {
+    padding: var(--space-4) var(--space-5);
+    border-top: var(--border-thin) solid var(--border-hairline);
+    background: var(--paper-1);
+    display: flex; align-items: center; gap: var(--space-3);
+  }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Card — the primary surface container. Header / body / footer are optional.
+ */
+function Card({
+  variant = 'default',
+  ruled = false,
+  interactive = false,
+  title = null,
+  actions = null,
+  footer = null,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const cls = ['pg-card', variant !== 'default' ? `pg-card--${variant}` : '', ruled ? 'pg-card--ruled' : '', interactive ? 'pg-card--interactive' : '', className].filter(Boolean).join(' ');
+  const hasHeader = title != null || actions != null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cls
+  }, rest), hasHeader ? /*#__PURE__*/React.createElement("div", {
+    className: "pg-card__header"
+  }, title ? /*#__PURE__*/React.createElement("h3", {
+    className: "pg-card__title"
+  }, title) : null, actions ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: 'auto',
+      display: 'flex',
+      gap: 'var(--space-2)'
+    }
+  }, actions) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pg-card__body"
+  }, children), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "pg-card__footer"
+  }, footer) : null);
+}
+Object.assign(__ds_scope, { Card });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Card.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/IconButton.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-iconbutton-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-iconbtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    box-sizing: border-box; padding: 0; cursor: pointer;
+    color: var(--ink-2); background: transparent;
+    border: var(--border-thin) solid transparent;
+    border-radius: var(--radius-sm);
+    transition: background var(--dur-fast) var(--ease-out),
+                color var(--dur-fast) var(--ease-out),
+                border-color var(--dur-fast) var(--ease-out),
+                transform var(--dur-fast) var(--ease-out);
+  }
+  .pg-iconbtn:hover { background: var(--paper-2); color: var(--ink-0); }
+  .pg-iconbtn:active { transform: translateY(1px); }
+  .pg-iconbtn:focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }
+  .pg-iconbtn[disabled] { cursor: not-allowed; opacity: 0.4; }
+  .pg-iconbtn--bordered { border-color: var(--border-default); background: var(--paper-0); }
+  .pg-iconbtn--bordered:hover { border-color: var(--ink-3); }
+  .pg-iconbtn--active { background: var(--paper-2); color: var(--red-deep); border-color: var(--border-default); }
+  .pg-iconbtn--sm { width: 28px; height: 28px; }
+  .pg-iconbtn--md { width: 36px; height: 36px; }
+  .pg-iconbtn--lg { width: 44px; height: 44px; }
+  .pg-iconbtn svg { width: 1.15em; height: 1.15em; display: block; }
+  .pg-iconbtn--sm svg { font-size: 15px; }
+  .pg-iconbtn--md svg { font-size: 18px; }
+  .pg-iconbtn--lg svg { font-size: 21px; }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * IconButton — a square, icon-only control for toolbars and dense UI.
+ */
+function IconButton({
+  size = 'md',
+  bordered = false,
+  active = false,
+  label,
+  disabled = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const cls = ['pg-iconbtn', `pg-iconbtn--${size}`, bordered ? 'pg-iconbtn--bordered' : '', active ? 'pg-iconbtn--active' : '', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cls,
+    "aria-label": label,
+    title: label,
+    disabled: disabled
+  }, rest), children);
+}
+Object.assign(__ds_scope, { IconButton });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/IconButton.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Tag.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-tag-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .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); }
+  .pg-tag--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
+  .pg-tag--interactive:hover { border-color: var(--ink-3); background: var(--paper-2); }
+  .pg-tag__remove {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 14px; height: 14px; margin-right: -2px; padding: 0;
+    border: 0; background: none; cursor: pointer; color: var(--ink-3);
+    font-family: var(--font-sans); font-size: 14px; line-height: 1; border-radius: var(--radius-pill);
+  }
+  .pg-tag__remove:hover { color: var(--red); }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Tag — a monospace chip for languages, keywords, and filters.
+ */
+function Tag({
+  dot = null,
+  onRemove = null,
+  interactive = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const cls = ['pg-tag', interactive || rest.onClick ? 'pg-tag--interactive' : '', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: cls
+  }, rest), dot ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-tag__dot",
+    style: {
+      background: dot === true ? undefined : dot
+    }
+  }) : null, children, onRemove ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "pg-tag__remove",
+    "aria-label": "Remove",
+    onClick: e => {
+      e.stopPropagation();
+      onRemove(e);
+    }
+  }, "\xD7") : null);
+}
+Object.assign(__ds_scope, { Tag });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tag.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Input.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-input-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-field { display: flex; flex-direction: column; gap: 6px; }
+  .pg-field__label {
+    font: var(--weight-semibold) var(--text-xs)/1 var(--font-display);
+    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2);
+  }
+  .pg-field__req { color: var(--red); margin-left: 3px; }
+  .pg-input-wrap { position: relative; display: flex; align-items: center; }
+  .pg-input-wrap__icon {
+    position: absolute; left: 11px; display: inline-flex; color: var(--ink-3); pointer-events: none;
+  }
+  .pg-input-wrap__icon svg { width: 16px; height: 16px; }
+  .pg-input {
+    width: 100%; box-sizing: border-box;
+    font: var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);
+    color: var(--ink-1); background: var(--paper-0);
+    border: var(--border-thin) solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: 9px 12px;
+    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
+  }
+  .pg-input--mono { font-family: var(--font-mono); }
+  .pg-input--has-icon { padding-left: 34px; }
+  .pg-input::placeholder { color: var(--text-placeholder); }
+  .pg-input:hover { border-color: var(--ink-4); }
+  .pg-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
+  .pg-input--invalid { border-color: var(--red); }
+  .pg-input--invalid:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
+  .pg-input:disabled { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; }
+  .pg-field__hint { font: var(--weight-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--ink-3); }
+  .pg-field__hint--error { color: var(--red-deep); }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Input — single-line text field with optional label, icon, and validation.
+ */
+function Input({
+  label = null,
+  hint = null,
+  error = null,
+  icon = null,
+  mono = false,
+  required = false,
+  id,
+  className = '',
+  ...rest
+}) {
+  ensureStyles();
+  const inputId = id || (label ? `pg-in-${Math.random().toString(36).slice(2, 8)}` : undefined);
+  const cls = ['pg-input', mono ? 'pg-input--mono' : '', icon ? 'pg-input--has-icon' : '', error ? 'pg-input--invalid' : '', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pg-field"
+  }, label ? /*#__PURE__*/React.createElement("label", {
+    className: "pg-field__label",
+    htmlFor: inputId
+  }, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-field__req"
+  }, "*") : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pg-input-wrap"
+  }, icon ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-input-wrap__icon"
+  }, icon) : null, /*#__PURE__*/React.createElement("input", _extends({
+    id: inputId,
+    className: cls,
+    "aria-invalid": !!error
+  }, rest))), error ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-field__hint pg-field__hint--error"
+  }, error) : hint ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-field__hint"
+  }, hint) : null);
+}
+Object.assign(__ds_scope, { Input });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Input.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Select.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-select-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-select-field { display: flex; flex-direction: column; gap: 6px; }
+  .pg-select-field__label {
+    font: var(--weight-semibold) var(--text-xs)/1 var(--font-display);
+    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2);
+  }
+  .pg-select-wrap { position: relative; display: flex; align-items: center; }
+  .pg-select {
+    width: 100%; box-sizing: border-box; appearance: none;
+    font: var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);
+    color: var(--ink-1); background: var(--paper-0);
+    border: var(--border-thin) solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: 9px 34px 9px 12px; cursor: pointer;
+    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
+  }
+  .pg-select:hover { border-color: var(--ink-4); }
+  .pg-select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
+  .pg-select:disabled { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; }
+  .pg-select-wrap__chevron {
+    position: absolute; right: 11px; pointer-events: none; color: var(--ink-3);
+    width: 16px; height: 16px;
+  }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Select — native dropdown styled to the system, with a custom chevron.
+ */
+function Select({
+  label = null,
+  options = [],
+  placeholder = null,
+  id,
+  className = '',
+  children,
+  ...rest
+}) {
+  ensureStyles();
+  const selId = id || (label ? `pg-sel-${Math.random().toString(36).slice(2, 8)}` : undefined);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pg-select-field"
+  }, label ? /*#__PURE__*/React.createElement("label", {
+    className: "pg-select-field__label",
+    htmlFor: selId
+  }, label) : null, /*#__PURE__*/React.createElement("div", {
+    className: "pg-select-wrap"
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    id: selId,
+    className: ['pg-select', className].filter(Boolean).join(' ')
+  }, rest), placeholder ? /*#__PURE__*/React.createElement("option", {
+    value: "",
+    disabled: true
+  }, placeholder) : null, children, options.map(o => {
+    const value = typeof o === 'string' ? o : o.value;
+    const optLabel = typeof o === 'string' ? o : o.label;
+    return /*#__PURE__*/React.createElement("option", {
+      key: value,
+      value: value
+    }, optLabel);
+  })), /*#__PURE__*/React.createElement("svg", {
+    className: "pg-select-wrap__chevron",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m6 9 6 6 6-6"
+  }))));
+}
+Object.assign(__ds_scope, { Select });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Select.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Switch.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-switch-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
+  .pg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+  .pg-switch__track {
+    position: relative; flex: none; width: 38px; height: 22px;
+    background: var(--paper-3); border: var(--border-thin) solid var(--border-default);
+    border-radius: var(--radius-pill);
+    transition: background var(--dur-base) var(--ease-slide), border-color var(--dur-base) var(--ease-slide);
+  }
+  .pg-switch__thumb {
+    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
+    background: var(--paper-0); border-radius: var(--radius-pill);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--dur-base) var(--ease-slide);
+  }
+  .pg-switch input:checked + .pg-switch__track { background: var(--green); border-color: var(--green-deep); }
+  .pg-switch input:checked + .pg-switch__track .pg-switch__thumb { transform: translateX(16px); }
+  .pg-switch input:focus-visible + .pg-switch__track { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }
+  .pg-switch input:disabled + .pg-switch__track { opacity: 0.45; cursor: not-allowed; }
+  .pg-switch__label { font: var(--weight-regular) var(--text-sm)/1.3 var(--font-sans); color: var(--ink-1); }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Switch — a toggle. The "on" state slides to instrument green.
+ */
+function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled = false,
+  label = null,
+  id,
+  className = '',
+  ...rest
+}) {
+  ensureStyles();
+  const swId = id || `pg-sw-${Math.random().toString(36).slice(2, 8)}`;
+  return /*#__PURE__*/React.createElement("label", {
+    className: ['pg-switch', className].filter(Boolean).join(' '),
+    htmlFor: swId
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: swId,
+    type: "checkbox",
+    checked: checked,
+    defaultChecked: defaultChecked,
+    onChange: onChange,
+    disabled: disabled
+  }, rest)), /*#__PURE__*/React.createElement("span", {
+    className: "pg-switch__track"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pg-switch__thumb"
+  })), label ? /*#__PURE__*/React.createElement("span", {
+    className: "pg-switch__label"
+  }, label) : null);
+}
+Object.assign(__ds_scope, { Switch });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Switch.jsx", error: String((e && e.message) || e) }); }
+
+// components/navigation/Tabs.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const STYLE_ID = 'pg-tabs-css';
+function ensureStyles() {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return;
+  const el = document.createElement('style');
+  el.id = STYLE_ID;
+  el.textContent = `
+  .pg-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: var(--border-thin) solid var(--border-hairline); }
+  .pg-tabs--pill { border-bottom: 0; gap: 4px; background: var(--paper-2); padding: 3px; border-radius: var(--radius-sm); width: max-content; }
+  .pg-tab {
+    display: inline-flex; align-items: center; gap: 7px;
+    font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
+    color: var(--ink-3); background: none; border: 0; cursor: pointer;
+    padding: 10px 14px; position: relative; white-space: nowrap;
+    transition: color var(--dur-fast) var(--ease-out);
+  }
+  .pg-tab:hover { color: var(--ink-1); }
+  .pg-tab__icon { display: inline-flex; width: 15px; height: 15px; }
+  .pg-tab__icon svg { width: 100%; height: 100%; }
+  /* underline indicator — the engraved cursor line */
+  .pg-tabs:not(.pg-tabs--pill) .pg-tab::after {
+    content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
+    background: var(--red); transform: scaleX(0); transform-origin: center;
+    transition: transform var(--dur-base) var(--ease-slide);
+  }
+  .pg-tabs:not(.pg-tabs--pill) .pg-tab[aria-selected="true"] { color: var(--ink-0); font-weight: var(--weight-semibold); }
+  .pg-tabs:not(.pg-tabs--pill) .pg-tab[aria-selected="true"]::after { transform: scaleX(1); }
+  .pg-tab:focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-xs); }
+  /* pill variant */
+  .pg-tabs--pill .pg-tab { border-radius: var(--radius-xs); padding: 7px 13px; font-family: var(--font-mono); font-size: var(--text-xs); }
+  .pg-tabs--pill .pg-tab[aria-selected="true"] { background: var(--paper-0); color: var(--ink-0); box-shadow: var(--shadow-xs); }
+  `;
+  document.head.appendChild(el);
+}
+
+/**
+ * Tabs — segmented navigation. Default variant draws the engraved red cursor
+ * underline; `pill` variant is a compact monospace switch (e.g. language picker).
+ */
+function Tabs({
+  tabs = [],
+  value,
+  onChange,
+  variant = 'underline',
+  className = '',
+  ...rest
+}) {
+  ensureStyles();
+  const cls = ['pg-tabs', variant === 'pill' ? 'pg-tabs--pill' : '', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cls,
+    role: "tablist"
+  }, rest), tabs.map(t => {
+    const id = typeof t === 'string' ? t : t.id;
+    const label = typeof t === 'string' ? t : t.label;
+    const icon = typeof t === 'string' ? null : t.icon;
+    const selected = id === value;
+    return /*#__PURE__*/React.createElement("button", {
+      key: id,
+      role: "tab",
+      "aria-selected": selected,
+      className: "pg-tab",
+      onClick: () => onChange && onChange(id)
+    }, icon ? /*#__PURE__*/React.createElement("span", {
+      className: "pg-tab__icon"
+    }, icon) : null, label);
+  }));
+}
+Object.assign(__ds_scope, { Tabs });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/Tabs.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/docs/App.jsx
+try { (() => {
+// App — composes the docs shell: header, sidebar, content, on-this-page TOC.
+(function () {
+  const React = window.React;
+  const TOC = [{
+    id: 'example',
+    label: 'Example'
+  }, {
+    id: 'parameters',
+    label: 'Parameters'
+  }, {
+    id: 'returns',
+    label: 'Returns'
+  }];
+  function App() {
+    const [active, setActive] = React.useState('complete()');
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dk-app"
+    }, /*#__PURE__*/React.createElement(window.DocsHeader, {
+      onMenu: () => setMenuOpen(v => !v)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "dk-shell"
+    }, /*#__PURE__*/React.createElement(window.DocsSidebar, {
+      active: active,
+      onSelect: it => {
+        setActive(it);
+        setMenuOpen(false);
+      },
+      open: menuOpen
+    }), menuOpen ? /*#__PURE__*/React.createElement("div", {
+      className: "dk-scrim",
+      onClick: () => setMenuOpen(false)
+    }) : null, /*#__PURE__*/React.createElement("main", {
+      className: "dk-main"
+    }, /*#__PURE__*/React.createElement(window.ReferencePage, null)), /*#__PURE__*/React.createElement("aside", {
+      className: "dk-toc"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "dk-toc__title"
+    }, "On this page"), /*#__PURE__*/React.createElement("ul", {
+      className: "dk-toc__list"
+    }, TOC.map(t => /*#__PURE__*/React.createElement("li", {
+      key: t.id
+    }, /*#__PURE__*/React.createElement("a", {
+      href: '#' + t.id,
+      className: "dk-toc__link"
+    }, t.label)))), /*#__PURE__*/React.createElement("div", {
+      className: "panto-tick-rule",
+      style: {
+        margin: 'var(--space-5) 0 var(--space-4)'
+      }
+    }), /*#__PURE__*/React.createElement("a", {
+      className: "dk-edit",
+      href: "#"
+    }, "Edit this page \u2192"))));
+  }
+  window.DocsApp = App;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/docs/App.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/docs/DocsHeader.jsx
+try { (() => {
+// Lucide-derived inline icons (ISC) + DocsHeader. Icons live here (a JSX file)
+// so the design-system compiler treats them as kit-local, not a bundle module.
+(function () {
+  const React = window.React;
+  const S = (paths, extra = {}) => props => React.createElement('svg', Object.assign({
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    width: '1em',
+    height: '1em'
+  }, extra, props), paths.map((d, i) => React.createElement('path', {
+    key: i,
+    d
+  })));
+  const M = (children, extra = {}) => props => React.createElement('svg', Object.assign({
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    width: '1em',
+    height: '1em'
+  }, extra, props), children(React));
+  window.Icons = {
+    Search: M(R => [R.createElement('circle', {
+      key: 0,
+      cx: 11,
+      cy: 11,
+      r: 8
+    }), R.createElement('path', {
+      key: 1,
+      d: 'm21 21-4.3-4.3'
+    })]),
+    ChevronRight: S(['m9 18 6-6-6-6']),
+    Hash: S(['M4 9h16', 'M4 15h16', 'M10 3 8 21', 'M16 3l-2 18']),
+    Book: S(['M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20']),
+    Terminal: S(['m4 17 6-6-6-6', 'M12 19h8']),
+    Github: M(R => [R.createElement('path', {
+      key: 0,
+      d: 'M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 .5 5 .5 5 .5c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 7.5c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'
+    }), R.createElement('path', {
+      key: 1,
+      d: 'M9 18c-4.51 2-5-2-7-2'
+    })]),
+    Zap: S(['M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z']),
+    Boxes: S(['M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z', 'm7 16.5-4.74-2.85', 'm7 16.5 5-3', 'M7 16.5v5.17', 'M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z', 'm17 16.5-5-3', 'm17 16.5 4.74-2.85', 'M17 16.5v5.17', 'M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z', 'M12 8 7.26 5.15', 'm12 8 4.74-2.85', 'M12 13.5V8']),
+    Layers: S(['m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z', 'M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12', 'M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17']),
+    Menu: S(['M4 12h16', 'M4 6h16', 'M4 18h16']),
+    Check: S(['M20 6 9 17l-5-5']),
+    Compass: M(R => [R.createElement('path', {
+      key: 0,
+      d: 'm16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'
+    }), R.createElement('circle', {
+      key: 1,
+      cx: 12,
+      cy: 12,
+      r: 10
+    })])
+  };
+})();
+
+// DocsHeader — top bar: logo lockup, primary nav, search, github.
+(function () {
+  const React = window.React;
+  const {
+    Badge,
+    IconButton
+  } = window.PantographDesignSystem_56a1c7;
+  const I = window.Icons;
+  function DocsHeader({
+    onMenu
+  }) {
+    return /*#__PURE__*/React.createElement("header", {
+      className: "dk-header"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "dk-header__left"
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "dk-menu",
+      "aria-label": "Menu",
+      onClick: onMenu
+    }, /*#__PURE__*/React.createElement(I.Menu, null)), /*#__PURE__*/React.createElement("a", {
+      className: "dk-brand",
+      href: "#"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "../../assets/logo-mark.svg",
+      width: "28",
+      height: "28",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "dk-brand__word"
+    }, "pantograph"), /*#__PURE__*/React.createElement("span", {
+      className: "dk-brand__div"
+    }, "/"), /*#__PURE__*/React.createElement("span", {
+      className: "dk-brand__sub"
+    }, "libpanto")), /*#__PURE__*/React.createElement(Badge, {
+      variant: "outline"
+    }, "v2.4")), /*#__PURE__*/React.createElement("nav", {
+      className: "dk-nav"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "dk-nav__link"
+    }, "Guides"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "dk-nav__link dk-nav__link--active"
+    }, "Reference"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "dk-nav__link"
+    }, "CLI"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "dk-nav__link"
+    }, "Changelog")), /*#__PURE__*/React.createElement("div", {
+      className: "dk-header__right"
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "dk-search"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "dk-search__icon"
+    }, /*#__PURE__*/React.createElement(I.Search, null)), /*#__PURE__*/React.createElement("input", {
+      className: "dk-search__input",
+      placeholder: "Search the docs"
+    }), /*#__PURE__*/React.createElement("kbd", {
+      className: "dk-search__kbd"
+    }, "/")), /*#__PURE__*/React.createElement(IconButton, {
+      label: "GitHub",
+      bordered: true
+    }, /*#__PURE__*/React.createElement(I.Github, null))));
+  }
+  window.DocsHeader = DocsHeader;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/docs/DocsHeader.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/docs/DocsSidebar.jsx
+try { (() => {
+// DocsSidebar — grouped navigation tree.
+(function () {
+  const React = window.React;
+  const I = window.Icons;
+  const NAV = [{
+    group: 'Getting Started',
+    items: ['Installation', 'Quickstart', 'Authentication']
+  }, {
+    group: 'Guides',
+    items: ['Streaming', 'Tool use', 'Structured output', 'Retries & timeouts']
+  }, {
+    group: 'Reference',
+    items: ['Client', 'complete()', 'respond()', 'Response', 'Errors']
+  }, {
+    group: 'CLI · panto',
+    items: ['panto run', 'panto chat', 'Configuration']
+  }];
+  function DocsSidebar({
+    active,
+    onSelect,
+    open
+  }) {
+    return /*#__PURE__*/React.createElement("aside", {
+      className: 'dk-sidebar' + (open ? ' dk-sidebar--open' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "dk-sidebar__scroll"
+    }, NAV.map(sec => /*#__PURE__*/React.createElement("div", {
+      className: "dk-navsec",
+      key: sec.group
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "dk-navsec__title"
+    }, sec.group), /*#__PURE__*/React.createElement("ul", {
+      className: "dk-navsec__list"
+    }, sec.items.map(it => /*#__PURE__*/React.createElement("li", {
+      key: it
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: 'dk-navsec__link' + (it === active ? ' dk-navsec__link--active' : ''),
+      onClick: e => {
+        e.preventDefault();
+        onSelect(it);
+      }
+    }, it))))))));
+  }
+  window.DocsSidebar = DocsSidebar;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/docs/DocsSidebar.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/docs/ReferencePage.jsx
+try { (() => {
+// ReferencePage — the main documentation view for client.complete().
+(function () {
+  const React = window.React;
+  const {
+    Badge,
+    Tag,
+    Tabs,
+    CodeBlock,
+    Callout,
+    Card
+  } = window.PantographDesignSystem_56a1c7;
+  const I = window.Icons;
+  const SAMPLES = {
+    python: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "import"), " panto", "\n\n", "client = panto.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "Client"), "()", "\n", "resp = client.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", "\n", "    ", "prompt=", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"explain this stack trace\""), ",", "\n", "    ", "model=", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"claude-sonnet\""), ",", "\n", "    ", "max_tokens=", /*#__PURE__*/React.createElement("span", {
+      className: "tok-num"
+    }, "1024"), ",", "\n", ")", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "print"), "(resp.text)"),
+    rust: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "use"), " panto::Client;", "\n\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "let"), " client = Client::", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "new"), "()?;", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "let"), " resp = client", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"explain this stack trace\""), ")", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "model"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"claude-sonnet\""), ")", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "max_tokens"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-num"
+    }, "1024"), ")", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "send"), "().", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "await"), "?;", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "println!"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"", `{}`, "\""), ", resp.text);"),
+    typescript: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "import"), " ", "{ Client }", " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "from"), " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"panto\""), ";", "\n\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "const"), " client = ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "new"), " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "Client"), "();", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "const"), " resp = ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "await"), " client.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", "{", "\n", "  ", "prompt: ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"explain this stack trace\""), ",", "\n", "  ", "model: ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"claude-sonnet\""), ",", "\n", "  ", "maxTokens: ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-num"
+    }, "1024"), ",", "\n", "});", "\n", "console.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "log"), "(resp.text);")
+  };
+  const FILE = {
+    python: 'main.py',
+    rust: 'src/main.rs',
+    typescript: 'index.ts'
+  };
+  const PARAMS = [['prompt', 'string', 'required', 'The input message sent to the model.'], ['model', 'string', '"claude-sonnet"', 'Provider-agnostic model alias. Resolved per provider.'], ['max_tokens', 'int', '1024', 'Upper bound on generated tokens.'], ['stream', 'bool', 'false', 'Return an async iterator of deltas instead of a full Response.'], ['tools', 'Tool[]', '[]', 'Tool definitions the model may call.']];
+  function ReferencePage() {
+    const [lang, setLang] = React.useState('python');
+    return /*#__PURE__*/React.createElement("article", {
+      className: "dk-doc"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "dk-crumbs"
+    }, /*#__PURE__*/React.createElement("span", null, "Reference"), /*#__PURE__*/React.createElement(I.ChevronRight, null), /*#__PURE__*/React.createElement("span", {
+      className: "dk-crumbs__here"
+    }, "complete()")), /*#__PURE__*/React.createElement("p", {
+      className: "panto-eyebrow"
+    }, "SDK Reference"), /*#__PURE__*/React.createElement("h1", {
+      className: "dk-doc__h1"
+    }, "client.complete()"), /*#__PURE__*/React.createElement("div", {
+      className: "dk-doc__meta"
+    }, /*#__PURE__*/React.createElement(Badge, {
+      variant: "success",
+      dot: true
+    }, "Stable"), /*#__PURE__*/React.createElement(Badge, {
+      variant: "neutral"
+    }, "since v2.0"), /*#__PURE__*/React.createElement(Tag, {
+      dot: "#3572A5"
+    }, "python"), /*#__PURE__*/React.createElement(Tag, {
+      dot: "#DEA584"
+    }, "rust"), /*#__PURE__*/React.createElement(Tag, {
+      dot: "#3178C6"
+    }, "typescript")), /*#__PURE__*/React.createElement("p", {
+      className: "dk-lead"
+    }, "Send a single prompt and receive one complete response. The same call signature is reproduced across every binding \u2014 write it once, scale it to any language."), /*#__PURE__*/React.createElement("h2", {
+      className: "dk-h2",
+      id: "example"
+    }, "Example"), /*#__PURE__*/React.createElement("div", {
+      className: "dk-langbar"
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      variant: "pill",
+      value: lang,
+      onChange: setLang,
+      tabs: ['python', 'rust', 'typescript']
+    })), /*#__PURE__*/React.createElement(CodeBlock, {
+      filename: FILE[lang],
+      language: lang
+    }, SAMPLES[lang]), /*#__PURE__*/React.createElement(Callout, {
+      variant: "tip"
+    }, "Set ", /*#__PURE__*/React.createElement("code", null, "PANTO_KEY"), " in your environment once. Every binding \u2014 and the ", /*#__PURE__*/React.createElement("code", null, "panto"), " CLI \u2014 reads it automatically."), /*#__PURE__*/React.createElement("h2", {
+      className: "dk-h2",
+      id: "parameters"
+    }, "Parameters"), /*#__PURE__*/React.createElement("div", {
+      className: "dk-table-wrap"
+    }, /*#__PURE__*/React.createElement("table", {
+      className: "dk-table"
+    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Type"), /*#__PURE__*/React.createElement("th", null, "Default"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, PARAMS.map(p => /*#__PURE__*/React.createElement("tr", {
+      key: p[0]
+    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, p[0])), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
+      className: "dk-type"
+    }, p[1])), /*#__PURE__*/React.createElement("td", null, p[2] === 'required' ? /*#__PURE__*/React.createElement(Badge, {
+      variant: "danger"
+    }, "required") : /*#__PURE__*/React.createElement("code", {
+      className: "dk-default"
+    }, p[2])), /*#__PURE__*/React.createElement("td", null, p[3])))))), /*#__PURE__*/React.createElement("h2", {
+      className: "dk-h2",
+      id: "returns"
+    }, "Returns"), /*#__PURE__*/React.createElement("p", {
+      className: "dk-body"
+    }, "A ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "Response"), " object with ", /*#__PURE__*/React.createElement("code", null, ".text"), ", ", /*#__PURE__*/React.createElement("code", null, ".usage"), ", and ", /*#__PURE__*/React.createElement("code", null, ".stop_reason"), ". When ", /*#__PURE__*/React.createElement("code", null, "stream=true"), ", returns an async iterator yielding ", /*#__PURE__*/React.createElement("code", null, "Delta"), " objects instead."), /*#__PURE__*/React.createElement(Callout, {
+      variant: "danger",
+      title: "Deprecated argument"
+    }, "The ", /*#__PURE__*/React.createElement("code", null, "temperature"), " float is removed in v3 \u2014 pass a", /*#__PURE__*/React.createElement("code", null, "Sampling"), " config instead. See the migration guide."));
+  }
+  window.ReferencePage = ReferencePage;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/docs/ReferencePage.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/home/Features.jsx
+try { (() => {
+// Features — a grid of capability cards.
+(function () {
+  const React = window.React;
+  const {
+    Card,
+    Badge
+  } = window.PantographDesignSystem_56a1c7;
+  const I = window.Icons;
+  const FEATURES = [{
+    icon: /*#__PURE__*/React.createElement(I.Boxes, null),
+    title: 'Provider-agnostic',
+    body: 'One client targets OpenAI, Anthropic, or a local model. Swap providers with a string — no rewrites.'
+  }, {
+    icon: /*#__PURE__*/React.createElement(I.Zap, null),
+    title: 'Streaming & tools',
+    body: 'First-class async iterators for token streams and a typed tool-use loop across every binding.'
+  }, {
+    icon: /*#__PURE__*/React.createElement(I.Layers, null),
+    title: 'Typed responses',
+    body: 'complete() returns a structured Response — text, usage, stop reason — not a raw string.'
+  }, {
+    icon: /*#__PURE__*/React.createElement(I.Terminal, null),
+    title: 'The panto agent',
+    body: 'A terminal coding agent built on libpanto — a minimal system prompt and tool set you can swap out entirely. Written in Zig, extended in Lua.'
+  }];
+  function Features() {
+    return /*#__PURE__*/React.createElement("section", {
+      className: "hm-features"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-section-head"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "panto-eyebrow"
+    }, "Why pantograph"), /*#__PURE__*/React.createElement("h2", {
+      className: "hm-h2"
+    }, "A small instrument, precisely built.")), /*#__PURE__*/React.createElement("div", {
+      className: "hm-feature-grid"
+    }, FEATURES.map(f => /*#__PURE__*/React.createElement(Card, {
+      key: f.title,
+      className: "hm-feature"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "hm-feature__icon"
+    }, f.icon), /*#__PURE__*/React.createElement("h3", {
+      className: "hm-feature__title"
+    }, f.title), /*#__PURE__*/React.createElement("p", {
+      className: "hm-feature__body"
+    }, f.body)))));
+  }
+  window.Features = Features;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/home/Features.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/home/Hero.jsx
+try { (() => {
+// Hero — headline, install command, CTAs, and a live-looking terminal.
+(function () {
+  const React = window.React;
+  const {
+    Button,
+    Badge,
+    Terminal
+  } = window.PantographDesignSystem_56a1c7;
+  const I = window.Icons;
+  function CopyCommand({
+    text
+  }) {
+    const [done, setDone] = React.useState(false);
+    return /*#__PURE__*/React.createElement("button", {
+      className: "hm-cmd",
+      onClick: () => {
+        if (navigator.clipboard) navigator.clipboard.writeText(text);
+        setDone(true);
+        setTimeout(() => setDone(false), 1400);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "hm-cmd__prompt"
+    }, "$"), /*#__PURE__*/React.createElement("span", {
+      className: "hm-cmd__text"
+    }, text), /*#__PURE__*/React.createElement("span", {
+      className: 'hm-cmd__copy' + (done ? ' hm-cmd__copy--done' : '')
+    }, done ? /*#__PURE__*/React.createElement(I.Check, null) : /*#__PURE__*/React.createElement(I.Compass, null)));
+  }
+  function Hero() {
+    return /*#__PURE__*/React.createElement("section", {
+      className: "hm-hero"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-hero__copy"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "panto-eyebrow"
+    }, "Open source \xB7 MIT \xB7 v2.4"), /*#__PURE__*/React.createElement("h1", {
+      className: "hm-hero__h1"
+    }, "Scale one prompt", /*#__PURE__*/React.createElement("br", null), "to every provider."), /*#__PURE__*/React.createElement("p", {
+      className: "hm-hero__lead"
+    }, /*#__PURE__*/React.createElement("strong", null, "libpanto"), " is a single, small set of motions \u2014 faithfully reproduced across OpenAI, Anthropic, and your local models. ", /*#__PURE__*/React.createElement("strong", null, "panto"), " ", "is the terminal coding agent built on top."), /*#__PURE__*/React.createElement(CopyCommand, {
+      text: "pip install panto"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "hm-hero__cta"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "accent",
+      size: "lg",
+      icon: /*#__PURE__*/React.createElement(I.Terminal, null)
+    }, "Get started"), /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      size: "lg",
+      icon: /*#__PURE__*/React.createElement(I.Github, null)
+    }, "Star on GitHub")), /*#__PURE__*/React.createElement("div", {
+      className: "hm-hero__langs"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "hm-hero__langlabel"
+    }, "Bindings"), /*#__PURE__*/React.createElement("span", {
+      className: "hm-langdot",
+      style: {
+        background: '#3572A5'
+      }
+    }), "python", /*#__PURE__*/React.createElement("span", {
+      className: "hm-langdot",
+      style: {
+        background: '#DEA584'
+      }
+    }), "rust", /*#__PURE__*/React.createElement("span", {
+      className: "hm-langdot",
+      style: {
+        background: '#3178C6'
+      }
+    }), "typescript", /*#__PURE__*/React.createElement("span", {
+      className: "hm-hero__more"
+    }, "+ 1 in beta"))), /*#__PURE__*/React.createElement("div", {
+      className: "hm-hero__demo"
+    }, /*#__PURE__*/React.createElement(Terminal, {
+      title: "panto \xB7 run",
+      cursor: true,
+      lines: [{
+        type: 'cmd',
+        shell: 'shell',
+        text: 'panto run "add a --json flag to the export command"'
+      }, {
+        type: 'com',
+        text: '• indexed 41 files · 3 relevant'
+      }, {
+        type: 'cmd',
+        shell: 'panto',
+        text: "I'll add a --json flag and route output through the serializer."
+      }, {
+        type: 'out',
+        text: '  cli/export.py   +18 −2'
+      }, {
+        type: 'out',
+        text: '  cli/__init__.py  +3'
+      }, {
+        type: 'ok',
+        text: '✓ applied · 2 files changed in 0.3s'
+      }]
+    })));
+  }
+  window.Hero = Hero;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/home/Hero.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/home/HomeApp.jsx
+try { (() => {
+// HomeApp — composes the marketing page + footer.
+(function () {
+  const React = window.React;
+  function Footer() {
+    const COLS = [{
+      h: 'SDK',
+      items: ['Installation', 'Reference', 'Streaming', 'Tool use']
+    }, {
+      h: 'panto CLI',
+      items: ['Quickstart', 'Commands', 'Configuration']
+    }, {
+      h: 'Project',
+      items: ['GitHub', 'Changelog', 'Roadmap', 'License (MIT)']
+    }];
+    return /*#__PURE__*/React.createElement("footer", {
+      className: "hm-footer"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-footer__inner"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-footer__brand"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-brand"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "../../assets/logo-mark.svg",
+      width: "28",
+      height: "28",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "hm-brand__word"
+    }, "pantograph")), /*#__PURE__*/React.createElement("p", {
+      className: "hm-footer__tag"
+    }, "Scale one prompt to every provider.")), COLS.map(c => /*#__PURE__*/React.createElement("div", {
+      className: "hm-footer__col",
+      key: c.h
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "hm-footer__h"
+    }, c.h), c.items.map(it => /*#__PURE__*/React.createElement("a", {
+      key: it,
+      href: "#",
+      className: "hm-footer__link"
+    }, it))))), /*#__PURE__*/React.createElement("div", {
+      className: "hm-footer__bar"
+    }, /*#__PURE__*/React.createElement("span", null, "\xA9 2026 the pantograph authors"), /*#__PURE__*/React.createElement("span", {
+      className: "hm-footer__mono"
+    }, "built with libpanto")));
+  }
+  function HomeApp() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "hm-app"
+    }, /*#__PURE__*/React.createElement(window.HomeHeader, null), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(window.Hero, null), /*#__PURE__*/React.createElement("div", {
+      className: "hm-ruler",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React.createElement(window.InstallSection, null), /*#__PURE__*/React.createElement(window.Features, null)), /*#__PURE__*/React.createElement(Footer, null));
+  }
+  window.HomeApp = HomeApp;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/home/HomeApp.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/home/HomeHeader.jsx
+try { (() => {
+// Lucide-derived inline icons (ISC) + HomeHeader. Icons live here (a JSX file)
+// so the design-system compiler treats them as kit-local, not a bundle module.
+(function () {
+  const React = window.React;
+  const S = (paths, extra = {}) => props => React.createElement('svg', Object.assign({
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    width: '1em',
+    height: '1em'
+  }, extra, props), paths.map((d, i) => React.createElement('path', {
+    key: i,
+    d
+  })));
+  const M = (children, extra = {}) => props => React.createElement('svg', Object.assign({
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    width: '1em',
+    height: '1em'
+  }, extra, props), children(React));
+  window.Icons = {
+    ChevronRight: S(['m9 18 6-6-6-6']),
+    Book: S(['M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20']),
+    Terminal: S(['m4 17 6-6-6-6', 'M12 19h8']),
+    Github: M(R => [R.createElement('path', {
+      key: 0,
+      d: 'M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 .5 5 .5 5 .5c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 7.5c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'
+    }), R.createElement('path', {
+      key: 1,
+      d: 'M9 18c-4.51 2-5-2-7-2'
+    })]),
+    Zap: S(['M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z']),
+    Boxes: S(['M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z', 'm7 16.5-4.74-2.85', 'm7 16.5 5-3', 'M7 16.5v5.17', 'M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z', 'm17 16.5-5-3', 'm17 16.5 4.74-2.85', 'M17 16.5v5.17', 'M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z', 'M12 8 7.26 5.15', 'm12 8 4.74-2.85', 'M12 13.5V8']),
+    Layers: S(['m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z', 'M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12', 'M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17']),
+    Check: S(['M20 6 9 17l-5-5']),
+    Compass: M(R => [R.createElement('path', {
+      key: 0,
+      d: 'm16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'
+    }), R.createElement('circle', {
+      key: 1,
+      cx: 12,
+      cy: 12,
+      r: 10
+    })])
+  };
+})();
+
+// HomeHeader — marketing top bar.
+(function () {
+  const React = window.React;
+  const {
+    Button
+  } = window.PantographDesignSystem_56a1c7;
+  const I = window.Icons;
+  function HomeHeader() {
+    return /*#__PURE__*/React.createElement("header", {
+      className: "hm-header"
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "hm-brand",
+      href: "#"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "../../assets/logo-mark.svg",
+      width: "30",
+      height: "30",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "hm-brand__word"
+    }, "pantograph")), /*#__PURE__*/React.createElement("nav", {
+      className: "hm-nav"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "hm-nav__link"
+    }, "Docs"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "hm-nav__link"
+    }, "SDK"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "hm-nav__link"
+    }, "CLI"), /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "hm-nav__link"
+    }, "Blog")), /*#__PURE__*/React.createElement("div", {
+      className: "hm-header__right"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "hm-stars"
+    }, /*#__PURE__*/React.createElement(I.Github, null), " 14.2k"), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      size: "sm",
+      icon: /*#__PURE__*/React.createElement(I.Book, null)
+    }, "Read the docs")));
+  }
+  window.HomeHeader = HomeHeader;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/home/HomeHeader.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/home/InstallSection.jsx
+try { (() => {
+// InstallSection — "same call, every language" with a language switcher.
+(function () {
+  const React = window.React;
+  const {
+    Tabs,
+    CodeBlock
+  } = window.PantographDesignSystem_56a1c7;
+  const INSTALL = {
+    python: 'pip install panto',
+    rust: 'cargo add panto',
+    typescript: 'npm install panto'
+  };
+  const FILE = {
+    python: 'main.py',
+    rust: 'src/main.rs',
+    typescript: 'index.ts'
+  };
+  const CODE = {
+    python: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "import"), " panto", "\n\n", "resp = panto.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "Client"), "().", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"name three uses for a pantograph\""), ")", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "print"), "(resp.text)"),
+    rust: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "use"), " panto::Client;", "\n\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "let"), " resp = Client::", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "new"), "()?", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"name three uses for a pantograph\""), ")", "\n", "    ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "send"), "().", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "await"), "?;", "\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "println!"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"", `{}`, "\""), ", resp.text);"),
+    typescript: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "import"), " ", "{ Client }", " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "from"), " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"panto\""), ";", "\n\n", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "const"), " resp = ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "await"), " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-kw"
+    }, "new"), " ", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "Client"), "()", "\n", "  ", ".", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "complete"), "(", /*#__PURE__*/React.createElement("span", {
+      className: "tok-str"
+    }, "\"name three uses for a pantograph\""), ");", "\n", "console.", /*#__PURE__*/React.createElement("span", {
+      className: "tok-fn"
+    }, "log"), "(resp.text);")
+  };
+  function InstallSection() {
+    const [lang, setLang] = React.useState('python');
+    return /*#__PURE__*/React.createElement("section", {
+      className: "hm-install"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-section-head"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "panto-eyebrow"
+    }, "The SDK"), /*#__PURE__*/React.createElement("h2", {
+      className: "hm-h2"
+    }, "Same call, every language."), /*#__PURE__*/React.createElement("p", {
+      className: "hm-section-sub"
+    }, "The signature doesn't change when the language does. Learn it once.")), /*#__PURE__*/React.createElement("div", {
+      className: "hm-install__panel"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hm-install__tabs"
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      variant: "pill",
+      value: lang,
+      onChange: setLang,
+      tabs: ['python', 'rust', 'typescript']
+    })), /*#__PURE__*/React.createElement(CodeBlock, {
+      filename: "install",
+      language: "shell",
+      showBar: true,
+      code: INSTALL[lang]
+    }), /*#__PURE__*/React.createElement(CodeBlock, {
+      filename: FILE[lang],
+      language: lang
+    }, CODE[lang])));
+  }
+  window.InstallSection = InstallSection;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/home/InstallSection.jsx", error: String((e && e.message) || e) }); }
+
+__ds_ns.Callout = __ds_scope.Callout;
+
+__ds_ns.CodeBlock = __ds_scope.CodeBlock;
+
+__ds_ns.Terminal = __ds_scope.Terminal;
+
+__ds_ns.Badge = __ds_scope.Badge;
+
+__ds_ns.Button = __ds_scope.Button;
+
+__ds_ns.Card = __ds_scope.Card;
+
+__ds_ns.IconButton = __ds_scope.IconButton;
+
+__ds_ns.Tag = __ds_scope.Tag;
+
+__ds_ns.Input = __ds_scope.Input;
+
+__ds_ns.Select = __ds_scope.Select;
+
+__ds_ns.Switch = __ds_scope.Switch;
+
+__ds_ns.Tabs = __ds_scope.Tabs;
+
+})();