vue-fillable-text 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Evgeniia Iaroslavtseva
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# vue-fillable-text
+
+Typed Vue 3 components for documents that mix prose with interactive input and select gaps. It is the Vue counterpart of `react-fillable-text` and uses the same version 1 document schema.
+
+## Installation
+
+```bash
+npm install vue-fillable-text
+```
+
+Import the styles once:
+
+```ts
+import "vue-fillable-text/styles.css";
+```
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FillableText, type FillableDocument, type FillableValues } from "vue-fillable-text";
+import "vue-fillable-text/styles.css";
+
+const document: FillableDocument = {
+  version: 1,
+  content: [
+    { type: "text", text: "The capital of France is " },
+    { type: "gap", id: "capital", control: "input", originalText: "Paris", placeholder: "Enter a city…" },
+    { type: "text", text: "." },
+  ],
+};
+const values = ref<FillableValues>({});
+</script>
+
+<template>
+  <FillableText v-model="values" :document="document" @gap-change="(id, value) => console.log(id, value)" />
+</template>
+```
+
+## Editor
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FillableTextEditor, type FillableDocument } from "vue-fillable-text";
+
+const document = ref<FillableDocument>({ version: 1, content: [{ type: "text", text: "Select text to create a gap." }] });
+</script>
+
+<template><FillableTextEditor v-model="document" /></template>
+```
+
+The editor supports input and select gaps, plain-text paste, keyboard deletion, and undo/redo with Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z.
+
+## Components and events
+
+- `FillableText`: `v-model` contains answers; accepts `document`, `disabled`, `gapStates`, `getGapState`, and `components`; emits `gap-change`.
+- `FillableTextEditor`: `v-model` contains the document; also supports uncontrolled use with `defaultValue`; emits `change`, `gap-create`, `gap-update`, `gap-remove`, and `selection-change`.
+- Custom controls receive `modelValue`, `id`, `state`, `disabled`, `ariaLabel`, plus `placeholder` or `options`, and must emit `update:modelValue`.
+- Core helpers: `createGap`, `updateGap`, `removeGap`, `deleteGap`, `serialize`, `deserialize`, `validateDocument`, and `toPlainText`.
+
+Documents can be exchanged directly with `react-fillable-text`; answers are deliberately stored separately.
+
+## Development
+
+```bash
+npm install
+npm test
+npm run typecheck
+npm run build
+npm pack --dry-run
+```
+
+## License
+
+MIT

package/dist/FillableText.vue.d.ts

