@mochabug/adapt-web 1.0.1-rc.12 → 1.0.1-rc.13

package/dist/types/css-panel.d.ts

@@ -1 +1 @@
-export declare const PANEL_MANAGER_CSS = "/* ==========================================================================\n   Mochabug Adapt Web \u2014 Combined Styles\n   Panel Manager CSS + Cap Widget CSS\n   ========================================================================== */\n\n:root { --mb-adapt-styles-loaded: 1; }\n\n/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  display: flex;\n  flex-direction: column;\n  background: var(--mb-adapt-bg);\n  --mb-adapt-bg: transparent;\n  --mb-adapt-font: system-ui, -apple-system, sans-serif;\n  --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.2);\n  --mb-adapt-separator-active: rgba(59, 130, 246, 0.5);\n  --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15);\n  --mb-adapt-floating-border: none;\n  --mb-adapt-floating-backdrop: none;\n  --mb-adapt-floating-radius: 8px;\n  --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n  --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  --mb-adapt-border-radius: 8px;\n  --mb-adapt-responsive-breakpoint: 768;\n  --mb-adapt-responsive-hysteresis: 40;\n\n  /* Cap.js widget customization variables */\n  --mb-adapt-cap-background: #ffffff;\n  --mb-adapt-cap-border-color: #e2e8f0;\n  --mb-adapt-cap-border-radius: 16px;\n  --mb-adapt-cap-height: 72px;\n  --mb-adapt-cap-width: 380px;\n  --mb-adapt-cap-padding: 20px 28px;\n  --mb-adapt-cap-gap: 20px;\n  --mb-adapt-cap-color: #1e293b;\n  --mb-adapt-cap-checkbox-size: 36px;\n  --mb-adapt-cap-checkbox-border: 2px solid #cbd5e1;\n  --mb-adapt-cap-checkbox-radius: 10px;\n  --mb-adapt-cap-checkbox-background: #f8fafc;\n  --mb-adapt-cap-spinner-color: #6366f1;\n  --mb-adapt-cap-spinner-bg: #e2e8f0;\n  --mb-adapt-cap-font: inherit;\n  --mb-adapt-cap-spinner-thickness: 3px;\n  --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);\n  --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);\n\n  /* Fork panel theming \u2014 customizable via CSS variables */\n  --mb-adapt-fork-bg: #ffffff;\n  --mb-adapt-fork-tab-bg: #f3f3f3;\n  --mb-adapt-fork-tab-active-bg: #ffffff;\n  --mb-adapt-fork-tab-color: rgb(51, 51, 51);\n  --mb-adapt-fork-tab-inactive-color: rgba(51, 51, 51, 0.7);\n  --mb-adapt-fork-separator: rgba(128, 128, 128, 0.35);\n}\n\n.mb-adapt--dark {\n  /* Cap.js widget dark mode */\n  --mb-adapt-cap-background: #1e293b;\n  --mb-adapt-cap-border-color: #334155;\n  --mb-adapt-cap-color: #f1f5f9;\n  --mb-adapt-cap-checkbox-border: 2px solid #475569;\n  --mb-adapt-cap-checkbox-background: #0f172a;\n  --mb-adapt-cap-spinner-color: #818cf8;\n  --mb-adapt-cap-spinner-bg: #334155;\n  --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);\n  --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);\n\n  /* Status card dark mode */\n  --mb-adapt-status-card-bg: #1e293b;\n  --mb-adapt-status-card-border: #334155;\n  --mb-adapt-status-icon-bg: #351c1c;\n  --mb-adapt-status-text: #e2e8f0;\n\n  /* Panel dark mode overrides */\n  --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.3);\n  --mb-adapt-separator-active: rgba(99, 130, 246, 0.6);\n  --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3);\n  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.06);\n  --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);\n  --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);\n\n  /* Fork panel dark mode */\n  --mb-adapt-fork-bg: #1e1e1e;\n  --mb-adapt-fork-tab-bg: #252526;\n  --mb-adapt-fork-tab-active-bg: #1e1e1e;\n  --mb-adapt-fork-tab-color: #ffffff;\n  --mb-adapt-fork-tab-inactive-color: #969696;\n  --mb-adapt-fork-separator: rgb(68, 68, 68);\n\n  /* Drop target dark mode */\n  --mb-adapt-drop-header-bg: rgba(129, 140, 248, 0.22);\n  --mb-adapt-drop-center-bg: rgba(129, 140, 248, 0.15);\n  --mb-adapt-drop-split-bg: rgba(129, 140, 248, 0.18);\n  --mb-adapt-drop-border: rgba(129, 140, 248, 0.6);\n}\n\n/* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-layout {\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  display: flex;\n}\n\n.mb-split-container {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n}\n\n.mb-split-horizontal { flex-direction: row; }\n.mb-split-vertical { flex-direction: column; }\n\n.mb-split-leaf {\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* Animated flex transition \u2014 applied temporarily during dock/undock/maximize */\n.mb-split-leaf--animating {\n  transition: flex 0.25s ease;\n}\n.mb-split-container--animating {\n  transition: flex 0.25s ease;\n}\n.mb-layout-separator--animating {\n  transition: opacity 0.25s ease;\n}\n\n/* Draggable separator between split panels */\n.mb-layout-separator {\n  flex: 0 0 5px;\n  background: var(--mb-adapt-fork-separator);\n  transition: background 0.15s;\n  position: relative;\n  z-index: 1;\n  touch-action: none;\n}\n\n.mb-layout-separator-v { cursor: col-resize; }\n.mb-layout-separator-h { cursor: row-resize; }\n\n.mb-layout-separator:hover,\n.mb-layout-separator--active {\n  background: var(--mb-adapt-separator-active);\n}\n\n/* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mb-adapt-bg);\n}\n\n.mb-group-header {\n  display: flex;\n  align-items: stretch;\n  height: 40px;\n  min-height: 40px;\n  background: var(--mb-adapt-fork-tab-bg);\n  border-bottom: 1px solid var(--mb-adapt-fork-separator);\n  user-select: none;\n}\n\n.mb-group-header-prefix {\n  display: flex;\n  align-items: stretch;\n}\n\n.mb-group-tabs {\n  display: flex;\n  align-items: stretch;\n  overflow-x: auto;\n  overflow-y: hidden;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.mb-group-tabs::-webkit-scrollbar {\n  height: 2px;\n}\n\n/* Drag handle \u2014 fills remaining header space so the user can grab it */\n.mb-group-header-void {\n  flex: 1;\n  min-width: 40px;\n  touch-action: none;\n}\n\n.mb-group-header-actions {\n  display: flex;\n  align-items: center;\n}\n\n.mb-group-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mb-adapt-fork-bg);\n}\n\n/* Main group overrides */\n.mb-group[data-main-group=\"true\"] {\n  background: var(--mb-adapt-bg);\n}\n\n.mb-group[data-main-group=\"true\"] .mb-group-content {\n  background: var(--mb-adapt-bg);\n}\n\n\n/* \u2500\u2500 Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 14px;\n  min-width: 100px;\n  font-size: 13px;\n  font-family: var(--mb-adapt-font);\n  white-space: nowrap;\n  cursor: pointer;\n  touch-action: none;\n  color: var(--mb-adapt-fork-tab-inactive-color);\n  background: var(--mb-adapt-fork-tab-bg);\n  border-right: 1px solid var(--mb-adapt-fork-separator);\n  transition: background 0.1s;\n}\n\n.mb-tab[data-active=\"true\"] {\n  color: var(--mb-adapt-fork-tab-color);\n  background: var(--mb-adapt-fork-tab-active-bg);\n}\n\n.mb-tab:hover {\n  background: var(--mb-adapt-fork-tab-active-bg);\n}\n\n.mb-tab-label {\n  display: flex;\n  align-items: center;\n}\n\n.mb-tab-label svg {\n  width: 14px;\n  height: 14px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.mb-tab[data-active=\"true\"] .mb-tab-label svg {\n  opacity: 1;\n}\n\n.mb-tab-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  width: 40px;\n  flex-shrink: 0;\n  justify-content: flex-end;\n  margin-left: auto;\n}\n\n.mb-tab-close {\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-close {\n  opacity: 0.7;\n}\n\n.mb-tab-close:hover {\n  opacity: 1 !important;\n  background: var(--mb-adapt-button-hover-bg);\n}\n\n.mb-tab-close svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* \u2500\u2500 Panel visibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-panel {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.mb-panel[data-active=\"false\"] {\n  display: none;\n}\n\n.mb-panel[data-active=\"true\"] {\n  display: block;\n}\n\n/* \u2500\u2500 Floating overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-floating-overlay {\n  position: fixed;\n  z-index: 100000;\n  box-shadow: var(--mb-adapt-floating-shadow);\n  border: var(--mb-adapt-floating-border);\n  backdrop-filter: var(--mb-adapt-floating-backdrop);\n  -webkit-backdrop-filter: var(--mb-adapt-floating-backdrop);\n  border-radius: var(--mb-adapt-floating-radius);\n  display: flex;\n  flex-direction: column;\n  /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)\n     and would be clipped. The inner .mb-group already has overflow:hidden for\n     its own border-radius clipping. */\n}\n\n.mb-floating-overlay > .mb-group {\n  flex: 1;\n  border-radius: var(--mb-adapt-floating-radius);\n  overflow: hidden;\n}\n\n/* Internal split layout inside a floating overlay */\n.mb-floating-overlay > .mb-layout {\n  position: relative;\n  inset: auto;\n  height: auto;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  border-radius: var(--mb-adapt-floating-radius);\n  overflow: hidden;\n}\n\n.mb-floating-maximized {\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.mb-floating-maximized .mb-group {\n  border-radius: 0;\n}\n\n.mb-floating-maximized .mb-resize-handle {\n  display: none !important;\n}\n\n.mb-floating-maximized .mb-group-header-void {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Resize handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-resize-handle {\n  position: absolute;\n  z-index: 10;\n  touch-action: none;\n}\n\n.mb-resize-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }\n.mb-resize-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }\n.mb-resize-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }\n.mb-resize-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }\n.mb-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }\n.mb-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }\n.mb-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }\n.mb-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }\n\n/* \u2500\u2500 Iframe styling \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__iframe {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  border: 0;\n  display: block;\n  background: transparent;\n  border-radius: var(--mb-adapt-border-radius);\n  pointer-events: auto;\n  opacity: 0;\n  transition: opacity 0.1s ease-out;\n}\n\n.mb-adapt__iframe--visible {\n  opacity: 1;\n}\n\n.mb-adapt__iframe--hidden {\n  display: none;\n}\n\n/* \u2500\u2500 Status message overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__status-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 200000;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mb-adapt__status-card {\n  pointer-events: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  padding: 32px 40px;\n  max-width: 380px;\n  border-radius: 16px;\n  background: var(--mb-adapt-status-card-bg, #ffffff);\n  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);\n  box-shadow: var(--mb-adapt-status-card-shadow);\n  font-family: var(--mb-adapt-font);\n  text-align: center;\n}\n\n.mb-adapt__status-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mb-adapt-status-icon-bg, #fef2f2);\n}\n\n.mb-adapt__status-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n.mb-adapt__status-icon--stopped {\n  background: var(--mb-adapt-status-icon-bg, #f3f4f6);\n}\n\n.mb-adapt__status-text {\n  color: var(--mb-adapt-status-text, #374151);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0;\n}\n\n.mb-adapt__status-restart {\n  padding: 8px 20px;\n  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);\n  border-radius: 8px;\n  background: transparent;\n  color: var(--mb-adapt-status-text, #374151);\n  font-size: 14px;\n  font-weight: 500;\n  font-family: var(--mb-adapt-font);\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__status-restart:hover {\n  background: var(--mb-adapt-status-card-border, #e5e7eb);\n}\n\n/* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mb-adapt__confirm-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  z-index: 300000;\n  background: rgba(0, 0, 0, 0.4);\n  height: auto;\n  min-height: 0;\n}\n\n.mb-adapt--dark.mb-adapt__confirm-overlay {\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.mb-adapt__confirm-card {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 16px;\n  padding: 24px 28px;\n  max-width: 360px;\n  width: 100%;\n  border-radius: var(--mb-adapt-floating-radius);\n  background: var(--mb-adapt-fork-tab-active-bg);\n  border: 1px solid var(--mb-adapt-fork-separator);\n  box-shadow: var(--mb-adapt-floating-shadow);\n  font-family: var(--mb-adapt-font);\n  text-align: center;\n}\n\n.mb-adapt__confirm-text {\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--mb-adapt-fork-tab-color);\n  margin: 0;\n}\n\n.mb-adapt__confirm-buttons {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.mb-adapt__confirm-btn {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-family: var(--mb-adapt-font);\n  cursor: pointer;\n  font-weight: 500;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__confirm-btn--cancel {\n  background: transparent;\n  border: 1px solid var(--mb-adapt-fork-separator);\n  color: var(--mb-adapt-fork-tab-color);\n}\n\n.mb-adapt__confirm-btn--cancel:hover {\n  background: var(--mb-adapt-button-hover-bg);\n}\n\n.mb-adapt__confirm-btn--confirm {\n  background: var(--mb-adapt-fork-tab-color);\n  color: var(--mb-adapt-fork-tab-active-bg);\n  border: 1px solid transparent;\n}\n\n.mb-adapt__confirm-btn--confirm:hover {\n  opacity: 0.85;\n}\n\n/* \u2500\u2500 Cap.js widget positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-cap {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 200000;\n}\n\n.mb-adapt-cap > * {\n  pointer-events: auto;\n}\n\n/* Cap.js widget styling */\n.mb-adapt cap-widget {\n  --cap-background: var(--mb-adapt-cap-background);\n  --cap-border-color: var(--mb-adapt-cap-border-color);\n  --cap-border-radius: var(--mb-adapt-cap-border-radius);\n  --cap-widget-height: var(--mb-adapt-cap-height);\n  --cap-widget-width: var(--mb-adapt-cap-width);\n  --cap-widget-padding: var(--mb-adapt-cap-padding);\n  --cap-gap: var(--mb-adapt-cap-gap);\n  --cap-color: var(--mb-adapt-cap-color);\n  --cap-checkbox-size: var(--mb-adapt-cap-checkbox-size);\n  --cap-checkbox-border: var(--mb-adapt-cap-checkbox-border);\n  --cap-checkbox-border-radius: var(--mb-adapt-cap-checkbox-radius);\n  --cap-checkbox-background: var(--mb-adapt-cap-checkbox-background);\n  --cap-checkbox-margin: 0;\n  --cap-font: var(--mb-adapt-cap-font);\n  --cap-spinner-color: var(--mb-adapt-cap-spinner-color);\n  --cap-spinner-background-color: var(--mb-adapt-cap-spinner-bg);\n  --cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness);\n}\n\n/* Hide Cap.js credits */\ncap-widget::part(attribution) {\n  display: none;\n}\n\n/* \u2500\u2500 Fork group action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-fork-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding-right: 4px;\n}\n.mb-adapt-fork-actions button {\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--mb-adapt-fork-tab-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0.7;\n  transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-fork-actions button:hover {\n  opacity: 1;\n  background: var(--mb-adapt-button-hover-bg);\n}\n.mb-adapt-fork-actions button svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* \u2500\u2500 Minimized-group tabs bar (at the top, NOT an overlay) \u2500\u2500\u2500 */\n/* Sits at the top of .mb-adapt as a normal flow element so the layout\n   underneath shrinks to accommodate it. This prevents scrollbars when\n   docked panels are minimized \u2014 the iframe gets the remaining height. */\n.mb-adapt-minimized-tabs {\n  display: none;\n  height: 40px;\n  flex-shrink: 0;\n  z-index: 100;\n  align-items: stretch;\n  background: var(--mb-adapt-fork-tab-bg);\n  border-bottom: 1px solid var(--mb-adapt-fork-separator);\n  user-select: none;\n}\n.mb-adapt-minimized-tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 12px;\n  flex: 1;\n  background: var(--mb-adapt-fork-tab-bg);\n  color: var(--mb-adapt-fork-tab-color);\n  font-size: 13px;\n  font-family: var(--mb-adapt-font);\n  white-space: nowrap;\n  border-right: 1px solid var(--mb-adapt-fork-separator);\n  cursor: default;\n}\n.mb-adapt-minimized-tab-label {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mb-adapt-minimized-tab-label svg {\n  width: 14px;\n  height: 14px;\n  opacity: 0.8;\n  flex-shrink: 0;\n}\n.mb-adapt-minimized-tab-action {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  opacity: 0.6;\n  transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-minimized-tab-action:hover {\n  opacity: 1;\n  background: var(--mb-adapt-button-hover-bg);\n}\n.mb-adapt-minimized-tab-action svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Minimized tab drag handle cursor */\n.mb-adapt-minimized-tab {\n  cursor: grab;\n  touch-action: none;\n}\n\n/* Drop target highlight for minimized tab merge */\n.mb-adapt-minimized-tab--drop-target {\n  background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;\n  box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));\n}\n\n/* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 999999;\n  padding: 4px 10px;\n  background: var(--mb-adapt-fork-tab-bg);\n  color: var(--mb-adapt-fork-tab-color);\n  border: 1px solid var(--mb-adapt-fork-separator);\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: var(--mb-adapt-font);\n  white-space: nowrap;\n  box-shadow: var(--mb-adapt-drag-ghost-shadow);\n  opacity: 0.92;\n  display: flex;\n  align-items: center;\n}\n\n.mb-drag-ghost svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group-header--drop-target {\n  background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;\n  box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));\n}\n\n/* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */\n.mb-drop-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 999998;\n  display: none;\n  box-sizing: border-box;\n  border-radius: 6px;\n  transition: opacity 0.1s ease-out;\n}\n\n.mb-drop-overlay[data-zone=\"center\"] {\n  background: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));\n  border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));\n}\n\n.mb-drop-overlay[data-zone=\"top\"],\n.mb-drop-overlay[data-zone=\"bottom\"],\n.mb-drop-overlay[data-zone=\"left\"],\n.mb-drop-overlay[data-zone=\"right\"] {\n  background: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));\n  border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));\n}\n\n/* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nhtml.mb-dragging iframe,\nhtml.mb-dragging webview {\n  pointer-events: none !important;\n}\n\n/* \u2500\u2500 Tab pop-out button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab-popout {\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-popout {\n  opacity: 0.7;\n}\n\n.mb-tab-popout:hover {\n  opacity: 1 !important;\n  background: var(--mb-adapt-button-hover-bg);\n}\n\n.mb-tab-popout svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* Hide pop-out button on main group (never floats), when overlay\n   has 0 or 1 total tabs (nothing to pop out), and when floating is disallowed. */\n.mb-group[data-main-group=\"true\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"0\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"1\"] .mb-tab-popout,\n.mb-group[data-allow-floating=\"false\"] .mb-tab-popout {\n  display: none !important;\n}\n\n\n/* \u2500\u2500 Iframe portal layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* MUST NOT create a stacking context \u2014 portal entries' z-indexes\n   must compete with floating overlays in the parent stacking context.\n   position: absolute + no z-index achieves this. */\n.mb-iframe-portal-layer {\n  position: absolute;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n.mb-iframe-portal {\n  position: fixed;\n  pointer-events: auto;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Touch device adjustments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (hover: none) {\n  .mb-tab-close {\n    opacity: 0.5;\n  }\n\n  .mb-tab-popout {\n    opacity: 0.5;\n  }\n\n  .mb-tab:hover .mb-tab-close,\n  .mb-tab:hover .mb-tab-popout {\n    opacity: 0.7;\n  }\n}\n\n@media (pointer: coarse) {\n  .mb-tab-close,\n  .mb-tab-popout {\n    width: 24px;\n    height: 24px;\n  }\n\n  .mb-adapt-fork-actions button {\n    width: 26px;\n    height: 26px;\n  }\n\n  .mb-adapt-minimized-tab-action {\n    width: 28px;\n    height: 28px;\n  }\n}";
+export declare const PANEL_MANAGER_CSS = "/* ==========================================================================\n   Mochabug Adapt Web \u2014 Combined Styles\n   Panel Manager CSS + Cap Widget CSS\n   ========================================================================== */\n\n:root { --mb-adapt-styles-loaded: 1; }\n\n/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  display: flex;\n  flex-direction: column;\n\n  /* Two-layer CSS variables: --_X reads user-set --mb-adapt-X first, falls back to light default */\n  --_bg: var(--mb-adapt-bg, transparent);\n  --_font: var(--mb-adapt-font, system-ui, -apple-system, sans-serif);\n  --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.2));\n  --_separator-active: var(--mb-adapt-separator-active, rgba(59, 130, 246, 0.5));\n  --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15));\n  --_floating-border: var(--mb-adapt-floating-border, none);\n  --_floating-backdrop: var(--mb-adapt-floating-backdrop, none);\n  --_floating-radius: var(--mb-adapt-floating-radius, 8px);\n  --_status-card-bg: var(--mb-adapt-status-card-bg, #ffffff);\n  --_status-card-border: var(--mb-adapt-status-card-border, #e5e7eb);\n  --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n  --_status-icon-bg: var(--mb-adapt-status-icon-bg, #fef2f2);\n  --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #f3f4f6));\n  --_status-text: var(--mb-adapt-status-text, #374151);\n  --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));\n  --_border-radius: var(--mb-adapt-border-radius, 8px);\n  --mb-adapt-responsive-breakpoint: 768;\n  --mb-adapt-responsive-hysteresis: 40;\n\n  /* Cap.js widget variables */\n  --_cap-background: var(--mb-adapt-cap-background, #ffffff);\n  --_cap-border-color: var(--mb-adapt-cap-border-color, #e2e8f0);\n  --_cap-border-radius: var(--mb-adapt-cap-border-radius, 16px);\n  --_cap-height: var(--mb-adapt-cap-height, 72px);\n  --_cap-width: var(--mb-adapt-cap-width, 380px);\n  --_cap-padding: var(--mb-adapt-cap-padding, 20px 28px);\n  --_cap-gap: var(--mb-adapt-cap-gap, 20px);\n  --_cap-color: var(--mb-adapt-cap-color, #1e293b);\n  --_cap-checkbox-size: var(--mb-adapt-cap-checkbox-size, 36px);\n  --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #cbd5e1);\n  --_cap-checkbox-radius: var(--mb-adapt-cap-checkbox-radius, 10px);\n  --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #f8fafc);\n  --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #6366f1);\n  --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #e2e8f0);\n  --_cap-font: var(--mb-adapt-cap-font, inherit);\n  --_cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness, 3px);\n  --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));\n  --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06));\n\n  /* Fork panel theming */\n  --_fork-bg: var(--mb-adapt-fork-bg, #ffffff);\n  --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #f3f3f3);\n  --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #ffffff);\n  --_fork-tab-color: var(--mb-adapt-fork-tab-color, rgb(51, 51, 51));\n  --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, rgba(51, 51, 51, 0.7));\n  --_fork-separator: var(--mb-adapt-fork-separator, rgba(128, 128, 128, 0.35));\n\n  /* Tab shape */\n  --_tab-radius: var(--mb-adapt-tab-radius, 0);\n  --_tab-shadow: var(--mb-adapt-tab-shadow, none);\n  --_tab-active-shadow: var(--mb-adapt-tab-active-shadow, none);\n  --_tab-gap: var(--mb-adapt-tab-gap, 0px);\n  --_tab-padding: var(--mb-adapt-tab-padding, 0 14px);\n  --_tab-font-size: var(--mb-adapt-tab-font-size, 13px);\n  --_tab-min-width: var(--mb-adapt-tab-min-width, 100px);\n  --_tab-spacing: var(--mb-adapt-tab-spacing, 6px);\n  --_toolbar-height: var(--mb-adapt-toolbar-height, 40px);\n  --_toolbar-padding: var(--mb-adapt-toolbar-padding, 0);\n\n  /* Drop targets \u2014 light defaults */\n  --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18));\n  --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));\n  --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));\n  --_drop-border: var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));\n\n  background: var(--_bg);\n}\n\n.mb-adapt--dark {\n  /* Cap.js widget dark mode */\n  --_cap-background: var(--mb-adapt-cap-background, #1e293b);\n  --_cap-border-color: var(--mb-adapt-cap-border-color, #334155);\n  --_cap-color: var(--mb-adapt-cap-color, #f1f5f9);\n  --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #475569);\n  --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #0f172a);\n  --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #818cf8);\n  --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #334155);\n  --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n  --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2));\n\n  /* Status card dark mode */\n  --_status-card-bg: var(--mb-adapt-status-card-bg, #1e293b);\n  --_status-card-border: var(--mb-adapt-status-card-border, #334155);\n  --_status-icon-bg: var(--mb-adapt-status-icon-bg, #351c1c);\n  --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #1e293b));\n  --_status-text: var(--mb-adapt-status-text, #e2e8f0);\n\n  /* Panel dark mode overrides */\n  --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.3));\n  --_separator-active: var(--mb-adapt-separator-active, rgba(99, 130, 246, 0.6));\n  --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3));\n  --_floating-border: var(--mb-adapt-floating-border, 1px solid rgba(255, 255, 255, 0.06));\n  --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));\n  --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.35));\n\n  /* Fork panel dark mode */\n  --_fork-bg: var(--mb-adapt-fork-bg, #1e1e1e);\n  --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #252526);\n  --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #1e1e1e);\n  --_fork-tab-color: var(--mb-adapt-fork-tab-color, #ffffff);\n  --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, #969696);\n  --_fork-separator: var(--mb-adapt-fork-separator, rgb(68, 68, 68));\n\n  /* Drop target dark mode */\n  --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(129, 140, 248, 0.22));\n  --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(129, 140, 248, 0.15));\n  --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(129, 140, 248, 0.18));\n  --_drop-border: var(--mb-adapt-drop-border, rgba(129, 140, 248, 0.6));\n}\n\n/* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-layout {\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  display: flex;\n}\n\n.mb-split-container {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n}\n\n.mb-split-horizontal { flex-direction: row; }\n.mb-split-vertical { flex-direction: column; }\n\n.mb-split-leaf {\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* Animated flex transition \u2014 applied temporarily during dock/undock/maximize */\n.mb-split-leaf--animating {\n  transition: flex 0.25s ease;\n}\n.mb-split-container--animating {\n  transition: flex 0.25s ease;\n}\n.mb-layout-separator--animating {\n  transition: opacity 0.25s ease;\n}\n\n/* Draggable separator between split panels */\n.mb-layout-separator {\n  flex: 0 0 5px;\n  background: var(--_fork-separator);\n  transition: background 0.15s;\n  position: relative;\n  z-index: 1;\n  touch-action: none;\n}\n\n.mb-layout-separator-v { cursor: col-resize; }\n.mb-layout-separator-h { cursor: row-resize; }\n\n.mb-layout-separator:hover,\n.mb-layout-separator--active {\n  background: var(--_separator-active);\n}\n\n/* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--_bg);\n}\n\n.mb-group-header {\n  display: flex;\n  align-items: stretch;\n  height: var(--_toolbar-height);\n  min-height: var(--_toolbar-height);\n  padding: var(--_toolbar-padding);\n  background: var(--_fork-tab-bg);\n  border-bottom: 1px solid var(--_fork-separator);\n  user-select: none;\n}\n\n.mb-group-header-prefix {\n  display: flex;\n  align-items: stretch;\n}\n\n.mb-group-tabs {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n  overflow-y: hidden;\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.mb-group-tabs::-webkit-scrollbar {\n  height: 2px;\n}\n\n/* Drag handle \u2014 fills remaining header space so the user can grab it */\n.mb-group-header-void {\n  flex: 1;\n  min-width: 40px;\n  touch-action: none;\n}\n\n.mb-group-header-actions {\n  display: flex;\n  align-items: center;\n}\n\n.mb-group-content {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--_fork-bg);\n}\n\n/* Main group overrides */\n.mb-group[data-main-group=\"true\"] {\n  background: var(--_bg);\n}\n\n.mb-group[data-main-group=\"true\"] .mb-group-content {\n  background: var(--_bg);\n}\n\n\n/* \u2500\u2500 Tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--_tab-spacing);\n  padding: var(--_tab-padding);\n  min-width: var(--_tab-min-width);\n  font-size: var(--_tab-font-size);\n  font-family: var(--_font);\n  white-space: nowrap;\n  cursor: pointer;\n  touch-action: none;\n  color: var(--_fork-tab-inactive-color);\n  background: var(--_fork-tab-bg);\n  border-right: 1px solid var(--_fork-separator);\n  border-radius: var(--_tab-radius);\n  box-shadow: var(--_tab-shadow);\n  margin: var(--_tab-gap);\n  transition: background 0.15s, box-shadow 0.15s;\n}\n\n.mb-tab[data-active=\"true\"] {\n  color: var(--_fork-tab-color);\n  background: var(--_fork-tab-active-bg);\n  box-shadow: var(--_tab-active-shadow);\n}\n\n.mb-tab:hover {\n  background: var(--_fork-tab-active-bg);\n}\n\n.mb-tab-label {\n  display: flex;\n  align-items: center;\n}\n\n.mb-tab-label svg {\n  width: 14px;\n  height: 14px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.mb-tab[data-active=\"true\"] .mb-tab-label svg {\n  opacity: 1;\n}\n\n.mb-tab-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  width: 40px;\n  flex-shrink: 0;\n  justify-content: flex-end;\n  margin-left: auto;\n}\n\n.mb-tab-close {\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-close {\n  opacity: 0.7;\n}\n\n.mb-tab-close:hover {\n  opacity: 1 !important;\n  background: var(--_button-hover-bg);\n}\n\n.mb-tab-close svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* \u2500\u2500 Panel visibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-panel {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.mb-panel[data-active=\"false\"] {\n  display: none;\n}\n\n.mb-panel[data-active=\"true\"] {\n  display: block;\n}\n\n/* \u2500\u2500 Floating overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-floating-overlay {\n  position: fixed;\n  z-index: 100000;\n  box-shadow: var(--_floating-shadow);\n  border: var(--_floating-border);\n  backdrop-filter: var(--_floating-backdrop);\n  -webkit-backdrop-filter: var(--_floating-backdrop);\n  border-radius: var(--_floating-radius);\n  display: flex;\n  flex-direction: column;\n  /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)\n     and would be clipped. The inner .mb-group already has overflow:hidden for\n     its own border-radius clipping. */\n}\n\n.mb-floating-overlay > .mb-group {\n  flex: 1;\n  border-radius: var(--_floating-radius);\n  overflow: hidden;\n}\n\n/* Internal split layout inside a floating overlay */\n.mb-floating-overlay > .mb-layout {\n  position: relative;\n  inset: auto;\n  height: auto;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  border-radius: var(--_floating-radius);\n  overflow: hidden;\n}\n\n.mb-floating-maximized {\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.mb-floating-maximized .mb-group {\n  border-radius: 0;\n}\n\n.mb-floating-maximized .mb-resize-handle {\n  display: none !important;\n}\n\n.mb-floating-maximized .mb-group-header-void {\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Resize handles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-resize-handle {\n  position: absolute;\n  z-index: 10;\n  touch-action: none;\n}\n\n.mb-resize-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }\n.mb-resize-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }\n.mb-resize-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }\n.mb-resize-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }\n.mb-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }\n.mb-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }\n.mb-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }\n.mb-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }\n\n/* \u2500\u2500 Iframe styling \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__iframe {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  border: 0;\n  display: block;\n  background: transparent;\n  border-radius: var(--_border-radius);\n  pointer-events: auto;\n  opacity: 0;\n  transition: opacity 0.1s ease-out;\n}\n\n.mb-adapt__iframe--visible {\n  opacity: 1;\n}\n\n.mb-adapt__iframe--hidden {\n  display: none;\n}\n\n/* \u2500\u2500 Status message overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt__status-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 200000;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mb-adapt__status-card {\n  pointer-events: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  padding: 32px 40px;\n  max-width: 380px;\n  border-radius: 16px;\n  background: var(--_status-card-bg);\n  border: 1px solid var(--_status-card-border);\n  box-shadow: var(--_status-card-shadow);\n  font-family: var(--_font);\n  text-align: center;\n}\n\n.mb-adapt__status-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--_status-icon-bg);\n}\n\n.mb-adapt__status-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n.mb-adapt__status-icon--stopped {\n  background: var(--_status-icon-stopped-bg);\n}\n\n.mb-adapt__status-text {\n  color: var(--_status-text);\n  font-size: 15px;\n  line-height: 1.5;\n  margin: 0;\n}\n\n.mb-adapt__status-restart {\n  padding: 8px 20px;\n  border: 1px solid var(--_status-card-border);\n  border-radius: 8px;\n  background: transparent;\n  color: var(--_status-text);\n  font-size: 14px;\n  font-weight: 500;\n  font-family: var(--_font);\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__status-restart:hover {\n  background: var(--_status-card-border);\n}\n\n/* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mb-adapt__confirm-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  z-index: 300000;\n  background: rgba(0, 0, 0, 0.4);\n  height: auto;\n  min-height: 0;\n}\n\n.mb-adapt--dark.mb-adapt__confirm-overlay {\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.mb-adapt__confirm-card {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 16px;\n  padding: 24px 28px;\n  max-width: 360px;\n  width: 100%;\n  border-radius: var(--_floating-radius);\n  background: var(--_fork-tab-active-bg);\n  border: 1px solid var(--_fork-separator);\n  box-shadow: var(--_floating-shadow);\n  font-family: var(--_font);\n  text-align: center;\n}\n\n.mb-adapt__confirm-text {\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--_fork-tab-color);\n  margin: 0;\n}\n\n.mb-adapt__confirm-buttons {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.mb-adapt__confirm-btn {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-family: var(--_font);\n  cursor: pointer;\n  font-weight: 500;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.mb-adapt__confirm-btn--cancel {\n  background: transparent;\n  border: 1px solid var(--_fork-separator);\n  color: var(--_fork-tab-color);\n}\n\n.mb-adapt__confirm-btn--cancel:hover {\n  background: var(--_button-hover-bg);\n}\n\n.mb-adapt__confirm-btn--confirm {\n  background: var(--_fork-tab-color);\n  color: var(--_fork-tab-active-bg);\n  border: 1px solid transparent;\n}\n\n.mb-adapt__confirm-btn--confirm:hover {\n  opacity: 0.85;\n}\n\n/* \u2500\u2500 Cap.js widget positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-cap {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 200000;\n}\n\n.mb-adapt-cap > * {\n  pointer-events: auto;\n}\n\n/* Cap.js widget styling */\n.mb-adapt cap-widget {\n  --cap-background: var(--_cap-background);\n  --cap-border-color: var(--_cap-border-color);\n  --cap-border-radius: var(--_cap-border-radius);\n  --cap-widget-height: var(--_cap-height);\n  --cap-widget-width: var(--_cap-width);\n  --cap-widget-padding: var(--_cap-padding);\n  --cap-gap: var(--_cap-gap);\n  --cap-color: var(--_cap-color);\n  --cap-checkbox-size: var(--_cap-checkbox-size);\n  --cap-checkbox-border: var(--_cap-checkbox-border);\n  --cap-checkbox-border-radius: var(--_cap-checkbox-radius);\n  --cap-checkbox-background: var(--_cap-checkbox-background);\n  --cap-checkbox-margin: 0;\n  --cap-font: var(--_cap-font);\n  --cap-spinner-color: var(--_cap-spinner-color);\n  --cap-spinner-background-color: var(--_cap-spinner-bg);\n  --cap-spinner-thickness: var(--_cap-spinner-thickness);\n}\n\n/* Hide Cap.js credits */\ncap-widget::part(attribution) {\n  display: none;\n}\n\n/* \u2500\u2500 Fork group action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-adapt-fork-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding-right: 4px;\n}\n.mb-adapt-fork-actions button {\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--_fork-tab-color);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0.7;\n  transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-fork-actions button:hover {\n  opacity: 1;\n  background: var(--_button-hover-bg);\n}\n.mb-adapt-fork-actions button svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* \u2500\u2500 Minimized-group tabs bar (at the top, NOT an overlay) \u2500\u2500\u2500 */\n/* Sits at the top of .mb-adapt as a normal flow element so the layout\n   underneath shrinks to accommodate it. This prevents scrollbars when\n   docked panels are minimized \u2014 the iframe gets the remaining height. */\n.mb-adapt-minimized-tabs {\n  display: none;\n  height: var(--_toolbar-height);\n  flex-shrink: 0;\n  z-index: 100;\n  align-items: stretch;\n  background: var(--_fork-tab-bg);\n  border-bottom: 1px solid var(--_fork-separator);\n  user-select: none;\n}\n.mb-adapt-minimized-tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 12px;\n  flex: 1;\n  background: var(--_fork-tab-bg);\n  color: var(--_fork-tab-color);\n  font-size: var(--_tab-font-size);\n  font-family: var(--_font);\n  white-space: nowrap;\n  border-right: 1px solid var(--_fork-separator);\n  cursor: default;\n}\n.mb-adapt-minimized-tab-label {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mb-adapt-minimized-tab-label svg {\n  width: 14px;\n  height: 14px;\n  opacity: 0.8;\n  flex-shrink: 0;\n}\n.mb-adapt-minimized-tab-action {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  opacity: 0.6;\n  transition: opacity 0.15s, background 0.15s;\n}\n.mb-adapt-minimized-tab-action:hover {\n  opacity: 1;\n  background: var(--_button-hover-bg);\n}\n.mb-adapt-minimized-tab-action svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Minimized tab drag handle cursor */\n.mb-adapt-minimized-tab {\n  cursor: grab;\n  touch-action: none;\n}\n\n/* Drop target highlight for minimized tab merge */\n.mb-adapt-minimized-tab--drop-target {\n  background: var(--_drop-header-bg) !important;\n  box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 999999;\n  padding: 4px 10px;\n  background: var(--_fork-tab-bg);\n  color: var(--_fork-tab-color);\n  border: 1px solid var(--_fork-separator);\n  border-radius: var(--_tab-radius, 4px);\n  font-size: var(--_tab-font-size);\n  font-family: var(--_font);\n  white-space: nowrap;\n  box-shadow: var(--_drag-ghost-shadow);\n  opacity: 0.92;\n  display: flex;\n  align-items: center;\n}\n\n.mb-drag-ghost svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-group-header--drop-target {\n  background: var(--_drop-header-bg) !important;\n  box-shadow: inset 0 0 0 2px var(--_drop-border);\n}\n\n/* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */\n.mb-drop-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 999998;\n  display: none;\n  box-sizing: border-box;\n  border-radius: 6px;\n  transition: opacity 0.1s ease-out;\n}\n\n.mb-drop-overlay[data-zone=\"center\"] {\n  background: var(--_drop-center-bg);\n  border: 2px solid var(--_drop-border);\n}\n\n.mb-drop-overlay[data-zone=\"top\"],\n.mb-drop-overlay[data-zone=\"bottom\"],\n.mb-drop-overlay[data-zone=\"left\"],\n.mb-drop-overlay[data-zone=\"right\"] {\n  background: var(--_drop-split-bg);\n  border: 2px solid var(--_drop-border);\n}\n\n/* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nhtml.mb-dragging iframe,\nhtml.mb-dragging webview {\n  pointer-events: none !important;\n}\n\n/* \u2500\u2500 Tab pop-out button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.mb-tab-popout {\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s;\n}\n\n.mb-tab:hover .mb-tab-popout {\n  opacity: 0.7;\n}\n\n.mb-tab-popout:hover {\n  opacity: 1 !important;\n  background: var(--_button-hover-bg);\n}\n\n.mb-tab-popout svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* Hide pop-out button on main group (never floats), when overlay\n   has 0 or 1 total tabs (nothing to pop out), and when floating is disallowed. */\n.mb-group[data-main-group=\"true\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"0\"] .mb-tab-popout,\n.mb-floating-overlay[data-total-tab-count=\"1\"] .mb-tab-popout,\n.mb-group[data-allow-floating=\"false\"] .mb-tab-popout {\n  display: none !important;\n}\n\n\n/* \u2500\u2500 Iframe portal layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* MUST NOT create a stacking context \u2014 portal entries' z-indexes\n   must compete with floating overlays in the parent stacking context.\n   position: absolute + no z-index achieves this. */\n.mb-iframe-portal-layer {\n  position: absolute;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n.mb-iframe-portal {\n  position: fixed;\n  pointer-events: auto;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 Touch device adjustments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (hover: none) {\n  .mb-tab-close {\n    opacity: 0.5;\n  }\n\n  .mb-tab-popout {\n    opacity: 0.5;\n  }\n\n  .mb-tab:hover .mb-tab-close,\n  .mb-tab:hover .mb-tab-popout {\n    opacity: 0.7;\n  }\n}\n\n@media (pointer: coarse) {\n  .mb-tab-close,\n  .mb-tab-popout {\n    width: 24px;\n    height: 24px;\n  }\n\n  .mb-adapt-fork-actions button {\n    width: 26px;\n    height: 26px;\n  }\n\n  .mb-adapt-minimized-tab-action {\n    width: 28px;\n    height: 28px;\n  }\n}";

