// polaris.jsx — Polaris design tokens + primitives.
// Mirrors Shopify Polaris v12+ tokens and component APIs so this prototype
// reads as authentic Polaris to designers.

(function injectPolarisTokens() {
  if (typeof document === 'undefined' || document.getElementById('polaris-tokens')) return;
  const s = document.createElement('style');
  s.id = 'polaris-tokens';
  s.textContent = `
    :root {
      /* Color · Surface */
      --p-color-bg: #f1f1f1;
      --p-color-bg-surface: #ffffff;
      --p-color-bg-surface-secondary: #f7f7f7;
      --p-color-bg-surface-tertiary: #f3f3f3;
      --p-color-bg-surface-hover: #f7f7f7;
      --p-color-bg-surface-active: #f1f1f1;
      --p-color-bg-surface-selected: #f1f1f1;
      --p-color-bg-surface-secondary-hover: #f1f1f1;
      --p-color-bg-surface-brand: #ffffff;
      --p-color-bg-inverse: #303030;
      --p-color-bg-fill: #ffffff;
      --p-color-bg-fill-secondary: #f7f7f7;
      --p-color-bg-fill-tertiary: #ebebeb;
      --p-color-bg-fill-brand: #303030;
      --p-color-bg-fill-brand-hover: #1a1a1a;
      --p-color-bg-fill-brand-active: #000000;
      --p-color-bg-fill-success: #cdfee1;
      --p-color-bg-fill-success-secondary: #9be7be;
      --p-color-bg-fill-success-active: #29845a;
      --p-color-bg-fill-warning: #ffd79d;
      --p-color-bg-fill-warning-secondary: #ffc453;
      --p-color-bg-fill-critical: #fdd9d4;
      --p-color-bg-fill-critical-secondary: #e51c00;
      --p-color-bg-fill-info: #ebe4fd;
      --p-color-bg-fill-info-secondary: #c4b8f7;
      --p-color-bg-fill-magic: #f1edff;
      --p-color-bg-fill-magic-secondary: #d9c8ff;
      --p-color-bg-fill-magic-active: #6b46c1;
      --p-color-bg-fill-magic-hover: #7c3aed;
      --p-color-bg-fill-info-active: #6b3fa0;
      --p-color-bg-fill-warning-active: #b45309;
      --p-color-bg-fill-critical-active: #b32200;

      /* Text */
      --p-color-text: #303030;
      --p-color-text-secondary: #616161;
      --p-color-text-disabled: #b5b5b5;
      --p-color-text-brand-on-bg-fill: #ffffff;
      --p-color-text-success: #19542e;
      --p-color-text-warning: #5a3d00;
      --p-color-text-critical: #8b1500;
      --p-color-text-info: #2a1a5e;
      --p-color-text-magic: #3a1d8a;
      --p-color-text-link: #005bd3;
      --p-color-text-link-hover: #004fb6;
      --p-color-text-inverse: #ffffff;
      --p-color-text-inverse-secondary: #b5b5b5;
      --p-color-text-emphasis: #005bd3;

      /* Border */
      --p-color-border: #e3e3e3;
      --p-color-border-secondary: #ebebeb;
      --p-color-border-tertiary: #f1f1f1;
      --p-color-border-hover: #b5b5b5;
      --p-color-border-focus: #005bd3;
      --p-color-border-brand: #303030;
      --p-color-border-success: #29845a;
      --p-color-border-warning: #b45309;
      --p-color-border-critical: #e51c00;
      --p-color-border-magic: #6b46c1;

      /* Icon */
      --p-color-icon: #303030;
      --p-color-icon-secondary: #616161;
      --p-color-icon-brand: #303030;

      /* Spacing */
      --p-space-050: 2px;
      --p-space-100: 4px;
      --p-space-150: 6px;
      --p-space-200: 8px;
      --p-space-300: 12px;
      --p-space-400: 16px;
      --p-space-500: 20px;
      --p-space-600: 24px;
      --p-space-700: 28px;
      --p-space-800: 32px;
      --p-space-1000: 40px;
      --p-space-1200: 48px;
      --p-space-1600: 64px;

      /* Radius */
      --p-border-radius-050: 2px;
      --p-border-radius-100: 4px;
      --p-border-radius-150: 6px;
      --p-border-radius-200: 8px;
      --p-border-radius-300: 12px;
      --p-border-radius-400: 16px;
      --p-border-radius-full: 9999px;

      /* Type */
      --p-font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      --p-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

      /* Shadow */
      --p-shadow-100: 0 1px 0 rgba(0,0,0,0.05);
      --p-shadow-200: 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.05);
      --p-shadow-300: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.05);
      --p-shadow-button: 0 -1px 0 rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.18) inset;
      --p-shadow-button-secondary: 0 1px 0 rgba(0,0,0,0.05);
    }

    /* Dark mode (when [data-p-theme="dark"]) */
    [data-p-theme="dark"] {
      --p-color-bg: #1a1a1a;
      --p-color-bg-surface: #303030;
      --p-color-bg-surface-secondary: #2a2a2a;
      --p-color-bg-surface-tertiary: #1a1a1a;
      --p-color-bg-surface-hover: #404040;
      --p-color-bg-fill: #303030;
      --p-color-bg-fill-secondary: #404040;
      --p-color-bg-fill-brand: #ffffff;
      --p-color-bg-fill-brand-hover: #e3e3e3;
      --p-color-text: #f1f1f1;
      --p-color-text-secondary: #b5b5b5;
      --p-color-text-disabled: #616161;
      --p-color-text-brand-on-bg-fill: #303030;
      --p-color-text-inverse: #303030;
      --p-color-border: #404040;
      --p-color-border-secondary: #303030;
      --p-color-icon: #f1f1f1;
      --p-color-icon-secondary: #b5b5b5;
    }

    .p-app {
      font-family: var(--p-font-family);
      color: var(--p-color-text);
      background: var(--p-color-bg);
      font-size: 13px;
      line-height: 1.4;
      letter-spacing: -0.005em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .p-app *, .p-app *::before, .p-app *::after { box-sizing: border-box; }
    .p-app button {
      font-family: inherit;
      cursor: pointer;
    }

    .p-mono { font-family: var(--p-font-family-mono); font-feature-settings: "zero", "ss01"; }

    /* Button base */
    .p-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--p-space-150);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.15;
      padding: 6px 12px;
      min-height: 28px;
      border-radius: var(--p-border-radius-200);
      border: 1px solid var(--p-color-border);
      background: var(--p-color-bg-surface);
      color: var(--p-color-text);
      letter-spacing: -0.005em;
      box-shadow: var(--p-shadow-button-secondary);
      transition: background .12s, border-color .12s, transform .05s;
      user-select: none;
    }
    .p-btn:hover { background: var(--p-color-bg-surface-hover); }
    .p-btn:active { transform: translateY(0.5px); }

    .p-btn--primary {
      background: var(--p-color-bg-fill-brand);
      color: var(--p-color-text-brand-on-bg-fill);
      border-color: transparent;
      box-shadow: var(--p-shadow-button);
    }
    .p-btn--primary:hover { background: var(--p-color-bg-fill-brand-hover); }
    .p-btn--primary:active { background: var(--p-color-bg-fill-brand-active); }

    .p-btn--critical {
      background: var(--p-color-bg-fill-critical-secondary);
      color: #ffffff;
      border-color: transparent;
      box-shadow: var(--p-shadow-button);
    }
    .p-btn--critical:hover { background: var(--p-color-bg-fill-critical-active); }

    .p-btn--magic {
      background: var(--p-color-bg-fill-magic-active);
      color: #ffffff;
      border-color: transparent;
      box-shadow: var(--p-shadow-button);
    }
    .p-btn--magic:hover { background: var(--p-color-bg-fill-magic-hover); }

    .p-btn--plain {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: var(--p-color-text);
      padding: 4px 8px;
    }
    .p-btn--plain:hover { background: var(--p-color-bg-fill-tertiary); }

    .p-btn--mono {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      color: var(--p-color-text);
      padding: 4px 6px;
    }
    .p-btn--mono:hover { background: var(--p-color-bg-fill-tertiary); }

    .p-btn--lg { min-height: 36px; padding: 8px 16px; font-size: 14px; border-radius: 10px; }
    .p-btn--sm { min-height: 24px; padding: 3px 8px; font-size: 12px; border-radius: 6px; }
    .p-btn--icon { padding: 6px; min-width: 28px; }
    .p-btn[disabled] { opacity: .5; pointer-events: none; }
    .p-btn--pressed { background: var(--p-color-bg-surface-active); }

    /* Card */
    .p-card {
      background: var(--p-color-bg-surface);
      border: 1px solid var(--p-color-border);
      border-radius: 12px;
      box-shadow: var(--p-shadow-100);
    }
    .p-card--inset { padding: 16px; }

    /* Badge */
    .p-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 500;
      padding: 1px 8px;
      min-height: 20px;
      border-radius: var(--p-border-radius-full);
      background: var(--p-color-bg-fill-tertiary);
      color: var(--p-color-text);
      letter-spacing: -0.005em;
      line-height: 1.4;
    }
    .p-badge--success { background: var(--p-color-bg-fill-success); color: var(--p-color-text-success); }
    .p-badge--warning { background: var(--p-color-bg-fill-warning); color: var(--p-color-text-warning); }
    .p-badge--critical { background: var(--p-color-bg-fill-critical); color: var(--p-color-text-critical); }
    .p-badge--info { background: var(--p-color-bg-fill-info); color: var(--p-color-text-info); }
    .p-badge--magic { background: var(--p-color-bg-fill-magic); color: var(--p-color-text-magic); }
    .p-badge--dot::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    }

    /* TextField */
    .p-input {
      font-family: inherit;
      font-size: 13px;
      background: var(--p-color-bg-surface);
      border: 1px solid var(--p-color-border);
      border-radius: 8px;
      padding: 6px 10px;
      min-height: 28px;
      color: var(--p-color-text);
      width: 100%;
      letter-spacing: -0.005em;
      box-shadow: 0 0 0 1px transparent;
      outline: none;
    }
    .p-input:focus, .p-input:focus-within {
      border-color: var(--p-color-border-focus);
      box-shadow: 0 0 0 1px var(--p-color-border-focus);
    }
    .p-input--lg { min-height: 36px; padding: 8px 12px; font-size: 14px; }

    /* Tabs (Polaris underline tabs) */
    .p-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--p-color-border);
      padding: 0 8px;
    }
    .p-tab {
      padding: 9px 12px 11px;
      font-size: 13px;
      font-weight: 500;
      color: var(--p-color-text-secondary);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      border-radius: 8px 8px 0 0;
    }
    .p-tab:hover { background: var(--p-color-bg-fill-tertiary); color: var(--p-color-text); }
    .p-tab--active {
      color: var(--p-color-text);
      border-bottom-color: var(--p-color-text);
      font-weight: 600;
    }

    /* Banner */
    .p-banner {
      border-radius: 12px;
      padding: 12px 14px;
      background: var(--p-color-bg-surface);
      border: 1px solid var(--p-color-border);
      display: flex;
      gap: 10px;
      font-size: 13px;
      line-height: 1.45;
    }
    .p-banner--info { background: var(--p-color-bg-fill-info); border-color: transparent; color: var(--p-color-text-info); }
    .p-banner--success { background: var(--p-color-bg-fill-success); border-color: transparent; color: var(--p-color-text-success); }
    .p-banner--warning { background: var(--p-color-bg-fill-warning); border-color: transparent; color: var(--p-color-text-warning); }
    .p-banner--critical { background: var(--p-color-bg-fill-critical); border-color: transparent; color: var(--p-color-text-critical); }
    .p-banner--magic { background: var(--p-color-bg-fill-magic); border-color: transparent; color: var(--p-color-text-magic); }

    /* IndexTable */
    .p-table {
      border: 1px solid var(--p-color-border);
      border-radius: 12px;
      overflow: hidden;
      background: var(--p-color-bg-surface);
    }
    .p-table__head {
      background: var(--p-color-bg-surface-secondary);
      font-size: 12px;
      font-weight: 500;
      color: var(--p-color-text-secondary);
      padding: 8px 16px;
      border-bottom: 1px solid var(--p-color-border);
      display: grid;
      gap: 12px;
      align-items: center;
    }
    .p-table__row {
      padding: 10px 16px;
      border-top: 1px solid var(--p-color-border-secondary);
      display: grid;
      gap: 12px;
      align-items: center;
      font-size: 13px;
    }
    .p-table__row:first-child { border-top: none; }
    .p-table__row:hover { background: var(--p-color-bg-surface-hover); }

    .p-checkbox {
      width: 16px; height: 16px;
      border: 1.5px solid var(--p-color-border-hover);
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--p-color-bg-surface);
      flex-shrink: 0;
    }
    .p-checkbox--on { background: var(--p-color-bg-fill-brand); border-color: var(--p-color-bg-fill-brand); color: white; }

    /* Avatar */
    .p-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: 500;
      letter-spacing: -0.01em;
      flex-shrink: 0;
      color: var(--p-color-text);
    }
    .p-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
    .p-avatar--md { width: 32px; height: 32px; font-size: 12px; }
    .p-avatar--lg { width: 40px; height: 40px; font-size: 14px; }

    /* Filter chips */
    .p-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid var(--p-color-border);
      background: var(--p-color-bg-surface);
      font-size: 12px;
      font-weight: 500;
      color: var(--p-color-text);
      cursor: pointer;
      user-select: none;
    }
    .p-chip:hover { background: var(--p-color-bg-fill-tertiary); }
    .p-chip--on {
      background: var(--p-color-bg-fill-brand);
      color: var(--p-color-text-brand-on-bg-fill);
      border-color: transparent;
    }

    /* Page header */
    .p-page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    .p-page-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.4px;
      line-height: 1.2;
      color: var(--p-color-text);
    }
    .p-eyebrow {
      font-size: 12px;
      color: var(--p-color-text-secondary);
      margin-bottom: 2px;
    }

    /* Dialog backdrop */
    .p-backdrop {
      position: absolute; inset: 0;
      background: rgba(26,26,26,0.4);
      backdrop-filter: blur(2px);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .p-dialog {
      width: 460px;
      background: var(--p-color-bg-surface);
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.18);
      overflow: hidden;
      max-height: 90%;
      display: flex;
      flex-direction: column;
    }
    .p-dialog__head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--p-color-border);
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 15px;
    }
    .p-dialog__body {
      padding: 16px 18px;
      font-size: 13px;
      color: var(--p-color-text);
      line-height: 1.5;
      overflow: auto;
    }
    .p-dialog__foot {
      padding: 12px 18px;
      border-top: 1px solid var(--p-color-border);
      background: var(--p-color-bg-surface-secondary);
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* Striped placeholder */
    .p-ph {
      background: repeating-linear-gradient(135deg,
        var(--p-color-bg-fill-tertiary) 0 8px,
        var(--p-color-bg-surface-secondary) 8px 16px);
      color: var(--p-color-text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--p-font-family-mono);
      font-size: 11px;
      text-align: center;
      padding: 8px;
      border-radius: 6px;
    }

    /* Magic / AI selection outline */
    .p-magic-outline {
      outline: 2px dashed var(--p-color-bg-fill-magic-active);
      outline-offset: 3px;
      border-radius: 4px;
      position: relative;
    }
    .p-pick-hover {
      outline: 1.5px dashed rgba(107, 70, 193, 0.5);
      outline-offset: 2px;
    }

    /* Scrollbar — subtle */
    .p-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
    .p-scroll::-webkit-scrollbar-track { background: transparent; }
    .p-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
    .p-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
  `;
  document.head.appendChild(s);
})();

