@karibsen/eponyme 0.7.0 → 0.8.1

package/README.md

@@ -13,7 +13,7 @@ Define your content in `eponyme.config.ts`. Eponyme provides defaults, validatio
 
 ## Features
 
-- Type-safe fields for text, slugs, rich text, numbers, booleans, images, links, phone numbers, dates, colors, sections, tabs, and arrays
+- Type-safe fields for text, slugs, rich text, numbers, booleans, images, links, phone numbers, tags, dates, colors, sections, tabs, and arrays
 - Declarative defaults and validation
 - Conditional fields, character counters, and sortable arrays
 - Private drafts with explicit publishing
@@ -169,6 +169,26 @@ field.string({
 })
 ```
 
+### Tags
+
+`field.tags()` holds a short list of values, with suggestions and optional free entry:
+
+```ts
+tags: field.tags({
+  suggestions: ['Nuxt', 'Vue', 'TypeScript'],
+  allowCustom: true,
+  maxItems: 5,
+})
+```
+
+The value type follows the options: closed, it is `('Nuxt' | 'Vue' | 'TypeScript')[]`; with
+`allowCustom`, `string[]`. One array never mixes two types.
+
+The list is normalised **on the server** before the write: trimmed, blanks dropped, duplicates
+folded case-insensitively. A suggestion imposes its spelling, so typing `nuxt` beside a declared
+`Nuxt` yields `Nuxt` and a listing never splits in two. `minItems` and `maxItems` count what is
+left after that folding.
+
 ### Phone numbers
 
 `field.phone()` stores its value in **E.164** — `+33611131143` — whatever format it was typed
@@ -224,17 +244,49 @@ Add the required models to your Prisma schema:
 
 ```prisma
 model Eponyme {
-  name      String    @id
-  data      Json      @db.JsonB
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime?
-  versions  EponymeVersion[]
+  name        String    @id
+  draft       Json      @db.JsonB
+  published   Json      @db.JsonB
+  status      String
+  publishedAt DateTime?
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime?
+  versions    EponymeVersion[]
+  index       EponymeEntryIndex[]
 
   @@index([deletedAt])
+  @@index([publishedAt])
   @@map("eponyme_entries")
 }
 