package/dist/types/index.d.ts

@@ -1,8 +1,10 @@
 import { configure, resetConfig } from "@mochabug/adapt-core";
 import { createConnectClient } from "@mochabug/adapt-core/connect";
 import { IframePanelComponent, type IframePanelHost } from "./panel-setup.js";
+import { type AdaptTheme } from "./theme.js";
 import type { AdaptWebClientOptions } from "./types.js";
-export type { AdaptWebClientOptions, CapWidgetI18n, CapWidgetOptions, ChallengeInfo, ForkDisplay, Output, PersistOptions, RedeemedChallenge, SignalValue, StatusJson, StatusText, } from "./types.js";
+export type { AdaptTheme, AdaptWebClientOptions, CapWidgetI18n, CapWidgetOptions, ChallengeInfo, ForkDisplay, Output, PersistOptions, RedeemedChallenge, SignalValue, StatusJson, StatusText, } from "./types.js";
+export { resolveTheme } from "./theme.js";
 export type { SignalData } from "@mochabug/adapt-core";
 export { createConnectClient };
 export { configure, resetConfig };
@@ -71,6 +73,8 @@ export declare class AdaptWebClient implements IframePanelHost {
     /** Overlays that have already been auto-resized once (init only, no continuous resize). */
     private floatingAutoResized;
     private confirmOnClose;
+    private theme;
+    private _appliedThemeVars;
     private beforeUnloadHandler;
     private resizeObserver;
     private _autoMaximizedByResize;
@@ -108,6 +112,13 @@ export declare class AdaptWebClient implements IframePanelHost {
      * Set dark mode state and notify all iframes.
      */
     setDarkMode(darkMode: boolean): void;
+    /**
+     * Set the theme. Applies CSS custom properties derived from semantic tokens.
+     * Pass `undefined` to clear all theme overrides.
+     */
+    setTheme(theme: AdaptTheme | undefined): void;
+    private clearThemeVars;
+    private applyTheme;
     /**
      * Enable or disable auto-resizing based on iframe content height.
      */

package/dist/types/theme.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Theming system for AdaptAutomation.
+ *
+ * Two approaches:
+ * 1. CSS-only: set `--mb-adapt-*` variables on any ancestor element
+ * 2. JS theme prop: pass an `AdaptTheme` object for semantic token-based theming
+ *
+ * For advanced effects (animations, pseudo-elements, @keyframes), write standard
+ * CSS targeting the component's class names (e.g. `.mb-adapt .mb-group-header`).
+ * There is no Shadow DOM — all classes are in the light DOM.
+ */
+export interface AdaptTheme {
+    /** 'light' | 'dark' — controls dark mode class + shadow/border defaults */
+    mode?: "light" | "dark";
+    /** Primary/accent color — derives separator, drop target, status icon colors */
+    primary?: string;
+    /** Main background */
+    background?: string;
+    /** Surface color (panels, tabs, cards) */
+    surface?: string;
+    /** Primary text color */
+    text?: string;
+    /** Secondary/muted text */
+    textSecondary?: string;
+    /** Border/separator color */
+    border?: string;
+    /** Font family */
+    font?: string;
+    /**
+     * Direct CSS variable overrides — for complete customization.
+     * Keys are variable names WITHOUT the `--mb-adapt-` prefix.
+     * These override everything, including derived values from tokens above.
+     *
+     * @example { 'fork-tab-bg': '#1a1a2e', 'cap-spinner-color': '#ff0000' }
+     */
+    vars?: Record<string, string>;
+}
+/**
+ * Resolve a theme object into a map of `--mb-adapt-*` CSS custom properties.
+ * Semantic tokens are expanded to specific variables; `vars` overrides win last.
+ */
+export declare function resolveTheme(theme: AdaptTheme): Record<string, string>;

package/dist/types/types.d.ts

@@ -1,5 +1,7 @@
 import type { Output, SignalValue, StatusJson } from "@mochabug/adapt-core";
+import type { AdaptTheme } from "./theme.js";
 export type { Output, SignalValue, StatusJson } from "@mochabug/adapt-core";
+export type { AdaptTheme } from "./theme.js";
 /**
  * Options for session persistence across page refreshes.
  */
@@ -432,6 +434,29 @@ export interface AdaptWebClientOptions {
         /** Status card inside the overlay. Default: `'mb-adapt__status-card'` */
         statusCard?: string;
     };
+    /**
+     * Theme configuration for semantic theming.
+     * Applies CSS custom properties to the root element based on semantic tokens.
+     * Use `theme.vars` for direct per-variable overrides.
+     *
+     * @example
+     * ```typescript
+     * // Simple — match your brand
+     * theme: { primary: '#FFF700' }
+     *
+     * // Full design system
+     * theme: {
+     *   mode: 'dark',
+     *   primary: '#FFF700',
+     *   background: '#121212',
+     *   surface: '#1e1e1e',
+     *   text: '#fff',
+     *   border: 'rgba(255,255,255,0.12)',
+     *   font: 'Inter, sans-serif',
+     * }
+     * ```
+     */
+    theme?: AdaptTheme;
     /**
      * Inline styles to apply to the root element.
      * Useful for quick positioning or sizing adjustments.

package/dist/umd/adapt-web.cap.js

@@ -4324,7 +4324,7 @@ var MbAdapt = (() => {
   // src/cap-adapter.ts
   if (typeof window !== "undefined" && true && !window.CAP_CUSTOM_WASM_URL) {
     window.CAP_CUSTOM_WASM_URL = new URL(
-      "https://cdn.mochabug.com/adapt/web/1.0.1-rc.12/cap_wasm.js",
+      "https://cdn.mochabug.com/adapt/web/1.0.1-rc.13/cap_wasm.js",
       window.location.href
     ).href;
   }