// ─── Icons ─────────────────────────────────────────────────
const I = {
  search: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="9" r="5.5"/><path d="M13 13l4 4"/></svg>),
  plus: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M10 4v12M4 10h12"/></svg>),
  chevronDown: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M5 8l5 4 5-4"/></svg>),
  chevronRight: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M8 5l4 5-4 5"/></svg>),
  chevronLeft: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5l-4 5 4 5"/></svg>),
  more: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="currentColor"><circle cx="4.5" cy="10" r="1.4"/><circle cx="10" cy="10" r="1.4"/><circle cx="15.5" cy="10" r="1.4"/></svg>),
  check: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10l4 4 8-8"/></svg>),
  send: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M3 10h12M11 5l4 5-4 5"/></svg>),
  sparkle: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="currentColor"><path d="M10 1.6l1.8 4.6 4.6 1.8-4.6 1.8L10 14.4 8.2 9.8 3.6 8l4.6-1.8z"/><path d="M16 12l.8 2 2 .8-2 .8L16 17.6l-.8-2-2-.8 2-.8z" opacity=".55"/></svg>),
  cart: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h2l2 10h9l2-7H6"/><circle cx="7.5" cy="16.5" r="1"/><circle cx="14" cy="16.5" r="1"/></svg>),
  store: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l1.2-3.5h11.6L17 7M3 7v1.5a2 2 0 004 0 2 2 0 004 0 2 2 0 004 0 2 2 0 003-.4V7M4 8.5V17h12V8.5"/></svg>),
  apps: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="6" height="6" rx="1.2"/><rect x="11" y="3" width="6" height="6" rx="1.2"/><rect x="3" y="11" width="6" height="6" rx="1.2"/><rect x="11" y="11" width="6" height="6" rx="1.2"/></svg>),
  wand: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l11-11M14 3l1 1M16 5l1 1M18 8l1 1M5 12l1 1"/></svg>),
  layers: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><path d="M10 2L3 6l7 4 7-4-7-4zM3 10l7 4 7-4M3 14l7 4 7-4"/></svg>),
  settings: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"><path d="M10 7a3 3 0 100 6 3 3 0 000-6z"/><path d="M16.5 10c0-.5-.05-.9-.1-1.3l1.8-1.3-1.8-3.2-2 .6c-.5-.5-1.1-.9-1.7-1.1L12 2h-4l-.6 1.6c-.7.2-1.2.6-1.8 1.1l-2-.6L1.8 7.4l1.8 1.3c-.05.4-.1.8-.1 1.3 0 .5.05.9.1 1.3l-1.8 1.3 1.8 3.2 2-.6c.5.5 1.1.9 1.7 1.1L8 18h4l.6-1.6c.7-.2 1.2-.6 1.8-1.1l2 .6 1.8-3.2-1.8-1.3c.05-.4.1-.8.1-1.3z"/></svg>),
  bell: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 9a5 5 0 0110 0v4l1 2H4l1-2V9zM8 17a2 2 0 004 0"/></svg>),
  close: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 5l10 10M15 5L5 15"/></svg>),
  rollback: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M2 10a7 7 0 1013-3.5M2 3v5h5"/></svg>),
  external: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 4H4v12h12v-3M11 4h5v5M16 4l-7 7"/></svg>),
  lock: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><path d="M5 9V6.5a5 5 0 0110 0V9"/><rect x="3.5" y="9" width="13" height="8.5" rx="2"/></svg>),
  cursor: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="currentColor"><path d="M3 2l4 13 2.5-5 5-2.5z"/></svg>),
  home: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"><path d="M3 9l7-6 7 6v8a1 1 0 01-1 1h-4v-5H8v5H4a1 1 0 01-1-1V9z"/></svg>),
  diff: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3v10a3 3 0 003 3M14 17V7a3 3 0 00-3-3"/><circle cx="6" cy="3" r="1.5"/><circle cx="14" cy="17" r="1.5"/></svg>),
  pause: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="currentColor"><rect x="5" y="4" width="3.5" height="12" rx="1"/><rect x="11.5" y="4" width="3.5" height="12" rx="1"/></svg>),
  play: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="currentColor"><path d="M5 4v12l11-6z"/></svg>),
  edit: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3l3 3-9 9H5v-3z"/></svg>),
  spinner: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ animation: 'p-spin 0.8s linear infinite' }}><path d="M10 2a8 8 0 018 8" opacity="1"/><path d="M10 18a8 8 0 01-8-8" opacity="0.3"/></svg>),
  paperclip: (p = {}) => (<svg viewBox="0 0 20 20" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 7l-6 6a2.5 2.5 0 003.5 3.5l7-7a4 4 0 00-5.7-5.7L4 11a5.5 5.5 0 008 7.5"/></svg>),
};

