@openpen/module-api 1.1.0 → 1.2.0

package/src/uikit/composables/useDialog.ts

@@ -1,141 +0,0 @@
-/**
- * useDialog — imperative dialog API for OpenPen modules.
- *
- * Returns a DialogApi with confirm/alert/prompt/custom methods that each
- * return a Promise. At most one imperative dialog is open at a time; extra
- * calls are queued and executed sequentially.
- *
- * The active request is stored in a module-scoped reactive store. DialogHost
- * (mounted by the host at bootstrap) reads this store and renders the dialog.
- *
- * Usage:
- *   const dialog = useDialog()
- *   const ok = await dialog.confirm({ title: 'Delete?', message: '...' })
- */
-import type { Component } from 'vue'
-import { ref } from 'vue'
-
-// ── Public option types ───────────────────────────────────────────────────────
-
-interface BaseDialogOptions {
-  title: string
-  persistent?: boolean
-  danger?: boolean
-}
-
-export interface DialogConfirmOptions extends BaseDialogOptions {
-  message: string
-  okLabel?: string
-  cancelLabel?: string
-}
-
-export interface DialogAlertOptions extends BaseDialogOptions {
-  message: string
-  okLabel?: string
-}
-
-export interface DialogPromptOptions extends BaseDialogOptions {
-  message: string
-  defaultValue?: string
-  placeholder?: string
-  okLabel?: string
-  cancelLabel?: string
-}
-
-export interface DialogCustomOptions<T = unknown> extends BaseDialogOptions {
-  component: Component
-  componentProps?: Record<string, unknown>
-  /** Phantom type field for TypeScript to infer the resolution payload type. */
-  __payloadType?: T
-}
-
-// ── Internal request types (tagged union) ─────────────────────────────────────
-
-type DialogRequest =
-  | { kind: 'confirm'; opts: DialogConfirmOptions; resolve: (v: boolean) => void }
-  | { kind: 'alert';   opts: DialogAlertOptions;   resolve: () => void }
-  | { kind: 'prompt';  opts: DialogPromptOptions;  resolve: (v: string | null) => void }
-  | { kind: 'custom';  opts: DialogCustomOptions<unknown>; resolve: (v: unknown) => void }
-
-// ── Module-scoped store ───────────────────────────────────────────────────────
-//
-// Single reactive ref holds the currently rendered request. DialogHost watches
-// this and renders the appropriate dialog. When DialogHost resolves a request,
-// it calls resolveActive() which drains the queue.
-
-export const _activeRequest = ref<DialogRequest | null>(null)
-
-const _queue: (() => void)[] = []
-let _processing = false
-
-function _enqueue(run: () => void): void {
-  if (_processing) {
-    _queue.push(run)
-  } else {
-    _processing = true
-    run()
-  }
-}
-
-/**
- * Called by DialogHost when the dialog is resolved (ok/cancel/dismiss).
- * Advances the queue if there are pending requests.
- */
-export function _resolveActive(): void {
-  _activeRequest.value = null
-  const next = _queue.shift()
-  if (next) {
-    next()
-  } else {
-    _processing = false
-  }
-}
-
-// ── Public API ────────────────────────────────────────────────────────────────
-
-export interface DialogApi {
-  confirm(opts: DialogConfirmOptions): Promise<boolean>
-  alert(opts: DialogAlertOptions): Promise<void>
-  prompt(opts: DialogPromptOptions): Promise<string | null>
-  custom<T = unknown>(opts: DialogCustomOptions<T>): Promise<T | null>
-}
-
-export function useDialog(): DialogApi {
-  return {
-    confirm(opts: DialogConfirmOptions): Promise<boolean> {
-      return new Promise<boolean>((resolve) => {
-        _enqueue(() => {
-          _activeRequest.value = { kind: 'confirm', opts, resolve }
-        })
-      })
-    },
-
-    alert(opts: DialogAlertOptions): Promise<void> {
-      return new Promise<void>((resolve) => {
-        _enqueue(() => {
-          _activeRequest.value = { kind: 'alert', opts, resolve }
-        })
-      })
-    },
-
-    prompt(opts: DialogPromptOptions): Promise<string | null> {
-      return new Promise<string | null>((resolve) => {
-        _enqueue(() => {
-          _activeRequest.value = { kind: 'prompt', opts, resolve }
-        })
-      })
-    },
-
-    custom<T = unknown>(opts: DialogCustomOptions<T>): Promise<T | null> {
-      return new Promise<T | null>((resolve) => {
-        _enqueue(() => {
-          _activeRequest.value = {
-            kind: 'custom',
-            opts: opts as DialogCustomOptions<unknown>,
-            resolve: resolve as (v: unknown) => void,
-          }
-        })
-      })
-    },
-  }
-}

