From e45172b5546244d78d9e1f00e853a3c8c001fd38 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 21 Jul 2026 19:22:54 +0530
Subject: [PATCH 01/11] feat: provide access to slot props

---
 frontend/components.d.ts                      |  2 +-
 frontend/src/components/AppComponent.vue      | 26 +++++-----
 .../src/components/AppLayout/Repeater.vue     |  6 +--
 .../AppLayout/RepeaterContextProvider.vue     | 21 --------
 .../src/components/DynamicValueSelector.vue   | 29 +++++++----
 frontend/src/components/SlotScopeProvider.vue | 19 +++++++
 frontend/src/components/StudioComponent.vue   | 32 ++++++------
 frontend/src/stores/codeStore.ts              | 12 ++---
 frontend/src/types/index.ts                   |  8 +--
 frontend/src/utils/block.ts                   | 50 ++++++++-----------
 frontend/src/utils/serializer.ts              |  2 +-
 11 files changed, 102 insertions(+), 105 deletions(-)
 delete mode 100644 frontend/src/components/AppLayout/RepeaterContextProvider.vue
 create mode 100644 frontend/src/components/SlotScopeProvider.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index f6d3c2b80..36cdb7d61 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -92,7 +92,6 @@ declare module 'vue' {
     ProxyDialog: typeof import('./src/components/ProxyComponents/ProxyDialog.vue')['default']
     PublishButton: typeof import('./src/components/PublishButton.vue')['default']
     Repeater: typeof import('./src/components/AppLayout/Repeater.vue')['default']
-    RepeaterContextProvider: typeof import('./src/components/AppLayout/RepeaterContextProvider.vue')['default']
     ResourceDialog: typeof import('./src/components/ResourceDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -101,6 +100,7 @@ declare module 'vue' {
     SectionContainer: typeof import('./src/components/SectionContainer.vue')['default']
     SettingItem: typeof import('./src/components/SettingItem.vue')['default']
     SlotIcon: typeof import('./src/components/Icons/SlotIcon.vue')['default']
+    SlotScopeProvider: typeof import('./src/components/SlotScopeProvider.vue')['default']
     SplitView: typeof import('./src/components/AppLayout/SplitView.vue')['default']
     StudioCanvas: typeof import('./src/components/StudioCanvas.vue')['default']
     StudioComponent: typeof import('./src/components/StudioComponent.vue')['default']
diff --git a/frontend/src/components/AppComponent.vue b/frontend/src/components/AppComponent.vue
index 01b4da194..84b80063d 100644
--- a/frontend/src/components/AppComponent.vue
+++ b/frontend/src/components/AppComponent.vue
@@ -22,12 +22,13 @@
 				v-slot:[slotName]="slotProps"
 			>
 				<template v-if="Array.isArray(slot.slotContent)">
-					<AppComponent
-						v-for="slotBlock in slot.slotContent"
-						:block="slotBlock"
-						:key="slotBlock.componentId"
-						v-bind="slotProps"
-					/>
+					<SlotScopeProvider :scope="slotProps">
+						<AppComponent
+							v-for="slotBlock in slot.slotContent"
+							:block="slotBlock"
+							:key="slotBlock.componentId"
+						/>
+					</SlotScopeProvider>
 				</template>
 				<template v-else-if="isHTML(slot.slotContent)">
 					<component :is="{ template: slot.slotContent }" v-bind="slotProps" />
@@ -69,11 +70,12 @@ import useComponentInstance from "@/utils/useComponentInstance"
 
 import useCodeStore from "@/stores/codeStore"
 import { toast } from "frappe-ui"
-import type { RepeaterContext } from "@/types"
+import type { SlotScope } from "@/types"
 import type { Field } from "@/types/ComponentEvent"
 import type { DataResult } from "@/types/Studio/StudioResource"
 
 import StudioComponentRenderer from "@/components/StudioComponentRenderer.vue"
+import SlotScopeProvider from "@/components/SlotScopeProvider.vue"
 import { customVueComponentsRegistry } from "@/globals"
 import MissingComponent from "@/components/MissingComponent.vue"
 
@@ -110,12 +112,12 @@ const classes = computed(() => {
 })
 
 const codeStore = useCodeStore()
-const repeaterContext = inject<ComputedRef<RepeaterContext> | null>("repeaterContext", null)
+const slotScope = inject<ComputedRef<SlotScope> | null>("slotScope", null)
 const componentContext = inject<ComputedRef | null>("componentContext", null)
 
 const evaluationContext = computed(() => {
 	return {
-		...repeaterContext?.value,
+		...slotScope?.value,
 		...componentContext?.value,
 	}
 })
@@ -204,7 +206,7 @@ function getEventHandler(event: any): Listener | undefined {
 		}
 	} else if (event.action === "Run Script") {
 		return (...eventArgs: any[]) => {
-			codeStore.executeUserScript(event.script, repeaterContext?.value, componentContext?.value, eventArgs)
+			codeStore.executeUserScript(event.script, slotScope?.value, componentContext?.value, eventArgs)
 		}
 	}
 }
@@ -237,7 +239,7 @@ const handleSuccess = (event: any) => (data: DataResult) => {
 		return codeStore.handleSuccess(
 			event.on_success_script,
 			data,
-			repeaterContext?.value,
+			slotScope?.value,
 			componentContext?.value,
 			event.eventArgs,
 		)
@@ -253,7 +255,7 @@ const handleError = (event: any) => (error: any) => {
 		return codeStore.handleError(
 			event.on_error_script,
 			error,
-			repeaterContext?.value,
+			slotScope?.value,
 			componentContext?.value,
 			event.eventArgs,
 		)
diff --git a/frontend/src/components/AppLayout/Repeater.vue b/frontend/src/components/AppLayout/Repeater.vue
index 81adbf497..54b7867f0 100644
--- a/frontend/src/components/AppLayout/Repeater.vue
+++ b/frontend/src/components/AppLayout/Repeater.vue
@@ -7,15 +7,15 @@
 			{{ emptyStateMessage || "No data" }}
 		</div>
 		<template v-else v-for="(dataItem, dataIndex) in data" :key="dataItem?.[dataKey] || dataIndex">
-			<RepeaterContextProvider :dataItem="dataItem" :dataIndex="dataIndex" :dataKey="dataKey">
+			<SlotScopeProvider :scope="{ dataItem, dataIndex, dataKey }">
 				<slot v-bind="{ dataItem, dataKey, dataIndex }"></slot>
-			</RepeaterContextProvider>
+			</SlotScopeProvider>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
-import RepeaterContextProvider from "@/components/AppLayout/RepeaterContextProvider.vue"
+import SlotScopeProvider from "@/components/SlotScopeProvider.vue"
 import type { RepeaterProps } from "@/types/studio_components/Repeater"
 
 defineProps<RepeaterProps>()
diff --git a/frontend/src/components/AppLayout/RepeaterContextProvider.vue b/frontend/src/components/AppLayout/RepeaterContextProvider.vue
deleted file mode 100644
index 30fb9f299..000000000
--- a/frontend/src/components/AppLayout/RepeaterContextProvider.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-	<slot />
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from "vue"
-
-const props = defineProps<{
-	dataItem: any
-	dataIndex: number
-	dataKey: string
-}>()
-
-const context = computed(() => ({
-	dataItem: props.dataItem,
-	dataIndex: props.dataIndex,
-	dataKey: props.dataKey,
-}))
-
-provide("repeaterContext", context)
-</script>
diff --git a/frontend/src/components/DynamicValueSelector.vue b/frontend/src/components/DynamicValueSelector.vue
index bba6eb494..a75dc4623 100644
--- a/frontend/src/components/DynamicValueSelector.vue
+++ b/frontend/src/components/DynamicValueSelector.vue
@@ -53,6 +53,7 @@ import useComponentEditorStore from "@/stores/componentEditorStore"
 import Block from "@/utils/block"
 import type { VariableOption } from "@/types/Studio/StudioPageVariable"
 import type { ComponentInput } from "@/types/Studio/StudioComponent"
+import type { SlotScope } from "@/types"
 import { isObjectEmpty } from "@/utils/helpers"
 import { getBindingType } from "@/utils/parseCode"
 import useCodeStore from "@/stores/codeStore"
@@ -141,20 +142,28 @@ const dynamicValueOptions = computed(() => {
 		}
 	}
 
-	// Repeater Data Item group
-	const repeaterContext = props.block?.repeaterDataItem
-	if (!isObjectEmpty(repeaterContext)) {
-		const repeaterOptions = Object.keys(repeaterContext!).map((key) => ({
-			value: `dataItem.${key}`,
-			label: `dataItem.${key}`,
-			type: typeof repeaterContext![key],
-		}))
+	// Scoped slot props exposed by the enclosing component (Repeater's dataItem, List's item, ...)
+	const slotScopeOptions = getSlotScopeOptions(props.block?.slotScope)
+	if (slotScopeOptions.length) {
 		groups.push({
-			group: "Repeater",
-			items: repeaterOptions,
+			group: "Slot Scope",
+			items: slotScopeOptions,
 		})
 	}
 
 	return groups
 })
+
+function getSlotScopeOptions(slotScope?: SlotScope | null): VariableOption[] {
+	return Object.entries(slotScope || {}).flatMap(([name, value]) => {
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			return Object.keys(value).map((key) => ({
+				value: `${name}.${key}`,
+				label: `${name}.${key}`,
+				type: typeof value[key],
+			}))
+		}
+		return [{ value: name, label: name, type: typeof value }]
+	})
+}
 </script>
diff --git a/frontend/src/components/SlotScopeProvider.vue b/frontend/src/components/SlotScopeProvider.vue
new file mode 100644
index 000000000..1e394c4a2
--- /dev/null
+++ b/frontend/src/components/SlotScopeProvider.vue
@@ -0,0 +1,19 @@
+<template>
+	<slot />
+</template>
+
+<script setup lang="ts">
+import { computed, inject, provide, type ComputedRef } from "vue"
+import type { SlotScope } from "@/types"
+
+// Renderless provider that pushes a scoped slot's props onto the scope stack
+// so that blocks rendered inside the slot can reference them in expressions.
+const props = defineProps<{
+	scope: SlotScope
+}>()
+
+const parentScope = inject<ComputedRef<SlotScope> | null>("slotScope", null)
+const scope = computed(() => ({ ...parentScope?.value, ...props.scope }))
+
+provide("slotScope", scope)
+</script>
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index da7ce2b9b..aa399b1ee 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -38,16 +38,17 @@
 				v-slot:[slotName]="slotProps"
 			>
 				<template v-if="Array.isArray(slot.slotContent)">