@@ -0,0 +1,22 @@
+import type { FillableComponents, FillableDocument, FillableValues, GapNode, GapState } from "./types";
+type __VLS_Props = {
+    document: FillableDocument;
+    modelValue: FillableValues;
+    components?: FillableComponents;
+    disabled?: boolean;
+    class?: string;
+    gapStates?: Partial<Record<string, GapState>>;
+    getGapState?: (gap: GapNode) => GapState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (values: FillableValues) => any;
+    gapChange: (id: string, value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((values: FillableValues) => any) | undefined;
+    onGapChange?: ((id: string, value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FillableTextEditor.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FillableDocument, GapNode, TextSelection } from "./types";
+type __VLS_Props = {
+    modelValue?: FillableDocument;
+    defaultValue?: FillableDocument;
+    readOnly?: boolean;
+    class?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (document: FillableDocument) => any;
+    change: (document: FillableDocument) => any;
+    gapCreate: (gap: GapNode) => any;
+    gapUpdate: (gap: GapNode) => any;
+    gapRemove: (gap: GapNode) => any;
+    selectionChange: (selection: TextSelection | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((document: FillableDocument) => any) | undefined;
+    onChange?: ((document: FillableDocument) => any) | undefined;
+    onGapCreate?: ((gap: GapNode) => any) | undefined;
+    onGapUpdate?: ((gap: GapNode) => any) | undefined;
+    onGapRemove?: ((gap: GapNode) => any) | undefined;
+    onSelectionChange?: ((selection: TextSelection | null) => any) | undefined;
+}>, {
+    class: string;
+    defaultValue: FillableDocument;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/core.d.ts

@@ -0,0 +1,12 @@
+import type { ContentNode, FillableDocument, GapNode, InputGapNode, SelectGapNode, TextSelection, ValidationResult } from "./types";
+export declare const EMPTY_DOCUMENT: FillableDocument;
+export declare function normalizeContent(nodes: ContentNode[]): ContentNode[];
+export declare function toPlainText(document: FillableDocument): string;
+export declare function serialize(document: FillableDocument): string;
+export declare function deserialize(value: string | unknown): FillableDocument;
+export declare function validateDocument(value: unknown): ValidationResult;
+export declare function createGap(document: FillableDocument, selection: TextSelection, gap: Omit<InputGapNode, "type" | "originalText"> | Omit<SelectGapNode, "type" | "originalText">): FillableDocument;
+export declare function updateGap(document: FillableDocument, id: string, gap: GapNode): FillableDocument;
+export declare function removeGap(document: FillableDocument, id: string): FillableDocument;
+export declare function deleteGap(document: FillableDocument, id: string): FillableDocument;
+export declare function slugifyOption(label: string): string;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "./styles.css";
+export { default as FillableText } from "./FillableText.vue";
+export { default as FillableTextEditor } from "./FillableTextEditor.vue";
+export * from "./types";
+export * from "./core";

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+import type { Component } from "vue";
+export interface FillableDocument {
+    version: 1;
+    content: ContentNode[];
+}
+export type ContentNode = TextNode | GapNode;
+export interface TextNode {
+    type: "text";
+    text: string;
+}
+export interface SelectOption {
+    id: string;
+    label: string;
+    value: string;
+}
+export interface InputGapNode {
+    type: "gap";
+    id: string;
+    control: "input";
+    originalText: string;
+    placeholder?: string;
+}
+export interface SelectGapNode {
+    type: "gap";
+    id: string;
+    control: "select";
+    originalText: string;
+    options: SelectOption[];
+}
+export type GapNode = InputGapNode | SelectGapNode;
+export type FillableValues = Record<string, string>;
+export type GapState = "default" | "success" | "error";
+export interface GapControlProps {
+    id: string;
+    modelValue: string;
+    disabled?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+    state?: GapState;
+}
+export interface SelectGapControlProps extends GapControlProps {
+    options: SelectOption[];
+}
+export interface FillableComponents {
+    input?: Component;
+    select?: Component;
+}
+export interface TextSelection {
+    text: string;
+    from: number;
+    to: number;
+}
+export interface ValidationError {
+    path: string;
+    message: string;
+}
+export interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+}

package/dist/vue-fillable-text.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),fe={key:0},ve=["data-state","aria-invalid","aria-label","value","disabled","placeholder","size","onInput"],he=["data-state"],ye=["aria-invalid","aria-label","value","disabled","onChange"],xe=["value"],ke=e.defineComponent({__name:"FillableText",props:{document:{},modelValue:{},components:{},disabled:{type:Boolean,default:!1},class:{default:""},gapStates:{},getGapState:{}},emits:["update:modelValue","gapChange"],setup(a,{emit:r}){const g=a,c=r,b=e.computed(()=>["fillable-text",g.class]);function m(p,y){c("update:modelValue",{...g.modelValue,[p]:y}),c("gapChange",p,y)}function k(p){return g.getGapState?.(p)??g.gapStates?.[p.id]??"default"}return(p,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.document.content,(s,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:s.type==="gap"?s.id:`text-${u}`},[s.type==="text"?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString(s.text),1)):s.control==="input"&&a.components?.input?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.components?.input),{key:1,id:s.id,"model-value":a.modelValue[s.id]??"",disabled:a.disabled,placeholder:s.placeholder??"Type answer","aria-label":`Fill in ${s.originalText}`,state:k(s),"onUpdate:modelValue":h=>m(s.id,h)},null,8,["id","model-value","disabled","placeholder","aria-label","state","onUpdate:modelValue"])):s.control==="input"?(e.openBlock(),e.createElementBlock("input",{key:2,class:"fillable-text__input","data-state":k(s),"aria-invalid":k(s)==="error"||void 0,"aria-label":`Fill in ${s.originalText}`,value:a.modelValue[s.id]??"",disabled:a.disabled,placeholder:s.placeholder??"Type answer",size:Math.max(8,(a.modelValue[s.id]??"").length||(s.placeholder??"").length||8),onInput:h=>m(s.id,h.target.value)},null,40,ve)):a.components?.select?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.components?.select),{key:3,id:s.id,"model-value":a.modelValue[s.id]??"",disabled:a.disabled,options:s.options,"aria-label":`Fill in ${s.originalText}`,state:k(s),"onUpdate:modelValue":h=>m(s.id,h)},null,8,["id","model-value","disabled","options","aria-label","state","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("span",{key:4,class:"fillable-text__select-wrap","data-state":k(s)},[e.createElementVNode("select",{class:"fillable-text__select","aria-invalid":k(s)==="error"||void 0,"aria-label":`Fill in ${s.originalText}`,value:a.modelValue[s.id]??"",disabled:a.disabled,onChange:h=>m(s.id,h.target.value)},[y[0]||(y[0]=e.createElementVNode("option",{value:"",disabled:""},"Select an option",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,h=>(e.openBlock(),e.createElementBlock("option",{key:h.id,value:h.value},e.toDisplayString(h.label),9,xe))),128))],40,ye)],8,he))],64))),128))],2))}}),be={version:1,content:[{type:"text",text:""}]};function B(a){const r=[];for(const g of a)if(g.type==="text"){if(!g.text)continue;const c=r.at(-1);c?.type==="text"?c.text+=g.text:r.push({...g})}else r.push(g);return r.length?r:[{type:"text",text:""}]}function O(a){return a.content.map(r=>r.type==="text"?r.text:r.originalText).join("")}function Ee(a){return JSON.stringify(a,null,2)}function Ce(a){const r=typeof a=="string"?JSON.parse(a):a,g=J(r);if(!g.valid)throw new Error(g.errors.map(c=>`${c.path}: ${c.message}`).join("; "));return r}function A(a){return typeof a=="object"&&a!==null&&!Array.isArray(a)}function J(a){const r=[];if(!A(a))return{valid:!1,errors:[{path:"",message:"Document must be an object"}]};if(a.version!==1&&r.push({path:"version",message:"Only schema version 1 is supported"}),!Array.isArray(a.content))return{valid:!1,errors:[...r,{path:"content",message:"Content must be an array"}]};const g=new Set;return a.content.forEach((c,b)=>{const m=`content[${b}]`;if(!A(c)||c.type!=="text"&&c.type!=="gap")return void r.push({path:m,message:"Unknown node type"});if(c.type==="text"){typeof c.text!="string"&&r.push({path:`${m}.text`,message:"Text must be a string"});return}if(typeof c.id!="string"||!c.id.trim()?r.push({path:`${m}.id`,message:"Gap id is required"}):g.has(c.id)?r.push({path:`${m}.id`,message:"Gap id must be unique"}):g.add(c.id),(typeof c.originalText!="string"||!c.originalText)&&r.push({path:`${m}.originalText`,message:"Original text is required"}),c.control!=="input"&&c.control!=="select"&&r.push({path:`${m}.control`,message:"Control must be input or select"}),c.control==="select")if(!Array.isArray(c.options)||c.options.length<2)r.push({path:`${m}.options`,message:"Select gap requires at least 2 options"});else{const k=new Set;c.options.forEach((p,y)=>{const s=`${m}.options[${y}]`;(!A(p)||typeof p.label!="string"||!p.label.trim())&&r.push({path:`${s}.label`,message:"Option label is required"}),!A(p)||typeof p.value!="string"||!p.value.trim()?r.push({path:`${s}.value`,message:"Option value is required"}):k.has(p.value)?r.push({path:`${s}.value`,message:"Option value must be unique"}):k.add(p.value)})}}),{valid:r.length===0,errors:r}}function Ne(a){return a.type==="text"?a.text.length:a.originalText.length}function Y(a,r,g){if(r.from<0||r.to<=r.from||r.to>O(a).length)throw new Error("Selection is outside the document");let c=0;const b=[];let m=!1;for(const k of a.content){const p=c,y=p+Ne(k);if(c=y,r.to<=p||r.from>=y){b.push(k);continue}if(k.type==="gap")throw new Error("A selection cannot overlap an existing gap");if(r.from<p||r.to>y)throw new Error("A gap must be created inside one text node");const s=r.from-p,u=r.to-p;s&&b.push({type:"text",text:k.text.slice(0,s)}),b.push({type:"gap",...g,originalText:k.text.slice(s,u)}),u<k.text.length&&b.push({type:"text",text:k.text.slice(u)}),m=!0}if(!m)throw new Error("No editable text selected");return{version:1,content:B(b)}}function W(a,r,g){return{version:1,content:a.content.map(c=>c.type==="gap"&&c.id===r?g:c)}}function Q(a,r){return{version:1,content:B(a.content.map(g=>g.type==="gap"&&g.id===r?{type:"text",text:g.originalText}:g))}}function I(a,r){return{version:1,content:B(a.content.filter(g=>g.type!=="gap"||g.id!==r))}}function U(a){return a.trim().toLocaleLowerCase().replace(/[^\p{L}\p{N}]+/gu,"-").replace(/^-|-$/g,"")}const we=["aria-label"],Ve=["contenteditable"],Te={key:0,"data-text":""},Be={key:0,"data-line-break":""},Se={"data-line":""},$e=["tabindex","data-gap-id","data-gap-length","data-gap-original","aria-label","onClick"],De={key:0,class:"editor-gap__chevron",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},Oe={class:"editor-meta","aria-live":"polite"},Me={key:0,class:"editor-hint"},Ae={class:"gap-dialog",role:"dialog","aria-modal":"true","aria-labelledby":"gap-dialog-title"},Fe={class:"eyebrow"},Le={id:"gap-dialog-title"},Re={class:"segmented",role:"radiogroup","aria-label":"Gap type"},ze=["aria-checked"],Ge=["aria-checked"],Ie={key:1,class:"options-block"},Ue=["value","placeholder","aria-label","onInput"],qe=["aria-label","onClick"],je={key:2,class:"form-error",role:"alert"},Pe={key:0,class:"danger-actions"},Ke=e.defineComponent({__name:"FillableTextEditor",props:{modelValue:{},defaultValue:{default:()=>({version:1,content:[{type:"text",text:"Start writing…"}]})},readOnly:{type:Boolean,default:!1},class:{default:""}},emits:["update:modelValue","change","gapCreate","gapUpdate","gapRemove","selectionChange"],setup(a,{emit:r}){const g=a,c=r,b=e.ref(g.defaultValue),m=e.computed(()=>g.modelValue??b.value),k=e.ref(),p=e.ref(),y=e.ref(null),s=e.ref(null),u=e.ref(null),h=e.ref(null),E=e.ref(""),S=e.ref(null),F=[],L=[];let w=null;const Z=e.computed(()=>m.value.content.reduce((t,n)=>t+$(n),0)),q=e.computed(()=>m.value.content.filter(t=>t.type==="gap").length);function ee(t){return`${t}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,6)}`}function $(t){return t.type==="text"?t.text.length:t.originalText.length}function C(t,n=!0){n&&(F.push(m.value),L.length=0),g.modelValue===void 0&&(b.value=t),c("update:modelValue",t),c("change",t)}function V(){y.value=null,s.value=null,c("selectionChange",null)}function j(t){let n=0;for(const l of m.value.content){const o=n,d=o+$(l);if(n=d,l.type==="gap"&&l.id===t)return{gap:l,start:o,end:d}}return null}function te(t,n,l){let o=0;const d=[];for(const i of m.value.content){const f=o,v=f+$(i);if(o=v,i.type!=="gap")continue;(t===n&&(l==="backward"?v===t:f===t)||t<n&&t<v&&n>f)&&d.push({gap:i,start:f,end:v})}return l==="backward"?d.at(-1)??null:d[0]??null}function ne(t,n){let l=0;const o=[];for(const d of m.value.content){const i=l;if(l=i+$(d),d.type==="gap"){o.push(d);continue}const v=Math.max(0,t-i),x=Math.min(d.text.length,n-i);o.push(v<x?{type:"text",text:d.text.slice(0,v)+d.text.slice(x)}:d)}return{version:1,content:B(o)}}function le(t,n){let l=0,o=!1;const d=[];for(const i of m.value.content){const f=l,v=f+$(i);if(l=v,!o&&i.type==="text"&&t>=f&&t<=v){const x=t-f;d.push({type:"text",text:i.text.slice(0,x)},{type:"text",text:n},{type:"text",text:i.text.slice(x)}),o=!0}else d.push(i)}return o||d.push({type:"text",text:n}),{version:1,content:B(d)}}function R(t){const n=new Map(m.value.content.filter(i=>i.type==="gap").map(i=>[i.id,i])),l=[],o=i=>{const f=i.replaceAll("​","");if(!f)return;const v=l.at(-1);v?.type==="text"?v.text+=f:l.push({type:"text",text:f})},d=i=>{if(i instanceof HTMLElement){if(i.dataset.gapId){const f=n.get(i.dataset.gapId);f?l.push(f):o(i.dataset.gapOriginal??"");return}if(i.tagName==="BR"){o(`
+`);return}if(i.tagName==="DIV"||i.tagName==="P"){const f=l.at(-1);l.length&&!(f?.type==="text"&&f.text.endsWith(`
+`))&&o(`
+`)}}if(i.nodeType===Node.TEXT_NODE){o(i.textContent??"");return}i.childNodes.forEach(d)};return t.childNodes.forEach(d),B(l)}function P(t){return t.nodeType===Node.TEXT_NODE?t.textContent?.replaceAll("​","").length??0:t instanceof HTMLElement&&t.dataset.gapLength!==void 0?Number(t.dataset.gapLength):t instanceof HTMLElement&&t.tagName==="BR"?1:Array.from(t.childNodes).reduce((n,l)=>n+P(l),0)}function T(t,n,l){if(n!==t&&!t.contains(n))return null;const o=t.ownerDocument.createRange();return o.selectNodeContents(t),o.setEnd(n,l),R(o.cloneContents()).reduce((d,i)=>d+$(i),0)}function ae(t,n){let l=n,o=null;const d=v=>{if(!o){if(v.nodeType===Node.TEXT_NODE){const x=v.textContent??"",N=x.replaceAll("​","").length;l<=N?o={node:v,offset:N?l:x.length}:l-=N;return}if(v instanceof HTMLElement&&(v.tagName==="BR"||v.dataset.gapLength!==void 0)){const x=P(v),N=v.parentNode;l<=x&&N?o={node:N,offset:Array.from(N.childNodes).indexOf(v)+(l?1:0)}:l-=x;return}v.childNodes.forEach(d)}};d(t);const i=o??{node:t,offset:t.childNodes.length},f=t.ownerDocument.createRange();f.setStart(i.node,i.offset),f.collapse(!0),t.ownerDocument.getSelection()?.removeAllRanges(),t.ownerDocument.getSelection()?.addRange(f)}e.watch(m,async()=>{w!==null&&(await e.nextTick(),p.value&&ae(p.value,w),w=null)});function M(){if(g.readOnly||!p.value||!k.value)return;const t=window.getSelection();if(!t||!t.rangeCount||t.isCollapsed)return V();const n=t.getRangeAt(0);if(!p.value.contains(n.commonAncestorContainer))return V();const l=T(p.value,n.startContainer,n.startOffset),o=T(p.value,n.endContainer,n.endOffset);if(l===null||o===null||o<=l)return V();const d=O(m.value).slice(l,o);if(!d.trim())return V();const i=n.getBoundingClientRect(),f=k.value.getBoundingClientRect(),v=i.top-f.top-52,x=v<8?"below":"above";y.value={text:d,from:l,to:o},s.value={left:Math.min(Math.max(i.left-f.left+i.width/2,76),f.width-76),top:x==="below"?i.bottom-f.top+10:v,placement:x},c("selectionChange",y.value)}function oe(t){t.preventDefault(),y.value&&(h.value=null,u.value={id:ee("gap"),originalText:y.value.text,control:"input",placeholder:`Enter ${y.value.text.toLocaleLowerCase()}…`,options:[y.value.text,""]},E.value="")}function ie(t){g.readOnly||(h.value=t.id,u.value={id:t.id,originalText:t.originalText,control:t.control,placeholder:t.control==="input"?t.placeholder??"":"",options:t.control==="select"?t.options.map(n=>n.label):[t.originalText,""]},E.value="",V())}function K(t){if(!(!u.value||u.value.control===t)){if(t==="select"){const n=[...u.value.options];n[0]=u.value.originalText,n.length<2&&n.push(""),u.value={...u.value,control:t,options:n}}else u.value={...u.value,control:t,originalText:u.value.options[0]?.trim()||u.value.originalText};E.value=""}}function re(t){if(t.control==="input")return{type:"gap",id:t.id,control:"input",originalText:t.originalText,placeholder:t.placeholder.trim()||void 0};const n=t.options.map((l,o)=>({id:`${t.id}-option-${o+1}`,label:l.trim(),value:U(l)||`option-${o+1}`}));return{type:"gap",id:t.id,control:"select",originalText:n[0].label,options:n}}function se(){if(!u.value)return;let t=u.value;if(t.control==="input"&&!t.originalText.trim())return void(E.value="Original text is required.");if(t.control==="select"){if(!t.options[0]?.trim())return void(E.value="The first option must contain the original text.");const l=t.options.map(d=>d.trim()).filter(Boolean),o=l.map(U);if(l.length<2)return void(E.value="Add at least two non-empty options.");if(new Set(o).size!==o.length)return void(E.value="Every option needs a unique value.");t={...t,options:l}}const n=re(t);try{h.value?(C(W(m.value,h.value,n)),c("gapUpdate",n)):y.value&&(C(Y(m.value,y.value,n)),c("gapCreate",n)),u.value=null,V()}catch(l){E.value=l instanceof Error?l.message:"Could not create gap."}}function H(t){if(!h.value)return;const n=j(h.value);n&&(C(t?I(m.value,h.value):Q(m.value,h.value)),c("gapRemove",n.gap),u.value=null,h.value=null)}function ce(t){const n=t.currentTarget;S.value=null;const l=window.getSelection()?.rangeCount?window.getSelection().getRangeAt(0):null;l&&(w=T(n,l.endContainer,l.endOffset)),C({version:1,content:R(n)})}function ue(t){t.preventDefault();const n=window.getSelection()?.rangeCount?window.getSelection().getRangeAt(0):null;if(!n||!p.value)return;n.deleteContents();const l=window.document.createTextNode(t.clipboardData?.getData("text/plain")??"");n.insertNode(l),n.setStartAfter(l),n.collapse(!0),w=T(p.value,n.endContainer,n.endOffset),C({version:1,content:R(p.value)})}function de(t){t.clipboardData?.setData("text/plain",window.getSelection()?.toString()||O(m.value)),t.preventDefault()}function pe(t){const n=t.metaKey||t.ctrlKey;if(n&&t.key.toLocaleLowerCase()==="z"){t.preventDefault();const D=t.shiftKey?L.pop():F.pop();if(!D)return;(t.shiftKey?F:L).push(m.value),C(D,!1);return}if(t.key==="Enter"&&!t.altKey&&!n&&p.value){const D=window.getSelection()?.rangeCount?window.getSelection().getRangeAt(0):null;if(!D?.collapsed)return;const G=T(p.value,D.endContainer,D.endOffset);if(G===null)return;t.preventDefault(),w=G+1,C(le(G,`
+`)),V();return}if(t.key!=="Backspace"&&t.key!=="Delete"){S.value=null;return}if(t.preventDefault(),!p.value)return;const l=t.key==="Backspace"?"backward":"forward",o=t.target instanceof HTMLElement?t.target.closest("[data-gap-id]"):null,d=o?.dataset.gapId?j(o.dataset.gapId):null,i=window.getSelection()?.rangeCount?window.getSelection().getRangeAt(0):null;if(!i)return;const f=T(p.value,i.startContainer,i.startOffset),v=T(p.value,i.endContainer,i.endOffset);if(f===null||v===null)return;const x=d??te(f,v,l);if(x){S.value===x.gap.id?(w=x.start,C(I(m.value,x.gap.id)),c("gapRemove",x.gap),S.value=null):S.value=x.gap.id;return}const N=O(m.value).length,z=f===v&&l==="backward"?Math.max(0,f-1):f,_=f===v&&l==="forward"?Math.min(N,v+1):v;_>z&&(w=z,C(ne(z,_)))}function me(t,n){u.value&&(u.value.options[t]=n)}function ge(t){u.value&&u.value.options.splice(t,1)}function X(){y.value&&M()}return e.onMounted(()=>window.addEventListener("scroll",X,!0)),e.onBeforeUnmount(()=>window.removeEventListener("scroll",X,!0)),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"shell",ref:k,class:e.normalizeClass(["fillable-editor",g.class])},[s.value&&y.value&&!u.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["selection-toolbar",`selection-toolbar--${s.value.placement}`]),style:e.normalizeStyle({left:`${s.value.left}px`,top:`${s.value.top}px`}),"aria-label":`Turn ${y.value.text} into a gap`,onMousedown:oe},[...n[10]||(n[10]=[e.createElementVNode("span",{"aria-hidden":"true"},"＋",-1),e.createTextVNode(" Add gap ",-1)])],46,we)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"editor",ref:p,class:"fillable-editor__surface",contenteditable:!a.readOnly,spellcheck:"true",role:"textbox","aria-multiline":"true","aria-label":"Fillable text editor",onInput:ce,onSelect:M,onMouseup:M,onKeyup:M,onKeydown:pe,onPaste:ue,onCopy:de},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.content,(l,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l.type==="gap"?l.id:`text-${o}`},[l.type==="text"?(e.openBlock(),e.createElementBlock("span",Te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.text.split(`
+`),(d,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[i>0?(e.openBlock(),e.createElementBlock("br",Be)):e.createCommentVNode("",!0),e.createElementVNode("span",Se,e.toDisplayString(d||"​"),1)],64))),128))])):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",tabindex:a.readOnly?-1:0,contenteditable:"false","data-gap-id":l.id,"data-gap-length":l.originalText.length,"data-gap-original":l.originalText,class:e.normalizeClass(["editor-gap",`editor-gap--${l.control}`,{"editor-gap--keyboard-selected":S.value===l.id}]),"aria-label":`${l.control} gap: ${l.originalText}. Click to edit.`,onClick:d=>ie(l)},[e.createElementVNode("span",null,e.toDisplayString(l.originalText),1),l.control==="select"?(e.openBlock(),e.createElementBlock("svg",De,[...n[11]||(n[11]=[e.createElementVNode("path",{d:"m8 10 4 4 4-4"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("small",null,e.toDisplayString(l.control),1)],10,$e))],64))),128))],40,Ve),e.createElementVNode("div",Oe,[e.createElementVNode("span",null,e.toDisplayString(Z.value)+" characters",1),n[12]||(n[12]=e.createElementVNode("i",null,null,-1)),e.createElementVNode("span",null,e.toDisplayString(q.value)+" "+e.toDisplayString(q.value===1?"gap":"gaps"),1),a.readOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Me,"Select any text to make it fillable"))]),u.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"gap-dialog-backdrop",onMousedown:n[9]||(n[9]=e.withModifiers(l=>u.value=null,["self"]))},[e.createElementVNode("section",Ae,[e.createElementVNode("header",null,[e.createElementVNode("div",null,[e.createElementVNode("span",Fe,e.toDisplayString(h.value?"Gap settings":"New interactive field"),1),e.createElementVNode("h2",Le,e.toDisplayString(h.value?"Edit gap":"Create a gap"),1)]),e.createElementVNode("button",{class:"icon-button","aria-label":"Close",onClick:n[0]||(n[0]=l=>u.value=null)},"×")]),n[19]||(n[19]=e.createElementVNode("label",{class:"field-label"},"Field type",-1)),e.createElementVNode("div",Re,[e.createElementVNode("button",{role:"radio","aria-checked":u.value.control==="input",class:e.normalizeClass({active:u.value.control==="input"}),onClick:n[1]||(n[1]=l=>K("input"))},[...n[13]||(n[13]=[e.createElementVNode("span",{class:"type-icon"},"T",-1),e.createElementVNode("span",null,[e.createElementVNode("strong",null,"Text input"),e.createElementVNode("small",null,"Free-form response")],-1)])],10,ze),e.createElementVNode("button",{role:"radio","aria-checked":u.value.control==="select",class:e.normalizeClass({active:u.value.control==="select"}),onClick:n[2]||(n[2]=l=>K("select"))},[...n[14]||(n[14]=[e.createElementVNode("span",{class:"type-icon"},[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},[e.createElementVNode("path",{d:"M6 7h8M6 12h8M6 17h8"}),e.createElementVNode("path",{d:"m17 9 2 3 2-3"})])],-1),e.createElementVNode("span",null,[e.createElementVNode("strong",null,"Select"),e.createElementVNode("small",null,"Choose from a list")],-1)])],10,Ge)]),u.value.control==="input"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[n[15]||(n[15]=e.createElementVNode("label",{class:"field-label",for:"original-text"},"Original text",-1)),e.withDirectives(e.createElementVNode("input",{id:"original-text","onUpdate:modelValue":n[3]||(n[3]=l=>u.value.originalText=l),class:"dialog-input"},null,512),[[e.vModelText,u.value.originalText]]),n[16]||(n[16]=e.createElementVNode("label",{class:"field-label",for:"placeholder"},"Placeholder",-1)),e.withDirectives(e.createElementVNode("input",{id:"placeholder","onUpdate:modelValue":n[4]||(n[4]=l=>u.value.placeholder=l),class:"dialog-input"},null,512),[[e.vModelText,u.value.placeholder]])],64)):(e.openBlock(),e.createElementBlock("div",Ie,[n[17]||(n[17]=e.createElementVNode("label",{class:"field-label"},[e.createTextVNode("Options "),e.createElementVNode("span",null,"Minimum 2")],-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value.options,(l,o)=>(e.openBlock(),e.createElementBlock("div",{key:o,class:"option-row"},[e.createElementVNode("span",{class:e.normalizeClass(["option-correct-marker",{"option-correct-marker--empty":o!==0}])},"✓",2),e.createElementVNode("input",{class:"dialog-input",value:l,placeholder:o===0?"Original text":"Type an option","aria-label":`Option ${o+1}`,onInput:d=>me(o,d.target.value)},null,40,Ue),e.createElementVNode("button",{class:"icon-button small","aria-label":`Remove option ${o+1}`,onClick:d=>ge(o)},"×",8,qe)]))),128)),e.createElementVNode("button",{class:"add-option",onClick:n[5]||(n[5]=l=>u.value.options.push(""))},"＋ Add option")])),E.value?(e.openBlock(),e.createElementBlock("p",je,e.toDisplayString(E.value),1)):e.createCommentVNode("",!0),e.createElementVNode("footer",null,[h.value?(e.openBlock(),e.createElementBlock("div",Pe,[e.createElementVNode("button",{onClick:n[6]||(n[6]=l=>H(!1))},"Convert to text"),e.createElementVNode("button",{onClick:n[7]||(n[7]=l=>H(!0))},"Delete")])):e.createCommentVNode("",!0),n[18]||(n[18]=e.createElementVNode("span",null,null,-1)),e.createElementVNode("button",{class:"button secondary",onClick:n[8]||(n[8]=l=>u.value=null)},"Cancel"),e.createElementVNode("button",{class:"button primary",onClick:se},e.toDisplayString(h.value?"Save changes":"Create gap"),1)])])],32)):e.createCommentVNode("",!0)],2))}});exports.EMPTY_DOCUMENT=be;exports.FillableText=ke;exports.FillableTextEditor=Ke;exports.createGap=Y;exports.deleteGap=I;exports.deserialize=Ce;exports.normalizeContent=B;exports.removeGap=Q;exports.serialize=Ee;exports.slugifyOption=U;exports.toPlainText=O;exports.updateGap=W;exports.validateDocument=J;

package/dist/vue-fillable-text.css

@@ -0,0 +1 @@
+.fillable-text,.fillable-editor{--fillable-accent: #f0644d;--fillable-accent-dark: #d94e38;--fillable-ink: #17221f;--fillable-muted: #64716d;--fillable-surface: #fffefa;--fillable-line: #d9ded8;--fillable-gap-border: #ee765f;--fillable-gap-background: #fff2ed;--fillable-gap-radius: 8px}.fillable-text *,.fillable-editor *,.gap-dialog-backdrop *{box-sizing:border-box}.fillable-text{font-family:Georgia,serif;font-size:20px;line-height:2.35;white-space:pre-wrap}.fillable-text__input,.fillable-text__select{border:0;outline:0;background:transparent;color:#35413d;font:700 12px ui-sans-serif,system-ui,sans-serif}.fillable-text__input{min-width:100px;margin:0 3px;padding:4px 5px 3px;border-bottom:1.5px solid #b8c0bc;border-radius:5px 5px 0 0;background:#f3f4f1}.fillable-text__input::placeholder{color:#89928e;font-weight:500}.fillable-text__input:focus{background:#f8f9f7;border-bottom-color:#6f7c77;box-shadow:0 2px #6f7c77}.fillable-text__select-wrap{position:relative;display:inline-flex;margin:0 4px;border:1px solid #c3cac6;border-radius:6px;background:#f3f4f1;color:#6f7c77}.fillable-text__select{padding:6px 29px 6px 9px;appearance:none;cursor:pointer}.fillable-text__select-wrap:after{content:"";position:absolute;top:50%;right:11px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}.fillable-text__select-wrap:focus-within{background:#f8f9f7;border-color:#7b8782;box-shadow:0 0 0 3px #4c58531a}.fillable-text__input[data-state=success],.fillable-text__select-wrap[data-state=success]{color:#267454;background:#edf8f2;border-color:#4b9b78}.fillable-text__input[data-state=error],.fillable-text__select-wrap[data-state=error]{color:#a74235;background:#fff0ed;border-color:#d66556}.fillable-text__input:disabled,.fillable-text__select:disabled{cursor:not-allowed;opacity:.58}.fillable-editor{position:relative;display:flex;width:100%;flex-direction:column}.fillable-editor__surface{min-height:180px;outline:none;white-space:pre-wrap;caret-color:var(--fillable-accent);font:23px/2.15 Georgia,serif}.fillable-editor__surface:focus{margin-left:-15px;padding-left:12px;box-shadow:inset 3px 0 #f2b4a7}.editor-gap{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0 4px;padding:4px 9px;border:1.5px solid var(--fillable-gap-border);border-radius:var(--fillable-gap-radius);background:var(--fillable-gap-background);color:#9d3c2b;box-shadow:0 2px #df583f1f;vertical-align:middle;cursor:pointer;font:700 13px/1.4 ui-sans-serif,system-ui,sans-serif}.editor-gap:hover,.editor-gap:focus-visible{outline:3px solid rgba(240,100,77,.16);background:#ffe7de}.editor-gap__chevron{width:14px;height:14px;flex:none}.editor-gap small{position:absolute;top:calc(100% + 5px);left:50%;color:#b2786d;transform:translate(-50%);font-size:7px;letter-spacing:.12em;text-transform:uppercase}.editor-gap--keyboard-selected,.editor-gap--keyboard-selected:hover{outline:3px solid rgba(240,100,77,.28);background:#ffe1d7;box-shadow:0 0 0 1px var(--fillable-accent)}.editor-meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;border-top:1px dashed #d8dcd7;color:#909995;font-size:9px}.editor-meta i{width:3px;height:3px;border-radius:50%;background:#a9b1ae}.editor-hint{margin-left:auto;color:#78837f}.selection-toolbar{position:absolute;z-index:12;display:flex;align-items:center;gap:5px;padding:9px 12px;border:0;border-radius:7px;background:var(--fillable-ink);color:#fff;box-shadow:0 8px 22px #17221f40;transform:translate(-50%);cursor:pointer;font-size:10px;font-weight:750}.selection-toolbar:after{content:"";position:absolute;top:100%;left:50%;border:5px solid transparent;border-top-color:var(--fillable-ink);transform:translate(-50%)}.selection-toolbar--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--fillable-ink)}.gap-dialog-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#111d1a94;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.gap-dialog{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:25px;border-radius:13px;background:#fffefa;color:#17221f;box-shadow:0 24px 80px #00000042;font-family:ui-sans-serif,system-ui,sans-serif}.gap-dialog header{display:flex;align-items:start;justify-content:space-between;margin-bottom:24px}.gap-dialog h2{margin:4px 0 0;font:500 30px Georgia,serif;letter-spacing:-.035em}.gap-dialog .eyebrow{color:#65716d;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.gap-dialog button,.gap-dialog input{font:inherit}.gap-dialog .icon-button{display:grid;place-items:center;padding:6px;border:0;background:transparent;color:#7d8884;cursor:pointer}.gap-dialog .field-label{display:flex;justify-content:space-between;margin:18px 0 7px;color:#61706b;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.gap-dialog .field-label span{color:#9ca5a2;font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none}.gap-dialog .dialog-input{width:100%;height:42px;padding:0 12px;border:1px solid #cfd5d0;border-radius:7px;outline:none;background:#fff;font-size:12px}.gap-dialog .dialog-input:focus{border-color:var(--fillable-accent);box-shadow:0 0 0 3px #f0644d1c}.gap-dialog .segmented{display:grid;grid-template-columns:1fr 1fr;gap:9px}.gap-dialog .segmented button{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #d2d7d2;border-radius:8px;background:#fff;text-align:left;cursor:pointer}.gap-dialog .segmented button.active{border-color:var(--fillable-accent);background:#fff5f1;box-shadow:inset 0 0 0 1px var(--fillable-accent)}.gap-dialog .segmented strong,.gap-dialog .segmented small{display:block}.gap-dialog .segmented strong{font-size:11px}.gap-dialog .segmented small{margin-top:2px;color:#85908c;font-size:9px}.gap-dialog .type-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:6px;background:#f0f2ee;font-family:Georgia,serif;font-weight:700}.gap-dialog .type-icon svg{display:block;width:16px;height:16px}.gap-dialog .segmented .active .type-icon{background:#fadde5;color:var(--fillable-accent-dark)}.gap-dialog .option-row{display:grid;grid-template-columns:24px 1fr 28px;align-items:center;gap:7px;margin-bottom:7px}.gap-dialog .option-correct-marker{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#e9f6ef;color:#267454}.gap-dialog .option-correct-marker--empty{visibility:hidden}.gap-dialog .add-option{display:flex;align-items:center;gap:4px;padding:5px 0;border:0;background:none;color:var(--fillable-accent-dark);cursor:pointer;font-size:10px;font-weight:750}.gap-dialog .form-error{padding:9px 11px;border-radius:6px;background:#fff0eb;color:#bd3c2b;font-size:10px}.gap-dialog footer{display:flex;align-items:center;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid #e1e4df}.gap-dialog footer>span{flex:1}.gap-dialog .button{padding:9px 13px;border:1px solid #ccd2cc;border-radius:7px;background:#fff;cursor:pointer;font-size:10px;font-weight:750}.gap-dialog .button.primary{border-color:var(--fillable-accent);background:var(--fillable-accent);color:#fff}.gap-dialog .button.primary:hover{background:var(--fillable-accent-dark)}.gap-dialog .danger-actions{display:flex;gap:4px}.gap-dialog .danger-actions button{padding:6px;border:0;background:none;color:#a24638;cursor:pointer;font-size:9px}@media(max-width:560px){.fillable-editor__surface{font-size:20px}.editor-hint{display:none}.gap-dialog footer{flex-wrap:wrap}.gap-dialog .danger-actions{width:100%}}

package/dist/vue-fillable-text.js

@@ -0,0 +1,673 @@
+import { defineComponent as ue, computed as z, openBlock as h, createElementBlock as x, normalizeClass as L, Fragment as D, renderList as I, toDisplayString as T, createBlock as ne, resolveDynamicComponent as le, createElementVNode as i, ref as O, watch as Se, onMounted as Ee, onBeforeUnmount as Oe, normalizeStyle as De, createTextVNode as ae, createCommentVNode as A, withModifiers as Ne, withDirectives as oe, vModelText as ie, nextTick as Me } from "vue";
+const Ve = { key: 0 }, Ae = ["data-state", "aria-invalid", "aria-label", "value", "disabled", "placeholder", "size", "onInput"], Le = ["data-state"], Re = ["aria-invalid", "aria-label", "value", "disabled", "onChange"], Fe = ["value"], ut = /* @__PURE__ */ ue({
+  __name: "FillableText",
+  props: {
+    document: {},
+    modelValue: {},
+    components: {},
+    disabled: { type: Boolean, default: !1 },
+    class: { default: "" },
+    gapStates: {},
+    getGapState: {}
+  },
+  emits: ["update:modelValue", "gapChange"],
+  setup(l, { emit: r }) {
+    const g = l, u = r, C = z(() => ["fillable-text", g.class]);
+    function f(d, b) {
+      u("update:modelValue", { ...g.modelValue, [d]: b }), u("gapChange", d, b);
+    }
+    function k(d) {
+      return g.getGapState?.(d) ?? g.gapStates?.[d.id] ?? "default";
+    }
+    return (d, b) => (h(), x("div", {
+      class: L(C.value)
+    }, [
+      (h(!0), x(D, null, I(l.document.content, (s, c) => (h(), x(D, {
+        key: s.type === "gap" ? s.id : `text-${c}`
+      }, [
+        s.type === "text" ? (h(), x("span", Ve, T(s.text), 1)) : s.control === "input" && l.components?.input ? (h(), ne(le(l.components?.input), {
+          key: 1,
+          id: s.id,
+          "model-value": l.modelValue[s.id] ?? "",
+          disabled: l.disabled,
+          placeholder: s.placeholder ?? "Type answer",
+          "aria-label": `Fill in ${s.originalText}`,
+          state: k(s),
+          "onUpdate:modelValue": (y) => f(s.id, y)
+        }, null, 8, ["id", "model-value", "disabled", "placeholder", "aria-label", "state", "onUpdate:modelValue"])) : s.control === "input" ? (h(), x("input", {
+          key: 2,
+          class: "fillable-text__input",
+          "data-state": k(s),
+          "aria-invalid": k(s) === "error" || void 0,
+          "aria-label": `Fill in ${s.originalText}`,
+          value: l.modelValue[s.id] ?? "",
+          disabled: l.disabled,
+          placeholder: s.placeholder ?? "Type answer",
+          size: Math.max(8, (l.modelValue[s.id] ?? "").length || (s.placeholder ?? "").length || 8),
+          onInput: (y) => f(s.id, y.target.value)
+        }, null, 40, Ae)) : l.components?.select ? (h(), ne(le(l.components?.select), {
+          key: 3,
+          id: s.id,
+          "model-value": l.modelValue[s.id] ?? "",
+          disabled: l.disabled,
+          options: s.options,
+          "aria-label": `Fill in ${s.originalText}`,
+          state: k(s),
+          "onUpdate:modelValue": (y) => f(s.id, y)
+        }, null, 8, ["id", "model-value", "disabled", "options", "aria-label", "state", "onUpdate:modelValue"])) : (h(), x("span", {
+          key: 4,
+          class: "fillable-text__select-wrap",
+          "data-state": k(s)
+        }, [
+          i("select", {
+            class: "fillable-text__select",
+            "aria-invalid": k(s) === "error" || void 0,
+            "aria-label": `Fill in ${s.originalText}`,
+            value: l.modelValue[s.id] ?? "",
+            disabled: l.disabled,
+            onChange: (y) => f(s.id, y.target.value)
+          }, [
+            b[0] || (b[0] = i("option", {
+              value: "",
+              disabled: ""
+            }, "Select an option", -1)),
+            (h(!0), x(D, null, I(s.options, (y) => (h(), x("option", {
+              key: y.id,
+              value: y.value
+            }, T(y.label), 9, Fe))), 128))
+          ], 40, Re)
+        ], 8, Le))
+      ], 64))), 128))
+    ], 2));
+  }
+}), ct = { version: 1, content: [{ type: "text", text: "" }] };
+function G(l) {
+  const r = [];
+  for (const g of l)
+    if (g.type === "text") {
+      if (!g.text) continue;
+      const u = r.at(-1);
+      u?.type === "text" ? u.text += g.text : r.push({ ...g });
+    } else r.push(g);
+  return r.length ? r : [{ type: "text", text: "" }];
+}
+function j(l) {
+  return l.content.map((r) => r.type === "text" ? r.text : r.originalText).join("");
+}
+function pt(l) {
+  return JSON.stringify(l, null, 2);
+}
+function dt(l) {
+  const r = typeof l == "string" ? JSON.parse(l) : l, g = Be(r);
+  if (!g.valid) throw new Error(g.errors.map((u) => `${u.path}: ${u.message}`).join("; "));
+  return r;
+}
+function q(l) {
+  return typeof l == "object" && l !== null && !Array.isArray(l);
+}
+function Be(l) {
+  const r = [];
+  if (!q(l)) return { valid: !1, errors: [{ path: "", message: "Document must be an object" }] };
+  if (l.version !== 1 && r.push({ path: "version", message: "Only schema version 1 is supported" }), !Array.isArray(l.content)) return { valid: !1, errors: [...r, { path: "content", message: "Content must be an array" }] };
+  const g = /* @__PURE__ */ new Set();
+  return l.content.forEach((u, C) => {
+    const f = `content[${C}]`;
+    if (!q(u) || u.type !== "text" && u.type !== "gap") return void r.push({ path: f, message: "Unknown node type" });
+    if (u.type === "text") {
+      typeof u.text != "string" && r.push({ path: `${f}.text`, message: "Text must be a string" });
+      return;
+    }
+    if (typeof u.id != "string" || !u.id.trim() ? r.push({ path: `${f}.id`, message: "Gap id is required" }) : g.has(u.id) ? r.push({ path: `${f}.id`, message: "Gap id must be unique" }) : g.add(u.id), (typeof u.originalText != "string" || !u.originalText) && r.push({ path: `${f}.originalText`, message: "Original text is required" }), u.control !== "input" && u.control !== "select" && r.push({ path: `${f}.control`, message: "Control must be input or select" }), u.control === "select")
+      if (!Array.isArray(u.options) || u.options.length < 2) r.push({ path: `${f}.options`, message: "Select gap requires at least 2 options" });
+      else {
+        const k = /* @__PURE__ */ new Set();
+        u.options.forEach((d, b) => {
+          const s = `${f}.options[${b}]`;
+          (!q(d) || typeof d.label != "string" || !d.label.trim()) && r.push({ path: `${s}.label`, message: "Option label is required" }), !q(d) || typeof d.value != "string" || !d.value.trim() ? r.push({ path: `${s}.value`, message: "Option value is required" }) : k.has(d.value) ? r.push({ path: `${s}.value`, message: "Option value must be unique" }) : k.add(d.value);
+        });
+      }
+  }), { valid: r.length === 0, errors: r };
+}
+function Ge(l) {
+  return l.type === "text" ? l.text.length : l.originalText.length;
+}
+function Ie(l, r, g) {
+  if (r.from < 0 || r.to <= r.from || r.to > j(l).length) throw new Error("Selection is outside the document");
+  let u = 0;
+  const C = [];
+  let f = !1;
+  for (const k of l.content) {
+    const d = u, b = d + Ge(k);
+    if (u = b, r.to <= d || r.from >= b) {
+      C.push(k);
+      continue;
+    }
+    if (k.type === "gap") throw new Error("A selection cannot overlap an existing gap");
+    if (r.from < d || r.to > b) throw new Error("A gap must be created inside one text node");
+    const s = r.from - d, c = r.to - d;
+    s && C.push({ type: "text", text: k.text.slice(0, s) }), C.push({ type: "gap", ...g, originalText: k.text.slice(s, c) }), c < k.text.length && C.push({ type: "text", text: k.text.slice(c) }), f = !0;
+  }
+  if (!f) throw new Error("No editable text selected");
+  return { version: 1, content: G(C) };
+}
+function Ue(l, r, g) {
+  return { version: 1, content: l.content.map((u) => u.type === "gap" && u.id === r ? g : u) };
+}
+function qe(l, r) {
+  return { version: 1, content: G(l.content.map((g) => g.type === "gap" && g.id === r ? { type: "text", text: g.originalText } : g)) };
+}
+function re(l, r) {
+  return { version: 1, content: G(l.content.filter((g) => g.type !== "gap" || g.id !== r)) };
+}
+function se(l) {
+  return l.trim().toLocaleLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-|-$/g, "");
+}
+const ze = ["aria-label"], je = ["contenteditable"], Ke = {
+  key: 0,
+  "data-text": ""
+}, Pe = {
+  key: 0,
+  "data-line-break": ""
+}, He = { "data-line": "" }, Xe = ["tabindex", "data-gap-id", "data-gap-length", "data-gap-original", "aria-label", "onClick"], Je = {
+  key: 0,
+  class: "editor-gap__chevron",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, _e = {
+  class: "editor-meta",
+  "aria-live": "polite"
+}, We = {
+  key: 0,
+  class: "editor-hint"
+}, Ye = {
+  class: "gap-dialog",
+  role: "dialog",
+  "aria-modal": "true",
+  "aria-labelledby": "gap-dialog-title"
+}, Qe = { class: "eyebrow" }, Ze = { id: "gap-dialog-title" }, et = {
+  class: "segmented",
+  role: "radiogroup",
+  "aria-label": "Gap type"
+}, tt = ["aria-checked"], nt = ["aria-checked"], lt = {
+  key: 1,
+  class: "options-block"
+}, at = ["value", "placeholder", "aria-label", "onInput"], ot = ["aria-label", "onClick"], it = {
+  key: 2,
+  class: "form-error",
+  role: "alert"
+}, rt = {
+  key: 0,
+  class: "danger-actions"
+}, ft = /* @__PURE__ */ ue({
+  __name: "FillableTextEditor",
+  props: {
+    modelValue: {},
+    defaultValue: { default: () => ({ version: 1, content: [{ type: "text", text: "Start writing…" }] }) },
+    readOnly: { type: Boolean, default: !1 },
+    class: { default: "" }
+  },
+  emits: ["update:modelValue", "change", "gapCreate", "gapUpdate", "gapRemove", "selectionChange"],
+  setup(l, { emit: r }) {
+    const g = l, u = r, C = O(g.defaultValue), f = z(() => g.modelValue ?? C.value), k = O(), d = O(), b = O(null), s = O(null), c = O(null), y = O(null), $ = O(""), R = O(null), K = [], P = [];
+    let N = null;
+    const ce = z(() => f.value.content.reduce((e, t) => e + F(t), 0)), _ = z(() => f.value.content.filter((e) => e.type === "gap").length);
+    function pe(e) {
+      return `${e}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+    }
+    function F(e) {
+      return e.type === "text" ? e.text.length : e.originalText.length;
+    }
+    function S(e, t = !0) {
+      t && (K.push(f.value), P.length = 0), g.modelValue === void 0 && (C.value = e), u("update:modelValue", e), u("change", e);
+    }
+    function M() {
+      b.value = null, s.value = null, u("selectionChange", null);
+    }
+    function W(e) {
+      let t = 0;
+      for (const n of f.value.content) {
+        const a = t, p = a + F(n);
+        if (t = p, n.type === "gap" && n.id === e) return { gap: n, start: a, end: p };
+      }
+      return null;
+    }
+    function de(e, t, n) {
+      let a = 0;
+      const p = [];
+      for (const o of f.value.content) {
+        const v = a, m = v + F(o);
+        if (a = m, o.type !== "gap") continue;
+        (e === t && (n === "backward" ? m === e : v === e) || e < t && e < m && t > v) && p.push({ gap: o, start: v, end: m });
+      }
+      return n === "backward" ? p.at(-1) ?? null : p[0] ?? null;
+    }
+    function fe(e, t) {
+      let n = 0;
+      const a = [];
+      for (const p of f.value.content) {
+        const o = n;
+        if (n = o + F(p), p.type === "gap") {
+          a.push(p);
+          continue;
+        }
+        const m = Math.max(0, e - o), w = Math.min(p.text.length, t - o);
+        a.push(m < w ? { type: "text", text: p.text.slice(0, m) + p.text.slice(w) } : p);
+      }
+      return { version: 1, content: G(a) };
+    }
+    function ge(e, t) {
+      let n = 0, a = !1;
+      const p = [];
+      for (const o of f.value.content) {
+        const v = n, m = v + F(o);
+        if (n = m, !a && o.type === "text" && e >= v && e <= m) {
+          const w = e - v;
+          p.push({ type: "text", text: o.text.slice(0, w) }, { type: "text", text: t }, { type: "text", text: o.text.slice(w) }), a = !0;
+        } else p.push(o);
+      }
+      return a || p.push({ type: "text", text: t }), { version: 1, content: G(p) };
+    }
+    function H(e) {
+      const t = new Map(f.value.content.filter((o) => o.type === "gap").map((o) => [o.id, o])), n = [], a = (o) => {
+        const v = o.replaceAll("​", "");
+        if (!v) return;
+        const m = n.at(-1);
+        m?.type === "text" ? m.text += v : n.push({ type: "text", text: v });
+      }, p = (o) => {
+        if (o instanceof HTMLElement) {
+          if (o.dataset.gapId) {
+            const v = t.get(o.dataset.gapId);
+            v ? n.push(v) : a(o.dataset.gapOriginal ?? "");
+            return;
+          }
+          if (o.tagName === "BR") {
+            a(`
+`);
+            return;
+          }
+          if (o.tagName === "DIV" || o.tagName === "P") {
+            const v = n.at(-1);
+            n.length && !(v?.type === "text" && v.text.endsWith(`
+`)) && a(`
+`);
+          }
+        }
+        if (o.nodeType === Node.TEXT_NODE) {
+          a(o.textContent ?? "");
+          return;
+        }
+        o.childNodes.forEach(p);
+      };
+      return e.childNodes.forEach(p), G(n);
+    }
+    function Y(e) {
+      return e.nodeType === Node.TEXT_NODE ? e.textContent?.replaceAll("​", "").length ?? 0 : e instanceof HTMLElement && e.dataset.gapLength !== void 0 ? Number(e.dataset.gapLength) : e instanceof HTMLElement && e.tagName === "BR" ? 1 : Array.from(e.childNodes).reduce((t, n) => t + Y(n), 0);
+    }
+    function V(e, t, n) {
+      if (t !== e && !e.contains(t)) return null;
+      const a = e.ownerDocument.createRange();
+      return a.selectNodeContents(e), a.setEnd(t, n), H(a.cloneContents()).reduce((p, o) => p + F(o), 0);
+    }
+    function ve(e, t) {
+      let n = t, a = null;
+      const p = (m) => {
+        if (!a) {
+          if (m.nodeType === Node.TEXT_NODE) {
+            const w = m.textContent ?? "", E = w.replaceAll("​", "").length;
+            n <= E ? a = { node: m, offset: E ? n : w.length } : n -= E;
+            return;
+          }
+          if (m instanceof HTMLElement && (m.tagName === "BR" || m.dataset.gapLength !== void 0)) {
+            const w = Y(m), E = m.parentNode;
+            n <= w && E ? a = { node: E, offset: Array.from(E.childNodes).indexOf(m) + (n ? 1 : 0) } : n -= w;
+            return;
+          }
+          m.childNodes.forEach(p);
+        }
+      };
+      p(e);
+      const o = a ?? { node: e, offset: e.childNodes.length }, v = e.ownerDocument.createRange();
+      v.setStart(o.node, o.offset), v.collapse(!0), e.ownerDocument.getSelection()?.removeAllRanges(), e.ownerDocument.getSelection()?.addRange(v);
+    }
+    Se(f, async () => {
+      N !== null && (await Me(), d.value && ve(d.value, N), N = null);
+    });
+    function U() {
+      if (g.readOnly || !d.value || !k.value) return;
+      const e = window.getSelection();
+      if (!e || !e.rangeCount || e.isCollapsed) return M();
+      const t = e.getRangeAt(0);
+      if (!d.value.contains(t.commonAncestorContainer)) return M();
+      const n = V(d.value, t.startContainer, t.startOffset), a = V(d.value, t.endContainer, t.endOffset);
+      if (n === null || a === null || a <= n) return M();
+      const p = j(f.value).slice(n, a);
+      if (!p.trim()) return M();
+      const o = t.getBoundingClientRect(), v = k.value.getBoundingClientRect(), m = o.top - v.top - 52, w = m < 8 ? "below" : "above";
+      b.value = { text: p, from: n, to: a }, s.value = { left: Math.min(Math.max(o.left - v.left + o.width / 2, 76), v.width - 76), top: w === "below" ? o.bottom - v.top + 10 : m, placement: w }, u("selectionChange", b.value);
+    }
+    function me(e) {
+      e.preventDefault(), b.value && (y.value = null, c.value = { id: pe("gap"), originalText: b.value.text, control: "input", placeholder: `Enter ${b.value.text.toLocaleLowerCase()}…`, options: [b.value.text, ""] }, $.value = "");
+    }
+    function he(e) {
+      g.readOnly || (y.value = e.id, c.value = { id: e.id, originalText: e.originalText, control: e.control, placeholder: e.control === "input" ? e.placeholder ?? "" : "", options: e.control === "select" ? e.options.map((t) => t.label) : [e.originalText, ""] }, $.value = "", M());
+    }
+    function Q(e) {
+      if (!(!c.value || c.value.control === e)) {
+        if (e === "select") {
+          const t = [...c.value.options];
+          t[0] = c.value.originalText, t.length < 2 && t.push(""), c.value = { ...c.value, control: e, options: t };
+        } else c.value = { ...c.value, control: e, originalText: c.value.options[0]?.trim() || c.value.originalText };
+        $.value = "";
+      }
+    }
+    function xe(e) {
+      if (e.control === "input") return { type: "gap", id: e.id, control: "input", originalText: e.originalText, placeholder: e.placeholder.trim() || void 0 };
+      const t = e.options.map((n, a) => ({ id: `${e.id}-option-${a + 1}`, label: n.trim(), value: se(n) || `option-${a + 1}` }));
+      return { type: "gap", id: e.id, control: "select", originalText: t[0].label, options: t };
+    }
+    function ye() {
+      if (!c.value) return;
+      let e = c.value;
+      if (e.control === "input" && !e.originalText.trim()) return void ($.value = "Original text is required.");
+      if (e.control === "select") {
+        if (!e.options[0]?.trim()) return void ($.value = "The first option must contain the original text.");
+        const n = e.options.map((p) => p.trim()).filter(Boolean), a = n.map(se);
+        if (n.length < 2) return void ($.value = "Add at least two non-empty options.");
+        if (new Set(a).size !== a.length) return void ($.value = "Every option needs a unique value.");
+        e = { ...e, options: n };
+      }
+      const t = xe(e);
+      try {
+        y.value ? (S(Ue(f.value, y.value, t)), u("gapUpdate", t)) : b.value && (S(Ie(f.value, b.value, t)), u("gapCreate", t)), c.value = null, M();
+      } catch (n) {
+        $.value = n instanceof Error ? n.message : "Could not create gap.";
+      }
+    }
+    function Z(e) {
+      if (!y.value) return;
+      const t = W(y.value);
+      t && (S(e ? re(f.value, y.value) : qe(f.value, y.value)), u("gapRemove", t.gap), c.value = null, y.value = null);
+    }
+    function be(e) {
+      const t = e.currentTarget;
+      R.value = null;
+      const n = window.getSelection()?.rangeCount ? window.getSelection().getRangeAt(0) : null;
+      n && (N = V(t, n.endContainer, n.endOffset)), S({ version: 1, content: H(t) });
+    }
+    function we(e) {
+      e.preventDefault();
+      const t = window.getSelection()?.rangeCount ? window.getSelection().getRangeAt(0) : null;
+      if (!t || !d.value) return;
+      t.deleteContents();
+      const n = window.document.createTextNode(e.clipboardData?.getData("text/plain") ?? "");
+      t.insertNode(n), t.setStartAfter(n), t.collapse(!0), N = V(d.value, t.endContainer, t.endOffset), S({ version: 1, content: H(d.value) });
+    }
+    function ke(e) {
+      e.clipboardData?.setData("text/plain", window.getSelection()?.toString() || j(f.value)), e.preventDefault();
+    }
+    function Ce(e) {
+      const t = e.metaKey || e.ctrlKey;
+      if (t && e.key.toLocaleLowerCase() === "z") {
+        e.preventDefault();
+        const B = e.shiftKey ? P.pop() : K.pop();
+        if (!B) return;
+        (e.shiftKey ? K : P).push(f.value), S(B, !1);
+        return;
+      }
+      if (e.key === "Enter" && !e.altKey && !t && d.value) {
+        const B = window.getSelection()?.rangeCount ? window.getSelection().getRangeAt(0) : null;
+        if (!B?.collapsed) return;
+        const J = V(d.value, B.endContainer, B.endOffset);
+        if (J === null) return;
+        e.preventDefault(), N = J + 1, S(ge(J, `
+`)), M();
+        return;
+      }
+      if (e.key !== "Backspace" && e.key !== "Delete") {
+        R.value = null;
+        return;
+      }
+      if (e.preventDefault(), !d.value) return;
+      const n = e.key === "Backspace" ? "backward" : "forward", a = e.target instanceof HTMLElement ? e.target.closest("[data-gap-id]") : null, p = a?.dataset.gapId ? W(a.dataset.gapId) : null, o = window.getSelection()?.rangeCount ? window.getSelection().getRangeAt(0) : null;
+      if (!o) return;
+      const v = V(d.value, o.startContainer, o.startOffset), m = V(d.value, o.endContainer, o.endOffset);
+      if (v === null || m === null) return;
+      const w = p ?? de(v, m, n);
+      if (w) {
+        R.value === w.gap.id ? (N = w.start, S(re(f.value, w.gap.id)), u("gapRemove", w.gap), R.value = null) : R.value = w.gap.id;
+        return;
+      }
+      const E = j(f.value).length, X = v === m && n === "backward" ? Math.max(0, v - 1) : v, te = v === m && n === "forward" ? Math.min(E, m + 1) : m;
+      te > X && (N = X, S(fe(X, te)));
+    }
+    function Te(e, t) {
+      c.value && (c.value.options[e] = t);
+    }
+    function $e(e) {
+      c.value && c.value.options.splice(e, 1);
+    }
+    function ee() {
+      b.value && U();
+    }
+    return Ee(() => window.addEventListener("scroll", ee, !0)), Oe(() => window.removeEventListener("scroll", ee, !0)), (e, t) => (h(), x("div", {
+      ref_key: "shell",
+      ref: k,
+      class: L(["fillable-editor", g.class])
+    }, [
+      s.value && b.value && !c.value ? (h(), x("button", {
+        key: 0,
+        class: L(["selection-toolbar", `selection-toolbar--${s.value.placement}`]),
+        style: De({ left: `${s.value.left}px`, top: `${s.value.top}px` }),
+        "aria-label": `Turn ${b.value.text} into a gap`,
+        onMousedown: me
+      }, [...t[10] || (t[10] = [
+        i("span", { "aria-hidden": "true" }, "＋", -1),
+        ae(" Add gap ", -1)
+      ])], 46, ze)) : A("", !0),
+      i("div", {
+        ref_key: "editor",
+        ref: d,
+        class: "fillable-editor__surface",
+        contenteditable: !l.readOnly,
+        spellcheck: "true",
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": "Fillable text editor",
+        onInput: be,
+        onSelect: U,
+        onMouseup: U,
+        onKeyup: U,
+        onKeydown: Ce,
+        onPaste: we,
+        onCopy: ke
+      }, [
+        (h(!0), x(D, null, I(f.value.content, (n, a) => (h(), x(D, {
+          key: n.type === "gap" ? n.id : `text-${a}`
+        }, [
+          n.type === "text" ? (h(), x("span", Ke, [
+            (h(!0), x(D, null, I(n.text.split(`
+`), (p, o) => (h(), x(D, { key: o }, [
+              o > 0 ? (h(), x("br", Pe)) : A("", !0),
+              i("span", He, T(p || "​"), 1)
+            ], 64))), 128))
+          ])) : (h(), x("button", {
+            key: 1,
+            type: "button",
+            tabindex: l.readOnly ? -1 : 0,
+            contenteditable: "false",
+            "data-gap-id": n.id,
+            "data-gap-length": n.originalText.length,
+            "data-gap-original": n.originalText,
+            class: L(["editor-gap", `editor-gap--${n.control}`, { "editor-gap--keyboard-selected": R.value === n.id }]),
+            "aria-label": `${n.control} gap: ${n.originalText}. Click to edit.`,
+            onClick: (p) => he(n)
+          }, [
+            i("span", null, T(n.originalText), 1),
+            n.control === "select" ? (h(), x("svg", Je, [...t[11] || (t[11] = [
+              i("path", { d: "m8 10 4 4 4-4" }, null, -1)
+            ])])) : A("", !0),
+            i("small", null, T(n.control), 1)
+          ], 10, Xe))
+        ], 64))), 128))
+      ], 40, je),
+      i("div", _e, [
+        i("span", null, T(ce.value) + " characters", 1),
+        t[12] || (t[12] = i("i", null, null, -1)),
+        i("span", null, T(_.value) + " " + T(_.value === 1 ? "gap" : "gaps"), 1),
+        l.readOnly ? A("", !0) : (h(), x("span", We, "Select any text to make it fillable"))
+      ]),
+      c.value ? (h(), x("div", {
+        key: 1,
+        class: "gap-dialog-backdrop",
+        onMousedown: t[9] || (t[9] = Ne((n) => c.value = null, ["self"]))
+      }, [
+        i("section", Ye, [
+          i("header", null, [
+            i("div", null, [
+              i("span", Qe, T(y.value ? "Gap settings" : "New interactive field"), 1),
+              i("h2", Ze, T(y.value ? "Edit gap" : "Create a gap"), 1)
+            ]),
+            i("button", {
+              class: "icon-button",
+              "aria-label": "Close",
+              onClick: t[0] || (t[0] = (n) => c.value = null)
+            }, "×")
+          ]),
+          t[19] || (t[19] = i("label", { class: "field-label" }, "Field type", -1)),
+          i("div", et, [
+            i("button", {
+              role: "radio",
+              "aria-checked": c.value.control === "input",
+              class: L({ active: c.value.control === "input" }),
+              onClick: t[1] || (t[1] = (n) => Q("input"))
+            }, [...t[13] || (t[13] = [
+              i("span", { class: "type-icon" }, "T", -1),
+              i("span", null, [
+                i("strong", null, "Text input"),
+                i("small", null, "Free-form response")
+              ], -1)
+            ])], 10, tt),
+            i("button", {
+              role: "radio",
+              "aria-checked": c.value.control === "select",
+              class: L({ active: c.value.control === "select" }),
+              onClick: t[2] || (t[2] = (n) => Q("select"))
+            }, [...t[14] || (t[14] = [
+              i("span", { class: "type-icon" }, [
+                i("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "aria-hidden": "true"
+                }, [
+                  i("path", { d: "M6 7h8M6 12h8M6 17h8" }),
+                  i("path", { d: "m17 9 2 3 2-3" })
+                ])
+              ], -1),
+              i("span", null, [
+                i("strong", null, "Select"),
+                i("small", null, "Choose from a list")
+              ], -1)
+            ])], 10, nt)
+          ]),
+          c.value.control === "input" ? (h(), x(D, { key: 0 }, [
+            t[15] || (t[15] = i("label", {
+              class: "field-label",
+              for: "original-text"
+            }, "Original text", -1)),
+            oe(i("input", {
+              id: "original-text",
+              "onUpdate:modelValue": t[3] || (t[3] = (n) => c.value.originalText = n),
+              class: "dialog-input"
+            }, null, 512), [
+              [ie, c.value.originalText]
+            ]),
+            t[16] || (t[16] = i("label", {
+              class: "field-label",
+              for: "placeholder"
+            }, "Placeholder", -1)),
+            oe(i("input", {
+              id: "placeholder",
+              "onUpdate:modelValue": t[4] || (t[4] = (n) => c.value.placeholder = n),
+              class: "dialog-input"
+            }, null, 512), [
+              [ie, c.value.placeholder]
+            ])
+          ], 64)) : (h(), x("div", lt, [
+            t[17] || (t[17] = i("label", { class: "field-label" }, [
+              ae("Options "),
+              i("span", null, "Minimum 2")
+            ], -1)),
+            (h(!0), x(D, null, I(c.value.options, (n, a) => (h(), x("div", {
+              key: a,
+              class: "option-row"
+            }, [
+              i("span", {
+                class: L(["option-correct-marker", { "option-correct-marker--empty": a !== 0 }])
+              }, "✓", 2),
+              i("input", {
+                class: "dialog-input",
+                value: n,
+                placeholder: a === 0 ? "Original text" : "Type an option",
+                "aria-label": `Option ${a + 1}`,
+                onInput: (p) => Te(a, p.target.value)
+              }, null, 40, at),
+              i("button", {
+                class: "icon-button small",
+                "aria-label": `Remove option ${a + 1}`,
+                onClick: (p) => $e(a)
+              }, "×", 8, ot)
+            ]))), 128)),
+            i("button", {
+              class: "add-option",
+              onClick: t[5] || (t[5] = (n) => c.value.options.push(""))
+            }, "＋ Add option")
+          ])),
+          $.value ? (h(), x("p", it, T($.value), 1)) : A("", !0),
+          i("footer", null, [
+            y.value ? (h(), x("div", rt, [
+              i("button", {
+                onClick: t[6] || (t[6] = (n) => Z(!1))
+              }, "Convert to text"),
+              i("button", {
+                onClick: t[7] || (t[7] = (n) => Z(!0))
+              }, "Delete")
+            ])) : A("", !0),
+            t[18] || (t[18] = i("span", null, null, -1)),
+            i("button", {
+              class: "button secondary",
+              onClick: t[8] || (t[8] = (n) => c.value = null)
+            }, "Cancel"),
+            i("button", {
+              class: "button primary",
+              onClick: ye
+            }, T(y.value ? "Save changes" : "Create gap"), 1)
+          ])
+        ])
+      ], 32)) : A("", !0)
+    ], 2));
+  }
+});
+export {
+  ct as EMPTY_DOCUMENT,
+  ut as FillableText,
+  ft as FillableTextEditor,
+  Ie as createGap,
+  re as deleteGap,
+  dt as deserialize,
+  G as normalizeContent,
+  qe as removeGap,
+  pt as serialize,
+  se as slugifyOption,
+  j as toPlainText,
+  Ue as updateGap,
+  Be as validateDocument
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vue-fillable-text",
+  "version": "0.1.0",
+  "description": "Typed Vue components for documents with interactive input and select gaps.",
+  "author": "Evgeniia Iaroslavtseva",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist", "README.md", "LICENSE"],
+  "main": "./dist/vue-fillable-text.cjs",
+  "module": "./dist/vue-fillable-text.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-fillable-text.js",
+      "require": "./dist/vue-fillable-text.cjs"
+    },
+    "./styles.css": "./dist/vue-fillable-text.css"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm test && npm run typecheck && npm run build"
+  },
+  "peerDependencies": { "vue": ">=3.3 <4" },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.7",
+    "vue": "^3.5.22",
+    "vue-tsc": "^3.0.8"
+  },
+  "publishConfig": { "access": "public" },
+  "engines": { "node": ">=20.19" },
+  "keywords": ["vue", "fillable-text", "fill-in-the-blank", "forms", "editor", "typescript"]
+}