package/src/uikit/composables/useDialogPluginComponent.ts

@@ -1,27 +0,0 @@
-/**
- * useDialogPluginComponent — composable for components rendered via useDialog().custom().
- *
- * The custom component calls this to get ok/cancel/dismiss callbacks, which
- * resolve the Promise returned by useDialog().custom().
- */
-import { inject } from 'vue'
-import { DIALOG_PLUGIN_HANDLE_KEY } from './dialog-internal-keys'
-
-export interface DialogPluginComponentHandle<T = unknown> {
-  /** Resolve with a payload value and close the dialog. */
-  ok(payload?: T): void
-  /** Resolve with null and close the dialog. */
-  cancel(): void
-  /** Alias for cancel() — resolves with null. */
-  dismiss(): void
-}
-
-export function useDialogPluginComponent<T = unknown>(): DialogPluginComponentHandle<T> {
-  const handle = inject(DIALOG_PLUGIN_HANDLE_KEY)
-  if (!handle) {
-    throw new Error(
-      'useDialogPluginComponent() must be called inside a component rendered via useDialog().custom()'
-    )
-  }
-  return handle as DialogPluginComponentHandle<T>
-}

package/src/uikit/index.ts

@@ -1,79 +0,0 @@
-/**
- * @openpen/module-api/uikit — Three-layer API surface
- *
- * Layer 1 — High-level Wrappers (80% case)
- *   OpenPen-opinionated components with preset styles + auto-injected host
- *   context. Plugin authors should start here: no knowledge of inject keys
- *   or Reka UI primitives required.
- *
- * Layer 2 — Primitive Re-exports (20% advanced)
- *   Raw Reka UI headless components. Use when you need full control over
- *   markup / styling but still want a11y / focus / keyboard nav behaviour.
- *   Note: you must manually handle modal-manager, animating guard,
- *   passthrough, and teleport target when walking this layer.
- *
- * Layer 3 — Escape Hatch (5% fully custom)
- *   Plugin installs reka-ui (or any library) directly in its own package.json.
- *   UIKit MUST NOT block this. Not handled here — plugin author's choice.
- *
- * See docs/reference/uikit.md for the full trade-off description.
- */
-
-// ── Layer 1: High-level Wrappers ──────────────────────────────────────────────
-
-export { default as AppPopover } from './components/AppPopover.vue'
-export type { AppPopoverProps, Placement } from './components/AppPopover.vue'
-
-export { default as AppSlider } from './components/AppSlider.vue'
-export { default as AppToggle } from './components/AppToggle.vue'
-export { default as AppSegmented } from './components/AppSegmented.vue'
-
-export { default as AppDialog } from './components/AppDialog.vue'
-export type { AppDialogProps } from './components/AppDialog.vue'
-
-export { useDialog } from './composables/useDialog'
-export type {
-  DialogConfirmOptions,
-  DialogAlertOptions,
-  DialogPromptOptions,
-  DialogCustomOptions,
-} from './composables/useDialog'
-export { useDialogPluginComponent } from './composables/useDialogPluginComponent'
-
-// Host-internal: shared by DialogHost so it sees the same _activeRequest ref
-// instance as useDialog() callers. MUST be exported via this barrel — the
-// uikit runtime bundle (dist/openpen-runtime/module-api-uikit.js) is the
-// single shared module instance referenced by the importmap; a relative
-// '../composables/useDialog' import in DialogHost would bundle a second
-// duplicate ref into the host bundle (see project_dev_prod_parity.md), so
-// dialog.confirm() would never reach DialogHost in production.
-// Underscore-prefixed: NOT part of the plugin-facing API surface.
-export { _activeRequest, _resolveActive } from './composables/useDialog'
-export { default as AppSelect } from './components/AppSelect.vue'
-export type { AppSelectProps, SelectOption } from './components/AppSelect.vue'
-export { default as AppTooltip } from './components/AppTooltip.vue'
-export type { AppTooltipProps, TooltipSide } from './components/AppTooltip.vue'
-export { default as AppTabs } from './components/AppTabs.vue'
-export type { AppTabsProps, AppTabItem } from './components/AppTabs.vue'
-
-export { default as AppBanner } from './components/AppBanner.vue'
-export type { BannerVariant } from './components/AppBanner.vue'
-
-export { default as AppButton } from './components/AppButton.vue'
-
-// ── Layer 2: Primitive Re-exports ────────────────────────────────────────────
-//
-// Re-export entire primitives namespace.
-// MUST NOT re-export any reka-ui type through this index — wrapper types only.
-// (primitives.ts is the designated channel for the raw headless exports.)
-export * from './primitives'
-
-// ── Host context inject keys ──────────────────────────────────────────────────
-//
-// Keys are defined in @openpen/module-api root inject-keys.ts and re-exported
-// here for convenience. Plugin authors who need to walk Layer 2 should import
-// from the root package:
-//   import { WRAPPER_EL_KEY, MODAL_MANAGER_KEY } from '@openpen/module-api'
-//
-// Root index.ts already covers:
-//   WRAPPER_EL_KEY, SNAP_EDGE_KEY, MODAL_MANAGER_KEY, ANCHOR_EL_KEY.