-					<StudioComponent
-						v-for="slotBlock in slot?.slotContent"
-						:key="slotBlock.componentId"
-						:block="slotBlock"
-						:class="slotClasses"
-						:data-slot-id="slot.slotId"
-						:data-slot-name="slotName"
-						:data-component-id="block.componentId"
-						v-bind="slotProps"
-					/>
+					<SlotScopeProvider :scope="slotProps">
+						<StudioComponent
+							v-for="slotBlock in slot?.slotContent"
+							:key="slotBlock.componentId"
+							:block="slotBlock"
+							:class="slotClasses"
+							:data-slot-id="slot.slotId"
+							:data-slot-name="slotName"
+							:data-component-id="block.componentId"
+						/>
+					</SlotScopeProvider>
 				</template>
 				<template v-else-if="isHTML(slot.slotContent)">
 					<component
@@ -117,6 +118,7 @@
 import { computed, ref, watch, useAttrs, inject, ComputedRef, onErrorCaptured, h } from "vue"
 import type { ComponentPublicInstance } from "vue"
 import StudioComponentWrapper from "@/components/StudioComponentWrapper.vue"
+import SlotScopeProvider from "@/components/SlotScopeProvider.vue"
 import ComponentEditor from "@/components/ComponentEditor.vue"
 import { customVueComponentsRegistry } from "@/globals"
 
@@ -126,7 +128,7 @@ import { getComponentRoot, isHTML, isObjectEmpty } from "@/utils/helpers"
 import { isDynamicValue } from "@/utils/code"
 
 import type { CanvasProps } from "@/types/StudioCanvas"
-import type { RepeaterContext } from "@/types"
+import type { SlotScope } from "@/types"
 import type HTML from "@/components/AppLayout/HTML.vue"
 import MissingComponent from "@/components/MissingComponent.vue"
 import useCodeStore from "@/stores/codeStore"
@@ -189,11 +191,11 @@ const componentName = computed(() => {
 	return name
 })
 
-const repeaterContext = inject<ComputedRef<RepeaterContext> | null>("repeaterContext", null)
+const slotScope = inject<ComputedRef<SlotScope> | null>("slotScope", null)
 const componentContext = inject<ComputedRef | null>("componentContext", null)
 const evaluationContext = computed(() => {
 	return {
-		...repeaterContext?.value,
+		...slotScope?.value,
 		...componentContext?.value,
 	}
 })
