@openpen/module-api 1.2.0 → 1.4.0

package/dist/uikit/module-api.css

@@ -17,6 +17,16 @@
   fill: var(--openpen-color-popover-frame);
 }
 
+/* A popover that holds an AppPopoverPanel takes the host popup-panel frame:
+   border-hi frame and the small shadow. Other popovers keep the default frame. */
+.openpen-popover-content:has(.openpen-popover-panel) {
+  border-color: var(--openpen-color-border-hi);
+  box-shadow: var(--openpen-shadow-sm);
+}
+.openpen-popover-content:has(.openpen-popover-panel) .openpen-popover-arrow {
+  fill: var(--openpen-color-border-hi);
+}
+
 /* ── 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
@@ -51,8 +61,88 @@ to   { opacity: 0; transform: scale(0.92);
 }
 }
 
+.openpen-popover-panel[data-v-ffa56c48] {
+  /*
+   * Three shared columns for every row in the panel (rows use `subgrid`):
+   * label (as wide as the widest label), control (takes the rest), value
+   * (optional; zero width when no row has one). The 10px between columns is
+   * put on the label and value cells instead of a column gap so an unused
+   * value column leaves no empty space at the right edge.
+   */
+  display: grid;
+  grid-template-columns: auto minmax(140px, 1fr) auto;
+  align-items: center;
+  row-gap: 10px;
+  column-gap: 0;
+}
+.openpen-popover-title[data-v-ffa56c48] {
+  grid-column: 1 / -1;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--openpen-color-text-muted);
+  margin-bottom: 6px;
+}
+
+.openpen-popover-row[data-v-6d95e79e] {
+  /* Join the panel's label / control / value columns so every row lines up. */
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: center;
+}
+
+/* A row without a label (buttons, a segmented control) spans all columns. */
+.openpen-popover-row--bare[data-v-6d95e79e] {
+  display: flex;
+  gap: 10px;
+}
+
+/*
+ * Third child = optional value text: right-aligned, equal digit width, never
+ * narrower than 5ch so the control does not move while a number gains a digit.
+ * (Slider values belong in the AppSlider bubble, not here.)
+ */
+.openpen-popover-row[data-v-6d95e79e] >  *:nth-child(3) {
+  justify-self: end;
+  min-width: 5ch;
+  margin-left: 10px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.openpen-popover-row-label[data-v-6d95e79e] {
+  margin-right: 10px;
+  font-size: 13px;
+  color: var(--openpen-color-text-dim);
+  white-space: nowrap;
+}
+
+/* A segmented control placed in a row takes the remaining width. */
+.openpen-popover-row[data-v-6d95e79e] .app-seg {
+  flex: 1;
+}
+
+/* ── Value bubble (shown while dragging) ───────────────────────────────────── */
+.app-slider-bubble[data-v-49f1dd0d] {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: var(--openpen-radius-sm);
+  background: var(--openpen-color-tooltip-bg);
+  color: var(--openpen-color-tooltip-text);
+  border: 1px solid var(--openpen-color-tooltip-border);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+}
+
 /* ── Root container ────────────────────────────────────────────────────────── */
-.app-slider-root[data-v-946ec6af] {
+.app-slider-root[data-v-49f1dd0d] {
   position: relative;
   display: flex;
   align-items: center;
@@ -61,47 +151,47 @@ to   { opacity: 0; transform: scale(0.92);
   flex-shrink: 0;
   cursor: pointer;
 }
-.app-slider-root[data-orientation='horizontal'][data-v-946ec6af] {
+.app-slider-root[data-orientation='horizontal'][data-v-49f1dd0d] {
   height: var(--track-height, 4px);
 }
-.app-slider-root[data-orientation='vertical'][data-v-946ec6af] {
+.app-slider-root[data-orientation='vertical'][data-v-49f1dd0d] {
   flex-direction: column;
   width: var(--track-height, 4px);
 }
 
 /* ── Track ─────────────────────────────────────────────────────────────────── */
-.app-slider-track[data-v-946ec6af] {
+.app-slider-track[data-v-49f1dd0d] {
   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] {
+.app-slider-root[data-orientation='horizontal'] .app-slider-track[data-v-49f1dd0d] {
   height: var(--track-height, 4px);
 }
-.app-slider-root[data-orientation='vertical'] .app-slider-track[data-v-946ec6af] {
+.app-slider-root[data-orientation='vertical'] .app-slider-track[data-v-49f1dd0d] {
   width: var(--track-height, 4px);
 }
 
 /* ── Range (filled portion) ─────────────────────────────────────────────────── */
-.app-slider-range[data-v-946ec6af] {
+.app-slider-range[data-v-49f1dd0d] {
   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] {
+.app-slider-root[data-orientation='horizontal'] .app-slider-range[data-v-49f1dd0d] {
   height: 100%;
   top: 0;
   left: 0;
 }
-.app-slider-root[data-orientation='vertical'] .app-slider-range[data-v-946ec6af] {
+.app-slider-root[data-orientation='vertical'] .app-slider-range[data-v-49f1dd0d] {
   width: 100%;
   bottom: 0;
   left: 0;
 }
 
 /* ── Thumb ─────────────────────────────────────────────────────────────────── */
-.app-slider-thumb[data-v-946ec6af] {
+.app-slider-thumb[data-v-49f1dd0d] {
   display: block;
   width: var(--thumb-w, 14px);
   height: var(--thumb-h, 14px);
@@ -112,15 +202,15 @@ to   { opacity: 0; transform: scale(0.92);
   outline: none;
   transition: transform var(--openpen-duration-fast) var(--openpen-easing-standard);
 }
-.app-slider-thumb[data-v-946ec6af]:hover {
+.app-slider-thumb[data-v-49f1dd0d]:hover {
   transform: scale(1.2);
 }
-.app-slider-thumb[data-v-946ec6af]:focus-visible {
+.app-slider-thumb[data-v-49f1dd0d]:focus-visible {
   box-shadow: 0 0 0 3px var(--openpen-color-accent-glow);
 }
 
 /* Root — the toggle track */
-.app-toggle[data-v-3bad8ac7] {
+.app-toggle[data-v-a8ed9b2b] {
   width: 40px;
   height: 24px;
   border-radius: 12px;
@@ -137,12 +227,12 @@ to   { opacity: 0; transform: scale(0.92);
   display: inline-flex;
   align-items: center;
 }
-.app-toggle.on[data-v-3bad8ac7] {
+.app-toggle.on[data-v-a8ed9b2b] {
   background: var(--openpen-color-accent);
 }
 
 /* Thumb — the white circular knob */
-.app-toggle-thumb[data-v-3bad8ac7] {
+.app-toggle-thumb[data-v-a8ed9b2b] {
   position: absolute;
   top: 3px;
   left: 3px;
@@ -155,56 +245,208 @@ to   { opacity: 0; transform: scale(0.92);
   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] {
+.app-toggle.on .app-toggle-thumb[data-v-a8ed9b2b],
+.app-toggle[data-state='checked'] .app-toggle-thumb[data-v-a8ed9b2b] {
   left: 19px;
 }
 
-.app-seg[data-v-a0348ad4] {
+.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);
+}
+}
+
+.app-seg[data-v-a90b77a6] {
   display: flex;
-  gap: var(--openpen-space-xs);
+  gap: 0;
+  padding: 2px;
+  border-radius: var(--openpen-radius-sm);
+  background: var(--openpen-color-input-bg);
+  border: 1px solid var(--openpen-color-border);
 }
-.app-seg-btn[data-v-a0348ad4] {
+
+/* One focus frame around the whole group (2px, 2px away). */
+.app-seg[data-v-a90b77a6]:focus-within {
+  /* !important: Reka's roving-focus group writes an inline `outline: none` on this element. */
+  outline: 2px solid var(--openpen-color-accent) !important;
+  outline-offset: 2px;
+}
+.app-seg-btn[data-v-a90b77a6] {
   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);
+  padding: 5px var(--openpen-space-md);
+  border: 1px solid transparent;
+  border-radius: calc(var(--openpen-radius-sm) - 2px);
+  background: transparent;
   color: var(--openpen-color-text-dim);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
+  outline: none;
   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);
+    box-shadow var(--openpen-duration-fast) var(--openpen-easing-standard);
+}
+.app-seg-btn--icon[data-v-a90b77a6] {
+  padding: 5px var(--openpen-space-sm);
 }
-.app-seg-icon[data-v-a0348ad4] {
+.app-seg-icon[data-v-a90b77a6] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
 }
-.app-seg-btn[data-v-a0348ad4]:hover {
+
+/* Hover: a step on top of the track that is still visible (track is input-bg). */
+.app-seg-btn[data-v-a90b77a6]: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);
+
+/* Selected: raised segment — surface fill + thin border + soft shadow. */
+.app-seg-btn.active[data-v-a90b77a6] {
+  background: var(--openpen-color-surface-popup);
   color: var(--openpen-color-accent);
-  border-color: color-mix(in srgb, var(--openpen-color-accent) 40%, transparent);
+  border-color: var(--openpen-color-border-hi);
+  box-shadow: var(--openpen-shadow-sm);
 }
-.app-seg--disabled[data-v-a0348ad4] {
+.app-seg--disabled[data-v-a90b77a6] {
   opacity: 0.45;
   pointer-events: none;
   cursor: not-allowed;
 }
 
+.app-swatch-picker[data-v-c62ade43] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--openpen-space-sm);
+  --app-swatch-size: 24px;
+}
+.app-swatch-picker--spacing-small[data-v-c62ade43] { gap: 6px;
+}
+.app-swatch-picker--small[data-v-c62ade43] { --app-swatch-size: 22px;
+}
+.app-swatch-picker--medium[data-v-c62ade43] { --app-swatch-size: 24px;
+}
+.app-swatch-picker--large[data-v-c62ade43] { --app-swatch-size: 28px;
+}
+.app-swatch[data-v-c62ade43] {
+  width: var(--app-swatch-size);
+  height: var(--app-swatch-size);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  flex-shrink: 0;
+  /* Hairline so near-white / near-surface swatches keep an edge. */
+  box-shadow: inset 0 0 0 1px var(--openpen-color-border-hi);
+  outline: none;
+  transition: transform var(--openpen-duration-fast) var(--openpen-easing-standard);
+}
+.app-swatch-picker--rounded .app-swatch[data-v-c62ade43] { border-radius: var(--openpen-radius-sm);
+}
+.app-swatch-picker--square .app-swatch[data-v-c62ade43] { border-radius: 2px;
+}
+.app-swatch[data-v-c62ade43]:hover { transform: scale(1.1);
+}
+
+/* Selected: outer ring (primary text colour) + inner band (focus-band colour). */
+.app-swatch.selected[data-v-c62ade43] {
+  box-shadow:
+    inset 0 0 0 2px var(--openpen-color-text-primary),
+    inset 0 0 0 4px var(--openpen-color-surface-popup);
+}
+
+/* Keyboard focus: separate outline outside the swatch. */
+.app-swatch[data-v-c62ade43]:focus-visible {
+  outline: 2px solid var(--openpen-color-accent);
+  outline-offset: 2px;
+}
+.app-swatch-picker[data-disabled][data-v-c62ade43] {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.app-toggle-btn[data-v-1d1a1150] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--openpen-space-sm);
+  border: 1px 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: 14px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  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-toggle-btn[data-v-1d1a1150]:hover {
+  background: var(--openpen-color-control-hover);
+  color: var(--openpen-color-text-primary);
+}
+.app-toggle-btn.pressed[data-v-1d1a1150] {
+  background: var(--openpen-color-accent-bg);
+  border-color: var(--openpen-color-text-dim);
+  color: var(--openpen-color-text-primary);
+}
+.app-toggle-btn[data-v-1d1a1150]:focus-visible {
+  outline: 2px solid var(--openpen-color-accent);
+  outline-offset: 2px;
+}
+.app-toggle-btn[data-v-1d1a1150]:disabled {
+  opacity: 0.45;
+  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
@@ -460,47 +702,6 @@ 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;
@@ -560,7 +761,7 @@ to   { opacity: 0; transform: scale(0.95);
   border-radius: var(--openpen-radius-sm);
 }
 
-.app-banner[data-v-c68deb55] {
+.app-banner[data-v-4f309880] {
   display: flex;
   align-items: flex-start;
   gap: 10px;
@@ -570,24 +771,24 @@ to   { opacity: 0; transform: scale(0.95);
   font-size: 13px;
   line-height: 1.55;
 }
-.app-banner-inline[data-v-c68deb55] {
+.app-banner-inline[data-v-4f309880] {
   padding: 7px 12px;
   align-items: center;
   font-size: 12px;
 }
-.app-banner-icon[data-v-c68deb55] {
+.app-banner-icon[data-v-4f309880] {
   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-inline .app-banner-icon[data-v-4f309880] { margin-top: 0;
 }
-.app-banner-body[data-v-c68deb55] {
+.app-banner-body[data-v-4f309880] {
   flex: 1;
   min-width: 0;
 }
-.app-banner-actions[data-v-c68deb55] {
+.app-banner-actions[data-v-4f309880] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -596,36 +797,36 @@ to   { opacity: 0; transform: scale(0.95);
 }
 
 /* Variants */
-.app-banner-info[data-v-c68deb55] {
+.app-banner-info[data-v-4f309880] {
   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] {
+.app-banner-info .app-banner-icon[data-v-4f309880] {
   color: var(--openpen-color-state-info-icon);
 }
-.app-banner-warning[data-v-c68deb55] {
+.app-banner-warning[data-v-4f309880] {
   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] {
+.app-banner-warning .app-banner-icon[data-v-4f309880] {
   color: var(--openpen-color-state-warning-icon);
 }
-.app-banner-success[data-v-c68deb55] {
+.app-banner-success[data-v-4f309880] {
   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] {
+.app-banner-success .app-banner-icon[data-v-4f309880] {
   color: var(--openpen-color-state-success-icon);
 }
-.app-banner-error[data-v-c68deb55] {
+.app-banner-error[data-v-4f309880] {
   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] {
+.app-banner-error .app-banner-icon[data-v-4f309880] {
   color: var(--openpen-color-state-error-icon);
 }
 

package/dist/uikit/primitives.d.ts

@@ -5,7 +5,7 @@
  * who need full control over markup and styling but still want Reka UI's
  * a11y / focus / keyboard navigation behaviour.
  *
- * Usage (escape hatch from high-level wrappers):
+ * Usage (when the high-level wrappers are not enough):
  *   import { PopoverRoot, PopoverTrigger, ... } from '@openpen/module-api/uikit'
  *   // or directly:
  *   import { ... } from '@openpen/module-api/uikit/primitives'  (if re-exported)
@@ -24,7 +24,8 @@
  *   Dialog     → AppDialog
  *   Slider     → AppSlider
  *   Switch     → AppToggle
- *   RadioGroup → AppSegmented
+ *   RadioGroup → AppSegmented, AppSwatchPicker
+ *   Toggle     → AppToggleButton
  *   Select     → AppSelect
  *   Tooltip    → AppTooltip
  *   Tabs       → AppTabs
@@ -33,6 +34,7 @@ export { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArro
 export { DialogRoot, DialogTrigger, DialogPortal, DialogContent, DialogOverlay, DialogClose, DialogTitle, DialogDescription, } from 'reka-ui';
 export { SliderRoot, SliderTrack, SliderRange, SliderThumb, } from 'reka-ui';
 export { SwitchRoot, SwitchThumb, } from 'reka-ui';
+export { Toggle } from 'reka-ui';
 export { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, } from 'reka-ui';
 export { SelectRoot, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectItem, SelectItemText, SelectItemIndicator, SelectLabel, SelectGroup, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, SelectArrow, SelectValue, SelectIcon, } from 'reka-ui';
 export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, } from 'reka-ui';

package/dist/uikit/tokens.css

@@ -17,20 +17,21 @@
   /* ── Color (semantic; theme module may override actual values) ─────────── */
 
   /* Accent — primary brand / interactive highlight color */
-  /* Source: src/style.css --accent: #818CF8 */
-  --openpen-color-accent: #818cf8;
+  /* Follows the host's --accent (set from the user's accent setting); the
+   * indigo value is the fallback for environments without host variables. */
+  --openpen-color-accent: var(--accent, #818cf8);
 
   /* Accent hover — slightly deeper accent for :hover state */
   /* Source: src/style.css --accent-glow used as reference; approximated from #6366f1 */
   --openpen-color-accent-hover: #6366f1;
 
   /* Accent background — subtle tinted background for active items */
-  /* Source: src/style.css --accent-bg: rgba(129, 140, 248, 0.18) */
-  --openpen-color-accent-bg: rgba(129, 140, 248, 0.18);
+  /* Follows the host's --accent-bg; indigo fallback as above. */
+  --openpen-color-accent-bg: var(--accent-bg, rgba(129, 140, 248, 0.18));
 
   /* Accent glow — used for box-shadow rings on active elements */
-  /* Source: src/style.css --accent-glow: rgba(129, 140, 248, 0.35) */
-  --openpen-color-accent-glow: rgba(129, 140, 248, 0.35);
+  /* Follows the host's --accent-glow; indigo fallback as above. */
+  --openpen-color-accent-glow: var(--accent-glow, rgba(129, 140, 248, 0.35));
 
   /* Surface (dark) — main background for floating panels, bars */
   /* Source: src/style.css --surface: rgba(18, 26, 48, 0.88) */

package/dist/use-module-context.d.ts

@@ -13,9 +13,8 @@ import type { ModuleSetupContext } from './types/module';
  * @example
  * ```ts
  * // MySettingsPanel.vue
- * import { useModuleContext } from '@openpen/module-api'
+ * import { useModuleContext, z } from '@openpen/module-api'
  * import { onMounted, onUnmounted, ref } from 'vue'
- * import { z } from 'zod'
  *
  * const MySchema = z.object({ color: z.string().default('#fff') })
  * type MySettings = z.infer<typeof MySchema>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpen/module-api",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "OpenPen Module API — public contract for built-in modules and third-party plugins",
   "author": "navishachiku <navishachiku@gmail.com>",
   "homepage": "https://github.com/openpen-platform/openpen#readme",
@@ -63,11 +63,11 @@
     "sdk"
   ],
   "dependencies": {
-    "dompurify": "^3.4.5",
-    "reka-ui": "~2.9.7"
+    "dompurify": "^3.4.17",
+    "reka-ui": "~2.11.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0",
-    "zod": "^3.23.0"
+    "zod": "^4.0.0"
   }
 }