// inject keyframes for spinner
if (typeof document !== 'undefined' && !document.getElementById('p-anim')) {
  const a = document.createElement('style');
  a.id = 'p-anim';
  a.textContent = `@keyframes p-spin { to { transform: rotate(360deg); } }
    @keyframes p-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes p-blink { 50% { opacity: 0; } }
    .p-fade-in { animation: p-fade .2s ease-out; }
    .p-caret::after { content: '▍'; margin-left: 2px; animation: p-blink 1.1s steps(1) infinite; }`;
  document.head.appendChild(a);
}

// ─── Primitives ───────────────────────────────────────────
function Btn({ variant, size, icon: Icon, iconRight: IRight, pressed, disabled, onClick, children, style, title }) {
  const cls = ['p-btn'];
  if (variant === 'primary') cls.push('p-btn--primary');
  if (variant === 'critical') cls.push('p-btn--critical');
  if (variant === 'magic') cls.push('p-btn--magic');
  if (variant === 'plain') cls.push('p-btn--plain');
  if (variant === 'mono') cls.push('p-btn--mono');
  if (size === 'sm') cls.push('p-btn--sm');
  if (size === 'lg') cls.push('p-btn--lg');
  if (!children) cls.push('p-btn--icon');
  if (pressed) cls.push('p-btn--pressed');
  return (
    <button className={cls.join(' ')} onClick={onClick} disabled={disabled} style={style} title={title}>
      {Icon && <Icon size={size === 'sm' ? 13 : 14} />}
      {children}
      {IRight && <IRight size={size === 'sm' ? 12 : 14} />}
    </button>
  );
}

