@openpen/module-api 1.1.0 → 1.2.0

package/src/uikit/components/AppSegmented.vue

@@ -1,128 +0,0 @@
-<script setup lang="ts">
-/**
- * AppSegmented — High-level wrapper (Layer 1).
- *
- * Wraps Reka UI RadioGroup (RadioGroupRoot / RadioGroupItem).
- *
- * Visual: flex gap 4px, 1.5px border var(--border-hi),
- * active = var(--accent-bg) background + var(--accent) color.
- *
- * Styles use --openpen-* design tokens.
- * No Reka UI types are leaked in the public API.
- */
-import {
-  RadioGroupRoot,
-  RadioGroupItem,
-} from '../primitives'
-
-// ── Public API (MUST NOT reference reka-ui types) ─────────────────────────────
-
-interface Option {
-  value: string
-  label: string
-  icon?: string
-  testid?: string
-}
-
-defineProps<{
-  modelValue: string
-  options: Option[]
-  /** When true, all options are non-interactive and visually dimmed. */
-  disabled?: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-// AcceptableValue from Reka UI can be null; we narrow to string so the public API has no Reka UI type leakage.
-function onValueChange(val: unknown) {
-  if (typeof val === 'string') {
-    emit('update:modelValue', val)
-  }
-}
-</script>
-
-<template>
-  <RadioGroupRoot
-    class="app-seg"
-    :class="{ 'app-seg--disabled': disabled }"
-    :model-value="modelValue"
-    :disabled="disabled"
-    orientation="horizontal"
-    @update:model-value="onValueChange"
-  >
-    <RadioGroupItem
-      v-for="opt in options"
-      :key="opt.value"
-      :value="opt.value"
-      as-child
-    >
-      <button
-        class="app-seg-btn"
-        :class="{ active: modelValue === opt.value }"
-        :data-testid="opt.testid"
-      >
-        <span
-          v-if="opt.icon"
-          class="app-seg-icon"
-          aria-hidden="true"
-          v-html="opt.icon"
-        />
-        <span>{{ opt.label }}</span>
-      </button>
-    </RadioGroupItem>
-  </RadioGroupRoot>
-</template>
-
-<style scoped>
-.app-seg {
-  display: flex;
-  gap: var(--openpen-space-xs);
-}
-
-.app-seg-btn {
-  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 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-}
-
-.app-seg-btn:hover {
-  color: var(--openpen-color-text-primary);
-  background: var(--openpen-color-control-hover);
-}
-
-.app-seg-btn.active {
-  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 {
-  opacity: 0.45;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-</style>

package/src/uikit/components/AppSelect.vue

@@ -1,235 +0,0 @@
-<script setup lang="ts">
-/**
- * AppSelect — High-level wrapper (Layer 1).
- *
- * Plugin authors use this component without needing to know about Reka UI's
- * Select primitives. The API surface is OpenPen-owned and stable.
- *
- * Public API is stable: switching the underlying headless library in the
- * future does not break the plugin author's code.
- *
- * Implementation notes:
- * - Controlled via modelValue / update:modelValue (standard Vue v-model pattern).
- * - options[] is an OpenPen-owned type; no Reka UI types leak to the public API.
- * - Popup styling mirrors surface-popup tokens (same as AppPopover content).
- * - Styles are unscoped because SelectContent is teleported via SelectPortal.
- */
-import {
-  SelectRoot,
-  SelectTrigger,
-  SelectPortal,
-  SelectContent,
-  SelectViewport,
-  SelectItem,
-  SelectItemText,
-  SelectItemIndicator,
-  SelectValue,
-  SelectIcon,
-} from '../primitives'
-
-// ── OpenPen-owned types (MUST NOT reference reka-ui types) ───────────────────
-
-/** A single option in the dropdown list. */
-export interface SelectOption {
-  /** The value emitted on selection. */
-  value: string
-  /** The label shown to the user. */
-  label: string
-}
-
-export interface AppSelectProps {
-  /** Currently selected value (bind with v-model). */
-  modelValue: string
-  /** List of selectable options. */
-  options: SelectOption[]
-  /** Placeholder shown when no option is selected. */
-  placeholder: string
-  /** Whether the select is disabled. */
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<AppSelectProps>(), {
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-function onValueChange(v: string) {
-  emit('update:modelValue', v)
-}
-</script>
-
-<template>
-  <SelectRoot
-    :model-value="modelValue"
-    :disabled="disabled"
-    @update:model-value="onValueChange"
-  >
-    <SelectTrigger class="openpen-select-trigger">
-      <SelectValue :placeholder="placeholder" />
-      <SelectIcon class="openpen-select-icon" aria-hidden="true">
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </SelectIcon>
-    </SelectTrigger>
-    <SelectPortal>
-      <SelectContent class="openpen-select-content" position="popper" :side-offset="4">
-        <SelectViewport class="openpen-select-viewport">
-          <SelectItem
-            v-for="option in options"
-            :key="option.value"
-            :value="option.value"
-            class="openpen-select-item"
-          >
-            <SelectItemIndicator class="openpen-select-item-indicator">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
-                <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </SelectItemIndicator>
-            <SelectItemText>{{ option.label }}</SelectItemText>
-          </SelectItem>
-        </SelectViewport>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
-</template>
-
-<!-- Styles MUST be unscoped — Vue scoped CSS does not follow Teleport targets,
-     so .openpen-select-* classes would not receive the scoped data-v-* attribute
-     when rendered inside the portal. -->
-<style>
-/* ── 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); }
-}
-</style>

package/src/uikit/components/AppSlider.vue

@@ -1,204 +0,0 @@
-<script setup lang="ts">
-/**
- * AppSlider — High-level wrapper (Layer 1).
- *
- * Wraps Reka UI Slider (SliderRoot / SliderTrack / SliderRange / SliderThumb).
- *
- * Visual: 4px track, 14×14 white thumb, accent fill,
- * hover scale(1.2) at var(--openpen-duration-fast) easing.
- *
- * Styles use --openpen-* design tokens.
- * No Reka UI types are leaked in the public API.
- */
-import { computed } from 'vue'
-import {
-  SliderRoot,
-  SliderTrack,
-  SliderRange,
-  SliderThumb,
-} from '../primitives'
-
-// ── Public API (MUST NOT reference reka-ui types) ─────────────────────────────
-
-const props = withDefaults(defineProps<{
-  modelValue: number
-  min?: number
-  max?: number
-  step?: number
-  /** Container width (e.g. '100%', '72px'). In vertical mode this sets the height. */
-  width?: string
-  orientation?: 'horizontal' | 'vertical'
-  trackHeight?: string
-  trackRadius?: string
-  thumbWidth?: string
-  thumbHeight?: string
-  thumbRadius?: string
-  /**
-   * Reverse the value-to-position mapping. With orientation='vertical', sets
-   * top=min and bottom=max (drag down to increase). With orientation='horizontal',
-   * sets right=min and left=max (drag left to increase). Useful when an icon
-   * legend implies the opposite direction of the underlying control.
-   *
-   * Delegates to reka-ui SliderRoot's native `inverted` prop, which swaps
-   * startEdge/endEdge on SliderRange — no manual value transformation needed.
-   */
-  inverted?: boolean
-}>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-  width: '100%',
-  orientation: 'horizontal',
-  trackHeight: '4px',
-  trackRadius: '2px',
-  thumbWidth: '14px',
-  thumbHeight: '14px',
-  thumbRadius: '50%',
-  inverted: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-// ── Internal state ────────────────────────────────────────────────────────────
-
-const isVertical = computed(() => props.orientation === 'vertical')
-
-/** Fill percentage for the track range background. */
-const fillPct = computed(() => {
-  const range = props.max - props.min
-  if (range === 0) return '0.00%'
-  const pct = ((props.modelValue - props.min) / range) * 100
-  return Math.max(0, Math.min(100, pct)).toFixed(2) + '%'
-})
-
-/** Root element inline style */
-const rootStyle = computed(() => {
-  if (isVertical.value) {
-    return {
-      '--thumb-w': props.thumbWidth,
-      '--thumb-h': props.thumbHeight,
-      '--thumb-r': props.thumbRadius,
-      '--fill-pct': fillPct.value,
-      '--track-height': props.trackHeight,
-      '--track-radius': props.trackRadius,
-      height: props.width,
-      width: '16px',
-    }
-  }
-  return {
-    '--thumb-w': props.thumbWidth,
-    '--thumb-h': props.thumbHeight,
-    '--thumb-r': props.thumbRadius,
-    '--fill-pct': fillPct.value,
-    '--track-height': props.trackHeight,
-    '--track-radius': props.trackRadius,
-    width: props.width,
-  }
-})
-
-function onValueChange(val: number[] | undefined) {
-  if (val && val.length > 0) {
-    emit('update:modelValue', val[0])
-  }
-}
-</script>
-
-<template>
-  <SliderRoot
-    class="app-slider-root"
-    :class="{ 'app-slider-root--vertical': isVertical, 'app-slider-root--inverted': inverted }"
-    :style="rootStyle"
-    :model-value="[modelValue]"
-    :min="min"
-    :max="max"
-    :step="step"
-    :orientation="orientation"
-    :inverted="inverted"
-    @update:model-value="onValueChange"
-  >
-    <SliderTrack class="app-slider-track">
-      <SliderRange class="app-slider-range" />
-    </SliderTrack>
-    <SliderThumb class="app-slider-thumb" />
-  </SliderRoot>
-</template>
-
-<style scoped>
-/* ── Root container ────────────────────────────────────────────────────────── */
-.app-slider-root {
-  position: relative;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  touch-action: none;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.app-slider-root[data-orientation='horizontal'] {
-  height: var(--track-height, 4px);
-}
-
-.app-slider-root[data-orientation='vertical'] {
-  flex-direction: column;
-  width: var(--track-height, 4px);
-}
-
-/* ── Track ─────────────────────────────────────────────────────────────────── */
-.app-slider-track {
-  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 {
-  height: var(--track-height, 4px);
-}
-
-.app-slider-root[data-orientation='vertical'] .app-slider-track {
-  width: var(--track-height, 4px);
-}
-
-/* ── Range (filled portion) ─────────────────────────────────────────────────── */
-.app-slider-range {
-  position: absolute;
-  border-radius: var(--track-radius, 2px);
-  background: var(--openpen-color-accent);
-}
-
-.app-slider-root[data-orientation='horizontal'] .app-slider-range {
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.app-slider-root[data-orientation='vertical'] .app-slider-range {
-  width: 100%;
-  bottom: 0;
-  left: 0;
-}
-
-/* ── Thumb ─────────────────────────────────────────────────────────────────── */
-.app-slider-thumb {
-  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:hover {
-  transform: scale(1.2);
-}
-
-.app-slider-thumb:focus-visible {
-  box-shadow: 0 0 0 3px var(--openpen-color-accent-glow);
-}
-</style>