package/src/uikit/primitives.ts

@@ -1,150 +0,0 @@
-/**
- * Reka UI primitive re-exports.
- *
- * This module exposes the raw Reka UI headless components for plugin authors
- * 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):
- *   import { PopoverRoot, PopoverTrigger, ... } from '@openpen/module-api/uikit'
- *   // or directly:
- *   import { ... } from '@openpen/module-api/uikit/primitives'  (if re-exported)
- *
- * WARNING: Walking this layer means you must manually handle:
- *   - Modal manager mutual exclusion
- *   - ControlBar animation auto-close (inject CONTROL_BAR_ANIMATING_KEY)
- *   - Mouse passthrough guard (usePassthroughGuard)
- *   - Teleport target (inject WRAPPER_EL_KEY)
- *
- * See docs/reference/uikit.md for the full trade-off description.
- *
- * All v1.0 high-level wrappers are implemented — prefer them over
- * the corresponding primitive:
- *   Popover    → AppPopover
- *   Dialog     → AppDialog
- *   Slider     → AppSlider
- *   Switch     → AppToggle
- *   RadioGroup → AppSegmented
- *   Select     → AppSelect
- *   Tooltip    → AppTooltip
- *   Tabs       → AppTabs
- */
-
-// ── Popover ──────────────────────────────────────────────────────────────────
-export {
-  PopoverRoot,
-  PopoverTrigger,
-  PopoverPortal,
-  PopoverContent,
-  PopoverArrow,
-  PopoverClose,
-  PopoverAnchor,
-} from 'reka-ui'
-
-// ── Dialog (Modal) ────────────────────────────────────────────────────────────
-export {
-  DialogRoot,
-  DialogTrigger,
-  DialogPortal,
-  DialogContent,
-  DialogOverlay,
-  DialogClose,
-  DialogTitle,
-  DialogDescription,
-} from 'reka-ui'
-
-// ── Slider ────────────────────────────────────────────────────────────────────
-export {
-  SliderRoot,
-  SliderTrack,
-  SliderRange,
-  SliderThumb,
-} from 'reka-ui'
-
-// ── Switch (Toggle) ───────────────────────────────────────────────────────────
-export {
-  SwitchRoot,
-  SwitchThumb,
-} from 'reka-ui'
-
-// ── RadioGroup (Segmented) ────────────────────────────────────────────────────
-export {
-  RadioGroupRoot,
-  RadioGroupItem,
-  RadioGroupIndicator,
-} from 'reka-ui'
-
-// ── Select ────────────────────────────────────────────────────────────────────
-export {
-  SelectRoot,
-  SelectTrigger,
-  SelectPortal,
-  SelectContent,
-  SelectViewport,
-  SelectItem,
-  SelectItemText,
-  SelectItemIndicator,
-  SelectLabel,
-  SelectGroup,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-  SelectArrow,
-  SelectValue,
-  SelectIcon,
-} from 'reka-ui'
-
-// ── Tooltip ───────────────────────────────────────────────────────────────────
-export {
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-  TooltipPortal,
-  TooltipContent,
-  TooltipArrow,
-} from 'reka-ui'
-
-// ── Tabs ──────────────────────────────────────────────────────────────────────
-export {
-  TabsRoot,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from 'reka-ui'
-
-// ── NumberField (numeric spinner with +/- buttons) ────────────────────────────
-export {
-  NumberFieldRoot,
-  NumberFieldInput,
-  NumberFieldIncrement,
-  NumberFieldDecrement,
-} from 'reka-ui'
-
-// ── TagsInput (chip / token input) ────────────────────────────────────────────
-export {
-  TagsInputRoot,
-  TagsInputInput,
-  TagsInputItem,
-  TagsInputItemText,
-  TagsInputItemDelete,
-  TagsInputClear,
-} from 'reka-ui'
-
-// ── Combobox (searchable dropdown with free-text input) ───────────────────────
-export {
-  ComboboxRoot,
-  ComboboxAnchor,
-  ComboboxInput,
-  ComboboxTrigger,
-  ComboboxPortal,
-  ComboboxContent,
-  ComboboxViewport,
-  ComboboxItem,
-  ComboboxItemIndicator,
-  ComboboxGroup,
-  ComboboxLabel,
-  ComboboxSeparator,
-  ComboboxEmpty,
-  ComboboxArrow,
-  ComboboxCancel,
-} from 'reka-ui'