function Badge({ tone, dot, children, style }) {
  const cls = ['p-badge'];
  if (tone) cls.push(`p-badge--${tone}`);
  if (dot) cls.push('p-badge--dot');
  return <span className={cls.join(' ')} style={style}>{children}</span>;
}

function Card({ children, padding, style, onClick }) {
  return (
    <div className={'p-card' + (padding ? ' p-card--inset' : '')} style={style} onClick={onClick}>
      {children}
    </div>
  );
}

function Tabs({ tabs, value, onChange }) {
  return (
    <div className="p-tabs">
      {tabs.map((t) => (
        <div
          key={t.id || t.label}
          className={'p-tab' + ((t.id || t.label) === value ? ' p-tab--active' : '')}
          onClick={() => onChange && onChange(t.id || t.label)}
        >
          {t.label}
          {t.count != null && <Badge>{t.count}</Badge>}
        </div>
      ))}
    </div>
  );
}

function Avatar({ initials, size = 'md', color }) {
  const bg = color || 'oklch(0.78 0.09 ' + (initials.charCodeAt(0) * 7 % 360) + ')';
  return <span className={`p-avatar p-avatar--${size}`} style={{ background: bg }}>{initials}</span>;
}

function PageHeader({ eyebrow, title, primary, secondary }) {
  return (
    <div className="p-page-head">
      <div>
        {eyebrow && <div className="p-eyebrow">{eyebrow}</div>}
        <div className="p-page-title">{title}</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        {secondary}
        {primary}
      </div>
    </div>
  );
}

