From a200ca21924c4ab39c4c3ab68072e2d51ec15196 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 9 Jun 2026 13:48:40 +0530
Subject: [PATCH 1/4] feat: Studio Client Script for reusable code

---
 frontend/components.d.ts                      |   2 +
 frontend/src/components/Code.vue              |  13 +-
 frontend/src/components/CodePanel.vue         | 174 ++++++++-------
 frontend/src/components/FormInputLabel.vue    |   5 +
 frontend/src/components/ScriptPanel.vue       | 206 ++++++++++++++++++
 frontend/src/data/studioClientScripts.ts      |  18 ++
 frontend/src/pages/AppContainer.vue           |   1 +
 frontend/src/stores/codeStore.ts              |  57 ++++-
 frontend/src/stores/studioStore.ts            |   1 +
 .../src/types/Studio/StudioClientScript.ts    |  11 +
 frontend/src/utils/parseCode.ts               |  20 ++
 frontend/src/utils/useStudioCompletions.ts    |  18 ++
 .../studio_client_script.json                 |  12 +-
 .../studio_client_script.py                   |   7 +-
 14 files changed, 454 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/FormInputLabel.vue
 create mode 100644 frontend/src/components/ScriptPanel.vue
 create mode 100644 frontend/src/data/studioClientScripts.ts
 create mode 100644 frontend/src/types/Studio/StudioClientScript.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 3c360f07..ea3602d9 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -55,6 +55,7 @@ declare module 'vue' {
     FitScreenIcon: typeof import('./src/components/Icons/FitScreenIcon.vue')['default']
     FormDescription: typeof import('./src/components/FormDescription.vue')['default']
     FormDialog: typeof import('./src/components/FormDialog.vue')['default']
+    FormInputLabel: typeof import('./src/components/FormInputLabel.vue')['default']
     GlobeOff: typeof import('./src/components/Icons/GlobeOff.vue')['default']
     Grid: typeof import('./src/components/Grid.vue')['default']
     HTML: typeof import('./src/components/AppLayout/HTML.vue')['default']
@@ -84,6 +85,7 @@ declare module 'vue' {
     ResourceDialog: typeof import('./src/components/ResourceDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScriptPanel: typeof import('./src/components/ScriptPanel.vue')['default']
     ScriptSection: typeof import('./src/components/ScriptSection.vue')['default']
     SearchBlock: typeof import('./src/components/SearchBlock.vue')['default']
     SectionContainer: typeof import('./src/components/SectionContainer.vue')['default']
diff --git a/frontend/src/components/Code.vue b/frontend/src/components/Code.vue
index 4d7eabaf..dc38e27a 100644
--- a/frontend/src/components/Code.vue
+++ b/frontend/src/components/Code.vue
@@ -1,8 +1,11 @@
 <template>
 	<div class="group relative flex h-full w-full flex-col gap-1.5">
-		<InputLabel v-if="label" :class="[required ? `after:text-red-600 after:content-['_*']` : '']">
-			{{ label }}
-		</InputLabel>
+		<template v-if="label">
+			<FormInputLabel v-if="isFormInput">{{ label }}</FormInputLabel>
+			<InputLabel v-else :class="[required ? `after:text-red-600 after:content-['_*']` : '']">
+				{{ label }}
+			</InputLabel>
+		</template>
 		<div v-if="actionButton" class="absolute bottom-[3px] right-[3px] z-10 flex gap-1">
 			<Button
 				@click="actionButton?.handler"
@@ -40,7 +43,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue"
-import { Button } from "frappe-ui"
+import { Button, ErrorMessage } from "frappe-ui"
 import { Codemirror } from "vue-codemirror"
 import {
 	autocompletion,
@@ -60,6 +63,7 @@ import { normalizeCode } from "@/utils/code"
 import { jsonReplacer, parseObjectString } from "@/utils/serializer"
 
 import InputLabel from "@/components/InputLabel.vue"
+import FormInputLabel from "@/components/FormInputLabel.vue"
 
 const props = withDefaults(
 	defineProps<{
@@ -82,6 +86,7 @@ const props = withDefaults(
 			label: string
 			handler: () => void
 		}
+		isFormInput?: boolean
 	}>(),
 	{
 		language: "javascript",
diff --git a/frontend/src/components/CodePanel.vue b/frontend/src/components/CodePanel.vue
index 7b670867..3fa65ae5 100644
--- a/frontend/src/components/CodePanel.vue
+++ b/frontend/src/components/CodePanel.vue
@@ -1,94 +1,103 @@
 <template>
-	<CollapsibleSection sectionName="Watchers">
-		<div class="flex flex-col gap-1">
-			<div
-				v-if="studioPageWatchers.data?.length"
-				v-for="watcher in studioPageWatchers.data"
-				:key="watcher.name"
-				class="group/item flex flex-row items-center justify-between"
-			>
-				<div class="flex flex-row justify-between">
-					<div class="font-mono text-xs font-semibold text-pink-700">{{ watcher.source }}</div>
+	<div class="flex flex-col gap-3">
+		<CollapsibleSection sectionName="Watchers">
+			<div class="flex flex-col gap-1">
+				<div
+					v-if="studioPageWatchers.data?.length"
+					v-for="watcher in studioPageWatchers.data"
+					:key="watcher.name"
+					class="group/item flex flex-row items-center justify-between"
+				>
+					<div class="flex flex-row justify-between">
+						<div class="font-mono text-xs font-semibold text-pink-700">{{ watcher.source }}</div>
+					</div>
+					<ItemActions :menuOptions="getWatcherMenu(watcher)" @edit="openWatcher(watcher)" />
 				</div>
-				<ItemActions :menuOptions="getWatcherMenu(watcher)" @edit="openWatcher(watcher)" />
+				<EmptyState v-else message="No watchers added" />
 			</div>
-			<EmptyState v-else message="No watchers added" />
-		</div>
 
-		<div class="mt-2 flex flex-col">
-			<Button icon-left="plus" @click="showWatcherDialog = true">Add Watcher</Button>
-			<Dialog
-				v-model="showWatcherDialog"
-				:title="pageWatcher.name ? 'Edit Watcher' : 'Add Watcher'"
-				size="3xl"
-				@after-leave="
-					() => {
-						pageWatcher = {
-							source: '',
-							script: '',
-							immediate: false,
-							deep: false,
-							parent: '',
-							name: '',
+			<div class="mt-2 flex flex-col">
+				<Button icon-left="plus" @click="showWatcherDialog = true">Add Watcher</Button>
+				<Dialog
+					v-model="showWatcherDialog"
+					:title="pageWatcher.name ? 'Edit Watcher' : 'Add Watcher'"
+					size="3xl"
+					@after-leave="
+						() => {
+							pageWatcher = {
+								source: '',
+								script: '',
+								immediate: false,
+								deep: false,
+								parent: '',
+								name: '',
+							}
 						}
-					}
-				"
-				:dismissible="false"
-			>
-				<template #default>
-					<div class="flex flex-col space-y-4">
-						<FormControl
-							type="combobox"
-							:options="store.variableOptions"
-							label="Source"
-							placeholder="Select variable"
-							:openOnFocus="true"
-							v-model="pageWatcher.source"
-						/>
-						<Code
-							label="Script"
-							language="javascript"
-							height="400px"
-							maxHeight="400px"
-							v-model="pageWatcher.script"
-							:emitOnChange="true"
-							:completions="getCompletions"
-							@save="editPageWatcher(pageWatcher)"
-						/>
-						<FormControl
-							type="number"
-							label="Debounce (ms)"
-							placeholder="300"
-							v-model="pageWatcher.debounce"
-							description="Delay the execution until the set time has passed since the last change"
-						/>
-						<div class="flex flex-col space-y-1">
+					"
+					:dismissible="false"
+				>
+					<template #default>
+						<div class="flex flex-col space-y-4">
 							<FormControl
-								type="checkbox"
-								label="Immediate: Run on page load"
-								v-model="pageWatcher.immediate"
+								type="combobox"
+								:options="store.variableOptions"
+								label="Source"
+								placeholder="Select variable"
+								:openOnFocus="true"
+								v-model="pageWatcher.source"
 							/>
-							<FormDescription description="Trigger when the page loads, not just when the source changes" />
-						</div>
-						<div class="flex flex-col space-y-1">
-							<FormControl type="checkbox" label="Deep: Watch nested properties" v-model="pageWatcher.deep" />
-							<FormDescription
-								description="Trigger when nested properties within the source change, in addition to the source itself"
+							<Code
+								label="Script"
+								language="javascript"
+								height="400px"
+								maxHeight="400px"
+								v-model="pageWatcher.script"
+								:emitOnChange="true"
+								:completions="getCompletions"
+								@save="editPageWatcher(pageWatcher)"
 							/>
+							<FormControl
+								type="number"
+								label="Debounce (ms)"
+								placeholder="300"
+								v-model="pageWatcher.debounce"
+								description="Delay the execution until the set time has passed since the last change"
+							/>
+							<div class="flex flex-col space-y-1">
+								<FormControl
+									type="checkbox"
+									label="Immediate: Run on page load"
+									v-model="pageWatcher.immediate"
+								/>
+								<FormDescription
+									description="Trigger when the page loads, not just when the source changes"
+								/>
+							</div>
+							<div class="flex flex-col space-y-1">
+								<FormControl
+									type="checkbox"
+									label="Deep: Watch nested properties"
+									v-model="pageWatcher.deep"
+								/>
+								<FormDescription
+									description="Trigger when nested properties within the source change, in addition to the source itself"
+								/>
+							</div>
 						</div>
-					</div>
-				</template>
-				<template #actions>
-					<Button
-						variant="solid"
-						:label="pageWatcher.name ? 'Update' : 'Add'"
-						@click="savePageWatcher(pageWatcher)"
-						class="w-full"
-					/>
-				</template>
-			</Dialog>
-		</div>
-	</CollapsibleSection>
+					</template>
+					<template #actions>
+						<Button
+							variant="solid"
+							:label="pageWatcher.name ? 'Update' : 'Add'"
+							@click="savePageWatcher(pageWatcher)"
+							class="w-full"
+						/>
+					</template>
+				</Dialog>
+			</div>
+		</CollapsibleSection>
+		<ScriptPanel :page="page" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -105,6 +114,7 @@ import { confirm } from "@/utils/helpers"
 import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import ItemActions from "@/components/ItemActions.vue"
 import FormDescription from "@/components/FormDescription.vue"
+import ScriptPanel from "@/components/ScriptPanel.vue"
 
 const props = defineProps<{
 	page: StudioPage
diff --git a/frontend/src/components/FormInputLabel.vue b/frontend/src/components/FormInputLabel.vue
new file mode 100644
index 00000000..d5b06053
--- /dev/null
+++ b/frontend/src/components/FormInputLabel.vue
@@ -0,0 +1,5 @@
+<template>
+	<span class="block text-p-sm font-medium text-ink-gray-7">
+		<slot />
+	</span>
+</template>
diff --git a/frontend/src/components/ScriptPanel.vue b/frontend/src/components/ScriptPanel.vue
new file mode 100644
index 00000000..bfe98621
--- /dev/null
+++ b/frontend/src/components/ScriptPanel.vue
@@ -0,0 +1,206 @@
+<template>
+	<CollapsibleSection sectionName="Client Scripts">
+		<div class="flex flex-col gap-1">
+			<div
+				v-if="scripts.length"
+				v-for="script in scripts"
+				:key="script.name"
+				class="group/item flex flex-row items-center justify-between"
+			>
+				<div class="truncate font-mono text-xs font-semibold text-pink-700">
+					{{ scriptLabel(script) }}
+				</div>
+				<ItemActions :menuOptions="getScriptMenu(script)" @edit="openScript(script)" />
+			</div>
+			<EmptyState v-else message="No client scripts added" />
+		</div>
+
+		<div class="mt-2 flex flex-col">
+			<Button icon-left="plus" @click="openNewScript">Add Client Script</Button>
+			<Dialog
+				v-model="showScriptDialog"
+				:title="currentScript.name ? 'Edit Client Script' : 'Add Client Script'"
+				size="3xl"
+				:dismissible="false"
+			>
+				<template #default>
+					<div class="flex flex-col space-y-3">
+						<FormControl type="text" label="Name" variant="outline" v-model="currentScript.script_name" />
+						<Code
+							label="Script"
+							:isFormInput="true"
+							language="javascript"
+							height="400px"
+							maxHeight="400px"
+							v-model="currentScript.script"
+							:emitOnChange="true"
+							:completions="getCompletions"
+							@save="saveScript"
+						/>
+						<FormDescription
+							description="Declare functions to reuse across this page's events and bindings. They can read the page's variables and resources directly, e.g. function parseRows() { return contacts.data }"
+						/>
+					</div>
+				</template>
+				<template #actions>
+					<Button
+						variant="solid"
+						:label="currentScript.name ? 'Update' : 'Add'"
+						@click="saveScript"
+						class="w-full"
+					/>
+				</template>
+			</Dialog>
+		</div>
+	</CollapsibleSection>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+import { createListResource, Dialog, FormControl, toast } from "frappe-ui"
+import EmptyState from "@/components/EmptyState.vue"
+import CollapsibleSection from "@/components/CollapsibleSection.vue"
+import Code from "@/components/Code.vue"
+import ItemActions from "@/components/ItemActions.vue"
+import FormDescription from "@/components/FormDescription.vue"
+import { confirm } from "@/utils/helpers"
+import { getFunctionDeclarationNames } from "@/utils/parseCode"
+import { useStudioCompletions } from "@/utils/useStudioCompletions"
+import useCodeStore from "@/stores/codeStore"
+import type { StudioPage } from "@/types/Studio/StudioPage"
+import type { StudioClientScript } from "@/types/Studio/StudioClientScript"
+
+const props = defineProps<{
+	page: StudioPage
+}>()
+
+const codeStore = useCodeStore()
+const getCompletions = useStudioCompletions(true)
+
+// Junction rows linking this page to its client scripts
+const pageClientScripts = createListResource({
+	doctype: "Studio Page Client Script",
+	parent: "Studio Page",
+	fields: ["name", "studio_script", "parent"],
+	orderBy: "idx asc",
+	pageLength: 50,
+})
+
+// The reusable client script docs
+const clientScripts = createListResource({
+	doctype: "Studio Client Script",
+	fields: ["name", "script_name", "script"],
+	pageLength: 50,
+})
+
+type PageScript = StudioClientScript & { junction?: string }
+
+const scripts = computed<PageScript[]>(() => {
+	return (pageClientScripts.data || [])
+		.map((row: { name: string; studio_script: string }) => {
+			const doc = (clientScripts.data || []).find((d: StudioClientScript) => d.name === row.studio_script)
+			if (!doc) return null
+			return { name: doc.name, script_name: doc.script_name, script: doc.script, junction: row.name }
+		})
+		.filter(Boolean) as PageScript[]
+})
+
+async function reloadScripts() {
+	pageClientScripts.filters = { parent: props.page.name }
+	await pageClientScripts.reload()
+	const names = pageClientScripts.data
+		.map((row: { studio_script: string }) => row.studio_script)
+		.filter(Boolean)
+	if (names.length) {
+		clientScripts.filters = { name: ["in", names] }
+		await clientScripts.reload()
+	}
+	// keep the runtime in sync with edits
+	await codeStore.setPageClientScripts(props.page)
+}
+
+onMounted(reloadScripts)
+
+const scriptLabel = (script: PageScript) => {
+	if (script.script_name) return script.script_name
+	const fns = getFunctionDeclarationNames(script.script || "")
+	return fns.length ? fns.join(", ") : "Untitled script"
+}
+
+// Default display name when the user leaves it blank: the first declared function.
+const defaultScriptName = (script: string) => {
+	return getFunctionDeclarationNames(script)[0] || "Untitled Script"
+}
+
+const showScriptDialog = ref(false)
+const currentScript = ref<PageScript>({ name: "", script_name: "", script: "" })
+
+const openNewScript = () => {
+	currentScript.value = { name: "", script_name: "", script: "function handleEvent() {\n\t\n}" }
+	showScriptDialog.value = true
+}
+
+const openScript = (script: PageScript) => {
+	currentScript.value = { ...script }
+	showScriptDialog.value = true
+}
+
+const getScriptMenu = (script: PageScript) => {
+	return [
+		{
+			label: "Delete",
+			icon: "lucide-trash",
+			theme: "red",
+			onClick: () => deleteScript(script),
+		},
+	]
+}
+
+const saveScript = async () => {
+	if (!currentScript.value.script?.trim()) {
+		toast.error("Script cannot be empty")
+		return
+	}
+	try {
+		const scriptName =
+			currentScript.value.script_name?.trim() || defaultScriptName(currentScript.value.script)
+		if (currentScript.value.name) {
+			await clientScripts.setValue.submit({
+				name: currentScript.value.name,
+				script_name: scriptName,
+				script: currentScript.value.script,
+			})
+		} else {
+			const doc = await clientScripts.insert.submit({
+				script_name: scriptName,
+				script: currentScript.value.script,
+			})
+			await pageClientScripts.insert.submit({
+				parent: props.page.name,
+				parenttype: "Studio Page",
+				parentfield: "client_scripts",
+				studio_script: doc.name,
+			})
+		}
+		await reloadScripts()
+		showScriptDialog.value = false
+	} catch (error: any) {
+		toast.error("Failed to save the client script", {
+			description: error?.messages?.join(", "),
+		})
+	}
+}
+
+const deleteScript = async (script: PageScript) => {
+	const confirmed = await confirm(`Are you sure you want to delete this client script?`)
+	if (!confirmed) return
+	try {
+		if (script.junction) await pageClientScripts.delete.submit(script.junction)
+		if (script.name) await clientScripts.delete.submit(script.name)
+		await reloadScripts()
+		toast.success("Client script deleted successfully")
+	} catch {
+		toast.error("Failed to delete the client script")
+	}
+}
+</script>
diff --git a/frontend/src/data/studioClientScripts.ts b/frontend/src/data/studioClientScripts.ts
new file mode 100644
index 00000000..1146d339
--- /dev/null
+++ b/frontend/src/data/studioClientScripts.ts
@@ -0,0 +1,18 @@
+import { createListResource } from "frappe-ui"
+
+// Junction rows linking a Studio Page to its Studio Client Scripts
+export const studioPageClientScripts = createListResource({
+	doctype: "Studio Page Client Script",
+	parent: "Studio Page",
+	fields: ["name", "studio_script", "parent"],
+	orderBy: "idx asc",
+	pageLength: 50,
+})
+
+// The reusable client script docs themselves
+export const studioClientScripts = createListResource({
+	doctype: "Studio Client Script",
+	fields: ["name", "script_name", "script"],
+	orderBy: "modified desc",
+	pageLength: 50,
+})
diff --git a/frontend/src/pages/AppContainer.vue b/frontend/src/pages/AppContainer.vue
index ab0d5af7..ecacdd6f 100644
--- a/frontend/src/pages/AppContainer.vue
+++ b/frontend/src/pages/AppContainer.vue
@@ -42,6 +42,7 @@ watch(
 			if (!page.value) return
 			await codeStore.cleanupWatchers()
 			await store.setPageData(page.value)
+			await codeStore.setPageClientScripts(page.value)
 			await codeStore.setPageWatchers(page.value)
 
 			const blocks = window.is_preview
diff --git a/frontend/src/stores/codeStore.ts b/frontend/src/stores/codeStore.ts
index 7c4b3e60..80481911 100644
--- a/frontend/src/stores/codeStore.ts
+++ b/frontend/src/stores/codeStore.ts
@@ -5,10 +5,11 @@ import { createDocumentResource, createListResource, createResource, call } from
 import { studioPageResources } from "@/data/studioResources"
 import { studioVariables } from "@/data/studioVariables"
 import { studioWatchers } from "@/data/studioWatchers"
+import { studioPageClientScripts, studioClientScripts } from "@/data/studioClientScripts"
 import * as globalUtils from "@/utils/globalUtils"
 import { getInitialVariableValue, getValueFromObject, setValueInObject } from "@/utils/helpers"
 import { isDynamicValue, normalizeDynamicValue } from "@/utils/code"
-import { isFunctionExpression, toOptionalChaining } from "@/utils/parseCode"
+import { isFunctionExpression, toOptionalChaining, getFunctionDeclarationNames } from "@/utils/parseCode"
 import type { Filters, Resource, DocumentResource, DataResult } from "@/types/Studio/StudioResource"
 import type { StudioPage } from "@/types/Studio/StudioPage"
 import type { Variable } from "@/types/Studio/StudioPageVariable"
@@ -20,6 +21,10 @@ const useCodeStore = defineStore("codeStore", () => {
 	const resources = ref<Record<string, Resource>>({})
 	const variables = ref<Record<string, any>>({})
 	const activeWatchers = ref<Record<string, WatchStopHandle>>({})
+	// Functions declared in the page's client scripts, callable from expressions/scripts
+	const clientScriptFunctions = ref<Record<string, Function>>({})
+	// Names of those functions, surfaced to the completion provider
+	const clientScriptFunctionNames = ref<string[]>([])
 	const routeObject = ref<ComputedRef>()
 	const routerObject = ref<Router | Readonly<Router>>()
 
@@ -122,10 +127,56 @@ const useCodeStore = defineStore("codeStore", () => {
 		activeWatchers.value = {}
 	}
 
+	async function setPageClientScripts(page: StudioPage) {
+		clientScriptFunctions.value = {}
+		clientScriptFunctionNames.value = []
+
+		studioPageClientScripts.filters = { parent: page.name }
+		await studioPageClientScripts.reload()
+		const scriptNames = studioPageClientScripts.data
+			.map((row: { studio_script: string }) => row.studio_script)
+			.filter(Boolean)
+		if (!scriptNames.length) return
+
+		studioClientScripts.filters = { name: ["in", scriptNames] }
+		await studioClientScripts.reload()
+		const source = studioClientScripts.data
+			.map((doc: { script: string }) => doc.script)
+			.filter(Boolean)
+			.join("\n\n")
+		if (!source.trim()) return
+
+		const functionNames = getFunctionDeclarationNames(source)
+		clientScriptFunctionNames.value = functionNames
+		clientScriptFunctions.value = compileClientScripts(source, functionNames)
+	}
+
+	function compileClientScripts(source: string, functionNames: string[]) {
+		// Evaluate the combined client script source once and return its declared
+		// functions. They close over the execution context (variables as refs,
+		// resources, route/router), so they get ambient access like any other script.
+		if (!functionNames.length) return {}
+		try {
+			const context = globalExecutionContext.value
+			const factory = new Function(
+				"context",
+				`with (context) {
+					${source}
+					return { ${functionNames.join(", ")} };
+				}`,
+			)
+			return factory(context) || {}
+		} catch (error) {
+			console.error("Error compiling client scripts", error)
+			return {}
+		}
+	}
+
 	const globalContext = computed(() => {
 		return {
 			...variables.value,
 			...resources.value,
+			...clientScriptFunctions.value,
 			...globalUtils,
 			route: unref(routeObject.value),
 			router: routerObject.value,
@@ -139,6 +190,7 @@ const useCodeStore = defineStore("codeStore", () => {
 		return {
 			...variablesRefs,
 			...resources.value,
+			...clientScriptFunctions.value,
 			...globalUtils,
 			route: unref(routeObject.value),
 			router: routerObject.value,
@@ -505,6 +557,9 @@ const useCodeStore = defineStore("codeStore", () => {
 		// watchers
 		setPageWatchers,
 		cleanupWatchers,
+		// client scripts
+		clientScriptFunctionNames,
+		setPageClientScripts,
 		// code execution
 		globalContext,
 		globalExecutionContext,
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index cfd935e7..9c3d8d17 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -159,6 +159,7 @@ const useStudioStore = defineStore("store", () => {
 		const page = await fetchPage(pageName)
 		activePage.value = page
 		await setPageData(page)
+		await codeStore.setPageClientScripts(page)
 		await codeStore.setPageWatchers(page)
 
 		const blocks = JSON.parse(page.draft_blocks || page.blocks || "[]")
diff --git a/frontend/src/types/Studio/StudioClientScript.ts b/frontend/src/types/Studio/StudioClientScript.ts
new file mode 100644
index 00000000..d2b67c89
--- /dev/null
+++ b/frontend/src/types/Studio/StudioClientScript.ts
@@ -0,0 +1,11 @@
+export type StudioClientScript = {
+	name?: string
+	script_name?: string
+	script: string
+}
+
+export type StudioPageClientScript = {
+	name?: string
+	studio_script: string
+	parent?: string
+}
diff --git a/frontend/src/utils/parseCode.ts b/frontend/src/utils/parseCode.ts
index 4f2e1717..415b0768 100644
--- a/frontend/src/utils/parseCode.ts
+++ b/frontend/src/utils/parseCode.ts
@@ -96,6 +96,26 @@ export function toOptionalChaining(expression: string): string {
 	}
 }
 
+const fnNamesCache = new LRUCache<string[]>(20)
+export function getFunctionDeclarationNames(code: string): string[] {
+	if (!code?.trim()) return []
+
+	const cached = fnNamesCache.get(code)
+	if (cached !== undefined) return cached
+
+	try {
+		const ast = parse(code, { ecmaVersion: "latest", sourceType: "module" })
+		const names = ast.body
+			.filter((node) => node.type === "FunctionDeclaration" && (node as any).id)
+			.map((node) => (node as any).id.name as string)
+		fnNamesCache.set(code, names)
+		return names
+	} catch {
+		fnNamesCache.set(code, [])
+		return []
+	}
+}
+
 function walkAST(node: any, callback: (node: Node) => void) {
 	if (!node || typeof node !== "object") return
 
diff --git a/frontend/src/utils/useStudioCompletions.ts b/frontend/src/utils/useStudioCompletions.ts
index 25498885..60031ba9 100644
--- a/frontend/src/utils/useStudioCompletions.ts
+++ b/frontend/src/utils/useStudioCompletions.ts
@@ -83,6 +83,24 @@ export const useStudioCompletions = (canEditValues: boolean = false) => {
 			})
 		}
 
+		(codeStore.clientScriptFunctionNames || []).forEach((funcName: string) => {
+			sources.push({
+				item: null,
+				completion: {
+					label: funcName,
+					type: "function",
+					detail: "Client Script",
+					apply(view, completion, from, to) {
+						const insertText = `${completion.label}()`
+						view.dispatch({
+							changes: { from, to, insert: insertText },
+							selection: { anchor: from + insertText.length - 1 },
+						})
+					},
+				},
+			})
+		})
+
 		Object.entries(globalUtils).forEach(([funcName, func]) => {
 			if (isPrivateKey(funcName)) {
 				return
diff --git a/studio/studio/doctype/studio_client_script/studio_client_script.json b/studio/studio/doctype/studio_client_script/studio_client_script.json
index c3f1dca0..be1941b6 100644
--- a/studio/studio/doctype/studio_client_script/studio_client_script.json
+++ b/studio/studio/doctype/studio_client_script/studio_client_script.json
@@ -1,14 +1,21 @@
 {
  "actions": [],
  "allow_rename": 1,
- "autoname": "prompt",
+ "autoname": "hash",
  "creation": "2025-03-31 13:56:13.627801",
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
+  "script_name",
   "script"
  ],
  "fields": [
+  {
+   "fieldname": "script_name",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Script Name"
+  },
   {
    "fieldname": "script",
    "fieldtype": "Code",
@@ -24,7 +31,8 @@
  "modified_by": "Administrator",
  "module": "Studio",
  "name": "Studio Client Script",
- "naming_rule": "Set by user",
+ "naming_rule": "Random",
+ "title_field": "script_name",
  "owner": "Administrator",
  "permissions": [
   {
diff --git a/studio/studio/doctype/studio_client_script/studio_client_script.py b/studio/studio/doctype/studio_client_script/studio_client_script.py
index ad20c475..88754aa2 100644
--- a/studio/studio/doctype/studio_client_script/studio_client_script.py
+++ b/studio/studio/doctype/studio_client_script/studio_client_script.py
@@ -1,7 +1,7 @@
 # Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
 
 
@@ -15,6 +15,9 @@ class StudioClientScript(Document):
 		from frappe.types import DF
 
 		script: DF.Code
+		script_name: DF.Data | None
 	# end: auto-generated types
 
-	pass
+	def autoname(self):
+		if not self.name:
+			self.name = f"client-script-{frappe.generate_hash(length=8)}"

From 928524caf812f4770cbb217517761bc8206fb747 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 10 Jun 2026 09:47:45 +0530
Subject: [PATCH 2/4] feat: Studio Module for composables and stores from app

---
 frontend/src/data/studioModules.ts         | 53 ++++++++++++++++++++++
 frontend/src/renderer.ts                   |  3 +-
 frontend/src/stores/codeStore.ts           | 35 ++++++++++++--
 frontend/src/stores/studioStore.ts         | 17 +++++++
 frontend/src/types/StudioModule.ts         |  6 +++
 frontend/src/utils/useStudioCompletions.ts | 20 ++++++++
 studio/api.py                              | 45 ++++++++++++++++++
 7 files changed, 174 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/data/studioModules.ts
 create mode 100644 frontend/src/types/StudioModule.ts

diff --git a/frontend/src/data/studioModules.ts b/frontend/src/data/studioModules.ts
new file mode 100644
index 00000000..3e7f63dd
--- /dev/null
+++ b/frontend/src/data/studioModules.ts
@@ -0,0 +1,53 @@
+import { shallowRef } from "vue"
+import { createResource } from "frappe-ui"
+import type { StudioModuleMeta } from "@/types/StudioModule"
+
+export const studioModulesResource = createResource({
+	url: "studio.api.get_studio_modules",
+	makeParams: ({ frappe_app }: { frappe_app: string }) => {
+		return {
+			frappe_app: frappe_app,
+		}
+	},
+})
+
+// module_name -> the module's binding: its `default` export if present, else the
+// namespace of named exports. Composables/stores/utilities all flow through here.
+export const studioModulesRegistry = shallowRef<Record<string, any>>({})
+
+/**
+ * Dynamically import custom JS/TS modules from a Frappe app and register them.
+ * Dev/editor path: modules are imported live via the Vite dev server. In production
+ * the per-app build provides them on window.__APP_MODULES__ instead.
+ */
+export async function registerStudioModules(frappeApp: string): Promise<StudioModuleMeta[]> {
+	if (!frappeApp) return []
+	try {
+		const modules: StudioModuleMeta[] = await studioModulesResource.reload({ frappe_app: frappeApp })
+
+		const registry = { ...studioModulesRegistry.value }
+		await Promise.all(
+			modules.map(async (mod) => {
+				try {
+					const imported = await import(/* @vite-ignore */ mod.file_path)
+					registry[mod.module_name] = imported.default ?? imported
+				} catch (err) {
+					console.error(`Failed to load studio module ${mod.module_name}:`, err)
+				}
+			}),
+		)
+		studioModulesRegistry.value = registry
+		return modules
+	} catch (err) {
+		console.error("Failed to fetch studio modules:", err)
+		return []
+	}
+}
+
+export function unregisterStudioModules(modules: StudioModuleMeta[]) {
+	const registry = { ...studioModulesRegistry.value }
+	for (const mod of modules) {
+		delete registry[mod.module_name]
+	}
+	studioModulesRegistry.value = registry
+}
diff --git a/frontend/src/renderer.ts b/frontend/src/renderer.ts
index 65f96a8b..c3b40d6e 100644
--- a/frontend/src/renderer.ts
+++ b/frontend/src/renderer.ts
@@ -8,6 +8,7 @@ import AppRenderer from "@/AppRenderer.vue"
 import { resourcesPlugin } from "frappe-ui"
 import { spritePlugin } from "frappe-ui/icons"
 import { registerGlobalComponents, registerCustomVueComponents } from "@/globals"
+import { registerStudioModules } from "@/data/studioModules"
 
 // For rendering apps built by studio
 const app = createApp(AppRenderer)
@@ -35,7 +36,7 @@ if (window.is_preview && typeof window.is_preview === "string") {
 
 const frappeApp = (window as any).frappe_app
 if (frappeApp) {
-	registerCustomVueComponents(frappeApp).then(() => {
+	Promise.all([registerCustomVueComponents(frappeApp), registerStudioModules(frappeApp)]).then(() => {
 		app.mount("#app")
 	})
 } else {
diff --git a/frontend/src/stores/codeStore.ts b/frontend/src/stores/codeStore.ts
index 80481911..f882975d 100644
--- a/frontend/src/stores/codeStore.ts
+++ b/frontend/src/stores/codeStore.ts
@@ -6,6 +6,7 @@ import { studioPageResources } from "@/data/studioResources"
 import { studioVariables } from "@/data/studioVariables"
 import { studioWatchers } from "@/data/studioWatchers"
 import { studioPageClientScripts, studioClientScripts } from "@/data/studioClientScripts"
+import { studioModulesRegistry } from "@/data/studioModules"
 import * as globalUtils from "@/utils/globalUtils"
 import { getInitialVariableValue, getValueFromObject, setValueInObject } from "@/utils/helpers"
 import { isDynamicValue, normalizeDynamicValue } from "@/utils/code"
@@ -153,11 +154,24 @@ const useCodeStore = defineStore("codeStore", () => {
 
 	function compileClientScripts(source: string, functionNames: string[]) {
 		// Evaluate the combined client script source once and return its declared
-		// functions. They close over the execution context (variables as refs,
-		// resources, route/router), so they get ambient access like any other script.
+		// functions. They resolve identifiers through a proxy over the LIVE execution
+		// context, so they see variables/resources/modules registered after compilation
+		// (e.g. modules that finish importing a tick later) and stay current as state changes.
 		if (!functionNames.length) return {}
+		const liveContext = new Proxy(
+			{},
+			{
+				has(_target, key) {
+					// let globals (console, Function, …) fall through to the outer scope
+					if (key === Symbol.unscopables) return false
+					return key in globalExecutionContext.value
+				},
+				get(_target, key) {
+					return (globalExecutionContext.value as Record<string | symbol, any>)[key]
+				},
+			},
+		)
 		try {
-			const context = globalExecutionContext.value
 			const factory = new Function(
 				"context",
 				`with (context) {
@@ -165,17 +179,27 @@ const useCodeStore = defineStore("codeStore", () => {
 					return { ${functionNames.join(", ")} };
 				}`,
 			)
-			return factory(context) || {}
+			return factory(liveContext) || {}
 		} catch (error) {
 			console.error("Error compiling client scripts", error)
 			return {}
 		}
 	}
 
+	// Studio modules (composables/stores/utilities) exposed by name. Dev/editor uses the
+	// reactive registry; production reads the per-app build's window.__APP_MODULES__.
+	const studioModules = computed(() => {
+		return {
+			...((window as any).__APP_MODULES__ || {}),
+			...studioModulesRegistry.value,
+		}
+	})
+
 	const globalContext = computed(() => {
 		return {
 			...variables.value,
 			...resources.value,
+			...studioModules.value,
 			...clientScriptFunctions.value,
 			...globalUtils,
 			route: unref(routeObject.value),
@@ -190,6 +214,7 @@ const useCodeStore = defineStore("codeStore", () => {
 		return {
 			...variablesRefs,
 			...resources.value,
+			...studioModules.value,
 			...clientScriptFunctions.value,
 			...globalUtils,
 			route: unref(routeObject.value),
@@ -560,6 +585,8 @@ const useCodeStore = defineStore("codeStore", () => {
 		// client scripts
 		clientScriptFunctionNames,
 		setPageClientScripts,
+		// modules
+		studioModules,
 		// code execution
 		globalContext,
 		globalExecutionContext,
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index 9c3d8d17..0a8b5439 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -17,6 +17,8 @@ import Block from "@/utils/block"
 import useCanvasStore from "@/stores/canvasStore"
 import useCodeStore from "@/stores/codeStore"
 import { registerCustomVueComponents, unregisterCustomVueComponents } from "@/globals"
+import { registerStudioModules, unregisterStudioModules } from "@/data/studioModules"
+import type { StudioModuleMeta } from "@/types/StudioModule"
 import { setCustomComponentFilePaths } from "@/utils/components"
 import type { CustomVueComponentMeta } from "@/types/vue"
 
@@ -50,12 +52,14 @@ const useStudioStore = defineStore("store", () => {
 	const activeApp = ref<StudioApp | null>(null)
 	const appPages = ref<Record<string, StudioPage>>({})
 	const customVueComponents = ref<CustomVueComponentMeta[]>([])
+	const studioModules = ref<StudioModuleMeta[]>([])
 
 	async function setApp(appName: string) {
 		const appDoc = await fetchApp(appName)
 		activeApp.value = appDoc
 		await setAppPages(appName)
 		await setCustomComponents()
+		await setStudioModules()
 	}
 
 	async function deleteApp(appName: string, appTitle: string) {
@@ -364,6 +368,17 @@ const useStudioStore = defineStore("store", () => {
 		}
 	}
 
+	// studio modules (composables/stores/utilities)
+	async function setStudioModules() {
+		if (studioModules.value.length) {
+			unregisterStudioModules(studioModules.value)
+			studioModules.value = []
+		}
+		if (activeApp.value?.is_standard) {
+			studioModules.value = await registerStudioModules(activeApp.value.frappe_app!)
+		}
+	}
+
 	function setCustomComponentListener() {
 		if (activeApp.value?.is_standard && import.meta.hot) {
 			// Auto-refresh custom components when .vue files are added/removed/renamed in studio folders
@@ -476,6 +491,8 @@ const useStudioStore = defineStore("store", () => {
 		// custom components
 		setCustomComponents,
 		customVueComponents,
+		setStudioModules,
+		studioModules,
 		// studio pages
 		pageBlocks,
 		selectedPage,
diff --git a/frontend/src/types/StudioModule.ts b/frontend/src/types/StudioModule.ts
new file mode 100644
index 00000000..053dc0a4
--- /dev/null
+++ b/frontend/src/types/StudioModule.ts
@@ -0,0 +1,6 @@
+export interface StudioModuleMeta {
+	module_name: string
+	frappe_app: string
+	studio_app: string
+	file_path: string
+}
diff --git a/frontend/src/utils/useStudioCompletions.ts b/frontend/src/utils/useStudioCompletions.ts
index 60031ba9..e8d6e6db 100644
--- a/frontend/src/utils/useStudioCompletions.ts
+++ b/frontend/src/utils/useStudioCompletions.ts
@@ -101,6 +101,26 @@ export const useStudioCompletions = (canEditValues: boolean = false) => {
 			})
 		})
 
+		Object.entries(codeStore.studioModules || {}).forEach(([moduleName, binding]) => {
+			const isFunction = typeof binding === "function"
+			sources.push({
+				item: binding,
+				completion: {
+					label: moduleName,
+					type: isFunction ? "function" : "namespace",
+					detail: "Studio Module",
+					apply(view, completion, from, to) {
+						const insertText = isFunction ? `${completion.label}()` : `${completion.label}`
+						const cursorPos = isFunction ? from + insertText.length - 1 : from + insertText.length
+						view.dispatch({
+							changes: { from, to, insert: insertText },
+							selection: { anchor: cursorPos },
+						})
+					},
+				},
+			})
+		})
+
 		Object.entries(globalUtils).forEach(([funcName, func]) => {
 			if (isPrivateKey(funcName)) {
 				return
diff --git a/studio/api.py b/studio/api.py
index 6fed1c53..c4e4cbba 100644
--- a/studio/api.py
+++ b/studio/api.py
@@ -162,3 +162,48 @@ def has_conflicting_name(name: str) -> bool:
 				)
 
 	return components
+
+
+@frappe.whitelist()
+def get_studio_modules(frappe_app: str) -> list[dict]:
+	"""Discover custom JS/TS modules (composables, stores, utilities) under <app>/studio/"""
+	modules = []
+	seen_names = set()
+
+	studio_folder = frappe.get_app_source_path(frappe_app, "studio")
+	if not os.path.exists(studio_folder):
+		return []
+
+	module_extensions = (".js", ".ts")
+	skip_extensions = (".d.ts", ".test.js", ".test.ts", ".spec.js", ".spec.ts")
+
+	for studio_app in os.listdir(studio_folder):
+		studio_app_dir = os.path.join(studio_folder, studio_app)
+		if not os.path.isdir(studio_app_dir):
+			continue
+
+		for dirpath, _dirnames, filenames in os.walk(studio_app_dir):
+			for filename in sorted(filenames):
+				if not filename.endswith(module_extensions) or filename.endswith(skip_extensions):
+					continue
+
+				module_name = os.path.splitext(filename)[0]
+				if module_name in seen_names:
+					frappe.log_error(
+						title="Studio: Duplicate module",
+						message=f"Module '{module_name}' in {frappe_app}/{studio_app} "
+						f"conflicts with another module. Skipping.",
+					)
+					continue
+
+				seen_names.add(module_name)
+				modules.append(
+					{
+						"module_name": module_name,
+						"frappe_app": frappe_app,
+						"studio_app": studio_app,
+						"file_path": os.path.join(dirpath, filename),
+					}
+				)
+
+	return modules

From ceec7be0d4e3bfc5748d3319dbde09e3863789b6 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 10 Jun 2026 10:39:50 +0530
Subject: [PATCH 3/4] fix: module registry

---
 frontend/src/data/studioModules.ts | 16 +++++++---------
 frontend/src/stores/studioStore.ts |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/data/studioModules.ts b/frontend/src/data/studioModules.ts
index 3e7f63dd..5701224e 100644
--- a/frontend/src/data/studioModules.ts
+++ b/frontend/src/data/studioModules.ts
@@ -24,13 +24,15 @@ export async function registerStudioModules(frappeApp: string): Promise<StudioMo
 	if (!frappeApp) return []
 	try {
 		const modules: StudioModuleMeta[] = await studioModulesResource.reload({ frappe_app: frappeApp })
-
-		const registry = { ...studioModulesRegistry.value }
+		const registry: Record<string, any> = {}
 		await Promise.all(
 			modules.map(async (mod) => {
 				try {
 					const imported = await import(/* @vite-ignore */ mod.file_path)
-					registry[mod.module_name] = imported.default ?? imported
+					for (const [exportName, value] of Object.entries(imported)) {
+						const bindingName = exportName === "default" ? mod.module_name : exportName
+						registry[bindingName] = value
+					}
 				} catch (err) {
 					console.error(`Failed to load studio module ${mod.module_name}:`, err)
 				}
@@ -44,10 +46,6 @@ export async function registerStudioModules(frappeApp: string): Promise<StudioMo
 	}
 }
 
-export function unregisterStudioModules(modules: StudioModuleMeta[]) {
-	const registry = { ...studioModulesRegistry.value }
-	for (const mod of modules) {
-		delete registry[mod.module_name]
-	}
-	studioModulesRegistry.value = registry
+export function unregisterStudioModules() {
+	studioModulesRegistry.value = {}
 }
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index 0a8b5439..bdca0a25 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -371,7 +371,7 @@ const useStudioStore = defineStore("store", () => {
 	// studio modules (composables/stores/utilities)
 	async function setStudioModules() {
 		if (studioModules.value.length) {
-			unregisterStudioModules(studioModules.value)
+			unregisterStudioModules()
 			studioModules.value = []
 		}
 		if (activeApp.value?.is_standard) {

From c93eeb585ba3c28da9192e2a53bd323b61336cc7 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 10 Jun 2026 15:36:20 +0530
Subject: [PATCH 4/4] feat: include custom modules in app builds

---
 frontend/src/scripts/build.js | 53 +++++++++++++++++++++++++++++++----
 studio/build.py               | 31 ++++++++++++++++++++
 2 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/frontend/src/scripts/build.js b/frontend/src/scripts/build.js
index bdf3f0eb..13f309b7 100644
--- a/frontend/src/scripts/build.js
+++ b/frontend/src/scripts/build.js
@@ -24,6 +24,7 @@ const { values: argv } = parseArgs({
 		"out-dir": { type: "string" },
 		base: { type: "string" },
 		"custom-components": { type: "string" },
+		"studio-modules": { type: "string" },
 	},
 	strict: false,
 })
@@ -33,15 +34,30 @@ if (!argv.app) {
 	process.exit(1)
 }
 
-await generateAppBuild(argv.app, argv.components, argv["out-dir"], argv.base, argv["custom-components"])
-
-export async function generateAppBuild(appName, components, outDir, base, customComponentsJson) {
+await generateAppBuild(
+	argv.app,
+	argv.components,
+	argv["out-dir"],
+	argv.base,
+	argv["custom-components"],
+	argv["studio-modules"],
+)
+
+export async function generateAppBuild(
+	appName,
+	components,
+	outDir,
+	base,
+	customComponentsJson,
+	studioModulesJson,
+) {
 	if (!appName) return
 
 	const componentList = components ? components.split(",") : []
 	const customComponents = customComponentsJson ? JSON.parse(customComponentsJson) : {}
+	const studioModules = studioModulesJson ? JSON.parse(studioModulesJson) : {}
 	const componentSources = findComponentSources(componentList, customComponents)
-	const rendererContent = getRendererContent(componentSources)
+	const rendererContent = getRendererContent(componentSources, studioModules)
 	const tempRendererPath = writeRendererFile(appName, rendererContent)
 	await buildWithVite(appName, tempRendererPath, outDir, base)
 	deleteRendererFile(tempRendererPath)
@@ -69,7 +85,7 @@ function findComponentSources(appComponents, customComponents = {}) {
 	}
 }
 
-function getRendererContent(componentSources) {
+function getRendererContent(componentSources, studioModules = {}) {
 	const { frappeUIComponents, frappeComponents, studioComponents, customComponents } = componentSources
 	const frappeUIImports =
 		frappeUIComponents.length > 0 ? `import { ${frappeUIComponents.join(",\n ")} } from "frappe-ui";` : ""
@@ -90,6 +106,28 @@ function getRendererContent(componentSources) {
 		...customComponentNames.map((comp) => `app.component("${comp}", ${comp})`),
 	].join("\n")
 
+	// Modules are dynamically imported (after pinia is installed) so stores can
+	// instantiate at module load, then flattened into window.__APP_MODULES__ with the
+	// same rule as the dev registry: named exports by name, default export by file name.
+	const moduleNames = Object.keys(studioModules)
+	const moduleSetup = moduleNames.length
+		? `window.__APP_MODULES__ = {}
+function __registerStudioModule(moduleName, ns) {
+	Object.keys(ns).forEach((key) => {
+		window.__APP_MODULES__[key === "default" ? moduleName : key] = ns[key]
+	})
+}
+
+Promise.all([
+${moduleNames
+	.map(
+		(name) =>
+			`	import(${JSON.stringify(studioModules[name])}).then((ns) => __registerStudioModule(${JSON.stringify(name)}, ns)),`,
+	)
+	.join("\n")}
+]).then(() => app.mount("#app"))`
+		: `app.mount("#app")`
+
 	const rendererContent = `import "@/index.css"
 import { createApp } from "vue"
 import { createPinia } from "pinia"
@@ -115,7 +153,7 @@ app.use(spritePlugin)
 ${componentRegistrations}
 window.__APP_COMPONENTS__ = app._context.components
 
-app.mount("#app")`
+${moduleSetup}`
 	return rendererContent
 }
 
@@ -149,6 +187,9 @@ async function buildWithVite(appName, entryFilePath, outDir, basePath) {
 			alias: {
 				"@": path.resolve(__dirname, "../"),
 			},
+			// keep vue/pinia/etc as single instances so studio modules (composables/stores)
+			// share the app's runtime — Pinia breaks with duplicate copies
+			dedupe: ["vue", "vue-router", "pinia", "frappe-ui"],
 		},
 		build: {
 			manifest: true,
diff --git a/studio/build.py b/studio/build.py
index 7b2c8858..1678e3cb 100644
--- a/studio/build.py
+++ b/studio/build.py
@@ -21,6 +21,7 @@ def __init__(self, studio_app: str, is_standard: bool, frappe_app: str | None =
 		self.components = set(DEFAULT_COMPONENTS)
 		self.studio_component_blocks = {}
 		self.custom_vue_components: dict[str, str] = {}  # {ComponentName: absolute_path}
+		self.studio_modules: dict[str, str] = {}  # {module_name: absolute_path}
 
 		if self.is_standard:
 			"""Build a standard (exported) studio app.
@@ -42,8 +43,34 @@ def build(self):
 			self.get_app_components_from_files()
 		else:
 			self.get_app_components()
+		self.get_studio_modules_from_files()
 		self._run_vite_build()
 
+	def get_studio_modules_from_files(self):
+		"""Discover custom JS/TS modules (composables/stores/utilities) to bundle into the build."""
+		if not self.frappe_app:
+			return
+
+		studio_folder = get_studio_folder(self.frappe_app)
+		if not studio_folder or not os.path.exists(studio_folder):
+			return
+
+		module_extensions = (".js", ".ts")
+		skip_extensions = (".d.ts", ".test.js", ".test.ts", ".spec.js", ".spec.ts")
+		for studio_app in os.listdir(studio_folder):
+			app_dir = os.path.join(studio_folder, studio_app)
+			if not os.path.isdir(app_dir):
+				continue
+
+			for dirpath, _dirnames, filenames in os.walk(app_dir):
+				for filename in sorted(filenames):
+					if not filename.endswith(module_extensions) or filename.endswith(skip_extensions):
+						continue
+					module_name = os.path.splitext(filename)[0]
+					if module_name in self.studio_modules:
+						continue
+					self.studio_modules[module_name] = os.path.join(dirpath, filename)
+
 	def _run_vite_build(self) -> None:
 		"""Execute the yarn build-studio-app command with the given parameters."""
 		if not self.components:
@@ -65,6 +92,10 @@ def _run_vite_build(self) -> None:
 			custom_json = json.dumps(self.custom_vue_components)
 			command += f" --custom-components '{custom_json}'"
 
+		if self.studio_modules:
+			modules_json = json.dumps(self.studio_modules)
+			command += f" --studio-modules '{modules_json}'"
+
 		studio_app_path = frappe.get_app_source_path("studio")
 		popen(command, cwd=studio_app_path, env=get_node_env(), raise_err=True)