@curiouslearning/gdl-player-core 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Player } from './components/Player';
 export type { PlayerProps } from './components/Player';
+export type { PlayerSource } from './lib/utils';
 export type { PlayerAnalytics } from './types/analytics';
 export type { FontDefinition } from './types/font';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./utils-Dm7P4Nnv.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./utils-D1e5mIt_.js";
 //#region node_modules/swiper/shared/ssr-window.esm.mjs
 var c = /* @__PURE__ */ t(o(), 1);
 function l(e) {
@@ -5756,7 +5756,7 @@ var Jc = {
 		style: tl,
 		children: t
 	});
-}, rl = c.lazy(() => import("./dolottie-D6pmgIXi.js")), il = c.lazy(() => import("./Image-Bwx-qXJQ.js")), al = ({ item: t, screenScale: n, onMediaClick: r, ref: i }) => {
+}, rl = c.lazy(() => import("./dolottie-DSkJyF_U.js")), il = c.lazy(() => import("./Image-Dh6rF8NX.js")), al = ({ item: t, screenScale: n, onMediaClick: r, ref: i }) => {
 	let { effect: a, mediaType: o } = t, [s, l] = (0, c.useState)(!1), [u, d] = (0, c.useState)(null), { bookId: f } = e(), p = (0, c.useCallback)(() => {
 		u && !s && (l(!0), u.setFrame(0), u.play());
 	}, [
@@ -6016,14 +6016,17 @@ var cl = c.memo(sl), ll = {
 		"aria-hidden": "true",
 		children: [p && /* @__PURE__ */ (0, I.jsx)(kn, { background: p }), P]
 	});
-}, fl = 1280, pl = 600, ml = fl / pl, hl = ({ id: e, analytics: t, fonts: i = [] }) => {
-	let [a, o] = (0, c.useState)(null), [s, l] = (0, c.useState)(null), [u, d] = (0, c.useState)(null), [f, p] = (0, c.useState)(null), m = cn(i, a?.language), h = ln(m), g = m[0]?.family || "Quicksand", _ = a?.illustration && a.illustration.path || a?.coverText && a.coverText !== "", v = a?.credits && a.credits?.text || a?.credits?.logos && a.credits?.logos.length > 0, [y, b] = (0, c.useState)({
+}, fl = 1280, pl = 600, ml = fl / pl, hl = ({ id: e, analytics: t, fonts: i = [], bookSource: a = {
+	type: "static",
+	staticFolder: "GDLBookContent"
+} }) => {
+	let [o, s] = (0, c.useState)(null), [l, u] = (0, c.useState)(null), [d, f] = (0, c.useState)(null), [p, m] = (0, c.useState)(null), h = cn(i, o?.language), g = ln(h), _ = h[0]?.family || "Quicksand", v = o?.illustration && o.illustration.path || o?.coverText && o.coverText !== "", y = o?.credits && o.credits?.text || o?.credits?.logos && o.credits?.logos.length > 0, [b, x] = (0, c.useState)({
 		width: 0,
 		height: 0
-	}), { width: x, height: S } = y, C = a?.config.textDirection || "LTR", w = "production", T = "GDLBookContent";
+	}), { width: S, height: C } = b, w = o?.config.textDirection || "LTR";
 	(0, c.useEffect)(() => {
 		let e = () => {
-			b({
+			x({
 				width: window.innerWidth,
 				height: window.innerHeight
 			});
@@ -6032,44 +6035,40 @@ var cl = c.memo(sl), ll = {
 			window.removeEventListener("resize", e);
 		};
 	}, []);
-	let E = 100, D = {
+	let T = 100, E = {
 		width: fl,
 		height: pl
 	};
-	return (x < fl || S < pl) && (pl / S > fl / x ? (D = {
-		height: S,
-		width: S * ml
-	}, E = S / pl * 100) : (D = {
-		width: x,
-		height: x / ml
-	}, E = x / fl * 100)), (0, c.useEffect)(() => {
-		!a && e && (async (e) => {
-			let n = `/${T}/${e}/content.json`;
+	return (S < fl || C < pl) && (pl / C > fl / S ? (E = {
+		height: C,
+		width: C * ml
+	}, T = C / pl * 100) : (E = {
+		width: S,
+		height: S / ml
+	}, T = S / fl * 100)), (0, c.useEffect)(() => {
+		!o && e && (async (e) => {
+			let n = a.type === "api" ? `${a.apiHost}/api/book?slug=${e}` : `/${a.staticFolder}/${e}/content.json`;
 			try {
 				let r = await fetch(n, { cache: "no-store" });
 				if (!r.ok) throw Error(`Error fetching data for (${e}): ${r.status}`);
 				let i = await r.json();
-				o(i), l(null), navigator.onLine && t?.onBookOpened && t.onBookOpened(i._id, i.title);
+				s(i), u(null), navigator.onLine && t?.onBookOpened && t.onBookOpened(i._id, i.title);
 			} catch (t) {
-				console.error(t), o(null), l(`Error fetching data for (${e}): ${t instanceof Error ? t.message : "Unknown error"}`);
+				console.error(t), s(null), u(`Error fetching data for (${e}): ${t instanceof Error ? t.message : "Unknown error"}`);
 			}
 		})(e);
-	}, [e]), s ? /* @__PURE__ */ (0, I.jsxs)("p", {
+	}, [e]), l ? /* @__PURE__ */ (0, I.jsxs)("p", {
 		role: "alert",
 		className: "player",
-		children: ["Error: ", s]
-	}) : !a || !e ? /* @__PURE__ */ (0, I.jsx)("p", {
+		children: ["Error: ", l]
+	}) : !o || !e ? /* @__PURE__ */ (0, I.jsx)("p", {
 		role: "status",
 		className: "player",
 		children: "Loading..."
-	}) : /* @__PURE__ */ (0, I.jsxs)(I.Fragment, { children: [/* @__PURE__ */ (0, I.jsx)("style", { children: `:root, :host, .player { --player-font-family: '${sn(g)}'; }${h}${on}` }), /* @__PURE__ */ (0, I.jsx)(n, {
-		bookId: a._id,
-		slug: a.slug,
-		assetConfig: {
-			mode: w,
-			staticFolder: T,
-			assetsHost: ""
-		},
+	}) : /* @__PURE__ */ (0, I.jsxs)(I.Fragment, { children: [/* @__PURE__ */ (0, I.jsx)("style", { children: `:root, :host, .player { --player-font-family: '${sn(_)}'; }${g}${on}` }), /* @__PURE__ */ (0, I.jsx)(n, {
+		bookId: o._id,
+		slug: o.slug,
+		assetConfig: a,
 		analytics: t,
 		children: /* @__PURE__ */ (0, I.jsx)("div", {
 			className: "player",
@@ -6077,92 +6076,88 @@ var cl = c.memo(sl), ll = {
 				className: "view-box",
 				children: /* @__PURE__ */ (0, I.jsxs)(en, {
 					onSlideChange: (e) => {
-						d(e.activeIndex), a && (t?.onPageTurned && t.onPageTurned(a._id, e.activeIndex), e.isEnd && t?.onBookCompleted && t.onBookCompleted(a._id, a.title));
+						f(e.activeIndex), o && (t?.onPageTurned && t.onPageTurned(o._id, e.activeIndex), e.isEnd && t?.onBookCompleted && t.onBookCompleted(o._id, o.title));
 					},
 					className: "mySwiper swiper-container",
 					speed: 1200,
-					dir: C.toLowerCase() ?? "ltr",
+					dir: w.toLowerCase() ?? "ltr",
 					modules: [an],
 					pagination: {
 						clickable: !1,
 						type: "progressbar"
 					},
 					onSwiper: (e) => {
-						p(e);
+						m(e);
 					},
-					style: { ...D },
+					style: { ...E },
 					a11y: {
 						enabled: !0,
 						prevSlideMessage: "Previous page",
 						nextSlideMessage: "Next page"
 					},
 					children: [
-						_ && /* @__PURE__ */ (0, I.jsx)(tn, {
+						v && /* @__PURE__ */ (0, I.jsx)(tn, {
 							"data-hash": "cover",
 							children: ({ isActive: e }) => /* @__PURE__ */ (0, I.jsxs)("div", {
 								className: "cover-page",
 								inert: e ? void 0 : !0,
 								children: [/* @__PURE__ */ (0, I.jsx)("div", {
 									className: "cover-illustration",
-									children: a.illustration?.path && /* @__PURE__ */ (0, I.jsx)("img", {
+									children: o.illustration?.path && /* @__PURE__ */ (0, I.jsx)("img", {
 										src: r({
-											bookId: a._id,
-											slug: a.slug,
-											assetConfig: {
-												mode: w,
-												staticFolder: T,
-												assetsHost: ""
-											}
-										}, a.illustration),
-										alt: a.title
+											bookId: o._id,
+											slug: o.slug,
+											assetConfig: a
+										}, o.illustration),
+										alt: o.title
 									})
 								}), /* @__PURE__ */ (0, I.jsxs)("div", {
 									className: "cover-text",
-									dir: C.toLowerCase() || "ltr",
-									children: [/* @__PURE__ */ (0, I.jsx)("h1", { children: a.title }), a.coverText && /* @__PURE__ */ (0, I.jsx)("small", { children: a.coverText })]
+									dir: w.toLowerCase() || "ltr",
+									children: [/* @__PURE__ */ (0, I.jsx)("h1", { children: o.title }), o.coverText && /* @__PURE__ */ (0, I.jsx)("small", { children: o.coverText })]
 								})]
 							})
 						}),
-						a.body.map((e) => /* @__PURE__ */ (0, I.jsx)(tn, {
+						o.body.map((e) => /* @__PURE__ */ (0, I.jsx)(tn, {
 							className: "overflow-hidden",
 							"data-hash": e._id,
 							children: ({ isActive: t }) => /* @__PURE__ */ (0, I.jsx)(dl, {
-								screenScale: E,
+								screenScale: T,
 								page: e,
 								isActive: t,
-								textDirection: C
+								textDirection: w
 							})
 						}, e._id)),
-						v && /* @__PURE__ */ (0, I.jsx)(tn, {
+						y && /* @__PURE__ */ (0, I.jsx)(tn, {
 							"data-hash": "credits",
 							children: ({ isActive: e }) => /* @__PURE__ */ (0, I.jsxs)("div", {
 								className: "credits-page",
 								inert: e ? void 0 : !0,
 								children: [/* @__PURE__ */ (0, I.jsx)("div", {
 									className: "credits-page-inner",
-									children: a.credits?.logos.map((e) => /* @__PURE__ */ (0, I.jsx)("div", {
+									children: o.credits?.logos.map((e) => /* @__PURE__ */ (0, I.jsx)("div", {
 										className: "logo-item",
 										children: /* @__PURE__ */ (0, I.jsx)("img", {
-											src: `/${T}/${a.slug}/assets/${e}.jpg`,
+											src: a.type === "api" ? `${a.assetsHost}/logos/${e}.jpg` : `/${a.staticFolder}/${o.slug}/assets/${e}.jpg`,
 											alt: e
 										})
 									}, e))
 								}), /* @__PURE__ */ (0, I.jsxs)("div", {
 									className: "credits-page-bottom",
-									dir: C.toLowerCase() || "ltr",
+									dir: w.toLowerCase() || "ltr",
 									children: [/* @__PURE__ */ (0, I.jsxs)("h1", { children: [
 										"\"",
-										a.title,
+										o.title,
 										"\" credits"
-									] }), a.credits?.text && /* @__PURE__ */ (0, I.jsx)("small", { children: a.credits.text })]
+									] }), o.credits?.text && /* @__PURE__ */ (0, I.jsx)("small", { children: o.credits.text })]
 								})]
 							})
 						}),
-						f && f.slides.length > 1 && /* @__PURE__ */ (0, I.jsx)(En, {
-							isFirst: f.isBeginning === !0,
-							isLast: f.isEnd === !0,
-							activeIndex: u,
-							textDirection: C
+						p && p.slides.length > 1 && /* @__PURE__ */ (0, I.jsx)(En, {
+							isFirst: p.isBeginning === !0,
+							isLast: p.isEnd === !0,
+							activeIndex: d,
+							textDirection: w
 						})
 					]
 				})

package/dist/lib/utils.d.ts

@@ -1,9 +1,19 @@
 import type { BookContextType } from '../types/context';
-export type AssetConfig = {
-    mode: 'development' | 'production';
-    staticFolder: string;
+/**
+ * Describes where the player should load book data and assets from. This is a
+ * runtime choice made by the consumer, not the library's build mode:
+ * - `api`: load from a backend/DB (library dev server, book builder).
+ * - `static`: load from a static folder (production player web component).
+ */
+export type PlayerSource = {
+    type: 'api';
+    apiHost: string;
     assetsHost: string;
+} | {
+    type: 'static';
+    staticFolder: string;
 };
+export type AssetConfig = PlayerSource;
 export declare const getContextAssetPath: (context: BookContextType, asset: any, config?: AssetConfig) => string;
 export declare const getContextAudioPath: (context: BookContextType, audio: any) => string;
 export declare const delay: (ms: number) => Promise<void>;

package/dist/{utils-Dm7P4Nnv.js → utils-D1e5mIt_.js}

@@ -1090,9 +1090,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	bookId: "",
 	slug: "",
 	assetConfig: {
-		mode: "development",
-		staticFolder: "",
-		assetsHost: ""
+		type: "static",
+		staticFolder: ""
 	},
 	analytics: void 0
 }), v = ({ bookId: e, slug: t, assetConfig: n, analytics: r, children: i }) => /* @__PURE__ */ (0, g.jsx)(_.Provider, {
@@ -1105,10 +1104,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	children: i
 }), y = () => (0, h.useContext)(_), b = (e, t, n) => {
 	let r = n ?? e.assetConfig, i = (t?.path ?? t?.url ?? "").split("/").pop() || t?.filename || t?.name || "";
-	return r.mode === "development" ? `${r.assetsHost}${t?.path ?? t?.url ?? ""}` : `/${r.staticFolder}/${encodeURIComponent(e.slug)}/assets/${i}`;
+	return r.type === "api" ? `${r.assetsHost}${t?.path ?? t?.url ?? ""}` : `/${r.staticFolder}/${encodeURIComponent(e.slug)}/assets/${i}`;
 }, x = (e, t) => {
-	let n = t?.path ?? t?.mp3 ?? "", r = n.split("/").pop() || t?.filename || t?.name || "";
-	return e.assetConfig.mode === "development" ? `${e.assetConfig.assetsHost}${n}` : `/${e.assetConfig.staticFolder}/${encodeURIComponent(e.slug)}/audio/${r}`;
+	let n = e.assetConfig, r = t?.path ?? t?.mp3 ?? "", i = r.split("/").pop() || t?.filename || t?.name || "";
+	return n.type === "api" ? `${n.assetsHost}${r}` : `/${n.staticFolder}/${encodeURIComponent(e.slug)}/audio/${i}`;
 }, S = (e) => new Promise((t) => {
 	setTimeout(t, e);
 });

package/dist/{utils-DTI6gl3r.cjs → utils-V9RwSxwh.cjs}

@@ -15,4 +15,4 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,f,m,f),R[f+o]=!0)}if(f=null,i!==void 0&&(r(i),f=``+i),s(n)&&(r(n.key),f=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return f&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,f,i,a(),l,d)}function p(e){m(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===D&&(e._payload.status===`fulfilled`?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e==`object`&&!!e&&e.$$typeof===g}var h=d(),g=Symbol.for(`react.transitional.element`),_=Symbol.for(`react.portal`),v=Symbol.for(`react.fragment`),y=Symbol.for(`react.strict_mode`),b=Symbol.for(`react.profiler`),x=Symbol.for(`react.consumer`),S=Symbol.for(`react.context`),C=Symbol.for(`react.forward_ref`),w=Symbol.for(`react.suspense`),T=Symbol.for(`react.suspense_list`),E=Symbol.for(`react.memo`),D=Symbol.for(`react.lazy`),O=Symbol.for(`react.activity`),k=Symbol.for(`react.client.reference`),A=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=h.react_stack_bottom_frame.bind(h,o)(),L=N(i(o)),R={};e.Fragment=v,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;return f(e,t,n,!1,r?Error(`react-stack-top-frame`):I,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;return f(e,t,n,!0,r?Error(`react-stack-top-frame`):I,r?N(i(e)):L)}})()})),m=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=f():t.exports=p()})),h=c(d(),1),g=m(),_=h.createContext({bookId:``,slug:``,assetConfig:{mode:`development`,staticFolder:``,assetsHost:``},analytics:void 0}),v=({bookId:e,slug:t,assetConfig:n,analytics:r,children:i})=>(0,g.jsx)(_.Provider,{value:{bookId:e,slug:t,assetConfig:n,analytics:r},children:i}),y=()=>(0,h.useContext)(_),b=(e,t,n)=>{let r=n??e.assetConfig,i=(t?.path??t?.url??``).split(`/`).pop()||t?.filename||t?.name||``;return r.mode===`development`?`${r.assetsHost}${t?.path??t?.url??``}`:`/${r.staticFolder}/${encodeURIComponent(e.slug)}/assets/${i}`},x=(e,t)=>{let n=t?.path??t?.mp3??``,r=n.split(`/`).pop()||t?.filename||t?.name||``;return e.assetConfig.mode===`development`?`${e.assetConfig.assetsHost}${n}`:`/${e.assetConfig.staticFolder}/${encodeURIComponent(e.slug)}/audio/${r}`},S=e=>new Promise(t=>{setTimeout(t,e)});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return S}});
+  <%s key={someKey} {...props} />`,o,f,m,f),R[f+o]=!0)}if(f=null,i!==void 0&&(r(i),f=``+i),s(n)&&(r(n.key),f=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return f&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,f,i,a(),l,d)}function p(e){m(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===D&&(e._payload.status===`fulfilled`?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e==`object`&&!!e&&e.$$typeof===g}var h=d(),g=Symbol.for(`react.transitional.element`),_=Symbol.for(`react.portal`),v=Symbol.for(`react.fragment`),y=Symbol.for(`react.strict_mode`),b=Symbol.for(`react.profiler`),x=Symbol.for(`react.consumer`),S=Symbol.for(`react.context`),C=Symbol.for(`react.forward_ref`),w=Symbol.for(`react.suspense`),T=Symbol.for(`react.suspense_list`),E=Symbol.for(`react.memo`),D=Symbol.for(`react.lazy`),O=Symbol.for(`react.activity`),k=Symbol.for(`react.client.reference`),A=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=h.react_stack_bottom_frame.bind(h,o)(),L=N(i(o)),R={};e.Fragment=v,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;return f(e,t,n,!1,r?Error(`react-stack-top-frame`):I,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;return f(e,t,n,!0,r?Error(`react-stack-top-frame`):I,r?N(i(e)):L)}})()})),m=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=f():t.exports=p()})),h=c(d(),1),g=m(),_=h.createContext({bookId:``,slug:``,assetConfig:{type:`static`,staticFolder:``},analytics:void 0}),v=({bookId:e,slug:t,assetConfig:n,analytics:r,children:i})=>(0,g.jsx)(_.Provider,{value:{bookId:e,slug:t,assetConfig:n,analytics:r},children:i}),y=()=>(0,h.useContext)(_),b=(e,t,n)=>{let r=n??e.assetConfig,i=(t?.path??t?.url??``).split(`/`).pop()||t?.filename||t?.name||``;return r.type===`api`?`${r.assetsHost}${t?.path??t?.url??``}`:`/${r.staticFolder}/${encodeURIComponent(e.slug)}/assets/${i}`},x=(e,t)=>{let n=e.assetConfig,r=t?.path??t?.mp3??``,i=r.split(`/`).pop()||t?.filename||t?.name||``;return n.type===`api`?`${n.assetsHost}${r}`:`/${n.staticFolder}/${encodeURIComponent(e.slug)}/audio/${i}`},S=e=>new Promise(t=>{setTimeout(t,e)});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return S}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curiouslearning/gdl-player-core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Package containing the core player components for the GDL interactive books",
   "homepage": "https://github.com/curiouslearning/gdl-player-core#readme",
   "bugs": {
@@ -35,12 +35,17 @@
     "typecheck": "tsc --noEmit",
     "ci:verify": "npm run typecheck && npm run build",
     "prepublishOnly": "npm run build",
-    "test": "npm run typecheck"
+    "test": "npm run typecheck",
+    "dev": "vite --config vite.dev.config.ts"
   },
   "devDependencies": {
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass-embedded": "^1.100.0",
+    "swiper": "^12.0.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.16"
   },