function Banner({ tone, icon: Icon, children, dismissible, onDismiss, style }) {
  return (
    <div className={'p-banner' + (tone ? ' p-banner--' + tone : '')} style={style}>
      {Icon && <Icon />}
      <div style={{ flex: 1 }}>{children}</div>
      {dismissible && (
        <button className="p-btn p-btn--plain p-btn--sm p-btn--icon" onClick={onDismiss}>
          <I.close />
        </button>
      )}
    </div>
  );
}

function Checkbox({ checked, onChange }) {
  return (
    <span className={'p-checkbox' + (checked ? ' p-checkbox--on' : '')} onClick={() => onChange && onChange(!checked)}>
      {checked && <I.check size={11} />}
    </span>
  );
}

function Input({ placeholder, value, onChange, prefix, suffix, size, multiline, rows = 1, onKeyDown, autoFocus }) {
  return (
    <div className={'p-input' + (size === 'lg' ? ' p-input--lg' : '')}
         style={{ display: 'flex', alignItems: 'center', gap: 8, padding: multiline ? '8px 10px' : undefined, height: multiline ? 'auto' : undefined, minHeight: multiline ? rows * 18 + 16 : undefined }}>
      {prefix}
      {multiline ? (
        <textarea
          value={value || ''}
          onChange={(e) => onChange && onChange(e.target.value)}
          onKeyDown={onKeyDown}
          rows={rows}
          autoFocus={autoFocus}
          placeholder={placeholder}
          style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            font: 'inherit', color: 'inherit', resize: 'none', padding: 0,
          }}
        />
      ) : (
        <input
          type="text"
          value={value || ''}
          onChange={(e) => onChange && onChange(e.target.value)}
          onKeyDown={onKeyDown}
          autoFocus={autoFocus}
          placeholder={placeholder}
          style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            font: 'inherit', color: 'inherit', padding: 0, minWidth: 0,
          }}
        />
      )}
      {suffix}
    </div>
  );
}

function Dialog({ title, icon: Icon, children, footer, onClose }) {
  return (
    <div className="p-backdrop" onClick={onClose}>
      <div className="p-dialog p-fade-in" onClick={(e) => e.stopPropagation()}>
        <div className="p-dialog__head">
          {Icon && <Icon />}
          <span style={{ flex: 1 }}>{title}</span>
          <Btn variant="plain" size="sm" icon={I.close} onClick={onClose} />
        </div>
        <div className="p-dialog__body p-scroll">{children}</div>
        {footer && <div className="p-dialog__foot">{footer}</div>}
      </div>
    </div>
  );
}

function Chip({ active, onClick, icon: Icon, children }) {
  return (
    <span className={'p-chip' + (active ? ' p-chip--on' : '')} onClick={onClick}>
      {Icon && <Icon size={12} />}
      {children}
    </span>
  );
}

function Tooltip({ children, content, side = 'top' }) {
  // simple tooltip via title for now — Polaris-style hover would be more
  return <span title={content}>{children}</span>;
}

Object.assign(window, {
  I, Btn, Badge, Card, Tabs, Avatar, PageHeader, Banner, Checkbox, Input, Dialog, Chip, Tooltip,
});