@openpen/module-api 1.1.0 → 1.2.0

package/src/uikit/components/AppTabs.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-/**
- * AppTabs — High-level wrapper (Layer 1).
- *
- * Wraps Reka UI Tabs (TabsRoot / TabsList / TabsTrigger / TabsContent).
- * Intended for settings UI tabbed navigation and any plugin tab panel.
- *
- * Plugin authors get a controlled tab switcher with OpenPen styling without
- * knowing about Reka UI internals.
- *
- * Styles use --openpen-* design tokens.
- * No Reka UI types are leaked in the public API.
- *
- * Usage:
- *   <AppTabs
- *     v-model="activeTab"
- *     :tabs="[{ id: 'general', label: 'General' }, { id: 'advanced', label: 'Advanced' }]"
- *   >
- *     <template #default="{ activeTabId }">
- *       <div v-if="activeTabId === 'general'">...</div>
- *       <div v-if="activeTabId === 'advanced'">...</div>
- *     </template>
- *   </AppTabs>
- */
-import {
-  TabsRoot,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from '../primitives'
-
-// ── OpenPen-owned types (MUST NOT reference reka-ui types) ────────────────────
-
-export interface AppTabItem {
-  /** Unique identifier for this tab. Used as the v-model value. */
-  id: string
-  /** Human-readable label rendered in the tab trigger button. */
-  label: string
-}
-
-export interface AppTabsProps {
-  /** Currently active tab id (controlled mode). */
-  modelValue: string
-  /** Ordered list of tab descriptors. */
-  tabs: AppTabItem[]
-}
-
-export interface AppTabsSlots {
-  /**
-   * Default slot for tab content area.
-   * Receives the currently active tab id via scoped slot.
-   */
-  default: (scope: { activeTabId: string }) => unknown
-}
-
-const props = defineProps<AppTabsProps>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-defineSlots<AppTabsSlots>()
-
-function onTabChange(val: string | number | undefined) {
-  if (typeof val === 'string') {
-    emit('update:modelValue', val)
-  }
-}
-</script>
-
-<template>
-  <TabsRoot
-    :model-value="props.modelValue"
-    class="openpen-tabs"
-    @update:model-value="onTabChange"
-  >
-    <TabsList class="openpen-tabs-list">
-      <TabsTrigger
-        v-for="tab in props.tabs"
-        :key="tab.id"
-        :value="tab.id"
-        class="openpen-tabs-trigger"
-      >
-        {{ tab.label }}
-      </TabsTrigger>
-    </TabsList>
-
-    <!-- Single content outlet: plugin author renders tab content via scoped slot. -->
-    <TabsContent
-      v-for="tab in props.tabs"
-      :key="tab.id"
-      :value="tab.id"
-      class="openpen-tabs-content"
-    >
-      <slot :active-tab-id="tab.id" />
-    </TabsContent>
-  </TabsRoot>
-</template>
-
-<style scoped>
-/* ── Tab root ───────────────────────────────────────────────────────────────── */
-.openpen-tabs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--openpen-space-sm);
-}
-
-/* ── Tab list (trigger bar) ─────────────────────────────────────────────────── */
-.openpen-tabs-list {
-  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 {
-  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:hover {
-  background: var(--openpen-color-control-hover);
-  color: var(--openpen-color-text-primary);
-}
-
-.openpen-tabs-trigger[data-state='active'] {
-  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:focus-visible {
-  box-shadow: 0 0 0 2px var(--openpen-color-accent);
-}
-
-/* ── Tab content ────────────────────────────────────────────────────────────── */
-.openpen-tabs-content {
-  /* Content area has no chrome by default; plugin authors add their own. */
-  outline: none;
-}
-
-.openpen-tabs-content:focus-visible {
-  box-shadow: 0 0 0 2px var(--openpen-color-accent);
-  border-radius: var(--openpen-radius-sm);
-}
-</style>

package/src/uikit/components/AppToggle.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-/**
- * AppToggle — High-level wrapper (Layer 1).
- *
- * Wraps Reka UI Switch (SwitchRoot / SwitchThumb).
- *
- * Visual: 40×24px, off=toggle-off-bg, on=accent,
- * 18×18 white thumb, bounce transition.
- *
- * Styles use --openpen-* design tokens.
- * No Reka UI types are leaked in the public API.
- *
- * DOM notes:
- * - SwitchRoot renders a <button role="switch"> with class "app-toggle"
- * - "on" class is added when modelValue is true
- * - aria-pressed is added explicitly because Reka UI's SwitchRoot uses
- *   aria-checked; both attributes co-exist for maximum a11y surface.
- */
-import {
-  SwitchRoot,
-  SwitchThumb,
-} from '../primitives'
-
-// ── Public API (MUST NOT reference reka-ui types) ─────────────────────────────
-
-withDefaults(defineProps<{
-  modelValue: boolean
-  ariaLabel?: string
-}>(), { ariaLabel: '' })
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-function onCheckedChange(val: boolean) {
-  emit('update:modelValue', val)
-}
-</script>
-
-<template>
-  <SwitchRoot
-    class="app-toggle"
-    :class="{ on: modelValue }"
-    :model-value="modelValue"
-    :aria-label="ariaLabel"
-    :aria-pressed="modelValue"
-    @update:model-value="onCheckedChange"
-  >
-    <SwitchThumb class="app-toggle-thumb" />
-  </SwitchRoot>
-</template>
-
-<style scoped>
-/* Root — the toggle track */
-.app-toggle {
-  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 {
-  background: var(--openpen-color-accent);
-}
-
-/* Thumb — the white circular knob */
-.app-toggle-thumb {
-  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,
-.app-toggle[data-state='checked'] .app-toggle-thumb {
-  left: 19px;
-}
-</style>

package/src/uikit/components/AppTooltip.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-/**
- * AppTooltip — High-level wrapper (Layer 1).
- *
- * Wraps Reka UI Tooltip (TooltipProvider / TooltipRoot / TooltipTrigger /
- * TooltipPortal / TooltipContent / TooltipArrow).
- *
- * Plugin authors get hover-triggered tooltips with OpenPen styling without
- * knowing about Reka UI internals or inject keys.
- *
- * Styles use --openpen-* design tokens.
- * No Reka UI types are leaked in the public API.
- *
- * Usage:
- *   <AppTooltip content="Save file" side="top">
- *     <button>Save</button>
- *   </AppTooltip>
- */
-import {
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-  TooltipPortal,
-  TooltipContent,
-  TooltipArrow,
-} from '../primitives'
-
-// ── OpenPen-owned types (MUST NOT reference reka-ui types) ────────────────────
-
-/** Preferred side for tooltip content relative to the trigger. */
-export type TooltipSide = 'top' | 'bottom' | 'left' | 'right'
-
-export interface AppTooltipProps {
-  /** Tooltip text content. */
-  content: string
-  /** Preferred placement side relative to the trigger. Default 'top'. */
-  side?: TooltipSide
-  /** Delay before tooltip appears on hover, in ms. Default 200. */
-  delay?: number
-}
-
-export interface AppTooltipSlots {
-  /** Trigger element. Any element that receives hover events. */
-  default: () => unknown
-}
-
-const props = withDefaults(defineProps<AppTooltipProps>(), {
-  side: 'top',
-  delay: 200,
-})
-
-defineSlots<AppTooltipSlots>()
-</script>
-
-<template>
-  <TooltipProvider :delay-duration="props.delay">
-    <TooltipRoot>
-      <TooltipTrigger as-child>
-        <slot />
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent
-          :side="props.side"
-          :side-offset="6"
-          :avoid-collisions="true"
-          :collision-padding="8"
-          class="openpen-tooltip-content"
-        >
-          {{ props.content }}
-          <TooltipArrow class="openpen-tooltip-arrow" :width="10" :height="5" />
-        </TooltipContent>
-      </TooltipPortal>
-    </TooltipRoot>
-  </TooltipProvider>
-</template>
-
-<!-- Styles for teleported TooltipContent MUST be unscoped — Vue scoped CSS
-     does not follow Teleport targets (same rationale as AppPopover). -->
-<style>
-.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); }
-}
-</style>

package/src/uikit/components/DialogHost.vue

@@ -1,272 +0,0 @@
-<script setup lang="ts">
-/**
- * DialogHost — private host-internal component.
- *
- * HOST-INTERNAL: Do not export from any public barrel. Plugin authors never
- * interact with this component directly. The host mounts exactly one instance
- * at bootstrap; it renders the currently active imperative dialog request from
- * the useDialog() store.
- *
- * Rendering strategy:
- * - Reads the active request from _activeRequest (module-scoped reactive ref).
- * - Renders an <AppDialog> wired to that request's options.
- * - On ok / cancel / dismiss: resolves the request's Promise and advances queue.
- *
- * Settings window constraint: AppDialog internally injects MODAL_MANAGER_KEY
- * and CONTROL_BAR_ANIMATING_KEY. In the settings window those keys are not
- * provided (ControlBar only exists in the overlay/main window), so the dialog
- * falls back gracefully (no mutual exclusion, no animating-guard) — it still
- * renders and resolves correctly, just without those host integrations.
- */
-import { computed, inject, nextTick, provide, ref, watch } from 'vue'
-import AppDialog from './AppDialog.vue'
-// _activeRequest MUST come from the package barrel — see AppPopover.vue header
-// comment. The runtime build externalises '@openpen/module-api/uikit' so host
-// + uikit share the same module instance. A relative '../composables/useDialog'
-// import bundles a duplicate ref into the host bundle, causing useDialog()
-// callers to write to a different ref than DialogHost watches (dialog never
-// opens in production).
-import { _activeRequest, _resolveActive } from '@openpen/module-api/uikit'
-import { HOST_DIALOG_OPEN_COUNT_KEY } from '@openpen/module-api'
-import { DIALOG_PLUGIN_HANDLE_KEY } from '../composables/dialog-internal-keys'
-import type { DialogPluginComponentHandle } from '../composables/useDialogPluginComponent'
-
-const MODAL_ID = '__openpen_imperative_dialog__'
-
-// Increment/decrement the host-level dialog-open counter so ControlBar can
-// pause the auto-collapse timer while any imperative dialog is visible.
-// Falls back to a local ref when not provided (settings window has no host bar).
-const dialogOpenCount = inject(HOST_DIALOG_OPEN_COUNT_KEY, ref(0))
-
-// Whether the dialog is open: true when there is an active request.
-const isOpen = ref(false)
-
-// Prompt value — bound to the input in prompt dialogs.
-const promptValue = ref('')
-
-// Track the prompt input element so we can focus it on open.
-const promptInputRef = ref<HTMLInputElement | null>(null)
-
-// Watch the active request: open when a request arrives, close when cleared.
-watch(_activeRequest, (req) => {
-  if (req) {
-    if (req.kind === 'prompt') {
-      promptValue.value = req.opts.defaultValue ?? ''
-    }
-    if (!isOpen.value) {
-      dialogOpenCount.value++
-    }
-    isOpen.value = true
-    if (req.kind === 'prompt') {
-      nextTick(() => {
-        promptInputRef.value?.focus()
-      })
-    }
-  } else {
-    if (isOpen.value) {
-      dialogOpenCount.value = Math.max(0, dialogOpenCount.value - 1)
-    }
-    isOpen.value = false
-  }
-})
-
-// Derived from the active request for convenience.
-const req = computed(() => _activeRequest.value)
-const opts = computed(() => req.value?.opts)
-
-function handleOk() {
-  const r = _activeRequest.value
-  if (!r) return
-  if (r.kind === 'confirm') {
-    r.resolve(true)
-  } else if (r.kind === 'alert') {
-    r.resolve()
-  } else if (r.kind === 'prompt') {
-    r.resolve(promptValue.value)
-  }
-  // custom: custom component handles its own resolution via ok/cancel/dismiss
-  _resolveActive()
-}
-
-function handleCancel() {
-  const r = _activeRequest.value
-  if (!r) return
-  if (r.kind === 'confirm') {
-    r.resolve(false)
-  } else if (r.kind === 'prompt') {
-    r.resolve(null)
-  }
-  _resolveActive()
-}
-
-function handleUpdateOpen(v: boolean) {
-  if (!v) {
-    // Dialog closed via ESC / close button (not persistent).
-    const r = _activeRequest.value
-    if (!r) return
-    if (r.kind === 'confirm') {
-      r.resolve(false)
-    } else if (r.kind === 'alert') {
-      r.resolve()
-    } else if (r.kind === 'prompt') {
-      r.resolve(null)
-    } else if (r.kind === 'custom') {
-      r.resolve(null)
-    }
-    _resolveActive()
-  }
-}
-
-// ── Custom component plugin handle ───────────────────────────────────────────
-//
-// Provide the handle so custom components can call ok/cancel/dismiss via
-// useDialogPluginComponent(). We provide at this component level so only the
-// custom component subtree gets it.
-
-function customOk(payload?: unknown) {
-  const r = _activeRequest.value
-  if (!r || r.kind !== 'custom') return
-  r.resolve(payload ?? null)
-  _resolveActive()
-}
-
-function customCancel() {
-  const r = _activeRequest.value
-  if (!r || r.kind !== 'custom') return
-  r.resolve(null)
-  _resolveActive()
-}
-
-const pluginHandle: DialogPluginComponentHandle<unknown> = {
-  ok: customOk,
-  cancel: customCancel,
-  dismiss: customCancel,
-}
-
-provide(DIALOG_PLUGIN_HANDLE_KEY, pluginHandle)
-</script>
-
-<template>
-  <!-- DialogHost renders nothing when there is no active request. -->
-  <AppDialog
-    v-if="req"
-    :modal-id="MODAL_ID"
-    :title="opts!.title"
-    :open="isOpen"
-    :persistent="opts!.persistent"
-    :danger="opts!.danger"
-    @update:open="handleUpdateOpen"
-  >
-    <!-- Body slot: varies by kind -->
-    <template v-if="req.kind === 'confirm' || req.kind === 'alert'">
-      <p class="openpen-dialog-host-message">{{ (opts as { message: string }).message }}</p>
-    </template>
-
-    <template v-else-if="req.kind === 'prompt'">
-      <p class="openpen-dialog-host-message">{{ (opts as { message: string }).message }}</p>
-      <input
-        ref="promptInputRef"
-        v-model="promptValue"
-        class="openpen-dialog-host-input"
-        :placeholder="(opts as { placeholder?: string }).placeholder"
-        type="text"
-        @keydown.enter="handleOk"
-        @keydown.esc="handleCancel"
-      />
-    </template>
-
-    <template v-else-if="req.kind === 'custom'">
-      <!-- Render the custom component; it gets ok/cancel/dismiss via injection. -->
-      <component
-        :is="(opts as { component: unknown }).component"
-        v-bind="(opts as { componentProps?: Record<string, unknown> }).componentProps ?? {}"
-      />
-    </template>
-
-    <!-- Footer slot: only for confirm/alert/prompt; custom owns its own buttons. -->
-    <template v-if="req.kind !== 'custom'" #footer>
-      <button
-        v-if="req.kind === 'confirm' || req.kind === 'prompt'"
-        class="openpen-btn openpen-btn-secondary"
-        @click="handleCancel"
-      >
-        {{ (opts as { cancelLabel?: string }).cancelLabel ?? 'Cancel' }}
-      </button>
-      <button
-        class="openpen-btn openpen-btn-primary"
-        :class="{ 'openpen-btn-danger': opts!.danger }"
-        @click="handleOk"
-      >
-        {{ (opts as { okLabel?: string }).okLabel ?? 'OK' }}
-      </button>
-    </template>
-  </AppDialog>
-</template>
-
-<style>
-/* ── 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;
-}
-</style>