@ceriousdevtech/vue-cerious-scroll 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to vue-cerious-scroll will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.7] - 2026-06-24
+
+### Fixed
+- **`provide()` values from the component using `<CeriousScroll>` now reach `inject()` inside rows** ([#1](https://github.com/ceriousdevtech/vue-cerious-scroll/issues/1)). Rows (and the table header) are rendered as detached vnode trees via Vue's `render()`, so injection resolved only against the app context's `provides` — app-level/plugin provides worked, but local `provide()` on the owning component did not. The wrapper now renders rows with the owning component instance's `provides` (which prototype-chains to the app provides), so component-level, plugin, and app-level provide/inject all work inside virtualized rows. When the owner provides nothing, behavior is unchanged.
+
+### Changed
+- Updated the core engine dependency to `@ceriousdevtech/cerious-scroll@^1.0.8` (native-scrollbar drag rendering is now coalesced to one render per frame, with no per-row layout thrash on fast drags).
+
 ## [1.0.6] - 2026-06-11
 
 ### Changed

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),N=require("@ceriousdevtech/cerious-scroll"),M="data-cerious-scroll-content",q="data-cerious-scroll-row";function L(e){const u=e.querySelector(`[${M}]`);if(u)return u;const o=document.createElement("div");return o.setAttribute(M,""),o.style.position="relative",o.style.width="100%",o.style.height="100%",o.style.overflowY="clip",o.style.overflowX="auto",e.appendChild(o),o}function B(e,u){const o=l=>{const n=l.detail;n&&u({percentage:n.percentage,currentElement:n.currentElement,scrollOffset:n.scrollOffset,result:{element:n.result.element,offset:n.result.offset}})},g=l=>{const n=l.detail;n&&u({percentage:n.percentage,currentElement:n.element,scrollOffset:n.scrollOffset,result:{element:n.element,offset:n.scrollOffset}})};return e.addEventListener("cerious-viewport-change",o),e.addEventListener("viewport-change",g),()=>{e.removeEventListener("cerious-viewport-change",o),e.removeEventListener("viewport-change",g)}}function j(e,u){const o=typeof e=="number"?e:typeof u=="number"?u:void 0;if(o===void 0||Number.isNaN(o))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(o))}function P(e){var I,A;const u=(I=r.getCurrentInstance())==null?void 0:I.appContext,o=r.ref(null),g=r.shallowRef(null);let l=null;const n=new Map;let s=null;const b=((A=e.options)==null?void 0:A.layout)==="table";let d=null;const H=t=>{if(!e.renderHeader)return;d==null||d();const c=u??null,a=r.effectScope(!0);a.run(()=>r.watchEffect(()=>{const f=e.renderHeader(),m=Array.isArray(f)?f:[f];for(const i of m)r.isVNode(i)&&(i.appContext=c);const h=r.h(r.Fragment,m);h.appContext=c,r.render(h,t)},{flush:"sync"})),d=()=>a.stop()},R=()=>r.toValue(e.autoRender)??!0,x=t=>{if(e.getItem)return e.getItem(t);const c=r.toValue(e.items);return c?c[t]:void 0},F=(t,c)=>{const a=u??null,f=r.effectScope(!0);return f.run(()=>r.watchEffect(()=>{const m=e.renderItem(x(t),t),h=Array.isArray(m)?m:[m];for(const p of h)r.isVNode(p)&&(p.appContext=a);const i=r.h(r.Fragment,h);i.appContext=a,r.render(i,c)},{flush:"sync"})),()=>f.stop()},T=t=>{t.stop(),r.render(null,t.mount),t.mount.remove()},y=()=>{var p;if(!l)return null;const{scroller:t,contentEl:c,container:a}=l,f=a.clientHeight||a.offsetHeight||0,m=(v,E)=>{const w=document.createElement("div");b&&(w.style.display="contents"),w.setAttribute(q,String(v)),E.appendChild(w);const C=F(v,w);n.set(v,{el:E,mount:w,stop:C})},h=t.renderViewport(f,c,m),i=new Set(t.getRenderedIndices());return n.forEach((v,E)=>{i.has(E)||(T(v),n.delete(E))}),(p=e.onMeasuredViewport)==null||p.call(e,h),h},V=t=>{if(!l)return;const c=l;l=null,c.unsubscribe(),t&&(s={currentElement:c.scroller.currentElement,scrollOffset:c.scroller.scrollOffset}),n.forEach(a=>T(a)),n.clear(),d==null||d(),d=null,c.contentEl.textContent="",c.scroller.detachScrollbar(c.container),c.scroller.dispose(),g.value=null},O=t=>{var v,E,w;const c=L(t),a=e.options??{},f=a.onScroll,m={...a,onScroll:()=>{f==null||f(),R()&&y()}};if(b&&e.renderHeader){const C=(v=a.table)==null?void 0:v.header;m.table={...a.table,header:S=>{C==null||C(S),H(S)}}}const h=j(r.toValue(e.totalElements),((E=r.toValue(e.items))==null?void 0:E.length)??null),i=new N.CeriousScroll(t,h,m);s&&(i.currentElement=Math.min(s.currentElement,h-1),i.scrollOffset=s.scrollOffset,s=null);const p=B(t,C=>{var S;(S=e.onViewportChange)==null||S.call(e,C)});l={scroller:i,contentEl:c,container:t,unsubscribe:p},g.value=i,(w=e.onReady)==null||w.call(e,i),R()&&requestAnimationFrame(()=>y())},_=()=>{V(!0);const t=o.value;t&&O(t)};return r.onMounted(()=>{const t=o.value;t&&O(t)}),r.onBeforeUnmount(()=>{V(!1)}),r.watch(()=>[r.toValue(e.totalElements),r.toValue(e.items)],()=>{var c;if(!l)return;const t=j(r.toValue(e.totalElements),((c=r.toValue(e.items))==null?void 0:c.length)??null);l.scroller.totalElements!==t&&_()}),{containerRef:o,scroller:g,render:y,jumpToElement:t=>l?(l.scroller.jumpToElement(t),y()):null,scrollToPercentage:t=>l?(l.scroller.handleScrollPercentage(t),y()):null,reset:()=>l?(l.scroller.reset(),y()):null,recalculate:()=>l?(l.scroller.clearAllCaches(),y()):null}}const U=r.defineComponent({name:"CeriousScroll",props:{totalElements:{type:Number,default:null},items:{type:Array,default:null},getItem:{type:Function,default:void 0},renderItem:{type:Function,default:void 0},options:{type:Object,default:void 0},autoRender:{type:Boolean,default:!0}},emits:{"viewport-change":e=>!0,"measured-viewport":e=>!0,ready:e=>!0},setup(e,{slots:u,emit:o,expose:g}){const l=(s,b)=>{var d;return e.renderItem?e.renderItem(s,b):(d=u.item)==null?void 0:d.call(u,{item:s,index:b})},n=P({totalElements:()=>e.totalElements,items:()=>e.items,getItem:e.getItem?s=>e.getItem(s):void 0,renderItem:l,renderHeader:u.header?()=>u.header():void 0,options:e.options,autoRender:()=>e.autoRender,onViewportChange:s=>o("viewport-change",s),onMeasuredViewport:s=>o("measured-viewport",s),onReady:s=>o("ready",s)});return g({scroller:n.scroller,render:n.render,jumpToElement:n.jumpToElement,scrollToPercentage:n.scrollToPercentage,reset:n.reset,recalculate:n.recalculate}),()=>{var s;return r.h("div",{ref:n.containerRef,style:{position:"relative",overflow:"hidden"}},(s=u.default)==null?void 0:s.call(u))}}});Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>N.CeriousScroll});exports.CeriousScroll=U;exports.useCeriousScroll=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),j=require("@ceriousdevtech/cerious-scroll"),A="data-cerious-scroll-content",_="data-cerious-scroll-row";function q(e){const l=e.querySelector(`[${A}]`);if(l)return l;const c=document.createElement("div");return c.setAttribute(A,""),c.style.position="relative",c.style.width="100%",c.style.height="100%",c.style.overflowY="clip",c.style.overflowX="auto",e.appendChild(c),c}function L(e,l){const c=m=>{const o=m.detail;o&&l({percentage:o.percentage,currentElement:o.currentElement,scrollOffset:o.scrollOffset,result:{element:o.result.element,offset:o.result.offset}})},y=m=>{const o=m.detail;o&&l({percentage:o.percentage,currentElement:o.element,scrollOffset:o.scrollOffset,result:{element:o.element,offset:o.scrollOffset}})};return e.addEventListener("cerious-viewport-change",c),e.addEventListener("viewport-change",y),()=>{e.removeEventListener("cerious-viewport-change",c),e.removeEventListener("viewport-change",y)}}function O(e,l){const c=typeof e=="number"?e:typeof l=="number"?l:void 0;if(c===void 0||Number.isNaN(c))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(c))}function P(e){var I;const l=n.getCurrentInstance(),c=l==null?void 0:l.provides,y=l?{...l.appContext,provides:c??l.appContext.provides}:void 0,m=n.ref(null),o=n.shallowRef(null);let t=null;const v=new Map,S=((I=e.options)==null?void 0:I.layout)==="table";let g=null;const M=r=>{if(!e.renderHeader)return;g==null||g();const u=y??null,s=n.effectScope(!0);s.run(()=>n.watchEffect(()=>{const i=e.renderHeader(),a=Array.isArray(i)?i:[i];for(const d of a)n.isVNode(d)&&(d.appContext=u);const f=n.h(n.Fragment,a);f.appContext=u,n.render(f,r)},{flush:"sync"})),g=()=>s.stop()},R=()=>n.toValue(e.autoRender)??!0,N=r=>{if(e.getItem)return e.getItem(r);const u=n.toValue(e.items);return u?u[r]:void 0},x=(r,u)=>{const s=y??null,i=n.effectScope(!0);return i.run(()=>n.watchEffect(()=>{const a=e.renderItem(N(r),r),f=Array.isArray(a)?a:[a];for(const C of f)n.isVNode(C)&&(C.appContext=s);const d=n.h(n.Fragment,f);d.appContext=s,n.render(d,u)},{flush:"sync"})),()=>i.stop()},V=r=>{r.stop(),n.render(null,r.mount),r.mount.remove()},h=()=>{var C;if(!t)return null;const{scroller:r,contentEl:u,container:s}=t,i=s.clientHeight||s.offsetHeight||0,a=(p,E)=>{const w=document.createElement("div");S&&(w.style.display="contents"),w.setAttribute(_,String(p)),E.appendChild(w);const b=x(p,w);v.set(p,{el:E,mount:w,stop:b})},f=r.renderViewport(i,u,a),d=new Set(r.getRenderedIndices());return v.forEach((p,E)=>{d.has(E)||(V(p),v.delete(E))}),(C=e.onMeasuredViewport)==null||C.call(e,f),f},H=r=>{if(!t)return;const u=t;t=null,u.unsubscribe(),v.forEach(s=>V(s)),v.clear(),g==null||g(),g=null,u.contentEl.textContent="",u.scroller.detachScrollbar(u.container),u.scroller.dispose(),o.value=null},F=r=>{var p,E,w;const u=q(r),s=e.options??{},i=s.onScroll,a={...s,onScroll:()=>{i==null||i(),R()&&h()}};if(S&&e.renderHeader){const b=(p=s.table)==null?void 0:p.header;a.table={...s.table,header:T=>{b==null||b(T),M(T)}}}const f=O(n.toValue(e.totalElements),((E=n.toValue(e.items))==null?void 0:E.length)??null),d=new j.CeriousScroll(r,f,a),C=L(r,b=>{var T;(T=e.onViewportChange)==null||T.call(e,b)});t={scroller:d,contentEl:u,container:r,unsubscribe:C},o.value=d,(w=e.onReady)==null||w.call(e,d),R()&&requestAnimationFrame(()=>h())};return n.onMounted(()=>{const r=m.value;r&&F(r)}),n.onBeforeUnmount(()=>{H()}),n.watch(()=>[n.toValue(e.totalElements),n.toValue(e.items)],()=>{var u;if(!t)return;const r=O(n.toValue(e.totalElements),((u=n.toValue(e.items))==null?void 0:u.length)??null);t.scroller.totalElements!==r&&(t.scroller.updateTotalElements(r),t.scroller.currentElement>r-1&&t.scroller.jumpToElement(r-1),R()&&h(),t.scroller.syncScrollbar())}),{containerRef:m,scroller:o,render:h,jumpToElement:r=>t?(t.scroller.jumpToElement(r),h()):null,scrollToPercentage:r=>t?(t.scroller.handleScrollPercentage(r),h()):null,reset:()=>t?(t.scroller.reset(),h()):null,recalculate:()=>t?(t.scroller.clearAllCaches(),h()):null}}const B=n.defineComponent({name:"CeriousScroll",props:{totalElements:{type:Number,default:null},items:{type:Array,default:null},getItem:{type:Function,default:void 0},renderItem:{type:Function,default:void 0},options:{type:Object,default:void 0},autoRender:{type:Boolean,default:!0}},emits:{"viewport-change":e=>!0,"measured-viewport":e=>!0,ready:e=>!0},setup(e,{slots:l,emit:c,expose:y}){const m=(t,v)=>{var S;return e.renderItem?e.renderItem(t,v):(S=l.item)==null?void 0:S.call(l,{item:t,index:v})},o=P({totalElements:()=>e.totalElements,items:()=>e.items,getItem:e.getItem?t=>e.getItem(t):void 0,renderItem:m,renderHeader:l.header?()=>l.header():void 0,options:e.options,autoRender:()=>e.autoRender,onViewportChange:t=>c("viewport-change",t),onMeasuredViewport:t=>c("measured-viewport",t),onReady:t=>c("ready",t)});return y({scroller:o.scroller,render:o.render,jumpToElement:o.jumpToElement,scrollToPercentage:o.scrollToPercentage,reset:o.reset,recalculate:o.recalculate}),()=>{var t;return n.h("div",{ref:o.containerRef,style:{position:"relative",overflow:"hidden"}},(t=l.default)==null?void 0:t.call(l))}}});Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>j.CeriousScroll});exports.CeriousScroll=B;exports.useCeriousScroll=P;