+/// Filterable values pulled out of the content columns, so a listing can look them up
+/// instead of loading and normalizing every entry of a collection to compare them.
+/// Rewritten for an entry inside the same transaction as the write that changed it.
+model EponymeEntryIndex {
+  entryName String
+  /// "draft" or "published": the two disagree, and a public listing must only see one.
+  version   String
+  key       String
+  /// Case-folded, so a lookup never has to guess which spelling was stored first.
+  value     String
+  entry     Eponyme @relation(fields: [entryName], references: [name], onDelete: Cascade)
+
+  @@id([entryName, version, key, value])
+  @@index([key, version, value])
+  @@map("eponyme_entry_index")
+}
+
+/// Remembers which filterable schema each collection was last indexed against, so the
+/// module can rebuild only what a config change actually invalidated.
+model EponymeIndexState {
+  name        String   @id
+  fingerprint String
+  updatedAt   DateTime @updatedAt
+
+  @@map("eponyme_index_state")
+}
+
 model EponymeVersion {
   id        Int          @id @default(autoincrement())
   entryName String

package/dist/module.d.mts

@@ -97,6 +97,21 @@ interface ModuleOptions {
      * @default 5
      */
     cacheSeconds?: number;
+    /**
+     * Whether the filterable index is rebuilt at startup when the configuration that produced
+     * it has changed.
+     *
+     * @remarks
+     * Leave it on. Ordinary writes keep the index current, but a field that becomes filterable
+     * leaves the entries already stored without a row for it, and a filter on them then answers
+     * "none" instead of failing — a wrong listing rather than an error.
+     *
+     * Turning it off is an escape hatch: if a rebuild ever fails on every boot, this gets the
+     * application up again so `reindexEponymeEntries()` can be run by hand.
+     *
+     * @default true
+     */
+    autoReindex?: boolean;
     /**
      * How long a browser may reuse published content, in seconds. `0` disables it.
      *

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@karibsen/eponyme",
   "configKey": "eponyme",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -30,6 +30,7 @@ const module$1 = defineNuxtModule({
       sessionDurationDays: 7
     },
     cacheSeconds: 5,
+    autoReindex: true,
     browserCacheSeconds: 30,
     cdnCacheSeconds: 300
   },
@@ -89,6 +90,7 @@ const module$1 = defineNuxtModule({
     };
     nuxt.options.runtimeConfig.eponymeContent = {
       cacheSeconds: options.cacheSeconds ?? 5,
+      autoReindex: options.autoReindex ?? true,
       browserCacheSeconds: options.browserCacheSeconds ?? 30,
       cdnCacheSeconds: options.cdnCacheSeconds ?? 300
     };
@@ -126,6 +128,9 @@ Note that '~/' points at ${nuxt.options.srcDir}, so a server module needs '~~/'.
     addImportsDir(resolver.resolve("./runtime/composables"));
     addServerImports([
       { name: "getEponymeSitemapEntries", from: resolver.resolve("./runtime/server/utils/eponyme-sitemap") },
+      // The backfill for the filterable index, which a migration cannot do on its own:
+      // reading a value out of the JSONB envelope needs the configured schema.
+      { name: "reindexEponymeEntries", from: resolver.resolve("./runtime/server/utils/eponyme-reindex") },
       // A `custom` form posts to the host application's own route, so this is what
       // keeps server-side validation as the security boundary.
       { name: "validateEponymeForm", from: resolver.resolve("./runtime/server/utils/eponyme-form") },

package/dist/runtime/components/fields/FieldRenderer.vue

@@ -10,6 +10,7 @@ import RadioField from "./RadioField.vue";
 import RichTextField from "./RichTextField.vue";
 import SelectField from "./SelectField.vue";
 import SlugField from "./SlugField.vue";
+import TagsField from "./TagsField.vue";
 import TextareaField from "./TextareaField.vue";
 import TextField from "./TextField.vue";
 import UrlField from "./UrlField.vue";
@@ -62,6 +63,8 @@ const component = computed(() => {
       return UrlField;
     case "phone":
       return PhoneField;
+    case "tags":
+      return TagsField;
     default:
       return TextField;
   }
@@ -81,6 +84,14 @@ const specificProps = computed(() => {
     case "radio":
     case "checkboxGroup":
       return { options: field.options.options };
+    case "tags":
+      return {
+        suggestions: field.options.suggestions,
+        allowCustom: field.options.allowCustom,
+        minItems: field.options.minItems,
+        maxItems: field.options.maxItems,
+        placeholder: field.options.placeholder
+      };
     case "select":
       return { options: field.options.options, placeholder: field.options.placeholder };
     case "number":

package/dist/runtime/components/fields/RichTextField.vue

@@ -1,10 +1,13 @@
 <script setup>
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, Extension, useEditor } from "@tiptap/vue-3";
 import { computed, ref, watch } from "vue";
 import { useEponymeVariables } from "../../composables/useEponymeVariables";
+import { findEponymeVariableRanges } from "../../utils/variables";
 import EPDropdownMenu from "../ui/EPDropdownMenu.vue";
 import EPFormField from "../ui/EPFormField.vue";
 import EPLinkDialog from "../ui/EPLinkDialog.vue";
@@ -23,6 +26,38 @@ const DownloadableLinkAttribute = Extension.create({
     }];
   }
 });
+const variableHighlightKey = new PluginKey("eponymeVariableHighlight");
+function createVariableDecorations(document) {
+  const decorations = [];
+  document.descendants((node, position) => {
+    if (!node.isText || !node.text) return;
+    for (const range of findEponymeVariableRanges(node.text)) {
+      decorations.push(Decoration.inline(
+        position + range.from,
+        position + range.to,
+        { class: "eponyme-rich-text-variable" }
+      ));
+    }
+  });
+  return DecorationSet.create(document, decorations);
+}
+const EponymeVariableHighlight = Extension.create({
+  name: "eponymeVariableHighlight",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: variableHighlightKey,
+        state: {
+          init: (_, state) => createVariableDecorations(state.doc),
+          apply: (transaction, decorations) => transaction.docChanged ? createVariableDecorations(transaction.doc) : decorations
+        },
+        props: {
+          decorations: (state) => variableHighlightKey.getState(state)
+        }
+      })
+    ];
+  }
+});
 const props = defineProps({
   id: { type: String, required: true },
   modelValue: { type: null, required: false },
@@ -55,6 +90,7 @@ const editor = useEditor({
       }
     }),
     DownloadableLinkAttribute,
+    EponymeVariableHighlight,
     Placeholder.configure({ placeholder: props.placeholder }),
     Image.configure({ HTMLAttributes: { class: "eponyme-rich-text-image" } })
   ],
@@ -244,5 +280,5 @@ const tools = computed(() => {
 </template>
 
 <style scoped>
-.rich-text-tool{align-items:center;background:transparent;border:0;border-radius:.45rem;color:var(--ep-color-muted-ep,#8d8d8d);cursor:pointer;display:flex;font-family:inherit;font-size:.75rem;font-weight:650;height:2rem;justify-content:center;min-width:2rem;padding:0 .55rem;transition:color .15s ease,background-color .15s ease}.rich-text-tool.is-active,.rich-text-tool:hover{background:var(--ep-color-theme-ep,#1c1c1c);color:#fff}.rich-text-tool:disabled{cursor:not-allowed;opacity:.35}.eponyme-rich-text :deep(.tiptap){color:var(--ep-color-text-ep,#e7e7e7);font-size:.925rem;line-height:1.75;min-height:18rem;outline:none;padding:1.25rem}.eponyme-rich-text :deep(.tiptap>:first-child){margin-top:0}.eponyme-rich-text :deep(.tiptap>:last-child){margin-bottom:0}.eponyme-rich-text :deep(.tiptap h2){font-size:1.5rem;line-height:1.25;margin:1.5rem 0 .75rem}.eponyme-rich-text :deep(.tiptap h3){font-size:1.2rem;line-height:1.3;margin:1.25rem 0 .625rem}.eponyme-rich-text :deep(.tiptap blockquote),.eponyme-rich-text :deep(.tiptap ol),.eponyme-rich-text :deep(.tiptap p),.eponyme-rich-text :deep(.tiptap ul){margin:.75rem 0}.eponyme-rich-text :deep(.tiptap ol),.eponyme-rich-text :deep(.tiptap ul){padding-left:1.5rem}.eponyme-rich-text :deep(.tiptap blockquote){border-left:2px solid var(--ep-color-muted-ep,#8d8d8d);color:var(--ep-color-muted-ep,#8d8d8d);padding-left:1rem}.eponyme-rich-text :deep(.tiptap img){border-radius:.75rem;height:auto;max-width:100%}.eponyme-rich-text :deep(.tiptap img.ProseMirror-selectednode){outline:2px solid #fff;outline-offset:2px}.eponyme-rich-text :deep(.tiptap a){color:#fff;text-decoration:underline;text-underline-offset:3px}.eponyme-rich-text :deep(.tiptap p.is-editor-empty:first-child:before){color:var(--ep-color-muted-ep,#8d8d8d);content:attr(data-placeholder);float:left;height:0;pointer-events:none}
+.rich-text-tool{align-items:center;background:transparent;border:0;border-radius:.45rem;color:var(--ep-color-muted-ep,#8d8d8d);cursor:pointer;display:flex;font-family:inherit;font-size:.75rem;font-weight:650;height:2rem;justify-content:center;min-width:2rem;padding:0 .55rem;transition:color .15s ease,background-color .15s ease}.rich-text-tool.is-active,.rich-text-tool:hover{background:var(--ep-color-theme-ep,#1c1c1c);color:#fff}.rich-text-tool:disabled{cursor:not-allowed;opacity:.35}.eponyme-rich-text :deep(.tiptap){color:var(--ep-color-text-ep,#e7e7e7);font-size:.925rem;line-height:1.75;min-height:18rem;outline:none;padding:1.25rem}.eponyme-rich-text :deep(.tiptap>:first-child){margin-top:0}.eponyme-rich-text :deep(.tiptap>:last-child){margin-bottom:0}.eponyme-rich-text :deep(.tiptap h2){font-size:1.5rem;line-height:1.25;margin:1.5rem 0 .75rem}.eponyme-rich-text :deep(.tiptap h3){font-size:1.2rem;line-height:1.3;margin:1.25rem 0 .625rem}.eponyme-rich-text :deep(.tiptap blockquote),.eponyme-rich-text :deep(.tiptap ol),.eponyme-rich-text :deep(.tiptap p),.eponyme-rich-text :deep(.tiptap ul){margin:.75rem 0}.eponyme-rich-text :deep(.tiptap ol),.eponyme-rich-text :deep(.tiptap ul){padding-left:1.5rem}.eponyme-rich-text :deep(.tiptap blockquote){border-left:2px solid var(--ep-color-muted-ep,#8d8d8d);color:var(--ep-color-muted-ep,#8d8d8d);padding-left:1rem}.eponyme-rich-text :deep(.tiptap img){border-radius:.75rem;height:auto;max-width:100%}.eponyme-rich-text :deep(.tiptap img.ProseMirror-selectednode){outline:2px solid #fff;outline-offset:2px}.eponyme-rich-text :deep(.tiptap a){color:#fff;text-decoration:underline;text-underline-offset:3px}.eponyme-rich-text :deep(.eponyme-rich-text-variable){color:#ff41c5;font-weight:650}@supports (((-webkit-background-clip:text) or (background-clip:text)) or (-webkit-background-clip:text)){.eponyme-rich-text :deep(.eponyme-rich-text-variable){background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(90deg,#fe7af0,#ff41c5);background-position:0 50%;background-size:200% 100%;color:transparent;-webkit-text-fill-color:transparent}}@media (prefers-reduced-motion:no-preference){@supports (((-webkit-background-clip:text) or (background-clip:text)) or (-webkit-background-clip:text)){.eponyme-rich-text :deep(.eponyme-rich-text-variable){animation:eponyme-variable-gradient 2.5s ease-in-out infinite alternate}}}@keyframes eponyme-variable-gradient{to{background-position:100% 50%}}@media (forced-colors:active){.eponyme-rich-text :deep(.eponyme-rich-text-variable){background:none;color:linktext;text-decoration:underline;-webkit-text-fill-color:currentcolor}}.eponyme-rich-text :deep(.tiptap p.is-editor-empty:first-child:before){color:var(--ep-color-muted-ep,#8d8d8d);content:attr(data-placeholder);float:left;height:0;pointer-events:none}
 </style>

package/dist/runtime/components/fields/TagsField.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    suggestions?: readonly string[];
+    allowCustom?: boolean;
+    minItems?: number;
+    maxItems?: number;
+    placeholder?: string;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/TagsField.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+import EPFormField from "../ui/EPFormField.vue";
+import EPTagsInput from "../ui/EPTagsInput.vue";
+import { normalizeEponymeTags } from "../../utils/normalize-tags";
+const props = defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  suggestions: { type: Array, required: false },
+  allowCustom: { type: Boolean, required: false },
+  minItems: { type: Number, required: false },
+  maxItems: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const tags = computed(() => Array.isArray(props.modelValue) ? props.modelValue.filter((tag) => typeof tag === "string") : []);
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <ClientOnly>
+      <EPTagsInput
+        :model-value="tags"
+        :suggestions="suggestions"
+        :allow-custom="allowCustom"
+        :placeholder="placeholder"
+        :max="maxItems"
+        :required="required"
+        :disabled="disabled"
+        :invalid="Boolean(errors.length)"
+        @update:model-value="emit('update:modelValue', normalizeEponymeTags($event, { suggestions, allowCustom }))"
+      />
+      <template #fallback>
+        <div class="ep:min-h-12 ep:rounded-xl ep:border ep:border-border-ep ep:bg-selected-ep" />
+      </template>
+    </ClientOnly>
+    <p
+      v-if="maxItems !== void 0"
+      class="ep:mt-1.5 ep:mb-0 ep:text-right ep:text-[11px] ep:text-muted-ep"
+    >
+      {{ tags.length }} / {{ maxItems }}
+    </p>
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/TagsField.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    suggestions?: readonly string[];
+    allowCustom?: boolean;
+    minItems?: number;
+    maxItems?: number;
+    placeholder?: string;
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPAlertDialog.d.vue.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    open?: boolean;
+    label: string;
+    description?: string;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    confirmVariant?: 'primary' | 'secondary' | 'danger';
+    confirmLoading?: boolean;
+    confirmDisabled?: boolean;
+    closeOnConfirm?: boolean;
+};
+type __VLS_Slots = {
+    trigger?: () => unknown;
+    default?: () => unknown;
+    confirm?: (props: {
+        confirm: () => void;
+        loading: boolean;
+        disabled: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/EPAlertDialog.vue

@@ -0,0 +1,66 @@
+<script setup>
+import EPButton from "./EPButton.vue";
+import EPDialog from "./EPDialog.vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  cancelLabel: { type: String, required: false, default: "Cancel" },
+  confirmLabel: { type: String, required: false, default: "Confirm" },
+  confirmVariant: { type: String, required: false, default: "primary" },
+  confirmLoading: { type: Boolean, required: false },
+  confirmDisabled: { type: Boolean, required: false },
+  closeOnConfirm: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:open", "cancel", "confirm"]);
+defineSlots();
+function cancel() {
+  emit("cancel");
+  emit("update:open", false);
+}
+function confirm() {
+  emit("confirm");
+  if (props.closeOnConfirm) emit("update:open", false);
+}
+</script>
+
+<template>
+  <EPDialog
+    :open="open"
+    :title="label"
+    :description="description"
+    role="alertdialog"
+    @update:open="emit('update:open', $event)"
+  >
+    <template
+      v-if="$slots.trigger"
+      #trigger
+    >
+      <slot name="trigger" />
+    </template>
+
+    <slot />
+
+    <div class="ep:mt-6 ep:flex ep:justify-end ep:gap-2">
+      <EPButton
+        :label="cancelLabel"
+        variant="ghost"
+        @click="cancel"
+      />
+      <slot
+        name="confirm"
+        :confirm="confirm"
+        :loading="confirmLoading"
+        :disabled="confirmDisabled"
+      >
+        <EPButton
+          :label="confirmLabel"
+          :variant="confirmVariant"
+          :loading="confirmLoading"
+          :disabled="confirmDisabled"
+          @click="confirm"
+        />
+      </slot>
+    </div>
+  </EPDialog>
+</template>

package/dist/runtime/components/ui/EPAlertDialog.vue.d.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    open?: boolean;
+    label: string;
+    description?: string;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    confirmVariant?: 'primary' | 'secondary' | 'danger';
+    confirmLoading?: boolean;
+    confirmDisabled?: boolean;
+    closeOnConfirm?: boolean;
+};
+type __VLS_Slots = {
+    trigger?: () => unknown;
+    default?: () => unknown;
+    confirm?: (props: {
+        confirm: () => void;
+        loading: boolean;
+        disabled: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/EPDialog.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     open?: boolean;
     title: string;
     description?: string;
+    role?: 'dialog' | 'alertdialog';
 };
 declare var __VLS_16: {}, __VLS_47: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ui/EPDialog.vue

@@ -4,7 +4,8 @@ import EPButton from "./EPButton.vue";
 defineProps({
   open: { type: Boolean, required: false },
   title: { type: String, required: true },
-  description: { type: String, required: false }
+  description: { type: String, required: false },
+  role: { type: String, required: false }
 });
 const emit = defineEmits(["update:open"]);
 </script>
@@ -22,7 +23,10 @@ const emit = defineEmits(["update:open"]);
     </DialogTrigger>
     <DialogPortal>
       <DialogOverlay class="eponyme-dialog-overlay ep:fixed ep:inset-0 ep:z-50 ep:bg-black/65 ep:backdrop-blur-sm" />
-      <DialogContent class="eponyme-dialog-content eponyme-portal ep:fixed ep:top-1/2 ep:left-1/2 ep:z-50 ep:w-[min(32rem,calc(100vw-2rem))] ep:rounded-2xl ep:border-0 ep:bg-theme-ep ep:p-6 ep:font-sans ep:text-text-ep ep:outline-none">
+      <DialogContent
+        :role="role"
+        class="eponyme-dialog-content eponyme-portal ep:fixed ep:top-1/2 ep:left-1/2 ep:z-50 ep:w-[min(32rem,calc(100vw-2rem))] ep:rounded-2xl ep:border-0 ep:bg-theme-ep ep:p-6 ep:font-sans ep:text-text-ep ep:outline-none"
+      >
         <DialogTitle class="ep:text-xl ep:font-semibold ep:text-white">
           {{ title }}
         </DialogTitle>

package/dist/runtime/components/ui/EPDialog.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     open?: boolean;
     title: string;
     description?: string;
+    role?: 'dialog' | 'alertdialog';
 };
 declare var __VLS_16: {}, __VLS_47: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/ui/EPTagsInput.d.vue.ts

@@ -0,0 +1,27 @@
+/**
+ * Chips plus a row of suggestion buttons, knowing nothing about Eponyme.
+ *
+ * The suggestions the developer configured are not a filtered autocomplete list: they're
+ * rendered as standing buttons below the input so an editor can see and click them directly,
+ * with no typing or listbox navigation required. `TagsInputRoot` still owns the chips, their
+ * keyboard handling and the delete buttons.
+ */
+type __VLS_Props = {
+    modelValue?: string[];
+    /** Rendered as clickable buttons below the input, minus the ones already picked. */
+    suggestions?: readonly string[];
+    /** Whether a value outside `suggestions` may be added. */
+    allowCustom?: boolean;
+    placeholder?: string;
+    max?: number;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPTagsInput.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { computed, ref } from "vue";
+import {
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  TagsInputRoot
+} from "reka-ui";
+const props = defineProps({
+  modelValue: { type: Array, required: false, default: () => [] },
+  suggestions: { type: Array, required: false, default: () => [] },
+  allowCustom: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  max: { type: Number, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const search = ref("");
+const available = computed(() => props.suggestions.filter((suggestion) => !props.modelValue.some((tag) => same(tag, suggestion))));
+const full = computed(() => props.max !== void 0 && props.modelValue.length >= props.max);
+function same(left, right) {
+  return left.trim().toLocaleLowerCase() === right.trim().toLocaleLowerCase();
+}
+function add(value) {
+  const tag = value.trim();
+  if (!tag || full.value) return;
+  const suggested = props.suggestions.find((suggestion) => same(suggestion, tag));
+  if (!suggested && !props.allowCustom) return;
+  if (props.modelValue.some((existing) => same(existing, tag))) return;
+  emit("update:modelValue", [...props.modelValue, suggested ?? tag]);
+  search.value = "";
+}
+function remove(tag) {
+  emit("update:modelValue", props.modelValue.filter((existing) => existing !== tag));
+}
+function onEnter(event) {
+  if (!search.value.trim()) return;
+  event.preventDefault();
+  add(search.value);
+}
+</script>
+
+<template>
+  <div>
+    <TagsInputRoot
+      :model-value="modelValue"
+      :max="max"
+      :required="required"
+      :disabled="disabled"
+      :add-on-paste="false"
+      class="ep:flex ep:min-h-12 ep:w-full ep:flex-wrap ep:items-center ep:gap-1.5 ep:rounded-xl ep:border ep:border-border-ep ep:bg-selected-ep ep:px-2 ep:py-2 ep:transition ep:focus-within:border-muted-ep ep:focus-within:ring-2 ep:focus-within:ring-white/10 ep:aria-invalid:border-danger-ep"
+      :aria-invalid="invalid || void 0"
+      @remove-tag="remove"
+    >
+      <TagsInputItem
+        v-for="tag in modelValue"
+        :key="tag"
+        :value="tag"
+        class="ep:flex ep:items-center ep:gap-1 ep:rounded-lg ep:bg-white/10 ep:py-1 ep:pr-1 ep:pl-2.5 ep:text-sm ep:text-white"
+      >
+        <TagsInputItemText />
+        <TagsInputItemDelete
+          :aria-label="`Remove ${tag}`"
+          class="ep:flex ep:size-5 ep:cursor-pointer ep:items-center ep:justify-center ep:rounded-md ep:border-0 ep:bg-transparent ep:text-muted-ep ep:transition ep:hover:bg-white/10 ep:hover:text-white"
+        >
+          <Icon
+            name="mingcute:close-line"
+            class="ep:size-3.5"
+            aria-hidden="true"
+          />
+        </TagsInputItemDelete>
+      </TagsInputItem>
+
+      <input
+        v-model="search"
+        :placeholder="full ? void 0 : placeholder"
+        :disabled="disabled || full"
+        class="ep:min-w-24 ep:flex-1 ep:border-0 ep:bg-transparent ep:px-2 ep:text-sm ep:text-white ep:outline-none ep:placeholder:text-muted-ep ep:disabled:cursor-not-allowed"
+        @keydown.enter="onEnter"
+      >
+    </TagsInputRoot>
+
+    <div
+      v-if="available.length"
+      class="ep:mt-2 ep:flex ep:flex-wrap ep:gap-1.5"
+    >
+      <button
+        v-for="suggestion in available"
+        :key="suggestion"
+        type="button"
+        :disabled="disabled || full"
+        class="ep:cursor-pointer ep:rounded-lg ep:border ep:border-border-ep ep:bg-transparent ep:px-2.5 ep:py-1 ep:text-sm ep:text-muted-ep ep:transition ep:hover:border-muted-ep ep:hover:text-white ep:disabled:cursor-not-allowed ep:disabled:opacity-50"
+        @click="add(suggestion)"
+      >
+        {{ suggestion }}
+      </button>
+    </div>
+  </div>
+</template>