@@ -304,8 +306,8 @@ const handleClick = (e: MouseEvent) => {
 	const domEvent = e instanceof Event ? e : null
 	const block = (domEvent && getClickedComponent(domEvent)) || props.block
 	canvasStore.activeCanvas?.selectBlock(block, domEvent)
-	if (repeaterContext?.value) {
-		block.setRepeaterDataItem((repeaterContext.value as RepeaterContext).dataItem)
+	if (slotScope?.value) {
+		block.setSlotScope(slotScope.value)
 	}
 
 	if (!domEvent) return
diff --git a/frontend/src/stores/codeStore.ts b/frontend/src/stores/codeStore.ts
index ba7e836ce..0ab36b141 100644
--- a/frontend/src/stores/codeStore.ts
+++ b/frontend/src/stores/codeStore.ts
@@ -360,12 +360,12 @@ const useCodeStore = defineStore("codeStore", () => {
 
 	function executeUserScript(
 		script: string,
-		repeaterContext?: Record<string, any>,
+		slotScope?: Record<string, any>,
 		componentContext?: Record<string, any>,
 		eventArgs?: any[],
 	) {
 		try {
-			const context = { ...scriptContext.value, ...repeaterContext, ...componentContext, eventArgs }
+			const context = { ...scriptContext.value, ...slotScope, ...componentContext, eventArgs }
 
 			const scriptToExecute = `
 				with (context) {
@@ -385,14 +385,14 @@ const useCodeStore = defineStore("codeStore", () => {
 	function handleSuccess(
 		script: string,
 		data: DataResult,
-		repeaterContext?: Record<string, any>,
+		slotScope?: Record<string, any>,
 		componentContext?: Record<string, any>,
 		eventArgs?: any[],
 	) {
 		try {
 			const context = {
 				...scriptContext.value,
-				...repeaterContext,
+				...slotScope,
 				...componentContext,
 				eventArgs,
 				data,
@@ -414,14 +414,14 @@ const useCodeStore = defineStore("codeStore", () => {
 	function handleError(
 		script: string,
 		error: any,
-		repeaterContext?: Record<string, any>,
+		slotScope?: Record<string, any>,
 		componentContext?: Record<string, any>,
 		eventArgs?: any[],
 	) {
 		try {
 			const context = {
 				...scriptContext.value,
-				...repeaterContext,
+				...slotScope,
 				...componentContext,
 				eventArgs,
 				error,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index dd1f511bd..8bd4a3ce6 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -158,12 +158,8 @@ export type HashString = `#${string}`
 
 export type RGBString = `rgb(${number}, ${number}, ${number})`
 
-// repeater
-export type RepeaterContext = {
-	dataItem: Record<string, any>
-	dataIndex: number
-	dataKey?: string
-}
+// scoped slots
+export type SlotScope = Record<string, any>
 
 // completions
 export type CompletionSource = {
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 3e2d098b5..e85016b5f 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -1,4 +1,4 @@
-import type { BlockOptions, BlockStyleMap, CompletionSource, Slot } from "@/types"
+import type { BlockOptions, BlockStyleMap, CompletionSource, Slot, SlotScope } from "@/types"
 import { clamp } from "@vueuse/core"
 import { reactive, CSSProperties, nextTick } from 'vue'
 
@@ -42,7 +42,7 @@ class Block implements BlockOptions {
 	extendedFromComponent?: Block // for the component root
 	isCustomVueComponent?: boolean // custom vue component from frappe app
 	// temporary properties
-	repeaterDataItem?: Record<string, any> | null
+	slotScope?: SlotScope | null
 	componentContext?: Record<string, any> | null
 
 	// @editor-only
@@ -97,8 +97,8 @@ class Block implements BlockOptions {
 		this.initializeSlots()
 
 		// Define as non-reactive property
-		Object.defineProperty(this, "repeaterDataItem", {
-			value: options.repeaterDataItem || null,
+		Object.defineProperty(this, "slotScope", {
+			value: options.slotScope || null,
 			writable: true,
 			enumerable: false,
 			configurable: true
@@ -731,35 +731,14 @@ class Block implements BlockOptions {
 		return Boolean(this.getParentBlock()?.isRepeater())
 	}
 
-	setRepeaterDataItem(repeaterDataItem: Record<string, any>) {
-		// temporarily set repeater data item on selected block for autocompletions
-		this.repeaterDataItem = repeaterDataItem
+	// scoped slots
+	setSlotScope(slotScope: SlotScope) {
+		// temporarily set the enclosing scoped slot props on selected block for autocompletions
+		this.slotScope = slotScope
 	}
 
 	getCompletions(): CompletionSource[] {
-		const completions = []
-		if (this.repeaterDataItem) {
-			completions.push(
-				{
-					item: this.repeaterDataItem,
-					completion: {
-						label: "dataItem",
-						type: "data",
-						detail: "Repeater Data Item",
-					}
-				}
-			)
-			completions.push(
-				{
-					item: "dataIndex",
-					completion: {
-						label: "dataIndex",
-						type: "data",
-						detail: "Repeater Data Index",
-					}
-				}
-			)
-		}
+		const completions = this.getSlotScopeCompletions()
 		if (this.componentContext) {
 			completions.push(
 				{
@@ -776,6 +755,17 @@ class Block implements BlockOptions {
 		return completions
 	}
 
+	getSlotScopeCompletions(): CompletionSource[] {
+		return Object.entries(this.slotScope || {}).map(([name, value]) => ({
+			item: value,
+			completion: {
+				label: name,
+				type: "data",
+				detail: "Slot Scope",
+			},
+		}))
+	}
+
 	// events
 	addEvent(event: ComponentEvent) {
 		this.componentEvents[event.event] = event
diff --git a/frontend/src/utils/serializer.ts b/frontend/src/utils/serializer.ts
index cf25b2269..0239098fa 100644
--- a/frontend/src/utils/serializer.ts
+++ b/frontend/src/utils/serializer.ts
@@ -146,7 +146,7 @@ function getBlockCopyWithoutParent(block: BlockOptions | Block) {
 	const rawBlock = toRaw(block)
 	const blockCopy = deepCloneObject(rawBlock, ["parentBlock"]) as BlockOptions
 	delete blockCopy.parentBlock
-	delete blockCopy.repeaterDataItem
+	delete blockCopy.slotScope
 	delete blockCopy.componentContext
 
 	blockCopy.children = blockCopy.children?.map((child) => getBlockCopyWithoutParent(child))

From 9011edc0b88d3397619698a73a3ba2c45ed27748 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 21 Jul 2026 20:20:55 +0530
Subject: [PATCH 02/11] refactor!: remove plain HTML or template content from
 slots, force block usage

- plain text/HTML content can be used with TextBlock/HTML component as slot block now. Plain text also cannot be styled
---
 frontend/src/components/AppComponent.vue      | 24 +++----
 .../src/components/ComponentContextMenu.vue   | 12 ----
 frontend/src/components/ComponentEditor.vue   | 26 -------
 frontend/src/components/ComponentLayers.vue   | 13 ++--
 .../src/components/ComponentProperties.vue    | 35 +++------
 frontend/src/components/SearchBlock.vue       |  4 +-
 frontend/src/components/StudioComponent.vue   | 46 ++++--------
 frontend/src/components/ai/toolDispatch.ts    |  8 +--
 frontend/src/stores/studioStore.ts            |  2 -
 frontend/src/types/index.ts                   |  2 +-
 frontend/src/utils/block.ts                   | 71 ++++++-------------
 frontend/src/utils/blockCodec.ts              |  6 +-
 frontend/src/utils/serializer.ts              | 10 +--
 frontend/src/utils/useCanvasUtils.ts          |  6 +-
 studio/ai/agent/selectors.py                  |  2 +-
 studio/ai/agent/tools/blocks.py               | 18 ++---
 studio/ai/block_codec.py                      | 17 ++---
 studio/ai/prompts.py                          |  2 +-
 studio/build.py                               |  5 +-
 studio/patches.txt                            |  3 +-
 .../doctype/studio_app/test_studio_app.py     |  4 +-
 .../patches/migrate_slot_content_to_blocks.py | 69 ++++++++++++++++++
 .../studio/doctype/studio_page/studio_page.py |  5 +-
 23 files changed, 163 insertions(+), 227 deletions(-)
 create mode 100644 studio/studio/doctype/studio_page/patches/migrate_slot_content_to_blocks.py

diff --git a/frontend/src/components/AppComponent.vue b/frontend/src/components/AppComponent.vue
index 84b80063d..d766481c8 100644
--- a/frontend/src/components/AppComponent.vue
+++ b/frontend/src/components/AppComponent.vue
@@ -21,21 +21,13 @@
 				:key="slotName"
 				v-slot:[slotName]="slotProps"
 			>
-				<template v-if="Array.isArray(slot.slotContent)">
-					<SlotScopeProvider :scope="slotProps">
-						<AppComponent
-							v-for="slotBlock in slot.slotContent"
-							:block="slotBlock"
-							:key="slotBlock.componentId"
-						/>
-					</SlotScopeProvider>
-				</template>
-				<template v-else-if="isHTML(slot.slotContent)">
-					<component :is="{ template: slot.slotContent }" v-bind="slotProps" />
-				</template>
-				<template v-else v-bind="slotProps">
-					{{ slot.slotContent }}
-				</template>
+				<SlotScopeProvider :scope="slotProps">
+					<AppComponent
+						v-for="slotBlock in slot.slotContent"
+						:block="slotBlock"
+						:key="slotBlock.componentId"
+					/>
+				</SlotScopeProvider>
 			</template>
 
 			<AppComponent v-for="child in block?.children" :key="child.componentId" :block="child" />
@@ -62,7 +54,7 @@ import Block from "@/utils/block"
 import { computed, onMounted, ref, useAttrs, inject, type ComputedRef, h } from "vue"
 import type { ComponentPublicInstance } from "vue"
 import { createResource } from "frappe-ui"
-import { getComponentRoot, isHTML, isObjectEmpty } from "@/utils/helpers"
+import { getComponentRoot, isObjectEmpty } from "@/utils/helpers"
 import { useScreenSize } from "@/utils/useScreenSize"
 import { isDynamicValue } from "@/utils/code"
 import { resolveEventListener } from "@/utils/eventModifiers"
diff --git a/frontend/src/components/ComponentContextMenu.vue b/frontend/src/components/ComponentContextMenu.vue
index ff73cfad4..dd698a27b 100644
--- a/frontend/src/components/ComponentContextMenu.vue
+++ b/frontend/src/components/ComponentContextMenu.vue
@@ -17,17 +17,14 @@ import { ref, Ref } from "vue"
 import { vOnClickOutside } from "@vueuse/components"
 import ContextMenu from "@/components/ContextMenu.vue"
 import Block from "@/utils/block"
-import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import useComponentEditorStore from "@/stores/componentEditorStore"
 import type { ContextMenuOption } from "@/types"
-import { isObjectEmpty } from "@/utils/helpers"
 import { getBlockCopy, getComponentBlock } from "@/utils/serializer"
 import getBlockTemplate from "@/utils/blockTemplate"
 import FormDialog from "@/components/FormDialog.vue"
 import { toast } from "frappe-ui"
 
-const store = useStudioStore()
 const canvasStore = useCanvasStore()
 
 const contextMenuVisible = ref(false)
@@ -129,15 +126,6 @@ const contextMenuOptions: ContextMenuOption[] = [
 			return !block.value.isRoot() && Boolean(block.value.getParentBlock())
 		},
 	},
-	{
-		label: "Edit Slot",
-		action: () => {
-			store.showSlotEditorDialog = true
-		},
-		condition: () =>
-			!isObjectEmpty(block.value.componentSlots) &&
-			block.value.isSlotEditable(canvasStore.activeCanvas?.selectedSlot),
-	},
 	{
 		label: "Save as Component",
 		action: () => {
diff --git a/frontend/src/components/ComponentEditor.vue b/frontend/src/components/ComponentEditor.vue
index 91fc94b75..874b5c82f 100644
--- a/frontend/src/components/ComponentEditor.vue
+++ b/frontend/src/components/ComponentEditor.vue
@@ -60,39 +60,13 @@
 			</div>
 		</template>
 	</div>
-
-	<Dialog
-		v-if="canvasStore.activeCanvas?.selectedSlot?.slotId"
-		v-model="store.showSlotEditorDialog"
-		class="overscroll-none"
-		:title="`Edit #${canvasStore.activeCanvas?.selectedSlot?.slotName} slot for ${block.componentName}`"
-		size="3xl"
-	>
-		<template #default>
-			<Code
-				:modelValue="block.getSlotContent(canvasStore.activeCanvas?.selectedSlot?.slotName) || ''"
-				language="html"
-				height="60vh"
-				:showSaveButton="true"
-				@save="
-					(val) => {
-						if (!canvasStore.activeCanvas?.selectedSlot) return
-						props.block.updateSlot(canvasStore.activeCanvas?.selectedSlot?.slotName, val)
-						store.showSlotEditorDialog = false
-					}
-				"
-			/>
-		</template>
-	</Dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, Ref, watchEffect, nextTick, inject, watch } from "vue"
-import { Dialog } from "frappe-ui"
 import BoxResizer from "@/components/BoxResizer.vue"
 import PaddingHandler from "@/components/PaddingHandler.vue"
 import MarginHandler from "@/components/MarginHandler.vue"
-import Code from "@/components/Code.vue"
 import LucideRepeat from "~icons/lucide/repeat"
 
 import Block from "@/utils/block"
diff --git a/frontend/src/components/ComponentLayers.vue b/frontend/src/components/ComponentLayers.vue
index 3f4c164e1..1c84d2cfd 100644
--- a/frontend/src/components/ComponentLayers.vue
+++ b/frontend/src/components/ComponentLayers.vue
@@ -119,7 +119,7 @@
 								:style="{ paddingLeft: `${childIndent}px` }"
 							>
 								<FeatherIcon
-									v-if="isSlotExpandable(slot, element)"
+									v-if="isSlotExpandable(slot)"
 									:name="isSlotExpanded(slot) ? 'chevron-down' : 'chevron-right'"
 									class="h-3 w-3"
 									@click.stop="toggleSlotExpanded(slot)"
@@ -128,7 +128,7 @@
 								<span class="min-h-[1em] min-w-[2em] truncate" :title="slot.slotName">#{{ slotName }}</span>
 							</div>
 
-							<div v-if="Array.isArray(slot.slotContent) && isSlotExpanded(slot)">
+							<div v-if="isSlotExpanded(slot)">
 								<ComponentLayers :blocks="slot.slotContent" ref="slotLayer" :indent="slotIndent" />
 							</div>
 						</div>
@@ -252,8 +252,8 @@ const isSlotExpanded = (slot: Slot) => {
 	return expandedSlots.value.has(slot.slotId)
 }
 
-const isSlotExpandable = (slot: Slot, block: Block) => {
-	return !block.isSlotEditable(slot) && slot.slotContent?.length > 0
+const isSlotExpandable = (slot: Slot) => {
+	return slot.slotContent.length > 0
 }
 
 const toggleSlotExpanded = (slot: Slot) => {
@@ -387,10 +387,7 @@ const moveBlockAdjacent = (draggedBlock: Block, targetBlock: Block, position: "b
 	draggedBlock.parentBlock = targetParent
 	if (targetBlock.isSlotBlock()) {
 		draggedBlock.parentSlotName = targetBlock.parentSlotName
-		let slotContent = targetParent.getSlotContent(targetBlock.parentSlotName!)
-		if (Array.isArray(slotContent)) {
-			slotContent.splice(insertIndex, 0, draggedBlock)
-		}
+		targetParent.getSlotContent(targetBlock.parentSlotName!)?.splice(insertIndex, 0, draggedBlock)
 	} else {
 		delete draggedBlock.parentSlotName
 		targetParent.children.splice(insertIndex, 0, draggedBlock)
diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index 1646ee0af..84f22676f 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -22,30 +22,15 @@
 					</Combobox>
 				</template>
 
-				<div class="flex flex-col gap-3" v-if="!isObjectEmpty(block?.componentSlots)">
+				<div class="flex flex-col gap-2" v-if="!isObjectEmpty(block?.componentSlots)">
 					<div
 						v-for="(slot, name) in block?.componentSlots"
 						:key="name"
-						class="flex w-full flex-row justify-between"
+						class="flex w-full items-center justify-between gap-2"
 					>
-						<div class="flex w-full cursor-pointer items-center justify-between gap-2">
-							<div class="relative w-full">
-								<InlineInput
-									:label="name"
-									type="textarea"
-									:modelValue="getSlotContent(slot)"
-									@update:modelValue="(slotContent) => block?.updateSlot(name, slotContent)"
-									:disabled="Array.isArray(slot.slotContent)"
-								/>
-								<Badge
-									v-if="Array.isArray(slot.slotContent)"
-									variant="subtle"
-									theme="blue"
-									class="absolute left-2 top-8"
-								>
-									Component Tree
-								</Badge>
-							</div>
+						<span class="text-base text-ink-gray-8">#{{ name }}</span>
+						<div class="flex items-center gap-2">
+							<span class="text-sm text-ink-gray-5">{{ getSlotSummary(slot) }}</span>
 							<Button variant="subtle" size="sm" icon="lucide-x" @click="block?.removeSlot(name)" />
 						</div>
 					</div>
@@ -105,7 +90,6 @@ import Block from "@/utils/block"
 import { getComponentSlots } from "@/utils/components"
 import PropsEditor from "@/components/PropsEditor.vue"
 import ObjectEditor from "@/components/ObjectEditor.vue"
-import InlineInput from "@/components/InlineInput.vue"
 import EmptyState from "@/components/EmptyState.vue"
 import type { Slot } from "@/types"
 import { isObjectEmpty } from "@/utils/helpers"
@@ -142,11 +126,10 @@ watchEffect(async () => {
 	componentSlots.value = slots.map((slot) => slot.name)
 })
 
-const getSlotContent = (slot: Slot) => {
-	if (!slot.slotContent) return ""
-	else if (typeof slot.slotContent === "string") return slot.slotContent
-	// hack to show the clear button for slot blocks
-	return " "
+const getSlotSummary = (slot: Slot) => {
+	const count = slot.slotContent.length
+	if (!count) return "Empty"
+	return count === 1 ? "1 block" : `${count} blocks`
 }
 
 const sections: Record<string, { condition?: any; collapsed?: any; searchKeyWords: string }> = {
diff --git a/frontend/src/components/SearchBlock.vue b/frontend/src/components/SearchBlock.vue
index e6c80b396..3bff2e96e 100644
--- a/frontend/src/components/SearchBlock.vue
+++ b/frontend/src/components/SearchBlock.vue
@@ -435,9 +435,7 @@ const searchWithFilters = (searchTerm: string): Block[] => {
 
 		if (block.componentSlots) {
 			Object.values(block.componentSlots).forEach((slot) => {
-				if (Array.isArray(slot.slotContent)) {
-					slot.slotContent.forEach((child) => searchInBlock(child))
-				}
+				slot.slotContent.forEach((child) => searchInBlock(child))
 			})
 		}
 	}
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index aa399b1ee..b66778e68 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -37,41 +37,25 @@
 				:key="slotName"
 				v-slot:[slotName]="slotProps"
 			>
-				<template v-if="Array.isArray(slot.slotContent)">
-					<SlotScopeProvider :scope="slotProps">
-						<StudioComponent
-							v-for="slotBlock in slot?.slotContent"
-							:key="slotBlock.componentId"
-							:block="slotBlock"
-							:class="slotClasses"
-							:data-slot-id="slot.slotId"
-							:data-slot-name="slotName"
-							:data-component-id="block.componentId"
-						/>
-					</SlotScopeProvider>
-				</template>
-				<template v-else-if="isHTML(slot.slotContent)">
-					<component
-						v-memo="[slot.slotContent]"
-						:is="{ template: slot.slotContent }"
+				<SlotScopeProvider v-if="slot.slotContent.length" :scope="slotProps">
+					<StudioComponent
+						v-for="slotBlock in slot.slotContent"
+						:key="slotBlock.componentId"
+						:block="slotBlock"
 						:class="slotClasses"
 						:data-slot-id="slot.slotId"
 						:data-slot-name="slotName"
 						:data-component-id="block.componentId"
-						v-bind="slotProps"
 					/>
-				</template>
-				<template v-else>
-					<div
-						:class="[slotClasses, !slot.slotContent ? 'min-h-5 w-full' : '']"
-						:data-slot-id="slot.slotId"
-						:data-slot-name="slotName"
-						:data-component-id="block.componentId"
-						v-bind="slotProps"
-					>
-						{{ slot.slotContent }}
-					</div>
-				</template>
+				</SlotScopeProvider>
+				<!-- drop target for an empty slot -->
+				<div
+					v-else
+					:class="[slotClasses, 'min-h-5 w-full']"
+					:data-slot-id="slot.slotId"
+					:data-slot-name="slotName"
+					:data-component-id="block.componentId"
+				/>
 			</template>
 
 			<StudioComponent
@@ -124,7 +108,7 @@ import { customVueComponentsRegistry } from "@/globals"
 
 import Block from "@/utils/block"
 import useCanvasStore from "@/stores/canvasStore"
-import { getComponentRoot, isHTML, isObjectEmpty } from "@/utils/helpers"
+import { getComponentRoot, isObjectEmpty } from "@/utils/helpers"
 import { isDynamicValue } from "@/utils/code"
 
 import type { CanvasProps } from "@/types/StudioCanvas"
diff --git a/frontend/src/components/ai/toolDispatch.ts b/frontend/src/components/ai/toolDispatch.ts
index 1c09356f4..50027c23b 100644
--- a/frontend/src/components/ai/toolDispatch.ts
+++ b/frontend/src/components/ai/toolDispatch.ts
@@ -131,15 +131,11 @@ export class ToolDispatcher {
 		newParent.addChild(options, typeof args.index === "number" ? args.index : null)
 	}
 
-	/** Fill a named slot of an existing block. `html` sets a raw-string slot; `blocks`
-	 * replaces the slot with expanded child blocks (their ids are assigned on the canvas). */
+	/** Fill a named slot of an existing block, replacing it with expanded child blocks
+	 * (their ids are assigned on the canvas). */
 	private setSlot(args: Record<string, any>) {
 		const block = this.ctx.getCanvas()?.findBlock(args.component_id)
 		if (!block || !args.slot_name) return
-		if (typeof args.html === "string") {
-			block.updateSlot(args.slot_name, args.html)
-			return
-		}
 		if (Array.isArray(args.blocks)) {
 			if (!block.getSlot(args.slot_name)) block.addSlot(args.slot_name)
 			block.getSlot(args.slot_name).slotContent = []
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index e53382c72..c07744eba 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -53,7 +53,6 @@ const useStudioStore = defineStore("store", () => {
 	const componentContextMenu = ref<InstanceType<typeof ComponentContextMenu> | null>(null)
 
 	// dialogs
-	const showSlotEditorDialog = ref(false)
 	const showSearchBlock = ref(false)
 	const showStudioSettingsDialog = ref(false)
 	const showPageOptions = ref(false)
@@ -598,7 +597,6 @@ const useStudioStore = defineStore("store", () => {
 		mode,
 		componentContextMenu,
 		// dialogs
-		showSlotEditorDialog,
 		showSearchBlock,
 		showStudioSettingsDialog,
 		showPageOptions,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 8bd4a3ce6..58e016a0c 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -42,7 +42,7 @@ export type StudioMode = "select" | "container"
 export interface Slot {
 	slotId: string
 	slotName: string
-	slotContent: string | Block[]
+	slotContent: Block[]
 	parentBlockId: string
 }
 
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index e85016b5f..c5e47ac3e 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -159,14 +159,7 @@ class Block implements BlockOptions {
 		if (index === -1) return
 
 		if (child.isSlotBlock()) {
-			let slotContent = this.getSlotContent(child.parentSlotName!)
-			if (!Array.isArray(slotContent)) return
-
-			if (slotContent.length === 1) {
-				this.updateSlot(child.parentSlotName!, "")
-			} else {
-				slotContent.splice(index, 1)
-			}
+			this.getSlotContent(child.parentSlotName!)?.splice(index, 1)
 		} else {
 			this.children.splice(index, 1)
 		}
@@ -185,9 +178,8 @@ class Block implements BlockOptions {
 
 	getChildIndex(child: Block) {
 		if (child.parentSlotName) {
-			return (
-				this.getSlotContent(child.parentSlotName) as Block[]
-			)?.findIndex((block) => block.componentId === child.componentId)
+			return this.getSlotContent(child.parentSlotName)
+				?.findIndex((block) => block.componentId === child.componentId)
 		}
 		return this.children.findIndex((block) => block.componentId === child.componentId)
 	}
@@ -197,10 +189,8 @@ class Block implements BlockOptions {
 		const child = this.children.find((block) => block.componentId === componentId)
 		if (child) return child
 		for (const slot of Object.values(this.componentSlots)) {
-			if (Array.isArray(slot.slotContent)) {
-				const found = slot.slotContent.find((block) => block.componentId === componentId)
-				if (found) return found
-			}
+			const found = slot.slotContent.find((block) => block.componentId === componentId)
+			if (found) return found
 		}
 		return null
 	}
@@ -646,12 +636,11 @@ class Block implements BlockOptions {
 			}
 			slot.parentBlockId = this.componentId
 
-			if (Array.isArray(slot.slotContent)) {
-				slot.slotContent = slot.slotContent.map((block) => {
-					block.parentBlock = this
-					return reactive(new Block(block))
-				})
-			}
+			// legacy pages may carry string slot content; those are migrated, ignore any leftovers
+			slot.slotContent = (Array.isArray(slot.slotContent) ? slot.slotContent : []).map((block) => {
+				block.parentBlock = this
+				return reactive(new Block(block))
+			})
 		})
 	}
 
@@ -659,7 +648,7 @@ class Block implements BlockOptions {
 		this.componentSlots[slotName] = {
 			slotName: slotName,
 			slotId: this.generateSlotId(slotName),
-			slotContent: "",
+			slotContent: [],
 			parentBlockId: this.componentId
 		}
 		nextTick(() => {
@@ -668,24 +657,16 @@ class Block implements BlockOptions {
 		})
 	}
 
-	updateSlot(slotName: string, content: string | Block | BlockOptions, index?: number | null) {
-		if (typeof content === "string") {
-			this.componentSlots[slotName].slotContent = content
-		} else {
-			if (!Array.isArray(this.componentSlots[slotName].slotContent)) {
-				this.componentSlots[slotName].slotContent = []
-			}
-
-			// for top-level blocks inside a slot
-			content.parentSlotName = slotName
-			content.parentBlock = this
-			const slotContent = this.componentSlots[slotName].slotContent as Block[]
-			index = this.getValidIndex(index, slotContent.length)
-			const childBlock = reactive(new Block(content))
-			slotContent.splice(index, 0, childBlock)
-			childBlock.selectBlock()
-			return childBlock
-		}
+	updateSlot(slotName: string, content: Block | BlockOptions, index?: number | null) {
+		// for top-level blocks inside a slot
+		content.parentSlotName = slotName
+		content.parentBlock = this
+		const slotContent = this.componentSlots[slotName].slotContent
+		index = this.getValidIndex(index, slotContent.length)
+		const childBlock = reactive(new Block(content))
+		slotContent.splice(index, 0, childBlock)
+		childBlock.selectBlock()
+		return childBlock
 	}
 
 	removeSlot(slotName: string) {
@@ -708,16 +689,6 @@ class Block implements BlockOptions {
 		return `${this.componentId}:${slotName}`
 	}
 
-	isSlotEditable(slot: Slot | undefined | null) {
-		if (!slot) return false
-
-		return Boolean(
-			!this.isRoot()
-			&& slot.slotId
-			&& typeof slot.slotContent === "string"
-		)
-	}
-
 	isSlotBlock() {
 		return Boolean(this.parentSlotName)
 	}
diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
index cf2ad1938..138b4b6c7 100644
--- a/frontend/src/utils/blockCodec.ts
+++ b/frontend/src/utils/blockCodec.ts
@@ -26,8 +26,8 @@ export function expandBlock(node: Record<string, any>): BlockOptions {
 	return block
 }
 
-/** Expand the compact `slots` map ({slotName: [compact blocks] | "html string"}) into Studio
- * componentSlots. slotId/parentBlockId are backfilled by the Block constructor (initializeSlots).
+/** Expand the compact `slots` map ({slotName: [compact blocks]}) into Studio componentSlots.
+ * slotId/parentBlockId are backfilled by the Block constructor (initializeSlots).
  * Mirrors BlockCodec._expand_slots. */
 function expandSlots(slots: Record<string, any> | undefined): Record<string, any> {
 	const out: Record<string, any> = {}
@@ -35,8 +35,6 @@ function expandSlots(slots: Record<string, any> | undefined): Record<string, any
 	for (const [name, content] of Object.entries(slots)) {
 		if (Array.isArray(content)) {
 			out[name] = { slotName: name, slotContent: content.map(expandBlock) }
-		} else if (typeof content === "string") {
-			out[name] = { slotName: name, slotContent: content }
 		}
 	}
 	return out
diff --git a/frontend/src/utils/serializer.ts b/frontend/src/utils/serializer.ts
index 0239098fa..ca5761354 100644
--- a/frontend/src/utils/serializer.ts
+++ b/frontend/src/utils/serializer.ts
@@ -104,10 +104,8 @@ function getBlockInstance(options: BlockOptions | string, retainId = true): Bloc
 
 			// clear componentId of slot children
 			for (let slot of Object.values(block.componentSlots || {})) {
-				if (Array.isArray(slot.slotContent)) {
-					for (let child of slot.slotContent) {
-						deleteComponentId(child)
-					}
+				for (let child of slot.slotContent || []) {
+					deleteComponentId(child)
 				}
 			}
 		}
@@ -153,9 +151,7 @@ function getBlockCopyWithoutParent(block: BlockOptions | Block) {
 
 	// remove parentBlock reference for slot children
 	for (const slot of Object.values(blockCopy.componentSlots || {})) {
-		if (Array.isArray(slot.slotContent)) {
-			slot.slotContent = slot.slotContent.map((child) => getBlockCopyWithoutParent(child))
-		}
+		slot.slotContent = slot.slotContent.map(getBlockCopyWithoutParent) as Block[]
 	}
 
 	return blockCopy
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index f031f89af..6a39e3321 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -85,10 +85,8 @@ export function useCanvasUtils(
 
 			if (block.componentSlots) {
 				for (const slot of Object.values(block.componentSlots)) {
-					if (Array.isArray(slot.slotContent)) {
-						const found = findBlock(componentId, slot.slotContent)
-						if (found) return found
-					}
+					const found = findBlock(componentId, slot.slotContent)
+					if (found) return found
 				}
 			}
 		}
diff --git a/studio/ai/agent/selectors.py b/studio/ai/agent/selectors.py
index 98104d168..932638db4 100644
--- a/studio/ai/agent/selectors.py
+++ b/studio/ai/agent/selectors.py
@@ -11,7 +11,7 @@
 
 def child_blocks(block: dict) -> Iterator[dict]:
 	"""A block's direct child blocks: its `children` PLUS blocks nested in named slots
-	(componentSlots[<name>].slotContent when that content is a block list). Slotted blocks
+	(componentSlots[<name>].slotContent). Slotted blocks
 	are real children of the block — walking only `children` makes them unreachable for
 	selection and ref-validation."""
 	for child in block.get("children") or []:
diff --git a/studio/ai/agent/tools/blocks.py b/studio/ai/agent/tools/blocks.py
index 9bbce8697..c1b70b35b 100644
--- a/studio/ai/agent/tools/blocks.py
+++ b/studio/ai/agent/tools/blocks.py
@@ -151,7 +151,7 @@
 					},
 					"slots": {
 						"type": "object",
-						"description": 'NAMED slots (only for components that expose them): {"<slotName>": [ child block objects ]} — each value is a list of blocks in this same schema, or a raw HTML string. Use "c" for default-slot content; use "slots" only for named slots.',
+						"description": 'NAMED slots (only for components that expose them): {"<slotName>": [ child block objects ]} — each value is a list of blocks in this same schema. Use "c" for default-slot content; use "slots" only for named slots.',
 					},
 				},
 				"required": ["name"],
@@ -210,11 +210,11 @@
 	description=(
 		"Fill a NAMED slot of a block that ALREADY EXISTS on the page — the component-specific slots "
 		"a frappe-ui component exposes beyond its default slot (e.g. a card's header/footer, a custom "
-		"prefix/suffix). Replaces that slot's content. Provide EITHER 'blocks' (a list of block "
-		"definitions in the add_block schema — they get their ids on the canvas, so bake any bindings/"
-		"events into their props) OR 'html' (a raw HTML string). For default-slot content, add children "
-		"with add_block instead; for a block you are CREATING this turn, put named slots in its add_block "
-		"'slots' field rather than calling this."
+		"prefix/suffix). Replaces that slot's content with 'blocks' (a list of block definitions in the "
+		"add_block schema — they get their ids on the canvas, so bake any bindings/events into their "
+		"props). A slot only holds blocks: for a text label use a TextBlock. For default-slot content, "
+		"add children with add_block instead; for a block you are CREATING this turn, put named slots in "
+		"its add_block 'slots' field rather than calling this."
 	),
 	parameters={
 		"type": "object",
@@ -229,12 +229,8 @@
 				"description": "Block definitions to place in the slot (add_block schema, recursively). Do NOT include ids.",
 				"items": {"type": "object"},
 			},
-			"html": {
-				"type": "string",
-				"description": "Raw HTML for the slot, as an alternative to 'blocks'.",
-			},
 		},
-		"required": ["component_id", "slot_name"],
+		"required": ["component_id", "slot_name", "blocks"],
 	},
 )
 
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 012c105ea..136686469 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -62,9 +62,9 @@ def compress(block: dict, depth: int = 0) -> dict:
 
 	@staticmethod
 	def _compress_slots(slots: dict, depth: int) -> dict:
-		"""Compact componentSlots to {slotName: [compact blocks] | "html string"}. Slot
-		children use the SAME compact shape as `c` (recurse), and the derived slotId/
-		parentBlockId are dropped (the client regenerates them). Empty slots are omitted."""
+		"""Compact componentSlots to {slotName: [compact blocks]}. Slot children use the SAME
+		compact shape as `c` (recurse), and the derived slotId/parentBlockId are dropped (the
+		client regenerates them). Empty slots are omitted."""
 		out = {}
 		for name, slot in slots.items():
 			if not isinstance(slot, dict):
@@ -74,24 +74,19 @@ def _compress_slots(slots: dict, depth: int) -> dict:
 				blocks = [BlockCodec.compress(b, depth + 1) for b in content if isinstance(b, dict)]
 				if blocks:
 					out[name] = blocks
-			elif isinstance(content, str) and content.strip():
-				out[name] = content
 		return out
 
 	@staticmethod
 	def _expand_slots(slots: dict) -> dict:
-		"""Expand compact slots ({slotName: [blocks] | "html"}) into componentSlots. slotId/
+		"""Expand compact slots ({slotName: [blocks]}) into componentSlots. slotId/
 		parentBlockId are backfilled by the frontend Block constructor (initializeSlots)."""
 		out = {}
 		if not isinstance(slots, dict):
 			return out
 		for name, content in slots.items():
-			if isinstance(content, list):
-				slot_content = [BlockCodec.expand(b) for b in content if isinstance(b, dict)]
-			elif isinstance(content, str):
-				slot_content = content
-			else:
+			if not isinstance(content, list):
 				continue
+			slot_content = [BlockCodec.expand(b) for b in content if isinstance(b, dict)]
 			out[name] = {"slotName": name, "slotContent": slot_content}
 		return out
 
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 85512b211..05441895c 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -123,7 +123,7 @@
 - "events": { }                 — event handlers, eventName → JS script, e.g. {"click":"counter.value++"}. Variables are refs (write with .value); the script also sees data sources and route/router.
 - "visibility": "expr"          — render the block only when a {{ }} expression is truthy, e.g. "{{ todos.data.length > 0 }}"
 - "c": [ ]                       — children list (array of block objects). These are the block's DEFAULT-slot content (e.g. a Dialog's body, a ContextMenu's target surface).
-- "slots": { }                  — NAMED slots only, for components that expose them: {"<slotName>": [ ...child block objects... ]} (each value is a block list in THIS same schema, or a raw HTML string). Default content goes in "c" — use "slots" only for a component's named slots. On an EXISTING block, fill a named slot with set_slot(component_id, slot_name, blocks) and drop a wrong one with remove_slot(component_id, slot_name).
+- "slots": { }                  — NAMED slots only, for components that expose them: {"<slotName>": [ ...child block objects... ]} (each value is a block list in THIS same schema — a slot holds blocks only, so use a TextBlock for a plain label). Default content goes in "c" — use "slots" only for a component's named slots. On an EXISTING block, fill a named slot with set_slot(component_id, slot_name, blocks) and drop a wrong one with remove_slot(component_id, slot_name).
   NAMED SLOTS RULE: use ONLY a component's real slot names — the ones listed after `# slots:` in its catalog entry below. NEVER invent a slot name (e.g. Sidebar's footer is called "footer-items", not "footer"); content placed in a slot the component doesn't declare silently does not render. If a component shows no `# slots:`, treat it as having none — use its props or default-slot "c".
 
 ROOT BLOCK — the page root is:
diff --git a/studio/build.py b/studio/build.py
index 83afcbc11..9a219dadd 100644
--- a/studio/build.py
+++ b/studio/build.py
@@ -180,9 +180,10 @@ def _add_block_components(self, block: dict) -> None:
 
 		if slots := block.get("componentSlots"):
 			for slot in slots.values():
-				if isinstance(slot.get("slotContent"), str):
+				content = slot.get("slotContent")
+				if not isinstance(content, list):
 					continue
-				for slot_child in slot.get("slotContent"):
+				for slot_child in content:
 					self._add_block_components(slot_child)
 
 	def _add_studio_components(self, block: dict):
diff --git a/studio/patches.txt b/studio/patches.txt
index 5c4b63bea..cf53f16c9 100644
--- a/studio/patches.txt
+++ b/studio/patches.txt
@@ -15,4 +15,5 @@ studio.studio.doctype.studio_page.patches.migrate_watchers_to_page_script
 studio.studio.doctype.studio_page.patches.migrate_espresso_color_tokens_v2
 studio.studio.doctype.studio_page.patches.migrate_text_size_tokens_v2
 studio.studio.doctype.studio_page.patches.migrate_event_actions_to_script
-studio.studio.doctype.studio_ai_session.patches.migrate_ai_session_messages_to_doctype
\ No newline at end of file
+studio.studio.doctype.studio_ai_session.patches.migrate_ai_session_messages_to_doctype
+studio.studio.doctype.studio_page.patches.migrate_slot_content_to_blocks
\ No newline at end of file
diff --git a/studio/studio/doctype/studio_app/test_studio_app.py b/studio/studio/doctype/studio_app/test_studio_app.py
index 9caeac22d..9c5f78b42 100644
--- a/studio/studio/doctype/studio_app/test_studio_app.py
+++ b/studio/studio/doctype/studio_app/test_studio_app.py
@@ -74,8 +74,8 @@ def test_extracts_components_from_slots(self):
 		self.assertIn("Dialog", builder.components)
 		self.assertIn("TextInput", builder.components)
 
-	def test_handles_string_slot_content(self):
-		"""String slot content should be gracefully skipped without errors."""
+	def test_handles_non_block_slot_content(self):
+		"""Legacy string slot content should be gracefully skipped without errors."""
 		app = make_studio_app(app_title="Str Slot App", app_name="str-slot-app")
 		blocks = json.dumps(
 			[
diff --git a/studio/studio/doctype/studio_page/patches/migrate_slot_content_to_blocks.py b/studio/studio/doctype/studio_page/patches/migrate_slot_content_to_blocks.py
new file mode 100644
index 000000000..d559d563c
--- /dev/null
+++ b/studio/studio/doctype/studio_page/patches/migrate_slot_content_to_blocks.py
@@ -0,0 +1,69 @@
+"""Slots now hold blocks only — string/HTML slot content is no longer rendered.
+
+Convert every leftover string into an equivalent block so existing pages keep their
+content: markup becomes an HTML block, plain text a TextBlock.
+"""
+
+import re
+
+import frappe
+
+HTML_PATTERN = re.compile(r"<[a-z][\s\S]*>", re.IGNORECASE)
+
+
+def execute():
+	pages = frappe.get_all("Studio Page", fields=["name", "blocks", "draft_blocks"])
+	for page in pages:
+		updates = {}
+		for field in ("blocks", "draft_blocks"):
+			blocks = frappe.parse_json(page.get(field) or "[]")
+			if blocks and migrate_blocks(blocks):
+				updates[field] = frappe.as_json(blocks)
+		if updates:
+			frappe.get_doc("Studio Page", page.name).update(updates).save()
+
+	components = frappe.get_all("Studio Component", fields=["name", "block"])
+	for component in components:
+		block = frappe.parse_json(component.get("block") or "{}")
+		if block and migrate_blocks([block]):
+			frappe.get_doc("Studio Component", component.name).update({"block": frappe.as_json(block)}).save()
+
+
+def migrate_blocks(blocks) -> bool:
+	"""Rewrite string slot content in place. Returns True if anything changed."""
+	migrated = False
+	for block in blocks:
+		if not isinstance(block, dict):
+			continue
+
+		for slot_name, slot in (block.get("componentSlots") or {}).items():
+			content = slot.get("slotContent") if isinstance(slot, dict) else None
+			if isinstance(content, list):
+				migrated = migrate_blocks(content) or migrated
+			elif isinstance(content, str):
+				slot["slotContent"] = as_blocks(content, slot_name)
+				migrated = True
+
+		migrated = migrate_blocks(block.get("children") or []) or migrated
+
+	return migrated
+
+
+def as_blocks(content: str, slot_name: str) -> list[dict]:
+	if not content.strip():
+		return []
+
+	if HTML_PATTERN.search(content):
+		component_name, props = "HTML", {"html": content}
+	else:
+		component_name, props = "TextBlock", {"text": content, "tag": "p"}
+
+	return [
+		{
+			"componentId": f"{component_name}-{frappe.generate_hash(length=9)}",
+			"componentName": component_name,
+			"componentProps": props,
+			"children": [],
+			"parentSlotName": slot_name,
+		}
+	]
diff --git a/studio/studio/doctype/studio_page/studio_page.py b/studio/studio/doctype/studio_page/studio_page.py
index 8979c24d4..b65a076fc 100644
--- a/studio/studio/doctype/studio_page/studio_page.py
+++ b/studio/studio/doctype/studio_page/studio_page.py
@@ -164,9 +164,10 @@ def add_component(block):
 
 			if slots := block.get("componentSlots"):
 				for slot in slots.values():
-					if isinstance(slot.get("slotContent"), str):
+					content = slot.get("slotContent")
+					if not isinstance(content, list):
 						continue
-					for slot_child in slot.get("slotContent"):
+					for slot_child in content:
 						add_component(slot_child)
 
 		def get_root_block(blocks):

From e65a168288430ed8ac166e2fef7e7b36a29334f3 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 22 Jul 2026 11:40:08 +0530
Subject: [PATCH 03/11] feat: convert slot selector to switches

---
 frontend/components.d.ts                      |   1 +
 .../src/components/ComponentProperties.vue    | 140 +++++++++++++-----
 2 files changed, 107 insertions(+), 34 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 36cdb7d61..acb2b34fe 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -74,6 +74,7 @@ declare module 'vue' {
     LucideChevronUp: typeof import('~icons/lucide/chevron-up')['default']
     LucideFlaskConical: typeof import('~icons/lucide/flask-conical')['default']
     LucidePaperclip: typeof import('~icons/lucide/paperclip')['default']
+    LucidePlus: typeof import('~icons/lucide/plus')['default']
     LucideRepeat: typeof import('~icons/lucide/repeat')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     MarkdownEditor: typeof import('./src/components/AppLayout/MarkdownEditor.vue')['default']
diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index 84f22676f..77a66d19c 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -10,32 +10,51 @@
 
 			<!-- slots -->
 			<SectionContainer title="Slots" v-show="filteredSections.includes('slots') && !multipleBlocksSelected">
-				<template #actions>
-					<Combobox
-						:options="availableSlots"
-						@update:modelValue="(slot: string) => block?.addSlot(slot)"
-						align="end"
-					>
-						<template #trigger="{ togglePopover }">
-							<Button @click="togglePopover" size="sm" variant="ghost" icon="lucide-plus" />
-						</template>
-					</Combobox>
-				</template>
-
-				<div class="flex flex-col gap-2" v-if="!isObjectEmpty(block?.componentSlots)">
+				<div class="flex flex-col gap-1">
 					<div
-						v-for="(slot, name) in block?.componentSlots"
-						:key="name"
-						class="flex w-full items-center justify-between gap-2"
+						v-for="slotName in slotNames"
+						:key="slotName"
+						class="flex w-full cursor-pointer items-center justify-between gap-2 rounded px-1 py-0.5 hover:bg-surface-gray-2"
+						@click="selectSlot(slotName)"
 					>
-						<span class="text-base text-ink-gray-8">#{{ name }}</span>
-						<div class="flex items-center gap-2">
-							<span class="text-sm text-ink-gray-5">{{ getSlotSummary(slot) }}</span>
-							<Button variant="subtle" size="sm" icon="lucide-x" @click="block?.removeSlot(name)" />
+						<span
+							class="truncate text-base"
+							:class="isDynamicSlot(slotName) ? 'italic text-ink-gray-5' : 'text-ink-gray-5'"
+							:title="isDynamicSlot(slotName) ? 'Studio cannot verify this slot name' : slotName"
+						>
+							{{ slotName }}
+						</span>
+						<div class="flex shrink-0 items-center gap-2">
+							<span class="text-sm text-ink-gray-5">{{ getSlotSummary(slotName) }}</span>
+							<Switch
+								size="sm"
+								:modelValue="block?.getSlot(slotName) !== undefined"
+								@update:modelValue="toggleSlot(slotName)"
+								@click.stop
+							/>
 						</div>
 					</div>
+
+					<TextInput
+						v-if="addingDynamicSlot"
+						ref="dynamicSlotInput"
+						size="sm"
+						variant="ghost"
+						placeholder="Slot name"
+						v-model="dynamicSlotName"
+						@keydown.enter="addDynamicSlot"
+						@keydown.esc="cancelAddingDynamicSlot"
+						@blur="addDynamicSlot"
+					/>
+					<button
+						v-else
+						class="flex items-center gap-1 px-1 py-0.5 text-sm text-ink-gray-4 hover:text-ink-gray-6"
+						@click="startAddingDynamicSlot"
+					>
+						<LucidePlus class="h-3 w-3" />
+						Dynamic slot
+					</button>
 				</div>
-				<EmptyState v-else message="No slots added" />
 			</SectionContainer>
 
 			<!-- Visibility Condition -->
@@ -83,27 +102,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue"
-import { Combobox } from "frappe-ui"
+import { ref, computed, nextTick, watchEffect } from "vue"
+import { Switch, TextInput } from "frappe-ui"
 import Block from "@/utils/block"
 
 import { getComponentSlots } from "@/utils/components"
 import PropsEditor from "@/components/PropsEditor.vue"
 import ObjectEditor from "@/components/ObjectEditor.vue"
 import EmptyState from "@/components/EmptyState.vue"
-import type { Slot } from "@/types"
-import { isObjectEmpty } from "@/utils/helpers"
+import { confirm, isObjectEmpty } from "@/utils/helpers"
 import Code from "@/components/Code.vue"
 import blockController from "@/utils/blockController"
 import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import type { CompletionContext } from "@codemirror/autocomplete"
 import useStudioStore from "@/stores/studioStore"
+import useCanvasStore from "@/stores/canvasStore"
+import LucidePlus from "~icons/lucide/plus"
 
 const props = defineProps<{
 	block?: Block
 }>()
 const getCompletions = useStudioCompletions()
 const studioStore = useStudioStore()
+const canvasStore = useCanvasStore()
 
 const multipleBlocksSelected = computed(() => blockController.multipleBlocksSelected())
 const mixedTypeSelection = computed(
@@ -113,32 +134,83 @@ const mixedTypeSelection = computed(
 const attributesEditor = ref<InstanceType<typeof ObjectEditor> | null>(null)
 const propsEditor = ref<InstanceType<typeof PropsEditor> | null>(null)
 
-const componentSlots = ref<string[]>([])
-const availableSlots = computed(() => {
-	return componentSlots.value?.filter((slot) => !(slot in (props.block?.componentSlots || {})))
+// slots the component declares, plus any dynamic ones already added to this block
+const declaredSlots = ref<string[]>([])
+const slotNames = computed(() => {
+	const added = Object.keys(props.block?.componentSlots || {})
+	return [...declaredSlots.value, ...added.filter((name) => !declaredSlots.value.includes(name))]
 })
+
 watchEffect(async () => {
 	if (!props.block || props.block.isRoot() || props.block.isContainer()) {
-		componentSlots.value = []
+		declaredSlots.value = []
 		return
 	}
 	const slots = await getComponentSlots(props.block.componentName, props.block.isCustomVueComponent)
-	componentSlots.value = slots.map((slot) => slot.name)
+	declaredSlots.value = slots.map((slot) => slot.name)
 })
 
-const getSlotSummary = (slot: Slot) => {
-	const count = slot.slotContent.length
-	if (!count) return "Empty"
+// a slot named at runtime by the component (e.g. Select's per-option slots) cannot be verified
+const isDynamicSlot = (slotName: string) => !declaredSlots.value.includes(slotName)
+
+const getSlotSummary = (slotName: string) => {
+	const count = props.block?.getSlot(slotName)?.slotContent.length
+	if (count === undefined) return ""
+	if (!count) return ""
 	return count === 1 ? "1 block" : `${count} blocks`
 }
 
+// the switch controls whether the slot exists — and so whether it is droppable on the canvas
+const toggleSlot = async (slotName: string) => {
+	const slot = props.block?.getSlot(slotName)
+	if (!slot) return props.block?.addSlot(slotName)
+
+	const count = slot.slotContent.length
+	if (
+		count &&
+		!(await confirm(`#${slotName} has ${count === 1 ? "1 block" : `${count} blocks`}. Remove it?`))
+	) {
+		return
+	}
+	props.block?.removeSlot(slotName)
+}
+
+const selectSlot = (slotName: string) => {
+	const slot = props.block?.getSlot(slotName)
+	if (slot) canvasStore.activeCanvas?.selectSlot(slot)
+}
+
+const addingDynamicSlot = ref(false)
+const dynamicSlotName = ref("")
+const dynamicSlotInput = ref<{ el: HTMLInputElement } | null>(null)
+
+const startAddingDynamicSlot = async () => {
+	addingDynamicSlot.value = true
+	await nextTick()
+	dynamicSlotInput.value?.el?.focus()
+}
+
+const cancelAddingDynamicSlot = () => {
+	dynamicSlotName.value = ""
+	addingDynamicSlot.value = false
+}
+
+const addDynamicSlot = () => {
+	const slotName = dynamicSlotName.value.trim()
+	if (slotName && !props.block?.getSlot(slotName)) {
+		props.block?.addSlot(slotName)
+	}
+	dynamicSlotName.value = ""
+	addingDynamicSlot.value = false
+}
+
 const sections: Record<string, { condition?: any; collapsed?: any; searchKeyWords: string }> = {
 	props: {
 		condition: computed(() => !props.block?.isContainer()),
 		searchKeyWords: "Props, Properties, Inputs",
 	},
 	slots: {
-		condition: computed(() => !isObjectEmpty(componentSlots.value)),
+		condition: computed(() => slotNames.value.length > 0),
 		searchKeyWords: "Slots, Slot, Component Slots, Component Slot, Customize Template",
 	},
 	visibility: {

From c49048577e30056b582a70a030d90e15545a6706 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 15:04:36 +0530
Subject: [PATCH 04/11] fix: go back to combobox slots instead of switches

---
 frontend/components.d.ts                      |   1 +
 .../src/components/ComponentProperties.vue    | 132 +++++++-----------
 2 files changed, 53 insertions(+), 80 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index acb2b34fe..2cfb1f020 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -76,6 +76,7 @@ declare module 'vue' {
     LucidePaperclip: typeof import('~icons/lucide/paperclip')['default']
     LucidePlus: typeof import('~icons/lucide/plus')['default']
     LucideRepeat: typeof import('~icons/lucide/repeat')['default']
+    LucideX: typeof import('~icons/lucide/x')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     MarkdownEditor: typeof import('./src/components/AppLayout/MarkdownEditor.vue')['default']
     MissingComponent: typeof import('./src/components/MissingComponent.vue')['default']
diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index 77a66d19c..da2dc01c4 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -10,51 +10,40 @@
 
 			<!-- slots -->
 			<SectionContainer title="Slots" v-show="filteredSections.includes('slots') && !multipleBlocksSelected">
-				<div class="flex flex-col gap-1">
+				<template #actions>
+					<Combobox
+						:options="availableSlotOptions"
+						@update:modelValue="(slot: string) => addSlot(slot)"
+						align="end"
+					>
+						<template #trigger="{ togglePopover }">
+							<Button @click="togglePopover" size="sm" variant="ghost" icon="lucide-plus" />
+						</template>
+					</Combobox>
+				</template>
+
+				<div v-if="!isObjectEmpty(block?.componentSlots)" class="flex flex-col gap-1">
 					<div
-						v-for="slotName in slotNames"
+						v-for="(slot, slotName) in block?.componentSlots"
 						:key="slotName"
-						class="flex w-full cursor-pointer items-center justify-between gap-2 rounded px-1 py-0.5 hover:bg-surface-gray-2"
+						class="flex w-full cursor-pointer items-center justify-between gap-1 rounded py-0.5"
 						@click="selectSlot(slotName)"
 					>
-						<span
-							class="truncate text-base"
-							:class="isDynamicSlot(slotName) ? 'italic text-ink-gray-5' : 'text-ink-gray-5'"
-							:title="isDynamicSlot(slotName) ? 'Studio cannot verify this slot name' : slotName"
-						>
-							{{ slotName }}
-						</span>
+						<span class="truncate text-sm text-ink-gray-5">{{ slotName }}</span>
 						<div class="flex shrink-0 items-center gap-2">
-							<span class="text-sm text-ink-gray-5">{{ getSlotSummary(slotName) }}</span>
-							<Switch
-								size="sm"
-								:modelValue="block?.getSlot(slotName) !== undefined"
-								@update:modelValue="toggleSlot(slotName)"
-								@click.stop
-							/>
+							<Badge
+								theme="gray"
+								variant="outline"
+								class="text-sm text-ink-gray-5"
+								v-if="getSlotSummary(slotName)"
+							>
+								{{ getSlotSummary(slotName) }}
+							</Badge>
+							<Button variant="ghost" size="sm" icon="lucide-x" @click.stop="removeSlot(slotName)" />
 						</div>
 					</div>
-
-					<TextInput
-						v-if="addingDynamicSlot"
-						ref="dynamicSlotInput"
-						size="sm"
-						variant="ghost"
-						placeholder="Slot name"
-						v-model="dynamicSlotName"
-						@keydown.enter="addDynamicSlot"
-						@keydown.esc="cancelAddingDynamicSlot"
-						@blur="addDynamicSlot"
-					/>
-					<button
-						v-else
-						class="flex items-center gap-1 px-1 py-0.5 text-sm text-ink-gray-4 hover:text-ink-gray-6"
-						@click="startAddingDynamicSlot"
-					>
-						<LucidePlus class="h-3 w-3" />
-						Dynamic slot
-					</button>
 				</div>
+				<EmptyState v-else message="No slots added" />
 			</SectionContainer>
 
 			<!-- Visibility Condition -->
@@ -102,10 +91,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, watchEffect } from "vue"
-import { Switch, TextInput } from "frappe-ui"
+import { ref, computed, watchEffect } from "vue"
 import Block from "@/utils/block"
-
 import { getComponentSlots } from "@/utils/components"
 import PropsEditor from "@/components/PropsEditor.vue"
 import ObjectEditor from "@/components/ObjectEditor.vue"
@@ -134,12 +121,7 @@ const mixedTypeSelection = computed(
 const attributesEditor = ref<InstanceType<typeof ObjectEditor> | null>(null)
 const propsEditor = ref<InstanceType<typeof PropsEditor> | null>(null)
 
-// slots the component declares, plus any dynamic ones already added to this block
 const declaredSlots = ref<string[]>([])
-const slotNames = computed(() => {
-	const added = Object.keys(props.block?.componentSlots || {})
-	return [...declaredSlots.value, ...added.filter((name) => !declaredSlots.value.includes(name))]
-})
 
 watchEffect(async () => {
 	if (!props.block || props.block.isRoot() || props.block.isContainer()) {
@@ -150,25 +132,39 @@ watchEffect(async () => {
 	declaredSlots.value = slots.map((slot) => slot.name)
 })
 
-// a slot named at runtime by the component (e.g. Select's per-option slots) cannot be verified
-const isDynamicSlot = (slotName: string) => !declaredSlots.value.includes(slotName)
+type SlotOption = { label: string; value: string }
+// declared slots not yet added to the block
+const availableSlotOptions = computed<SlotOption[]>(() =>
+	declaredSlots.value
+		.filter((name) => !props.block?.getSlot(name))
+		.map((name) => ({ label: name, value: name })),
+)
+
+// a typed name (for a dynamic/runtime slot) can be added when it isn't already a slot
+const slotQuery = ref("")
+const canAddTypedSlot = computed(() => {
+	const name = slotQuery.value.trim()
+	return Boolean(name) && !props.block?.getSlot(name)
+})
+
+const addSlot = (slotName: string) => {
+	if (slotName && !props.block?.getSlot(slotName)) {
+		props.block?.addSlot(slotName)
+	}
+	slotQuery.value = ""
+}
 
 const getSlotSummary = (slotName: string) => {
 	const count = props.block?.getSlot(slotName)?.slotContent.length
-	if (count === undefined) return ""
 	if (!count) return ""
 	return count === 1 ? "1 block" : `${count} blocks`
 }
 
-// the switch controls whether the slot exists — and so whether it is droppable on the canvas
-const toggleSlot = async (slotName: string) => {
-	const slot = props.block?.getSlot(slotName)
-	if (!slot) return props.block?.addSlot(slotName)
-
-	const count = slot.slotContent.length
+const removeSlot = async (slotName: string) => {
+	const count = props.block?.getSlot(slotName)?.slotContent.length || 0
 	if (
 		count &&
-		!(await confirm(`#${slotName} has ${count === 1 ? "1 block" : `${count} blocks`}. Remove it?`))
+		!(await confirm(`${slotName} slot has ${count === 1 ? "1 block" : `${count} blocks`}. Remove it?`))
 	) {
 		return
 	}
@@ -180,37 +176,13 @@ const selectSlot = (slotName: string) => {
 	if (slot) canvasStore.activeCanvas?.selectSlot(slot)
 }
 
-const addingDynamicSlot = ref(false)
-const dynamicSlotName = ref("")
-const dynamicSlotInput = ref<{ el: HTMLInputElement } | null>(null)
-
-const startAddingDynamicSlot = async () => {
-	addingDynamicSlot.value = true
-	await nextTick()
-	dynamicSlotInput.value?.el?.focus()
-}
-
-const cancelAddingDynamicSlot = () => {
-	dynamicSlotName.value = ""
-	addingDynamicSlot.value = false
-}
-
-const addDynamicSlot = () => {
-	const slotName = dynamicSlotName.value.trim()
-	if (slotName && !props.block?.getSlot(slotName)) {
-		props.block?.addSlot(slotName)
-	}
-	dynamicSlotName.value = ""
-	addingDynamicSlot.value = false
-}
-
 const sections: Record<string, { condition?: any; collapsed?: any; searchKeyWords: string }> = {
 	props: {
 		condition: computed(() => !props.block?.isContainer()),
 		searchKeyWords: "Props, Properties, Inputs",
 	},
 	slots: {
-		condition: computed(() => slotNames.value.length > 0),
+		condition: computed(() => declaredSlots.value.length > 0 || !isObjectEmpty(props.block?.componentSlots)),
 		searchKeyWords: "Slots, Slot, Component Slots, Component Slot, Customize Template",
 	},
 	visibility: {

From 559d608d83ec16b3ec6ca0231f8f2e207743f1d9 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 15:05:06 +0530
Subject: [PATCH 05/11] fix: wire dynamic slot addition in combobox

---
 frontend/src/components/ComponentProperties.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index da2dc01c4..a788a8c07 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -13,6 +13,8 @@
 				<template #actions>
 					<Combobox
 						:options="availableSlotOptions"
+						:allowCustomValue="true"
+						placeholder="Search or type a dynamic slot name"
 						@update:modelValue="(slot: string) => addSlot(slot)"
 						align="end"
 					>
@@ -104,7 +106,6 @@ import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import type { CompletionContext } from "@codemirror/autocomplete"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
-import LucidePlus from "~icons/lucide/plus"
 
 const props = defineProps<{
 	block?: Block
@@ -133,25 +134,18 @@ watchEffect(async () => {
 })
 
 type SlotOption = { label: string; value: string }
-// declared slots not yet added to the block
+// declared slots not yet added; typing a name relies on the combobox's allowCustomValue to add a dynamic one
 const availableSlotOptions = computed<SlotOption[]>(() =>
 	declaredSlots.value
 		.filter((name) => !props.block?.getSlot(name))
 		.map((name) => ({ label: name, value: name })),
 )
 
-// a typed name (for a dynamic/runtime slot) can be added when it isn't already a slot
-const slotQuery = ref("")
-const canAddTypedSlot = computed(() => {
-	const name = slotQuery.value.trim()
-	return Boolean(name) && !props.block?.getSlot(name)
-})
-
 const addSlot = (slotName: string) => {
+	slotName = slotName?.trim()
 	if (slotName && !props.block?.getSlot(slotName)) {
 		props.block?.addSlot(slotName)
 	}
-	slotQuery.value = ""
 }
 
 const getSlotSummary = (slotName: string) => {

From 96d2d61c3d29d2de301c627273edf418041d9c19 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 15:28:11 +0530
Subject: [PATCH 06/11] fix: slot remains selected in combobox even after
 removal

---
 frontend/src/components/ComponentProperties.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index a788a8c07..bd9aab772 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -12,10 +12,11 @@
 			<SectionContainer title="Slots" v-show="filteredSections.includes('slots') && !multipleBlocksSelected">
 				<template #actions>
 					<Combobox
+						:key="Object.keys(block?.componentSlots || {}).length"
 						:options="availableSlotOptions"
 						:allowCustomValue="true"
 						placeholder="Search or type a dynamic slot name"
-						@update:modelValue="(slot: string) => addSlot(slot)"
+						@update:modelValue="(slotName: string) => addSlot(slotName)"
 						align="end"
 					>
 						<template #trigger="{ togglePopover }">
@@ -134,7 +135,6 @@ watchEffect(async () => {
 })
 
 type SlotOption = { label: string; value: string }
-// declared slots not yet added; typing a name relies on the combobox's allowCustomValue to add a dynamic one
 const availableSlotOptions = computed<SlotOption[]>(() =>
 	declaredSlots.value
 		.filter((name) => !props.block?.getSlot(name))
@@ -142,6 +142,7 @@ const availableSlotOptions = computed<SlotOption[]>(() =>
 )
 
 const addSlot = (slotName: string) => {
+	if (!slotName) return
 	slotName = slotName?.trim()
 	if (slotName && !props.block?.getSlot(slotName)) {
 		props.block?.addSlot(slotName)

From f40bc2a8479b4453d047e92de6e9c3b821512dd6 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 15:39:49 +0530
Subject: [PATCH 07/11] fix: show slot scope at the beginning of dynamic value
 selector

---
 .../src/components/DynamicValueSelector.vue   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/DynamicValueSelector.vue b/frontend/src/components/DynamicValueSelector.vue
index a75dc4623..c539534f7 100644
--- a/frontend/src/components/DynamicValueSelector.vue
+++ b/frontend/src/components/DynamicValueSelector.vue
@@ -105,6 +105,16 @@ const dynamicValueOptions = computed(() => {
 				items: store.variableOptions,
 			})
 		}
+
+		// Scoped slot props exposed by the enclosing component (Repeater's dataItem, List's item, ...)
+		const slotScopeOptions = getSlotScopeOptions(props.block?.slotScope)
+		if (slotScopeOptions.length) {
+			groups.push({
+				group: "Slot Scope",
+				items: slotScopeOptions,
+			})
+		}
+
 		// Data Sources group
 		const dataSourceOptions = Object.keys(codeStore.resources).map((resourceName) => {
 			const completion =
@@ -142,15 +152,6 @@ const dynamicValueOptions = computed(() => {
 		}
 	}
 
-	// Scoped slot props exposed by the enclosing component (Repeater's dataItem, List's item, ...)
-	const slotScopeOptions = getSlotScopeOptions(props.block?.slotScope)
-	if (slotScopeOptions.length) {
-		groups.push({
-			group: "Slot Scope",
-			items: slotScopeOptions,
-		})
-	}
-
 	return groups
 })
 

From b3b2d954ea3e16c81647260525bf54557579efa4 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 16:01:32 +0530
Subject: [PATCH 08/11] fix: show slot scope as repeater scope when inside a
 repeater

---
 frontend/src/components/DynamicValueSelector.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DynamicValueSelector.vue b/frontend/src/components/DynamicValueSelector.vue
index c539534f7..d917036f6 100644
--- a/frontend/src/components/DynamicValueSelector.vue
+++ b/frontend/src/components/DynamicValueSelector.vue
@@ -110,7 +110,7 @@ const dynamicValueOptions = computed(() => {
 		const slotScopeOptions = getSlotScopeOptions(props.block?.slotScope)
 		if (slotScopeOptions.length) {
 			groups.push({
-				group: "Slot Scope",
+				group: isInsideRepeater.value ? "Repeater Scope" : "Slot Scope",
 				items: slotScopeOptions,
 			})
 		}
@@ -155,6 +155,16 @@ const dynamicValueOptions = computed(() => {
 	return groups
 })
 
+const isInsideRepeater = computed(() => {
+	if (props.block?.isRepeated()) return true
+	let current = props.block?.getParentBlock() || null
+	while (current) {
+		if (current.isRepeater()) return true
+		current = current.getParentBlock()
+	}
+	return false
+})
+
 function getSlotScopeOptions(slotScope?: SlotScope | null): VariableOption[] {
 	return Object.entries(slotScope || {}).flatMap(([name, value]) => {
 		if (value && typeof value === "object" && !Array.isArray(value)) {

From d7508971d0dd6fd435b7ca9d6d2a1641b9d474f9 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 16:13:21 +0530
Subject: [PATCH 09/11] fix: show repeater scope instead of slot scope in
 autocompletions too

---
 frontend/src/components/DynamicValueSelector.vue | 12 +-----------
 frontend/src/utils/block.ts                      | 12 +++++++++---
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/DynamicValueSelector.vue b/frontend/src/components/DynamicValueSelector.vue
index d917036f6..b84c7abfc 100644
--- a/frontend/src/components/DynamicValueSelector.vue
+++ b/frontend/src/components/DynamicValueSelector.vue
@@ -110,7 +110,7 @@ const dynamicValueOptions = computed(() => {
 		const slotScopeOptions = getSlotScopeOptions(props.block?.slotScope)
 		if (slotScopeOptions.length) {
 			groups.push({
-				group: isInsideRepeater.value ? "Repeater Scope" : "Slot Scope",
+				group: props.block?.isRepeated() ? "Repeater Scope" : "Slot Scope",
 				items: slotScopeOptions,
 			})
 		}
@@ -155,16 +155,6 @@ const dynamicValueOptions = computed(() => {
 	return groups
 })
 
-const isInsideRepeater = computed(() => {
-	if (props.block?.isRepeated()) return true
-	let current = props.block?.getParentBlock() || null
-	while (current) {
-		if (current.isRepeater()) return true
-		current = current.getParentBlock()
-	}
-	return false
-})
-
 function getSlotScopeOptions(slotScope?: SlotScope | null): VariableOption[] {
 	return Object.entries(slotScope || {}).flatMap(([name, value]) => {
 		if (value && typeof value === "object" && !Array.isArray(value)) {
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index c5e47ac3e..60899c26e 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -698,8 +698,13 @@ class Block implements BlockOptions {
 		return this.componentName === "Repeater"
 	}
 
-	isRepeated() {
-		return Boolean(this.getParentBlock()?.isRepeater())
+	isRepeated(): boolean {
+		let current = this.getParentBlock()
+		while (current) {
+			if (current.isRepeater()) return true
+			current = current.getParentBlock()
+		}
+		return false
 	}
 
 	// scoped slots
@@ -727,12 +732,13 @@ class Block implements BlockOptions {
 	}
 
 	getSlotScopeCompletions(): CompletionSource[] {
+		const detail = this.isRepeated() ? "Repeater Scope" : "Slot Scope"
 		return Object.entries(this.slotScope || {}).map(([name, value]) => ({
 			item: value,
 			completion: {
 				label: name,
 				type: "data",
-				detail: "Slot Scope",
+				detail,
 			},
 		}))
 	}

From 338140f63a06f3ab57b8d714a4e7db6c22eaa31e Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 23 Jul 2026 18:05:48 +0530
Subject: [PATCH 10/11] fix: show icon for differentiating between standard vs
 dynamic slot

---
 frontend/src/components/ComponentProperties.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index bd9aab772..594005972 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -32,7 +32,17 @@
 						class="flex w-full cursor-pointer items-center justify-between gap-1 rounded py-0.5"
 						@click="selectSlot(slotName)"
 					>
-						<span class="truncate text-sm text-ink-gray-5">{{ slotName }}</span>
+						<div class="flex min-w-0 items-center gap-1.5">
+							<Tooltip :hoverDelay="0" :text="isDynamicSlot(slotName) ? 'Dynamic slot' : 'Standard slot'">
+								<span class="inline-flex shrink-0">
+									<component
+										:is="isDynamicSlot(slotName) ? LucideZap : LucideHash"
+										class="size-3 text-ink-gray-4"
+									/>
+								</span>
+							</Tooltip>
+							<span class="truncate text-sm text-ink-gray-5">{{ slotName }}</span>
+						</div>
 						<div class="flex shrink-0 items-center gap-2">
 							<Badge
 								theme="gray"
@@ -108,6 +118,9 @@ import type { CompletionContext } from "@codemirror/autocomplete"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 
+import LucideZap from "~icons/lucide/zap"
+import LucideHash from "~icons/lucide/hash"
+
 const props = defineProps<{
 	block?: Block
 }>()
@@ -149,6 +162,8 @@ const addSlot = (slotName: string) => {
 	}
 }
 
+const isDynamicSlot = (slotName: string) => !declaredSlots.value.includes(slotName)
+
 const getSlotSummary = (slotName: string) => {
 	const count = props.block?.getSlot(slotName)?.slotContent.length
 	if (!count) return ""

From 6a82a0d2134498394c5d3e1ce2af1403a696ce20 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 24 Jul 2026 16:24:28 +0530
Subject: [PATCH 11/11] fix: enlarge empty slot overlay space

---
 frontend/src/components/ComponentEditor.vue | 5 ++---
 frontend/src/components/StudioComponent.vue | 5 +++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ComponentEditor.vue b/frontend/src/components/ComponentEditor.vue
index 874b5c82f..82674f72d 100644
--- a/frontend/src/components/ComponentEditor.vue
+++ b/frontend/src/components/ComponentEditor.vue
@@ -46,9 +46,8 @@
 				class="pointer-events-none fixed ring-2 ring-inset ring-outline-purple-5"
 				:class="isSlotSelected(slot.slotId) ? 'opacity-100' : 'opacity-65'"
 				:style="{
-					// set min height and width so that slots without content are visible
-					minWidth: `calc(${12}px * ${canvasProps.scale})`,
-					minHeight: `calc(${12}px * ${canvasProps.scale})`,
+					minWidth: `calc(${20}px * ${canvasProps.scale})`,
+					minHeight: `calc(${20}px * ${canvasProps.scale})`,
 				}"
 			>
 				<span
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index b66778e68..cfd5db463 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -48,10 +48,11 @@
 						:data-component-id="block.componentId"
 					/>
 				</SlotScopeProvider>
-				<!-- drop target for an empty slot -->
+				<!-- drop target for an empty slot: fill the slot's available space so the
+				     overlay spans it (w-full for width; grow/self-stretch fill flex slot areas) -->
 				<div
 					v-else
-					:class="[slotClasses, 'min-h-5 w-full']"
+					:class="[slotClasses, 'min-h-5 w-full grow self-stretch']"
 					:data-slot-id="slot.slotId"
 					:data-slot-name="slotName"
 					:data-component-id="block.componentId"