@karibsen/eponyme 0.6.0 → 0.8.0

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

@@ -0,0 +1,22 @@
+import type { PhoneFieldOptions } from '../../types/field.js';
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    countries?: PhoneFieldOptions['countries'];
+    defaultCountry?: PhoneFieldOptions['defaultCountry'];
+    detectCountry?: boolean;
+    autocomplete?: PhoneFieldOptions['autocomplete'];
+    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/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/EPLinkEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
+import { middleEllipsis } from "../../utils/middle-ellipsis";
 import EPButton from "./EPButton.vue";
 import EPLinkDialog from "./EPLinkDialog.vue";
 import EPTooltip from "./EPTooltip.vue";
@@ -51,7 +52,7 @@ function openLink() {
     />
     <div class="ep:min-w-0 ep:flex-1">
       <p class="ep:m-0 ep:truncate ep:text-sm ep:text-white">
-        {{ value.href || "No link configured" }}
+        {{ value.href ? middleEllipsis(value.href, 40) : "No link configured" }}
       </p>
       <p class="ep:mt-0.5 ep:mb-0 ep:text-[11px] ep:text-muted-ep">
         {{ value.type === "internal" ? "Internal" : "External" }} · {{ value.download ? "Download" : value.openInNewTab ? "New tab" : "Same tab" }}

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>

package/dist/runtime/components/ui/EPTagsInput.vue.d.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/composables/useEponymeCollection.d.ts

@@ -1,15 +1,27 @@
 import type { ComputedRef, Ref } from 'vue';
 import type eponymeConfig from '#eponyme/config';
-import type { EponymeCollectionDataByName, EponymeCollectionName } from '../types/index.js';
+import type { EponymeCollectionDataByName, EponymeCollectionFilter, EponymeCollectionName } from '../types/index.js';
 import type { EponymeCollectionEntry, EponymeSortDirection, EponymeStatus, EponymeVersionSelector } from '../server/services/eponyme-store.js';
 type ConfigCollectionName = EponymeCollectionName<typeof eponymeConfig>;
 /** Sortable keys: the entry metadata plus every field of the collection. */
 export type EponymeCollectionSortKey<Name extends ConfigCollectionName> = 'updatedAt' | 'publishedAt' | 'title' | 'slug' | (keyof EponymeCollectionDataByName<typeof eponymeConfig, Name> & string);
+/**
+ * The `where` a collection accepts: only the fields stored in a form the index can compare,
+ * each with the values that field can actually hold. The server rejects anything else, so
+ * the two agree rather than one silently widening the other.
+ */
+export type EponymeCollectionFilterInput<Name extends ConfigCollectionName> = EponymeCollectionFilter<typeof eponymeConfig, Name>;
 export interface UseEponymeCollectionOptions<Name extends ConfigCollectionName> {
     take?: number;
     skip?: number;
     orderBy?: EponymeCollectionSortKey<Name>;
     order?: EponymeSortDirection;
+    /**
+     * Keeps only the entries matching every key. A list of values matches any of them; `not`
+     * excludes; `contains` matches a substring; and `gte`/`lte`/`gt`/`lt` compare as text,
+     * which is exact for `field.date()`, pinned by validation to `YYYY-MM-DD`.
+     */
+    where?: EponymeCollectionFilterInput<Name>;
 }
 export interface UseEponymeCollectionResult<Data extends Record<string, unknown>> {
     entries: ComputedRef<EponymeCollectionEntry<Data>[]>;

package/dist/runtime/composables/useEponymeCollection.js

@@ -3,18 +3,43 @@ import { useEventListener } from "@vueuse/core";
 import { computed } from "vue";
 import { readPreviewQuery, readPreviewVersion } from "../utils/preview.js";
 import { cacheForPublicRead } from "../utils/hydration-cache.js";
+function serializeFilter(where) {
+  const query = {};
+  const parts = [];
+  const write = (name, values) => {
+    if (!values.length) return;
+    query[name] = values;
+    parts.push(`${name}=${values.join("|")}`);
+  };
+  const list = (value) => (Array.isArray(value) ? value : [value]).map(String).filter(Boolean);
+  for (const key of Object.keys(where ?? {}).sort()) {
+    const condition = where[key];
+    if (condition === void 0 || condition === null) continue;
+    if (typeof condition !== "object" || Array.isArray(condition)) {
+      write(`where[${key}]`, list(condition));
+      continue;
+    }
+    for (const operator of Object.keys(condition).sort()) {
+      write(`where[${key}][${operator}]`, list(condition[operator]));
+    }
+  }
+  return { query, key: parts.join(",") };
+}
 export function useEponymeCollection(name, options = {}) {
   const requestFetch = useRequestFetch();
+  const filter = serializeFilter(options.where);
   const query = {
     take: options.take,
     skip: options.skip,
     orderBy: options.orderBy,
-    order: options.order
+    order: options.order,
+    ...filter.query
   };
   const result = useAsyncData(
-    // The options belong in the key, otherwise two differently sorted calls to the
-    // same collection would share one cache entry.
-    `eponyme:collection:public:${name}:${options.take ?? ""}:${options.skip ?? ""}:${options.orderBy ?? ""}:${options.order ?? ""}`,
+    // Every option belongs in the key, otherwise two differently sorted — or differently
+    // filtered — calls to the same collection would share one cache entry and one would
+    // silently answer with the other's results.
+    `eponyme:collection:public:${name}:${options.take ?? ""}:${options.skip ?? ""}:${options.orderBy ?? ""}:${options.order ?? ""}:${filter.key}`,
     // Always the published listing, which is publicly cacheable: the browser cache may answer it.
     () => requestFetch(`/api/eponyme-collections/${name}`, { query }),
     { getCachedData: cacheForPublicRead(true) }

package/dist/runtime/composables/useEponymeForm.d.ts

@@ -24,10 +24,6 @@ export interface UseEponymeFormResult<Data extends Record<string, unknown>> {
     submitted: Ref<boolean>;
     /** Name of the trap field to render hidden, or `false` when disabled. */
     honeypot: string | false;
-    /** True when the form declares `captcha: true`; render a widget and fill `captchaToken`. */
-    requiresCaptcha: boolean;
-    /** Bind this to the captcha widget, for example `<NuxtTurnstile v-model="captchaToken" />`. */
-    captchaToken: Ref<string>;
     submit: () => Promise<boolean>;
     reset: () => void;
 }