@openpen/module-api 1.1.0 → 1.2.0

package/dist/uikit/module-api.css

@@ -0,0 +1,851 @@
+
+.openpen-popover-content {
+  background: var(--openpen-color-surface-popup);
+  border: 1px solid var(--openpen-color-popover-frame);
+  border-radius: var(--openpen-radius-lg);
+  padding: 14px 16px;
+  color: var(--openpen-color-text-primary);
+  font-size: 13px;
+  box-shadow: var(--openpen-shadow);
+  backdrop-filter: var(--openpen-blur);
+  -webkit-backdrop-filter: var(--openpen-blur);
+  z-index: 100;
+  /* Prevent pointer events from leaking through transparent gaps. */
+  pointer-events: auto;
+}
+.openpen-popover-arrow {
+  fill: var(--openpen-color-popover-frame);
+}
+
+/* ── Open / close animations ────────────────────────────────────────────────
+   Reka UI's Presence keeps the element in the DOM until the running CSS
+   animation ends, so animations targeting [data-state="closed"] DO play
+   on close. transform-origin tracks data-side so the popover scales out
+   from the trigger instead of from its own center.
+
+   Timings: 200ms easeOutBack enter, 150ms ease leave. */
+.openpen-popover-content[data-state='open'] {
+  animation: openpen-popover-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.openpen-popover-content[data-state='closed'] {
+  animation: openpen-popover-out 150ms ease forwards;
+}
+.openpen-popover-content[data-side='bottom'] { transform-origin: top center;
+}
+.openpen-popover-content[data-side='top']    { transform-origin: bottom center;
+}
+.openpen-popover-content[data-side='left']   { transform-origin: right center;
+}
+.openpen-popover-content[data-side='right']  { transform-origin: left center;
+}
+@keyframes openpen-popover-in {
+from { opacity: 0; transform: scale(0.92);
+}
+to   { opacity: 1; transform: scale(1);
+}
+}
+@keyframes openpen-popover-out {
+from { opacity: 1; transform: scale(1);
+}
+to   { opacity: 0; transform: scale(0.92);
+}
+}
+
+/* ── Root container ────────────────────────────────────────────────────────── */
+.app-slider-root[data-v-946ec6af] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.app-slider-root[data-orientation='horizontal'][data-v-946ec6af] {
+  height: var(--track-height, 4px);
+}
+.app-slider-root[data-orientation='vertical'][data-v-946ec6af] {
+  flex-direction: column;
+  width: var(--track-height, 4px);
+}
+
+/* ── Track ─────────────────────────────────────────────────────────────────── */
+.app-slider-track[data-v-946ec6af] {
+  position: relative;
+  flex-grow: 1;
+  border-radius: var(--track-radius, 2px);
+  background: var(--openpen-color-border-hi);
+}
+.app-slider-root[data-orientation='horizontal'] .app-slider-track[data-v-946ec6af] {
+  height: var(--track-height, 4px);
+}
+.app-slider-root[data-orientation='vertical'] .app-slider-track[data-v-946ec6af] {
+  width: var(--track-height, 4px);
+}
+
+/* ── Range (filled portion) ─────────────────────────────────────────────────── */
+.app-slider-range[data-v-946ec6af] {
+  position: absolute;
+  border-radius: var(--track-radius, 2px);
+  background: var(--openpen-color-accent);
+}
+.app-slider-root[data-orientation='horizontal'] .app-slider-range[data-v-946ec6af] {
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.app-slider-root[data-orientation='vertical'] .app-slider-range[data-v-946ec6af] {
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}
+
+/* ── Thumb ─────────────────────────────────────────────────────────────────── */
+.app-slider-thumb[data-v-946ec6af] {
+  display: block;
+  width: var(--thumb-w, 14px);
+  height: var(--thumb-h, 14px);
+  border-radius: var(--thumb-r, 50%);
+  background: #fff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.50);
+  cursor: pointer;
+  outline: none;
+  transition: transform var(--openpen-duration-fast) var(--openpen-easing-standard);
+}
+.app-slider-thumb[data-v-946ec6af]:hover {
+  transform: scale(1.2);
+}
+.app-slider-thumb[data-v-946ec6af]:focus-visible {
+  box-shadow: 0 0 0 3px var(--openpen-color-accent-glow);
+}
+
+/* Root — the toggle track */
+.app-toggle[data-v-3bad8ac7] {
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  background: var(--openpen-color-toggle-off);
+  transition: background var(--openpen-duration-base) var(--openpen-easing-standard);
+  /* Remove default button styles */
+  padding: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+}
+.app-toggle.on[data-v-3bad8ac7] {
+  background: var(--openpen-color-accent);
+}
+
+/* Thumb — the white circular knob */
+.app-toggle-thumb[data-v-3bad8ac7] {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  transition: left var(--openpen-duration-bounce) var(--openpen-easing-bounce);
+  display: block;
+  pointer-events: none;
+}
+.app-toggle.on .app-toggle-thumb[data-v-3bad8ac7],
+.app-toggle[data-state='checked'] .app-toggle-thumb[data-v-3bad8ac7] {
+  left: 19px;
+}
+
+.app-seg[data-v-a0348ad4] {
+  display: flex;
+  gap: var(--openpen-space-xs);
+}
+.app-seg-btn[data-v-a0348ad4] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px var(--openpen-space-lg);
+  border: 1.5px solid var(--openpen-color-border-hi);
+  border-radius: var(--openpen-radius-sm);
+  background: var(--openpen-color-input-bg);
+  color: var(--openpen-color-text-dim);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background var(--openpen-duration-fast) var(--openpen-easing-standard),
+    color var(--openpen-duration-fast) var(--openpen-easing-standard),
+    border-color var(--openpen-duration-fast) var(--openpen-easing-standard);
+}
+.app-seg-icon[data-v-a0348ad4] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.app-seg-btn[data-v-a0348ad4]:hover {
+  color: var(--openpen-color-text-primary);
+  background: var(--openpen-color-control-hover);
+}
+.app-seg-btn.active[data-v-a0348ad4] {
+  background: var(--openpen-color-accent-bg);
+  color: var(--openpen-color-accent);
+  border-color: color-mix(in srgb, var(--openpen-color-accent) 40%, transparent);
+}
+.app-seg--disabled[data-v-a0348ad4] {
+  opacity: 0.45;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* ── Overlay (transparent click absorber, NOT a dim backdrop) ─────────────────
+   OpenPen's overlay window is transparent + frameless. A traditional dim/blur
+   backdrop renders as a small dark patch only over the visible chrome — visually
+   jarring. The overlay is therefore kept fully transparent here; its only job
+   is to absorb outside clicks (so Reka can dispatch interact-outside → close
+   when not persistent) and to protect the canvas from stray clicks while the
+   dialog is open. Host containers (e.g. ControlBar) render their own "locked"
+   visual state via HOST_DIALOG_OPEN_COUNT_KEY. */
+.openpen-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  z-index: 200;
+  pointer-events: auto;
+}
+
+/* ── Dialog content panel ────────────────────────────────────────────────── */
+.openpen-modal-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 201;
+  min-width: 320px;
+  max-width: min(480px, calc(100vw - 48px));
+  max-height: calc(100vh - 96px);
+  overflow-y: auto;
+
+  background: var(--openpen-color-surface-popup);
+  border: 1px solid var(--openpen-color-border-hi);
+  border-radius: var(--openpen-radius-lg);
+  box-shadow: var(--openpen-shadow);
+  backdrop-filter: var(--openpen-blur);
+  -webkit-backdrop-filter: var(--openpen-blur);
+
+  color: var(--openpen-color-text-primary);
+  font-size: 13px;
+  padding: var(--openpen-space-lg);
+  pointer-events: auto;
+}
+
+/* ── Title ───────────────────────────────────────────────────────────────── */
+.openpen-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--openpen-color-text-primary);
+  margin: 0 0 var(--openpen-space-md) 0;
+  padding-right: 28px; /* leave room for close button */
+  line-height: 1.4;
+}
+
+/* ── Visually hidden description (a11y) ──────────────────────────────────── */
+.openpen-modal-description.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ── Body ────────────────────────────────────────────────────────────────── */
+.openpen-modal-body {
+  color: var(--openpen-color-text-primary);
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────────── */
+.openpen-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--openpen-space-sm);
+  margin-top: var(--openpen-space-lg);
+  padding-top: var(--openpen-space-md);
+  border-top: 1px solid var(--openpen-color-border);
+}
+
+/* ── Close button ────────────────────────────────────────────────────────── */
+.openpen-modal-close {
+  position: absolute;
+  top: var(--openpen-space-md);
+  right: var(--openpen-space-md);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--openpen-color-text-dim);
+  border-radius: var(--openpen-radius-sm);
+  cursor: pointer;
+  transition: background var(--openpen-duration-fast), color var(--openpen-duration-fast);
+}
+.openpen-modal-close:hover {
+  background: var(--openpen-color-control-hover);
+  color: var(--openpen-color-text-primary);
+}
+
+/* ── Open / close animations ─────────────────────────────────────────────────
+   Reka UI's Presence keeps the element in the DOM until the CSS animation
+   ends, so [data-state="closed"] animations DO play on close.
+   Pattern matches AppPopover keyframes (200ms bounce enter, 150ms ease leave). */
+
+/* Overlay is always transparent — no fade-in/out animation needed.
+   Only the dialog content panel animates. */
+.openpen-modal-content[data-state='open'] {
+  animation: openpen-modal-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.openpen-modal-content[data-state='closed'] {
+  animation: openpen-modal-out 150ms ease forwards;
+}
+@keyframes openpen-modal-in {
+from { opacity: 0; transform: translate(-50%, -50%) scale(0.92);
+}
+to   { opacity: 1; transform: translate(-50%, -50%) scale(1);
+}
+}
+@keyframes openpen-modal-out {
+from { opacity: 1; transform: translate(-50%, -50%) scale(1);
+}
+to   { opacity: 0; transform: translate(-50%, -50%) scale(0.92);
+}
+}
+
+/* ── Trigger ─────────────────────────────────────────────────────────────── */
+.openpen-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--openpen-space-sm);
+  min-width: 120px;
+  height: 32px;
+  padding: 0 var(--openpen-space-md);
+  background: var(--openpen-color-input-bg);
+  border: 1px solid var(--openpen-color-border-hi);
+  border-radius: var(--openpen-radius-md);
+  color: var(--openpen-color-text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    background var(--openpen-duration-fast),
+    border-color var(--openpen-duration-fast);
+  outline: none;
+  white-space: nowrap;
+  user-select: none;
+}
+.openpen-select-trigger:hover {
+  background: var(--openpen-color-control-hover);
+  border-color: var(--openpen-color-border-hi);
+}
+.openpen-select-trigger:focus-visible {
+  border-color: var(--openpen-color-accent);
+  box-shadow: 0 0 0 2px var(--openpen-color-accent-glow);
+}
+.openpen-select-trigger[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ── Trigger icon (chevron) ──────────────────────────────────────────────── */
+.openpen-select-icon {
+  color: var(--openpen-color-text-dim);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  transition: transform var(--openpen-duration-fast);
+}
+.openpen-select-trigger[data-state='open'] .openpen-select-icon {
+  transform: rotate(180deg);
+}
+
+/* ── Dropdown content ────────────────────────────────────────────────────── */
+.openpen-select-content {
+  background: var(--openpen-color-surface-popup);
+  border: 1px solid var(--openpen-color-border-hi);
+  border-radius: var(--openpen-radius-md);
+  box-shadow: var(--openpen-shadow);
+  backdrop-filter: var(--openpen-blur);
+  -webkit-backdrop-filter: var(--openpen-blur);
+  z-index: 100;
+  pointer-events: auto;
+  /* Match trigger width */
+  min-width: var(--reka-select-trigger-width, 120px);
+  max-height: 240px;
+  overflow: hidden;
+}
+
+/* ── Viewport scrollable area ────────────────────────────────────────────── */
+.openpen-select-viewport {
+  padding: var(--openpen-space-xs);
+}
+
+/* ── Individual items ────────────────────────────────────────────────────── */
+.openpen-select-item {
+  display: flex;
+  align-items: center;
+  gap: var(--openpen-space-sm);
+  height: 30px;
+  padding: 0 var(--openpen-space-md);
+  padding-left: 28px; /* indent to align text past indicator */
+  border-radius: var(--openpen-radius-sm);
+  font-size: 13px;
+  color: var(--openpen-color-text-primary);
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  outline: none;
+  transition: background var(--openpen-duration-fast);
+}
+.openpen-select-item[data-highlighted] {
+  background: var(--openpen-color-control-hover);
+  color: var(--openpen-color-text-primary);
+}
+.openpen-select-item[data-state='checked'] {
+  color: var(--openpen-color-accent);
+}
+.openpen-select-item[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ── Selected item indicator (checkmark) ─────────────────────────────────── */
+.openpen-select-item-indicator {
+  position: absolute;
+  left: var(--openpen-space-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--openpen-color-accent);
+}
+
+/* ── Open / close animations ─────────────────────────────────────────────────
+   Pattern matches AppPopover keyframes (200ms bounce enter, 150ms ease leave). */
+.openpen-select-content[data-state='open'] {
+  animation: openpen-select-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.openpen-select-content[data-state='closed'] {
+  animation: openpen-select-out 150ms ease forwards;
+}
+@keyframes openpen-select-in {
+from { opacity: 0; transform: scale(0.95);
+}
+to   { opacity: 1; transform: scale(1);
+}
+}
+@keyframes openpen-select-out {
+from { opacity: 1; transform: scale(1);
+}
+to   { opacity: 0; transform: scale(0.95);
+}
+}
+
+.openpen-tooltip-content {
+  background: var(--openpen-color-tooltip-bg);
+  border: 1px solid var(--openpen-color-border-hi);
+  border-radius: var(--openpen-radius-sm);
+  padding: 5px 9px;
+  color: var(--openpen-color-tooltip-text);
+  font-size: 12px;
+  line-height: 1.4;
+  /* Prevent text wrap for short tooltip labels */
+  white-space: nowrap;
+  box-shadow: var(--openpen-shadow-sm);
+  z-index: 200;
+  pointer-events: none;
+}
+.openpen-tooltip-arrow {
+  fill: var(--openpen-color-tooltip-bg);
+}
+
+/* ── Open / close animations ────────────────────────────────────────────────
+   Reka UI Presence keeps the element in the DOM until the CSS animation ends,
+   so data-state="delayed-open" / "instant-open" / "closed" all animate. */
+.openpen-tooltip-content[data-state='delayed-open'],
+.openpen-tooltip-content[data-state='instant-open'] {
+  animation: openpen-tooltip-in var(--openpen-duration-fast) var(--openpen-easing-standard);
+}
+.openpen-tooltip-content[data-state='closed'] {
+  animation: openpen-tooltip-out var(--openpen-duration-fast) ease forwards;
+}
+@keyframes openpen-tooltip-in {
+from { opacity: 0; transform: scale(0.95);
+}
+to   { opacity: 1; transform: scale(1);
+}
+}
+@keyframes openpen-tooltip-out {
+from { opacity: 1; transform: scale(1);
+}
+to   { opacity: 0; transform: scale(0.95);
+}
+}
+
+/* ── Tab root ───────────────────────────────────────────────────────────────── */
+.openpen-tabs[data-v-5bab1555] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--openpen-space-sm);
+}
+
+/* ── Tab list (trigger bar) ─────────────────────────────────────────────────── */
+.openpen-tabs-list[data-v-5bab1555] {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  padding: 3px;
+  background: var(--openpen-color-control-group);
+  border: 1px solid var(--openpen-color-border);
+  border-radius: var(--openpen-radius-md);
+}
+
+/* ── Individual trigger ─────────────────────────────────────────────────────── */
+.openpen-tabs-trigger[data-v-5bab1555] {
+  flex: 1;
+  padding: var(--openpen-space-xs) var(--openpen-space-sm);
+  border: none;
+  border-radius: calc(var(--openpen-radius-md) - 3px);
+  background: transparent;
+  color: var(--openpen-color-text-dim);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background var(--openpen-duration-fast) var(--openpen-easing-standard),
+    color var(--openpen-duration-fast) var(--openpen-easing-standard);
+  white-space: nowrap;
+  /* Remove default button outline; focus-visible ring below handles a11y. */
+  outline: none;
+}
+.openpen-tabs-trigger[data-v-5bab1555]:hover {
+  background: var(--openpen-color-control-hover);
+  color: var(--openpen-color-text-primary);
+}
+.openpen-tabs-trigger[data-state='active'][data-v-5bab1555] {
+  background: var(--openpen-color-accent-bg);
+  color: var(--openpen-color-accent);
+  box-shadow: 0 0 0 1px var(--openpen-color-accent-glow);
+}
+.openpen-tabs-trigger[data-v-5bab1555]:focus-visible {
+  box-shadow: 0 0 0 2px var(--openpen-color-accent);
+}
+
+/* ── Tab content ────────────────────────────────────────────────────────────── */
+.openpen-tabs-content[data-v-5bab1555] {
+  /* Content area has no chrome by default; plugin authors add their own. */
+  outline: none;
+}
+.openpen-tabs-content[data-v-5bab1555]:focus-visible {
+  box-shadow: 0 0 0 2px var(--openpen-color-accent);
+  border-radius: var(--openpen-radius-sm);
+}
+
+.app-banner[data-v-c68deb55] {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: var(--openpen-radius-md, 10px);
+  border: 1px solid;
+  font-size: 13px;
+  line-height: 1.55;
+}
+.app-banner-inline[data-v-c68deb55] {
+  padding: 7px 12px;
+  align-items: center;
+  font-size: 12px;
+}
+.app-banner-icon[data-v-c68deb55] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-top: 1px;
+}
+.app-banner-inline .app-banner-icon[data-v-c68deb55] { margin-top: 0;
+}
+.app-banner-body[data-v-c68deb55] {
+  flex: 1;
+  min-width: 0;
+}
+.app-banner-actions[data-v-c68deb55] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Variants */
+.app-banner-info[data-v-c68deb55] {
+  background: var(--openpen-color-state-info-bg);
+  border-color: var(--openpen-color-state-info-border);
+  color: var(--openpen-color-state-info-text);
+}
+.app-banner-info .app-banner-icon[data-v-c68deb55] {
+  color: var(--openpen-color-state-info-icon);
+}
+.app-banner-warning[data-v-c68deb55] {
+  background: var(--openpen-color-state-warning-bg);
+  border-color: var(--openpen-color-state-warning-border);
+  color: var(--openpen-color-state-warning-text);
+}
+.app-banner-warning .app-banner-icon[data-v-c68deb55] {
+  color: var(--openpen-color-state-warning-icon);
+}
+.app-banner-success[data-v-c68deb55] {
+  background: var(--openpen-color-state-success-bg);
+  border-color: var(--openpen-color-state-success-border);
+  color: var(--openpen-color-state-success-text);
+}
+.app-banner-success .app-banner-icon[data-v-c68deb55] {
+  color: var(--openpen-color-state-success-icon);
+}
+.app-banner-error[data-v-c68deb55] {
+  background: var(--openpen-color-state-error-bg);
+  border-color: var(--openpen-color-state-error-border);
+  color: var(--openpen-color-state-error-text);
+}
+.app-banner-error .app-banner-icon[data-v-c68deb55] {
+  color: var(--openpen-color-state-error-icon);
+}
+
+.app-btn[data-v-2d853b64] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: var(--openpen-radius-md);
+  background: transparent;
+  color: var(--openpen-color-text-dim);
+  cursor: pointer;
+  transition: background var(--openpen-duration-fast), color var(--openpen-duration-fast), transform var(--openpen-duration-fast);
+  position: relative;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+/* Vertical bars shrink the button to 34×34 to match the host's
+   `.control-bar.is-vertical .cb-btn` rule. */
+.app-btn.app-btn--vertical[data-v-2d853b64] {
+  width: 34px;
+  height: 34px;
+}
+.app-btn[data-v-2d853b64]:hover {
+  background: var(--openpen-color-control-hover);
+  color: var(--openpen-color-text-primary);
+}
+.app-btn[data-v-2d853b64]:active {
+  transform: scale(0.88);
+}
+.app-btn.active[data-v-2d853b64] {
+  background: var(--openpen-color-accent-bg);
+  color: var(--openpen-color-accent);
+  box-shadow: 0 0 0 1px var(--openpen-color-accent-glow);
+}
+.app-btn.danger[data-v-2d853b64] {
+  color: var(--openpen-color-danger);
+}
+.app-btn.danger[data-v-2d853b64]:hover {
+  background: var(--openpen-color-danger-hover-bg);
+  color: var(--openpen-color-danger-hover);
+}
+
+/* Disabled: keeps pointer events alive so the tooltip ::after hover still fires. */
+.app-btn.app-btn-disabled[data-v-2d853b64] {
+  cursor: not-allowed;
+}
+
+/* Dim only the button content — tooltip pseudo-element stays at full opacity. */
+.app-btn.app-btn-disabled[data-v-2d853b64] > * {
+  opacity: 0.30;
+}
+
+/* Tooltip — horizontal mode default (above the button). */
+.app-btn[data-tip][data-v-2d853b64]::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--openpen-color-tooltip-bg);
+  border: 1px solid var(--openpen-color-tooltip-border);
+  color: var(--openpen-color-tooltip-text);
+  font-size: 11.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  padding: 5px 10px;
+  border-radius: var(--openpen-radius-sm);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--openpen-duration-fast);
+  box-shadow: var(--openpen-shadow-sm);
+  z-index: 41;
+}
+
+/* Horizontal mode near workArea top: tooltip flips below the button so
+   it does not extend off-screen. The host sets TOOLTIP_FLIP_DOWN_KEY when
+   the ball is within ~60 px of the top edge. */
+.app-btn.app-btn--tooltip-top-flip[data-tip][data-v-2d853b64]::after {
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+
+/* Vertical bar, snap-left or vbar-free: tooltip points right (inward). */
+.app-btn.app-btn--tooltip-right[data-tip][data-v-2d853b64]::after {
+  top: 50%;
+  bottom: auto;
+  left: calc(100% + 8px);
+  right: auto;
+  transform: translateY(-50%);
+}
+
+/* Vertical bar, snap-right: tooltip points left (inward). */
+.app-btn.app-btn--tooltip-left[data-tip][data-v-2d853b64]::after {
+  top: 50%;
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+.app-btn[data-tip][data-v-2d853b64]:hover::after {
+  opacity: 1;
+}
+
+/* Structural classes ship UNSCOPED on purpose so host CSS can apply
+   contextual overrides (e.g. `.cb-group--inset .app-btn-dropdown-caret`
+   shrinks the caret inside inset groups in the host control bar). The
+   classes are deliberately prefixed `app-btn-dropdown-*` to avoid
+   collisions in plugin code. */
+.app-btn-dropdown-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  -webkit-app-region: no-drag;
+}
+.app-btn-dropdown-wrap--vertical {
+  flex-direction: column;
+  gap: 2px;
+}
+.app-btn-dropdown-caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  color: var(--openpen-color-text-dim);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 8px;
+  transition: color var(--openpen-duration-fast), background var(--openpen-duration-fast);
+}
+.app-btn-dropdown-caret--vertical {
+  width: 30px;
+  height: 14px;
+}
+.app-btn-dropdown-caret:hover {
+  color: var(--openpen-color-text-primary);
+  background: var(--openpen-color-control-hover);
+}
+.app-btn-dropdown-caret.active {
+  color: var(--openpen-color-accent);
+  background: var(--openpen-color-accent-bg);
+}
+.app-btn-dropdown-caret--disabled {
+  cursor: not-allowed;
+}
+.app-btn-dropdown-caret--disabled > * {
+  opacity: 0.30;
+}
+.app-btn-dropdown-caret-icon {
+  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.app-btn-dropdown-caret-icon--down { transform: rotate(0deg);
+}
+.app-btn-dropdown-caret-icon--up { transform: rotate(180deg);
+}
+.app-btn-dropdown-caret-icon--right { transform: rotate(-90deg);
+}
+.app-btn-dropdown-caret-icon--left { transform: rotate(90deg);
+}
+
+/* ── DialogHost utility styles ───────────────────────────────────────────── */
+.openpen-dialog-host-message {
+  margin: 0 0 var(--openpen-space-md, 12px) 0;
+  color: var(--openpen-color-text-primary, #fff);
+  line-height: 1.5;
+}
+.openpen-dialog-host-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border: 1px solid var(--openpen-color-border-hi, rgba(255,255,255,0.2));
+  border-radius: var(--openpen-radius-sm, 6px);
+  background: var(--openpen-color-control, rgba(255,255,255,0.08));
+  color: var(--openpen-color-text-primary, #fff);
+  font-size: 13px;
+  outline: none;
+}
+.openpen-dialog-host-input:focus {
+  border-color: var(--accent, #7c7cff);
+  box-shadow: 0 0 0 2px var(--accent-bg, rgba(124,124,255,0.18));
+}
+
+/* ── DialogHost button styles ─────────────────────────────────────────────── */
+.openpen-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 16px;
+  border-radius: var(--openpen-radius-sm, 6px);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background var(--openpen-duration-fast, 120ms), color var(--openpen-duration-fast, 120ms);
+}
+.openpen-btn-secondary {
+  background: var(--openpen-color-control, rgba(255,255,255,0.08));
+  color: var(--openpen-color-text-primary, #fff);
+}
+.openpen-btn-secondary:hover {
+  background: var(--openpen-color-control-hover, rgba(255,255,255,0.14));
+}
+.openpen-btn-primary {
+  background: var(--accent, #7c7cff);
+  color: #fff;
+}
+.openpen-btn-primary:hover {
+  opacity: 0.9;
+}
+.openpen-btn-danger {
+  background: var(--openpen-color-danger, #e05252);
+  color: #fff;
+}
+.openpen-btn-danger:hover {
+  opacity: 0.9;
+}