@viveksinghind/narrative-form-vue 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vivek Singh
+
+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,54 @@
+# @viveksinghind/narrative-form-vue
+
+Vue 3 implementation for Narrative Form, a dynamic typewriter-style sign-up flow.
+
+## Installation
+
+```bash
+npm install @viveksinghind/narrative-form-vue @viveksinghind/narrative-form-core
+```
+
+## Usage
+
+```vue
+<script setup>
+import { NarrativeForm } from '@viveksinghind/narrative-form-vue';
+
+const myFormConfig = {
+  form: { id: "test", name: "Test Form", version: 1 },
+  welcome: {
+    heading: "Welcome to the future",
+    subtext: "Let's get started",
+    ctaLabel: "Begin"
+  },
+  fields: [
+    {
+      key: "name",
+      type: "text",
+      prefix: "Hi, my name is",
+      validation: { required: true }
+    }
+  ],
+  done: {
+    message: "All done! Thank you.",
+  }
+};
+
+const handleComplete = (values) => {
+  console.log('Form Complete!', values);
+};
+</script>
+
+<template>
+  <NarrativeForm 
+    :config="myFormConfig" 
+    @complete="handleComplete" 
+  />
+</template>
+```
+
+## Features
+- Built for Vue 3 Composition API
+- Uses lightweight `shallowRef` reactivity bridge
+- Smooth CSS animations
+- Themeable via config

package/dist/composables/useFormState.d.ts

@@ -0,0 +1,15 @@
+import { NarrativeField, FormStateSnapshot, NarrativeFieldValues, NarrativeMeta } from '@viveksinghind/narrative-form-core';
+export declare function useFormState(fields: readonly NarrativeField[]): {
+    snapshot: import('vue').ShallowRef<FormStateSnapshot, FormStateSnapshot>;
+    startTyping: (key: string) => void;
+    activateField: (key: string) => void;
+    confirmField: (key: string, value: string | string[]) => void;
+    editField: (key: string) => void;
+    reconfirmField: (key: string, value: string | string[]) => void;
+    next: () => void;
+    focusField: (key: string) => void;
+    reset: () => void;
+    getValues: () => NarrativeFieldValues;
+    getMeta: (formId?: string, formVersion?: number) => NarrativeMeta;
+};
+//# sourceMappingURL=useFormState.d.ts.map

