@edc-motor/ui 0.4.27 → 0.4.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,15 +33,21 @@
     "access": "public"
   },
   "dependencies": {
-    "axios": "^1.7.0",
-    "@tiptap/vue-3": "^2.11.0",
-    "@tiptap/starter-kit": "^2.11.0",
     "@tiptap/extension-image": "^2.11.0",
-    "@tiptap/pm": "^2.11.0"
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
+    "@tiptap/extension-underline": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "@tiptap/vue-3": "^2.11.0",
+    "axios": "^1.7.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
     "@lucide/vue": "^1.0.0",
+    "vue": "^3.5.0",
     "vue-router": "^5.0.0"
   }
 }

package/scss/components/_form-field.scss

@@ -1,5 +1,10 @@
 @use "tokens" as *;
 
+// Chevron de lucide (`chevron-down`) como máscara: el color lo pone
+// `background-color` (mask solo usa el canal alfa del SVG), así que
+// funciona igual en claro/oscuro y en cualquier tema de juego.
+$icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+
 // Estilo compartido de los elementos de formulario (portado de kontuan):
 // BaseInput, BaseTextarea, BaseSelect y TranslatableInput.
 .form-field {
@@ -49,6 +54,9 @@
     resize: vertical;
   }
 
+  // Indicador del select: chevron (lucide `chevron-down`) pintado por
+  // máscara — así toma el color de $text-3 (claro/oscuro y temas de
+  // juego) sin depender de un SVG con el color grabado.
   &__select-wrapper {
     position: relative;
     &::after {
@@ -56,12 +64,18 @@
       position: absolute;
       right: $input-padding-x;
       top: 50%;
+      width: 16px;
+      height: 16px;
       transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid $text-3;
+      background-color: $text-3;
+      -webkit-mask-image: $icon-chevron-down;
+      mask-image: $icon-chevron-down;
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      mask-position: center;
+      -webkit-mask-size: contain;
+      mask-size: contain;
       pointer-events: none;
     }
   }

package/scss/components/_rich-content.scss

@@ -49,6 +49,15 @@
     li + li { margin-block-start: $space-1; }
   }
 
+  // Cita: borde a la izquierda + texto atenuado en cursiva (mismo criterio
+  // que la vista de edición de RichTextInput).
+  blockquote {
+    padding-left: $space-4;
+    border-left: 3px solid $border-strong;
+    color: $text-2;
+    font-style: italic;
+  }
+
   // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
   img.rt-icon {
     display: inline-block;
@@ -57,4 +66,29 @@
     vertical-align: -0.24em;
     margin: 0 1px;
   }
+
+  // Tabla del wysiwyg: ancho completo, bordes finos y cabecera destacada.
+  // `display: block` + `overflow-x: auto` en la propia tabla (no en un
+  // envoltorio aparte: menos marcado extra) evita que desborde en estrecho
+  // sin perder el ancho completo cuando sí cabe. Las clases de fila que
+  // use cada juego (p. ej. `green-bg`) las estila el JUEGO, no el motor.
+  table {
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+    margin-block: $space-3;
+    border-collapse: collapse;
+
+    td,
+    th {
+      padding: $space-2 $space-3;
+      border: 1px solid $border;
+      text-align: left;
+    }
+
+    th {
+      font-weight: $k-fw-semibold;
+      background: $surface-2;
+    }
+  }
 }

package/scss/components/_rich-text.scss

@@ -69,9 +69,49 @@
     outline: none;
   }
 
-  // Selector de iconos del juego.
+  // Selector de iconos del juego (y el mismo contenedor sirve de anclaje
+  // para el mini-popover del enlace).
   &__picker { position: relative; display: inline-flex; }
 