package/dist/index.js

@@ -1,156 +1,145 @@
-import { getCurrentInstance as U, ref as W, shallowRef as X, onMounted as Y, onBeforeUnmount as z, watch as D, toValue as w, effectScope as N, watchEffect as j, isVNode as H, h as I, Fragment as P, render as T, defineComponent as G } from "vue";
-import { CeriousScroll as J } from "@ceriousdevtech/cerious-scroll";
-import { CeriousScroll as ie } from "@ceriousdevtech/cerious-scroll";
-const _ = "data-cerious-scroll-content", K = "data-cerious-scroll-row";
-function Q(e) {
-  const c = e.querySelector(`[${_}]`);
-  if (c) return c;
-  const n = document.createElement("div");
-  return n.setAttribute(_, ""), n.style.position = "relative", n.style.width = "100%", n.style.height = "100%", n.style.overflowY = "clip", n.style.overflowX = "auto", e.appendChild(n), n;
+import { getCurrentInstance as B, ref as U, shallowRef as W, onMounted as X, onBeforeUnmount as Y, watch as z, toValue as w, effectScope as V, watchEffect as j, isVNode as M, h as A, Fragment as N, render as S, defineComponent as D } from "vue";
+import { CeriousScroll as G } from "@ceriousdevtech/cerious-scroll";
+import { CeriousScroll as ue } from "@ceriousdevtech/cerious-scroll";
+const P = "data-cerious-scroll-content", J = "data-cerious-scroll-row";
+function K(e) {
+  const o = e.querySelector(`[${P}]`);
+  if (o) return o;
+  const l = document.createElement("div");
+  return l.setAttribute(P, ""), l.style.position = "relative", l.style.width = "100%", l.style.height = "100%", l.style.overflowY = "clip", l.style.overflowX = "auto", e.appendChild(l), l;
 }
-function Z(e, c) {
-  const n = (o) => {
-    const r = o.detail;
-    r && c({
-      percentage: r.percentage,
-      currentElement: r.currentElement,
-      scrollOffset: r.scrollOffset,
-      result: { element: r.result.element, offset: r.result.offset }
+function Q(e, o) {
+  const l = (m) => {
+    const n = m.detail;
+    n && o({
+      percentage: n.percentage,
+      currentElement: n.currentElement,
+      scrollOffset: n.scrollOffset,
+      result: { element: n.result.element, offset: n.result.offset }
     });
-  }, h = (o) => {
-    const r = o.detail;
-    r && c({
-      percentage: r.percentage,
-      currentElement: r.element,
-      scrollOffset: r.scrollOffset,
-      result: { element: r.element, offset: r.scrollOffset }
+  }, y = (m) => {
+    const n = m.detail;
+    n && o({
+      percentage: n.percentage,
+      currentElement: n.element,
+      scrollOffset: n.scrollOffset,
+      result: { element: n.element, offset: n.scrollOffset }
     });
   };
-  return e.addEventListener("cerious-viewport-change", n), e.addEventListener("viewport-change", h), () => {
-    e.removeEventListener("cerious-viewport-change", n), e.removeEventListener("viewport-change", h);
+  return e.addEventListener("cerious-viewport-change", l), e.addEventListener("viewport-change", y), () => {
+    e.removeEventListener("cerious-viewport-change", l), e.removeEventListener("viewport-change", y);
   };
 }
-function F(e, c) {
-  const n = typeof e == "number" ? e : typeof c == "number" ? c : void 0;
-  if (n === void 0 || Number.isNaN(n))
+function H(e, o) {
+  const l = typeof e == "number" ? e : typeof o == "number" ? o : void 0;
+  if (l === void 0 || Number.isNaN(l))
     throw new Error("useCeriousScroll: provide `totalElements` or `items`.");
-  return Math.max(1, Math.floor(n));
+  return Math.max(1, Math.floor(l));
 }
-function k(e) {
-  var V, x;
-  const c = (V = U()) == null ? void 0 : V.appContext, n = W(null), h = X(null);
-  let o = null;
-  const r = /* @__PURE__ */ new Map();
-  let s = null;
-  const b = ((x = e.options) == null ? void 0 : x.layout) === "table";
-  let f = null;
-  const L = (t) => {
+function Z(e) {
+  var x;
+  const o = B(), l = o == null ? void 0 : o.provides, y = o ? { ...o.appContext, provides: l ?? o.appContext.provides } : void 0, m = U(null), n = W(null);
+  let t = null;
+  const f = /* @__PURE__ */ new Map(), T = ((x = e.options) == null ? void 0 : x.layout) === "table";
+  let v = null;
+  const _ = (r) => {
     if (!e.renderHeader) return;
-    f == null || f();
-    const l = c ?? null, u = N(!0);
-    u.run(
+    v == null || v();
+    const c = y ?? null, s = V(!0);
+    s.run(
       () => j(
         () => {
-          const a = e.renderHeader(), d = Array.isArray(a) ? a : [a];
-          for (const i of d) H(i) && (i.appContext = l);
-          const m = I(P, d);
-          m.appContext = l, T(m, t);
+          const u = e.renderHeader(), i = Array.isArray(u) ? u : [u];
+          for (const a of i) M(a) && (a.appContext = c);
+          const d = A(N, i);
+          d.appContext = c, S(d, r);
         },
         { flush: "sync" }
       )
-    ), f = () => u.stop();
-  }, O = () => w(e.autoRender) ?? !0, $ = (t) => {
-    if (e.getItem) return e.getItem(t);
-    const l = w(e.items);
-    return l ? l[t] : void 0;
-  }, q = (t, l) => {
-    const u = c ?? null, a = N(!0);
-    return a.run(
+    ), v = () => s.stop();
+  }, I = () => w(e.autoRender) ?? !0, F = (r) => {
+    if (e.getItem) return e.getItem(r);
+    const c = w(e.items);
+    return c ? c[r] : void 0;
+  }, L = (r, c) => {
+    const s = y ?? null, u = V(!0);
+    return u.run(
       () => j(
         () => {
-          const d = e.renderItem($(t), t), m = Array.isArray(d) ? d : [d];
-          for (const y of m)
-            H(y) && (y.appContext = u);
-          const i = I(P, m);
-          i.appContext = u, T(i, l);
+          const i = e.renderItem(F(r), r), d = Array.isArray(i) ? i : [i];
+          for (const C of d)
+            M(C) && (C.appContext = s);
+          const a = A(N, d);
+          a.appContext = s, S(a, c);
         },
         { flush: "sync" }
       )
-    ), () => a.stop();
-  }, S = (t) => {
-    t.stop(), T(null, t.mount), t.mount.remove();
-  }, p = () => {
-    var y;
-    if (!o) return null;
-    const { scroller: t, contentEl: l, container: u } = o, a = u.clientHeight || u.offsetHeight || 0, d = (v, g) => {
+    ), () => u.stop();
+  }, O = (r) => {
+    r.stop(), S(null, r.mount), r.mount.remove();
+  }, h = () => {
+    var C;
+    if (!t) return null;
+    const { scroller: r, contentEl: c, container: s } = t, u = s.clientHeight || s.offsetHeight || 0, i = (g, p) => {
       const E = document.createElement("div");
-      b && (E.style.display = "contents"), E.setAttribute(K, String(v)), g.appendChild(E);
-      const C = q(v, E);
-      r.set(v, { el: g, mount: E, stop: C });
-    }, m = t.renderViewport(a, l, d), i = new Set(t.getRenderedIndices());
-    return r.forEach((v, g) => {
-      i.has(g) || (S(v), r.delete(g));
-    }), (y = e.onMeasuredViewport) == null || y.call(e, m), m;
-  }, A = (t) => {
-    if (!o) return;
-    const l = o;
-    o = null, l.unsubscribe(), t && (s = {
-      currentElement: l.scroller.currentElement,
-      scrollOffset: l.scroller.scrollOffset
-    }), r.forEach((u) => S(u)), r.clear(), f == null || f(), f = null, l.contentEl.textContent = "", l.scroller.detachScrollbar(l.container), l.scroller.dispose(), h.value = null;
-  }, M = (t) => {
-    var v, g, E;
-    const l = Q(t), u = e.options ?? {}, a = u.onScroll, d = {
-      ...u,
+      T && (E.style.display = "contents"), E.setAttribute(J, String(g)), p.appendChild(E);
+      const b = L(g, E);
+      f.set(g, { el: p, mount: E, stop: b });
+    }, d = r.renderViewport(u, c, i), a = new Set(r.getRenderedIndices());
+    return f.forEach((g, p) => {
+      a.has(p) || (O(g), f.delete(p));
+    }), (C = e.onMeasuredViewport) == null || C.call(e, d), d;
+  }, $ = (r) => {
+    if (!t) return;
+    const c = t;
+    t = null, c.unsubscribe(), f.forEach((s) => O(s)), f.clear(), v == null || v(), v = null, c.contentEl.textContent = "", c.scroller.detachScrollbar(c.container), c.scroller.dispose(), n.value = null;
+  }, q = (r) => {
+    var g, p, E;
+    const c = K(r), s = e.options ?? {}, u = s.onScroll, i = {
+      ...s,
       onScroll: () => {
-        a == null || a(), O() && p();
+        u == null || u(), I() && h();
       }
     };
-    if (b && e.renderHeader) {
-      const C = (v = u.table) == null ? void 0 : v.header;
-      d.table = {
-        ...u.table,
+    if (T && e.renderHeader) {
+      const b = (g = s.table) == null ? void 0 : g.header;
+      i.table = {
+        ...s.table,
         header: (R) => {
-          C == null || C(R), L(R);
+          b == null || b(R), _(R);
         }
       };
     }
-    const m = F(w(e.totalElements), ((g = w(e.items)) == null ? void 0 : g.length) ?? null), i = new J(t, m, d);
-    s && (i.currentElement = Math.min(s.currentElement, m - 1), i.scrollOffset = s.scrollOffset, s = null);
-    const y = Z(t, (C) => {
+    const d = H(w(e.totalElements), ((p = w(e.items)) == null ? void 0 : p.length) ?? null), a = new G(r, d, i), C = Q(r, (b) => {
       var R;
-      (R = e.onViewportChange) == null || R.call(e, C);
+      (R = e.onViewportChange) == null || R.call(e, b);
     });
-    o = { scroller: i, contentEl: l, container: t, unsubscribe: y }, h.value = i, (E = e.onReady) == null || E.call(e, i), O() && requestAnimationFrame(() => p());
-  }, B = () => {
-    A(!0);
-    const t = n.value;
-    t && M(t);
+    t = { scroller: a, contentEl: c, container: r, unsubscribe: C }, n.value = a, (E = e.onReady) == null || E.call(e, a), I() && requestAnimationFrame(() => h());
   };
-  return Y(() => {
-    const t = n.value;
-    t && M(t);
-  }), z(() => {
-    A(!1);
-  }), D(
+  return X(() => {
+    const r = m.value;
+    r && q(r);
+  }), Y(() => {
+    $();
+  }), z(
     () => [w(e.totalElements), w(e.items)],
     () => {
-      var l;
-      if (!o) return;
-      const t = F(w(e.totalElements), ((l = w(e.items)) == null ? void 0 : l.length) ?? null);
-      o.scroller.totalElements !== t && B();
+      var c;
+      if (!t) return;
+      const r = H(w(e.totalElements), ((c = w(e.items)) == null ? void 0 : c.length) ?? null);
+      t.scroller.totalElements !== r && (t.scroller.updateTotalElements(r), t.scroller.currentElement > r - 1 && t.scroller.jumpToElement(r - 1), I() && h(), t.scroller.syncScrollbar());
     }
   ), {
-    containerRef: n,
-    scroller: h,
-    render: p,
-    jumpToElement: (t) => o ? (o.scroller.jumpToElement(t), p()) : null,
-    scrollToPercentage: (t) => o ? (o.scroller.handleScrollPercentage(t), p()) : null,
-    reset: () => o ? (o.scroller.reset(), p()) : null,
-    recalculate: () => o ? (o.scroller.clearAllCaches(), p()) : null
+    containerRef: m,
+    scroller: n,
+    render: h,
+    jumpToElement: (r) => t ? (t.scroller.jumpToElement(r), h()) : null,
+    scrollToPercentage: (r) => t ? (t.scroller.handleScrollPercentage(r), h()) : null,
+    reset: () => t ? (t.scroller.reset(), h()) : null,
+    recalculate: () => t ? (t.scroller.clearAllCaches(), h()) : null
   };
 }
-const ce = G({
+const le = D({
   name: "CeriousScroll",
   props: {
     /** Total item count. Falls back to `items.length` when omitted. */
@@ -177,50 +166,50 @@ const ce = G({
     /** Emitted once the underlying engine instance is ready (and after recreation). */
     ready: (e) => !0
   },
-  setup(e, { slots: c, emit: n, expose: h }) {
-    const o = (s, b) => {
-      var f;
-      return e.renderItem ? e.renderItem(s, b) : (f = c.item) == null ? void 0 : f.call(c, { item: s, index: b });
-    }, r = k({
+  setup(e, { slots: o, emit: l, expose: y }) {
+    const m = (t, f) => {
+      var T;
+      return e.renderItem ? e.renderItem(t, f) : (T = o.item) == null ? void 0 : T.call(o, { item: t, index: f });
+    }, n = Z({
       totalElements: () => e.totalElements,
       items: () => e.items,
-      getItem: e.getItem ? (s) => e.getItem(s) : void 0,
-      renderItem: o,
+      getItem: e.getItem ? (t) => e.getItem(t) : void 0,
+      renderItem: m,
       // Table mode: declarative header. Render the `#header` slot (a <tr> of
       // <th>s) into the engine's <thead>. `undefined` when no slot is provided.
-      renderHeader: c.header ? () => c.header() : void 0,
+      renderHeader: o.header ? () => o.header() : void 0,
       // Engine options are consumed at creation; reading the prop once matches
       // that contract (remount via `:key` to apply new engine options).
       options: e.options,
       autoRender: () => e.autoRender,
-      onViewportChange: (s) => n("viewport-change", s),
-      onMeasuredViewport: (s) => n("measured-viewport", s),
-      onReady: (s) => n("ready", s)
+      onViewportChange: (t) => l("viewport-change", t),
+      onMeasuredViewport: (t) => l("measured-viewport", t),
+      onReady: (t) => l("ready", t)
     });
-    return h({
+    return y({
       /** The underlying engine instance (`null` before mount). */
-      scroller: r.scroller,
-      render: r.render,
-      jumpToElement: r.jumpToElement,
-      scrollToPercentage: r.scrollToPercentage,
-      reset: r.reset,
-      recalculate: r.recalculate
+      scroller: n.scroller,
+      render: n.render,
+      jumpToElement: n.jumpToElement,
+      scrollToPercentage: n.scrollToPercentage,
+      reset: n.reset,
+      recalculate: n.recalculate
     }), () => {
-      var s;
-      return I(
+      var t;
+      return A(
         "div",
         {
-          ref: r.containerRef,
+          ref: n.containerRef,
           // User-supplied class/style/attrs fall through and merge onto this root.
           style: { position: "relative", overflow: "hidden" }
         },
-        (s = c.default) == null ? void 0 : s.call(c)
+        (t = o.default) == null ? void 0 : t.call(o)
       );
     };
   }
 });
 export {
-  ce as CeriousScroll,
-  ie as CeriousScrollEngine,
-  k as useCeriousScroll
+  le as CeriousScroll,
+  ue as CeriousScrollEngine,
+  Z as useCeriousScroll
 };

package/dist/use-cerious-scroll.d.ts

@@ -61,6 +61,7 @@ export interface UseCeriousScrollResult {
  *
  * Rows are rendered with the host component's `appContext`, so globally
  * registered components, directives, and installed plugins are available inside
- * each row.
+ * each row — and with the owning component instance's `provides`, so local
+ * `provide()` values reach `inject()` inside rows too (see below).
  */
 export declare function useCeriousScroll<TItem = unknown>(opts: UseCeriousScrollOptions<TItem>): UseCeriousScrollResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceriousdevtech/vue-cerious-scroll",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Vue 3 bindings for CeriousScroll — high-performance virtual scrolling with O(1) memory and no height estimation",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -57,7 +57,7 @@
     "demo:build": "vite build --config demo/vite.config.ts"
   },
   "dependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.7"
+    "@ceriousdevtech/cerious-scroll": "^1.0.8"
   },
   "peerDependencies": {
     "vue": "^3.3.0"