package/dist/composables/useFormState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormState.d.ts","sourceRoot":"","sources":["../../src/composables/useFormState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGjI,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,cAAc,EAAE;;uBAcvC,MAAM;yBACJ,MAAM;wBACP,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE;qBACnC,MAAM;0BACD,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE;;sBAEpC,MAAM;;;uBAML,MAAM,gBAAgB,MAAM;EAElD"}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),C=require("@viveksinghind/narrative-form-core");function I(l){const t=new C.FormStateEngine(l,()=>{n.value=t.getSnapshot(),e.triggerRef(n)}),n=e.shallowRef(t.getSnapshot());return e.onUnmounted(()=>{t.reset()}),{snapshot:n,startTyping:o=>t.startTyping(o),activateField:o=>t.activateField(o),confirmField:(o,u)=>t.confirmField(o,u),editField:o=>t.editField(o),reconfirmField:(o,u)=>t.reconfirmField(o,u),next:()=>t.next(),focusField:o=>t.focusField(o),reset:()=>{t.reset(),n.value=t.getSnapshot()},getValues:()=>t.getValues(),getMeta:(o,u)=>t.getMeta(o,u)}}const R={class:"ns-welcome fade-in"},W={class:"ns-welcome-title"},K={key:0,class:"ns-welcome-subtitle"},U=e.defineComponent({__name:"WelcomeScreen",props:{welcome:{},typewriter:{}},emits:["start"],setup(l,{emit:t}){const n=l,o=t,u=e.ref("");let p;return e.onMounted(()=>{if(!n.typewriter.enabled){u.value=n.welcome.heading||"";return}let m=0;p=setInterval(()=>{u.value=(n.welcome.heading||"").slice(0,m+1),m++,m>=(n.welcome.heading||"").length&&clearInterval(p)},n.typewriter.speed??30)}),e.onUnmounted(()=>{clearInterval(p)}),(m,s)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("h1",W,e.toDisplayString(u.value),1),l.welcome.subtext?(e.openBlock(),e.createElementBlock("p",K,e.toDisplayString(l.welcome.subtext),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"ns-welcome-start",onClick:s[0]||(s[0]=g=>o("start"))},e.toDisplayString(l.welcome.ctaLabel||"Start"),1)]))}}),B=(l,t)=>{const n=l.__vccOpts||l;for(const[o,u]of t)n[o]=u;return n},D=B(U,[["__scopeId","data-v-dbeb46ea"]]),q={class:"ns-done fade-in"},A={class:"ns-done-title"},O=e.defineComponent({__name:"DoneScreen",props:{done:{},values:{},meta:{},typewriter:{}},setup(l){return(t,n)=>(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("h1",A,e.toDisplayString(typeof l.done.message=="function"?l.done.message(l.values):l.done.message),1)]))}}),M=B(O,[["__scopeId","data-v-7802c8f5"]]),P={key:0,class:"ns-error-wrapper"},j={class:"ns-error-text"},H=e.defineComponent({__name:"ErrorMessage",props:{message:{},config:{}},setup(l){return(t,n)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade-slide"},{default:e.withCtx(()=>[l.message?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("p",j,e.toDisplayString(l.message),1)])):e.createCommentVNode("",!0)]),_:1}))}}),_=B(H,[["__scopeId","data-v-a8be2d7b"]]),z={class:"ns-line fade-in"},G={class:"ns-prompt-row"},J={class:"ns-prompt"},Q={key:0,class:"ns-value"},X={key:0,class:"ns-input-row"},Y=["type","disabled","value","onKeydown"],Z=e.defineComponent({__name:"Line",props:{field:{},status:{},value:{},allValues:{},typewriter:{},editable:{type:Boolean},locked:{type:Boolean},editLabel:{}},emits:["typingComplete","confirm","edit","error","change","focus","blur"],setup(l,{emit:t}){const n=l,o=t,u=e.ref(null),p=e.ref(""),m=e.ref(n.value?String(n.value):""),s=e.ref(null),g=e.ref(!1);let w;e.watch(()=>n.value,f=>{f!==void 0&&String(f)!==m.value&&(m.value=String(f))}),e.watch(()=>n.status,f=>{if(f==="typing"){if(!n.typewriter.enabled){p.value=n.field.prompt,o("typingComplete",n.field.key);return}let i=0;w=setInterval(()=>{p.value=n.field.prompt.slice(0,i+1),i++,i>=n.field.prompt.length&&(clearInterval(w),o("typingComplete",n.field.key))},n.typewriter.speed??30)}else(f==="active"||f==="editing")&&e.nextTick(()=>{var i;(i=u.value)==null||i.focus()})},{immediate:!0}),e.onUnmounted(()=>{clearInterval(w)});const E=f=>{const i=f.target;m.value=i.value,o("change",n.field.key,i.value),s.value&&(s.value=null)},V=async()=>{const f=C.validateField(n.field,m.value);if(!f.valid){s.value=f.error||"Invalid input",o("error",n.field.key,s.value);return}if(C.hasAsyncValidation(n.field)){g.value=!0;const i=await C.validateFieldAsync(n.field,m.value);if(g.value=!1,!i.valid){s.value=i.error||"Invalid input",o("error",n.field.key,s.value);return}}s.value=null,o("confirm",n.field.key,m.value)};return(f,i)=>(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("div",G,[e.createElementVNode("span",J,e.toDisplayString(l.status==="typing"?p.value:l.field.prompt),1),l.status==="confirmed"?(e.openBlock(),e.createElementBlock("span",Q,e.toDisplayString(m.value),1)):e.createCommentVNode("",!0),l.status==="confirmed"&&l.editable&&!l.locked?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"ns-edit-btn",onClick:i[0]||(i[0]=F=>o("edit",l.field.key))},e.toDisplayString(l.editLabel),1)):e.createCommentVNode("",!0)]),l.status==="active"||l.status==="editing"?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("input",{ref_key:"inputRef",ref:u,type:l.field.type==="email"?"email":l.field.type==="password"?"password":"text",class:"ns-input",disabled:g.value,value:m.value,onInput:E,onFocus:i[1]||(i[1]=F=>o("focus",l.field.key)),onBlur:i[2]||(i[2]=F=>o("blur",l.field.key,m.value)),onKeydown:e.withKeys(e.withModifiers(V,["prevent"]),["enter"])},null,40,Y)])):e.createCommentVNode("",!0),e.createVNode(_,{message:s.value},null,8,["message"])]))}}),L=B(Z,[["__scopeId","data-v-d4b482a6"]]),ee={key:1,class:"ns-form-body"},te=e.defineComponent({__name:"NarrativeForm",props:{fields:{},formConfig:{},typewriter:{},welcome:{},done:{},editable:{type:Boolean,default:!0},editLabel:{},callbacks:{},defaultValues:{},values:{},strings:{},reducedMotion:{type:Boolean}},setup(l){const t=l,n=e.computed(()=>t.fields?t.fields:t.formConfig?t.formConfig.fields:[]),o=e.computed(()=>{if(t.welcome)return t.welcome;if(t.formConfig&&"welcome"in t.formConfig)return t.formConfig.welcome}),u=e.computed(()=>{if(t.done)return t.done;if(t.formConfig&&"done"in t.formConfig)return t.formConfig.done}),p=e.computed(()=>{var d;return{...t.typewriter,enabled:t.reducedMotion?!1:((d=t.typewriter)==null?void 0:d.enabled)??!0}}),m=e.computed(()=>C.mergeStrings(t.strings)),{snapshot:s,startTyping:g,activateField:w,confirmField:E,editField:V,reconfirmField:f,getMeta:i}=I(n.value),F=e.computed(()=>{var d;return((d=o.value)==null?void 0:d.show)!==!1&&o.value!==void 0}),b=e.ref(!F.value),N=e.ref(!1),x=()=>{if(!b.value||N.value||n.value.length===0)return;N.value=!0;const d=n.value.find(r=>s.value.statuses[r.key]!=="confirmed");d&&g(d.key)};e.watch(b,x),e.onMounted(x);const T=(d,r)=>{var v;s.value.statuses[d]==="editing"?f(d,r):E(d,r),(v=t.callbacks)!=null&&v.onFieldComplete&&t.callbacks.onFieldComplete(d,r,0);const S=n.value.findIndex(c=>c.key===d);for(let c=S+1;c<n.value.length;c++){const a=n.value[c];if(!(!a||s.value.statuses[a.key]==="confirmed")){g(a.key);break}}},$=e.computed(()=>n.value.filter(d=>{const r=s.value.statuses[d.key];return r==="typing"||r==="active"||r==="confirmed"||r==="editing"})),h=e.ref(null);return e.watch(()=>$.value.length,()=>{e.nextTick(()=>{h.value&&(h.value.scrollTop=h.value.scrollHeight)})}),(d,r)=>(e.openBlock(),e.createElementBlock("div",{class:"ns-root",ref_key:"scrollContainerRef",ref:h},[!b.value&&o.value?(e.openBlock(),e.createBlock(D,{key:0,welcome:o.value,typewriter:p.value,onStart:r[0]||(r[0]=k=>b.value=!0)},null,8,["welcome","typewriter"])):e.createCommentVNode("",!0),b.value?(e.openBlock(),e.createElementBlock("div",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,k=>{var S;return e.openBlock(),e.createBlock(L,{key:k.key,field:k,status:e.unref(s).statuses[k.key]??"idle",value:((S=t.values)==null?void 0:S[k.key])??e.unref(s).values[k.key],allValues:e.unref(s).values,typewriter:p.value,editable:t.editable,locked:!1,editLabel:t.editLabel??m.value.editLabel,onTypingComplete:e.unref(w),onConfirm:T,onEdit:r[1]||(r[1]=v=>{var c,a;e.unref(V)(v),(a=(c=t.callbacks)==null?void 0:c.onEdit)==null||a.call(c,v)}),onError:r[2]||(r[2]=(v,c)=>{var a,y;return(y=(a=t.callbacks)==null?void 0:a.onError)==null?void 0:y.call(a,v,c)}),onChange:r[3]||(r[3]=(v,c)=>{var a,y;return(y=(a=t.callbacks)==null?void 0:a.onChange)==null?void 0:y.call(a,v,c)}),onFocus:r[4]||(r[4]=v=>{var c,a;return(a=(c=t.callbacks)==null?void 0:c.onFieldFocus)==null?void 0:a.call(c,v)}),onBlur:r[5]||(r[5]=(v,c)=>{var a,y;return(y=(a=t.callbacks)==null?void 0:a.onFieldBlur)==null?void 0:y.call(a,v,c)})},null,8,["field","status","value","allValues","typewriter","editable","editLabel","onTypingComplete"])}),128))])):e.createCommentVNode("",!0),e.unref(s).isComplete&&u.value?(e.openBlock(),e.createBlock(M,{key:2,done:u.value,values:e.unref(s).values,meta:e.unref(i)(),typewriter:p.value},null,8,["done","values","meta","typewriter"])):e.createCommentVNode("",!0)],512))}}),ne=B(te,[["__scopeId","data-v-33050240"]]);exports.DoneScreen=M;exports.ErrorMessage=_;exports.Line=L;exports.NarrativeForm=ne;exports.WelcomeScreen=D;exports.useFormState=I;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as NarrativeForm } from './components/NarrativeForm.vue';
+export { default as WelcomeScreen } from './components/WelcomeScreen.vue';
+export { default as DoneScreen } from './components/DoneScreen.vue';
+export { default as Line } from './components/Line.vue';
+export { default as ErrorMessage } from './components/ErrorMessage.vue';
+export * from './composables/useFormState';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACxE,cAAc,4BAA4B,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,319 @@
+import { triggerRef as U, shallowRef as j, onUnmounted as N, defineComponent as _, ref as g, onMounted as H, openBlock as f, createElementBlock as y, createElementVNode as $, toDisplayString as k, createCommentVNode as F, createBlock as V, Transition as q, withCtx as z, watch as E, nextTick as O, withKeys as G, withModifiers as J, createVNode as Q, computed as x, Fragment as X, renderList as Y, unref as b } from "vue";
+import { FormStateEngine as Z, validateField as ee, hasAsyncValidation as te, validateFieldAsync as ne, mergeStrings as le } from "@viveksinghind/narrative-form-core";
+function se(n) {
+  const e = new Z(n, () => {
+    t.value = e.getSnapshot(), U(t);
+  }), t = j(e.getSnapshot());
+  return N(() => {
+    e.reset();
+  }), {
+    snapshot: t,
+    startTyping: (l) => e.startTyping(l),
+    activateField: (l) => e.activateField(l),
+    confirmField: (l, u) => e.confirmField(l, u),
+    editField: (l) => e.editField(l),
+    reconfirmField: (l, u) => e.reconfirmField(l, u),
+    next: () => e.next(),
+    focusField: (l) => e.focusField(l),
+    reset: () => {
+      e.reset(), t.value = e.getSnapshot();
+    },
+    getValues: () => e.getValues(),
+    getMeta: (l, u) => e.getMeta(l, u)
+  };
+}
+const ae = { class: "ns-welcome fade-in" }, ie = { class: "ns-welcome-title" }, oe = {
+  key: 0,
+  class: "ns-welcome-subtitle"
+}, re = /* @__PURE__ */ _({
+  __name: "WelcomeScreen",
+  props: {
+    welcome: {},
+    typewriter: {}
+  },
+  emits: ["start"],
+  setup(n, { emit: e }) {
+    const t = n, l = e, u = g("");
+    let p;
+    return H(() => {
+      if (!t.typewriter.enabled) {
+        u.value = t.welcome.heading || "";
+        return;
+      }
+      let c = 0;
+      p = setInterval(() => {
+        u.value = (t.welcome.heading || "").slice(0, c + 1), c++, c >= (t.welcome.heading || "").length && clearInterval(p);
+      }, t.typewriter.speed ?? 30);
+    }), N(() => {
+      clearInterval(p);
+    }), (c, i) => (f(), y("div", ae, [
+      $("h1", ie, k(u.value), 1),
+      n.welcome.subtext ? (f(), y("p", oe, k(n.welcome.subtext), 1)) : F("", !0),
+      $("button", {
+        type: "button",
+        class: "ns-welcome-start",
+        onClick: i[0] || (i[0] = (h) => l("start"))
+      }, k(n.welcome.ctaLabel || "Start"), 1)
+    ]));
+  }
+}), L = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [l, u] of e)
+    t[l] = u;
+  return t;
+}, ue = /* @__PURE__ */ L(re, [["__scopeId", "data-v-dbeb46ea"]]), de = { class: "ns-done fade-in" }, ce = { class: "ns-done-title" }, ve = /* @__PURE__ */ _({
+  __name: "DoneScreen",
+  props: {
+    done: {},
+    values: {},
+    meta: {},
+    typewriter: {}
+  },
+  setup(n) {
+    return (e, t) => (f(), y("div", de, [
+      $("h1", ce, k(typeof n.done.message == "function" ? n.done.message(n.values) : n.done.message), 1)
+    ]));
+  }
+}), fe = /* @__PURE__ */ L(ve, [["__scopeId", "data-v-7802c8f5"]]), me = {
+  key: 0,
+  class: "ns-error-wrapper"
+}, pe = { class: "ns-error-text" }, ye = /* @__PURE__ */ _({
+  __name: "ErrorMessage",
+  props: {
+    message: {},
+    config: {}
+  },
+  setup(n) {
+    return (e, t) => (f(), V(q, { name: "fade-slide" }, {
+      default: z(() => [
+        n.message ? (f(), y("div", me, [
+          $("p", pe, k(n.message), 1)
+        ])) : F("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}), ge = /* @__PURE__ */ L(ye, [["__scopeId", "data-v-a8be2d7b"]]), we = { class: "ns-line fade-in" }, be = { class: "ns-prompt-row" }, ke = { class: "ns-prompt" }, Fe = {
+  key: 0,
+  class: "ns-value"
+}, he = {
+  key: 0,
+  class: "ns-input-row"
+}, Ce = ["type", "disabled", "value", "onKeydown"], xe = /* @__PURE__ */ _({
+  __name: "Line",
+  props: {
+    field: {},
+    status: {},
+    value: {},
+    allValues: {},
+    typewriter: {},
+    editable: { type: Boolean },
+    locked: { type: Boolean },
+    editLabel: {}
+  },
+  emits: ["typingComplete", "confirm", "edit", "error", "change", "focus", "blur"],
+  setup(n, { emit: e }) {
+    const t = n, l = e, u = g(null), p = g(""), c = g(t.value ? String(t.value) : ""), i = g(null), h = g(!1);
+    let I;
+    E(() => t.value, (v) => {
+      v !== void 0 && String(v) !== c.value && (c.value = String(v));
+    }), E(() => t.status, (v) => {
+      if (v === "typing") {
+        if (!t.typewriter.enabled) {
+          p.value = t.field.prompt, l("typingComplete", t.field.key);
+          return;
+        }
+        let o = 0;
+        I = setInterval(() => {
+          p.value = t.field.prompt.slice(0, o + 1), o++, o >= t.field.prompt.length && (clearInterval(I), l("typingComplete", t.field.key));
+        }, t.typewriter.speed ?? 30);
+      } else (v === "active" || v === "editing") && O(() => {
+        var o;
+        (o = u.value) == null || o.focus();
+      });
+    }, { immediate: !0 }), N(() => {
+      clearInterval(I);
+    });
+    const R = (v) => {
+      const o = v.target;
+      c.value = o.value, l("change", t.field.key, o.value), i.value && (i.value = null);
+    }, D = async () => {
+      const v = ee(t.field, c.value);
+      if (!v.valid) {
+        i.value = v.error || "Invalid input", l("error", t.field.key, i.value);
+        return;
+      }
+      if (te(t.field)) {
+        h.value = !0;
+        const o = await ne(t.field, c.value);
+        if (h.value = !1, !o.valid) {
+          i.value = o.error || "Invalid input", l("error", t.field.key, i.value);
+          return;
+        }
+      }
+      i.value = null, l("confirm", t.field.key, c.value);
+    };
+    return (v, o) => (f(), y("div", we, [
+      $("div", be, [
+        $("span", ke, k(n.status === "typing" ? p.value : n.field.prompt), 1),
+        n.status === "confirmed" ? (f(), y("span", Fe, k(c.value), 1)) : F("", !0),
+        n.status === "confirmed" && n.editable && !n.locked ? (f(), y("button", {
+          key: 1,
+          type: "button",
+          class: "ns-edit-btn",
+          onClick: o[0] || (o[0] = (B) => l("edit", n.field.key))
+        }, k(n.editLabel), 1)) : F("", !0)
+      ]),
+      n.status === "active" || n.status === "editing" ? (f(), y("div", he, [
+        $("input", {
+          ref_key: "inputRef",
+          ref: u,
+          type: n.field.type === "email" ? "email" : n.field.type === "password" ? "password" : "text",
+          class: "ns-input",
+          disabled: h.value,
+          value: c.value,
+          onInput: R,
+          onFocus: o[1] || (o[1] = (B) => l("focus", n.field.key)),
+          onBlur: o[2] || (o[2] = (B) => l("blur", n.field.key, c.value)),
+          onKeydown: G(J(D, ["prevent"]), ["enter"])
+        }, null, 40, Ce)
+      ])) : F("", !0),
+      Q(ge, { message: i.value }, null, 8, ["message"])
+    ]));
+  }
+}), $e = /* @__PURE__ */ L(xe, [["__scopeId", "data-v-d4b482a6"]]), Ie = {
+  key: 1,
+  class: "ns-form-body"
+}, Se = /* @__PURE__ */ _({
+  __name: "NarrativeForm",
+  props: {
+    fields: {},
+    formConfig: {},
+    typewriter: {},
+    welcome: {},
+    done: {},
+    editable: { type: Boolean, default: !0 },
+    editLabel: {},
+    callbacks: {},
+    defaultValues: {},
+    values: {},
+    strings: {},
+    reducedMotion: { type: Boolean }
+  },
+  setup(n) {
+    const e = n, t = x(() => e.fields ? e.fields : e.formConfig ? e.formConfig.fields : []), l = x(() => {
+      if (e.welcome) return e.welcome;
+      if (e.formConfig && "welcome" in e.formConfig) return e.formConfig.welcome;
+    }), u = x(() => {
+      if (e.done) return e.done;
+      if (e.formConfig && "done" in e.formConfig) return e.formConfig.done;
+    }), p = x(() => {
+      var d;
+      return {
+        ...e.typewriter,
+        enabled: e.reducedMotion ? !1 : ((d = e.typewriter) == null ? void 0 : d.enabled) ?? !0
+      };
+    }), c = x(() => le(e.strings)), {
+      snapshot: i,
+      startTyping: h,
+      activateField: I,
+      confirmField: R,
+      editField: D,
+      reconfirmField: v,
+      getMeta: o
+    } = se(t.value), B = x(() => {
+      var d;
+      return ((d = l.value) == null ? void 0 : d.show) !== !1 && l.value !== void 0;
+    }), S = g(!B.value), W = g(!1), K = () => {
+      if (!S.value || W.value || t.value.length === 0) return;
+      W.value = !0;
+      const d = t.value.find((a) => i.value.statuses[a.key] !== "confirmed");
+      d && h(d.key);
+    };
+    E(S, K), H(K);
+    const P = (d, a) => {
+      var m;
+      i.value.statuses[d] === "editing" ? v(d, a) : R(d, a), (m = e.callbacks) != null && m.onFieldComplete && e.callbacks.onFieldComplete(d, a, 0);
+      const T = t.value.findIndex((r) => r.key === d);
+      for (let r = T + 1; r < t.value.length; r++) {
+        const s = t.value[r];
+        if (!(!s || i.value.statuses[s.key] === "confirmed")) {
+          h(s.key);
+          break;
+        }
+      }
+    }, A = x(() => t.value.filter((d) => {
+      const a = i.value.statuses[d.key];
+      return a === "typing" || a === "active" || a === "confirmed" || a === "editing";
+    })), M = g(null);
+    return E(() => A.value.length, () => {
+      O(() => {
+        M.value && (M.value.scrollTop = M.value.scrollHeight);
+      });
+    }), (d, a) => (f(), y("div", {
+      class: "ns-root",
+      ref_key: "scrollContainerRef",
+      ref: M
+    }, [
+      !S.value && l.value ? (f(), V(ue, {
+        key: 0,
+        welcome: l.value,
+        typewriter: p.value,
+        onStart: a[0] || (a[0] = (C) => S.value = !0)
+      }, null, 8, ["welcome", "typewriter"])) : F("", !0),
+      S.value ? (f(), y("div", Ie, [
+        (f(!0), y(X, null, Y(A.value, (C) => {
+          var T;
+          return f(), V($e, {
+            key: C.key,
+            field: C,
+            status: b(i).statuses[C.key] ?? "idle",
+            value: ((T = e.values) == null ? void 0 : T[C.key]) ?? b(i).values[C.key],
+            allValues: b(i).values,
+            typewriter: p.value,
+            editable: e.editable,
+            locked: !1,
+            editLabel: e.editLabel ?? c.value.editLabel,
+            onTypingComplete: b(I),
+            onConfirm: P,
+            onEdit: a[1] || (a[1] = (m) => {
+              var r, s;
+              b(D)(m), (s = (r = e.callbacks) == null ? void 0 : r.onEdit) == null || s.call(r, m);
+            }),
+            onError: a[2] || (a[2] = (m, r) => {
+              var s, w;
+              return (w = (s = e.callbacks) == null ? void 0 : s.onError) == null ? void 0 : w.call(s, m, r);
+            }),
+            onChange: a[3] || (a[3] = (m, r) => {
+              var s, w;
+              return (w = (s = e.callbacks) == null ? void 0 : s.onChange) == null ? void 0 : w.call(s, m, r);
+            }),
+            onFocus: a[4] || (a[4] = (m) => {
+              var r, s;
+              return (s = (r = e.callbacks) == null ? void 0 : r.onFieldFocus) == null ? void 0 : s.call(r, m);
+            }),
+            onBlur: a[5] || (a[5] = (m, r) => {
+              var s, w;
+              return (w = (s = e.callbacks) == null ? void 0 : s.onFieldBlur) == null ? void 0 : w.call(s, m, r);
+            })
+          }, null, 8, ["field", "status", "value", "allValues", "typewriter", "editable", "editLabel", "onTypingComplete"]);
+        }), 128))
+      ])) : F("", !0),
+      b(i).isComplete && u.value ? (f(), V(fe, {
+        key: 2,
+        done: u.value,
+        values: b(i).values,
+        meta: b(o)(),
+        typewriter: p.value
+      }, null, 8, ["done", "values", "meta", "typewriter"])) : F("", !0)
+    ], 512));
+  }
+}), Be = /* @__PURE__ */ L(Se, [["__scopeId", "data-v-33050240"]]);
+export {
+  fe as DoneScreen,
+  ge as ErrorMessage,
+  $e as Line,
+  Be as NarrativeForm,
+  ue as WelcomeScreen,
+  se as useFormState
+};

package/dist/style.css

@@ -0,0 +1 @@
+.fade-in[data-v-dbeb46ea]{animation:fadeIn-dbeb46ea .5s ease-out}@keyframes fadeIn-dbeb46ea{0%{opacity:0}to{opacity:1}}.ns-welcome[data-v-dbeb46ea]{padding:2rem}.ns-welcome-title[data-v-dbeb46ea]{font-size:2rem;font-weight:700;margin-bottom:.5rem}.ns-welcome-subtitle[data-v-dbeb46ea]{font-size:1.125rem;opacity:.8;margin-bottom:2rem}.ns-welcome-start[data-v-dbeb46ea]{padding:.75rem 1.5rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.fade-in[data-v-7802c8f5]{animation:fadeIn-7802c8f5 .5s ease-out}@keyframes fadeIn-7802c8f5{0%{opacity:0}to{opacity:1}}.ns-done[data-v-7802c8f5]{padding:2rem}.ns-done-title[data-v-7802c8f5]{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.ns-done-subtitle[data-v-7802c8f5]{font-size:1rem;opacity:.8}.fade-slide-enter-active[data-v-a8be2d7b],.fade-slide-leave-active[data-v-a8be2d7b]{transition:opacity .2s,transform .2s}.fade-slide-enter-from[data-v-a8be2d7b],.fade-slide-leave-to[data-v-a8be2d7b]{opacity:0;transform:translateY(-10px)}.ns-error-text[data-v-a8be2d7b]{color:#d32f2f;font-size:.875rem;margin-top:4px}.fade-in[data-v-d4b482a6]{animation:fadeIn-d4b482a6 .3s ease-out}@keyframes fadeIn-d4b482a6{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.ns-line[data-v-d4b482a6]{margin:1rem 0}.ns-prompt-row[data-v-d4b482a6]{display:flex;align-items:center;flex-wrap:wrap}.ns-prompt[data-v-d4b482a6]{font-size:1.125rem;margin-right:.5rem}.ns-value[data-v-d4b482a6]{font-size:1.125rem;font-weight:600;color:#007bff;margin-right:.5rem}.ns-edit-btn[data-v-d4b482a6]{margin-left:.5rem;padding:.25rem .5rem;border-radius:4px;background-color:#0000000d;border:none;cursor:pointer;font-size:.75rem;font-weight:700}.ns-input-row[data-v-d4b482a6]{margin-top:.5rem}.ns-input[data-v-d4b482a6]{font-size:1.125rem;padding:.5rem 0;border:none;border-bottom:2px solid #007bff;outline:none;width:100%;background:transparent}.ns-input[data-v-d4b482a6]:disabled{border-bottom-color:#ccc}.ns-root[data-v-33050240]{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:1.25rem}.ns-form-body[data-v-33050240]{flex-grow:1}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@viveksinghind/narrative-form-vue",
+  "version": "1.0.2",
+  "description": "Vue 3 components for narrative-form — typewriter-style sign-up flow",
+  "author": "Vivek Singh <vivekSinghInd>",
+  "license": "MIT",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@viveksinghind/narrative-form-core": "1.0.2"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^5.0.3",
+    "vue": "^3.4.27",
+    "vue-tsc": "^2.0.16"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "narrative-form",
+    "typewriter",
+    "form",
+    "onboarding",
+    "signup",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vivekSinghInd/narrative-form.git",
+    "directory": "packages/vue"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}