+  // Mini-popover del enlace: input de URL + botón de aplicar, misma
+  // posición/estética que el panel de iconos.
+  &__link-popover {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    // `width: max-content` (no simplemente `auto`): dentro de un ancla tan
+    // angosta como el propio botón (`.rich-text__picker`), el algoritmo de
+    // shrink-to-fit de un absoluto con solo `left` fijado lo recorta al
+    // ancho del ancla — el input de 220px quedaba aplastado a ~35px.
+    width: max-content;
+    padding: $space-1;
+    background: $surface;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+  }
+
+  &__link-input {
+    width: 220px;
+    height: 30px;
+    padding: 0 $space-2;
+    border: 1px solid $input-border;
+    border-radius: $radius-sm;
+    background: $input-bg;
+    color: $input-text;
+    font-size: $fs-13;
+
+    &:focus {
+      outline: none;
+      border-color: $input-border-focus;
+      box-shadow: $input-focus-ring;
+    }
+  }
+
   &__icons {
     position: absolute;
     top: calc(100% + 4px);
@@ -118,10 +158,44 @@
 
       > * + * { margin-top: 0.6em; }
       h2 { font-size: $fs-18; font-weight: $k-fw-semibold; }
+      h3 { font-size: $fs-16; font-weight: $k-fw-semibold; }
+      h4, h5 { font-size: $fs-14; font-weight: $k-fw-semibold; }
       ul, ol { padding-left: 1.4em; }
       ul { list-style: disc; }
       ol { list-style: decimal; }
       a { color: $accent-500; text-decoration: underline; }
+      blockquote {
+        padding-left: $space-3;
+        border-left: 3px solid $border-strong;
+        color: $text-2;
+        font-style: italic;
+      }
+
+      // Tabla: visible y editable (bordes finos, cabecera destacada). Sin
+      // resize de columnas (Table.configure resizable:false), así que no
+      // hace falta CSS para la asa.
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+
+        td, th {
+          min-width: 1em;
+          padding: $space-1 $space-2;
+          border: 1px solid $border-strong;
+          vertical-align: top;
+        }
+
+        th {
+          background: $surface-2;
+          font-weight: $k-fw-semibold;
+          text-align: left;
+        }
+
+        .selectedCell {
+          background: color-mix(in srgb, $accent-500 12%, transparent);
+        }
+      }
 
       // Iconos insertados: en línea con el texto.
       img.rt-icon {

package/src/components/RichTextInput.vue

@@ -1,15 +1,38 @@
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount, onMounted } from 'vue'
+import { computed, ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
+import { useDropdownPanel } from '../composables/useDropdownPanel'
+import UnderlineExtension from '@tiptap/extension-underline'
+import LinkExtension from '@tiptap/extension-link'
+import TableExtension from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableHeader from '@tiptap/extension-table-header'
+import TableCell from '@tiptap/extension-table-cell'
 import {
   Bold,
   Italic,
   Strikethrough,
+  Underline as UnderlineIcon,
   Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
   List,
   ListOrdered,
+  Quote,
+  Indent,
+  Outdent,
+  Link as LinkIcon,
+  Unlink,
+  Table as TableIcon,
+  Rows3,
+  TableRowsSplit,
+  Columns3,
+  TableColumnsSplit,
+  TableProperties,
+  Trash2,
   Undo2,
   Redo2,
   Smile,
@@ -19,7 +42,10 @@ import {
 // Editor de texto enriquecido (WYSIWYG) basado en TipTap (DC-09).
 // v-model = HTML. Agnóstico de i18n. Si se pasan `icons`, muestra un selector
 // para insertar iconos del juego (como en CDL): se insertan como <img.rt-icon>.
-// Incluye un toggle para editar en modo visual o directamente el HTML.
+// Incluye un toggle para editar en modo visual o directamente el HTML (para
+// pegar HTML ya hecho, p. ej. una tabla) y soporte de tablas completo
+// (insertar, filas/columnas, cabecera, borrar). El HTML que sale de aquí NO
+// se sanea en cliente: pasa por `HtmlSanitizer` (core) al guardar.
 export interface RichIcon {
   name: string
   url: string
@@ -30,9 +56,27 @@ export interface RichTextLabels {
   bold: string
   italic: string
   strike: string
-  heading: string
+  underline: string
+  heading2: string
+  heading3: string
+  heading4: string
+  heading5: string
   bulletList: string
   orderedList: string
+  blockquote: string
+  indent: string
+  outdent: string
+  link: string
+  unlink: string
+  linkUrl: string
+  linkApply: string
+  insertTable: string
+  addRow: string
+  removeRow: string
+  addColumn: string
+  removeColumn: string
+  toggleHeaderRow: string
+  deleteTable: string
   undo: string
   redo: string
   insertIcon: string
@@ -43,9 +87,27 @@ const defaultLabels: RichTextLabels = {
   bold: 'Negrita',
   italic: 'Cursiva',
   strike: 'Tachado',
-  heading: 'Título',
+  underline: 'Subrayado',
+  heading2: 'Título 2',
+  heading3: 'Título 3',
+  heading4: 'Título 4',
+  heading5: 'Título 5',
   bulletList: 'Lista',
   orderedList: 'Lista numerada',
+  blockquote: 'Cita',
+  indent: 'Sangrar',
+  outdent: 'Quitar sangría',
+  link: 'Enlace',
+  unlink: 'Quitar enlace',
+  linkUrl: 'URL del enlace',
+  linkApply: 'Aplicar',
+  insertTable: 'Insertar tabla',
+  addRow: 'Añadir fila',
+  removeRow: 'Quitar fila',
+  addColumn: 'Añadir columna',
+  removeColumn: 'Quitar columna',
+  toggleHeaderRow: 'Alternar cabecera',
+  deleteTable: 'Borrar tabla',
   undo: 'Deshacer',
   redo: 'Rehacer',
   insertIcon: 'Insertar icono',
@@ -74,7 +136,23 @@ const editor = useEditor({
   content: props.modelValue,
   editable: !props.disabled,
   extensions: [
-    StarterKit,
+    StarterKit.configure({ heading: { levels: [2, 3, 4, 5] } }),
+    UnderlineExtension,
+    // Enlaces: no se navega al hacer click dentro del editor (openOnClick),
+    // y TODOS llevan target="_blank" + rel="noopener noreferrer" por
+    // defecto (también los mailto: — ahí son inocuos, pero así no hace
+    // falta distinguir el esquema al aplicarlos).
+    LinkExtension.configure({
+      openOnClick: false,
+      autolink: false,
+      HTMLAttributes: { target: '_blank', rel: 'noopener noreferrer' },
+    }),
+    // Tablas: sin resize de columnas (el asa de arrastre metía ruido visual
+    // y no hace falta para el caso de uso del editor).
+    TableExtension.configure({ resizable: false }),
+    TableRow,
+    TableHeader,
+    TableCell,
     // Los iconos son la única imagen que se inserta: en línea y con clase fija.
     Image.configure({ inline: true, HTMLAttributes: { class: 'rt-icon' } }),
   ],
@@ -98,6 +176,34 @@ watch(
   (d) => editor.value?.setEditable(!d),
 )
 
+/** Alterna un nivel de título (o vuelve a párrafo si ya lo era). */
+function toggleHeading(level: 2 | 3 | 4 | 5) {
+  editor.value?.chain().focus().toggleHeading({ level }).run()
+}
+
+/** Sangrar: solo tiene sentido dentro de un item de lista (anida la sublista). */
+function indent() {
+  editor.value?.chain().focus().sinkListItem('listItem').run()
+}
+function canIndent(): boolean {
+  return !!editor.value?.can().sinkListItem('listItem')
+}
+
+/** Quitar sangría: en una lista, la saca un nivel; si no, saca de la cita. */
+function outdent() {
+  const e = editor.value
+  if (!e) return
+  if (e.isActive('listItem')) e.chain().focus().liftListItem('listItem').run()
+  else if (e.isActive('blockquote')) e.chain().focus().lift('blockquote').run()
+}
+function canOutdent(): boolean {
+  const e = editor.value
+  if (!e) return false
+  if (e.isActive('listItem')) return e.can().liftListItem('listItem')
+  if (e.isActive('blockquote')) return e.can().lift('blockquote')
+  return false
+}
+
 const tools = computed(() => [
   {
     key: 'bold',
@@ -120,13 +226,41 @@ const tools = computed(() => [
     run: () => editor.value?.chain().focus().toggleStrike().run(),
     active: () => editor.value?.isActive('strike'),
   },
+  {
+    key: 'underline',
+    icon: UnderlineIcon,
+    title: t.value.underline,
+    run: () => editor.value?.chain().focus().toggleUnderline().run(),
+    active: () => editor.value?.isActive('underline'),
+  },
   {
     key: 'h2',
     icon: Heading2,
-    title: t.value.heading,
-    run: () => editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),
+    title: t.value.heading2,
+    run: () => toggleHeading(2),
     active: () => editor.value?.isActive('heading', { level: 2 }),
   },
+  {
+    key: 'h3',
+    icon: Heading3,
+    title: t.value.heading3,
+    run: () => toggleHeading(3),
+    active: () => editor.value?.isActive('heading', { level: 3 }),
+  },
+  {
+    key: 'h4',
+    icon: Heading4,
+    title: t.value.heading4,
+    run: () => toggleHeading(4),
+    active: () => editor.value?.isActive('heading', { level: 4 }),
+  },
+  {
+    key: 'h5',
+    icon: Heading5,
+    title: t.value.heading5,
+    run: () => toggleHeading(5),
+    active: () => editor.value?.isActive('heading', { level: 5 }),
+  },
   {
     key: 'ul',
     icon: List,
@@ -141,18 +275,110 @@ const tools = computed(() => [
     run: () => editor.value?.chain().focus().toggleOrderedList().run(),
     active: () => editor.value?.isActive('orderedList'),
   },
+  {
+    key: 'blockquote',
+    icon: Quote,
+    title: t.value.blockquote,
+    run: () => editor.value?.chain().focus().toggleBlockquote().run(),
+    active: () => editor.value?.isActive('blockquote'),
+  },
+])
+
+// Controles de tabla contextuales: solo con el cursor DENTRO de una tabla
+// (salvo "insertar", que se deshabilita si ya lo está — no hay tablas
+// anidadas).
+const tableTools = computed(() => [
+  {
+    key: 'addRow',
+    icon: Rows3,
+    title: t.value.addRow,
+    run: () => editor.value?.chain().focus().addRowAfter().run(),
+  },
+  {
+    key: 'removeRow',
+    icon: TableRowsSplit,
+    title: t.value.removeRow,
+    run: () => editor.value?.chain().focus().deleteRow().run(),
+  },
+  {
+    key: 'addColumn',
+    icon: Columns3,
+    title: t.value.addColumn,
+    run: () => editor.value?.chain().focus().addColumnAfter().run(),
+  },
+  {
+    key: 'removeColumn',
+    icon: TableColumnsSplit,
+    title: t.value.removeColumn,
+    run: () => editor.value?.chain().focus().deleteColumn().run(),
+  },
+  {
+    key: 'toggleHeaderRow',
+    icon: TableProperties,
+    title: t.value.toggleHeaderRow,
+    run: () => editor.value?.chain().focus().toggleHeaderRow().run(),
+  },
+  {
+    key: 'deleteTable',
+    icon: Trash2,
+    title: t.value.deleteTable,
+    run: () => editor.value?.chain().focus().deleteTable().run(),
+  },
 ])
 
+function insertTable() {
+  editor.value?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+}
+
 // --- Selector de iconos ---
 const pickerOpen = ref(false)
-const pickerRef = ref<HTMLElement>()
+const pickerRef = ref<HTMLElement | null>(null)
+const iconsPanelRef = ref<HTMLElement | null>(null)
+// Top layer (popover): dentro de un modal, el overflow del cuerpo recortaba
+// el panel y no se podían elegir todos los iconos. Ancho propio, sin igualar
+// al trigger.
+useDropdownPanel(pickerRef, iconsPanelRef, pickerOpen, { matchWidth: false })
 
 function insertIcon(icon: RichIcon) {
   editor.value?.chain().focus().setImage({ src: icon.url, alt: icon.name, title: icon.name }).run()
   pickerOpen.value = false
 }
+
+// --- Enlaces: mini-popover con la URL (mismo patrón que el selector de
+// iconos: botón + panel flotante, cierra con Escape o click fuera) ---
+const linkPopoverOpen = ref(false)
+const linkPickerRef = ref<HTMLElement | null>(null)
+const linkPanelRef = ref<HTMLElement | null>(null)
+useDropdownPanel(linkPickerRef, linkPanelRef, linkPopoverOpen, { matchWidth: false })
+const linkInputRef = ref<HTMLInputElement>()
+const linkUrlInput = ref('')
+
+function toggleLinkPopover() {
+  if (linkPopoverOpen.value) {
+    linkPopoverOpen.value = false
+    return
+  }
+  linkUrlInput.value = (editor.value?.getAttributes('link').href as string) ?? ''
+  pickerOpen.value = false
+  linkPopoverOpen.value = true
+  void nextTick(() => linkInputRef.value?.focus())
+}
+
+function applyLink() {
+  const url = linkUrlInput.value.trim()
+  if (url) editor.value?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  else editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+  linkPopoverOpen.value = false
+}
+
+function removeLink() {
+  editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+}
+
 function onClickOutside(e: MouseEvent) {
-  if (pickerRef.value && !pickerRef.value.contains(e.target as Node)) pickerOpen.value = false
+  const target = e.target as Node
+  if (pickerRef.value && !pickerRef.value.contains(target)) pickerOpen.value = false
+  if (linkPickerRef.value && !linkPickerRef.value.contains(target)) linkPopoverOpen.value = false
 }
 onMounted(() => document.addEventListener('click', onClickOutside))
 onBeforeUnmount(() => {
@@ -168,11 +394,13 @@ function toggleSource() {
     // Entrar a modo HTML: cargar el HTML actual.
     sourceHtml.value = editor.value?.isEmpty ? '' : (editor.value?.getHTML() ?? '')
   } else {
-    // Volver a visual: aplicar el HTML editado al editor.
+    // Volver a visual: aplicar el HTML editado al editor (pasará por el
+    // saneador del servidor al guardar; aquí no hace falta sanear).
     editor.value?.commands.setContent(sourceHtml.value || '', false)
   }
   source.value = !source.value
   pickerOpen.value = false
+  linkPopoverOpen.value = false
 }
 
 function onSourceInput(value: string) {
@@ -197,6 +425,98 @@ function onSourceInput(value: string) {
         >
           <component :is="tool.icon" :size="16" />
         </button>
+
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.indent"
+          :disabled="disabled || !canIndent()"
+          @click="indent"
+        >
+          <Indent :size="16" />
+        </button>
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.outdent"
+          :disabled="disabled || !canOutdent()"
+          @click="outdent"
+        >
+          <Outdent :size="16" />
+        </button>
+
+        <span class="rich-text__sep" />
+
+        <!-- Enlace: botón + mini-popover con la URL -->
+        <div ref="linkPickerRef" class="rich-text__picker">
+          <button
+            type="button"
+            class="rich-text__tool"
+            :class="{ 'rich-text__tool--active': editor?.isActive('link') || linkPopoverOpen }"
+            :title="t.link"
+            :disabled="disabled"
+            @click="toggleLinkPopover"
+          >
+            <LinkIcon :size="16" />
+          </button>
+          <div
+            v-if="linkPopoverOpen"
+            ref="linkPanelRef"
+            class="rich-text__link-popover"
+            popover="manual"
+          >
+            <input
+              ref="linkInputRef"
+              v-model="linkUrlInput"
+              type="text"
+              class="rich-text__link-input"
+              :placeholder="t.linkUrl"
+              @keydown.enter.prevent="applyLink"
+              @keydown.escape.prevent="linkPopoverOpen = false"
+            />
+            <button type="button" class="rich-text__tool" :title="t.linkApply" @click="applyLink">
+              <LinkIcon :size="14" />
+            </button>
+          </div>
+        </div>
+        <button
+          v-if="editor?.isActive('link')"
+          type="button"
+          class="rich-text__tool"
+          :title="t.unlink"
+          :disabled="disabled"
+          @click="removeLink"
+        >
+          <Unlink :size="16" />
+        </button>
+
+        <span class="rich-text__sep" />
+
+        <!-- Tabla: insertar siempre visible (deshabilitado dentro de otra
+             tabla); el resto de controles solo con el cursor DENTRO -->
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.insertTable"
+          :disabled="disabled || editor?.isActive('table')"
+          @click="insertTable"
+        >
+          <TableIcon :size="16" />
+        </button>
+        <template v-if="editor?.isActive('table')">
+          <button
+            v-for="tool in tableTools"
+            :key="tool.key"
+            type="button"
+            class="rich-text__tool"
+            :title="tool.title"
+            :disabled="disabled"
+            @click="tool.run()"
+          >
+            <component :is="tool.icon" :size="16" />
+          </button>
+        </template>
+
         <span class="rich-text__sep" />
         <button
           type="button"
@@ -231,7 +551,7 @@ function onSourceInput(value: string) {
             >
               <Smile :size="16" />
             </button>
-            <div v-if="pickerOpen" class="rich-text__icons">
+            <div v-if="pickerOpen" ref="iconsPanelRef" class="rich-text__icons" popover="manual">
               <button
                 v-for="icon in icons"
                 :key="icon.url"

package/src/composables/useDropdownPanel.ts

@@ -20,7 +20,14 @@ export function useDropdownPanel(
   anchor: Ref<HTMLElement | null>,
   panel: Ref<HTMLElement | null>,
   open: Ref<boolean>,
+  options: {
+    /** Igualar el ancho del panel al del trigger (los select). Los popovers
+     *  con ancho propio (selector de iconos, popover del enlace) lo apagan:
+     *  conservan su ancho y solo se CLAMPEA su left para no salirse. */
+    matchWidth?: boolean
+  } = {},
 ) {
+  const { matchWidth = true } = options
   const GAP = 4 // $space-1: aire entre trigger y panel, como el CSS absolute
 
   /** Ancla el panel bajo el trigger (o encima, si abajo no cabe y arriba sí). */
@@ -29,8 +36,11 @@ export function useDropdownPanel(
     const p = panel.value
     if (!a || !p) return
     const r = a.getBoundingClientRect()
-    p.style.width = `${r.width}px`
-    p.style.left = `${r.left}px`
+    if (matchWidth) p.style.width = `${r.width}px`
+    const left = matchWidth
+      ? r.left
+      : Math.max(GAP, Math.min(r.left, window.innerWidth - p.offsetWidth - GAP))
+    p.style.left = `${left}px`
     const height = p.offsetHeight
     const below = window.innerHeight - r.bottom - GAP
     const openUp = height > below && r.top > window.innerHeight - r.bottom