From 5ad3c838d8bd90c760fbc716cf0eaf20c12725c4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 4 Sep 2025 13:01:12 +0530
Subject: [PATCH 001/547] fix: Remove extra spaces and variables formatting

---
 builder/templates/generators/webpage.html | 48 +++++++++--------------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/builder/templates/generators/webpage.html b/builder/templates/generators/webpage.html
index c4a174b47..b5973693b 100644
--- a/builder/templates/generators/webpage.html
+++ b/builder/templates/generators/webpage.html
@@ -23,35 +23,25 @@
 	{% for (font, options) in fonts.items() %}<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font }}:wght@{{ ";".join(options.weights) }}&display=swap" media="screen">{% endfor %}
 	{{ style }}
 	{%- if css_variables -%}
-	<style>
-		:root {
-			{% for key, value in css_variables.items() %}
-			{{ key }}: {{ value }};
-			{% endfor %}
-		}
-		{%- if dark_mode_css_variables -%}
-		@media (prefers-color-scheme: dark) {
-			:root {
-				{% for key, value in dark_mode_css_variables.items() %}
-				{{ key }}: {{ value }};
-				{% endfor %}
-			}
-		}
-		{%- endif -%}
-		{%- if preview -%}
-			[data-prefers-color-scheme="dark"] {
-				{% for key, value in dark_mode_css_variables.items() %}
-				{{ key }}: {{ value }};
-				{% endfor %}
-			}
-			{%- if dark_mode_css_variables -%}
-			[data-prefers-color-scheme="light"] {
-				{% for key, value in css_variables.items() %}
-				{{ key }}: {{ value }};
-				{% endfor %}
-			}
-			{%- endif -%}
-		{%- endif -%}
+	<style>:root {
+	{% for key, value in css_variables.items() %}{{ key }}: {{ value }};{% endfor %}
+	}
+	{%- if dark_mode_css_variables -%}
+	@media (prefers-color-scheme: dark) {:root {
+	{% for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};{% endfor %}
+	}
+	}
+	{%- endif -%}
+	{%- if preview -%}
+	[data-prefers-color-scheme="dark"] {
+	{% for key, value in dark_mode_css_variables.items() %}{{ key }}: {{ value }};{% endfor %}
+	}
+	{%- if dark_mode_css_variables -%}
+	[data-prefers-color-scheme="light"] {
+	{% for key, value in css_variables.items() %}{{ key }}: {{ value }};{% endfor %}
+	}
+	{%- endif -%}
+	{%- endif -%}
 	</style>
 	{%- endif -%}
 	{%- if custom_fonts -%}

From 46c8697ba8b8e62d66c4b2beece5f00d41fe0711 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 5 Sep 2025 00:51:15 +0530
Subject: [PATCH 002/547] feat: [Init]System to export & import standard
 Builder Page

---
 builder/api.py                                |  74 ++++++-
 .../doctype/builder_page/builder_page.json    |  25 ++-
 .../doctype/builder_page/builder_page.py      | 189 ++++++++++++++++--
 builder/utils.py                              | 187 ++++++++++++++++-
 frontend/components.d.ts                      |   2 +
 frontend/src/components/MainMenu.vue          |  17 +-
 .../src/components/Modals/ExportPageModal.vue | 151 ++++++++++++++
 .../Modals/ImportStandardPageModal.vue        | 165 +++++++++++++++
 .../src/components/Modals/VariableManager.vue |   1 -
 frontend/src/pages/PageBuilderDashboard.vue   |  34 ++--
 frontend/src/stores/pageStore.ts              |  26 +++
 frontend/src/types/Builder/BuilderPage.ts     |   6 +-
 12 files changed, 819 insertions(+), 58 deletions(-)
 create mode 100644 frontend/src/components/Modals/ExportPageModal.vue
 create mode 100644 frontend/src/components/Modals/ImportStandardPageModal.vue

diff --git a/builder/api.py b/builder/api.py
index 8cb7c8820..df9fd6abb 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -95,7 +95,7 @@ def upload_builder_asset():
 
 	image_file = upload_file()
 	if image_file.file_url.endswith((".png", ".jpeg", ".jpg")) and frappe.get_cached_value(
-		"Builder Settings", None, "auto_convert_images_to_webp"
+		"Builder Settings", "Builder Settings", "auto_convert_images_to_webp"
 	):
 		convert_to_webp(file_doc=image_file)
 	return image_file
@@ -171,6 +171,7 @@ def handle_image_from_url(image_url):
 				return update_file_doc_with_webp(file_doc, image, extn)
 		return file_doc.file_url
 
+	image_url = image_url or ""
 	if image_url.startswith("/files"):
 		image, filename, extn = get_local_image(image_url)
 		if can_convert_image(extn):
@@ -297,3 +298,74 @@ def get_overall_analytics(
 		to_date=to_date,
 		route_filter_type=route_filter_type,
 	)
+
+
+@frappe.whitelist()
+@redis_cache()
+def get_apps_for_export():
+	"""Get list of apps where standard pages can be exported"""
+	installed_apps = frappe.get_all_apps()
+	apps = []
+	for app in installed_apps:
+		try:
+			app_hooks = frappe.get_hooks(app_name=app)
+			apps.append(
+				{
+					"name": app,
+					"title": app_hooks.get("app_title", [app])[0],
+				}
+			)
+		except Exception:
+			pass
+	return apps
+
+
+@frappe.whitelist()
+def export_page_as_standard(page_name, target_app="builder", export_name=None):
+	from builder.builder.doctype.builder_page.builder_page import export_page_as_standard
+
+	return export_page_as_standard(page_name, target_app, export_name)
+
+
+@frappe.whitelist()
+def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
+	from builder.builder.doctype.builder_page.builder_page import duplicate_standard_page
+
+	return duplicate_standard_page(app_name, page_folder_name, new_page_name)
+
+
+@frappe.whitelist()
+def get_standard_pages(app_name):
+	import os
+
+	app_path = frappe.get_app_path(app_name)
+	if not app_path:
+		return []
+
+	pages_path = os.path.join(app_path, "builder_files", "pages")
+	if not os.path.exists(pages_path):
+		return []
+
+	standard_pages = []
+	for folder_name in os.listdir(pages_path):
+		folder_path = os.path.join(pages_path, folder_name)
+		config_path = os.path.join(folder_path, "config.json")
+		if os.path.isdir(folder_path) and os.path.exists(config_path):
+			try:
+				with open(config_path) as f:
+					config = json.load(f)
+
+				standard_pages.append(
+					{
+						"folder_name": folder_name,
+						"page_name": config.get("page_name", folder_name),
+						"page_title": config.get("page_title", folder_name),
+						"route": config.get("route"),
+						"modified": config.get("modified"),
+					}
+				)
+			except Exception:
+				# Skip invalid config files
+				continue
+
+	return standard_pages
diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index 0032f02f6..d9224d386 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -15,8 +15,9 @@
   "route",
   "dynamic_route",
   "column_break_ymjg",
+  "is_standard",
   "is_template",
-  "template_name",
+  "display_name",
   "section_break_ujsp",
   "blocks",
   "draft_blocks",
@@ -169,13 +170,6 @@
    "fieldtype": "Check",
    "label": "Is Template"
   },
-  {
-   "depends_on": "is_template",
-   "fieldname": "template_name",
-   "fieldtype": "Data",
-   "label": "Template Name",
-   "mandatory_depends_on": "is_template"
-  },
   {
    "fieldname": "section_break_shab",
    "fieldtype": "Section Break"
@@ -232,11 +226,24 @@
    "fieldtype": "Code",
    "label": "Body HTML",
    "options": "HTML"
+  },
+  {
+   "default": "0",
+   "fieldname": "is_standard",
+   "fieldtype": "Check",
+   "label": "Is Standard"
+  },
+  {
+   "depends_on": "eval:doc.is_template || doc.is_standard",
+   "fieldname": "display_name",
+   "fieldtype": "Data",
+   "label": "Display Name",
+   "mandatory_depends_on": "eval:doc.is_template || doc.is_standard"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-08-20 12:22:40.697232",
+ "modified": "2025-08-25 15:30:29.945954",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Page",
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index bfea5880e..ea083507d 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -24,12 +24,19 @@
 from builder.hooks import builder_path
 from builder.html_preview_image import generate_preview
 from builder.utils import (
+	Block,
 	ColonRule,
 	camel_case_to_kebab_case,
 	clean_data,
+	copy_asset_file,
+	copy_assets_from_blocks,
 	copy_img_to_asset_folder,
+	create_export_directories,
 	escape_single_quotes,
 	execute_script,
+	export_client_scripts,
+	export_components,
+	extract_components_from_blocks,
 	get_builder_page_preview_file_paths,
 	get_template_assets_folder_path,
 	is_component_used,
@@ -72,11 +79,11 @@ def set_canonical_url(self):
 			return
 		context = getattr(self, "context", frappe._dict())
 		if self.doc.is_home_page():
-			context.canonical_url = frappe.utils.get_url()
+			context["canonical_url"] = frappe.utils.get_url()
 		elif self.doc.canonical_url:
-			context.canonical_url = render_template(self.doc.canonical_url, context)
+			context["canonical_url"] = render_template(self.doc.canonical_url, context)
 		else:
-			context.canonical_url = frappe.utils.get_url(self.path)
+			context["canonical_url"] = frappe.utils.get_url(self.path)
 		self.context = context
 
 	def set_missing_values(self):
@@ -102,10 +109,12 @@ class BuilderPage(WebsiteGenerator):
 		canonical_url: DF.Data | None
 		client_scripts: DF.TableMultiSelect[BuilderPageClientScript]
 		disable_indexing: DF.Check
+		display_name: DF.Data | None
 		draft_blocks: DF.JSON | None
 		dynamic_route: DF.Check
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
+		is_standard: DF.Check
 		is_template: DF.Check
 		meta_description: DF.SmallText | None
 		meta_image: DF.AttachImage | None
@@ -116,7 +125,6 @@ class BuilderPage(WebsiteGenerator):
 		project_folder: DF.Link | None
 		published: DF.Check
 		route: DF.Data | None
-		template_name: DF.Data | None
 	# end: auto-generated types
 
 	def onload(self):
@@ -140,7 +148,7 @@ def before_insert(self):
 	def process_blocks(self):
 		for block_type in ["blocks", "draft_blocks"]:
 			if isinstance(getattr(self, block_type), list):
-				setattr(self, block_type, frappe.as_json(getattr(self, block_type), indent=None))
+				setattr(self, block_type, frappe.as_json(getattr(self, block_type), indent=0))
 		if not self.blocks:
 			self.blocks = "[]"
 
@@ -160,7 +168,7 @@ def set_default_values(self):
 
 	def on_update(self):
 		if self.has_value_changed("route"):
-			if ":" in self.route or "<" in self.route:
+			if self.route and (":" in self.route or "<" in self.route):
 				self.db_set("dynamic_route", 1)
 			else:
 				self.db_set("dynamic_route", 0)
@@ -176,8 +184,8 @@ def on_update(self):
 
 		if self.has_value_changed("published") and not self.published:
 			# if this is homepage then clear homepage from builder settings
-			if frappe.get_cached_value("Builder Settings", None, "home_page") == self.route:
-				frappe.db.set_value("Builder Settings", None, "home_page", None)
+			if frappe.get_cached_value("Builder Settings", "Builder Settings", "home_page") == self.route:
+				frappe.db.set_value("Builder Settings", "Builder Settings", "home_page", None)
 
 		if frappe.conf.developer_mode and self.is_template:
 			save_as_template(self)
@@ -190,7 +198,7 @@ def clear_route_cache(self):
 	def on_trash(self):
 		if self.is_template and frappe.conf.developer_mode:
 			page_template_folder = os.path.join(
-				frappe.get_app_path("builder"), "builder", "builder_page_template", scrub(self.name)
+				frappe.get_app_path("builder"), "builder", "builder_page_template", scrub(str(self.name))
 			)
 			if os.path.exists(page_template_folder):
 				shutil.rmtree(page_template_folder)
@@ -212,7 +220,8 @@ def add_comment(self, comment_type="Comment", text=None, comment_email=None, com
 	@frappe.whitelist()
 	def publish(self, route_variables=None):
 		if route_variables:
-			frappe.form_dict.update(frappe.parse_json(route_variables or "{}"))
+			for k, v in frappe.parse_json(route_variables or "{}").items():
+				frappe.form_dict[k] = v
 		self.published = 1
 		if self.draft_blocks:
 			self.blocks = self.draft_blocks
@@ -305,13 +314,15 @@ def set_favicon(self, context):
 		if not context.get("favicon"):
 			context.favicon = self.favicon
 		if not context.get("favicon"):
-			context.favicon = frappe.get_cached_value("Builder Settings", None, "favicon")
+			context.favicon = frappe.get_cached_value("Builder Settings", "Builder Settings", "favicon")
 
 	def set_language(self, context):
 		# Set page-specific language or fall back to default language from Builder Settings
 		context.language = self.language
 		if not context.language:
-			context.default_language = frappe.get_cached_value("Builder Settings", None, "default_language") or "en"
+			context.default_language = (
+				frappe.get_cached_value("Builder Settings", "Builder Settings", "default_language") or "en"
+			)
 
 	def is_component_used(self, component_id):
 		if self.blocks and is_component_used(self.blocks, component_id):
@@ -320,7 +331,8 @@ def is_component_used(self, component_id):
 			return True
 
 	def set_style_and_script(self, context):
-		for script in self.get("client_scripts", []):
+		client_scripts = self.get("client_scripts") or []
+		for script in client_scripts:
 			script_doc = frappe.get_cached_doc("Builder Client Script", script.builder_script)
 			if script_doc.script_type == "JavaScript":
 				context.setdefault("scripts", []).append(script_doc.public_url)
@@ -355,7 +367,7 @@ def set_style_and_script(self, context):
 	@frappe.whitelist()
 	def get_page_data(self, route_variables=None):
 		if route_variables:
-			frappe.form_dict.update(frappe.parse_json(route_variables or "{}"))
+			frappe.form_dict.update(dict(frappe.parse_json(route_variables or "{}").items()))
 		page_data = frappe._dict()
 		if self.page_data_script:
 			_locals = dict(data=frappe._dict())
@@ -405,7 +417,7 @@ def replace_component(self, target_component, replace_with):
 
 	def is_home_page(self):
 		"""Check if this page is set as the home page in Builder Settings."""
-		return frappe.get_cached_value("Builder Settings", None, "home_page") == self.route
+		return frappe.get_cached_value("Builder Settings", "Builder Settings", "home_page") == self.route
 
 
 def get_css_variables():
@@ -424,7 +436,7 @@ def get_css_variables():
 	return css_variables, dark_mode_css_variables
 
 
-def replace_component_in_blocks(blocks, target_component, replace_with):
+def replace_component_in_blocks(blocks, target_component, replace_with) -> list[dict]:
 	for target_block in blocks:
 		if target_block.get("extendedFromComponent") == target_component:
 			new_component_block = frappe.parse_json(
@@ -449,12 +461,12 @@ def save_as_template(page_doc: BuilderPage):
 	if not page_doc.template_name:
 		page_doc.template_name = page_doc.page_title
 
-	blocks = frappe.parse_json(page_doc.blocks)
+	blocks: list[Block] = frappe.parse_json(page_doc.blocks or "[]")  # type: ignore
 	for block in blocks:
 		copy_img_to_asset_folder(block, page_doc)
 
 	page_doc.db_set("draft_blocks", None)
-	page_doc.db_set("blocks", frappe.as_json(blocks, indent=None))
+	page_doc.db_set("blocks", frappe.as_json(blocks, indent=0))
 	page_doc.reload()
 	export_to_files(
 		record_list=[["Builder Page", page_doc.name, "builder_page_template"]], record_module="builder"
@@ -748,7 +760,7 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def set_dynamic_content_placeholder(block, data_key=False):
+def set_dynamic_content_placeholder(block, data_key=None):
 	block_data_key = block.get("dataKey", {}) or {}
 	dynamic_values = [block_data_key] if block_data_key else []
 	dynamic_values += block.get("dynamicValues", []) or []
@@ -761,7 +773,7 @@ def set_dynamic_content_placeholder(block, data_key=False):
 			if data_key:
 				# convert a.b to (a or {}).get('b', {})
 				# to avoid undefined error in jinja
-				keys = key.split(".")
+				keys = (key or "").split(".")
 				key = f"({keys[0]} or {{}})"
 				for k in keys[1:]:
 					key = f"{key}.get('{k}', {{}})"
@@ -794,7 +806,7 @@ def find_page_with_path(route):
 
 
 @redis_cache(ttl=60 * 60)
-def get_web_pages_with_dynamic_routes() -> dict[str, str]:
+def get_web_pages_with_dynamic_routes() -> list[BuilderPage]:
 	return frappe.get_all(
 		"Builder Page",
 		fields=["name", "route", "modified"],
@@ -850,3 +862,138 @@ def reset_block(block):
 	block["classes"] = []
 	block["dataKey"] = {}
 	return block
+
+
+@frappe.whitelist()
+def export_page_as_standard(page_name, target_app="builder", export_name=None):
+	"""Export a builder page as standard files to the specified app"""
+	import json
+
+	if not frappe.has_permission("Builder Page", ptype="write"):
+		frappe.throw("You do not have permission to export pages.")
+
+	page_doc = frappe.get_doc("Builder Page", page_name)
+
+	if not export_name:
+		export_name = page_doc.page_name or page_name
+
+	# Clean the export name to be filesystem-safe
+	export_name = frappe.scrub(export_name)
+
+	# Get app path
+	app_path = frappe.get_app_path(target_app)
+	if not app_path:
+		frappe.throw(f"App '{target_app}' not found")
+
+	# Create directories and get paths
+	paths = create_export_directories(app_path, export_name)
+
+	# Export all fields except child tables
+	page_config = {}
+	for field in page_doc.meta.fields:
+		if field.fieldtype not in ("Table", "Table MultiSelect"):
+			value = page_doc.get(field.fieldname)
+			if field.fieldtype in ("Datetime", "Date") and value is not None:
+				value = str(value)
+			page_config[field.fieldname] = value
+
+	# Add some standard metadata fields
+	for key in ["creation", "modified", "owner", "modified_by"]:
+		value = getattr(page_doc, key, None)
+		if key in ["creation", "modified"] and value is not None:
+			value = str(value)
+		page_config[key] = value
+
+	config_file_path = os.path.join(paths["page_path"], "config.json")
+
+	blocks = frappe.parse_json(page_config["blocks"])
+	if blocks:
+		copy_assets_from_blocks(blocks, paths["assets_path"])
+		page_config["blocks"] = blocks
+
+	if page_doc.favicon:
+		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"])
+	if page_doc.meta_image:
+		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
+
+	with open(config_file_path, "w") as f:
+		json.dump(page_config, f, indent=2)
+
+	# # Export client scripts
+	# export_client_scripts(page_doc, paths["client_scripts_path"])
+
+	# # Export components used in the page
+	# if blocks:
+	# 	components = extract_components_from_blocks(blocks)
+	# 	export_components(components, paths["components_path"])
+
+	return {
+		"success": True,
+		"message": f"Page exported successfully to {target_app}",
+		"export_path": paths["page_path"],
+	}
+
+
+@frappe.whitelist()
+def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
+	"""Duplicate a standard page into a new builder page"""
+	import json
+
+	if not frappe.has_permission("Builder Page", ptype="write"):
+		frappe.throw("You do not have permission to create pages.")
+
+	# Get the standard page config
+	app_path = frappe.get_app_path(app_name)
+	if not app_path:
+		frappe.throw(f"App '{app_name}' not found")
+
+	config_path = os.path.join(app_path, "builder_files", "pages", page_folder_name, "config.json")
+
+	if not os.path.exists(config_path):
+		frappe.throw(f"Standard page '{page_folder_name}' not found in app '{app_name}'")
+
+	with open(config_path) as f:
+		config = json.load(f)
+
+	# Create new builder page
+	new_page = frappe.new_doc("Builder Page")
+	new_page.page_name = new_page_name or f"{config.get('page_name', page_folder_name)} Copy"
+	new_page.page_title = config.get("page_title", new_page.page_name)
+	new_page.blocks = json.dumps(config.get("blocks", []))
+	new_page.page_data_script = config.get("page_data_script")
+	new_page.head_html = config.get("head_html")
+	new_page.body_html = config.get("body_html")
+	new_page.dynamic_route = config.get("dynamic_route", 0)
+	new_page.disable_indexing = config.get("disable_indexing", 0)
+	new_page.authenticated_access = config.get("authenticated_access", 0)
+	new_page.meta_description = config.get("meta_description")
+	new_page.meta_image = config.get("meta_image")
+	new_page.canonical_url = config.get("canonical_url")
+	new_page.favicon = config.get("favicon")
+	new_page.published = 0  # Start as unpublished
+
+	# Import client scripts
+	client_scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
+	if os.path.exists(client_scripts_path):
+		for script_file in os.listdir(client_scripts_path):
+			if script_file.endswith(".json"):
+				script_path = os.path.join(client_scripts_path, script_file)
+				with open(script_path) as f:
+					script_config = json.load(f)
+
+				# Create new client script
+				client_script = frappe.new_doc("Builder Client Script")
+				client_script.script_name = script_config.get("script_name")
+				client_script.script_type = script_config.get("script_type", "JavaScript")
+				client_script.script = script_config.get("script")
+				client_script.insert(ignore_permissions=True)
+
+				# Link to page
+				new_page.append("client_scripts", {"builder_script": client_script.name})
+
+	# Import components (this would require the components to be available in the system)
+	# For now, we'll just save the page and let the user handle missing components
+
+	new_page.insert(ignore_permissions=True)
+
+	return {"success": True, "message": "Standard page duplicated successfully", "page_name": new_page.name}
diff --git a/builder/utils.py b/builder/utils.py
index 51ba5ebaf..a3f71b22b 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -1,10 +1,10 @@
 import glob
 import inspect
+import json
 import os
 import re
 import shutil
 import socket
-import subprocess
 from dataclasses import dataclass
 from os.path import join
 from urllib.parse import unquote, urlparse
@@ -35,13 +35,15 @@ class BlockDataKey:
 
 class Block:
 	blockId: str = ""
-	children: list["Block"] = None
-	baseStyles: dict = None
-	rawStyles: dict = None
-	mobileStyles: dict = None
-	tabletStyles: dict = None
-	attributes: dict = None
-	classes: list[str] = None
+	from typing import ClassVar
+
+	children: ClassVar[list["Block"]] = []
+	baseStyles: ClassVar[dict] = {}
+	rawStyles: ClassVar[dict] = {}
+	mobileStyles: ClassVar[dict] = {}
+	tabletStyles: ClassVar[dict] = {}
+	attributes: ClassVar[dict] = {}
+	classes: ClassVar[list[str]] = []
 	dataKey: BlockDataKey | None = None
 	blockName: str | None = None
 	element: str | None = None
@@ -105,7 +107,7 @@ def get_cached_doc_as_dict(doctype, name):
 def make_safe_get_request(url, **kwargs):
 	parsed = urlparse(url)
 	parsed_ip = socket.gethostbyname(parsed.hostname)
-	if parsed_ip.startswith("127", "10", "192", "172"):
+	if parsed_ip.startswith(("127", "10", "192", "172")):
 		return
 
 	return frappe.integrations.utils.make_get_request(url, **kwargs)
@@ -286,7 +288,7 @@ def copy_img_to_asset_folder(block: Block, page_doc):
 				# copy physical file to new location
 				assets_folder_path = get_template_assets_folder_path(page_doc)
 				shutil.copy(_file.get_full_path(), assets_folder_path)
-			block["attributes"]["src"] = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
+			block.get("attributes", {})["src"] = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
 	for child in block.get("children", []) or []:
 		copy_img_to_asset_folder(child, page_doc)
 
@@ -407,3 +409,168 @@ def split_styles(styles):
 		"regular": {k: v for k, v in styles.items() if ":" not in k},
 		"state": {k: v for k, v in styles.items() if ":" in k},
 	}
+
+
+def copy_assets_from_blocks(blocks, assets_path):
+	if not isinstance(blocks, list):
+		blocks = [blocks]
+
+	for block in blocks:
+		if isinstance(block, dict):
+			process_block_assets(block, assets_path)
+			children = block.get("children")
+			if children and isinstance(children, list):
+				copy_assets_from_blocks(children, assets_path)
+
+
+def process_block_assets(block, assets_path):
+	"""Process assets for a single block"""
+	if block.get("element") in ("img", "video"):
+		src = block.get("attributes", {}).get("src")
+		if src:
+			new_location = copy_asset_file(src, assets_path)
+			if new_location:
+				block["attributes"]["src"] = new_location
+
+
+def copy_asset_file(file_url, assets_path):
+	"""Copy a file from the source to assets directory and return new public path"""
+	if not file_url or not isinstance(file_url, str):
+		return None
+
+	try:
+		if file_url.startswith("/files/"):
+			return copy_from_site_files(file_url, assets_path)
+		elif file_url.startswith("/builder_assets/"):
+			return copy_from_builder_assets(file_url, assets_path)
+	except Exception as e:
+		frappe.log_error(f"Failed to copy asset {file_url}: {e!s}")
+	return None
+
+
+def copy_from_site_files(file_url, assets_path):
+	"""Copy file from site files directory"""
+	source_path = os.path.join(frappe.local.site_path, "public", file_url.lstrip("/"))
+	if os.path.exists(source_path):
+		return copy_file_to_assets(source_path, file_url, assets_path)
+	return None
+
+
+def copy_from_builder_assets(file_url, assets_path):
+	"""Copy file from builder assets directory"""
+	source_path = os.path.join(frappe.get_app_path("builder"), "www", file_url.lstrip("/"))
+	if os.path.exists(source_path):
+		return copy_file_to_assets(source_path, file_url, assets_path)
+	return None
+
+
+def copy_file_to_assets(source_path, file_url, assets_path):
+	"""Copy file to assets directory and return public path"""
+	filename = os.path.basename(file_url)
+	dest_path = os.path.join(assets_path, filename)
+	shutil.copy2(source_path, dest_path)
+	return f"/builder_assets/page_{os.path.basename(assets_path)}/{filename}"
+
+
+def extract_components_from_blocks(blocks):
+	"""Extract component IDs from blocks recursively"""
+	components = set()
+	if not isinstance(blocks, list):
+		blocks = [blocks]
+
+	for block in blocks:
+		if isinstance(block, dict):
+			if block.get("extendedFromComponent"):
+				components.add(block["extendedFromComponent"])
+			children = block.get("children")
+			if children and isinstance(children, list):
+				components.update(extract_components_from_blocks(children))
+
+	return components
+
+
+def export_client_scripts(page_doc, client_scripts_path):
+	"""Export client scripts for a page"""
+	for script_row in page_doc.client_scripts:
+		script_doc = frappe.get_doc("Builder Client Script", script_row.builder_script)
+		script_config = {
+			"script_name": script_doc.name,
+			"script_type": script_doc.script_type,
+			"script": script_doc.script,
+		}
+		script_file_path = os.path.join(client_scripts_path, f"{frappe.scrub(str(script_doc.name))}.json")
+
+		with open(script_file_path, "w") as f:
+			json.dump(script_config, f, indent=2)
+
+
+def export_components(components, components_path):
+	"""Export components to files"""
+	for component_id in components:
+		try:
+			component_doc = frappe.get_doc("Builder Component", component_id)
+			component_config = create_component_config(component_doc)
+			component_file_path = os.path.join(
+				components_path, f"{frappe.scrub(component_doc.component_name)}.json"
+			)
+
+			with open(component_file_path, "w") as f:
+				json.dump(component_config, f, indent=2)
+		except Exception as e:
+			frappe.log_error(f"Failed to export component {component_id}: {e!s}")
+
+
+def create_component_config(component_doc):
+	"""Create configuration dictionary for a component"""
+	return {
+		"component_name": component_doc.component_name,
+		"block": frappe.parse_json(component_doc.block or "{}"),
+		"preview": component_doc.preview,
+		"for_web_page": component_doc.for_web_page,
+		"creation": str(component_doc.creation),
+		"modified": str(component_doc.modified),
+		"owner": component_doc.owner,
+		"modified_by": component_doc.modified_by,
+	}
+
+
+def create_export_directories(app_path, export_name):
+	"""Create necessary directories for export and return paths"""
+	paths = get_export_paths(app_path, export_name)
+	setup_assets_symlink(app_path, paths["assets_path"])
+	for path in paths.values():
+		os.makedirs(path, exist_ok=True)
+
+	return paths
+
+
+def get_export_paths(app_path, export_name):
+	"""Get all export directory paths"""
+	builder_files_path = os.path.join(app_path, "builder_files")
+	pages_path = os.path.join(builder_files_path, "pages")
+
+	return {
+		"page_path": os.path.join(pages_path, export_name),
+		"assets_path": os.path.join(builder_files_path, "assets"),
+		"client_scripts_path": os.path.join(builder_files_path, "client_scripts"),
+		"components_path": os.path.join(builder_files_path, "components"),
+		"builder_files_path": builder_files_path,
+		"pages_path": pages_path,
+	}
+
+
+def setup_assets_symlink(app_path, assets_path):
+	symlink_path = os.path.join(app_path, "www", "builder_assets", "page_assets")
+	os.makedirs(os.path.dirname(symlink_path), exist_ok=True)
+	os.makedirs(assets_path, exist_ok=True)
+	if not os.path.islink(symlink_path):
+		remove_existing_path(symlink_path)
+		os.symlink(assets_path, symlink_path)
+
+
+def remove_existing_path(path):
+	if os.path.exists(path):
+		if os.path.isdir(path):
+			shutil.rmtree(path)
+		else:
+			os.remove(path)
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 000cf47a3..97284c825 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -55,6 +55,7 @@ declare module 'vue' {
     DraggablePopup: typeof import('./src/components/Controls/DraggablePopup.vue')['default']
     DynamicValueHandler: typeof import('./src/components/Controls/DynamicValueHandler.vue')['default']
     EditableSpan: typeof import('./src/components/EditableSpan.vue')['default']
+    ExportPageModal: typeof import('./src/components/Modals/ExportPageModal.vue')['default']
     EyeDropper: typeof import('./src/components/Icons/EyeDropper.vue')['default']
     Files: typeof import('./src/components/Icons/Files.vue')['default']
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
@@ -68,6 +69,7 @@ declare module 'vue' {
     Globe: typeof import('./src/components/Icons/Globe.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
     ImageUploadInput: typeof import('./src/components/ImageUploadInput.vue')['default']
+    ImportStandardPageModal: typeof import('./src/components/Modals/ImportStandardPageModal.vue')['default']
     InlineInput: typeof import('./src/components/Controls/InlineInput.vue')['default']
     Input: typeof import('./src/components/Controls/Input.vue')['default']
     InputLabel: typeof import('./src/components/Controls/InputLabel.vue')['default']
diff --git a/frontend/src/components/MainMenu.vue b/frontend/src/components/MainMenu.vue
index a25b9b6ad..552dce1f3 100644
--- a/frontend/src/components/MainMenu.vue
+++ b/frontend/src/components/MainMenu.vue
@@ -28,12 +28,18 @@
 						onClick: () => pageStore.duplicatePage(pageStore.activePage as BuilderPage),
 						icon: 'copy',
 					},
+					{
+						label: 'Export as Standard',
+						onClick: () => (showExportModal = true),
+						icon: 'download',
+						condition: () => Boolean(pageStore.activePage),
+					},
 					{
 						label: `Toggle Theme`,
 						onClick: () => toggleDark(),
 						icon: isDark ? 'sun' : 'moon',
 					},
-					{ label: 'Settings', onClick: () => $emit('showSettings'), icon: 'settings' },
+					{ label: 'Settings', onClick: () => emit('showSettings'), icon: 'settings' },
 
 					{
 						label: 'Help',
@@ -74,6 +80,9 @@
 			</div>
 		</template>
 	</Dropdown>
+
+	<!-- Export Modal -->
+	<ExportPageModal v-model="showExportModal" :page-name="pageStore.activePage?.name" />
 </template>
 <script setup lang="ts">
 import useCanvasStore from "@/stores/canvasStore";
@@ -83,6 +92,8 @@ import { triggerCopyEvent } from "@/utils/helpers";
 
 import { useDark, useToggle } from "@vueuse/core";
 import { Dropdown } from "frappe-ui";
+import { ref } from "vue";
+import ExportPageModal from "./Modals/ExportPageModal.vue";
 
 const pageStore = usePageStore();
 const isDark = useDark({
@@ -91,6 +102,10 @@ const isDark = useDark({
 const toggleDark = useToggle(isDark);
 const canvasStore = useCanvasStore();
 
+const showExportModal = ref(false);
+
+const emit = defineEmits(["showSettings"]);
+
 const handleCopyPage = () => {
 	if (!pageStore.activePage) return;
 	canvasStore.copyEntirePage = true;
diff --git a/frontend/src/components/Modals/ExportPageModal.vue b/frontend/src/components/Modals/ExportPageModal.vue
new file mode 100644
index 000000000..7827d1f6c
--- /dev/null
+++ b/frontend/src/components/Modals/ExportPageModal.vue
@@ -0,0 +1,151 @@
+<template>
+	<Dialog
+		v-model="open"
+		:options="{
+			title: 'Export Page as Standard',
+			size: 'lg',
+		}">
+		<template #body-content>
+			<div class="space-y-4">
+				<div>
+					<FormControl
+						type="select"
+						label="Target App"
+						v-model="selectedApp"
+						:options="appOptions"
+						placeholder="Select an app"></FormControl>
+					<p class="mt-1 text-sm text-gray-600">Choose which app to export the standard page to</p>
+				</div>
+
+				<div>
+					<FormControl
+						type="text"
+						label="Export Name"
+						v-model="exportName"
+						placeholder="Enter name for the exported page"></FormControl>
+					<p class="mt-1 text-sm text-gray-600">
+						This will be used as the folder name. If empty, page name will be used.
+					</p>
+				</div>
+
+				<div class="rounded-lg bg-surface-gray-1 p-4">
+					<h3 class="mb-2 text-sm font-medium text-ink-gray-9">What will be exported:</h3>
+					<ul class="space-y-1 text-sm text-ink-gray-6">
+						<li>Page configuration (blocks, styles, scripts)</li>
+						<li>Assets used in the page (images, files)</li>
+						<li>Client scripts</li>
+						<li>Components used in the page</li>
+						<li>Variables referenced</li>
+					</ul>
+				</div>
+
+				<div class="rounded-lg bg-surface-gray-1 p-4">
+					<h3 class="mb-2 text-sm font-medium text-ink-gray-8">Export Structure:</h3>
+					<div class="font-mono text-sm text-ink-gray-4">
+						{{ selectedApp }}/builder_files/
+						<br />
+						&nbsp;&nbsp;├── pages/{{ exportName || "page-name" }}/
+						<br />
+						&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;└── config.json
+						<br />
+						&nbsp;&nbsp;├── assets/
+						<br />
+						&nbsp;&nbsp;├── client_scripts/
+						<br />
+						&nbsp;&nbsp;├── components/
+						<br />
+						&nbsp;&nbsp;└── variables/
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #actions>
+			<Button variant="solid" :loading="exporting" @click="exportPage">Export Page</Button>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import { createResource } from "frappe-ui";
+import { computed, ref, watch } from "vue";
+import { toast } from "vue-sonner";
+
+interface Props {
+	modelValue: boolean;
+	pageName?: string;
+}
+
+interface Emits {
+	(e: "update:modelValue", value: boolean): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const open = computed({
+	get: () => props.modelValue,
+	set: (value) => emit("update:modelValue", value),
+});
+
+const selectedApp = ref("builder");
+const exportName = ref("");
+const exporting = ref(false);
+
+// Fetch available apps
+const appsResource = createResource({
+	url: "builder.api.get_apps_for_export",
+	auto: true,
+});
+
+const appOptions = computed(() => {
+	if (!appsResource.data) return [];
+	return appsResource.data.map((app: any) => ({
+		label: app.title,
+		value: app.name,
+	}));
+});
+
+// Export page resource
+const exportResource = createResource({
+	url: "builder.api.export_page_as_standard",
+	onSuccess: (data: { message: string }) => {
+		toast.success(data.message);
+		open.value = false;
+		exportName.value = "";
+	},
+	onError: (error) => {
+		toast.error("Export failed: " + error.message);
+	},
+});
+
+const exportPage = async () => {
+	if (!props.pageName) {
+		toast.error("No page selected for export");
+		return;
+	}
+
+	if (!selectedApp.value) {
+		toast.error("Please select a target app");
+		return;
+	}
+
+	exporting.value = true;
+	try {
+		await exportResource.submit({
+			page_name: props.pageName,
+			target_app: selectedApp.value,
+			export_name: exportName.value || undefined,
+		});
+	} finally {
+		exporting.value = false;
+	}
+};
+
+// Reset form when dialog opens
+watch(open, (isOpen) => {
+	if (isOpen) {
+		exportName.value = "";
+		selectedApp.value = "builder";
+	}
+});
+</script>
diff --git a/frontend/src/components/Modals/ImportStandardPageModal.vue b/frontend/src/components/Modals/ImportStandardPageModal.vue
new file mode 100644
index 000000000..a4bfd2622
--- /dev/null
+++ b/frontend/src/components/Modals/ImportStandardPageModal.vue
@@ -0,0 +1,165 @@
+<template>
+	<Dialog
+		v-model="open"
+		:options="{
+			title: 'Import Standard Page',
+			size: 'lg',
+		}">
+		<template #body-content>
+			<div class="space-y-4">
+				<div>
+					<FormControl
+						type="select"
+						label="Source App"
+						v-model="selectedApp"
+						:options="appOptions"
+						placeholder="Select an app"></FormControl>
+					<p class="mt-1 text-sm text-gray-600">Choose which app contains the standard page</p>
+				</div>
+
+				<div v-if="selectedApp">
+					<FormControl
+						type="select"
+						label="Standard Page"
+						v-model="selectedPage"
+						:options="standardPageOptions"
+						placeholder="Select a standard page"></FormControl>
+					<p class="mt-1 text-sm text-gray-600">Available standard pages in {{ selectedApp }}</p>
+				</div>
+
+				<div v-if="selectedPage">
+					<FormControl
+						type="text"
+						label="New Page Name (Optional)"
+						v-model="newPageName"
+						placeholder="Enter name for the new page"></FormControl>
+					<p class="mt-1 text-sm text-gray-600">
+						If empty, the original page name will be used with "Copy" suffix
+					</p>
+				</div>
+
+				<div v-if="selectedPage" class="rounded-lg bg-green-50 p-4">
+					<h3 class="mb-2 text-sm font-medium text-green-900">Import Process:</h3>
+					<ul class="space-y-1 text-sm text-green-800">
+						<li>Creates a new Builder Page from the standard configuration</li>
+						<li>Imports associated client scripts</li>
+						<li>Preserves all styling and layout</li>
+						<li>Page will be created as unpublished</li>
+					</ul>
+				</div>
+			</div>
+		</template>
+		<template #actions>
+			<Button
+				variant="solid"
+				:loading="importing"
+				:disabled="!selectedApp || !selectedPage"
+				@click="importPage">
+				Import Page
+			</Button>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import usePageStore from "@/stores/pageStore";
+import { createResource } from "frappe-ui";
+import { computed, ref, watch } from "vue";
+import { toast } from "vue-sonner";
+
+interface Props {
+	modelValue: boolean;
+}
+
+interface Emits {
+	(e: "update:modelValue", value: boolean): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const pageStore = usePageStore();
+
+const open = computed({
+	get: () => props.modelValue,
+	set: (value) => emit("update:modelValue", value),
+});
+
+const selectedApp = ref("");
+const selectedPage = ref("");
+const newPageName = ref("");
+const importing = ref(false);
+
+// Fetch available apps
+const appsResource = createResource({
+	url: "builder.api.get_apps_for_export",
+	auto: true,
+});
+
+const appOptions = computed(() => {
+	if (!appsResource.data) return [];
+	return appsResource.data.map((app: any) => ({
+		label: app.title,
+		value: app.name,
+	}));
+});
+
+// Mock standard page options - in real implementation, this would
+// scan the app directories for builder_files/pages
+const standardPagesResource = createResource({
+	url: "builder.api.get_standard_pages",
+});
+
+const standardPageOptions = computed(() => {
+	if (!selectedApp.value || !standardPagesResource.data) return [];
+	return standardPagesResource.data.map((page: any) => ({
+		label: `${page.page_title || page.page_name} (${page.folder_name})`,
+		value: page.folder_name,
+	}));
+});
+
+// Watch for app changes to fetch standard pages
+watch(selectedApp, (newApp) => {
+	selectedPage.value = "";
+	if (newApp) {
+		standardPagesResource.submit({ app_name: newApp });
+	}
+});
+
+const importPage = async () => {
+	if (!selectedApp.value || !selectedPage.value) {
+		toast.error("Please select both app and page");
+		return;
+	}
+
+	importing.value = true;
+	try {
+		await pageStore.duplicateStandardPage(
+			selectedApp.value,
+			selectedPage.value,
+			newPageName.value || undefined,
+		);
+		open.value = false;
+		// Reset form
+		selectedApp.value = "";
+		selectedPage.value = "";
+		newPageName.value = "";
+	} finally {
+		importing.value = false;
+	}
+};
+
+// Reset form when dialog opens
+watch(open, (isOpen) => {
+	if (isOpen) {
+		selectedApp.value = "";
+		selectedPage.value = "";
+		newPageName.value = "";
+	}
+});
+
+// Reset page selection when app changes
+watch(selectedApp, () => {
+	selectedPage.value = "";
+});
+</script>
diff --git a/frontend/src/components/Modals/VariableManager.vue b/frontend/src/components/Modals/VariableManager.vue
index dcc49db69..31f558804 100644
--- a/frontend/src/components/Modals/VariableManager.vue
+++ b/frontend/src/components/Modals/VariableManager.vue
@@ -319,7 +319,6 @@ const saveVariable = async (row: ListViewRow) => {
 };
 
 const deleteVariableRow = async (row: ListViewRow) => {
-	console.log("delete", row);
 	if (row.isNew) {
 		newVariable.value = null;
 		return;
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index 9650c1ae3..f5da2d9c8 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -6,20 +6,25 @@
 			<div
 				class="toolbar sticky top-0 z-10 flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1"
 				ref="toolbar">
-				<router-link
-					:to="{ name: 'builder', params: { pageId: 'new' } }"
-					@click="
-						() => {
-							posthog.capture('builder_new_page_created');
-						}
-					">
-					<BuilderButton
-						variant="solid"
-						iconLeft="plus"
-						class="bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6">
-						New
+				<div class="flex gap-2">
+					<BuilderButton variant="ghost" iconLeft="download" @click="showImportModal = true">
+						Import Standard
 					</BuilderButton>
-				</router-link>
+					<router-link
+						:to="{ name: 'builder', params: { pageId: 'new' } }"
+						@click="
+							() => {
+								posthog.capture('builder_new_page_created');
+							}
+						">
+						<BuilderButton
+							variant="solid"
+							iconLeft="plus"
+							class="bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6">
+							New
+						</BuilderButton>
+					</router-link>
+				</div>
 			</div>
 			<!-- Sidebar -->
 			<!-- Main Content -->
@@ -154,11 +159,13 @@
 			v-model="showFolderSelectorDialog"
 			:currentFolder="builderStore.activeFolder"
 			@folderSelected="setFolder"></SelectFolder>
+		<ImportStandardPageModal v-model="showImportModal" />
 	</div>
 </template>
 <script setup lang="ts">
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import DashboardSidebar from "@/components/DashboardSidebar.vue";
+import ImportStandardPageModal from "@/components/Modals/ImportStandardPageModal.vue";
 import SelectFolder from "@/components/Modals/SelectFolder.vue";
 import PageCard from "@/components/PageCard.vue";
 import PageListItem from "@/components/PageListItem.vue";
@@ -178,6 +185,7 @@ const toggleDark = useToggle(isDark);
 const builderStore = useBuilderStore();
 const displayType = useStorage("displayType", "grid") as Ref<"grid" | "list">;
 const showFolderSelectorDialog = ref(false);
+const showImportModal = ref(false);
 
 const searchFilter = ref("");
 const typeFilter = useStorage("typeFilter", "") as Ref<"" | "draft" | "published" | "unpublished">;
diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index f1ade780d..e10e63d29 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -152,6 +152,32 @@ const usePageStore = defineStore("pageStore", {
 			);
 		},
 
+		async duplicateStandardPage(appName: string, pageFolderName: string, newPageName?: string) {
+			toast.promise(
+				createResource({
+					url: "builder.api.duplicate_standard_page",
+					method: "POST",
+					params: {
+						app_name: appName,
+						page_folder_name: pageFolderName,
+						new_page_name: newPageName,
+					},
+				}).fetch(),
+				{
+					loading: "Duplicating standard page",
+					success: async (response: any) => {
+						// refresh page list and navigate to new page
+						await webPages.reload();
+						router.push({ name: "builder", params: { pageId: response.page_name } });
+						return "Standard page duplicated successfully";
+					},
+					error: (error) => {
+						return `Failed to duplicate standard page: ${error.message}`;
+					},
+				},
+			);
+		},
+
 		deletePage: async (page: BuilderPage) => {
 			const confirmed = await confirm(
 				`Are you sure you want to delete page: ${page.page_title || page.page_name}?`,
diff --git a/frontend/src/types/Builder/BuilderPage.ts b/frontend/src/types/Builder/BuilderPage.ts
index acf2ef30d..b6a43991e 100644
--- a/frontend/src/types/Builder/BuilderPage.ts
+++ b/frontend/src/types/Builder/BuilderPage.ts
@@ -19,10 +19,12 @@ export interface BuilderPage{
 	route?: string
 	/**	Dynamic Route : Check - Map route parameters into form variables. Example <code>/profile/&lt;user&gt;</code>	*/
 	dynamic_route?: 0 | 1
+	/**	Is Standard : Check	*/
+	is_standard?: 0 | 1
 	/**	Is Template : Check	*/
 	is_template?: 0 | 1
-	/**	Template Name : Data	*/
-	template_name?: string
+	/**	Display Name : Data	*/
+	display_name?: string
 	/**	Blocks : JSON	*/
 	blocks?: any
 	/**	Draft Blocks : JSON	*/

From aa6aa2acc32ac3744015d2e05cbc5081e9ea63a6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 6 Sep 2025 22:29:02 +0530
Subject: [PATCH 003/547] fix: Export scripts and components

---
 .../doctype/builder_page/builder_page.py      | 77 ++++++++++---------
 builder/utils.py                              | 23 ++----
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ea083507d..22f864cd4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -891,11 +891,10 @@ def export_page_as_standard(page_name, target_app="builder", export_name=None):
 	# Export all fields except child tables
 	page_config = {}
 	for field in page_doc.meta.fields:
-		if field.fieldtype not in ("Table", "Table MultiSelect"):
-			value = page_doc.get(field.fieldname)
-			if field.fieldtype in ("Datetime", "Date") and value is not None:
-				value = str(value)
-			page_config[field.fieldname] = value
+		value = page_doc.get(field.fieldname)
+		if field.fieldtype in ("Datetime", "Date") and value is not None:
+			value = str(value)
+		page_config[field.fieldname] = value
 
 	# Add some standard metadata fields
 	for key in ["creation", "modified", "owner", "modified_by"]:
@@ -916,16 +915,18 @@ def export_page_as_standard(page_name, target_app="builder", export_name=None):
 	if page_doc.meta_image:
 		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
 
-	with open(config_file_path, "w") as f:
-		json.dump(page_config, f, indent=2)
+	page_config = frappe.as_json(page_config, ensure_ascii=False)
+
+	with open(config_file_path, "w", encoding="utf-8") as f:
+		f.write(page_config)
 
-	# # Export client scripts
-	# export_client_scripts(page_doc, paths["client_scripts_path"])
+	# Export client scripts
+	export_client_scripts(page_doc, paths["client_scripts_path"])
 
 	# # Export components used in the page
-	# if blocks:
-	# 	components = extract_components_from_blocks(blocks)
-	# 	export_components(components, paths["components_path"])
+	if blocks:
+		components = extract_components_from_blocks(blocks)
+		export_components(components, paths["components_path"])
 
 	return {
 		"success": True,
@@ -957,38 +958,44 @@ def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
 
 	# Create new builder page
 	new_page = frappe.new_doc("Builder Page")
-	new_page.page_name = new_page_name or f"{config.get('page_name', page_folder_name)} Copy"
-	new_page.page_title = config.get("page_title", new_page.page_name)
-	new_page.blocks = json.dumps(config.get("blocks", []))
-	new_page.page_data_script = config.get("page_data_script")
-	new_page.head_html = config.get("head_html")
-	new_page.body_html = config.get("body_html")
-	new_page.dynamic_route = config.get("dynamic_route", 0)
-	new_page.disable_indexing = config.get("disable_indexing", 0)
-	new_page.authenticated_access = config.get("authenticated_access", 0)
-	new_page.meta_description = config.get("meta_description")
-	new_page.meta_image = config.get("meta_image")
-	new_page.canonical_url = config.get("canonical_url")
-	new_page.favicon = config.get("favicon")
+	for field in [
+		"page_name",
+		"page_title",
+		"blocks",
+		"page_data_script",
+		"head_html",
+		"body_html",
+		"dynamic_route",
+		"disable_indexing",
+		"authenticated_access",
+		"meta_description",
+		"meta_image",
+		"canonical_url",
+		"favicon",
+	]:
+		value = config.get(field)
+		if field == "blocks":
+			value = json.dumps(value or [])
+		setattr(new_page, field, value)
 	new_page.published = 0  # Start as unpublished
 
+	# Import client scripts
 	# Import client scripts
 	client_scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
 	if os.path.exists(client_scripts_path):
 		for script_file in os.listdir(client_scripts_path):
 			if script_file.endswith(".json"):
-				script_path = os.path.join(client_scripts_path, script_file)
-				with open(script_path) as f:
+				with open(os.path.join(client_scripts_path, script_file)) as f:
 					script_config = json.load(f)
-
-				# Create new client script
-				client_script = frappe.new_doc("Builder Client Script")
-				client_script.script_name = script_config.get("script_name")
-				client_script.script_type = script_config.get("script_type", "JavaScript")
-				client_script.script = script_config.get("script")
+				client_script = frappe.get_doc(
+					{
+						"doctype": "Builder Client Script",
+						"script_name": script_config.get("script_name"),
+						"script_type": script_config.get("script_type", "JavaScript"),
+						"script": script_config.get("script"),
+					}
+				)
 				client_script.insert(ignore_permissions=True)
-
-				# Link to page
 				new_page.append("client_scripts", {"builder_script": client_script.name})
 
 	# Import components (this would require the components to be available in the system)
diff --git a/builder/utils.py b/builder/utils.py
index a3f71b22b..eff65ebbc 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -481,6 +481,11 @@ def extract_components_from_blocks(blocks):
 	for block in blocks:
 		if isinstance(block, dict):
 			if block.get("extendedFromComponent"):
+				component_doc = frappe.get_cached_doc("Builder Component", block["extendedFromComponent"])
+				if component_doc:
+					components.update(
+						extract_components_from_blocks(frappe.parse_json(component_doc.block or "{}"))
+					)
 				components.add(block["extendedFromComponent"])
 			children = block.get("children")
 			if children and isinstance(children, list):
@@ -509,31 +514,17 @@ def export_components(components, components_path):
 	for component_id in components:
 		try:
 			component_doc = frappe.get_doc("Builder Component", component_id)
-			component_config = create_component_config(component_doc)
 			component_file_path = os.path.join(
 				components_path, f"{frappe.scrub(component_doc.component_name)}.json"
 			)
 
 			with open(component_file_path, "w") as f:
-				json.dump(component_config, f, indent=2)
+				f.write(frappe.as_json(component_doc.as_dict()))
 		except Exception as e:
+			print(e)
 			frappe.log_error(f"Failed to export component {component_id}: {e!s}")
 
 
-def create_component_config(component_doc):
-	"""Create configuration dictionary for a component"""
-	return {
-		"component_name": component_doc.component_name,
-		"block": frappe.parse_json(component_doc.block or "{}"),
-		"preview": component_doc.preview,
-		"for_web_page": component_doc.for_web_page,
-		"creation": str(component_doc.creation),
-		"modified": str(component_doc.modified),
-		"owner": component_doc.owner,
-		"modified_by": component_doc.modified_by,
-	}
-
-
 def create_export_directories(app_path, export_name):
 	"""Create necessary directories for export and return paths"""
 	paths = get_export_paths(app_path, export_name)

From 79a907bb653495dd68e13086d386b9e14f032ff3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 7 Sep 2025 22:10:28 +0530
Subject: [PATCH 004/547] fix: Export component as well while exporting

---
 .../doctype/builder_page/builder_page.py      | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 22f864cd4..ecd33fcfb 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -998,8 +998,23 @@ def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
 				client_script.insert(ignore_permissions=True)
 				new_page.append("client_scripts", {"builder_script": client_script.name})
 
-	# Import components (this would require the components to be available in the system)
-	# For now, we'll just save the page and let the user handle missing components
+	# find all components under builder_files/components and import them
+	components_path = os.path.join(app_path, "builder_files", "components")
+	if os.path.exists(components_path):
+		# pick only json files and import them
+		for component_file in os.listdir(components_path):
+			if component_file.endswith(".json"):
+				with open(os.path.join(components_path, component_file)) as f:
+					component_config = json.load(f)
+				component = frappe.get_doc(
+					{
+						"doctype": "Builder Component",
+						"component_name": component_config.get("component_name"),
+						"block": component_config.get("block"),
+						"component_id": component_config.get("component_id"),
+					}
+				)
+				component.insert(ignore_permissions=True)
 
 	new_page.insert(ignore_permissions=True)
 

From d43e6380506ad07a663be6e5db5addded83c44d3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 8 Sep 2025 19:49:52 +0530
Subject: [PATCH 005/547] feat: Allow setting page as standard from page
 settings

---
 builder/api.py                                |  27 ----
 .../doctype/builder_page/builder_page.json    |  17 +-
 .../doctype/builder_page/builder_page.py      |  12 +-
 frontend/components.d.ts                      |   3 +-
 frontend/src/components/MainMenu.vue          |  13 --
 .../src/components/Modals/ExportPageModal.vue | 151 ------------------
 .../src/components/Settings/PageGeneral.vue   |  44 +++++
 frontend/src/data/moduleDef.ts                |  14 ++
 frontend/src/types/Builder/BuilderPage.ts     |   8 +-
 9 files changed, 81 insertions(+), 208 deletions(-)
 delete mode 100644 frontend/src/components/Modals/ExportPageModal.vue
 create mode 100644 frontend/src/data/moduleDef.ts

diff --git a/builder/api.py b/builder/api.py
index df9fd6abb..aef46415f 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -300,33 +300,6 @@ def get_overall_analytics(
 	)
 
 
-@frappe.whitelist()
-@redis_cache()
-def get_apps_for_export():
-	"""Get list of apps where standard pages can be exported"""
-	installed_apps = frappe.get_all_apps()
-	apps = []
-	for app in installed_apps:
-		try:
-			app_hooks = frappe.get_hooks(app_name=app)
-			apps.append(
-				{
-					"name": app,
-					"title": app_hooks.get("app_title", [app])[0],
-				}
-			)
-		except Exception:
-			pass
-	return apps
-
-
-@frappe.whitelist()
-def export_page_as_standard(page_name, target_app="builder", export_name=None):
-	from builder.builder.doctype.builder_page.builder_page import export_page_as_standard
-
-	return export_page_as_standard(page_name, target_app, export_name)
-
-
 @frappe.whitelist()
 def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
 	from builder.builder.doctype.builder_page.builder_page import duplicate_standard_page
diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index d9224d386..3df835fe7 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -17,7 +17,7 @@
   "column_break_ymjg",
   "is_standard",
   "is_template",
-  "display_name",
+  "module",
   "section_break_ujsp",
   "blocks",
   "draft_blocks",
@@ -105,7 +105,7 @@
   },
   {
    "default": "0",
-   "description": "Map route parameters into form variables. Example <code>/profile/&lt;user&gt;</code>",
+   "description": "Map route parameters into form variables. Example <code>/profile/:user</code>",
    "fieldname": "dynamic_route",
    "fieldtype": "Check",
    "label": "Dynamic Route"
@@ -234,16 +234,17 @@
    "label": "Is Standard"
   },
   {
-   "depends_on": "eval:doc.is_template || doc.is_standard",
-   "fieldname": "display_name",
-   "fieldtype": "Data",
-   "label": "Display Name",
-   "mandatory_depends_on": "eval:doc.is_template || doc.is_standard"
+   "depends_on": "is_standard",
+   "fieldname": "module",
+   "fieldtype": "Link",
+   "label": "Module",
+   "mandatory_depends_on": "is_standard",
+   "options": "Module Def"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-08-25 15:30:29.945954",
+ "modified": "2025-09-08 19:12:34.734581",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Page",
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ecd33fcfb..f0ff7003f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -109,15 +109,16 @@ class BuilderPage(WebsiteGenerator):
 		canonical_url: DF.Data | None
 		client_scripts: DF.TableMultiSelect[BuilderPageClientScript]
 		disable_indexing: DF.Check
-		display_name: DF.Data | None
 		draft_blocks: DF.JSON | None
 		dynamic_route: DF.Check
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		is_standard: DF.Check
 		is_template: DF.Check
+		language: DF.Data | None
 		meta_description: DF.SmallText | None
 		meta_image: DF.AttachImage | None
+		module: DF.Link | None
 		page_data_script: DF.Code | None
 		page_name: DF.Data | None
 		page_title: DF.Data | None
@@ -190,6 +191,13 @@ def on_update(self):
 		if frappe.conf.developer_mode and self.is_template:
 			save_as_template(self)
 
+		if frappe.conf.developer_mode and self.is_standard and self.module:
+			from frappe.modules.utils import get_module_app
+
+			app = get_module_app(self.module)
+			if app:
+				export_page_as_standard(self.name, target_app=app)
+
 	def clear_route_cache(self):
 		get_web_pages_with_dynamic_routes.clear_cache()
 		find_page_with_path.clear_cache()
@@ -867,8 +875,6 @@ def reset_block(block):
 @frappe.whitelist()
 def export_page_as_standard(page_name, target_app="builder", export_name=None):
 	"""Export a builder page as standard files to the specified app"""
-	import json
-
 	if not frappe.has_permission("Builder Page", ptype="write"):
 		frappe.throw("You do not have permission to export pages.")
 
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 97284c825..57a225697 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -55,7 +55,6 @@ declare module 'vue' {
     DraggablePopup: typeof import('./src/components/Controls/DraggablePopup.vue')['default']
     DynamicValueHandler: typeof import('./src/components/Controls/DynamicValueHandler.vue')['default']
     EditableSpan: typeof import('./src/components/EditableSpan.vue')['default']
-    ExportPageModal: typeof import('./src/components/Modals/ExportPageModal.vue')['default']
     EyeDropper: typeof import('./src/components/Icons/EyeDropper.vue')['default']
     Files: typeof import('./src/components/Icons/Files.vue')['default']
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
diff --git a/frontend/src/components/MainMenu.vue b/frontend/src/components/MainMenu.vue
index 552dce1f3..1cd8b8181 100644
--- a/frontend/src/components/MainMenu.vue
+++ b/frontend/src/components/MainMenu.vue
@@ -28,12 +28,6 @@
 						onClick: () => pageStore.duplicatePage(pageStore.activePage as BuilderPage),
 						icon: 'copy',
 					},
-					{
-						label: 'Export as Standard',
-						onClick: () => (showExportModal = true),
-						icon: 'download',
-						condition: () => Boolean(pageStore.activePage),
-					},
 					{
 						label: `Toggle Theme`,
 						onClick: () => toggleDark(),
@@ -80,9 +74,6 @@
 			</div>
 		</template>
 	</Dropdown>
-
-	<!-- Export Modal -->
-	<ExportPageModal v-model="showExportModal" :page-name="pageStore.activePage?.name" />
 </template>
 <script setup lang="ts">
 import useCanvasStore from "@/stores/canvasStore";
@@ -92,8 +83,6 @@ import { triggerCopyEvent } from "@/utils/helpers";
 
 import { useDark, useToggle } from "@vueuse/core";
 import { Dropdown } from "frappe-ui";
-import { ref } from "vue";
-import ExportPageModal from "./Modals/ExportPageModal.vue";
 
 const pageStore = usePageStore();
 const isDark = useDark({
@@ -102,8 +91,6 @@ const isDark = useDark({
 const toggleDark = useToggle(isDark);
 const canvasStore = useCanvasStore();
 
-const showExportModal = ref(false);
-
 const emit = defineEmits(["showSettings"]);
 
 const handleCopyPage = () => {
diff --git a/frontend/src/components/Modals/ExportPageModal.vue b/frontend/src/components/Modals/ExportPageModal.vue
deleted file mode 100644
index 7827d1f6c..000000000
--- a/frontend/src/components/Modals/ExportPageModal.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-	<Dialog
-		v-model="open"
-		:options="{
-			title: 'Export Page as Standard',
-			size: 'lg',
-		}">
-		<template #body-content>
-			<div class="space-y-4">
-				<div>
-					<FormControl
-						type="select"
-						label="Target App"
-						v-model="selectedApp"
-						:options="appOptions"
-						placeholder="Select an app"></FormControl>
-					<p class="mt-1 text-sm text-gray-600">Choose which app to export the standard page to</p>
-				</div>
-
-				<div>
-					<FormControl
-						type="text"
-						label="Export Name"
-						v-model="exportName"
-						placeholder="Enter name for the exported page"></FormControl>
-					<p class="mt-1 text-sm text-gray-600">
-						This will be used as the folder name. If empty, page name will be used.
-					</p>
-				</div>
-
-				<div class="rounded-lg bg-surface-gray-1 p-4">
-					<h3 class="mb-2 text-sm font-medium text-ink-gray-9">What will be exported:</h3>
-					<ul class="space-y-1 text-sm text-ink-gray-6">
-						<li>Page configuration (blocks, styles, scripts)</li>
-						<li>Assets used in the page (images, files)</li>
-						<li>Client scripts</li>
-						<li>Components used in the page</li>
-						<li>Variables referenced</li>
-					</ul>
-				</div>
-
-				<div class="rounded-lg bg-surface-gray-1 p-4">
-					<h3 class="mb-2 text-sm font-medium text-ink-gray-8">Export Structure:</h3>
-					<div class="font-mono text-sm text-ink-gray-4">
-						{{ selectedApp }}/builder_files/
-						<br />
-						&nbsp;&nbsp;├── pages/{{ exportName || "page-name" }}/
-						<br />
-						&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;└── config.json
-						<br />
-						&nbsp;&nbsp;├── assets/
-						<br />
-						&nbsp;&nbsp;├── client_scripts/
-						<br />
-						&nbsp;&nbsp;├── components/
-						<br />
-						&nbsp;&nbsp;└── variables/
-					</div>
-				</div>
-			</div>
-		</template>
-		<template #actions>
-			<Button variant="solid" :loading="exporting" @click="exportPage">Export Page</Button>
-		</template>
-	</Dialog>
-</template>
-
-<script setup lang="ts">
-import { createResource } from "frappe-ui";
-import { computed, ref, watch } from "vue";
-import { toast } from "vue-sonner";
-
-interface Props {
-	modelValue: boolean;
-	pageName?: string;
-}
-
-interface Emits {
-	(e: "update:modelValue", value: boolean): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const open = computed({
-	get: () => props.modelValue,
-	set: (value) => emit("update:modelValue", value),
-});
-
-const selectedApp = ref("builder");
-const exportName = ref("");
-const exporting = ref(false);
-
-// Fetch available apps
-const appsResource = createResource({
-	url: "builder.api.get_apps_for_export",
-	auto: true,
-});
-
-const appOptions = computed(() => {
-	if (!appsResource.data) return [];
-	return appsResource.data.map((app: any) => ({
-		label: app.title,
-		value: app.name,
-	}));
-});
-
-// Export page resource
-const exportResource = createResource({
-	url: "builder.api.export_page_as_standard",
-	onSuccess: (data: { message: string }) => {
-		toast.success(data.message);
-		open.value = false;
-		exportName.value = "";
-	},
-	onError: (error) => {
-		toast.error("Export failed: " + error.message);
-	},
-});
-
-const exportPage = async () => {
-	if (!props.pageName) {
-		toast.error("No page selected for export");
-		return;
-	}
-
-	if (!selectedApp.value) {
-		toast.error("Please select a target app");
-		return;
-	}
-
-	exporting.value = true;
-	try {
-		await exportResource.submit({
-			page_name: props.pageName,
-			target_app: selectedApp.value,
-			export_name: exportName.value || undefined,
-		});
-	} finally {
-		exporting.value = false;
-	}
-};
-
-// Reset form when dialog opens
-watch(open, (isOpen) => {
-	if (isOpen) {
-		exportName.value = "";
-		selectedApp.value = "builder";
-	}
-});
-</script>
diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 81421bec7..ac32aa3e5 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -127,6 +127,31 @@
 						description="Prevent search engines from indexing this page"
 						:modelValue="Boolean(pageStore.activePage?.disable_indexing)"
 						@update:modelValue="(val: Boolean) => pageStore.updateActivePage('disable_indexing', val)" />
+					<template v-if="isDeveloperMode">
+						<hr class="w-full border-outline-gray-2" />
+						<Switch
+							size="sm"
+							label="Standard Page"
+							description="Make this page a standard page that can be exported to an app"
+							:modelValue="Boolean(pageStore.activePage?.is_standard)"
+							@update:modelValue="(val: Boolean) => pageStore.updateActivePage('is_standard', val)" />
+						<div v-if="pageStore.activePage?.is_standard" class="flex items-center justify-between">
+							<div class="flex flex-col gap-2">
+								<span class="text-base font-medium text-ink-gray-9">Module</span>
+								<p class="text-base text-ink-gray-5">Select the module for this standard page</p>
+							</div>
+							<div>
+								<BuilderInput
+									class="w-fit"
+									type="select"
+									:options="moduleOptions"
+									:modelValue="pageStore.activePage?.module"
+									@update:modelValue="
+										(val: string) => pageStore.updateActivePage('module', val)
+									"></BuilderInput>
+							</div>
+						</div>
+					</template>
 					<hr class="w-full border-outline-gray-2" />
 					<div class="flex items-center justify-between">
 						<div class="flex flex-col gap-2">
@@ -155,6 +180,7 @@ import Switch from "@/components/Controls/Switch.vue";
 import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { builderSettings } from "@/data/builderSettings";
+import moduleDef from "@/data/moduleDef";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderProjectFolder } from "@/types/Builder/BuilderProjectFolder";
@@ -163,6 +189,7 @@ import { computed } from "vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
+const isDeveloperMode = computed(() => Boolean(window.is_developer_mode));
 const fullURL = computed(
 	() => window.location.origin + (pageStore.activePage?.route ? "/" + pageStore.activePage.route : ""),
 );
@@ -182,4 +209,21 @@ const folderOptions = computed(() => {
 
 	return [homeOption, ...options];
 });
+
+const moduleOptions = computed(() => {
+	const defaultOption = {
+		label: "Select Module",
+		value: "",
+	};
+
+	const options =
+		moduleDef.data?.map((module: { name: string; module_name: string }) => {
+			return {
+				label: module.module_name,
+				value: module.name,
+			};
+		}) || [];
+
+	return [defaultOption, ...options];
+});
 </script>
diff --git a/frontend/src/data/moduleDef.ts b/frontend/src/data/moduleDef.ts
new file mode 100644
index 000000000..2dadbf162
--- /dev/null
+++ b/frontend/src/data/moduleDef.ts
@@ -0,0 +1,14 @@
+import { createListResource } from "frappe-ui";
+
+const moduleDef = createListResource({
+	method: "GET",
+	doctype: "Module Def",
+	fields: ["name", "module_name"],
+	orderBy: "`module_name`",
+	cache: "moduleDef",
+	start: 0,
+	pageLength: 200,
+	auto: true,
+});
+
+export default moduleDef;
diff --git a/frontend/src/types/Builder/BuilderPage.ts b/frontend/src/types/Builder/BuilderPage.ts
index b6a43991e..869c96762 100644
--- a/frontend/src/types/Builder/BuilderPage.ts
+++ b/frontend/src/types/Builder/BuilderPage.ts
@@ -17,14 +17,14 @@ export interface BuilderPage{
 	page_name?: string
 	/**	Route : Data	*/
 	route?: string
-	/**	Dynamic Route : Check - Map route parameters into form variables. Example <code>/profile/&lt;user&gt;</code>	*/
+	/**	Dynamic Route : Check - Map route parameters into form variables. Example <code>/profile/:user</code>	*/
 	dynamic_route?: 0 | 1
 	/**	Is Standard : Check	*/
 	is_standard?: 0 | 1
 	/**	Is Template : Check	*/
 	is_template?: 0 | 1
-	/**	Display Name : Data	*/
-	display_name?: string
+	/**	Module : Link - Module Def	*/
+	module?: string
 	/**	Blocks : JSON	*/
 	blocks?: any
 	/**	Draft Blocks : JSON	*/
@@ -52,7 +52,7 @@ You can generate using favicon-generator.org	*/
 	meta_image?: string
 	/**	Canonical URL : Data - The preferred URL version of this page for search engines. If not set, the current page URL will be used.	*/
 	canonical_url?: string
-	/**	Language : Data - Language code for HTML lang attribute (e.g., en, es, fr, de). If not set, the default language from Builder Settings will be used.	*/
+	/**	Language : Data - Language code for HTML (e.g., en, es, fr, de). Uses default if unset.	*/
 	language?: string
 	/**	Authenticated Access : Check - Only allow logged-in users to view this page.	*/
 	authenticated_access?: 0 | 1

From 138971409c560208551bd7f8b56cb38a5525ca61 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 8 Sep 2025 21:10:57 +0530
Subject: [PATCH 006/547] fix: Simplify export_page_as_standard and remove
 permission check

---
 .../doctype/builder_page/builder_page.py      | 31 +++----------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index f0ff7003f..8fe0a2b2c 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -872,14 +872,9 @@ def reset_block(block):
 	return block
 
 
-@frappe.whitelist()
-def export_page_as_standard(page_name, target_app="builder", export_name=None):
+def export_page_as_standard(page_name, target_app, export_name=None):
 	"""Export a builder page as standard files to the specified app"""
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to export pages.")
-
 	page_doc = frappe.get_doc("Builder Page", page_name)
-
 	if not export_name:
 		export_name = page_doc.page_name or page_name
 
@@ -894,27 +889,15 @@ def export_page_as_standard(page_name, target_app="builder", export_name=None):
 	# Create directories and get paths
 	paths = create_export_directories(app_path, export_name)
 
-	# Export all fields except child tables
-	page_config = {}
-	for field in page_doc.meta.fields:
-		value = page_doc.get(field.fieldname)
-		if field.fieldtype in ("Datetime", "Date") and value is not None:
-			value = str(value)
-		page_config[field.fieldname] = value
-
-	# Add some standard metadata fields
-	for key in ["creation", "modified", "owner", "modified_by"]:
-		value = getattr(page_doc, key, None)
-		if key in ["creation", "modified"] and value is not None:
-			value = str(value)
-		page_config[key] = value
+	page_config = page_doc.as_dict()
 
 	config_file_path = os.path.join(paths["page_path"], "config.json")
 
-	blocks = frappe.parse_json(page_config["blocks"])
+	blocks = frappe.parse_json(page_config["draft_blocks"] or page_config["blocks"])
 	if blocks:
 		copy_assets_from_blocks(blocks, paths["assets_path"])
 		page_config["blocks"] = blocks
+		page_config["draft_blocks"] = None
 
 	if page_doc.favicon:
 		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"])
@@ -934,12 +917,6 @@ def export_page_as_standard(page_name, target_app="builder", export_name=None):
 		components = extract_components_from_blocks(blocks)
 		export_components(components, paths["components_path"])
 
-	return {
-		"success": True,
-		"message": f"Page exported successfully to {target_app}",
-		"export_path": paths["page_path"],
-	}
-
 
 @frappe.whitelist()
 def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):

From 670ccd943e0dea7f1fd364802a62a8d9e6a1a9fb Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 9 Sep 2025 16:30:50 +0530
Subject: [PATCH 007/547] fix: Add script to sync on migrate

---
 .../doctype/builder_page/builder_page.py      |  9 +++--
 builder/install.py                            |  3 ++
 builder/utils.py                              | 37 +++++++++++++++----
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 8fe0a2b2c..9a872f8b4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -9,7 +9,7 @@
 import frappe
 import frappe.utils
 from frappe.modules import scrub
-from frappe.modules.export_file import export_to_files
+from frappe.modules.export_file import export_to_files, strip_default_fields
 from frappe.utils import set_request
 from frappe.utils.caching import redis_cache
 from frappe.utils.jinja import render_template
@@ -889,11 +889,12 @@ def export_page_as_standard(page_name, target_app, export_name=None):
 	# Create directories and get paths
 	paths = create_export_directories(app_path, export_name)
 
-	page_config = page_doc.as_dict()
+	page_config = page_doc.as_dict(no_nulls=True)
+	page_config = strip_default_fields(page_doc, page_config)
 
-	config_file_path = os.path.join(paths["page_path"], "config.json")
+	config_file_path = os.path.join(paths["page_path"], f"{export_name}.json")
 
-	blocks = frappe.parse_json(page_config["draft_blocks"] or page_config["blocks"])
+	blocks = frappe.parse_json(page_config.get("draft_blocks") or page_config["blocks"])
 	if blocks:
 		copy_assets_from_blocks(blocks, paths["assets_path"])
 		page_config["blocks"] = blocks
diff --git a/builder/install.py b/builder/install.py
index 7df75eb21..79121563f 100644
--- a/builder/install.py
+++ b/builder/install.py
@@ -6,6 +6,7 @@
 	sync_block_templates,
 	sync_builder_variables,
 	sync_page_templates,
+	sync_standard_builder_pages,
 )
 
 
@@ -16,9 +17,11 @@ def after_install():
 	sync_block_templates()
 	sync_builder_variables()
 	add_composite_index_to_web_page_view()
+	sync_standard_builder_pages()
 
 
 def after_migrate():
 	sync_page_templates()
 	sync_block_templates()
 	sync_builder_variables()
+	sync_standard_builder_pages()
diff --git a/builder/utils.py b/builder/utils.py
index eff65ebbc..b6b9dc631 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -10,6 +10,7 @@
 from urllib.parse import unquote, urlparse
 
 import frappe
+from frappe.modules.export_file import export_to_files
 from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_site_base_path, get_site_path, get_url
 from frappe.utils.safe_exec import (
@@ -496,17 +497,20 @@ def extract_components_from_blocks(blocks):
 
 def export_client_scripts(page_doc, client_scripts_path):
 	"""Export client scripts for a page"""
+	from frappe.modules.export_file import strip_default_fields
+
 	for script_row in page_doc.client_scripts:
 		script_doc = frappe.get_doc("Builder Client Script", script_row.builder_script)
-		script_config = {
-			"script_name": script_doc.name,
-			"script_type": script_doc.script_type,
-			"script": script_doc.script,
-		}
-		script_file_path = os.path.join(client_scripts_path, f"{frappe.scrub(str(script_doc.name))}.json")
+		script_config = script_doc.as_dict(no_nulls=True)
+		script_config = strip_default_fields(script_doc, script_config)
+		fname = frappe.scrub(str(script_doc.name))
+		# ensure the target directory exists before writing the file
+		script_dir = os.path.join(client_scripts_path, fname)
+		os.makedirs(script_dir, exist_ok=True)
+		script_file_path = os.path.join(script_dir, f"{fname}.json")
 
-		with open(script_file_path, "w") as f:
-			json.dump(script_config, f, indent=2)
+		with open(script_file_path, "w", encoding="utf-8") as f:
+			f.write(frappe.as_json(script_config, ensure_ascii=False))
 
 
 def export_components(components, components_path):
@@ -565,3 +569,20 @@ def remove_existing_path(path):
 			shutil.rmtree(path)
 		else:
 			os.remove(path)
+
+
+def sync_standard_builder_pages():
+	print("Syncing Standard Builder Pages")
+	# fetch pages from all apps under builder_files/pages
+	# import components first
+
+	for app in frappe.get_installed_apps():
+		app_path = frappe.get_app_path(app)
+		pages_path = os.path.join(app_path, "builder_files", "pages")
+		client_scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
+		if os.path.exists(client_scripts_path):
+			print(f"Importing components from {client_scripts_path}")
+			make_records(client_scripts_path)
+		if os.path.exists(pages_path):
+			print(f"Importing page from {pages_path}")
+			make_records(pages_path)

From 73c0ef30229841b9544355354fe69cbbc2578411 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 25 Sep 2025 16:47:32 +0530
Subject: [PATCH 008/547] fix: Remove explicit import

---
 .../Modals/ImportStandardPageModal.vue        | 165 ------------------
 frontend/src/pages/PageBuilderDashboard.vue   |   7 +-
 2 files changed, 1 insertion(+), 171 deletions(-)
 delete mode 100644 frontend/src/components/Modals/ImportStandardPageModal.vue

diff --git a/frontend/src/components/Modals/ImportStandardPageModal.vue b/frontend/src/components/Modals/ImportStandardPageModal.vue
deleted file mode 100644
index a4bfd2622..000000000
--- a/frontend/src/components/Modals/ImportStandardPageModal.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-	<Dialog
-		v-model="open"
-		:options="{
-			title: 'Import Standard Page',
-			size: 'lg',
-		}">
-		<template #body-content>
-			<div class="space-y-4">
-				<div>
-					<FormControl
-						type="select"
-						label="Source App"
-						v-model="selectedApp"
-						:options="appOptions"
-						placeholder="Select an app"></FormControl>
-					<p class="mt-1 text-sm text-gray-600">Choose which app contains the standard page</p>
-				</div>
-
-				<div v-if="selectedApp">
-					<FormControl
-						type="select"
-						label="Standard Page"
-						v-model="selectedPage"
-						:options="standardPageOptions"
-						placeholder="Select a standard page"></FormControl>
-					<p class="mt-1 text-sm text-gray-600">Available standard pages in {{ selectedApp }}</p>
-				</div>
-
-				<div v-if="selectedPage">
-					<FormControl
-						type="text"
-						label="New Page Name (Optional)"
-						v-model="newPageName"
-						placeholder="Enter name for the new page"></FormControl>
-					<p class="mt-1 text-sm text-gray-600">
-						If empty, the original page name will be used with "Copy" suffix
-					</p>
-				</div>
-
-				<div v-if="selectedPage" class="rounded-lg bg-green-50 p-4">
-					<h3 class="mb-2 text-sm font-medium text-green-900">Import Process:</h3>
-					<ul class="space-y-1 text-sm text-green-800">
-						<li>Creates a new Builder Page from the standard configuration</li>
-						<li>Imports associated client scripts</li>
-						<li>Preserves all styling and layout</li>
-						<li>Page will be created as unpublished</li>
-					</ul>
-				</div>
-			</div>
-		</template>
-		<template #actions>
-			<Button
-				variant="solid"
-				:loading="importing"
-				:disabled="!selectedApp || !selectedPage"
-				@click="importPage">
-				Import Page
-			</Button>
-		</template>
-	</Dialog>
-</template>
-
-<script setup lang="ts">
-import usePageStore from "@/stores/pageStore";
-import { createResource } from "frappe-ui";
-import { computed, ref, watch } from "vue";
-import { toast } from "vue-sonner";
-
-interface Props {
-	modelValue: boolean;
-}
-
-interface Emits {
-	(e: "update:modelValue", value: boolean): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const pageStore = usePageStore();
-
-const open = computed({
-	get: () => props.modelValue,
-	set: (value) => emit("update:modelValue", value),
-});
-
-const selectedApp = ref("");
-const selectedPage = ref("");
-const newPageName = ref("");
-const importing = ref(false);
-
-// Fetch available apps
-const appsResource = createResource({
-	url: "builder.api.get_apps_for_export",
-	auto: true,
-});
-
-const appOptions = computed(() => {
-	if (!appsResource.data) return [];
-	return appsResource.data.map((app: any) => ({
-		label: app.title,
-		value: app.name,
-	}));
-});
-
-// Mock standard page options - in real implementation, this would
-// scan the app directories for builder_files/pages
-const standardPagesResource = createResource({
-	url: "builder.api.get_standard_pages",
-});
-
-const standardPageOptions = computed(() => {
-	if (!selectedApp.value || !standardPagesResource.data) return [];
-	return standardPagesResource.data.map((page: any) => ({
-		label: `${page.page_title || page.page_name} (${page.folder_name})`,
-		value: page.folder_name,
-	}));
-});
-
-// Watch for app changes to fetch standard pages
-watch(selectedApp, (newApp) => {
-	selectedPage.value = "";
-	if (newApp) {
-		standardPagesResource.submit({ app_name: newApp });
-	}
-});
-
-const importPage = async () => {
-	if (!selectedApp.value || !selectedPage.value) {
-		toast.error("Please select both app and page");
-		return;
-	}
-
-	importing.value = true;
-	try {
-		await pageStore.duplicateStandardPage(
-			selectedApp.value,
-			selectedPage.value,
-			newPageName.value || undefined,
-		);
-		open.value = false;
-		// Reset form
-		selectedApp.value = "";
-		selectedPage.value = "";
-		newPageName.value = "";
-	} finally {
-		importing.value = false;
-	}
-};
-
-// Reset form when dialog opens
-watch(open, (isOpen) => {
-	if (isOpen) {
-		selectedApp.value = "";
-		selectedPage.value = "";
-		newPageName.value = "";
-	}
-});
-
-// Reset page selection when app changes
-watch(selectedApp, () => {
-	selectedPage.value = "";
-});
-</script>
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index f5da2d9c8..661cdd8dc 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -7,9 +7,6 @@
 				class="toolbar sticky top-0 z-10 flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1"
 				ref="toolbar">
 				<div class="flex gap-2">
-					<BuilderButton variant="ghost" iconLeft="download" @click="showImportModal = true">
-						Import Standard
-					</BuilderButton>
 					<router-link
 						:to="{ name: 'builder', params: { pageId: 'new' } }"
 						@click="
@@ -116,7 +113,7 @@
 					<!-- pages -->
 					<div>
 						<div v-if="!webPages.data?.length && !searchFilter && !typeFilter" class="col-span-full">
-							<p class="mt-4 px-3 text-base text-gray-500">
+							<p class="px-3 text-base text-gray-500">
 								You don't have any pages yet. Click on the "+ New" button to create a new page.
 							</p>
 						</div>
@@ -159,13 +156,11 @@
 			v-model="showFolderSelectorDialog"
 			:currentFolder="builderStore.activeFolder"
 			@folderSelected="setFolder"></SelectFolder>
-		<ImportStandardPageModal v-model="showImportModal" />
 	</div>
 </template>
 <script setup lang="ts">
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import DashboardSidebar from "@/components/DashboardSidebar.vue";
-import ImportStandardPageModal from "@/components/Modals/ImportStandardPageModal.vue";
 import SelectFolder from "@/components/Modals/SelectFolder.vue";
 import PageCard from "@/components/PageCard.vue";
 import PageListItem from "@/components/PageListItem.vue";

From a102e3df177ad5b4392a58947c046638be88f38a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 26 Sep 2025 22:41:13 +0530
Subject: [PATCH 009/547] fix: Component export

---
 builder/utils.py | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index b6b9dc631..453689b66 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -518,8 +518,10 @@ def export_components(components, components_path):
 	for component_id in components:
 		try:
 			component_doc = frappe.get_doc("Builder Component", component_id)
+			component_dir = os.path.join(components_path, frappe.scrub(component_doc.component_name))
+			os.makedirs(component_dir, exist_ok=True)
 			component_file_path = os.path.join(
-				components_path, f"{frappe.scrub(component_doc.component_name)}.json"
+				component_dir, f"{frappe.scrub(component_doc.component_name)}.json"
 			)
 
 			with open(component_file_path, "w") as f:
@@ -579,10 +581,10 @@ def sync_standard_builder_pages():
 	for app in frappe.get_installed_apps():
 		app_path = frappe.get_app_path(app)
 		pages_path = os.path.join(app_path, "builder_files", "pages")
-		client_scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
-		if os.path.exists(client_scripts_path):
-			print(f"Importing components from {client_scripts_path}")
-			make_records(client_scripts_path)
+		components_path = os.path.join(app_path, "builder_files", "components")
+		if os.path.exists(components_path):
+			print(f"Importing components from {components_path}")
+			make_records(components_path)
 		if os.path.exists(pages_path):
 			print(f"Importing page from {pages_path}")
 			make_records(pages_path)

From 8b0b9638328daa942e83930c8dc168239d558f71 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 1 Oct 2025 12:52:06 +0530
Subject: [PATCH 010/547] fix: Add Script import

---
 builder/utils.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/builder/utils.py b/builder/utils.py
index 453689b66..2b237d509 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -582,9 +582,13 @@ def sync_standard_builder_pages():
 		app_path = frappe.get_app_path(app)
 		pages_path = os.path.join(app_path, "builder_files", "pages")
 		components_path = os.path.join(app_path, "builder_files", "components")
+		scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
 		if os.path.exists(components_path):
 			print(f"Importing components from {components_path}")
 			make_records(components_path)
+		if os.path.exists(scripts_path):
+			print(f"Importing scripts from {scripts_path}")
+			make_records(scripts_path)
 		if os.path.exists(pages_path):
 			print(f"Importing page from {pages_path}")
 			make_records(pages_path)

From a9572857d751c14b19fc285315678d65fe63d5dd Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Thu, 16 Oct 2025 11:34:16 +0530
Subject: [PATCH 011/547] fix: use backend developer mode flag instead of node
 flag

---
 frontend/index.html  | 1 +
 frontend/src/main.ts | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 465a90b7c..f356630d9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,6 +18,7 @@
 			window.builder_path = "{{ builder_path }}";
 			window.site_name = "{{ site_name }}";
 			window.is_fc_site = "{{ is_fc_site }}";
+			window.is_developer_mode = "{{ is_developer_mode }}";
 		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fa1035301..90a6219f3 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -35,4 +35,3 @@ declare global {
 		is_developer_mode?: boolean;
 	}
 }
-window.is_developer_mode = process.env.NODE_ENV === "development";

From 754696ed498635392380c0ea9c612b44b2d2dcae Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Thu, 16 Oct 2025 11:58:17 +0530
Subject: [PATCH 012/547] fix: don't convert to string

---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index f356630d9..158f825df 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,7 +18,7 @@
 			window.builder_path = "{{ builder_path }}";
 			window.site_name = "{{ site_name }}";
 			window.is_fc_site = "{{ is_fc_site }}";
-			window.is_developer_mode = "{{ is_developer_mode }}";
+			window.is_developer_mode = {{ is_developer_mode }};
 		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>

From 4eb6946eddf172037aacd07c51cb86f7a4076606 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 20 Oct 2025 19:25:25 +0530
Subject: [PATCH 013/547] feat: add block props and block js scripts

---
 .../doctype/builder_page/builder_page.py      |  44 +++
 frontend/src/block.ts                         |  28 ++
 frontend/src/builder.d.ts                     |  10 +
 frontend/src/components/BlockProperties.vue   |   4 +
 .../BlockPropertySections/PropsSection.ts     |  40 +++
 .../BlockPropertySections/ScriptEditor.ts     |  33 +++
 frontend/src/components/PropsEditor.vue       | 254 ++++++++++++++++++
 frontend/src/utils/blockController.ts         |  43 +++
 8 files changed, 456 insertions(+)
 create mode 100644 frontend/src/components/BlockPropertySections/PropsSection.ts
 create mode 100644 frontend/src/components/BlockPropertySections/ScriptEditor.ts
 create mode 100644 frontend/src/components/PropsEditor.vue

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 2d3ccb3af..475c3369e 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -488,6 +488,7 @@ def get_block_html(blocks):
 	font_map = {}
 
 	def get_html(blocks, soup):
+		map_of_inherited_props = {} # block_id -> ancestor_block_id -> prop_key -> prop_value
 		html = ""
 
 		def get_tag(block, soup, data_key=None):
@@ -565,6 +566,33 @@ def get_tag(block, soup, data_key=None):
 				inner_soup = bs.BeautifulSoup(innerContent, "html.parser")
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
+			script_tag = soup.new_tag("script")
+			props_obj = False
+			if block.get("props"):
+				props = []
+				for key, value in block.get("props", {}).items():
+					prop_value = ""
+					if value["type"] == "dynamic":
+						if data_key:
+							prop_value = f"{{{{ {data_key}.{value['value']} }}}}"
+						else:
+							prop_value = f"{{{{ {value['value']} }}}}"
+					elif value["type"] == "static":
+						prop_value = f"{value['value']}"
+					elif value["type"] == "inherited":
+						ancestor_id = value.get("ancestorBlockId")
+						if ancestor_id and block.get("blockId") in map_of_inherited_props:
+							prop_value = map_of_inherited_props[block.get('blockId')].get(ancestor_id, '').get(value['value'], '') 
+					props.append(f"{key}: {prop_value}")
+					if value.get('usedBy'):
+						for child_block_id in value.get('usedBy'):
+							if child_block_id in map_of_inherited_props:
+								map_of_ancestor_props_for_block_id = map_of_inherited_props.get(child_block_id, {})
+								map_of_ancestor_props_for_block_id[block.get("blockId")] = {key: prop_value}
+							else:
+								map_of_inherited_props[child_block_id] = {block.get("blockId"): {key: prop_value}}
+
+				props_obj = f"{{ {', '.join(props)} }}"
 
 			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
 				_key = block.get("dataKey").get("key")
@@ -589,6 +617,14 @@ def get_tag(block, soup, data_key=None):
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
+			if block.get("blockScript"):
+				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
+				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj or '{}'});"
+				print("Script content: ", script_content)
+				script_tag.string = script_content
+				tag.attrs["data-block-id"] = block_unique_id
+				tag.append(script_tag)
+
 			return tag
 
 		for block in blocks:
@@ -699,6 +735,14 @@ def extend_block(block, overridden_block):
 	block["rawStyles"].update(overridden_block.get("rawStyles", {}))
 
 	block["classes"].extend(overridden_block["classes"])
+
+	if not block.get("props"):
+		block["props"] = {}
+	block["props"].update(overridden_block.get("props", {}))
+	
+	if overridden_block.get("blockScript"):
+		block["blockScript"] = overridden_block.get("blockScript")
+ 
 	dataKey = overridden_block.get("dataKey", {})
 	if not block.get("dataKey"):
 		block["dataKey"] = {}
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index bbbf0e247..fd774e3c7 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -42,6 +42,8 @@ class Block implements BlockOptions {
 	parentBlock: Block | null;
 	activeState?: string | null = null;
 	dynamicValues: Array<BlockDataKey>;
+	blockScript?: string;
+	props?: BlockProps;
 	// @ts-expect-error
 	referenceComponent: Block | null;
 	customAttributes: BlockAttributeMap;
@@ -97,6 +99,8 @@ class Block implements BlockOptions {
 		this.tabletStyles = reactive(options.tabletStyles || {});
 		this.attributes = reactive(options.attributes || {});
 		this.dynamicValues = reactive(options.dynamicValues || []);
+		this.blockScript = options.blockScript || "";
+		this.props = options.props || {};
 
 		this.blockName = options.blockName;
 		delete this.attributes.style;
@@ -889,6 +893,30 @@ class Block implements BlockOptions {
 	isInsideRepeater(): boolean {
 		return Boolean(this.getRepeaterParent());
 	}
+	getBlockScript(): string {
+		let blockScript =  "";
+		if(this.isExtendedFromComponent() && !this.blockScript){
+			blockScript = this.referenceComponent?.getBlockScript() || "";
+		} else {
+			blockScript = this.blockScript || "";
+		}
+		return blockScript;
+	}
+	setBlockScript(script: string) {
+		this.blockScript = script;
+	}
+	getBlockProps(): BlockProps {
+		let blockProps = {};
+		if(this.isExtendedFromComponent() && !Object.keys(this.props || {}).length){
+			blockProps = this.referenceComponent?.getBlockProps() || {};
+		} else {
+			blockProps = this.props || {};
+		}
+		return blockProps;
+	}
+	setBlockProps(props: BlockProps){
+		this.props = props;
+	}
 }
 
 function extendWithComponent(
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index aa7550eda..8dcb43f51 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -6,6 +6,16 @@ declare interface BlockStyleMap {
 	[key: styleProperty]: StyleValue;
 }
 
+declare type BlockProps = Record<
+	string,
+	{
+		type: "dynamic" | "static" | "inherited";
+		value: string?;
+		usedBy?: Array<string>;
+		ancestorBlockId?: string;
+	}
+>;
+
 declare interface BlockAttributeMap {
 	[key: string]: string | number | null | undefined;
 }
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 52ed0d380..3627c6db0 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -48,6 +48,8 @@ import styleSection from "@/components/BlockPropertySections/StyleSection";
 import transitionSection from "@/components/BlockPropertySections/TransitionSection";
 import typographySection from "@/components/BlockPropertySections/TypographySection";
 import videoOptionsSection from "@/components/BlockPropertySections/VideoOptionsSection";
+import blockScriptSection from "@/components/BlockPropertySections/ScriptEditor";
+import blockPropsSection from "@/components/BlockPropertySections/PropsSection";
 import useBuilderStore from "@/stores/builderStore";
 import blockController from "@/utils/blockController";
 import { toValue } from "@vueuse/core";
@@ -119,5 +121,7 @@ const sections = [
 	dataKeySection,
 	customAttributesSection,
 	rawStyleSection,
+	blockScriptSection,
+	blockPropsSection,
 ] as PropertySection[];
 </script>
diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/PropsSection.ts
new file mode 100644
index 000000000..0c8316d70
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/PropsSection.ts
@@ -0,0 +1,40 @@
+import PropsEditor from "../PropsEditor.vue";
+import blockController from "@/utils/blockController";
+import { computed } from "vue";
+
+const rawStyleSectionProperties = [
+	{
+		component: PropsEditor,
+		getProps: () => {
+			return {
+				obj: blockController.getBlockProps(),
+				description: `
+					<b>Note:</b>
+					<br />
+					<br />
+					• A block can have multiple props
+					<br />
+					• Props can be static values, dynamic values (from data script), or inherited from ancestor blocks
+				`,
+			};
+		},
+		searchKeyWords: "Props, Interface Props, Properties, Block Props, Block Properties",
+		events: {
+			"update:obj": (obj: BlockProps) => blockController.setBlockProps(obj), // TODO: race condition?
+			"update:ancestorUpdateDependency": (
+				propKey: string,
+				ancestorBlockId: string,
+				action: "add" | "remove", // TODO: better name?
+			) => blockController.updateBlockPropsDependencyForAncestor(propKey, ancestorBlockId, action),
+		},
+	},
+];
+
+export default {
+	name: "Props",
+	properties: rawStyleSectionProperties,
+	collapsed: computed(() => {
+		return Object.keys(blockController.getBlockProps()).length === 0;
+	}),
+	condition: () => !blockController.multipleBlocksSelected(),
+};
diff --git a/frontend/src/components/BlockPropertySections/ScriptEditor.ts b/frontend/src/components/BlockPropertySections/ScriptEditor.ts
new file mode 100644
index 000000000..36e790477
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/ScriptEditor.ts
@@ -0,0 +1,33 @@
+import { computed } from "vue";
+import CodeEditor from "../Controls/CodeEditor.vue";
+import blockController from "@/utils/blockController";
+
+const blockScriptProperties = [
+	{
+		component: CodeEditor,
+		getProps: () => {
+			return {
+				modelValue: blockController.getBlockScript(),
+				type: "JavaScript",
+				readonly: false,
+				height: "200px",
+				showLineNumbers: true,
+				autofocus: true,
+				showSaveButton: true,
+				description:
+					"Add custom scripts to enhance block functionality.",
+			};
+		},
+		searchKeyWords: "Block Script, Script, JS, JavaScript, Custom Script",
+		events: {
+			save: (script: string) => blockController.setBlockScript(script),
+		},
+	},
+];
+
+export default {
+	name: "Block Script",
+	properties: blockScriptProperties,
+	collapsed: !blockController.getBlockScript()?.trim(),
+	condition: () => !blockController.multipleBlocksSelected(),
+};
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
new file mode 100644
index 000000000..87311ea24
--- /dev/null
+++ b/frontend/src/components/PropsEditor.vue
@@ -0,0 +1,254 @@
+<template>
+	<div ref="propsEditor" class="flex flex-col gap-2">
+		<div v-for="(value, key, index) in obj" :key="index" class="flex gap-2">
+			<BuilderInput
+				placeholder="Property"
+				:modelValue="key"
+				@update:modelValue="(val: string) => replaceKey(key, val)" />
+			<Autocomplete
+				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:font-mono [&>div>input]:text-xs"
+				:class="{
+					'[&>div>input]:pl-8': value.value,
+					'[&>div>input]:text-ink-gray-7': !value.value,
+					'[&>.form-input]:bg-surface-violet-1 [&>div>input]:text-ink-violet-1':
+						value.type == 'dynamic' && value.value,
+					'[&>.form-input]:bg-surface-blue-1 [&>div>input]:text-ink-blue-3':
+						value.type == 'static' && value.value,
+					'[&>.form-input]:bg-surface-green-1 [&>div>input]:text-ink-green-3':
+						value.type == 'inherited' && value.value,
+				}"
+				v-bind="events"
+				ref="autoCompleteRef"
+				placeholder="undefined"
+				:modelValue="value.value"
+				:getOptions="getOptions"
+				@update:modelValue="
+					(option) => {
+						(autoCompleteRef?.value?.[index] as any)?.blur();
+						updateObjectValue(
+							key,
+							typeof option == 'string'
+								? `static--${blockController.getFirstSelectedBlock()?.blockId}--${option}`
+								: option?.value,
+						);
+					}
+				">
+				<template #prefix v-if="value.value">
+					<LucideZap v-if="value.type == 'dynamic'" class="absolute left-0 top-0 h-4 w-4 text-ink-violet-1" />
+					<LucideCaseSensitive
+						v-else-if="value.type == 'static'"
+						class="absolute left-0 top-0 h-4 w-4 text-ink-blue-3" />
+					<LucideListTree
+						v-else-if="value.type == 'inherited'"
+						class="absolute left-0 top-0 h-4 w-4 text-ink-green-3" />
+				</template>
+			</Autocomplete>
+			<BuilderButton
+				class="flex-shrink-0 text-xs"
+				variant="subtle"
+				icon="x"
+				@click="deleteObjectKey(key as string)" />
+		</div>
+		<BuilderButton variant="subtle" label="Add" @click="addObjectKey"></BuilderButton>
+		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
+			<span v-html="description"></span>
+		</p>
+	</div>
+</template>
+<script setup lang="ts">
+import { getCollectionKeys, getDataForKey, mapToObject, replaceMapKey } from "@/utils/helpers";
+import { computed, defineComponent, h, nextTick, ref, shallowRef, useAttrs, watch, watchEffect } from "vue";
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import usePageStore from "@/stores/pageStore";
+import blockController from "@/utils/blockController";
+import Block from "@/block";
+// @ts-ignore
+import LucideZap from "~icons/lucide/zap";
+// @ts-ignore
+import LucideCaseSensitive from "~icons/lucide/case-sensitive";
+// @ts-ignore
+import LucideListTree from "~icons/lucide/list-tree";
+
+const attrs = useAttrs();
+const events = Object.fromEntries(
+	Object.entries(attrs).filter(([key]) => key.startsWith("onFocus") || key.startsWith("onBlur")),
+);
+
+const autoCompleteRef = ref<typeof Autocomplete | null>(null);
+
+const pageStore = usePageStore();
+
+const props = defineProps<{
+	obj: BlockProps;
+	description?: string;
+}>();
+
+const propsEditor = ref<HTMLElement | null>(null);
+
+const emit = defineEmits({
+	"update:obj": (obj: BlockProps) => true,
+	"update:ancestorUpdateDependency": (propKey: string, ancestorBlockId: string, action: "add" | "remove") =>
+		true,
+});
+// better name
+type PropOptions = { path: string; type: "dynamic" | "inherited" | "static"; blockId?: string | null };
+
+// why computed? no dependency tracking needed right?
+const dataArray = computed(() => {
+	const result: PropOptions[] = [];
+	let collectionObject = pageStore.pageData;
+	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
+		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
+		collectionObject = keys.reduce((acc: any, key: string) => {
+			const data = getDataForKey(acc, key);
+			return Array.isArray(data) && data.length > 0 ? data[0] : data;
+		}, collectionObject);
+	}
+
+	function processObject(obj: Record<string, any>, prefix = "") {
+		Object.entries(obj).forEach(([key, value]) => {
+			const path = prefix ? `${prefix}.${key}` : key;
+
+			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+				processObject(value, path);
+			} else if (["string", "number", "boolean"].includes(typeof value)) {
+				result.push({ path, type: "dynamic" });
+			}
+		});
+	}
+
+	processObject(collectionObject);
+	return result;
+});
+
+const getParentProps = (baseBlock: Block, baseProps: PropOptions[]): PropOptions[] => {
+	const parentBlock = baseBlock.getParentBlock();
+	if (parentBlock) {
+		const parentProps: PropOptions[] = Object.keys(parentBlock.getBlockProps()).map((key) => ({
+			path: key,
+			type: "inherited",
+			blockId: parentBlock.blockId,
+		}));
+		const combinedProps = [...baseProps, ...parentProps];
+		return getParentProps(parentBlock, combinedProps);
+	} else {
+		return baseProps;
+	}
+};
+
+const getOptions = async (query: string) => {
+	const parentPropsArray = getParentProps(blockController.getFirstSelectedBlock()!, []);
+
+	const options = [
+		...new Set([...parentPropsArray, ...dataArray.value]),
+		...(query ? [{ path: query, type: "static", blockId: null } as PropOptions] : []),
+	]
+		.filter((prop) => prop.path.toLowerCase().includes(query.toLowerCase()))
+		.map((prop) => ({
+			label: prop.path || "",
+			value: `${prop.type}--${
+				blockController.getFirstSelectedBlock()?.blockId +
+				(prop.type === "inherited" ? "." + prop.blockId : "")
+			}--${prop.path}`,
+			suffix: h(
+				prop.type === "dynamic" ? LucideZap : prop.type === "static" ? LucideCaseSensitive : LucideListTree,
+				{
+					class: "ml-2 rounded px-1 py-0.5 text-xs text-ink-gray-6 shrink-0",
+				},
+			),
+		}));
+
+	return options;
+};
+
+const addObjectKey = async () => {
+	const map = new Map(Object.entries(props.obj));
+	map.set("", { type: "static", value: "" });
+	emit("update:obj", mapToObject(map));
+	await nextTick();
+	const inputs = propsEditor.value?.querySelectorAll("input");
+	if (inputs) {
+		const lastInput = inputs[inputs.length - 2];
+		lastInput.focus();
+	}
+};
+
+const clearObjectValue = (key: string) => {
+	const map = new Map(Object.entries(props.obj));
+	const oldValue = map.get(key);
+	const oldPath = oldValue?.value;
+	const oldAncestor = oldValue?.ancestorBlockId;
+	
+	map.set(key, {
+		...oldValue!,
+		value: null,
+		type: "static",
+	});
+	
+	emit("update:obj", mapToObject(map));
+	
+	if (oldAncestor && oldPath) {
+		emit("update:ancestorUpdateDependency", oldPath, oldAncestor, "remove");
+	}
+};
+
+const updateObjectValue = (key: string, value: string | null) => {
+	if (!value) {
+		clearObjectValue(key);
+		return;
+	}
+	
+	const map = new Map(Object.entries(props.obj));
+	const splitValue = value.split("--");
+	const [type, id, ...pathParts] = splitValue;
+	const path = pathParts.join("--") || null;
+	
+	
+	const ancestor = type === "inherited" ? id?.split(".")[1] : null;
+	const oldPath = map.get(key)?.value;
+	const oldAncestor = map.get(key)?.ancestorBlockId;
+	
+	map.set(key, {
+		...map.get(key)!,
+		...(type === "inherited" ? { ancestorBlockId: id?.split(".")[1] } : {}),
+		value: type === "static" ? JSON.stringify(path) : path,
+		type: type as BlockProps[string]["type"],
+	});
+	
+	emit("update:obj", mapToObject(map));
+	
+	if (ancestor && path) {
+		emit("update:ancestorUpdateDependency", path, ancestor, "add");
+	} else if (oldAncestor && oldPath) {
+		emit("update:ancestorUpdateDependency", oldPath, oldAncestor, "remove");
+	}
+};
+
+const replaceKey = (oldKey: string, newKey: string) => {
+	const map = new Map(Object.entries(props.obj));
+	emit("update:obj", mapToObject(replaceMapKey(map, oldKey, newKey)));
+};
+
+const deleteObjectKey = (key: string) => {
+	const map = new Map(Object.entries(props.obj));
+	const value = map.get(key);
+	const path = value?.value;
+	const ancestor = value?.ancestorBlockId;
+	map.delete(key);
+	emit("update:obj", mapToObject(map));
+	if (path && ancestor) emit("update:ancestorUpdateDependency", path, ancestor, "remove");
+};
+
+watch(
+	[() => props.obj, () => blockController.getSelectedBlocks(), () => pageStore.pageData],
+	() => {
+		if (Array.isArray(autoCompleteRef.value)) {
+			autoCompleteRef.value.forEach((ref) => {
+				ref?.updateOptions();
+			});
+		}
+	},
+	{ immediate: true },
+);
+
+</script>
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 0ee121ad9..d0e7b4aec 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -301,6 +301,49 @@ const blockController = {
 			block.unsetLink();
 		});
 	},
+	getBlockScript: () => {
+		return blockController.getSelectedBlocks()[0]?.getBlockScript(); // TODO: change to first selected block
+	},
+	setBlockScript: (script: string) => {
+		blockController.getSelectedBlocks()[0]?.setBlockScript(script);
+	},
+	getBlockProps: () => {
+		return blockController.getSelectedBlocks()[0]?.getBlockProps();
+	},
+	setBlockProps: (props: BlockProps) => {
+		blockController.getSelectedBlocks()[0]?.setBlockProps(props);
+	},
+	// TODO: should go in other file?
+	updateBlockPropsDependencyForAncestor: (
+		propKey: string,
+		ancestorBlockId: string,
+		action: "add" | "remove",
+	) => {
+		let currentBlock = blockController.getFirstSelectedBlock();
+		// go up the tree
+		let parentBlock: Block | null = currentBlock.getParentBlock();
+		while (parentBlock?.blockId != ancestorBlockId) {
+			parentBlock = parentBlock?.getParentBlock() || null;
+		}
+		if (parentBlock) {
+			let props = parentBlock.props;
+			if (props) {
+				let usedBy = props[propKey]["usedBy"];
+				if (action === "add") {
+					usedBy = [...new Set([...(usedBy || []), currentBlock.blockId])];
+				} else {
+					usedBy = usedBy?.filter((blockId) => blockId != currentBlock.blockId);
+				}
+				parentBlock.setBlockProps({
+					...props,
+					[propKey]: {
+						...props[propKey],
+						usedBy,
+					},
+				});
+			}
+		}
+	},
 };
 
 export default blockController;

From e484e777fd5de743efbb88a8e42c6c71a98bab65 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 23 Oct 2025 15:07:17 +0530
Subject: [PATCH 014/547] fix(block-props): disallow empty prop names

---
 frontend/src/components/PropsEditor.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 87311ea24..b30ab2a4e 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -61,6 +61,8 @@ import { computed, defineComponent, h, nextTick, ref, shallowRef, useAttrs, watc
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
+import { toast } from "vue-sonner";
+
 import Block from "@/block";
 // @ts-ignore
 import LucideZap from "~icons/lucide/zap";
@@ -193,6 +195,10 @@ const clearObjectValue = (key: string) => {
 };
 
 const updateObjectValue = (key: string, value: string | null) => {
+	if(!key){
+		toast.error("Property name cannot be empty.");
+		return;
+	}
 	if (!value) {
 		clearObjectValue(key);
 		return;

From 5e5bec8dae3a2279ff88f778f67e8dee88eaf778 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Fri, 24 Oct 2025 10:30:21 +0530
Subject: [PATCH 015/547] fix(block-props): changed const name in
 PropsSection.ts

used the rawStylesSection as a template to create the props section to maintain consistency but forgot to update the name
---
 frontend/src/components/BlockPropertySections/PropsSection.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/PropsSection.ts
index 0c8316d70..78673eb6e 100644
--- a/frontend/src/components/BlockPropertySections/PropsSection.ts
+++ b/frontend/src/components/BlockPropertySections/PropsSection.ts
@@ -2,7 +2,7 @@ import PropsEditor from "../PropsEditor.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 
-const rawStyleSectionProperties = [
+const propsSection = [
 	{
 		component: PropsEditor,
 		getProps: () => {
@@ -32,7 +32,7 @@ const rawStyleSectionProperties = [
 
 export default {
 	name: "Props",
-	properties: rawStyleSectionProperties,
+	properties: propsSection,
 	collapsed: computed(() => {
 		return Object.keys(blockController.getBlockProps()).length === 0;
 	}),

From 162eff82b8fe448e28d32ec73a2fe0e1f3b6d274 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 27 Oct 2025 11:39:03 +0530
Subject: [PATCH 016/547] test: Add tests to improve utils coverage

---
 builder/builder/tests/test_utils.py | 316 ++++++++++++++++++++++++++++
 builder/utils.py                    |  11 +-
 2 files changed, 321 insertions(+), 6 deletions(-)

diff --git a/builder/builder/tests/test_utils.py b/builder/builder/tests/test_utils.py
index b5412eb1b..7f0dda194 100644
--- a/builder/builder/tests/test_utils.py
+++ b/builder/builder/tests/test_utils.py
@@ -1,18 +1,27 @@
 import os
+from unittest.mock import patch
 
 import frappe
 from frappe.tests.utils import FrappeTestCase
 
 from builder.utils import (
+	Block,
 	ColonRule,
 	camel_case_to_kebab_case,
 	clean_data,
+	copy_asset_file,
+	copy_assets_from_blocks,
+	copy_img_to_asset_folder,
 	escape_single_quotes,
 	execute_script,
+	extract_components_from_blocks,
 	get_builder_page_preview_file_paths,
 	get_template_assets_folder_path,
 	is_component_used,
+	make_safe_get_request,
+	process_block_assets,
 	remove_unsafe_fields,
+	split_styles,
 )
 
 
@@ -145,3 +154,310 @@ def test_clean_data(self):
 		}
 		cleaned_data = clean_data(data)
 		self.assertEqual(cleaned_data, {"test": "value", "test2": "value2", "test4": None, "test5": {}})
+
+	def test_make_safe_get_request(self):
+		# Test with local/private IP addresses (should return None)
+		self.assertIsNone(make_safe_get_request("http://127.0.0.1/test"))
+		self.assertIsNone(make_safe_get_request("http://localhost/test"))
+
+		# Test with invalid URL
+		with self.assertRaises(Exception):
+			make_safe_get_request("not-a-url")
+
+	def test_split_styles(self):
+		# Test with None
+		result = split_styles(None)
+		self.assertEqual(result, {"regular": {}, "state": {}})
+
+		# Test with mixed styles
+		styles = {"color": "red", "margin": "10px", "hover:color": "blue", "focus:border": "1px solid black"}
+		result = split_styles(styles)
+
+		self.assertEqual(result["regular"], {"color": "red", "margin": "10px"})
+		self.assertEqual(result["state"], {"hover:color": "blue", "focus:border": "1px solid black"})
+
+	def test_copy_assets_from_blocks(self):
+		# Create a temporary directory for testing
+		import tempfile
+
+		with tempfile.TemporaryDirectory() as temp_dir:
+			# Test with single block
+			block = Block(element="img", attributes={"src": "/files/test.jpg"})
+			copy_assets_from_blocks(block, temp_dir)
+
+			# Test with list of blocks
+			blocks = [
+				{
+					"element": "div",
+					"children": [{"element": "img", "attributes": {"src": "/files/test2.jpg"}}],
+				},
+				{"element": "video", "attributes": {"src": "/files/test.mp4"}},
+			]
+			copy_assets_from_blocks(blocks, temp_dir)
+
+	def test_process_block_assets(self):
+		import tempfile
+
+		with tempfile.TemporaryDirectory() as temp_dir:
+			# Test with img element
+			block = {"element": "img", "attributes": {"src": "/files/test.jpg"}}
+			process_block_assets(block, temp_dir)
+
+			# Test with video element
+			block = {"element": "video", "attributes": {"src": "/files/test.mp4"}}
+			process_block_assets(block, temp_dir)
+
+			# Test with non-media element
+			block = {"element": "div", "attributes": {"class": "test"}}
+			process_block_assets(block, temp_dir)
+
+	def test_copy_asset_file(self):
+		import tempfile
+
+		with tempfile.TemporaryDirectory() as temp_dir:
+			# Test with None/invalid inputs
+			result = copy_asset_file(None, temp_dir)
+			self.assertIsNone(result)
+
+			result = copy_asset_file("", temp_dir)
+			self.assertIsNone(result)
+
+			result = copy_asset_file(123, temp_dir)
+			self.assertIsNone(result)
+
+			# Test with non-existent file URLs
+			result = copy_asset_file("/files/nonexistent.jpg", temp_dir)
+			self.assertIsNone(result)
+
+			result = copy_asset_file("/builder_assets/nonexistent.jpg", temp_dir)
+			self.assertIsNone(result)
+
+	def test_extract_components_from_blocks(self):
+		# Test with blocks containing components
+		blocks = [
+			{
+				"element": "div",
+				"extendedFromComponent": "TestComponent1",
+				"children": [{"element": "span", "extendedFromComponent": "TestComponent2"}],
+			},
+			{
+				"element": "section",
+				"children": [{"element": "div", "extendedFromComponent": "TestComponent1"}],
+			},
+		]
+
+		# Mock frappe.get_cached_doc using unittest.mock
+
+		with patch("frappe.get_cached_doc") as mock_get_cached_doc:
+			mock_get_cached_doc.return_value = frappe._dict(block='{"element": "div"}')
+
+			components = extract_components_from_blocks(blocks)
+			self.assertIn("TestComponent1", components)
+			self.assertIn("TestComponent2", components)
+
+		# Test with single block (not a list)
+		single_block = {"element": "div", "extendedFromComponent": "SingleComponent"}
+
+		with patch("frappe.get_cached_doc") as mock_get_cached_doc:
+			mock_get_cached_doc.return_value = frappe._dict(block='{"element": "div"}')
+
+			components = extract_components_from_blocks(single_block)
+			self.assertIn("SingleComponent", components)
+
+	def test_copy_img_to_asset_folder(self):
+		test_page = frappe._dict(name="test-page")
+
+		# Test with non-img elements (should be ignored)
+		block = Block()
+		block.element = "div"
+		block.children = []
+		copy_img_to_asset_folder(block, test_page)  # Should not raise error
+
+		# Test with img element but no attributes
+		block = Block()
+		block.element = "img"
+		block.attributes = None
+		block.children = []
+		copy_img_to_asset_folder(block, test_page)  # Should not raise error
+
+		# Test with img element but no src attribute
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict()
+		block.children = []
+		copy_img_to_asset_folder(block, test_page)  # Should not raise error
+
+		# Test with img element and external src (should be ignored)
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="https://example.com/image.jpg")
+		block.children = []
+		original_src = block.attributes.src
+		copy_img_to_asset_folder(block, test_page)
+		self.assertEqual(block.attributes.src, original_src)  # Should remain unchanged
+
+		# Test with img element and builder_assets src (should be ignored)
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/builder_assets/local-image.jpg")
+		block.children = []
+		original_src = block.attributes.src
+		copy_img_to_asset_folder(block, test_page)
+		self.assertEqual(block.attributes.src, original_src)  # Should remain unchanged
+
+		# Test with nested blocks containing img elements
+		child_block = Block()
+		child_block.element = "img"
+		child_block.attributes = frappe._dict(src="https://example.com/nested.jpg")
+		child_block.children = []
+
+		parent_block = Block()
+		parent_block.element = "div"
+		parent_block.attributes = frappe._dict()
+		parent_block.children = [child_block]
+
+		copy_img_to_asset_folder(parent_block, test_page)  # Should process children recursively
+
+		# Test with local file src that doesn't exist in database
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/files/nonexistent-image.jpg")
+		block.children = []
+
+		with patch("frappe.get_all") as mock_get_all:
+			mock_get_all.return_value = []  # No files found
+			original_src = block.attributes.src
+			copy_img_to_asset_folder(block, test_page)
+			# Should update src even if file not found
+			self.assertEqual(block.attributes.src, f"/builder_assets/{test_page.name}/nonexistent-image.jpg")
+
+		# Test with valid local file that exists in database
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/files/test-image.jpg")
+		block.children = []
+
+		mock_file = frappe._dict()
+		mock_file.get_full_path = lambda: "/fake/path/test-image.jpg"
+
+		with (
+			patch("frappe.get_all") as mock_get_all,
+			patch("frappe.get_doc") as mock_get_doc,
+			patch("shutil.copy") as mock_copy,
+			patch("builder.utils.get_template_assets_folder_path") as mock_get_path,
+		):
+			mock_get_all.return_value = [frappe._dict(name="file-123")]
+			mock_get_doc.return_value = mock_file
+			mock_get_path.return_value = "/fake/assets/path"
+
+			copy_img_to_asset_folder(block, test_page)
+
+			# Verify file operations were called correctly
+			mock_get_all.assert_called_once_with(
+				"File", filters={"file_url": "/files/test-image.jpg"}, fields=["name"]
+			)
+			mock_get_doc.assert_called_once_with("File", "file-123")
+			mock_copy.assert_called_once_with("/fake/path/test-image.jpg", "/fake/assets/path")
+
+			# Verify src was updated correctly
+			self.assertEqual(block.attributes.src, f"/builder_assets/{test_page.name}/test-image.jpg")
+
+		# Test with site URL prefix in src
+		site_url = frappe.utils.get_url()
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src=f"{site_url}/files/prefixed-image.jpg")
+		block.children = []
+
+		with patch("frappe.get_all") as mock_get_all:
+			mock_get_all.return_value = []
+			copy_img_to_asset_folder(block, test_page)
+			# Should strip site URL and update path
+			self.assertEqual(block.attributes.src, f"/builder_assets/{test_page.name}/prefixed-image.jpg")
+
+		# Test with URL-encoded filename
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/files/image%20with%20spaces.jpg")
+		block.children = []
+
+		with patch("frappe.get_all") as mock_get_all:
+			# Should decode URL and search for decoded filename
+			mock_get_all.return_value = []
+			copy_img_to_asset_folder(block, test_page)
+			mock_get_all.assert_called_with(
+				"File", filters={"file_url": "/files/image with spaces.jpg"}, fields=["name"]
+			)
+			self.assertEqual(block.attributes.src, f"/builder_assets/{test_page.name}/image with spaces.jpg")
+
+		# Test error handling when file copy fails
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/files/error-test.jpg")
+		block.children = []
+
+		mock_file = frappe._dict()
+		mock_file.get_full_path = lambda: "/fake/path/error-test.jpg"
+
+		with (
+			patch("frappe.get_all") as mock_get_all,
+			patch("frappe.get_doc") as mock_get_doc,
+			patch("shutil.copy") as mock_copy,
+			patch("builder.utils.get_template_assets_folder_path") as mock_get_path,
+		):
+			mock_get_all.return_value = [frappe._dict(name="file-456")]
+			mock_get_doc.return_value = mock_file
+			mock_get_path.return_value = "/fake/assets/path"
+			mock_copy.side_effect = OSError("Permission denied")
+
+			# Function should raise exception when copy fails
+			with self.assertRaises(OSError):
+				copy_img_to_asset_folder(block, test_page)
+
+		# Test with empty/None src attribute
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="")
+		block.children = []
+		copy_img_to_asset_folder(block, test_page)  # Should not process empty src
+
+		block.attributes = frappe._dict(src=None)
+		copy_img_to_asset_folder(block, test_page)  # Should not process None src
+
+		# Test with malformed URLs
+		block = Block()
+		block.element = "img"
+		block.attributes = frappe._dict(src="/uploads/image.jpg")  # Not a /files path
+		block.children = []
+		original_src = block.attributes.src
+		copy_img_to_asset_folder(block, test_page)
+		self.assertEqual(block.attributes.src, original_src)  # Should remain unchanged
+
+		# Test deeply nested structure
+		grandchild = Block()
+		grandchild.element = "img"
+		grandchild.attributes = frappe._dict(src="/files/deep-nested.jpg")
+		grandchild.children = []
+
+		child = Block()
+		child.element = "span"
+		child.attributes = frappe._dict()
+		child.children = [grandchild]
+
+		parent = Block()
+		parent.element = "div"
+		parent.attributes = frappe._dict()
+		parent.children = [child]
+
+		with patch("frappe.get_all") as mock_get_all:
+			mock_get_all.return_value = []
+			copy_img_to_asset_folder(parent, test_page)
+			# Should process grandchild img element
+			self.assertEqual(grandchild.attributes.src, f"/builder_assets/{test_page.name}/deep-nested.jpg")
+
+		# Test with block that has None children
+		block = Block()
+		block.element = "div"
+		block.attributes = frappe._dict()
+		block.children = None
+		copy_img_to_asset_folder(block, test_page)  # Should handle None children gracefully
diff --git a/builder/utils.py b/builder/utils.py
index 2b237d509..5e8ff0996 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -271,8 +271,8 @@ def make_records(path):
 
 
 def copy_img_to_asset_folder(block: Block, page_doc):
-	if block.get("element") == "img":
-		src = block.get("attributes", {}).get("src")
+	if block.element == "img":
+		src = getattr(block.attributes, "src", None) if block.attributes else None
 		site_url = get_url()
 
 		if src and (src.startswith(f"{site_url}/files") or src.startswith("/files")):
@@ -281,16 +281,15 @@ def copy_img_to_asset_folder(block: Block, page_doc):
 				src = src.split(f"{site_url}")[1]
 			# url decode
 			src = unquote(src)
-			print(f"src: {src}")
 			files = frappe.get_all("File", filters={"file_url": src}, fields=["name"])
-			print(f"files: {files}")
 			if files:
 				_file = frappe.get_doc("File", files[0].name)
 				# copy physical file to new location
 				assets_folder_path = get_template_assets_folder_path(page_doc)
 				shutil.copy(_file.get_full_path(), assets_folder_path)
-			block.get("attributes", {})["src"] = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
-	for child in block.get("children", []) or []:
+			if block.attributes:
+				block.attributes["src"] = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
+	for child in block.children or []:
 		copy_img_to_asset_folder(child, page_doc)
 
 

From 869160f59a4074e294e38a35bf35482442e338e3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 27 Oct 2025 12:03:21 +0530
Subject: [PATCH 017/547] fix(utils): Handle attribute error

---
 builder/utils.py | 44 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index 5e8ff0996..c58af345d 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -270,9 +270,33 @@ def make_records(path):
 # 	)
 
 
-def copy_img_to_asset_folder(block: Block, page_doc):
-	if block.element == "img":
-		src = getattr(block.attributes, "src", None) if block.attributes else None
+def copy_img_to_asset_folder(block, page_doc):
+	# Helper function to safely get attribute from block (dict or object)
+	def safe_get(obj, attr, default=None):
+		if isinstance(obj, dict):
+			return obj.get(attr, default)
+		else:
+			return getattr(obj, attr, default)
+
+	# Convert dict to frappe._dict for consistent access
+	if isinstance(block, dict):
+		block = frappe._dict(block)
+		# Also convert children to frappe._dict for consistent access
+		children = block.get("children", [])
+		if children and isinstance(children, list):
+			block.children = [frappe._dict(child) if isinstance(child, dict) else child for child in children]
+
+	# Get element safely
+	element = safe_get(block, "element")
+
+	if element == "img":
+		# Get attributes safely
+		attributes = safe_get(block, "attributes")
+		src = None
+
+		if attributes:
+			src = safe_get(attributes, "src")
+
 		site_url = get_url()
 
 		if src and (src.startswith(f"{site_url}/files") or src.startswith("/files")):
@@ -287,9 +311,17 @@ def copy_img_to_asset_folder(block: Block, page_doc):
 				# copy physical file to new location
 				assets_folder_path = get_template_assets_folder_path(page_doc)
 				shutil.copy(_file.get_full_path(), assets_folder_path)
-			if block.attributes:
-				block.attributes["src"] = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
-	for child in block.children or []:
+
+			new_src = f"/builder_assets/{page_doc.name}/{src.split('/')[-1]}"
+			if attributes:
+				if isinstance(attributes, dict):
+					attributes["src"] = new_src
+				else:
+					attributes.src = new_src
+
+	# Process children safely
+	children = safe_get(block, "children", [])
+	for child in children or []:
 		copy_img_to_asset_folder(child, page_doc)
 
 

From de369a677cb0e0b9ae3539ac95f69e02c52ac0a8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 27 Oct 2025 15:28:58 +0530
Subject: [PATCH 018/547] fix: Make sure standard pages are synced on app
 install

---
 builder/hooks.py   | 1 +
 builder/install.py | 4 ++++
 builder/utils.py   | 6 ++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/builder/hooks.py b/builder/hooks.py
index 7b4231d32..bc3289e57 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -66,6 +66,7 @@
 # before_install = "builder.install.before_install"
 after_install = "builder.install.after_install"
 after_migrate = "builder.install.after_migrate"
+after_app_install = "builder.install.after_app_install"
 
 # Uninstallation
 # ------------
diff --git a/builder/install.py b/builder/install.py
index 79121563f..726f6a933 100644
--- a/builder/install.py
+++ b/builder/install.py
@@ -25,3 +25,7 @@ def after_migrate():
 	sync_block_templates()
 	sync_builder_variables()
 	sync_standard_builder_pages()
+
+
+def after_app_install(app_name=None):
+	sync_standard_builder_pages(app_name)
diff --git a/builder/utils.py b/builder/utils.py
index c58af345d..a4fd5d4ed 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -604,12 +604,14 @@ def remove_existing_path(path):
 			os.remove(path)
 
 
-def sync_standard_builder_pages():
+def sync_standard_builder_pages(app_name=None):
 	print("Syncing Standard Builder Pages")
 	# fetch pages from all apps under builder_files/pages
 	# import components first
 
-	for app in frappe.get_installed_apps():
+	apps_to_sync = [app_name] if app_name else frappe.get_installed_apps()
+
+	for app in apps_to_sync:
 		app_path = frappe.get_app_path(app)
 		pages_path = os.path.join(app_path, "builder_files", "pages")
 		components_path = os.path.join(app_path, "builder_files", "components")

From 469c622c6cb3182fe7ad3da7d2d58355b3e27ddb Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 27 Oct 2025 15:29:44 +0530
Subject: [PATCH 019/547] fix: Use _ if component name has "/" to produce valid
 folder name

---
 builder/utils.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index a4fd5d4ed..77485ec0d 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -549,11 +549,11 @@ def export_components(components, components_path):
 	for component_id in components:
 		try:
 			component_doc = frappe.get_doc("Builder Component", component_id)
-			component_dir = os.path.join(components_path, frappe.scrub(component_doc.component_name))
+			# Replace forward slashes with underscores to create valid directory names
+			safe_component_name = frappe.scrub(component_doc.component_name).replace("/", "_")
+			component_dir = os.path.join(components_path, safe_component_name)
 			os.makedirs(component_dir, exist_ok=True)
-			component_file_path = os.path.join(
-				component_dir, f"{frappe.scrub(component_doc.component_name)}.json"
-			)
+			component_file_path = os.path.join(component_dir, f"{safe_component_name}.json")
 
 			with open(component_file_path, "w") as f:
 				f.write(frappe.as_json(component_doc.as_dict()))

From 97e3e08827ac0db6860834843fb0e7eb1b05d760 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 23 Oct 2025 15:07:17 +0530
Subject: [PATCH 020/547] fix(block-props): disallow empty prop names

---
 frontend/src/components/PropsEditor.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 87311ea24..b30ab2a4e 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -61,6 +61,8 @@ import { computed, defineComponent, h, nextTick, ref, shallowRef, useAttrs, watc
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
+import { toast } from "vue-sonner";
+
 import Block from "@/block";
 // @ts-ignore
 import LucideZap from "~icons/lucide/zap";
@@ -193,6 +195,10 @@ const clearObjectValue = (key: string) => {
 };
 
 const updateObjectValue = (key: string, value: string | null) => {
+	if(!key){
+		toast.error("Property name cannot be empty.");
+		return;
+	}
 	if (!value) {
 		clearObjectValue(key);
 		return;

From 7cecd619fcecdbf8b00bf78f1d085245542cc22d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 30 Oct 2025 00:19:08 +0530
Subject: [PATCH 021/547] fix(block-props): removed blockId dependency for
 props

previously, block props relied on blockIds to manage inheritance. This caused issues when using components - each component instance generated new blockIds for its blocks, breaking prop references that still pointed to the original component blockIds. maintaining and updating these blockId dependencies became increasingly complex and error-prone.

this commit removes the dependency on blockIds entirely.
Props are now identified by their names, and a stack-based approach is used to resolve inherited values. the system now behaves similarly to variable scoping in programming languages - where inherited props take the value of the nearest ancestor with the same prop name in the faimly tree (block scoping in programming)
---
 .../doctype/builder_page/builder_page.py      | 50 ++++++------
 frontend/components.d.ts                      |  1 +
 frontend/src/block.ts                         | 12 +--
 .../BlockPropertySections/PropsSection.ts     |  3 +-
 frontend/src/components/PropsEditor.vue       | 79 +++++++++----------
 frontend/src/utils/blockController.ts         | 22 ++++--
 6 files changed, 89 insertions(+), 78 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 475c3369e..9d59cacb7 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -488,7 +488,7 @@ def get_block_html(blocks):
 	font_map = {}
 
 	def get_html(blocks, soup):
-		map_of_inherited_props = {} # block_id -> ancestor_block_id -> prop_key -> prop_value
+		map_of_inherited_props = {} # prop_name -> array<values>
 		html = ""
 
 		def get_tag(block, soup, data_key=None):
@@ -566,31 +566,34 @@ def get_tag(block, soup, data_key=None):
 				inner_soup = bs.BeautifulSoup(innerContent, "html.parser")
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
+
 			script_tag = soup.new_tag("script")
-			props_obj = False
+			props_obj = {}
+			props_with_successors = []
 			if block.get("props"):
 				props = []
 				for key, value in block.get("props", {}).items():
-					prop_value = ""
-					if value["type"] == "dynamic":
-						if data_key:
-							prop_value = f"{{{{ {data_key}.{value['value']} }}}}"
-						else:
-							prop_value = f"{{{{ {value['value']} }}}}"
-					elif value["type"] == "static":
-						prop_value = f"{value['value']}"
-					elif value["type"] == "inherited":
-						ancestor_id = value.get("ancestorBlockId")
-						if ancestor_id and block.get("blockId") in map_of_inherited_props:
-							prop_value = map_of_inherited_props[block.get('blockId')].get(ancestor_id, '').get(value['value'], '') 
-					props.append(f"{key}: {prop_value}")
-					if value.get('usedBy'):
-						for child_block_id in value.get('usedBy'):
-							if child_block_id in map_of_inherited_props:
-								map_of_ancestor_props_for_block_id = map_of_inherited_props.get(child_block_id, {})
-								map_of_ancestor_props_for_block_id[block.get("blockId")] = {key: prop_value}
-							else:
-								map_of_inherited_props[child_block_id] = {block.get("blockId"): {key: prop_value}}
+        
+					prop_value = value["value"]
+					prop_type = value["type"]
+					interpreted_value = ""
+     
+					if prop_value == "" or prop_value is None:
+						prop_value = "undefined"
+
+					if prop_type == "dynamic":
+						interpreted_value = f"{{{{ {data_key}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
+					elif prop_type == "static":
+						interpreted_value = f"{prop_value}"
+					elif prop_type == "inherited":
+						values = map_of_inherited_props.get(prop_value, [])
+						interpreted_value = values[0] if values else "undefined"
+      
+					props.append(f"{key}: {interpreted_value}")
+     
+					if value.get('usedByCount', 0) > 0:
+						props_with_successors.append(key)
+						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
 
 				props_obj = f"{{ {', '.join(props)} }}"
 
@@ -617,6 +620,9 @@ def get_tag(block, soup, data_key=None):
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
+			for props in props_with_successors:
+				map_of_inherited_props[props].pop()
+
 			if block.get("blockScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
 				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj or '{}'});"
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 658b0fa9c..6d1ee5078 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -104,6 +104,7 @@ declare module 'vue' {
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     Plus: typeof import('./src/components/Icons/Plus.vue')['default']
     PropertyControl: typeof import('./src/components/Controls/PropertyControl.vue')['default']
+    PropsEditor: typeof import('./src/components/PropsEditor.vue')['default']
     PublishButton: typeof import('./src/components/PublishButton.vue')['default']
     RangeInput: typeof import('./src/components/Controls/RangeInput.vue')['default']
     Redirect: typeof import('./src/components/Icons/Redirect.vue')['default']
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index fd774e3c7..85ffa88a3 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -100,7 +100,7 @@ class Block implements BlockOptions {
 		this.attributes = reactive(options.attributes || {});
 		this.dynamicValues = reactive(options.dynamicValues || []);
 		this.blockScript = options.blockScript || "";
-		this.props = options.props || {};
+		this.props = reactive(options.props || {});
 
 		this.blockName = options.blockName;
 		delete this.attributes.style;
@@ -894,8 +894,8 @@ class Block implements BlockOptions {
 		return Boolean(this.getRepeaterParent());
 	}
 	getBlockScript(): string {
-		let blockScript =  "";
-		if(this.isExtendedFromComponent() && !this.blockScript){
+		let blockScript = "";
+		if (this.isExtendedFromComponent() && !this.blockScript) {
 			blockScript = this.referenceComponent?.getBlockScript() || "";
 		} else {
 			blockScript = this.blockScript || "";
@@ -907,14 +907,14 @@ class Block implements BlockOptions {
 	}
 	getBlockProps(): BlockProps {
 		let blockProps = {};
-		if(this.isExtendedFromComponent() && !Object.keys(this.props || {}).length){
+		if (this.isExtendedFromComponent() && !Object.keys(this.props || {}).length) {
 			blockProps = this.referenceComponent?.getBlockProps() || {};
 		} else {
 			blockProps = this.props || {};
 		}
 		return blockProps;
 	}
-	setBlockProps(props: BlockProps){
+	setBlockProps(props: BlockProps) {
 		this.props = props;
 	}
 }
@@ -1021,6 +1021,8 @@ function resetBlock(
 		block.customAttributes = {};
 		block.classes = [];
 		block.dataKey = null;
+		block.props = {};
+		block.blockScript = "";
 	}
 
 	if (resetChildren) {
diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/PropsSection.ts
index 78673eb6e..f19dfcf26 100644
--- a/frontend/src/components/BlockPropertySections/PropsSection.ts
+++ b/frontend/src/components/BlockPropertySections/PropsSection.ts
@@ -23,9 +23,8 @@ const propsSection = [
 			"update:obj": (obj: BlockProps) => blockController.setBlockProps(obj), // TODO: race condition?
 			"update:ancestorUpdateDependency": (
 				propKey: string,
-				ancestorBlockId: string,
 				action: "add" | "remove", // TODO: better name?
-			) => blockController.updateBlockPropsDependencyForAncestor(propKey, ancestorBlockId, action),
+			) => blockController.updateBlockPropsDependencyForAncestor(propKey, action),
 		},
 	},
 ];
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index b30ab2a4e..0a16f779d 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -24,13 +24,7 @@
 				:getOptions="getOptions"
 				@update:modelValue="
 					(option) => {
-						(autoCompleteRef?.value?.[index] as any)?.blur();
-						updateObjectValue(
-							key,
-							typeof option == 'string'
-								? `static--${blockController.getFirstSelectedBlock()?.blockId}--${option}`
-								: option?.value,
-						);
+						updateObjectValue(key, typeof option == 'string' ? option : option?.value);
 					}
 				">
 				<template #prefix v-if="value.value">
@@ -89,11 +83,10 @@ const propsEditor = ref<HTMLElement | null>(null);
 
 const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
-	"update:ancestorUpdateDependency": (propKey: string, ancestorBlockId: string, action: "add" | "remove") =>
-		true,
+	"update:ancestorUpdateDependency": (propKey: string, action: "add" | "remove") => true,
 });
 // better name
-type PropOptions = { path: string; type: "dynamic" | "inherited" | "static"; blockId?: string | null };
+type PropOptions = { path: string; type: "dynamic" | "inherited" | "static" };
 
 // why computed? no dependency tracking needed right?
 const dataArray = computed(() => {
@@ -129,9 +122,15 @@ const getParentProps = (baseBlock: Block, baseProps: PropOptions[]): PropOptions
 		const parentProps: PropOptions[] = Object.keys(parentBlock.getBlockProps()).map((key) => ({
 			path: key,
 			type: "inherited",
-			blockId: parentBlock.blockId,
 		}));
-		const combinedProps = [...baseProps, ...parentProps];
+		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
+			if (
+				!acc.find((p: PropOptions) => p.path === prop.path && p.type === prop.type && p.type === "inherited")
+			) {
+				acc.push(prop);
+			}
+			return acc;
+		}, [] as PropOptions[]);
 		return getParentProps(parentBlock, combinedProps);
 	} else {
 		return baseProps;
@@ -143,15 +142,12 @@ const getOptions = async (query: string) => {
 
 	const options = [
 		...new Set([...parentPropsArray, ...dataArray.value]),
-		...(query ? [{ path: query, type: "static", blockId: null } as PropOptions] : []),
+		...(query ? [{ path: query, type: "static" } as PropOptions] : []),
 	]
 		.filter((prop) => prop.path.toLowerCase().includes(query.toLowerCase()))
 		.map((prop) => ({
 			label: prop.path || "",
-			value: `${prop.type}--${
-				blockController.getFirstSelectedBlock()?.blockId +
-				(prop.type === "inherited" ? "." + prop.blockId : "")
-			}--${prop.path}`,
+			value: `${prop.type}--${prop.path}`,
 			suffix: h(
 				prop.type === "dynamic" ? LucideZap : prop.type === "static" ? LucideCaseSensitive : LucideListTree,
 				{
@@ -178,24 +174,22 @@ const addObjectKey = async () => {
 const clearObjectValue = (key: string) => {
 	const map = new Map(Object.entries(props.obj));
 	const oldValue = map.get(key);
-	const oldPath = oldValue?.value;
-	const oldAncestor = oldValue?.ancestorBlockId;
-	
+
 	map.set(key, {
 		...oldValue!,
 		value: null,
 		type: "static",
 	});
-	
+
 	emit("update:obj", mapToObject(map));
-	
-	if (oldAncestor && oldPath) {
-		emit("update:ancestorUpdateDependency", oldPath, oldAncestor, "remove");
+
+	if (oldValue?.type == "inherited" && oldValue?.value) {
+		emit("update:ancestorUpdateDependency", oldValue.value, "remove");
 	}
 };
 
 const updateObjectValue = (key: string, value: string | null) => {
-	if(!key){
+	if (!key) {
 		toast.error("Property name cannot be empty.");
 		return;
 	}
@@ -203,30 +197,31 @@ const updateObjectValue = (key: string, value: string | null) => {
 		clearObjectValue(key);
 		return;
 	}
-	
+
 	const map = new Map(Object.entries(props.obj));
 	const splitValue = value.split("--");
-	const [type, id, ...pathParts] = splitValue;
-	const path = pathParts.join("--") || null;
-	
-	
-	const ancestor = type === "inherited" ? id?.split(".")[1] : null;
+	let type, path;
+	if (splitValue.length >= 2 && ["dynamic", "inherited", "static"].includes(splitValue[0])) {
+		type = splitValue[0];
+		path = splitValue.slice(1).join("--");
+	} else {
+		type = "static";
+		path = value;
+	}
 	const oldPath = map.get(key)?.value;
-	const oldAncestor = map.get(key)?.ancestorBlockId;
-	
+
 	map.set(key, {
 		...map.get(key)!,
-		...(type === "inherited" ? { ancestorBlockId: id?.split(".")[1] } : {}),
 		value: type === "static" ? JSON.stringify(path) : path,
 		type: type as BlockProps[string]["type"],
 	});
-	
+
 	emit("update:obj", mapToObject(map));
-	
-	if (ancestor && path) {
-		emit("update:ancestorUpdateDependency", path, ancestor, "add");
-	} else if (oldAncestor && oldPath) {
-		emit("update:ancestorUpdateDependency", oldPath, oldAncestor, "remove");
+
+	if (path) {
+		emit("update:ancestorUpdateDependency", path, "add");
+	} else if (oldPath) {
+		emit("update:ancestorUpdateDependency", oldPath, "remove");
 	}
 };
 
@@ -239,10 +234,9 @@ const deleteObjectKey = (key: string) => {
 	const map = new Map(Object.entries(props.obj));
 	const value = map.get(key);
 	const path = value?.value;
-	const ancestor = value?.ancestorBlockId;
 	map.delete(key);
 	emit("update:obj", mapToObject(map));
-	if (path && ancestor) emit("update:ancestorUpdateDependency", path, ancestor, "remove");
+	if (path) emit("update:ancestorUpdateDependency", path, "remove");
 };
 
 watch(
@@ -256,5 +250,4 @@ watch(
 	},
 	{ immediate: true },
 );
-
 </script>
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index d0e7b4aec..98f265e40 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -311,7 +311,16 @@ const blockController = {
 		return blockController.getSelectedBlocks()[0]?.getBlockProps();
 	},
 	setBlockProps: (props: BlockProps) => {
-		blockController.getSelectedBlocks()[0]?.setBlockProps(props);
+		const block = blockController.getFirstSelectedBlock();
+		if (!block.props) {
+			block.props = {};
+		}
+		Object.keys(block.props).forEach((key) => {
+			if (!props[key]) {
+				delete block.props?.[key];
+			}
+		});
+		Object.assign(block.props, props);
 	},
 	// TODO: should go in other file?
 	updateBlockPropsDependencyForAncestor: (
@@ -322,23 +331,24 @@ const blockController = {
 		let currentBlock = blockController.getFirstSelectedBlock();
 		// go up the tree
 		let parentBlock: Block | null = currentBlock.getParentBlock();
-		while (parentBlock?.blockId != ancestorBlockId) {
+		while (parentBlock && !parentBlock.props?.[propKey]) {
 			parentBlock = parentBlock?.getParentBlock() || null;
 		}
 		if (parentBlock) {
+			// we can ignore props which are derived from components already having usedByCount
 			let props = parentBlock.props;
 			if (props) {
-				let usedBy = props[propKey]["usedBy"];
+				let usedByCount = props[propKey]["usedByCount"];
 				if (action === "add") {
-					usedBy = [...new Set([...(usedBy || []), currentBlock.blockId])];
+					usedByCount = (usedByCount || 0) + 1;
 				} else {
-					usedBy = usedBy?.filter((blockId) => blockId != currentBlock.blockId);
+					usedByCount = Math.max((usedByCount || 0) - 1, 0);
 				}
 				parentBlock.setBlockProps({
 					...props,
 					[propKey]: {
 						...props[propKey],
-						usedBy,
+						usedByCount: usedByCount,
 					},
 				});
 			}

From 1b104be1a712897ab119f0697dde28f15e25f63d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 30 Oct 2025 00:28:08 +0530
Subject: [PATCH 022/547] fix(block-props): BlockProps type

---
 frontend/src/builder.d.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 8dcb43f51..f5726758c 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -11,8 +11,7 @@ declare type BlockProps = Record<
 	{
 		type: "dynamic" | "static" | "inherited";
 		value: string?;
-		usedBy?: Array<string>;
-		ancestorBlockId?: string;
+		usedByCount?: number;
 	}
 >;
 

From 599d0d064db7a014f55d657399a3af59a92786a7 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 2 Nov 2025 08:35:05 +0530
Subject: [PATCH 023/547] feat(block-props): re-arranging blocks updates
 usedByCount of ancestors

---
 frontend/src/components/BlockLayers.vue     | 51 ++++++++++++++++++++-
 frontend/src/utils/blockController.ts       | 49 ++++++++++----------
 frontend/src/utils/builderBlockCopyPaste.ts | 14 +++++-
 frontend/src/utils/useBuilderEvents.ts      |  7 +++
 4 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 42b95e4ab..84839f60f 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -6,6 +6,8 @@
 			:group="{ name: 'block-tree' }"
 			item-key="blockId"
 			@add="updateParent"
+			@end="handleDragEnd"
+			:move="handleDragMove"
 			:disabled="disableDraggable">
 			<template #item="{ element }">
 				<div
@@ -94,10 +96,11 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { FeatherIcon } from "frappe-ui";
-import { ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 import draggable from "vuedraggable";
 import BlockLayers from "./BlockLayers.vue";
 import BlocksIcon from "./Icons/Blocks.vue";
+import blockController from "@/utils/blockController";
 
 type LayerInstance = InstanceType<typeof BlockLayers>;
 
@@ -228,6 +231,52 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
+const currentlyDraggingBlock = ref<Block | null>(null);
+
+const handleDragMove = (event: any) => {
+	const draggedBlock: Block = event.draggedContext.element;
+	if (!currentlyDraggingBlock.value) {
+		currentlyDraggingBlock.value = draggedBlock;
+
+		const canvasStore = useCanvasStore();
+		const pauseId = canvasStore.activeCanvas?.history?.pause();
+		
+		const listOfInheritedProps = [];
+		for (const propKey in draggedBlock.props) {
+			if (draggedBlock.props[propKey].type === "inherited" && draggedBlock.props[propKey].value) {
+				listOfInheritedProps.push(draggedBlock.props[propKey].value);
+			}
+		}
+		blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", draggedBlock);
+
+		nextTick(() => {
+			pauseId && canvasStore.activeCanvas?.history?.resume(pauseId);
+		});
+	}
+	return true; // Allow the move
+};
+
+const handleDragEnd = async () => {
+	await nextTick();
+	if (currentlyDraggingBlock.value) {
+		const listOfInheritedProps = [];
+		for (const propKey in currentlyDraggingBlock.value.props) {
+			if (
+				currentlyDraggingBlock.value.props[propKey].type === "inherited" &&
+				currentlyDraggingBlock.value.props[propKey].value
+			) {
+				listOfInheritedProps.push(currentlyDraggingBlock.value.props[propKey].value);
+			}
+		}
+		blockController.updateBlockPropsDependencyForAncestor(
+			listOfInheritedProps,
+			"add",
+			currentlyDraggingBlock.value,
+		);
+		currentlyDraggingBlock.value = null;
+	}
+};
+
 defineExpose({
 	toggleExpanded,
 	isExpandedInTree,
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 98f265e40..b712f0608 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -324,33 +324,34 @@ const blockController = {
 	},
 	// TODO: should go in other file?
 	updateBlockPropsDependencyForAncestor: (
-		propKey: string,
-		ancestorBlockId: string,
+		propKeys: string | string[],
 		action: "add" | "remove",
+		forSpecificBlock?: Block,
 	) => {
-		let currentBlock = blockController.getFirstSelectedBlock();
-		// go up the tree
-		let parentBlock: Block | null = currentBlock.getParentBlock();
-		while (parentBlock && !parentBlock.props?.[propKey]) {
-			parentBlock = parentBlock?.getParentBlock() || null;
-		}
-		if (parentBlock) {
-			// we can ignore props which are derived from components already having usedByCount
-			let props = parentBlock.props;
-			if (props) {
-				let usedByCount = props[propKey]["usedByCount"];
-				if (action === "add") {
-					usedByCount = (usedByCount || 0) + 1;
-				} else {
-					usedByCount = Math.max((usedByCount || 0) - 1, 0);
+		for (const propKey of Array.isArray(propKeys) ? propKeys : [propKeys]) {
+			let currentBlock = forSpecificBlock || blockController.getFirstSelectedBlock();
+			// go up the tree
+			let parentBlock: Block | null = currentBlock.getParentBlock();
+			while (parentBlock && !parentBlock.props?.[propKey]) {
+				parentBlock = parentBlock?.getParentBlock() || null;
+			}
+			if (parentBlock) {
+				let props = parentBlock.props;
+				if (props) {
+					let usedByCount = props[propKey]["usedByCount"];
+					if (action === "add") {
+						usedByCount = (usedByCount || 0) + 1;
+					} else {
+						usedByCount = Math.max((usedByCount || 0) - 1, 0);
+					}
+					parentBlock.setBlockProps({
+						...props,
+						[propKey]: {
+							...props[propKey],
+							usedByCount: usedByCount,
+						},
+					});
 				}
-				parentBlock.setBlockProps({
-					...props,
-					[propKey]: {
-						...props[propKey],
-						usedByCount: usedByCount,
-					},
-				});
 			}
 		}
 	},
diff --git a/frontend/src/utils/builderBlockCopyPaste.ts b/frontend/src/utils/builderBlockCopyPaste.ts
index 1a85bbb4c..3d7cd7e7f 100644
--- a/frontend/src/utils/builderBlockCopyPaste.ts
+++ b/frontend/src/utils/builderBlockCopyPaste.ts
@@ -19,6 +19,7 @@ import { nextTick } from "vue";
 import { toast } from "vue-sonner";
 import { webPages } from "../data/webPage";
 import { BuilderClientScript } from "../types/Builder/BuilderClientScript";
+import blockController from "./blockController";
 
 type BuilderPageClientScriptRef = { builder_script: string; idx?: number };
 
@@ -243,7 +244,18 @@ async function insertBlocks(blocks: (Block | BlockOptions)[]) {
 		while (parentBlock && !parentBlock.canHaveChildren()) {
 			parentBlock = parentBlock.getParentBlock() as Block;
 		}
-		blocks.forEach((block) => parentBlock.addChild(getBlockCopy(block), null, true));
+		const addedChildBlocks: Block[] = [];
+		blocks.forEach((block) => addedChildBlocks.push(parentBlock.addChild(getBlockCopy(block), null, true)));
+		await nextTick();
+		addedChildBlocks.forEach((block) => {
+			const listOfInheritedProps = [];
+			for (const propKey in block.props) {
+				if (block.props[propKey].type === "inherited" && block.props[propKey].value) {
+					listOfInheritedProps.push(block.props[propKey].value);
+				}
+			}
+			blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "add", block);
+		});
 	} else {
 		canvasStore.pushBlocks(blocks);
 	}
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 14b4259f6..ec35e476c 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -61,6 +61,13 @@ export function useBuilderEvents(
 		copySelectedBlocksToClipboard(e);
 		if (canvasStore.activeCanvas?.selectedBlocks.length) {
 			for (const block of canvasStore.activeCanvas?.selectedBlocks) {
+				const listOfInheritedProps = [];
+				for (const propKey in block.props) {
+					if (block.props[propKey].type === "inherited" && block.props[propKey].value) {
+						listOfInheritedProps.push(block.props[propKey].value);
+					}
+				}
+				blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", block);
 				canvasStore.activeCanvas?.removeBlock(block, true);
 			}
 			clearSelection();

From 679712557a9c6cffd0184e8f9d08209beb809d84 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 2 Nov 2025 09:24:34 +0530
Subject: [PATCH 024/547] feat(block-props): added color cues for inherited
 props

green shows that inherited prop is valid, i.e., there is an ancestor who has that prop and can be inherited while red shows that the inherited prop is invalid and no ancestor was found having that prop
---
 frontend/src/components/PropsEditor.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 0a16f779d..746973f35 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -15,7 +15,9 @@
 					'[&>.form-input]:bg-surface-blue-1 [&>div>input]:text-ink-blue-3':
 						value.type == 'static' && value.value,
 					'[&>.form-input]:bg-surface-green-1 [&>div>input]:text-ink-green-3':
-						value.type == 'inherited' && value.value,
+						value.type == 'inherited' && value.value && listOfAvailablePropsToInherit.includes(value.value),
+					'[&>.form-input]:bg-surface-red-1 [&>div>input]:text-ink-red-3':
+						value.type == 'inherited' && value.value && !listOfAvailablePropsToInherit.includes(value.value),
 				}"
 				v-bind="events"
 				ref="autoCompleteRef"
@@ -34,7 +36,11 @@
 						class="absolute left-0 top-0 h-4 w-4 text-ink-blue-3" />
 					<LucideListTree
 						v-else-if="value.type == 'inherited'"
-						class="absolute left-0 top-0 h-4 w-4 text-ink-green-3" />
+						class="absolute left-0 top-0 h-4 w-4"
+						:class="{
+							'text-ink-green-3': listOfAvailablePropsToInherit.includes(value.value),
+							'text-ink-red-3': !listOfAvailablePropsToInherit.includes(value.value),
+						}" />
 				</template>
 			</Autocomplete>
 			<BuilderButton
@@ -116,6 +122,7 @@ const dataArray = computed(() => {
 	return result;
 });
 
+const listOfAvailablePropsToInherit = ref<string[]>([]);
 const getParentProps = (baseBlock: Block, baseProps: PropOptions[]): PropOptions[] => {
 	const parentBlock = baseBlock.getParentBlock();
 	if (parentBlock) {
@@ -247,6 +254,9 @@ watch(
 				ref?.updateOptions();
 			});
 		}
+		listOfAvailablePropsToInherit.value = getParentProps(blockController.getFirstSelectedBlock()!, []).map(
+			(prop) => prop.path,
+		);
 	},
 	{ immediate: true },
 );

From 51d12baddca4ff9b992ed291e7a9b1312a789856 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 2 Nov 2025 09:27:43 +0530
Subject: [PATCH 025/547] feat(block-props): disallow removing/renaming props
 if used by child blocks

---
 frontend/src/components/Controls/Input.vue | 1 +
 frontend/src/components/PropsEditor.vue    | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index bef12922d..40fd1dcb5 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -19,6 +19,7 @@
 				<button
 					class="cursor-pointer text-ink-gray-4 hover:text-ink-gray-5"
 					tabindex="-1"
+					:disabled="Boolean(attrs.disabled)"
 					@click="clearValue">
 					<CrossIcon />
 				</button>
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 746973f35..dc1794e04 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -4,6 +4,7 @@
 			<BuilderInput
 				placeholder="Property"
 				:modelValue="key"
+				:disabled="value.usedByCount || false"
 				@update:modelValue="(val: string) => replaceKey(key, val)" />
 			<Autocomplete
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:font-mono [&>div>input]:text-xs"
@@ -47,6 +48,7 @@
 				class="flex-shrink-0 text-xs"
 				variant="subtle"
 				icon="x"
+				:disabled="value.usedByCount || false"
 				@click="deleteObjectKey(key as string)" />
 		</div>
 		<BuilderButton variant="subtle" label="Add" @click="addObjectKey"></BuilderButton>

From 27c0758f0d82ff5305915a162d24be0dca31a0a7 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 2 Nov 2025 18:38:51 +0530
Subject: [PATCH 026/547] fix(block-props): deleting blocks updates usedByCount
 of ancestors

---
 frontend/src/utils/useCanvasUtils.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 6e9f7f932..055f73d15 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -6,6 +6,7 @@ import { useCanvasHistory } from "@/utils/useCanvasHistory";
 import { useElementBounding } from "@vueuse/core";
 import { nextTick, reactive, ref, Ref } from "vue";
 import { toast } from "vue-sonner";
+import blockController from "./blockController";
 
 const canvasStore = useCanvasStore();
 
@@ -253,6 +254,13 @@ export function useCanvasUtils(
 		}
 		const nextSibling = block.getSiblingBlock("next");
 		if (canvasStore.activeCanvas?.activeBreakpoint === "desktop" || force) {
+			const listOfInheritedProps = [];
+			for (const prop in block.props) {
+				if (block.props[prop].type === "inherited" && block.props[prop].value) {
+					listOfInheritedProps.push(block.props[prop].value);
+				}
+			}
+			blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", block);
 			parentBlock.removeChild(block);
 		} else {
 			block.toggleVisibility(false);

From 3c5a3b85750b450cdf632a9252a14129755832c0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 3 Nov 2025 14:59:30 +0530
Subject: [PATCH 027/547] feat: Init read-only mode

---
 frontend/components.d.ts                     |  4 +-
 frontend/src/components/BlockEditor.vue      | 15 ++++-
 frontend/src/components/BlockLayers.vue      | 22 ++++---
 frontend/src/components/BuilderBlock.vue     |  4 ++
 frontend/src/components/BuilderCanvas.vue    |  3 +
 frontend/src/components/BuilderLeftPanel.vue | 52 +++++++---------
 frontend/src/components/BuilderToolbar.vue   | 14 ++++-
 frontend/src/components/ContextMenu.vue      | 62 ++++++++++++++++----
 frontend/src/components/PublishButton.vue    |  6 +-
 frontend/src/pages/PageBuilder.vue           |  9 ++-
 10 files changed, 131 insertions(+), 60 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index b4e1a1702..8a1d05b62 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -33,7 +33,6 @@ declare module 'vue' {
     BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
     BuilderButton: typeof import('./src/components/Controls/BuilderButton.vue')['default']
     BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
-    BuilderInput: typeof import('./src/components/BuilderInput.vue')['default']
     BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
     BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
     BuilderSettings: typeof import('./src/components/BuilderSettings.vue')['default']
@@ -70,7 +69,6 @@ declare module 'vue' {
     Globe: typeof import('./src/components/Icons/Globe.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
     ImageUploadInput: typeof import('./src/components/ImageUploadInput.vue')['default']
-    ImportStandardPageModal: typeof import('./src/components/Modals/ImportStandardPageModal.vue')['default']
     InlineInput: typeof import('./src/components/Controls/InlineInput.vue')['default']
     Input: typeof import('./src/components/Controls/Input.vue')['default']
     InputLabel: typeof import('./src/components/Controls/InputLabel.vue')['default']
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index e05833e50..c6781d92b 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -54,6 +54,7 @@ const showResizer = computed(() => {
 	return (
 		!props.block.isRoot() &&
 		!props.editable &&
+		!props.readonly &&
 		!canvasStore.isDragging &&
 		isBlockSelected.value &&
 		!blockController.multipleBlocksSelected() &&
@@ -69,11 +70,13 @@ const props = withDefaults(
 		target: HTMLElement | SVGElement;
 		editable?: boolean;
 		isSelected?: boolean;
+		readonly?: boolean;
 	}>(),
 	{
 		breakpoint: "desktop",
 		editable: false,
 		isSelected: false,
+		readonly: false,
 	},
 );
 
@@ -90,6 +93,7 @@ const showPaddingHandler = computed(() => {
 		!resizing.value &&
 		!canvasStore.isDragging &&
 		!props.editable &&
+		!props.readonly &&
 		!blockController.multipleBlocksSelected() &&
 		!props.block.isSVG() &&
 		(!props.block.isText() || (props.block.isLink() && props.block.hasChildren()))
@@ -103,6 +107,7 @@ const showMarginHandler = computed(() => {
 		!canvasStore.isDragging &&
 		!resizing.value &&
 		!props.editable &&
+		!props.readonly &&
 		!blockController.multipleBlocksSelected() &&
 		(!props.block.isText() || (props.block.isLink() && props.block.hasChildren()))
 	);
@@ -116,6 +121,7 @@ const showBorderRadiusHandler = computed(() => {
 		!props.block.isHTML() &&
 		!props.block.isSVG() &&
 		!props.editable &&
+		!props.readonly &&
 		!resizing.value &&
 		!canvasStore.isDragging &&
 		!blockController.multipleBlocksSelected()
@@ -170,6 +176,7 @@ const getStyleClasses = computed(() => {
 	if (
 		isBlockSelected.value &&
 		!props.editable &&
+		!props.readonly &&
 		!props.block.isRoot() &&
 		!props.block.isRepeater() &&
 		!canvasStore.isDragging
@@ -192,7 +199,7 @@ watch(
 );
 
 const movable = computed(() => {
-	return props.block.isMovable();
+	return props.block.isMovable() && !props.readonly;
 });
 
 onMounted(() => {
@@ -200,7 +207,7 @@ onMounted(() => {
 });
 
 const handleClick = (ev: MouseEvent) => {
-	if (props.editable) return;
+	if (props.editable || props.readonly) return;
 	if (preventCLick.value) {
 		preventCLick.value = false;
 		return;
@@ -225,12 +232,13 @@ const handleClick = (ev: MouseEvent) => {
 
 // dispatch drop event to the target block
 const handleDrop = (ev: DragEvent) => {
-	if (props.editable) return;
+	if (props.editable || props.readonly) return;
 	const dropEvent = new DragEvent("drop", ev);
 	props.target.dispatchEvent(dropEvent);
 };
 
 const handleDoubleClick = (ev: MouseEvent) => {
+	if (props.readonly) return;
 	if (props.block.isHTML()) {
 		canvasStore.editHTML(props.block);
 		return;
@@ -242,6 +250,7 @@ const handleDoubleClick = (ev: MouseEvent) => {
 };
 
 const handleMove = (ev: MouseEvent) => {
+	if (props.readonly) return;
 	if (builderStore.mode === "text") {
 		canvasStore.editableBlock = props.block;
 	}
diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 42b95e4ab..2b83e0ae7 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -6,7 +6,7 @@
 			:group="{ name: 'block-tree' }"
 			item-key="blockId"
 			@add="updateParent"
-			:disabled="disableDraggable">
+			:disabled="disableDraggable || readonly">
 			<template #item="{ element }">
 				<div
 					:data-block-layer-id="element.blockId"
@@ -49,7 +49,7 @@
 							v-if="Boolean(element.extendedFromComponent)" />
 						<span
 							class="layer-label min-h-[1em] min-w-[2em] max-w-64 truncate"
-							:contenteditable="element.editable"
+							:contenteditable="element.editable && !readonly"
 							:title="element.blockId"
 							:class="{
 								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
@@ -57,10 +57,12 @@
 							}"
 							@dblclick="
 								(ev) => {
-									element.editable = true;
-									// focus
-									const target = ev.target as HTMLElement;
-									target.focus();
+									if (!readonly) {
+										element.editable = true;
+										// focus
+										const target = ev.target as HTMLElement;
+										target.focus();
+									}
 								}
 							"
 							@keydown.enter.stop.prevent="element.editable = false"
@@ -69,7 +71,7 @@
 						</span>
 						<!-- toggle visibility -->
 						<FeatherIcon
-							v-if="!element.isRoot() && !isParentHidden"
+							v-if="!element.isRoot() && !isParentHidden && !readonly"
 							:name="element.isVisible() ? 'eye' : 'eye-off'"
 							class="invisible ml-auto mr-2 h-3 w-3 group-hover:visible"
 							@click.stop="element.toggleVisibility()" />
@@ -80,6 +82,7 @@
 							:ref="childLayer"
 							:is-parent-hidden="isParentHidden || !element.isVisible()"
 							:indent="childIndent"
+							:readonly="readonly"
 							:disable-draggable="
 								Boolean(element.children.length && element.children[0].isChildOfComponentBlock())
 							" />
@@ -91,7 +94,6 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
-import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { FeatherIcon } from "frappe-ui";
 import { ref, watch } from "vue";
@@ -102,7 +104,6 @@ import BlocksIcon from "./Icons/Blocks.vue";
 type LayerInstance = InstanceType<typeof BlockLayers>;
 
 const canvasStore = useCanvasStore();
-const builderStore = useBuilderStore();
 
 const childLayers = ref<LayerInstance[]>([]);
 const childLayer = (el: LayerInstance) => {
@@ -118,6 +119,7 @@ const props = withDefaults(
 		adjustForRoot?: boolean;
 		disableDraggable?: boolean;
 		isParentHidden?: boolean;
+		readonly?: boolean;
 	}>(),
 	{
 		blocks: () => [],
@@ -125,6 +127,7 @@ const props = withDefaults(
 		adjustForRoot: true,
 		disableDraggable: false,
 		isParentHidden: false,
+		readonly: false,
 	},
 );
 
@@ -138,6 +141,7 @@ if (!props.adjustForRoot) {
 }
 
 const setBlockName = (ev: Event, block: LayerBlock) => {
+	if (props.readonly) return;
 	const target = ev.target as HTMLElement;
 	block.blockName = target.innerText.trim();
 	block.editable = false;
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 1db07a630..d5083e565 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -14,6 +14,7 @@
 			:block="child"
 			:breakpoint="breakpoint"
 			:preview="preview"
+			:readonly="readonly"
 			:isChildOfComponent="block.isExtendedFromComponent() || isChildOfComponent"
 			:key="child.blockId"
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
@@ -28,6 +29,7 @@
 			:breakpoint="breakpoint"
 			:editable="isEditable"
 			:isSelected="isSelected"
+			:readonly="readonly"
 			:target="(target as HTMLElement)" />
 	</teleport>
 </template>
@@ -54,12 +56,14 @@ const props = withDefaults(
 		isChildOfComponent?: boolean;
 		breakpoint?: string;
 		preview?: boolean;
+		readonly?: boolean;
 		data?: Record<string, any> | null;
 	}>(),
 	{
 		isChildOfComponent: false,
 		breakpoint: "desktop",
 		preview: false,
+		readonly: false,
 		data: null,
 	},
 );
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 89add486c..802b5ac17 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -62,6 +62,7 @@
 					:block="block"
 					:style="variables"
 					:key="block.blockId"
+					:readonly="readonly"
 					v-if="showBlocks"
 					:breakpoint="breakpoint.device"
 					:data="pageStore.pageData" />
@@ -136,9 +137,11 @@ const props = withDefaults(
 	defineProps<{
 		blockData: Block;
 		canvasStyles?: Record<string, any>;
+		readonly?: boolean;
 	}>(),
 	{
 		canvasStyles: () => ({}),
+		readonly: false,
 	},
 );
 
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 40f0ee33b..f35251f29 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -52,6 +52,7 @@
 					class="block-layers w-fit min-w-full pr-3"
 					v-if="pageCanvas"
 					:disable-draggable="true"
+					:readonly="readonly"
 					ref="pageLayers"
 					:blocks="[pageCanvas?.getRootBlock() as Block]"
 					v-show="canvasStore.editingMode == 'page'" />
@@ -59,6 +60,7 @@
 					class="block-layers w-fit min-w-full pr-3"
 					ref="componentLayers"
 					:disable-draggable="true"
+					:readonly="readonly"
 					:blocks="[fragmentCanvas?.getRootBlock()]"
 					:indent="5"
 					:adjustForRoot="false"
@@ -86,8 +88,7 @@ import PageScript from "@/components/PageScript.vue";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
-import convertHTMLToBlocks from "@/utils/convertHTMLToBlocks";
-import { createResource, Tooltip } from "frappe-ui";
+import { Tooltip } from "frappe-ui";
 import { inject, nextTick, Ref, ref, watch, watchEffect } from "vue";
 import BlockLayers from "./BlockLayers.vue";
 import BuilderAssets from "./BuilderAssets.vue";
@@ -95,8 +96,19 @@ import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
 
+const props = withDefaults(
+	defineProps<{
+		readonly?: boolean;
+	}>(),
+	{
+		readonly: false,
+	},
+);
+
 const showVariableManager = ref(false);
 const miniSidebar = ref(null) as Ref<HTMLElement | null>;
+const pageLayers = ref<InstanceType<typeof BlockLayers> | null>(null);
+const componentLayers = ref<InstanceType<typeof BlockLayers> | null>(null);
 
 const canvasStore = useCanvasStore();
 const builderStore = useBuilderStore();
@@ -105,19 +117,6 @@ const pageStore = usePageStore();
 const pageCanvas = inject("pageCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 const fragmentCanvas = inject("fragmentCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 
-const prompt = ref(null) as unknown as Ref<string>;
-const generating = ref(false);
-const pageLayers = ref<InstanceType<typeof BlockLayers> | null>(null);
-const componentLayers = ref<InstanceType<typeof BlockLayers> | null>(null);
-
-watchEffect(() => {
-	if (pageLayers.value) {
-		builderStore.activeLayers = pageLayers.value;
-	} else if (componentLayers.value) {
-		builderStore.activeLayers = componentLayers.value;
-	}
-});
-
 const leftPanelOptions = [
 	{
 		label: "Insert",
@@ -146,21 +145,6 @@ const leftPanelOptions = [
 	},
 ];
 
-const getPage = () => {
-	generating.value = true;
-	createResource({
-		url: "builder.api.get_blocks",
-		onSuccess(html: string) {
-			canvasStore.clearBlocks();
-			const blocks = convertHTMLToBlocks(html);
-			canvasStore.pushBlocks([blocks]);
-			generating.value = false;
-		},
-	}).submit({
-		prompt: prompt.value,
-	});
-};
-
 const setActiveTab = (tab: LeftSidebarTabOption) => {
 	if (tab === "variables") {
 		showVariableManager.value = true;
@@ -169,6 +153,14 @@ const setActiveTab = (tab: LeftSidebarTabOption) => {
 	}
 };
 
+watchEffect(() => {
+	if (pageLayers.value) {
+		builderStore.activeLayers = pageLayers.value;
+	} else if (componentLayers.value) {
+		builderStore.activeLayers = componentLayers.value;
+	}
+});
+
 // moved out of BlockLayers for performance
 // TODO: Find a better way to do this
 watch(
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 8caf73cc6..6fb479ed2 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -66,7 +66,10 @@
 					<div
 						class="flex w-72 flex-col gap-3 rounded bg-surface-white p-4 shadow-lg"
 						v-if="pageStore.activePage">
-						<PageOptions v-if="pageStore.activePage" :page="pageStore.activePage"></PageOptions>
+						<PageOptions
+							v-if="pageStore.activePage"
+							:page="pageStore.activePage"
+							:readonly="readonly"></PageOptions>
 					</div>
 				</template>
 			</Popover>
@@ -74,6 +77,7 @@
 		<!-- actions -->
 		<div class="absolute right-3 flex items-center gap-5">
 			<!-- show dark mode toggle -->
+			<Badge variant="subtle" theme="orange" v-if="readonly">Read Only</Badge>
 			<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6">
 				<FeatherIcon
 					:name="isDark ? 'sun' : 'moon'"
@@ -141,7 +145,7 @@
 					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-ink-gray-8"></PlayIcon>
 				</Tooltip>
 			</router-link>
-			<PublishButton></PublishButton>
+			<PublishButton :disabled="readonly"></PublishButton>
 		</div>
 	</div>
 </template>
@@ -157,13 +161,17 @@ import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getTextContent } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
-import { Popover, Tooltip } from "frappe-ui";
+import { Badge, Popover, Tooltip } from "frappe-ui";
 import { computed, ref } from "vue";
 import { toast } from "vue-sonner";
 import BuilderSettings from "./BuilderSettings.vue";
 import MainMenu from "./MainMenu.vue";
 import PageOptions from "./PageOptions.vue";
 
+defineProps<{
+	readonly?: boolean;
+}>();
+
 const isDark = useDark({
 	attribute: "data-theme",
 });
diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
index 2e4f5c04b..492f9bb89 100644
--- a/frontend/src/components/ContextMenu.vue
+++ b/frontend/src/components/ContextMenu.vue
@@ -1,8 +1,10 @@
 <template>
 	<Menu
+		v-if="visible"
 		class="fixed z-50 h-fit w-fit min-w-[120px] rounded-md bg-surface-white p-1 shadow-xl"
 		:style="{ top: y + 'px', left: x + 'px' }"
-		ref="menu">
+		ref="menu"
+		v-on-click-outside="hide">
 		<MenuItems static class="text-sm">
 			<MenuItem
 				v-slot="{ active, disabled }"
@@ -25,46 +27,86 @@
 </template>
 <script setup lang="ts">
 import { Menu, MenuItem, MenuItems } from "@headlessui/vue";
+import { vOnClickOutside } from "@vueuse/components";
 import { computed, ref } from "vue";
 
 const menu = ref(null) as unknown as typeof Menu;
 
+interface ContextMenuOption {
+	label: string;
+	action: CallableFunction;
+	condition?: () => boolean;
+	disabled?: () => boolean;
+}
+
 const props = withDefaults(
 	defineProps<{
-		posX: number;
-		posY: number;
-		options: ContextMenuOption[];
+		posX?: number;
+		posY?: number;
+		options?: ContextMenuOption[];
 	}>(),
 	{
+		posX: 0,
+		posY: 0,
 		options: () => [],
 	},
 );
 
+const visible = ref(false);
+const internalPosX = ref(0);
+const internalPosY = ref(0);
+
+const currentPosX = computed(() => internalPosX.value || props.posX);
+const currentPosY = computed(() => internalPosY.value || props.posY);
+
 const x = computed(() => {
 	const menuWidth = menu.value?.$el.clientWidth;
 	const windowWidth = window.innerWidth;
-	const diff = windowWidth - (props.posX + menuWidth);
+	const diff = windowWidth - (currentPosX.value + menuWidth);
 	if (diff < 0) {
-		return props.posX + diff - 10;
+		return currentPosX.value + diff - 10;
 	}
-	return props.posX;
+	return currentPosX.value;
 });
 
 const y = computed(() => {
 	const menuHeight = menu.value?.$el.clientHeight;
 	const windowHeight = window.innerHeight;
-	const diff = windowHeight - (props.posY + menuHeight);
+	const diff = windowHeight - (currentPosY.value + menuHeight);
 	if (diff < 0) {
-		return props.posY + diff - 10;
+		return currentPosY.value + diff - 10;
 	}
-	return props.posY;
+	return currentPosY.value;
 });
 
 const emit = defineEmits({
 	select: (action: CallableFunction) => action,
+	hide: () => true,
 });
 
 const handleClick = (action: CallableFunction) => {
+	action();
+	hide();
 	emit("select", action);
 };
+
+// Public methods
+const show = (event: MouseEvent) => {
+	internalPosX.value = event.pageX;
+	internalPosY.value = event.pageY;
+	visible.value = true;
+	event.preventDefault();
+	event.stopPropagation();
+};
+
+const hide = () => {
+	visible.value = false;
+	emit("hide");
+};
+
+// Expose public methods
+defineExpose({
+	show,
+	hide,
+});
 </script>
diff --git a/frontend/src/components/PublishButton.vue b/frontend/src/components/PublishButton.vue
index 0d5b8294d..c8d4f10c6 100644
--- a/frontend/src/components/PublishButton.vue
+++ b/frontend/src/components/PublishButton.vue
@@ -2,7 +2,7 @@
 	<div class="flex items-center">
 		<BuilderButton
 			variant="solid"
-			:disabled="canvasStore.editingMode === 'fragment'"
+			:disabled="disabled"
 			@click="
 				() => {
 					publishing = true;
@@ -52,6 +52,10 @@ import usePageStore from "@/stores/pageStore";
 import { Dropdown } from "frappe-ui";
 import { computed, ref } from "vue";
 
+defineProps<{
+	disabled?: boolean;
+}>();
+
 const pageStore = usePageStore();
 const canvasStore = useCanvasStore();
 
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index de3730088..fe25ecd7d 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -8,10 +8,11 @@
 	</div>
 	<div v-show="!isSmallScreen" class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
 		<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
-		<BuilderToolbar class="relative z-30"></BuilderToolbar>
+		<BuilderToolbar :readonly="readonly" class="relative z-30"></BuilderToolbar>
 		<div>
 			<BuilderLeftPanel
 				v-show="builderStore.showLeftPanel"
+				:readonly="readonly"
 				class="absolute bottom-0 left-0 top-[var(--toolbar-height)] z-[21] border-r-[1px] border-outline-gray-2 bg-surface-white"></BuilderLeftPanel>
 			<BuilderCanvas
 				ref="fragmentCanvas"
@@ -57,6 +58,7 @@
 				ref="pageCanvas"
 				v-if="pageStore.pageBlocks[0]"
 				:block-data="pageStore.pageBlocks[0]"
+				:readonly="readonly"
 				:canvas-styles="{
 					minHeight: '1000px',
 				}"
@@ -71,6 +73,7 @@
 				class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-1 p-10"></BuilderCanvas>
 			<BuilderRightPanel
 				v-show="builderStore.showRightPanel"
+				:readonly="readonly"
 				class="no-scrollbar absolute bottom-0 right-0 top-[var(--toolbar-height)] z-20 overflow-auto border-l-[1px] border-outline-gray-2 bg-surface-white"></BuilderRightPanel>
 			<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
 			<Dialog
@@ -148,6 +151,10 @@ const usageCount = ref(0);
 const componentUsedInPages = ref<BuilderPage[]>([]);
 const pageListDialog = ref(false);
 
+const readonly = computed(
+	() => canvasStore.editingMode === "page" && Boolean(pageStore.activePage?.is_standard),
+);
+
 declare global {
 	interface Window {
 		blockController: typeof blockController;

From a5eddfafa775f63dc92312c786eda3b600fe5bd6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 4 Nov 2025 16:26:42 +0530
Subject: [PATCH 028/547] fix: Set valid developer mode flag

---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 0b7caad76..d4849fa0d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,7 +18,7 @@
 			window.builder_path = "{{ builder_path }}";
 			window.site_name = "{{ site_name }}";
 			window.is_fc_site = "{{ is_fc_site }}";
-			window.is_developer_mode = {{ is_developer_mode }};
+			window.is_developer_mode = Boolean("{{ is_developer_mode }}");
 		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>

From 2b790705c4c6275509cc562c1768a4a5f0684701 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 4 Nov 2025 16:28:49 +0530
Subject: [PATCH 029/547] fix: Hide clear button if the input is disabled

---
 frontend/src/components/Controls/Input.vue | 6 +++++-
 frontend/src/components/PageOptions.vue    | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index bef12922d..439d9d694 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -7,6 +7,7 @@
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
 			autocomplete="off"
 			:autofocus="autofocus"
+			:disabled="disabled"
 			v-bind="attrs"
 			:modelValue="data">
 			<template #prefix v-if="$slots.prefix">
@@ -15,7 +16,9 @@
 			<template #suffix v-if="$slots.suffix">
 				<slot name="suffix" />
 			</template>
-			<template #suffix v-else-if="!['select', 'checkbox'].includes(type) && !hideClearButton && data">
+			<template
+				#suffix
+				v-else-if="!['select', 'checkbox'].includes(type) && !hideClearButton && data && !disabled">
 				<button
 					class="cursor-pointer text-ink-gray-4 hover:text-ink-gray-5"
 					tabindex="-1"
@@ -37,6 +40,7 @@ const props = withDefaults(
 		type?: string;
 		hideClearButton?: boolean;
 		autofocus?: boolean;
+		disabled?: boolean;
 	}>(),
 	{
 		type: "text",
diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
index 8d705780c..663317b49 100644
--- a/frontend/src/components/PageOptions.vue
+++ b/frontend/src/components/PageOptions.vue
@@ -6,6 +6,7 @@
 				type="text"
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px]"
 				:modelValue="page.page_title"
+				:disabled="readonly"
 				@update:modelValue="(val: string) => pageStore.updateActivePage('page_title', val)" />
 			<BuilderInput
 				type="text"
@@ -14,6 +15,7 @@
 				description="The URL path for this page. For variables, use colon (e.g. /users/:id)"
 				@input="(val: string) => (page.route = val)"
 				:modelValue="page.route"
+				:disabled="readonly"
 				:hideClearButton="true"
 				@update:modelValue="(val: string) => pageStore.updateActivePage('route', val)" />
 			<!-- Dynamic Route Variables -->
@@ -27,6 +29,7 @@
 					type="text"
 					:label="variable.replace(/_/g, ' ')"
 					:modelValue="pageStore.routeVariables[variable]"
+					:disabled="readonly"
 					@update:modelValue="(val: string) => pageStore.setRouteVariable(variable, val)" />
 			</CollapsibleSection>
 		</div>
@@ -42,6 +45,7 @@ import CollapsibleSection from "./CollapsibleSection.vue";
 const pageStore = usepageStore();
 const props = defineProps<{
 	page: BuilderPage;
+	readonly?: boolean;
 }>();
 const dynamicVariables = computed(() => {
 	return getRouteVariables(props.page.route || "");

From a00ad4982ee7fd7090d81796c3149ccd7794d9fa Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 5 Nov 2025 09:57:06 +0530
Subject: [PATCH 030/547] feat(block-scripts): unified already existing
 embedded html editor to edit block scripts

---
 .../BlockPropertySections/ScriptEditor.ts     | 15 +++--
 frontend/src/pages/PageBuilder.vue            | 56 ++++++++++++++-----
 frontend/src/stores/canvasStore.ts            | 14 ++++-
 3 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/ScriptEditor.ts b/frontend/src/components/BlockPropertySections/ScriptEditor.ts
index 36e790477..616d2e178 100644
--- a/frontend/src/components/BlockPropertySections/ScriptEditor.ts
+++ b/frontend/src/components/BlockPropertySections/ScriptEditor.ts
@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import CodeEditor from "../Controls/CodeEditor.vue";
 import blockController from "@/utils/blockController";
+import useCanvasStore from "@/stores/canvasStore";
 
 const blockScriptProperties = [
 	{
@@ -8,19 +9,25 @@ const blockScriptProperties = [
 		getProps: () => {
 			return {
 				modelValue: blockController.getBlockScript(),
+				getModelValue: () => blockController.getBlockScript() || "",
 				type: "JavaScript",
 				readonly: false,
 				height: "200px",
 				showLineNumbers: true,
 				autofocus: true,
-				showSaveButton: true,
-				description:
-					"Add custom scripts to enhance block functionality.",
+				actionButton: {
+					label: "Expand",
+					icon: "maximize-2",
+					handler: () => {
+						useCanvasStore().editBlockScript(blockController.getSelectedBlocks()[0]);
+					},
+				},
 			};
 		},
 		searchKeyWords: "Block Script, Script, JS, JavaScript, Custom Script",
 		events: {
 			save: (script: string) => blockController.setBlockScript(script),
+			"update:modelValue": (script: string) => blockController.setBlockScript(script),
 		},
 	},
 ];
@@ -28,6 +35,6 @@ const blockScriptProperties = [
 export default {
 	name: "Block Script",
 	properties: blockScriptProperties,
-	collapsed: !blockController.getBlockScript()?.trim(),
+	collapsed: false,
 	condition: () => !blockController.multipleBlocksSelected(),
 };
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index de3730088..176a40433 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -75,28 +75,23 @@
 			<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
 			<Dialog
 				style="z-index: 40"
-				v-model="canvasStore.showHTMLDialog"
+				v-model="canvasStore.showExpandedEditorDialog"
 				class="overscroll-none"
-				:isDirty="htmlEditor?.isDirty"
+				:isDirty="expandedEditor?.isDirty"
 				:options="{
-					title: 'HTML',
+					title: expandedEditorOptions.title,
 					size: '7xl',
 				}">
 				<template #body-content>
 					<CodeEditor
-						:modelValue="canvasStore.editableBlock?.getInnerHTML()"
-						ref="htmlEditor"
-						type="HTML"
+						:modelValue="getExpandedEditorContent()"
+						ref="expandedEditor"
+						:type="expandedEditorOptions.type"
 						height="68vh"
-						label="Edit HTML"
+						:label="expandedEditorOptions.label"
 						:showLineNumbers="true"
 						:showSaveButton="true"
-						@save="
-							(val) => {
-								canvasStore.editableBlock?.setInnerHTML(val);
-								canvasStore.showHTMLDialog = false;
-							}
-						"
+						@save="saveExpandedEditorContent"
 						required />
 				</template>
 			</Dialog>
@@ -134,7 +129,7 @@ import { computed, onActivated, onDeactivated, provide, ref, toRef, watch, watch
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
-const htmlEditor = ref<null | InstanceType<typeof CodeEditor>>(null);
+const expandedEditor = ref<null | InstanceType<typeof CodeEditor>>(null);
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isSmallScreen = breakpoints.smaller("lg");
@@ -193,6 +188,37 @@ async function saveAndExitFragmentMode(e: Event) {
 	canvasStore.exitFragmentMode(e);
 }
 
+let expandedEditorOptions = computed(() => {
+	let title, label;
+	let type: "HTML" | "JavaScript" | "CSS" = "HTML";
+	if (canvasStore.editingContentType === "html") {
+		title = "HTML";
+		label = "Edit HTML";
+	} else if (canvasStore.editingContentType === "js") {
+		title = "Blockscript";
+		label = "Edit Blockscript";
+		type = "JavaScript";
+	}
+	return { title, label, type };
+});
+
+function getExpandedEditorContent() {
+	if (canvasStore.editingContentType === "html") {
+		return canvasStore.editableBlock?.getInnerHTML();
+	} else if (canvasStore.editingContentType === "js") {
+		return canvasStore.editableBlock?.getBlockScript();
+	}
+}
+
+async function saveExpandedEditorContent(val: string) {
+	if (canvasStore.editingContentType === "html") {
+		canvasStore.editableBlock?.setInnerHTML(val);
+	} else if (canvasStore.editingContentType === "js") {
+		canvasStore.editableBlock?.setBlockScript(val);
+	}
+	canvasStore.showExpandedEditorDialog = false;
+}
+
 onActivated(async () => {
 	builderStore.realtime.on("doc_viewers", async (data: { users: [] }) => {
 		builderStore.viewers = await getUsersInfo(
@@ -277,7 +303,7 @@ watch(
 );
 
 watch(
-	() => canvasStore.showHTMLDialog,
+	() => canvasStore.showExpandedEditorDialog,
 	(value) => {
 		if (!value) {
 			canvasStore.editableBlock = null;
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 2d7cebae7..669f83d71 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -26,9 +26,10 @@ const useCanvasStore = defineStore("canvasStore", {
 			index: <number | null>null,
 		},
 		editableBlock: <Block | null>null,
+		editingContentType: <"html" | "css" | "js">"html",
 		editingMode: <EditingMode>"page",
 		settingPage: false,
-		showHTMLDialog: false,
+		showExpandedEditorDialog: false,
 		fragmentData: {
 			block: <Block | null>null,
 			saveAction: <Function | null>null,
@@ -97,8 +98,17 @@ const useCanvasStore = defineStore("canvasStore", {
 
 		editHTML(block: Block) {
 			this.editableBlock = block;
+			this.editingContentType = "html";
 			nextTick(() => {
-				this.showHTMLDialog = true;
+				this.showExpandedEditorDialog = true;
+			});
+		},
+
+		editBlockScript(block: Block) {
+			this.editableBlock = block;
+			this.editingContentType = "js";
+			nextTick(() => {
+				this.showExpandedEditorDialog = true;
 			});
 		},
 

From 0e5784fb64f69139869f4538586aa7a05ace56d3 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 5 Nov 2025 09:57:58 +0530
Subject: [PATCH 031/547] fix(block-props): clean components to remove
 non-static props before saving

---
 frontend/src/components/Modals/NewComponent.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index 05f458941..4f07a0bf7 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -53,7 +53,19 @@ const componentName = ref("");
 const isGlobalComponent = ref(0);
 
 const createComponentHandler = async (context: { close: () => void }) => {
-	const blockCopy = getBlockCopy(props.block, true);
+	// clean block with inherited or dynamic props
+	const cleanBlock = props.block;
+	if (props.block.props) {
+		const cleanProps = cleanBlock.props || {};
+		Object.entries(props.block.props).forEach(([key, value]) => {
+			if (value.type === 'inherited' || value.type === 'dynamic') {
+				cleanProps[key] = {...value, type: 'static' , value: null};
+			}
+		});
+		cleanBlock.props = cleanProps;
+	}
+
+	const blockCopy = getBlockCopy(cleanBlock, true);
 	blockCopy.removeStyle("left");
 	blockCopy.removeStyle("top");
 	blockCopy.removeStyle("position");

From 81932eca45d460e43ca34330834e9e92c5bb07ec Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 5 Nov 2025 10:29:16 +0530
Subject: [PATCH 032/547] fix(block-scripts): put all block scripts at the end
 of the html file

have NOT intentionally put all script content in one script tag as if here is an error in one of the blockScripts then the remaining/following blockScripts also fail to execute
---
 builder/builder/doctype/builder_page/builder_page.py | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 9d59cacb7..c3b1aca49 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -490,6 +490,7 @@ def get_block_html(blocks):
 	def get_html(blocks, soup):
 		map_of_inherited_props = {} # prop_name -> array<values>
 		html = ""
+		all_block_scripts = []
 
 		def get_tag(block, soup, data_key=None):
 			block = extend_with_component(block)
@@ -567,7 +568,6 @@ def get_tag(block, soup, data_key=None):
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
 
-			script_tag = soup.new_tag("script")
 			props_obj = {}
 			props_with_successors = []
 			if block.get("props"):
@@ -627,9 +627,13 @@ def get_tag(block, soup, data_key=None):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
 				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj or '{}'});"
 				print("Script content: ", script_content)
-				script_tag.string = script_content
+				all_block_scripts.append(script_content)
 				tag.attrs["data-block-id"] = block_unique_id
-				tag.append(script_tag)
+			if block.get("blockId") == "root":
+				for script in all_block_scripts:
+					script_tag = soup.new_tag("script")
+					script_tag.string = script
+					tag.append(script_tag)
 
 			return tag
 

From 3279297cdf66d595fb6cee429c1fe702d833d0a8 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 7 Nov 2025 11:55:22 +0530
Subject: [PATCH 033/547] refactor: moved prop interpreting code to separate
 function

---
 .../doctype/builder_page/builder_page.py      | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c3b1aca49..2d5785088 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -573,22 +573,7 @@ def get_tag(block, soup, data_key=None):
 			if block.get("props"):
 				props = []
 				for key, value in block.get("props", {}).items():
-        
-					prop_value = value["value"]
-					prop_type = value["type"]
-					interpreted_value = ""
-     
-					if prop_value == "" or prop_value is None:
-						prop_value = "undefined"
-
-					if prop_type == "dynamic":
-						interpreted_value = f"{{{{ {data_key}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
-					elif prop_type == "static":
-						interpreted_value = f"{prop_value}"
-					elif prop_type == "inherited":
-						values = map_of_inherited_props.get(prop_value, [])
-						interpreted_value = values[0] if values else "undefined"
-      
+					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
 					props.append(f"{key}: {interpreted_value}")
      
 					if value.get('usedByCount', 0) > 0:
@@ -854,6 +839,20 @@ def resolve_path(path):
 	return original_resolve_path(path)
 
 
+def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
+	prop_value = prop["value"]
+	prop_type = prop["type"]
+
+	if prop_value == "" or prop_value is None:
+		return "undefined"
+	if prop_type == "dynamic":
+		return f"'{{{{ {data_key}.{prop_value} }}}}'" if data_key else f"'{{{{ {prop_value} }}}}'"
+	elif prop_type == "static":
+		return f"{prop_value}"
+	elif prop_type == "inherited":
+		values = map_of_inherited_props.get(prop_value, [])
+		return values[0] if values else "undefined"
+
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)
 	block["children"] = []

From cbdbace46d21a790e8942c2bc21b929abe160b9c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 10 Nov 2025 17:24:29 +0530
Subject: [PATCH 034/547] fix: Do not attempt to show usage count for Block
 Template in edit mode

It's only relevant for Components
---
 frontend/src/pages/PageBuilder.vue    | 7 +++++--
 frontend/src/stores/canvasStore.ts    | 3 +++
 frontend/src/stores/componentStore.ts | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index de3730088..90b05dbbf 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -41,7 +41,10 @@
 							<FeatherIcon name="chevron-right" class="h-3 w-3" />
 							<span class="flex items-center gap-2">
 								{{ canvasStore.fragmentData.fragmentName }}
-								<a @click="pageListDialog = true" class="cursor-pointer text-ink-gray-4 underline">
+								<a
+									@click="pageListDialog = true"
+									class="cursor-pointer text-ink-gray-4 underline"
+									v-if="canvasStore.fragmentData.showUsageCount">
 									{{ usageMessage }}
 								</a>
 							</span>
@@ -288,7 +291,7 @@ watch(
 watch(
 	() => fragmentCanvas.value,
 	(value) => {
-		if (value) {
+		if (value && canvasStore.fragmentData.fragmentId && canvasStore.fragmentData.showUsageCount) {
 			const usageCountResource = createResource({
 				method: "POST",
 				url: "builder.builder.doctype.builder_settings.builder_settings.get_component_usage_count",
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 2d7cebae7..506f8eebd 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -35,6 +35,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			saveActionLabel: <string | null>null,
 			fragmentName: <string | null>null,
 			fragmentId: <string | null>null,
+			showUsageCount: false,
 		},
 	}),
 	actions: {
@@ -108,6 +109,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			saveActionLabel: string = "Save",
 			fragmentName?: string,
 			fragmentId?: string,
+			showUsageCount?: boolean,
 		) {
 			const blockCopy = getBlockCopy(block, true);
 			this.fragmentData = {
@@ -116,6 +118,7 @@ const useCanvasStore = defineStore("canvasStore", {
 				saveActionLabel,
 				fragmentName: fragmentName || block.getBlockDescription(),
 				fragmentId: fragmentId || block.blockId,
+				showUsageCount: showUsageCount || false,
 			};
 			this.editingMode = "fragment";
 		},
diff --git a/frontend/src/stores/componentStore.ts b/frontend/src/stores/componentStore.ts
index 575434b46..c7eaadeda 100644
--- a/frontend/src/stores/componentStore.ts
+++ b/frontend/src/stores/componentStore.ts
@@ -35,6 +35,7 @@ const useComponentStore = defineStore("componentStore", {
 				"Save Component",
 				component.component_name,
 				component.name,
+				true,
 			);
 		},
 		saveComponent(block: Block, componentName: string) {

From 18f4d78a763ffe08ac19af567e42baa1213092fa Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 10 Nov 2025 18:05:13 +0530
Subject: [PATCH 035/547] fix(ScriptManager): Visually align script action
 buttons

Visually align script action buttons to container beside when there are no scripts attached
---
 frontend/src/components/PageClientScriptManager.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 15f4abe53..226f22f75 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex gap-5">
-		<div class="flex flex-col gap-3 pt-6">
+		<div class="flex flex-col gap-3">
 			<div class="flex h-full w-48 flex-col justify-between gap-1">
 				<div class="flex flex-col gap-1">
 					<a
@@ -11,7 +11,7 @@
 							'font-medium text-ink-gray-8': activeScript === script,
 						}"
 						@click="selectScript(script)"
-						class="group flex h-6 items-center justify-between gap-1 text-sm last-of-type:mb-2">
+						class="group flex h-6 items-center justify-between gap-1 text-sm first-of-type:mt-6 last-of-type:mb-2">
 						<div class="flex w-[90%] items-center gap-1">
 							<CSSIcon class="shrink-0" v-if="script.script_type === 'CSS'" />
 

From 0805a980f41b185919b45c1a11a2bd52fe6352d8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 10 Nov 2025 19:17:12 +0530
Subject: [PATCH 036/547] feat: Allow editing redirects inline

- Confirm deletion of redirect
- Optimistically update redirects in list view on changes and revert if request fails
---
 frontend/src/App.vue                          |   2 +-
 frontend/src/components/BuilderToolbar.vue    |   1 +
 frontend/src/components/DashboardSidebar.vue  |   1 +
 .../components/Settings/GlobalRedirects.vue   | 268 +++++++++++-------
 4 files changed, 161 insertions(+), 111 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 51c661962..65f3831c6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,7 @@
 			</keep-alive>
 		</router-view>
 		<UseDark attribute="data-theme"></UseDark>
-		<Toaster :theme="isDark ? 'dark' : 'light'" richColors />
+		<Toaster :theme="isDark ? 'dark' : 'light'" richColors class="mr-10" />
 		<Dialogs></Dialogs>
 		<component v-for="dialog in builderStore.appDialogs" :is="dialog"></component>
 	</div>
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 8caf73cc6..34dd8c6b1 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -126,6 +126,7 @@
 			<Dialog
 				v-model="showSettingsDialog"
 				style="z-index: 40"
+				:disableOutsideClickToClose="true"
 				class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
 				:options="{
 					title: 'Settings',
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index ba6b2e4d7..44a9df9f9 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -7,6 +7,7 @@
 				<Dialog
 					v-model="showSettingsDialog"
 					style="z-index: 40"
+					:disableOutsideClickToClose="true"
 					class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
 					:options="{
 						title: 'Settings',
diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
index ee4096fa5..671ce8dc5 100644
--- a/frontend/src/components/Settings/GlobalRedirects.vue
+++ b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -1,65 +1,77 @@
 <template>
 	<div class="flex-1 overflow-y-hidden">
-		<div class="mb-5">
-			<form onsubmit="return false;">
-				<div class="flex gap-2 px-[2px] py-2">
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.from"
-						:hideClearButton="true"
-						required
-						placeholder="From" />
-					<BuilderInput
-						type="text"
-						v-model="redirectMap.to"
-						:hideClearButton="true"
-						required
-						placeholder="To" />
-				</div>
-				<div class="justify-self-end py-1">
-					<Button
-						type="submit"
-						label="Add Redirect"
-						variant="ghost"
-						iconLeft="plus"
-						@click="addRedirect"></Button>
-				</div>
-			</form>
-		</div>
+		<form @submit.prevent="addRedirect" class="mb-5">
+			<div class="flex gap-2 px-[2px] py-2">
+				<BuilderInput v-model="redirectMap.from" placeholder="From" :hideClearButton="true" required />
+				<BuilderInput v-model="redirectMap.to" placeholder="To" :hideClearButton="true" required />
+			</div>
+			<div class="justify-self-end py-1">
+				<Button type="submit" label="Add Redirect" variant="ghost" iconLeft="plus" />
+			</div>
+		</form>
 		<div
-			class="flex h-full flex-col items-center justify-center text-ink-gray-5"
-			v-if="rows.length == 0 && !searchQuery.from && !searchQuery.to">
-			<div class="flex h-28 align-top text-base text-ink-gray-4">No redirects set</div>
+			v-if="!rows.length && !searchQuery.from && !searchQuery.to"
+			class="flex h-full flex-col items-center justify-center">
+			<div class="h-28 text-base text-ink-gray-4">No redirects set</div>
 		</div>
-		<div class="h-full text-sm" v-else>
+		<div v-else class="h-full text-sm">
 			<div
 				class="sticky top-0 flex gap-2 rounded-t-md border-b border-outline-gray-1 bg-surface-gray-1 px-[2px] text-ink-gray-5">
-				<span class="w-1/2">
-					<BuilderInput
-						type="text"
-						v-model="searchQuery.from"
-						@input="(val: string) => (searchQuery.from = val)"
-						placeholder="From URL" />
-				</span>
-				<span class="w-1/2">
-					<BuilderInput
-						type="text"
-						v-model="searchQuery.to"
-						@input="(val: string) => (searchQuery.to = val)"
-						placeholder="To URL" />
-				</span>
+				<BuilderInput v-model="searchQuery.from" placeholder="From URL" />
+				<BuilderInput v-model="searchQuery.to" placeholder="To URL" />
 			</div>
-
 			<div class="h-[calc(100%-115px)] overflow-y-auto">
 				<div
-					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-ink-gray-7 hover:bg-surface-gray-2"
-					v-for="row in rows">
-					<code class="w-1/2 truncate">{{ row.from }}</code>
-					<code class="ml-3 w-1/2 truncate pl-2">{{ row.to }}</code>
-					<FeatherIcon
-						name="trash"
-						class="size-3 cursor-pointer text-ink-gray-5 hover:text-ink-gray-9"
-						@click="deleteRedirect(row.id)" />
+					v-for="row in rows"
+					:key="row.id"
+					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-ink-gray-7 hover:bg-surface-gray-2">
+					<div class="w-1/2">
+						<BuilderInput
+							v-if="editingRedirect === row.id"
+							v-model="editForm.from"
+							:hideClearButton="true"
+							class="text-sm"
+							@keyup.enter="saveRedirect(row.id)"
+							@keyup.escape="cancelEdit" />
+						<code
+							v-else
+							class="block cursor-pointer truncate rounded px-1 py-1 pr-2 hover:bg-surface-gray-1"
+							@click="startEdit(row.id, row.from, row.to)">
+							{{ row.from }}
+						</code>
+					</div>
+					<div class="w-1/2 pl-3 pr-2">
+						<BuilderInput
+							v-if="editingRedirect === row.id"
+							v-model="editForm.to"
+							:hideClearButton="true"
+							class="pl-2 text-sm"
+							@keyup.enter="saveRedirect(row.id)"
+							@keyup.escape="cancelEdit" />
+						<code
+							v-else
+							class="block cursor-pointer truncate rounded px-1 py-1 hover:bg-surface-gray-1"
+							@click="startEdit(row.id, row.from, row.to)">
+							{{ row.to }}
+						</code>
+					</div>
+					<div class="flex gap-1">
+						<template v-if="editingRedirect === row.id">
+							<FeatherIcon
+								name="check"
+								class="size-3 cursor-pointer text-ink-gray-5 hover:text-ink-gray-9"
+								@click="saveRedirect(row.id)" />
+							<FeatherIcon
+								name="x"
+								class="size-3 cursor-pointer text-ink-gray-5 hover:text-ink-gray-9"
+								@click="cancelEdit" />
+						</template>
+						<FeatherIcon
+							v-else
+							name="trash"
+							class="size-3 cursor-pointer text-ink-gray-5 hover:text-ink-gray-9"
+							@click="deleteRedirect(row.id)" />
+					</div>
 				</div>
 			</div>
 		</div>
@@ -67,74 +79,110 @@
 </template>
 <script setup lang="ts">
 import routeRedirects from "@/data/routeRedirects";
+import { confirm } from "@/utils/helpers";
 import { computed, onMounted, ref } from "vue";
 import { toast } from "vue-sonner";
 
-const redirectMap = ref({
-	from: "",
-	to: "",
-});
-
-const searchQuery = ref({
-	from: "",
-	to: "",
-});
+const redirectMap = ref({ from: "", to: "" });
+const searchQuery = ref({ from: "", to: "" });
+const editingRedirect = ref<string | null>(null);
+const editForm = ref({ from: "", to: "" });
 
-onMounted(() => {
-	routeRedirects.fetch();
-});
+onMounted(() => routeRedirects.fetch());
 
-const rows = computed(() => {
-	return (routeRedirects.data || [])
-		.map((redirect: { source: string; target: string; name: string }) => {
-			return {
-				from: redirect.source,
-				to: redirect.target,
-				id: redirect.name,
-			};
-		})
-		.filter((row: { from: string; to: string; id: string }) => {
-			return (
+const rows = computed(() =>
+	(routeRedirects.data || [])
+		.map((redirect: { source: string; target: string; name: string }) => ({
+			from: redirect.source,
+			to: redirect.target,
+			id: redirect.name,
+		}))
+		.filter(
+			(row: { from: string; to: string; id: string }) =>
 				row.from.toLowerCase().includes(searchQuery.value.from.toLowerCase()) &&
-				row.to.toLowerCase().includes(searchQuery.value.to.toLowerCase())
-			);
-		});
-});
+				row.to.toLowerCase().includes(searchQuery.value.to.toLowerCase()),
+		),
+);
+
+const performOptimisticUpdate = (
+	operation: () => Promise<any>,
+	optimistic: () => void,
+	revert: () => void,
+	messages: { loading: string; success: string; error: string },
+) => {
+	optimistic();
+	toast.promise(operation(), {
+		loading: messages.loading,
+		success: () => (routeRedirects.fetch(), messages.success),
+		error: (err: any) => (revert(), `${messages.error}: ${err}`),
+	});
+};
 
 const addRedirect = () => {
-	if (!redirectMap.value.from || !redirectMap.value.to) {
-		return;
-	}
-	toast.promise(
-		routeRedirects.insert.submit({
-			source: redirectMap.value.from,
-			target: redirectMap.value.to,
-			parenttype: "Website Settings",
-			parentfield: "route_redirects",
-			parent: "Website Settings",
-		}),
-		{
-			loading: "Adding redirect...",
-			success: () => {
-				redirectMap.value = { from: "", to: "" };
-				return "Redirect added";
-			},
-			error: (err) => {
-				return `Error adding redirect: ${err}`;
-			},
+	const { from, to } = redirectMap.value;
+	if (!from || !to) return;
+
+	const tempId = `temp_${Date.now()}`;
+	performOptimisticUpdate(
+		() =>
+			routeRedirects.insert.submit({
+				source: from,
+				target: to,
+				parenttype: "Website Settings",
+				parentfield: "route_redirects",
+				parent: "Website Settings",
+			}),
+		() => {
+			if (!routeRedirects.data) routeRedirects.data = [];
+			routeRedirects.data.unshift({ source: from, target: to, name: tempId });
+			redirectMap.value = { from: "", to: "" };
+		},
+		() => {
+			const index = routeRedirects.data.findIndex((r: any) => r.name === tempId);
+			if (index !== -1) routeRedirects.data.splice(index, 1);
 		},
+		{ loading: "Adding redirect...", success: "Redirect added", error: "Error adding redirect" },
 	);
 };
 
-const deleteRedirect = (id: string) => {
-	toast.promise(routeRedirects.delete.submit(id), {
-		loading: "Deleting redirect...",
-		success: () => {
-			return "Redirect deleted";
-		},
-		error: (err) => {
-			return `Error deleting redirect: ${err}`;
-		},
-	});
+const deleteRedirect = async (id: string) => {
+	const redirect = rows.value.find((row: any) => row.id === id);
+	const message = redirect
+		? `Are you sure you want to delete the redirect from "${redirect.from}" to "${redirect.to}"?`
+		: "Are you sure you want to delete this redirect?";
+
+	if (await confirm(message)) {
+		const index = routeRedirects.data.findIndex((r: any) => r.name === id);
+		const backup = index !== -1 ? { ...routeRedirects.data[index] } : null;
+
+		performOptimisticUpdate(
+			() => routeRedirects.delete.submit(id),
+			() => index !== -1 && routeRedirects.data.splice(index, 1),
+			() => backup && index !== -1 && routeRedirects.data.splice(index, 0, backup),
+			{ loading: "Deleting redirect...", success: "Redirect deleted", error: "Error deleting redirect" },
+		);
+	}
+};
+
+const updateRedirect = (id: string, from: string, to: string) => {
+	const index = routeRedirects.data.findIndex((r: any) => r.name === id);
+	performOptimisticUpdate(
+		() => routeRedirects.setValue.submit({ name: id, source: from, target: to }),
+		() => index !== -1 && Object.assign(routeRedirects.data[index], { source: from, target: to }),
+		() => routeRedirects.fetch(),
+		{ loading: "Updating redirect...", success: "Redirect updated", error: "Error updating redirect" },
+	);
+};
+
+const startEdit = (id: string, from: string, to: string) => (
+	(editingRedirect.value = id), (editForm.value = { from, to })
+);
+
+const cancelEdit = () => ((editingRedirect.value = null), (editForm.value = { from: "", to: "" }));
+const saveRedirect = (id: string) => {
+	if (editForm.value.from && editForm.value.to) {
+		updateRedirect(id, editForm.value.from, editForm.value.to);
+		cancelEdit();
+	}
 };
 </script>

From 4493a4e3211147f5d8d11aa99385269ee8431950 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 10:51:48 +0530
Subject: [PATCH 037/547] fix: Set default transition (if not set) whenever
 state style is set

---
 frontend/src/components/Controls/PropertyControl.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index 037691312..c20a9dfb6 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -314,6 +314,13 @@ const stateOptions = computed(() => {
 				.map((state: string) => ({
 					label: stateLabels[state] || state,
 					onClick: () => {
+						blockController.getSelectedBlocks().forEach((block) => {
+							if (!block.getStyle("transitionDuration")) {
+								block.setStyle("transitionDuration", "300ms");
+								block.setStyle("transitionTimingFunction", "ease");
+								block.setStyle("transitionProperty", "all");
+							}
+						});
 						blockController.setStyle(`${state}:${props.styleProperty}`, modelValue.value);
 					},
 				})),

From 1b3a32dd220282d083a6c912affb0c5a8c570402 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 11:01:15 +0530
Subject: [PATCH 038/547] feat: Add option to set cursor

---
 .../BlockPropertySections/StyleSection.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 437b381d8..3459ac5f1 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -228,6 +228,25 @@ const styleSectionProperties = [
 		searchKeyWords:
 			"Overflow, Y, OverflowY, Overflow Y, Auto, Visible, Hide, Scroll, vertical scroll, verticalScroll",
 	},
+	{
+		component: PropertyControl,
+		getProps: () => {
+			return {
+				label: "Cursor",
+				styleProperty: "cursor",
+				type: "select",
+				options: [
+					{ value: null, label: "Default" },
+					{ value: "pointer", label: "Pointer" },
+					{ value: "move", label: "Move" },
+					{ value: "text", label: "Text" },
+					{ value: "crosshair", label: "Crosshair" },
+					{ value: "not-allowed", label: "Not Allowed" },
+				],
+			};
+		},
+		searchKeyWords: "Cursor, Pointer, Move, Text, Crosshair, NotAllowed, Not Allowed",
+	},
 ];
 
 export default {

From fb41ecd7d58b1a126097788a9fa1ec32b27af8c3 Mon Sep 17 00:00:00 2001
From: yangshare <simayifeng@gmail.com>
Date: Tue, 11 Nov 2025 13:38:10 +0800
Subject: [PATCH 039/547] Refactor init.sh to streamline bench setup process

Fix the issue of init.sh if/else structure errors
---
 docker/init.sh | 59 +++++++++++++++++++++++++-------------------------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/docker/init.sh b/docker/init.sh
index 2b276bcbb..b0b8d3b82 100755
--- a/docker/init.sh
+++ b/docker/init.sh
@@ -6,34 +6,35 @@ if [ -d "/home/frappe/frappe-bench/apps/frappe" ]; then
     bench start
 else
     echo "Creating new bench..."
-fi
-
-bench init --skip-redis-config-generation frappe-bench --version version-15
-
-cd frappe-bench
-
-# Use containers instead of localhost
-bench set-mariadb-host mariadb
-bench set-redis-cache-host redis:6379
-bench set-redis-queue-host redis:6379
-bench set-redis-socketio-host redis:6379
-
-# Remove redis, watch from Procfile
-sed -i '/redis/d' ./Procfile
-sed -i '/watch/d' ./Procfile
 
-bench get-app builder --branch develop
-
-bench new-site builder.localhost \
---force \
---mariadb-root-password 123 \
---admin-password admin \
---no-mariadb-socket
-
-bench --site builder.localhost install-app builder
-bench --site builder.localhost set-config developer_mode 1
-bench --site builder.localhost clear-cache
-bench --site builder.localhost set-config mute_emails 1
-bench use builder.localhost
+    bench init --skip-redis-config-generation frappe-bench --version version-15
+    
+    cd frappe-bench
+    
+    # Use containers instead of localhost
+    bench set-mariadb-host mariadb
+    bench set-redis-cache-host redis:6379
+    bench set-redis-queue-host redis:6379
+    bench set-redis-socketio-host redis:6379
+    
+    # Remove redis, watch from Procfile
+    sed -i '/redis/d' ./Procfile
+    sed -i '/watch/d' ./Procfile
+    
+    bench get-app builder --branch develop
+    
+    bench new-site builder.localhost \
+    --force \
+    --mariadb-root-password 123 \
+    --admin-password admin \
+    --no-mariadb-socket
+    
+    bench --site builder.localhost install-app builder
+    bench --site builder.localhost set-config developer_mode 1
+    bench --site builder.localhost clear-cache
+    bench --site builder.localhost set-config mute_emails 1
+    bench use builder.localhost
+    
+    bench start
 
-bench start
\ No newline at end of file
+fi

From 34e3ff5ccad2a523ad9057212e496acaef79b0f5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 12:14:27 +0530
Subject: [PATCH 040/547] feat: Add option to make folder standard that cannot
 be edited or deleted

---
 .../builder_project_folder.js                 | 21 +++++++++++---
 .../builder_project_folder.json               | 13 +++++++--
 .../builder_project_folder.py                 | 29 +++++++++++++++++--
 .../test_builder_project_folder.py            | 20 +++++++++++++
 frontend/components.d.ts                      |  2 +-
 frontend/src/components/DashboardSidebar.vue  | 10 +++++--
 frontend/src/data/builderProjectFolder.ts     |  2 +-
 .../src/types/Builder/BuilderProjectFolder.ts |  2 ++
 8 files changed, 87 insertions(+), 12 deletions(-)
 create mode 100644 builder/builder/doctype/builder_project_folder/test_builder_project_folder.py

diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.js b/builder/builder/doctype/builder_project_folder/builder_project_folder.js
index 630d2761b..0a7278931 100644
--- a/builder/builder/doctype/builder_project_folder/builder_project_folder.js
+++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.js
@@ -1,8 +1,21 @@
 // Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors
 // For license information, please see license.txt
 
-// frappe.ui.form.on("Builder Project Folder", {
-// 	refresh(frm) {
+frappe.ui.form.on("Builder Project Folder", {
+  refresh(frm) {
+    frm.get_field("is_standard").df.read_only = !frappe.boot.developer_mode;
+    frm.refresh_field("is_standard");
 
-// 	},
-// });
+    if (frm.doc.is_standard && !frappe.boot.developer_mode) {
+      frm.disable_form();
+      frm.dashboard.clear_comment();
+      frm.dashboard.add_comment(
+        __(
+          "Standard folders cannot be modified. Please enable developer mode to edit standard folders.",
+        ),
+        "orange",
+        true,
+      );
+    }
+  },
+});
diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.json b/builder/builder/doctype/builder_project_folder/builder_project_folder.json
index 7507969b7..db813b83f 100644
--- a/builder/builder/doctype/builder_project_folder/builder_project_folder.json
+++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.json
@@ -6,6 +6,7 @@
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
+  "is_standard",
   "folder_name"
  ],
  "fields": [
@@ -14,11 +15,18 @@
    "fieldtype": "Data",
    "label": "Folder Name",
    "unique": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "is_standard",
+   "fieldtype": "Check",
+   "label": "Is Standard"
   }
  ],
+ "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-11-26 17:04:15.337801",
+ "modified": "2025-11-11 11:51:16.422175",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Project Folder",
@@ -50,7 +58,8 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
  "states": []
-}
\ No newline at end of file
+}
diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.py b/builder/builder/doctype/builder_project_folder/builder_project_folder.py
index d36fd16d4..9de6c1bbe 100644
--- a/builder/builder/doctype/builder_project_folder/builder_project_folder.py
+++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.py
@@ -1,7 +1,7 @@
 # Copyright (c) 2024, 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,31 @@ class BuilderProjectFolder(Document):
 		from frappe.types import DF
 
 		folder_name: DF.Data | None
+		is_standard: DF.Check
 	# end: auto-generated types
 
-	pass
+	def validate(self):
+		"""Validate that standard folders cannot be edited if not in developer mode"""
+		if self.is_standard and not frappe.conf.get("developer_mode"):
+			if not is_system_activity():
+				frappe.throw(
+					frappe._(
+						"Standard folders cannot be modified. Please enable developer mode to edit standard folders."
+					),
+					frappe.PermissionError,
+				)
+
+	def on_trash(self):
+		"""Prevent deletion of standard folders when not in developer mode"""
+		if self.is_standard and not frappe.conf.get("developer_mode"):
+			if not is_system_activity():
+				frappe.throw(
+					frappe._(
+						"Standard folders cannot be deleted. Please enable developer mode to delete standard folders."
+					),
+					frappe.PermissionError,
+				)
+
+
+def is_system_activity():
+	return frappe.flags.in_import or frappe.flags.in_patch or frappe.flags.in_migrate or frappe.in_test
diff --git a/builder/builder/doctype/builder_project_folder/test_builder_project_folder.py b/builder/builder/doctype/builder_project_folder/test_builder_project_folder.py
new file mode 100644
index 000000000..965059ed8
--- /dev/null
+++ b/builder/builder/doctype/builder_project_folder/test_builder_project_folder.py
@@ -0,0 +1,20 @@
+# Copyright (c) 2025, Frappe Technologies Pvt Ltd and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class IntegrationTestBuilderProjectFolder(IntegrationTestCase):
+	"""
+	Integration tests for BuilderProjectFolder.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 8a1d05b62..c4e117593 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 44a9df9f9..f12e7c636 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -158,9 +158,15 @@
 						{{ project.folder_name }}
 					</EditableSpan>
 				</span>
+				<Tooltip
+					v-if="isFolderActive(project.folder_name) && project.is_standard"
+					placement="top"
+					text="System generated folder cannot be edited or deleted">
+					<FeatherIcon name="info" class="size-4 text-gray-500" />
+				</Tooltip>
 				<Dropdown
 					placement="right"
-					v-if="isFolderActive(project.folder_name)"
+					v-else-if="isFolderActive(project.folder_name)"
 					:options="[
 						{
 							label: 'Rename',
@@ -207,7 +213,7 @@ import useBuilderStore from "@/stores/builderStore";
 import { BuilderProjectFolder } from "@/types/Builder/BuilderProjectFolder";
 import { confirm } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
-import { createResource, Dialog, Dropdown } from "frappe-ui";
+import { createResource, Dialog, Dropdown, Tooltip } from "frappe-ui";
 import { TrialBanner } from "frappe-ui/frappe";
 import { ref } from "vue";
 const isDark = useDark({
diff --git a/frontend/src/data/builderProjectFolder.ts b/frontend/src/data/builderProjectFolder.ts
index 0a305e7df..7f70303ad 100644
--- a/frontend/src/data/builderProjectFolder.ts
+++ b/frontend/src/data/builderProjectFolder.ts
@@ -3,7 +3,7 @@ import { createListResource } from "frappe-ui";
 const builderProjectFolder = createListResource({
 	method: "GET",
 	doctype: "Builder Project Folder",
-	fields: ["folder_name"],
+	fields: ["folder_name", "is_standard"],
 	orderBy: "`folder_name`",
 	cache: "builderProjectFolder",
 	start: 0,
diff --git a/frontend/src/types/Builder/BuilderProjectFolder.ts b/frontend/src/types/Builder/BuilderProjectFolder.ts
index 724b34930..1aba329bc 100644
--- a/frontend/src/types/Builder/BuilderProjectFolder.ts
+++ b/frontend/src/types/Builder/BuilderProjectFolder.ts
@@ -10,6 +10,8 @@ export interface BuilderProjectFolder{
 	parentfield?: string
 	parenttype?: string
 	idx?: number
+	/**	Is Standard : Check	*/
+	is_standard?: 0 | 1
 	/**	Folder Name : Data	*/
 	folder_name?: string
 }
\ No newline at end of file

From 6970df54d7745b06740897493d04c9816e101dea Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 12:36:27 +0530
Subject: [PATCH 041/547] refactor: Common component for pages actions

---
 frontend/components.d.ts                      |   2 +-
 .../src/components/PageActionsDropdown.vue    |  53 +++++++
 frontend/src/components/PageCard.vue          |  35 +----
 frontend/src/components/PageListItem.vue      |  15 +-
 frontend/src/components/PagePreviewCard.vue   | 144 ------------------
 frontend/src/pages/PageBuilderDashboard.vue   |   6 +-
 6 files changed, 63 insertions(+), 192 deletions(-)
 create mode 100644 frontend/src/components/PageActionsDropdown.vue
 delete mode 100644 frontend/src/components/PagePreviewCard.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c4e117593..d6f6fa028 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -86,6 +86,7 @@ declare module 'vue' {
     ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
     OptionToggle: typeof import('./src/components/Controls/OptionToggle.vue')['default']
     PaddingHandler: typeof import('./src/components/PaddingHandler.vue')['default']
+    PageActionsDropdown: typeof import('./src/components/PageActionsDropdown.vue')['default']
     PageAnalytics: typeof import('./src/components/Settings/PageAnalytics.vue')['default']
     PageCard: typeof import('./src/components/PageCard.vue')['default']
     PageClientScriptManager: typeof import('./src/components/PageClientScriptManager.vue')['default']
@@ -95,7 +96,6 @@ declare module 'vue' {
     PageListModal: typeof import('./src/components/Modals/PageListModal.vue')['default']
     PageMeta: typeof import('./src/components/Settings/PageMeta.vue')['default']
     PageOptions: typeof import('./src/components/PageOptions.vue')['default']
-    PagePreviewCard: typeof import('./src/components/PagePreviewCard.vue')['default']
     PageRobots: typeof import('./src/components/Settings/PageRobots.vue')['default']
     PageScript: typeof import('./src/components/PageScript.vue')['default']
     PanelResizer: typeof import('./src/components/PanelResizer.vue')['default']
diff --git a/frontend/src/components/PageActionsDropdown.vue b/frontend/src/components/PageActionsDropdown.vue
new file mode 100644
index 000000000..0d185d0cf
--- /dev/null
+++ b/frontend/src/components/PageActionsDropdown.vue
@@ -0,0 +1,53 @@
+<template>
+	<Dropdown
+		:options="[
+			{
+				group: 'Actions',
+				hideLabel: true,
+				items: [
+					{
+						label: 'Duplicate',
+						onClick: () => pageStore.duplicatePage(props.page),
+						icon: 'copy',
+					},
+					{
+						label: 'View in Desk',
+						onClick: () => openInDesk(props.page),
+						icon: 'arrow-up-right',
+					},
+				],
+			},
+			{
+				group: 'Delete',
+				hideLabel: true,
+				items: [{ label: 'Delete', onClick: () => pageStore.deletePage(props.page), icon: 'trash' }],
+			},
+		]"
+		:size="size"
+		:placement="placement">
+		<template v-slot="{ open }">
+			<slot :open="open" />
+		</template>
+	</Dropdown>
+</template>
+
+<script setup lang="ts">
+import usePageStore from "@/stores/pageStore";
+import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { openInDesk } from "@/utils/helpers";
+import { Dropdown } from "frappe-ui";
+
+const pageStore = usePageStore();
+
+const props = withDefaults(
+	defineProps<{
+		page: BuilderPage;
+		size?: "xs" | "sm" | "md" | "lg";
+		placement?: "left" | "right" | "top" | "bottom";
+	}>(),
+	{
+		size: "md",
+		placement: "bottom",
+	},
+);
+</script>
diff --git a/frontend/src/components/PageCard.vue b/frontend/src/components/PageCard.vue
index 01aeaee81..26ab23c34 100644
--- a/frontend/src/components/PageCard.vue
+++ b/frontend/src/components/PageCard.vue
@@ -22,32 +22,7 @@
 						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">Edited {{ timeAgo }}</p>
 					</UseTimeAgo>
 				</span>
-				<Dropdown
-					:options="[
-						{
-							group: 'Actions',
-							hideLabel: true,
-							items: [
-								{
-									label: 'Duplicate',
-									onClick: () => pageStore.duplicatePage(page),
-									icon: 'copy',
-								},
-								{
-									label: 'View in Desk',
-									onClick: () => openInDesk(page),
-									icon: 'arrow-up-right',
-								},
-							],
-						},
-						{
-							group: 'Delete',
-							hideLabel: true,
-							items: [{ label: 'Delete', onClick: () => pageStore.deletePage(page), icon: 'trash' }],
-						},
-					]"
-					size="xs"
-					placement="right">
+				<PageActionsDropdown :page="page" size="xs" placement="right">
 					<template v-slot="{ open }">
 						<BuilderButton
 							icon="more-horizontal"
@@ -56,19 +31,15 @@
 							class="bg-surface-white !text-ink-gray-5 hover:!text-ink-gray-9"
 							@click="open"></BuilderButton>
 					</template>
-				</Dropdown>
+				</PageActionsDropdown>
 			</div>
 		</div>
 	</router-link>
 </template>
 <script setup lang="ts">
-import usePageStore from "@/stores/pageStore";
+import PageActionsDropdown from "@/components/PageActionsDropdown.vue";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { openInDesk } from "@/utils/helpers";
 import { UseTimeAgo } from "@vueuse/components";
-import { Dropdown } from "frappe-ui";
-
-const pageStore = usePageStore();
 
 defineProps<{
 	page: BuilderPage;
diff --git a/frontend/src/components/PageListItem.vue b/frontend/src/components/PageListItem.vue
index 708e140fc..e1468cdae 100644
--- a/frontend/src/components/PageListItem.vue
+++ b/frontend/src/components/PageListItem.vue
@@ -53,21 +53,14 @@
 					class="[&>div]:bg-surface-gray-2 [&>div]:text-ink-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-ink-gray-6"
 					size="sm"
 					:title="`Created by ${page.owner}`" />
-				<Dropdown
-					:options="[
-						{ label: 'Duplicate', onClick: () => pageStore.duplicatePage(page), icon: 'copy' },
-						{ label: 'View in Desk', onClick: () => openInDesk(page), icon: 'arrow-up-right' },
-						{ label: 'Delete', onClick: () => pageStore.deletePage(page), icon: 'trash' },
-					]"
-					size="sm"
-					placement="right">
+				<PageActionsDropdown :page="page" size="sm" placement="right">
 					<template v-slot="{ open }">
 						<FeatherIcon
 							name="more-horizontal"
 							class="h-4 w-4 font-bold text-ink-gray-6"
 							@click="open"></FeatherIcon>
 					</template>
-				</Dropdown>
+				</PageActionsDropdown>
 			</div>
 		</div>
 	</router-link>
@@ -75,11 +68,11 @@
 <script setup lang="ts">
 import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import GlobeIcon from "@/components/Icons/Globe.vue";
+import PageActionsDropdown from "@/components/PageActionsDropdown.vue";
 import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { openInDesk } from "@/utils/helpers";
 import { UseTimeAgo } from "@vueuse/components";
-import { Avatar, Badge, Dropdown } from "frappe-ui";
+import { Avatar, Badge } from "frappe-ui";
 
 const pageStore = usePageStore();
 
diff --git a/frontend/src/components/PagePreviewCard.vue b/frontend/src/components/PagePreviewCard.vue
deleted file mode 100644
index 500fc4b86..000000000
--- a/frontend/src/components/PagePreviewCard.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-	<router-link
-		:to="{ name: 'builder', params: { pageId: page.page_name } }"
-		v-if="mode === 'grid'"
-		class="max-w-[250px] flex-grow basis-52">
-		<div
-			class="group relative mr-2 w-full overflow-hidden rounded-md shadow hover:cursor-pointer dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200">
-			<img
-				width="250"
-				height="140"
-				:src="page.preview"
-				onerror="this.src='/assets/builder/images/fallback.png'"
-				class="w-full overflow-hidden rounded-lg bg-gray-50 object-cover p-2 dark:bg-zinc-900" />
-			<div class="flex items-center justify-between border-t-[1px] px-3 dark:border-zinc-800">
-				<span class="inline-block max-w-[160px] py-2 text-sm text-gray-700 dark:text-zinc-200">
-					<div class="flex items-center gap-1">
-						<p class="truncate">
-							{{ page.page_title || page.page_name }}
-						</p>
-					</div>
-					<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-						<p class="mt-1 block text-xs text-gray-500">Edited {{ timeAgo }}</p>
-					</UseTimeAgo>
-				</span>
-				<Dropdown :options="actions" size="sm" placement="right">
-					<template v-slot="{ open }">
-						<FeatherIcon
-							name="more-vertical"
-							class="h-4 w-4 text-gray-500 hover:text-gray-700"
-							@click="open"></FeatherIcon>
-					</template>
-				</Dropdown>
-			</div>
-		</div>
-	</router-link>
-	<router-link
-		v-if="mode === 'list'"
-		:key="page.page_name"
-		:to="{ name: 'builder', params: { pageId: page.page_name } }"
-		class="h-fit w-full flex-grow">
-		<div
-			class="group relative mr-2 flex w-full overflow-hidden rounded-md shadow hover:cursor-pointer dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200">
-			<img
-				width="250"
-				height="140"
-				:src="page.preview"
-				onerror="this.src='/assets/builder/images/fallback.png'"
-				class="block w-44 overflow-hidden rounded-lg bg-gray-50 object-cover p-2 dark:bg-zinc-900" />
-			<div class="flex flex-1 items-start justify-between border-t-[1px] p-3 px-3 dark:border-zinc-800">
-				<span class="flex h-full flex-col justify-between text-sm text-gray-700 dark:text-zinc-200">
-					<div>
-						<div class="flex items-center gap-1">
-							<p class="truncate">
-								{{ page.page_title || page.page_name }}
-							</p>
-						</div>
-						<div class="mt-2 flex items-center gap-1">
-							<FeatherIcon name="globe" class="h-3 w-3 text-gray-500 hover:text-gray-700"></FeatherIcon>
-							<p class="text-xs text-gray-600">
-								{{ page.route }}
-							</p>
-						</div>
-					</div>
-					<div class="flex items-baseline gap-1">
-						<p class="mt-1 block text-xs text-gray-500">Created By {{ page.owner }}</p>
-						·
-						<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-							<p class="mt-1 block text-xs text-gray-500">Edited {{ timeAgo }}</p>
-						</UseTimeAgo>
-					</div>
-				</span>
-				<div class="flex items-center gap-2">
-					<Badge theme="green" v-if="page.published" class="dark:bg-green-900 dark:text-green-400">
-						Published
-					</Badge>
-					<Dropdown :options="actions" size="sm" placement="right">
-						<template v-slot="{ open }">
-							<FeatherIcon
-								name="more-vertical"
-								class="h-4 w-4 text-gray-500 hover:text-gray-700"
-								@click="open"></FeatherIcon>
-						</template>
-					</Dropdown>
-				</div>
-			</div>
-		</div>
-	</router-link>
-</template>
-<script setup lang="ts">
-import { webPages } from "@/data/webPage";
-import useBuilderStore from "@/stores/builderStore";
-import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { confirm, openInDesk } from "@/utils/helpers";
-import { UseTimeAgo } from "@vueuse/components";
-import { Badge, Dropdown, createDocumentResource } from "frappe-ui";
-
-const builderStore = useBuilderStore();
-
-const props = defineProps<{
-	page: BuilderPage;
-	mode: "grid" | "list";
-}>();
-
-const duplicatePage = async (page: BuilderPage) => {
-	const webPageResource = await createDocumentResource({
-		doctype: "Builder Page",
-		name: page.page_name,
-		auto: true,
-	});
-	await webPageResource.get.promise;
-
-	const pageCopy = webPageResource.doc as BuilderPage;
-	pageCopy.page_name = `${pageCopy.page_name}-copy`;
-	pageCopy.page_title = `${pageCopy.page_title} Copy`;
-	await webPages.insert.submit(pageCopy);
-};
-
-const deletePage = async (page: BuilderPage) => {
-	const confirmed = await confirm(
-		`Are you sure you want to delete <b title=${page.page_name}>${page.page_title}</b>?`,
-	);
-	if (confirmed) {
-		await webPages.delete.submit(page.name);
-	}
-};
-
-const actions = [
-	{
-		label: "Duplicate",
-		onClick: () => duplicatePage(props.page),
-		icon: "copy",
-	},
-	{
-		label: "View in Desk",
-		onClick: () => openInDesk(props.page),
-		icon: "arrow-up-right",
-	},
-	{
-		label: "Delete",
-		onClick: () => deletePage(props.page),
-		icon: "trash",
-	},
-];
-</script>
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index d453049f6..9c71a7f08 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -23,8 +23,6 @@
 					</router-link>
 				</div>
 			</div>
-			<!-- Sidebar -->
-			<!-- Main Content -->
 			<div class="flex-1 overflow-auto">
 				<section class="m-auto mb-32 flex h-fit w-3/4 max-w-6xl flex-col pt-5">
 					<!-- list head -->
@@ -125,7 +123,7 @@
 							<PageCard
 								v-for="page in webPages.data"
 								:selected="selectedPages.has(page.name)"
-								@click.capture="($event) => handleClick($event, page)"
+								@click.capture="($event: MouseEvent) => handleClick($event, page)"
 								:key="page.page_name"
 								:page="page"
 								v-on-click-and-hold="() => enableSelectionMode(page)"></PageCard>
@@ -133,7 +131,7 @@
 						<!-- list -->
 						<div v-if="displayType === 'list'">
 							<PageListItem
-								@click.capture="($event) => handleClick($event, page)"
+								@click.capture="($event: MouseEvent) => handleClick($event, page)"
 								v-for="page in webPages.data"
 								:selected="selectedPages.has(page.name)"
 								:key="page.page_name"

From 63b9ae71805cd4947dc5fa993f7f4b3fa8ae6a5b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 13:26:45 +0530
Subject: [PATCH 042/547] fix: ContextMenu usage in BlockContextMenu

---
 frontend/src/components/BlockContextMenu.vue | 27 +++-----------------
 frontend/src/components/ContextMenu.vue      |  2 --
 2 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index d9aceae6f..ea0fc3d6a 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -1,12 +1,6 @@
 <template>
 	<div>
-		<ContextMenu
-			v-if="contextMenuVisible"
-			:pos-x="posX"
-			:pos-y="posY"
-			:options="contextMenuOptions"
-			@select="handleContextMenuSelect"
-			v-on-click-outside="() => (contextMenuVisible = false)" />
+		<ContextMenu ref="contextMenu" :options="contextMenuOptions" />
 		<NewComponent v-if="block" :block="block" v-model="showNewComponentDialog"></NewComponent>
 		<NewBlockTemplate v-if="block" :block="block" v-model="showBlockTemplateDialog"></NewBlockTemplate>
 	</div>
@@ -16,23 +10,18 @@ import type Block from "@/block";
 import ContextMenu from "@/components/ContextMenu.vue";
 import NewBlockTemplate from "@/components/Modals/NewBlockTemplate.vue";
 import NewComponent from "@/components/Modals/NewComponent.vue";
-import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy, triggerCopyEvent } from "@/utils/helpers";
-import { vOnClickOutside } from "@vueuse/components";
 import { useStorage } from "@vueuse/core";
 import { Ref, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 
 const componentStore = useComponentStore();
 const canvasStore = useCanvasStore();
-const builderStore = useBuilderStore();
 
-const contextMenuVisible = ref(false);
-const posX = ref(0);
-const posY = ref(0);
+const contextMenu = ref(null) as unknown as Ref<InstanceType<typeof ContextMenu>>;
 const triggeredFromLayersPanel = ref(false);
 
 const block = ref(null) as unknown as Ref<Block>;
@@ -47,18 +36,8 @@ const showContextMenu = (event: MouseEvent, refBlock: Block) => {
 	target.value = event.target as HTMLElement;
 	const layersPanel = target.value.closest(".block-layers");
 	triggeredFromLayersPanel.value = Boolean(layersPanel);
-
 	if (block.value.isRoot()) return;
-	contextMenuVisible.value = true;
-	posX.value = event.pageX;
-	posY.value = event.pageY;
-	event.preventDefault();
-	event.stopPropagation();
-};
-
-const handleContextMenuSelect = (action: CallableFunction) => {
-	action();
-	contextMenuVisible.value = false;
+	contextMenu.value?.show(event);
 };
 
 const copiedStyle = useStorage("copiedStyle", { blockId: "", style: {} }, sessionStorage) as Ref<StyleCopy>;
diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
index 492f9bb89..22787cf10 100644
--- a/frontend/src/components/ContextMenu.vue
+++ b/frontend/src/components/ContextMenu.vue
@@ -90,7 +90,6 @@ const handleClick = (action: CallableFunction) => {
 	emit("select", action);
 };
 
-// Public methods
 const show = (event: MouseEvent) => {
 	internalPosX.value = event.pageX;
 	internalPosY.value = event.pageY;
@@ -104,7 +103,6 @@ const hide = () => {
 	emit("hide");
 };
 
-// Expose public methods
 defineExpose({
 	show,
 	hide,

From fca2f49b99290a66c7e96aa93e774f9cd3856085 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 14:21:32 +0530
Subject: [PATCH 043/547] fix: Hide delete option from context menu for
 standard page

---
 frontend/src/components/PageActionsDropdown.vue | 17 ++++++++++++-----
 frontend/src/data/webPage.ts                    |  1 +
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PageActionsDropdown.vue b/frontend/src/components/PageActionsDropdown.vue
index 0d185d0cf..af2d63209 100644
--- a/frontend/src/components/PageActionsDropdown.vue
+++ b/frontend/src/components/PageActionsDropdown.vue
@@ -10,18 +10,25 @@
 						onClick: () => pageStore.duplicatePage(props.page),
 						icon: 'copy',
 					},
+					{
+						label: 'View Page',
+						onClick: () => pageStore.openPageInBrowser(props.page),
+						icon: 'globe',
+						condition: () => Boolean(props.page.published),
+					},
 					{
 						label: 'View in Desk',
 						onClick: () => openInDesk(props.page),
 						icon: 'arrow-up-right',
 					},
+					{
+						label: 'Delete',
+						onClick: () => pageStore.deletePage(props.page),
+						icon: 'trash',
+						condition: () => !props.page.is_standard,
+					},
 				],
 			},
-			{
-				group: 'Delete',
-				hideLabel: true,
-				items: [{ label: 'Delete', onClick: () => pageStore.deletePage(props.page), icon: 'trash' }],
-			},
 		]"
 		:size="size"
 		:placement="placement">
diff --git a/frontend/src/data/webPage.ts b/frontend/src/data/webPage.ts
index 27c0f877b..b7ad6b6a0 100644
--- a/frontend/src/data/webPage.ts
+++ b/frontend/src/data/webPage.ts
@@ -18,6 +18,7 @@ const webPages = createListResource({
 		"is_template",
 		"authenticated_access",
 		"project_folder",
+		"is_standard",
 		"owner",
 	],
 	filters: {

From 19d73ab24cef21bda177d642826e9b9fad236a37 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 14:49:59 +0530
Subject: [PATCH 044/547] fix: List all published page options for home page
 selection

Previously, only pages that the filtered in dashboard used to show up as a option for home page selection
---
 .../src/components/Settings/GlobalGeneral.vue  |  6 +++---
 frontend/src/data/allWebPages.ts               | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/data/allWebPages.ts

diff --git a/frontend/src/components/Settings/GlobalGeneral.vue b/frontend/src/components/Settings/GlobalGeneral.vue
index 9e03dea04..9a340198d 100644
--- a/frontend/src/components/Settings/GlobalGeneral.vue
+++ b/frontend/src/components/Settings/GlobalGeneral.vue
@@ -76,8 +76,8 @@
 <script setup lang="ts">
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import Switch from "@/components/Controls/Switch.vue";
+import { allWebPages } from "@/data/allWebPages";
 import { builderSettings } from "@/data/builderSettings";
-import { webPages } from "@/data/webPage";
 import { websiteSettings } from "@/data/websiteSettings";
 import useBuilderStore from "@/stores/builderStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
@@ -87,8 +87,8 @@ import ImageUploader from "../Controls/ImageUploader.vue";
 const builderStore = useBuilderStore();
 
 const routeOptions = computed(() => {
-	return webPages.data
-		.filter((page: BuilderPage) => {
+	return allWebPages.data
+		?.filter((page: BuilderPage) => {
 			return page.route && !page.dynamic_route;
 		})
 		.map((page: BuilderPage) => {
diff --git a/frontend/src/data/allWebPages.ts b/frontend/src/data/allWebPages.ts
new file mode 100644
index 000000000..f1de073e8
--- /dev/null
+++ b/frontend/src/data/allWebPages.ts
@@ -0,0 +1,18 @@
+import { createListResource } from "frappe-ui";
+
+const allWebPages = createListResource({
+	method: "GET",
+	doctype: "Builder Page",
+	fields: ["name", "route"],
+	filters: {
+		is_template: 0,
+		published: 1,
+		authenticated_access: 0,
+		dynamic_route: 0,
+	},
+	cache: "all_pages",
+	pageLength: 100,
+	auto: true,
+});
+
+export { allWebPages };

From bb16fd96e25839692a87a0d2b360714a3a2bffb5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 14:51:01 +0530
Subject: [PATCH 045/547] perf: Lazily load individual settings to keep initial
 load lighter

---
 frontend/components.d.ts                    |  1 -
 frontend/src/components/BuilderSettings.vue | 44 +++++++++++++--------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 658b0fa9c..c4e117593 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -33,7 +33,6 @@ declare module 'vue' {
     BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
     BuilderButton: typeof import('./src/components/Controls/BuilderButton.vue')['default']
     BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
-    BuilderInput: typeof import('./src/components/BuilderInput.vue')['default']
     BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
     BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
     BuilderSettings: typeof import('./src/components/BuilderSettings.vue')['default']
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 88f341cb8..672a4e8ef 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -32,21 +32,13 @@
 </template>
 <script setup lang="ts">
 import RedirectIcon from "@/components/Icons/Redirect.vue";
-import GlobalRedirects from "@/components/Settings/GlobalRedirects.vue";
-import PageCode from "@/components/Settings/PageCode.vue";
 import usePageStore from "@/stores/pageStore";
-import { computed, onActivated, ref } from "vue";
+import { computed, defineAsyncComponent, onActivated, ref } from "vue";
 import { useRoute } from "vue-router";
 import ChartIcon from "./Icons/Chart.vue";
 import CodeIcon from "./Icons/Code.vue";
 import MetaIcon from "./Icons/Meta.vue";
 import SettingsIcon from "./Icons/Settings.vue";
-import GlobalAnalytics from "./Settings/GlobalAnalytics.vue";
-import GlobalCode from "./Settings/GlobalCode.vue";
-import GlobalGeneral from "./Settings/GlobalGeneral.vue";
-import PageAnalytics from "./Settings/PageAnalytics.vue";
-import PageGeneral from "./Settings/PageGeneral.vue";
-import PageMeta from "./Settings/PageMeta.vue";
 
 const props = defineProps<{
 	onlyGlobal?: boolean;
@@ -83,16 +75,28 @@ const pageSettings = {
 		{
 			label: "General",
 			value: "page_general",
-			component: PageGeneral,
+			component: defineAsyncComponent(() => import("@/components/Settings/PageGeneral.vue")),
 			title: "General",
 			icon: SettingsIcon,
 		},
-		{ label: "Code", value: "page_code", component: PageCode, title: "Page Code", icon: CodeIcon },
-		{ label: "Meta", value: "page_meta", component: PageMeta, title: "Meta", icon: MetaIcon },
+		{
+			label: "Code",
+			value: "page_code",
+			component: defineAsyncComponent(() => import("@/components/Settings/PageCode.vue")),
+			title: "Page Code",
+			icon: CodeIcon,
+		},
+		{
+			label: "Meta",
+			value: "page_meta",
+			component: defineAsyncComponent(() => import("@/components/Settings/PageMeta.vue")),
+			title: "Meta",
+			icon: MetaIcon,
+		},
 		{
 			label: "Analytics",
 			value: "page_analytics",
-			component: PageAnalytics,
+			component: defineAsyncComponent(() => import("@/components/Settings/PageAnalytics.vue")),
 			title: "Page Views",
 			icon: ChartIcon,
 		},
@@ -105,23 +109,29 @@ const globalSettings = {
 		{
 			label: "General",
 			value: "global_general",
-			component: GlobalGeneral,
+			component: defineAsyncComponent(() => import("@/components/Settings/GlobalGeneral.vue")),
 			title: "General",
 			icon: SettingsIcon,
 			disabled: false,
 		},
-		{ label: "Code", value: "global_code", component: GlobalCode, title: "Global Code", icon: CodeIcon },
+		{
+			label: "Code",
+			value: "global_code",
+			component: defineAsyncComponent(() => import("@/components/Settings/GlobalCode.vue")),
+			title: "Global Code",
+			icon: CodeIcon,
+		},
 		{
 			label: "Redirects",
 			value: "global_redirects",
-			component: GlobalRedirects,
+			component: defineAsyncComponent(() => import("@/components/Settings/GlobalRedirects.vue")),
 			title: "Redirects",
 			icon: RedirectIcon,
 		},
 		{
 			label: "Analytics",
 			value: "global_analytics",
-			component: GlobalAnalytics,
+			component: defineAsyncComponent(() => import("@/components/Settings/GlobalAnalytics.vue")),
 			title: "Site Views",
 			icon: ChartIcon,
 		},

From 0973f8896b54b927fd0f851550086c453b9af88a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 16:53:55 +0530
Subject: [PATCH 046/547] refactor: Use common builder level flag to set
 readonly mode

---
 frontend/src/components/BlockContextMenu.vue | 26 ++++++++++++++++++--
 frontend/src/components/BuilderLeftPanel.vue | 13 ++--------
 frontend/src/components/BuilderToolbar.vue   | 14 +++--------
 frontend/src/components/PageOptions.vue      |  8 +++---
 frontend/src/pages/PageBuilder.vue           | 13 +++++-----
 frontend/src/stores/builderStore.ts          |  4 +++
 frontend/src/utils/useBuilderEvents.ts       |  9 +++++--
 frontend/src/utils/useCanvasDropZone.ts      |  4 +++
 frontend/src/utils/useCanvasEvents.ts        |  1 +
 9 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index ea0fc3d6a..69a1f7a9d 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -10,6 +10,7 @@ import type Block from "@/block";
 import ContextMenu from "@/components/ContextMenu.vue";
 import NewBlockTemplate from "@/components/Modals/NewBlockTemplate.vue";
 import NewComponent from "@/components/Modals/NewComponent.vue";
+import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
 import getBlockTemplate from "@/utils/blockTemplate";
@@ -18,6 +19,7 @@ import { useStorage } from "@vueuse/core";
 import { Ref, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 
+const builderStore = useBuilderStore();
 const componentStore = useComponentStore();
 const canvasStore = useCanvasStore();
 
@@ -71,8 +73,13 @@ const contextMenuOptions: ContextMenuOption[] = [
 		label: "Paste Style",
 		action: pasteStyle,
 		condition: () => Boolean(copiedStyle.value.blockId && copiedStyle.value?.blockId !== block.value.blockId),
+		disabled: () => builderStore.readOnlyMode,
+	},
+	{
+		label: "Duplicate",
+		action: duplicateBlock,
+		disabled: () => builderStore.readOnlyMode,
 	},
-	{ label: "Duplicate", action: duplicateBlock },
 	{
 		label: "Convert To Collection",
 		action: () => {
@@ -85,6 +92,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			!block.value.isRepeater() &&
 			!block.value.isChildOfComponentBlock() &&
 			!block.value.isExtendedFromComponent(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Remove Collection",
@@ -93,6 +101,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			block.value.dataKey = {};
 		},
 		condition: () => block.value.isRepeater(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Wrap In Container",
@@ -139,6 +148,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			const selectedBlocks = canvasStore.activeCanvas?.selectedBlocks || [];
 			return selectedBlocks.every((block: Block) => block.getParentBlock() === parentBlock);
 		},
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Repeat Block",
@@ -154,11 +164,14 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		condition: () =>
 			!block.value.isRoot() && !block.value.isRepeater() && !block.value.isChildOfComponentBlock(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Reset Overrides",
 		condition: () => canvasStore.activeCanvas?.activeBreakpoint !== "desktop",
-		disabled: () => !block.value?.hasOverrides(canvasStore.activeCanvas?.activeBreakpoint || "desktop"),
+		disabled: () =>
+			builderStore.readOnlyMode ||
+			!block.value?.hasOverrides(canvasStore.activeCanvas?.activeBreakpoint || "desktop"),
 		action: () => {
 			block.value.resetOverrides(canvasStore.activeCanvas?.activeBreakpoint || "desktop");
 		},
@@ -175,6 +188,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			}
 		},
 		condition: () => block.value.isExtendedFromComponent(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Sync Component",
@@ -182,6 +196,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 		action: () => {
 			block.value.syncWithComponent();
 		},
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Reset Component",
@@ -193,6 +208,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 				}
 			});
 		},
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Edit Component",
@@ -200,6 +216,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			componentStore.editComponent(block.value);
 		},
 		condition: () => block.value.isExtendedFromComponent(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Save as Block Template",
@@ -207,11 +224,13 @@ const contextMenuOptions: ContextMenuOption[] = [
 			showBlockTemplateDialog.value = true;
 		},
 		condition: () => !block.value.isExtendedFromComponent() && Boolean(window.is_developer_mode),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Save As Component",
 		action: () => (showNewComponentDialog.value = true),
 		condition: () => !block.value.isExtendedFromComponent(),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Detach Component",
@@ -223,6 +242,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			block.value.getParentBlock()?.replaceChild(block.value, newBlock);
 		},
 		condition: () => Boolean(block.value.extendedFromComponent),
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Rename",
@@ -244,6 +264,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		condition: () =>
 			!block.value.isRoot() && !block.value.isChildOfComponentBlock() && triggeredFromLayersPanel.value,
+		disabled: () => builderStore.readOnlyMode,
 	},
 	{
 		label: "Delete",
@@ -261,6 +282,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 				Boolean(block.value.getParentBlock())
 			);
 		},
+		disabled: () => builderStore.readOnlyMode,
 	},
 ];
 
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index f35251f29..55a1f8521 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -52,7 +52,7 @@
 					class="block-layers w-fit min-w-full pr-3"
 					v-if="pageCanvas"
 					:disable-draggable="true"
-					:readonly="readonly"
+					:readonly="builderStore.readOnlyMode"
 					ref="pageLayers"
 					:blocks="[pageCanvas?.getRootBlock() as Block]"
 					v-show="canvasStore.editingMode == 'page'" />
@@ -60,7 +60,7 @@
 					class="block-layers w-fit min-w-full pr-3"
 					ref="componentLayers"
 					:disable-draggable="true"
-					:readonly="readonly"
+					:readonly="builderStore.readOnlyMode"
 					:blocks="[fragmentCanvas?.getRootBlock()]"
 					:indent="5"
 					:adjustForRoot="false"
@@ -96,15 +96,6 @@ import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
 
-const props = withDefaults(
-	defineProps<{
-		readonly?: boolean;
-	}>(),
-	{
-		readonly: false,
-	},
-);
-
 const showVariableManager = ref(false);
 const miniSidebar = ref(null) as Ref<HTMLElement | null>;
 const pageLayers = ref<InstanceType<typeof BlockLayers> | null>(null);
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 117cca306..4f6ad6a16 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -66,10 +66,7 @@
 					<div
 						class="flex w-72 flex-col gap-3 rounded bg-surface-white p-4 shadow-lg"
 						v-if="pageStore.activePage">
-						<PageOptions
-							v-if="pageStore.activePage"
-							:page="pageStore.activePage"
-							:readonly="readonly"></PageOptions>
+						<PageOptions v-if="pageStore.activePage" :page="pageStore.activePage"></PageOptions>
 					</div>
 				</template>
 			</Popover>
@@ -77,7 +74,7 @@
 		<!-- actions -->
 		<div class="absolute right-3 flex items-center gap-5">
 			<!-- show dark mode toggle -->
-			<Badge variant="subtle" theme="orange" v-if="readonly">Read Only</Badge>
+			<Badge variant="subtle" theme="orange" v-if="builderStore.readOnlyMode">Read Only</Badge>
 			<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6">
 				<FeatherIcon
 					:name="isDark ? 'sun' : 'moon'"
@@ -146,7 +143,7 @@
 					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-ink-gray-8"></PlayIcon>
 				</Tooltip>
 			</router-link>
-			<PublishButton :disabled="readonly"></PublishButton>
+			<PublishButton :disabled="builderStore.readOnlyMode"></PublishButton>
 		</div>
 	</div>
 </template>
@@ -169,16 +166,11 @@ import BuilderSettings from "./BuilderSettings.vue";
 import MainMenu from "./MainMenu.vue";
 import PageOptions from "./PageOptions.vue";
 
-defineProps<{
-	readonly?: boolean;
-}>();
-
 const isDark = useDark({
 	attribute: "data-theme",
 });
 
 const toggleDark = useToggle(isDark);
-
 const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 
diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
index 663317b49..aa2b609fb 100644
--- a/frontend/src/components/PageOptions.vue
+++ b/frontend/src/components/PageOptions.vue
@@ -6,7 +6,7 @@
 				type="text"
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px]"
 				:modelValue="page.page_title"
-				:disabled="readonly"
+				:disabled="builderStore.readOnlyMode"
 				@update:modelValue="(val: string) => pageStore.updateActivePage('page_title', val)" />
 			<BuilderInput
 				type="text"
@@ -15,7 +15,7 @@
 				description="The URL path for this page. For variables, use colon (e.g. /users/:id)"
 				@input="(val: string) => (page.route = val)"
 				:modelValue="page.route"
-				:disabled="readonly"
+				:disabled="builderStore.readOnlyMode"
 				:hideClearButton="true"
 				@update:modelValue="(val: string) => pageStore.updateActivePage('route', val)" />
 			<!-- Dynamic Route Variables -->
@@ -36,17 +36,19 @@
 	</div>
 </template>
 <script setup lang="ts">
+import useBuilderStore from "@/stores/builderStore";
 import usepageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getRouteVariables } from "@/utils/helpers";
 import { computed } from "vue";
 import CollapsibleSection from "./CollapsibleSection.vue";
 
+const builderStore = useBuilderStore();
 const pageStore = usepageStore();
 const props = defineProps<{
 	page: BuilderPage;
-	readonly?: boolean;
 }>();
+
 const dynamicVariables = computed(() => {
 	return getRouteVariables(props.page.route || "");
 });
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 8dd41589d..cd124e5ca 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -8,11 +8,10 @@
 	</div>
 	<div v-show="!isSmallScreen" class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
 		<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
-		<BuilderToolbar :readonly="readonly" class="relative z-30"></BuilderToolbar>
+		<BuilderToolbar class="relative z-30"></BuilderToolbar>
 		<div>
 			<BuilderLeftPanel
 				v-show="builderStore.showLeftPanel"
-				:readonly="readonly"
 				class="absolute bottom-0 left-0 top-[var(--toolbar-height)] z-[21] border-r-[1px] border-outline-gray-2 bg-surface-white"></BuilderLeftPanel>
 			<BuilderCanvas
 				ref="fragmentCanvas"
@@ -61,7 +60,6 @@
 				ref="pageCanvas"
 				v-if="pageStore.pageBlocks[0]"
 				:block-data="pageStore.pageBlocks[0]"
-				:readonly="readonly"
 				:canvas-styles="{
 					minHeight: '1000px',
 				}"
@@ -76,7 +74,6 @@
 				class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-1 p-10"></BuilderCanvas>
 			<BuilderRightPanel
 				v-show="builderStore.showRightPanel"
-				:readonly="readonly"
 				class="no-scrollbar absolute bottom-0 right-0 top-[var(--toolbar-height)] z-20 overflow-auto border-l-[1px] border-outline-gray-2 bg-surface-white"></BuilderRightPanel>
 			<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
 			<Dialog
@@ -154,9 +151,11 @@ const usageCount = ref(0);
 const componentUsedInPages = ref<BuilderPage[]>([]);
 const pageListDialog = ref(false);
 
-const readonly = computed(
-	() => canvasStore.editingMode === "page" && Boolean(pageStore.activePage?.is_standard),
-);
+watch([() => canvasStore.editableBlock, () => pageStore.activePage?.is_standard], () => {
+	builderStore.toggleReadOnlyMode(
+		canvasStore.editingMode === "page" && Boolean(pageStore.activePage?.is_standard),
+	);
+});
 
 declare global {
 	interface Window {
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index 3588689ad..c7211690b 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -38,11 +38,15 @@ const useBuilderStore = defineStore("builderStore", {
 		showHTMLDialog: false,
 		showDataScriptDialog: false,
 		realtime: new RealTimeHandler(),
+		readOnlyMode: false,
 		viewers: <UserInfo[]>[],
 		isFCSite: window.is_fc_site === "{{ is_fc_site }}" ? false : window.is_fc_site,
 		activeFolder: useStorage("activeFolder", ""),
 	}),
 	actions: {
+		toggleReadOnlyMode(readonly: boolean | null = null) {
+			this.readOnlyMode = readonly ?? !this.readOnlyMode;
+		},
 		setHomePage(route: string) {
 			return builderSettings.setValue
 				.submit({
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 941be5a45..f310bd6f6 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -4,7 +4,6 @@ import webComponent from "@/data/webComponent";
 import { webPages } from "@/data/webPage";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
-import useComponentStore from "@/stores/componentStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import blockController from "@/utils/blockController";
@@ -27,7 +26,6 @@ import { useRoute, useRouter } from "vue-router";
 import { toast } from "vue-sonner";
 
 const builderStore = useBuilderStore();
-const componentStore = useComponentStore();
 const canvasStore = useCanvasStore();
 const pageStore = usePageStore();
 
@@ -58,6 +56,7 @@ export function useBuilderEvents(
 
 	useEventListener(document, "cut", (e) => {
 		if (isTargetEditable(e)) return;
+		if (builderStore.readOnlyMode) return;
 		copySelectedBlocksToClipboard(e);
 		if (canvasStore.activeCanvas?.selectedBlocks.length) {
 			for (const block of canvasStore.activeCanvas?.selectedBlocks) {
@@ -69,6 +68,7 @@ export function useBuilderEvents(
 
 	useEventListener(document, "paste", async (e) => {
 		if (isTargetEditable(e)) return;
+		if (builderStore.readOnlyMode) return;
 		e.stopPropagation();
 		const clipboardItems = Array.from(e.clipboardData?.items || []);
 
@@ -261,6 +261,7 @@ export function useBuilderEvents(
 		}
 
 		if (e.key === "d" && isCtrlOrCmd(e)) {
+			if (builderStore.readOnlyMode) return;
 			if (blockController.isBlockSelected() && !blockController.multipleBlocksSelected()) {
 				e.preventDefault();
 				const block = blockController.getSelectedBlocks()[0];
@@ -271,6 +272,7 @@ export function useBuilderEvents(
 		if (isTargetEditable(e)) return;
 
 		if ((e.key === "Backspace" || e.key === "Delete") && blockController.isBlockSelected()) {
+			if (builderStore.readOnlyMode) return;
 			for (const block of blockController.getSelectedBlocks()) {
 				canvasStore.activeCanvas?.removeBlock(block, e.shiftKey);
 			}
@@ -376,16 +378,19 @@ export function useBuilderEvents(
 		}
 
 		if (e.key === "c") {
+			if (builderStore.readOnlyMode) return;
 			builderStore.mode = "container";
 			return;
 		}
 
 		if (e.key === "i") {
+			if (builderStore.readOnlyMode) return;
 			builderStore.mode = "image";
 			return;
 		}
 
 		if (e.key === "t") {
+			if (builderStore.readOnlyMode) return;
 			builderStore.mode = "text";
 			return;
 		}
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index ef5f5eb09..441bd7494 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -1,5 +1,6 @@
 import type Block from "@/block";
 import useBlockTemplateStore from "@/stores/blockTemplateStore";
+import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
 import { posthog } from "@/telemetry";
@@ -7,6 +8,7 @@ import { getBlockCopy, getBlockInstance, getImageBlock, getVideoBlock, uploadIma
 import { useDropZone } from "@vueuse/core";
 import { Ref } from "vue";
 
+const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
 const componentStore = useComponentStore();
 const blockTemplateStore = useBlockTemplateStore();
@@ -20,6 +22,7 @@ export function useCanvasDropZone(
 ) {
 	const { isOverDropZone } = useDropZone(canvasContainer, {
 		onDrop: async (files, ev) => {
+			if (builderStore.readOnlyMode) return;
 			canvasStore.isDropping = true;
 			if (files && files.length) {
 				handleFileDrop(files, ev);
@@ -31,6 +34,7 @@ export function useCanvasDropZone(
 		},
 
 		onOver: (files, ev) => {
+			if (builderStore.readOnlyMode) return;
 			if (ev.shiftKey) {
 				const parentBlock = getBlockToReplace(ev);
 				if (parentBlock) {
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
index 51eb4bebd..a025d3b88 100644
--- a/frontend/src/utils/useCanvasEvents.ts
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -35,6 +35,7 @@ export function useCanvasEvents(
 		if (builderStore.mode === "select") {
 			return;
 		} else {
+			if (builderStore.readOnlyMode) return;
 			const pauseId = canvasHistory.value?.pause();
 			ev.stopPropagation();
 			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;

From 5484902399872207524136908509d1f740083e44 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 19:09:35 +0530
Subject: [PATCH 047/547] fix: Do not let users delete standard page from main
 menu

---
 frontend/src/components/MainMenu.vue | 131 +++++++++++++--------------
 1 file changed, 64 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/MainMenu.vue b/frontend/src/components/MainMenu.vue
index 1cd8b8181..8026b0bbc 100644
--- a/frontend/src/components/MainMenu.vue
+++ b/frontend/src/components/MainMenu.vue
@@ -1,70 +1,5 @@
 <template>
-	<Dropdown
-		:options="[
-			{
-				group: 'Builder',
-				hideLabel: true,
-				items: [
-					{ label: 'Back to Dashboard', onClick: () => $router.push({ name: 'home' }), icon: 'arrow-left' },
-				],
-			},
-			{
-				group: 'Page',
-				hideLabel: true,
-				items: [
-					{
-						label: 'New Page',
-						onClick: () => $router.push({ name: 'builder', params: { pageId: 'new' } }),
-						icon: 'plus',
-					},
-					{
-						label: 'Copy Page',
-						onClick: handleCopyPage,
-						icon: 'clipboard',
-						condition: () => Boolean(pageStore.activePage),
-					},
-					{
-						label: 'Duplicate Page',
-						onClick: () => pageStore.duplicatePage(pageStore.activePage as BuilderPage),
-						icon: 'copy',
-					},
-					{
-						label: `Toggle Theme`,
-						onClick: () => toggleDark(),
-						icon: isDark ? 'sun' : 'moon',
-					},
-					{ label: 'Settings', onClick: () => emit('showSettings'), icon: 'settings' },
-
-					{
-						label: 'Help',
-						onClick: () => {
-							// @ts-ignore
-							window.open('https://t.me/frappebuilder');
-						},
-						icon: 'info',
-					},
-				],
-			},
-			{
-				group: 'Delete',
-				hideLabel: true,
-				items: [
-					{
-						label: 'Delete Page',
-						onClick: () => {
-							if (!pageStore.activePage) return;
-							pageStore.deletePage(pageStore.activePage).then(() => {
-								$router.push({ name: 'home' });
-							});
-						},
-						icon: 'trash-2',
-					},
-				],
-			},
-		]"
-		size="sm"
-		class="flex-1 [&>div>div>div]:w-full"
-		placement="right">
+	<Dropdown :options="mainMenuOptions" size="sm" class="flex-1 [&>div>div>div]:w-full" placement="right">
 		<template v-slot="{ open }">
 			<div class="flex cursor-pointer items-center gap-2">
 				<img src="/builder_logo.png" alt="logo" class="h-7" />
@@ -80,14 +15,15 @@ import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { triggerCopyEvent } from "@/utils/helpers";
-
 import { useDark, useToggle } from "@vueuse/core";
 import { Dropdown } from "frappe-ui";
+import { useRouter } from "vue-router";
 
 const pageStore = usePageStore();
 const isDark = useDark({
 	attribute: "data-theme",
 });
+const router = useRouter();
 const toggleDark = useToggle(isDark);
 const canvasStore = useCanvasStore();
 
@@ -99,4 +35,65 @@ const handleCopyPage = () => {
 	canvasStore.requiresConfirmationForCopyingEntirePage = false;
 	triggerCopyEvent();
 };
+
+const mainMenuOptions = [
+	{
+		group: "Builder",
+		hideLabel: true,
+		items: [{ label: "Back to Dashboard", onClick: () => router.push({ name: "home" }), icon: "arrow-left" }],
+	},
+	{
+		group: "Page",
+		hideLabel: true,
+		items: [
+			{
+				label: "New Page",
+				onClick: () => router.push({ name: "builder", params: { pageId: "new" } }),
+				icon: "plus",
+			},
+			{
+				label: "Copy Page",
+				onClick: handleCopyPage,
+				icon: "clipboard",
+				condition: () => Boolean(pageStore.activePage),
+			},
+			{
+				label: "Duplicate Page",
+				onClick: () => pageStore.duplicatePage(pageStore.activePage as BuilderPage),
+				icon: "copy",
+			},
+			{
+				label: "Delete Page",
+				onClick: () => {
+					if (!pageStore.activePage) return;
+					pageStore.deletePage(pageStore.activePage).then(() => {
+						router.push({ name: "home" });
+					});
+				},
+				icon: "trash-2",
+				condition: () => !Boolean(pageStore.activePage?.is_standard),
+			},
+		],
+	},
+	{
+		group: "Preferences",
+		hideLabel: true,
+		items: [
+			{
+				label: `Toggle Theme`,
+				onClick: () => toggleDark(),
+				icon: isDark ? "sun" : "moon",
+			},
+			{ label: "Settings", onClick: () => emit("showSettings"), icon: "settings" },
+			{
+				label: "Help",
+				onClick: () => {
+					// @ts-ignore
+					window.open("https://t.me/frappebuilder");
+				},
+				icon: "info",
+			},
+		],
+	},
+];
 </script>

From 64c9e777c51395d7b814056d2c9674fa913a5cad Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 22:12:36 +0530
Subject: [PATCH 048/547] fix: Make script editors follow builder readonly mode

---
 .../src/components/Controls/CodeEditor.vue    |  9 ++++---
 .../components/PageClientScriptManager.vue    | 19 ++++++++++----
 frontend/src/components/PageScript.vue        |  1 +
 frontend/src/components/Settings/PageCode.vue | 25 ++++---------------
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index 1a8c54db3..b8ef9dab7 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -10,7 +10,8 @@
 				variant="subtle"
 				class="!h-6 !w-6 border !border-outline-gray-2 bg-surface-white [&>svg]:!h-3.5 [&>svg]:!w-3.5"
 				:icon="actionButton.icon"
-				:title="actionButton.label"></BuilderButton>
+				:title="actionButton.label"
+				:disabled="readonly"></BuilderButton>
 		</div>
 		<div
 			:style="{
@@ -20,7 +21,7 @@
 			<CodeMirrorEditor
 				ref="editor"
 				:type
-				:readonly
+				:readonly="readonly"
 				:allow-save="showSaveButton"
 				:show-line-numbers
 				:initial-value="getModelValue()"
@@ -34,7 +35,7 @@
 			variant="solid"
 			@click="emit('save', editor.getEditorValue())"
 			class="mt-3"
-			:disabled="!isDirty">
+			:disabled="!isDirty || readonly">
 			Save
 		</BuilderButton>
 	</div>
@@ -122,6 +123,8 @@ const handleChange = (value: string) => {
 };
 
 const handleSave = (value: string) => {
+	if (props.readonly) return;
+
 	if (props.type === "JSON" && value) {
 		value = JSON.parse(value);
 	}
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 226f22f75..2f2289a6f 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -19,7 +19,7 @@
 
 							<EditableSpan
 								v-model="script.script_name"
-								:editable="script.editable"
+								:editable="script.editable && !builderStore.readOnlyMode"
 								:onChange="
 									async (newName) => {
 										await updateScriptName(newName, script);
@@ -33,7 +33,7 @@
 						<Dropdown
 							class="script-options"
 							placement="right"
-							v-if="activeScript === script"
+							v-if="activeScript === script && !builderStore.readOnlyMode"
 							:options="[
 								{
 									label: 'Rename',
@@ -54,7 +54,7 @@
 						</Dropdown>
 					</a>
 
-					<div class="flex w-full gap-2">
+					<div class="flex w-full gap-2" v-if="!builderStore.readOnlyMode">
 						<Dropdown
 							:options="[
 								{ label: 'JavaScript', onClick: () => addScript('JavaScript') },
@@ -101,6 +101,7 @@
 				:type="activeScript.script_type as 'JavaScript' | 'CSS'"
 				class="flex-1"
 				height="65vh"
+				:readonly="builderStore.readOnlyMode"
 				:autofocus="false"
 				:show-save-button="true"
 				@save="updateScript"
@@ -111,6 +112,7 @@
 
 <script setup lang="ts">
 import EditableSpan from "@/components/EditableSpan.vue";
+import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { posthog } from "@/telemetry";
 import { BuilderClientScript } from "@/types/Builder/BuilderClientScript";
@@ -123,6 +125,7 @@ import CSSIcon from "./Icons/CSS.vue";
 import JavaScriptIcon from "./Icons/JavaScript.vue";
 
 const scriptEditor = ref<InstanceType<typeof CodeEditor> | null>(null);
+const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 
 type attachedScript = {
@@ -180,7 +183,7 @@ const selectScript = (script: attachedScript) => {
 };
 
 const updateScript = (value: string) => {
-	if (!activeScript.value) return;
+	if (!activeScript.value || builderStore.readOnlyMode) return;
 
 	pageStore.activePageScripts = pageStore.activePageScripts.map((script: BuilderClientScript) => {
 		if (script.name === activeScript.value?.script_name) {
@@ -212,6 +215,8 @@ const updateScript = (value: string) => {
 };
 
 const addScript = (scriptType: "JavaScript" | "CSS") => {
+	if (builderStore.readOnlyMode) return;
+
 	clientScriptResource.insert
 		.submit({
 			script_type: scriptType,
@@ -241,6 +246,8 @@ const addScript = (scriptType: "JavaScript" | "CSS") => {
 };
 
 const attachScript = (builder_script_name: string) => {
+	if (builderStore.readOnlyMode) return;
+
 	attachedScriptResource.insert
 		.submit({
 			parent: props.page.name,
@@ -260,6 +267,8 @@ const attachScript = (builder_script_name: string) => {
 };
 
 const deleteScript = (scriptName: string) => {
+	if (builderStore.readOnlyMode) return;
+
 	activeScript.value = null;
 	attachedScriptResource.delete.submit(scriptName).then(() => {
 		attachedScriptResource.reload();
@@ -270,7 +279,7 @@ const deleteScript = (scriptName: string) => {
 };
 
 const updateScriptName = async (newName: string, script: attachedScript) => {
-	if (!newName) return;
+	if (!newName || builderStore.readOnlyMode) return;
 	script.editable = false;
 	pageStore.activePageScripts = pageStore.activePageScripts.map((_script: BuilderClientScript) => {
 		if (_script.name === script.name) {
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 57cf271bc..7b01da193 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -28,6 +28,7 @@
 							v-model="page.page_data_script"
 							type="Python"
 							height="60vh"
+							:readonly="builderStore.readOnlyMode"
 							:autofocus="true"
 							@save="savePageDataScript"
 							:showSaveButton="true"
diff --git a/frontend/src/components/Settings/PageCode.vue b/frontend/src/components/Settings/PageCode.vue
index 8bb7c32cd..71ce45e83 100644
--- a/frontend/src/components/Settings/PageCode.vue
+++ b/frontend/src/components/Settings/PageCode.vue
@@ -1,28 +1,9 @@
 <template>
 	<div class="no-scrollbar flex flex-col gap-6 overflow-auto">
-		<!-- <div>
-			<div class="">
-				<InputLabel>Add Library</InputLabel>
-				<div class="mb-2 flex">
-					<BuilderInput class="w-full" v-model="libraryURL"></BuilderInput>
-					<BuilderButton class="ml-2" :disabled="!libraryURL" @click="addLibraryURL">Add</BuilderButton>
-				</div>
-			</div>
-			<div class="flex flex-col gap-2">
-				<div v-for="script in scripts" class="rounded bg-surface-gray-2 px-3 pr-0 shadow-sm">
-					<div class="flex w-full items-center justify-between gap-2">
-						<div class="flex items-center gap-2">
-							<span class="text-ink-gray-4">{{ script.type }}</span>
-							<a href="{{ script.script_url }}" class="text-sm hover:underline">{{ script.script_url }}</a>
-						</div>
-						<BuilderButton class="ml-2 text-sm">Remove</BuilderButton>
-					</div>
-				</div>
-			</div>
-		</div> -->
 		<CodeEditor
 			label="<head> HTML"
 			type="HTML"
+			:readonly="builderStore.readOnlyMode"
 			description="Add meta tags, styles, and scripts to page head"
 			height="200px"
 			class="shrink-0"
@@ -32,6 +13,7 @@
 		<CodeEditor
 			label="<body> HTML"
 			type="HTML"
+			:readonly="builderStore.readOnlyMode"
 			description="Add scripts to page body"
 			:modelValue="pageStore.activePage?.body_html"
 			height="200px"
@@ -42,7 +24,10 @@
 </template>
 <script setup lang="ts">
 import CodeEditor from "@/components/Controls/CodeEditor.vue";
+import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
+
+const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 
 // const libraryURL = ref("");

From 25b6ef839253d95fec75f8d85f436e4474a3ec58 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 22:25:26 +0530
Subject: [PATCH 049/547] fix: Block readonly mode

---
 frontend/src/components/BuilderBlock.vue    | 1 +
 frontend/src/components/BuilderCanvas.vue   | 4 +---
 frontend/src/components/DataLoaderBlock.vue | 5 ++++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index d5083e565..1402e6b3b 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -7,6 +7,7 @@
 		:draggable="draggable"
 		:class="classes"
 		v-bind="attributes"
+		:readonly="readonly"
 		:style="styles"
 		ref="component">
 		<BuilderBlock
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 802b5ac17..6df7fc8fa 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -62,7 +62,7 @@
 					:block="block"
 					:style="variables"
 					:key="block.blockId"
-					:readonly="readonly"
+					:readonly="builderStore.readOnlyMode"
 					v-if="showBlocks"
 					:breakpoint="breakpoint.device"
 					:data="pageStore.pageData" />
@@ -137,11 +137,9 @@ const props = withDefaults(
 	defineProps<{
 		blockData: Block;
 		canvasStyles?: Record<string, any>;
-		readonly?: boolean;
 	}>(),
 	{
 		canvasStyles: () => ({}),
-		readonly: false,
 	},
 );
 
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 5880adff0..8d7024798 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -9,7 +9,8 @@
 			v-else
 			:data="_data"
 			:block="block.children[0]"
-			:preview="index !== 0 || preview"
+			:preview="Number(index) !== 0 || preview"
+			:readonly="readonly"
 			:breakpoint="breakpoint"
 			:isChildOfComponent="block.isExtendedFromComponent()"
 			v-for="(_data, index) in blockData" />
@@ -31,10 +32,12 @@ const props = withDefaults(
 		preview?: boolean;
 		breakpoint?: string;
 		data?: Record<string, any> | null;
+		readonly?: boolean;
 	}>(),
 	{
 		preview: false,
 		breakpoint: "desktop",
+		readonly: false,
 	},
 );
 

From c75be99eeb0e5e8c4d283dd652d1291fde0421ab Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 11 Nov 2025 22:55:29 +0530
Subject: [PATCH 050/547] fix: Do not make save requrest in readonly mode

---
 frontend/src/stores/pageStore.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index e10e63d29..a06f46379 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -2,6 +2,7 @@ import type Block from "@/block";
 import { builderSettings } from "@/data/builderSettings";
 import { webPages } from "@/data/webPage";
 import router from "@/router";
+import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore.js";
 import { posthog } from "@/telemetry";
@@ -260,6 +261,9 @@ const usePageStore = defineStore("pageStore", {
 		},
 
 		savePage() {
+			const builderStore = useBuilderStore();
+			if (builderStore.readOnlyMode) return;
+
 			const canvasStore = useCanvasStore();
 			const pageData = JSON.stringify(
 				canvasStore

From 435f1ec29ac18cbb740cc8645d9344ac385fcaf5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 12 Nov 2025 12:11:36 +0530
Subject: [PATCH 051/547] fead(block-props): scaffolding of new block props
 editor

---
 frontend/src/components/ArrayEditor.vue       |  91 ++++++
 frontend/src/components/BlockProperties.vue   |   2 +-
 .../src/components/Controls/Autocomplete.vue  | 150 +++++----
 .../src/components/PropsDependencyEditor.vue  | 288 +++++++++++++++++
 frontend/src/components/PropsEditor.vue       |  11 +-
 .../components/PropsOptions/ArrayOptions.vue  |  23 ++
 .../PropsOptions/BooleanOptions.vue           |  29 ++
 .../components/PropsOptions/NumberOptions.vue |  19 ++
 .../components/PropsOptions/ObjectOptions.vue |  23 ++
 .../components/PropsOptions/StringOptions.vue |  11 +
 .../src/components/PropsPopoverContent.vue    | 294 ++++++++++++++++++
 11 files changed, 883 insertions(+), 58 deletions(-)
 create mode 100644 frontend/src/components/ArrayEditor.vue
 create mode 100644 frontend/src/components/PropsDependencyEditor.vue
 create mode 100644 frontend/src/components/PropsOptions/ArrayOptions.vue
 create mode 100644 frontend/src/components/PropsOptions/BooleanOptions.vue
 create mode 100644 frontend/src/components/PropsOptions/NumberOptions.vue
 create mode 100644 frontend/src/components/PropsOptions/ObjectOptions.vue
 create mode 100644 frontend/src/components/PropsOptions/StringOptions.vue
 create mode 100644 frontend/src/components/PropsPopoverContent.vue

diff --git a/frontend/src/components/ArrayEditor.vue b/frontend/src/components/ArrayEditor.vue
new file mode 100644
index 000000000..c6e0b8fb8
--- /dev/null
+++ b/frontend/src/components/ArrayEditor.vue
@@ -0,0 +1,91 @@
+<template>
+	<div ref="arrayEditor" class="flex flex-col gap-2" @paste="pasteArray">
+		<div v-for="(item, index) in arr" :key="index" class="flex gap-2">
+			<BuilderInput
+				placeholder="empty string"
+				:modelValue="item"
+				@update:modelValue="(val: string) => updateItem(index, val)" />
+			<BuilderButton
+				class="flex-shrink-0 text-xs"
+				variant="subtle"
+				icon="x"
+				@click="deleteItem(index)"></BuilderButton>
+		</div>
+		<BuilderButton variant="subtle" class="w-full" label="Add" @click="addItem"></BuilderButton>
+		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
+			<span v-html="description"></span>
+		</p>
+	</div>
+</template>
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+
+const props = defineProps<{
+	arr: Array<string>;
+	description?: string;
+}>();
+
+const emit = defineEmits({
+	"update:arr": (arr: Array<string>) => true,
+});
+
+const addItem = async () => {
+	const newArr = [...props.arr, ""];
+	emit("update:arr", newArr);
+	await nextTick();
+	const inputs = arrayEditor.value?.querySelectorAll("input");
+	if (inputs) {
+		const lastInput = inputs[inputs.length - 1];
+		lastInput.focus();
+	}
+};
+
+const updateItem = (index: number, value: string) => {
+	const newArr = [...props.arr];
+	newArr[index] = value;
+	emit("update:arr", newArr);
+};
+
+const deleteItem = (index: number) => {
+	const newArr = [...props.arr];
+	newArr.splice(index, 1);
+	emit("update:arr", newArr);
+};
+
+const arrayEditor = ref<HTMLElement | null>(null);
+
+const pasteArray = (e: ClipboardEvent) => {
+	const text = e.clipboardData?.getData("text/plain");
+	if (text) {
+		e.preventDefault();
+		try {
+			// Try to parse as JSON array first
+			const parsed = JSON.parse(text);
+			if (Array.isArray(parsed)) {
+				const stringArray = parsed.map(item => String(item));
+				emit("update:arr", stringArray);
+				return;
+			}
+		} catch (e) {
+			// If JSON parsing fails, try other formats
+		}
+		
+		// Try to parse as comma-separated values
+		if (text.includes(",")) {
+			const items = text.split(",").map(item => item.trim()).filter(item => item);
+			emit("update:arr", items);
+			return;
+		}
+		
+		// Try to parse as line-separated values
+		if (text.includes("\n")) {
+			const items = text.split("\n").map(item => item.trim()).filter(item => item);
+			emit("update:arr", items);
+			return;
+		}
+		
+		// Single item
+		emit("update:arr", [text.trim()]);
+	}
+};
+</script>
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 3627c6db0..f6f4fa9c6 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -121,7 +121,7 @@ const sections = [
 	dataKeySection,
 	customAttributesSection,
 	rawStyleSection,
-	blockScriptSection,
 	blockPropsSection,
+	blockScriptSection,
 ] as PropertySection[];
 </script>
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index fcb470855..d4d0b5013 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -21,6 +21,7 @@
 				</template>
 				<ComboboxInput
 					autocomplete="off"
+					ref="comboboxInput"
 					@focus="
 						() => {
 							if (!open.value) {
@@ -39,63 +40,67 @@
 						$slots.prefix ? 'pl-1' : 'pl-2',
 					]"></ComboboxInput>
 			</div>
-			<ComboboxOptions
-				class="absolute right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
-				v-show="filteredOptions.length || (showInputAsOption && query)">
-				<div class="w-full list-none px-1.5 py-1.5">
-					<ComboboxOption
-						v-if="query && !showInputAsOption"
-						:value="query"
-						class="flex items-center"></ComboboxOption>
-					<ComboboxOption
-						v-for="option in filteredOptions"
-						v-slot="{ active, selected }"
-						:key="option.value"
-						:value="option"
-						:disabled="String(option.value).startsWith('_separator')"
-						:title="option.label"
-						class="flex items-center">
-						<span
-							v-if="String(option.value).startsWith('_separator')"
-							class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
-							{{ option.label }}
-						</span>
-						<li
-							v-else
-							class="group flex w-full select-none items-center gap-2 truncate rounded px-2.5 py-1.5 text-xs"
-							:class="{
-								'bg-gray-100': active,
-								'bg-gray-300': selected,
-							}">
-							<component v-if="option.prefix" :is="option.prefix" />
-							<span class="truncate">
+			<Teleport :disabled="!isTeleported" :to="teleportedTo">
+				<ComboboxOptions
+					:style="teleportedStyle"
+					@mousedown="(ev: Event) => (isTeleported ? ev.stopPropagation() : null)"
+					class="absolute right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
+					v-show="filteredOptions.length || (showInputAsOption && query)">
+					<div class="w-full list-none px-1.5 py-1.5">
+						<ComboboxOption
+							v-if="query && !showInputAsOption"
+							:value="query"
+							class="flex items-center"></ComboboxOption>
+						<ComboboxOption
+							v-for="option in filteredOptions"
+							v-slot="{ active, selected }"
+							:key="option.value"
+							:value="option"
+							:disabled="String(option.value).startsWith('_separator')"
+							:title="option.label"
+							class="flex items-center">
+							<span
+								v-if="String(option.value).startsWith('_separator')"
+								class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
 								{{ option.label }}
 							</span>
-							<component
-								class="ml-auto"
-								v-if="option.suffix"
-								:is="option.suffix"
-								@mousedown.stop.prevent
-								@click.stop.prevent />
-						</li>
-					</ComboboxOption>
-				</div>
-				<div
-					class="sticky bottom-0 rounded-b-sm border-t border-outline-gray-2 bg-surface-gray-1"
-					v-if="actionButton">
-					<component
-						:is="actionButton.component"
-						v-if="actionButton?.component"
-						@change="updateOptions"></component>
-					<BuilderButton
-						v-else
-						:iconLeft="actionButton.icon"
-						class="w-full rounded-none text-xs text-ink-gray-8"
-						@click="actionButton.handler">
-						{{ actionButton.label }}
-					</BuilderButton>
-				</div>
-			</ComboboxOptions>
+							<li
+								v-else
+								class="group flex w-full select-none items-center gap-2 truncate rounded px-2.5 py-1.5 text-xs"
+								:class="{
+									'bg-gray-100': active,
+									'bg-gray-300': selected,
+								}">
+								<component v-if="option.prefix" :is="option.prefix" />
+								<span class="truncate">
+									{{ option.label }}
+								</span>
+								<component
+									class="ml-auto"
+									v-if="option.suffix"
+									:is="option.suffix"
+									@mousedown.stop.prevent
+									@click.stop.prevent />
+							</li>
+						</ComboboxOption>
+					</div>
+					<div
+						class="sticky bottom-0 rounded-b-sm border-t border-outline-gray-2 bg-surface-gray-1"
+						v-if="actionButton">
+						<component
+							:is="actionButton.component"
+							v-if="actionButton?.component"
+							@change="updateOptions"></component>
+						<BuilderButton
+							v-else
+							:iconLeft="actionButton.icon"
+							class="w-full rounded-none text-xs text-ink-gray-8"
+							@click="actionButton.handler">
+							{{ actionButton.label }}
+						</BuilderButton>
+					</div>
+				</ComboboxOptions>
+			</Teleport>
 		</Combobox>
 		<div
 			class="absolute right-[1px] top-[3px] cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
@@ -110,7 +115,7 @@
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/vue";
-import { ComputedRef, computed, ref, watch } from "vue";
+import { ComputedRef, computed, onMounted, ref, watch } from "vue";
 
 type Option = {
 	label: string;
@@ -136,11 +141,14 @@ const props = withDefaults(
 		placeholder?: string;
 		showInputAsOption?: boolean;
 		actionButton?: Action;
+		isTeleported?: boolean;
+		teleportedTo?: string;
 	}>(),
 	{
 		options: () => [],
 		placeholder: "Search",
 		showInputAsOption: false,
+		isTeleported: false,
 	},
 );
 
@@ -149,6 +157,8 @@ const multiple = computed(() => Array.isArray(props.modelValue));
 const nullable = computed(() => !multiple.value);
 const asyncOptions = ref<Option[]>([]);
 const comboboxButton = ref<HTMLElement | null>(null);
+const comboboxInput = ref<HTMLElement | null>(null);
+const teleportedStyle = ref({});
 
 const filteredOptions = computed(() => {
 	const sourceOptions = props.getOptions ? asyncOptions.value : props.options;
@@ -210,6 +220,27 @@ const value = computed(() => {
 	);
 }) as ComputedRef<Option>;
 
+const getTeleportedStyle = () => {
+	if (!props.isTeleported) {
+		return {};
+	} else {
+		const teleportingToRect = document.querySelector(props.teleportedTo || "body")?.getBoundingClientRect();
+		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
+		
+		if (!teleportingToRect || !comboboxInputRect) {
+			return {};
+		}
+		return {
+			position: "absolute",
+			top: comboboxInputRect.top - teleportingToRect.top + comboboxInputRect.height + "px",
+			left: comboboxInputRect.left - teleportingToRect.left + "px",
+			width: comboboxInputRect.width + "px",
+			minWidth: "fit-content",
+			zIndex: "10",
+		};
+	}
+};
+
 watch(() => query.value, updateOptions, { immediate: true });
 watch(
 	() => props.options,
@@ -228,6 +259,13 @@ async function updateOptions() {
 	}
 }
 
+onMounted(() => {
+	teleportedStyle.value = getTeleportedStyle();
+	document.querySelector(props.teleportedTo || "body")?.addEventListener("scroll", () => {
+		teleportedStyle.value = getTeleportedStyle();
+	});
+});
+
 const clearValue = () => emit("update:modelValue", null);
 defineExpose({
 	updateOptions,
diff --git a/frontend/src/components/PropsDependencyEditor.vue b/frontend/src/components/PropsDependencyEditor.vue
new file mode 100644
index 000000000..97355eef4
--- /dev/null
+++ b/frontend/src/components/PropsDependencyEditor.vue
@@ -0,0 +1,288 @@
+<template>
+	<div ref="propsEditor" class="flex flex-col gap-2">
+		<div v-for="(value, key, index) in obj" :key="index" class="flex gap-2">
+			<Autocomplete
+				:isTeleported="true"
+				teleportedTo=".props-popover-content"
+				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:text-xs"
+				v-bind="events"
+				ref="autoCompleteRef"
+				placeholder="Prop Name"
+				:modelValue="key"
+				:getOptions="getAutocompleteOptions"
+				@update:modelValue="
+					(option) => {
+						console.log(option);
+						if (typeof option === 'string') {
+							return;
+						}
+						replaceKey(key, option?.value);
+					}
+				" />
+			<Input
+				type="select"
+				class="!w-16"
+				placeholder="operator"
+				:modelValue="value.operator"
+				@update:modelValue="setSelectedOperator(key, $event)"
+				:options="getOperatorOptions(key)"></Input>
+			<BuilderInput
+				placeholder="Property"
+				:modelValue="value.value"
+				@update:modelValue="(val: string) => updateObjectValue(key, val)" />
+			<BuilderButton
+				class="flex-shrink-0 text-xs"
+				variant="subtle"
+				icon="x"
+				@click="deleteObjectKey(key as string)" />
+		</div>
+		<BuilderButton variant="subtle" label="Add" class="addButton" @click="addObjectKey"></BuilderButton>
+		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
+			<span v-html="description"></span>
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { mapToObject, replaceMapKey } from "@/utils/helpers";
+import { nextTick, ref, useAttrs, watch } from "vue";
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import blockController from "@/utils/blockController";
+import { toast } from "vue-sonner";
+import Input from "./Controls/Input.vue";
+
+type DependencyObjType = Record<
+	string,
+	{
+		operator: string;
+		value: string;
+	}
+>;
+
+type availableStdPropsType = Record<string, "string" | "number" | "boolean" | "array" | "object">;
+
+const attrs = useAttrs();
+const events = Object.fromEntries(
+	Object.entries(attrs).filter(([key]) => key.startsWith("onFocus") || key.startsWith("onBlur")),
+);
+
+const propsEditor = ref<HTMLElement | null>(null);
+const autoCompleteRef = ref<typeof Autocomplete | null>(null);
+
+const props = defineProps<{
+	availableStdProps: availableStdPropsType;
+	obj: DependencyObjType;
+	description?: string;
+}>();
+
+const emit = defineEmits({
+	"update:obj": (obj: BlockProps) => true,
+	"update:ancestorUpdateDependency": (propKey: string, action: "add" | "remove") => true,
+});
+
+const setSelectedOperator = (key: string, operator: string) => {
+	const map = new Map(Object.entries(props.obj));
+	const current = map.get(key);
+	if (current) {
+		map.set(key, {
+			...current,
+			operator,
+		});
+		emit("update:obj", mapToObject(map));
+	}
+};
+
+const operatorsForString = ["equals", "not equals", "contains", "does not contain"];
+const operatorsForNumber = ["equals", "not equals", "greater than", "less than"];
+const operatorsForBoolean = ["is true", "is false"];
+const operatorsForArray = ["includes", "does not include"];
+const operatorsForObject = ["has key", "does not have key"];
+
+const operatorOptionsCache: Record<string, { label: string; value: string }[]> = {};
+
+const getOperatorOptions = (propName: string) => {
+	if (!props.availableStdProps[propName]) {
+		return [];
+	}
+	const propType = props.availableStdProps[propName];
+	if (operatorOptionsCache[propType]) {
+		// to avoid mapping every time
+		return operatorOptionsCache[propType];
+	}
+	let operators: string[] = [];
+	switch (propType) {
+		case "string":
+			operators = operatorsForString;
+			break;
+		case "number":
+			operators = operatorsForNumber;
+			break;
+		case "boolean":
+			operators = operatorsForBoolean;
+			break;
+		case "array":
+			operators = operatorsForArray;
+			break;
+		case "object":
+			operators = operatorsForObject;
+			break;
+		default:
+			operators = [];
+	}
+	const options = operators.map((op) => ({ label: op, value: op }));
+	operatorOptionsCache[propType] = options;
+	return options;
+};
+
+const getAutocompleteOptions = async (query: string) => {
+	const options = Object.entries(props.availableStdProps)
+		.filter(([key]) => key.toLowerCase().includes(query.toLowerCase()))
+		.map(([key]) => ({
+			label: key,
+			value: key,
+		}));
+
+	return options;
+};
+
+const addObjectKey = async () => {
+	const map = new Map(Object.entries(props.obj));
+	map.set("", { operator: "", value: "" });
+	emit("update:obj", mapToObject(map));
+	await nextTick();
+	const inputs = propsEditor.value?.querySelectorAll("input");
+	if (inputs) {
+		const lastInput = inputs[inputs.length - 2];
+		lastInput.focus();
+	}
+};
+
+const updateObjectValue = (key: string, value: string | null) => {
+	if (!key) {
+		toast.error("Please select a property name.");
+		return;
+	}
+	if (!props.obj[key].operator) {
+		toast.error("Please select an operator.");
+		return;
+	}
+
+	const map = new Map(Object.entries(props.obj));
+
+	map.set(key, {
+		...map.get(key)!,
+		value: value || "",
+	});
+
+	emit("update:obj", mapToObject(map));
+};
+
+const replaceKey = (oldKey: string, newKey: string) => {
+	if (Object.keys(props.obj).includes(newKey)) {
+		toast.error("Property name already exists.");
+		return;
+	}
+	if (!newKey) {
+		newKey = "";
+	}
+	const map = new Map(Object.entries(props.obj));
+	emit("update:obj", mapToObject(replaceMapKey(map, oldKey, newKey)));
+	// need to add the dependdency tracking
+};
+
+const deleteObjectKey = (key: string) => {
+	const map = new Map(Object.entries(props.obj));
+	map.delete(key);
+	emit("update:obj", mapToObject(map));
+};
+
+watch(
+	[() => props.obj, () => props.availableStdProps, () => blockController.getSelectedBlocks()],
+	() => {
+		if (Array.isArray(autoCompleteRef.value)) {
+			autoCompleteRef.value.forEach((ref) => {
+				ref?.updateOptions();
+			});
+		}
+	},
+	{ immediate: true },
+);
+
+const evaluateCondition = (leftOperand: any, operator: string, rightOperand: any, type: string): boolean => {
+	try {
+		switch (type) {
+			case "string":
+				const leftStr = String(leftOperand);
+				const rightStr = String(rightOperand);
+				switch (operator) {
+					case "equals":
+						return leftStr === rightStr;
+					case "not equals":
+						return leftStr !== rightStr;
+					case "contains":
+						return leftStr.includes(rightStr);
+					case "does not contain":
+						return !leftStr.includes(rightStr);
+					default:
+						return false;
+				}
+
+			case "number":
+				const leftNum = Number(leftOperand);
+				const rightNum = Number(rightOperand);
+				switch (operator) {
+					case "equals":
+						return leftNum === rightNum;
+					case "not equals":
+						return leftNum !== rightNum;
+					case "greater than":
+						return leftNum > rightNum;
+					case "less than":
+						return leftNum < rightNum;
+					default:
+						return false;
+				}
+
+			case "boolean":
+				const boolValue = Boolean(leftOperand);
+				switch (operator) {
+					case "is true":
+						return boolValue === true;
+					case "is false":
+						return boolValue === false;
+					default:
+						return false;
+				}
+
+			case "array":
+				if (!Array.isArray(leftOperand)) return false;
+				switch (operator) {
+					case "includes":
+						return leftOperand.includes(rightOperand);
+					case "does not include":
+						return !leftOperand.includes(rightOperand);
+					default:
+						return false;
+				}
+
+			case "object":
+				if (typeof leftOperand !== "object" || leftOperand === null) return false;
+				const key = String(rightOperand);
+				switch (operator) {
+					case "has key":
+						return key in leftOperand;
+					case "does not have key":
+						return !(key in leftOperand);
+					default:
+						return false;
+				}
+
+			default:
+				return false;
+		}
+	} catch (error) {
+		console.error("Error evaluating condition:", error);
+		return false;
+	}
+};
+</script>
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index dc1794e04..0a237cbfa 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -51,7 +51,14 @@
 				:disabled="value.usedByCount || false"
 				@click="deleteObjectKey(key as string)" />
 		</div>
-		<BuilderButton variant="subtle" label="Add" @click="addObjectKey"></BuilderButton>
+		<Popover popoverClass="!mr-[20px]" placement="left">
+			<template #target="{ togglePopover }">
+				<BuilderButton class="w-full" variant="subtle" label="Add" @click="togglePopover()"></BuilderButton>
+			</template>
+			<template #body>
+				<PropsPopoverContent />
+			</template>
+		</Popover>
 		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
 			<span v-html="description"></span>
 		</p>
@@ -72,6 +79,8 @@ import LucideZap from "~icons/lucide/zap";
 import LucideCaseSensitive from "~icons/lucide/case-sensitive";
 // @ts-ignore
 import LucideListTree from "~icons/lucide/list-tree";
+import { Popover } from "frappe-ui";
+import PropsPopoverContent from "./PropsPopoverContent.vue";
 
 const attrs = useAttrs();
 const events = Object.fromEntries(
diff --git a/frontend/src/components/PropsOptions/ArrayOptions.vue b/frontend/src/components/PropsOptions/ArrayOptions.vue
new file mode 100644
index 000000000..a302b55fa
--- /dev/null
+++ b/frontend/src/components/PropsOptions/ArrayOptions.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="flex items-center justify-between">
+		<InputLabel>Min. Items</InputLabel>
+		<Input placeholder="Enter min number of items"></Input>
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>Max. Items</InputLabel>
+		<Input placeholder="Enter max number of items"></Input>
+	</div>
+	<div class="flex flex-col gap-3">
+		<InputLabel>Default Items</InputLabel>
+		<ArrayEditor :arr @update:arr="(newArr) => (arr = newArr)" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+import ArrayEditor from "@/components/ArrayEditor.vue";
+import { ref } from "vue";
+
+const arr = ref<string[]>([]);
+</script>
diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
new file mode 100644
index 000000000..f4c02d9f1
--- /dev/null
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="flex items-center justify-between">
+		<InputLabel>True Option</InputLabel>
+		<Input placeholder="Enter true option display"></Input>
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>False Option</InputLabel>
+		<Input placeholder="Enter false option display"></Input>
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>Default Value</InputLabel>
+		<Input type="select" :options="[
+			{
+				label: 'true',
+				value: 'true'
+			},
+			{
+				label: 'false',
+				value: 'false'
+			}
+		]" placeholder="Enter default value"></Input>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+
+</script>
diff --git a/frontend/src/components/PropsOptions/NumberOptions.vue b/frontend/src/components/PropsOptions/NumberOptions.vue
new file mode 100644
index 000000000..cebcaa999
--- /dev/null
+++ b/frontend/src/components/PropsOptions/NumberOptions.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="flex items-center justify-between">
+		<InputLabel>Min. Value</InputLabel>
+		<Input placeholder="Enter min value"></Input>
+	</div>
+    <div class="flex items-center justify-between">
+		<InputLabel>Max. Value</InputLabel>
+		<Input placeholder="Enter max value"></Input>
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>Default Value</InputLabel>
+		<Input placeholder="Enter default value"></Input>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+</script>
diff --git a/frontend/src/components/PropsOptions/ObjectOptions.vue b/frontend/src/components/PropsOptions/ObjectOptions.vue
new file mode 100644
index 000000000..bce1c908c
--- /dev/null
+++ b/frontend/src/components/PropsOptions/ObjectOptions.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="flex items-center justify-between">
+		<InputLabel>Min. Items</InputLabel>
+		<Input placeholder="Enter min number of items"></Input>
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>Max. Items</InputLabel>
+		<Input placeholder="Enter max number of items"></Input>
+	</div>
+	<div class="flex flex-col gap-3">
+		<InputLabel>Default Items</InputLabel>
+		<ObjectEditor :obj="obj" @update:obj="(newObj) => (obj = newObj)" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+import { ref } from "vue";
+import ObjectEditor from "../ObjectEditor.vue";
+
+const obj = ref<Record<string, any>>({});
+</script>
diff --git a/frontend/src/components/PropsOptions/StringOptions.vue b/frontend/src/components/PropsOptions/StringOptions.vue
new file mode 100644
index 000000000..b1e871e71
--- /dev/null
+++ b/frontend/src/components/PropsOptions/StringOptions.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="flex items-center justify-between">
+		<InputLabel>Default Value</InputLabel>
+		<Input placeholder="Enter default value"></Input>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+</script>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
new file mode 100644
index 000000000..2289becfc
--- /dev/null
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -0,0 +1,294 @@
+<template>
+	<div
+		@click.stop
+		@mousedown.stop
+		class="props-popover-content flex max-h-80 w-80 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
+		<div v-if="showIsStandardInput" class="flex items-center justify-between">
+			<InputLabel>Is Standard</InputLabel>
+			<OptionToggle
+				:options="[
+					{
+						label: 'Yes',
+						value: 'true',
+					},
+					{
+						label: 'No',
+						value: 'false',
+					},
+				]"
+				:model-value="isStandard"
+				@update:model-value="(val) => (isStandard = val)" />
+		</div>
+		<div class="flex items-center justify-between">
+			<InputLabel>Name</InputLabel>
+			<Input v-model="name" placeholder="Enter prop name"></Input>
+		</div>
+		<div class="flex items-center justify-between">
+			<InputLabel>Type</InputLabel>
+			<Input
+				placeholder="Select prop type"
+				type="select"
+				:options="propTypes"
+				:model-value="selectedPropType"
+				@update:model-value="
+					(option) => {
+						setPropType(option);
+					}
+				"></Input>
+		</div>
+		<div v-if="!isStandardBool" class="flex items-center justify-between">
+			<InputLabel v-model="value">Value</InputLabel>
+			<Input v-if="selectedPropType == 'static'" v-model="value" placeholder="Enter prop name"></Input>
+			<Autocomplete
+				v-else
+				:is-teleported="true"
+				teleported-to=".props-popover-content"
+				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none"
+				ref="autoCompleteRef"
+				placeholder="Choose prop value"
+				:modelValue="value"
+				:getOptions="getOptions"
+				@update:modelValue="
+					(option) => {
+						if (typeof option === 'string') {
+							return;
+						} else {
+							value = option?.value;
+						}
+					}
+				" />
+		</div>
+		<div v-if="!isStandardBool && isInFragmentMode" class="flex items-center justify-between">
+			<InputLabel>Is Editable</InputLabel>
+			<OptionToggle
+				:options="[
+					{
+						label: 'Yes',
+						value: 'true',
+					},
+					{
+						label: 'No',
+						value: 'false',
+					},
+				]"
+				:model-value="isEditable"
+				@update:model-value="(val) => (isEditable = val)" />
+		</div>
+		<template v-if="isStandardBool">
+			<div class="flex items-center justify-between">
+				<InputLabel>Is Required</InputLabel>
+				<OptionToggle
+					:options="[
+						{
+							label: 'Yes',
+							value: 'true',
+						},
+						{
+							label: 'No',
+							value: 'false',
+						},
+					]"
+					:model-value="standardPropOptions.isRequired"
+					@update:model-value="(val) => (standardPropOptions.isRequired = val)" />
+			</div>
+			<component :is="componentMapping[selectedStandardPropType as keyof typeof componentMapping]" />
+		</template>
+		<div v-if="isStandardBool" class="flex flex-col gap-2">
+			<InputLabel>Depends on</InputLabel>
+			<PropsDependencyEditor
+				:available-std-props="{
+					sample_prop: 'string',
+					another_prop: 'number',
+					one_more_prop: 'boolean',
+					list_prop: 'array',
+					obj_prop: 'object',
+				}"
+				:obj="standardPropDependencyMap"
+				@update:obj="(obj) => (standardPropDependencyMap = obj)" />
+		</div>
+		<hr />
+		<div class="flex items-center justify-between">
+			<BuilderButton class="w-full">Save</BuilderButton>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import NumberOptions from "@/components/PropsOptions/NumberOptions.vue";
+import StringOptions from "@/components/PropsOptions/StringOptions.vue";
+import ArrayOptions from "@/components/PropsOptions/ArrayOptions.vue";
+import PropsDependencyEditor from "@/components/PropsDependencyEditor.vue";
+import useCanvasStore from "@/stores/canvasStore";
+import blockController from "@/utils/blockController";
+import ObjectOptions from "@/components/PropsOptions/ObjectOptions.vue";
+import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
+import BuilderButton from "./Controls/BuilderButton.vue";
+import Autocomplete from "./Controls/Autocomplete.vue";
+import usePageStore from "@/stores/pageStore";
+import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
+import Block from "@/block";
+
+const canvasStore = useCanvasStore();
+
+const isStandard = ref("false");
+const isStandardBool = computed(() => isStandard.value === "true");
+const isEditable = ref("false");
+const name = ref("");
+const value = ref("");
+const selectedNonStandardPropType = ref("static");
+const selectedStandardPropType = ref("string");
+const standardPropOptions = ref<{ isRequired: string; [key: string]: any }>({
+	isRequired: "false",
+});
+const standardPropDependencyMap = ref<{ [key: string]: any }>({});
+const autoCompleteRef = ref<typeof Autocomplete | null>(null);
+
+const propTypes = computed(() => {
+	if (isStandardBool.value) {
+		return [
+			{
+				label: "String",
+				value: "string",
+			},
+			{
+				label: "Number",
+				value: "number",
+			},
+			{
+				label: "Boolean",
+				value: "boolean",
+			},
+			{
+				label: "Array",
+				value: "array",
+			},
+			{
+				label: "Object",
+				value: "object",
+			},
+		];
+	} else {
+		return [
+			{
+				label: "Static",
+				value: "static",
+			},
+			{
+				label: "Inherited",
+				value: "inherited",
+			},
+			{
+				label: "Dynamic",
+				value: "dynamic",
+			},
+		];
+	}
+});
+
+const showIsStandardInput = computed(() => {
+	return canvasStore.editingMode == "fragment" && !blockController.getFirstSelectedBlock()?.getParentBlock();
+});
+
+const isInFragmentMode = computed(() => {
+	return canvasStore.editingMode == "fragment";
+});
+
+const selectedPropType = computed(() => {
+	if (isStandardBool.value) {
+		return selectedStandardPropType.value;
+	} else {
+		return selectedNonStandardPropType.value;
+	}
+});
+
+const setPropType = (type: string) => {
+	if (isStandardBool.value) {
+		selectedStandardPropType.value = type;
+	} else {
+		selectedNonStandardPropType.value = type;
+	}
+};
+
+const dataArray = computed(() => {
+	const result: string[] = [];
+	let collectionObject = usePageStore().pageData;
+	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
+		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
+		collectionObject = keys.reduce((acc: any, key: string) => {
+			const data = getDataForKey(acc, key);
+			return Array.isArray(data) && data.length > 0 ? data[0] : data;
+		}, collectionObject);
+	}
+
+	function processObject(obj: Record<string, any>, prefix = "") {
+		Object.entries(obj).forEach(([key, value]) => {
+			const path = prefix ? `${prefix}.${key}` : key;
+
+			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+				processObject(value, path);
+			} else if (["string", "number", "boolean"].includes(typeof value)) {
+				result.push(path);
+			}
+		});
+	}
+
+	processObject(collectionObject);
+	return result;
+});
+
+const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
+	const parentBlock = baseBlock.getParentBlock();
+	if (parentBlock) {
+		const parentProps: string[] = Object.keys(parentBlock.getBlockProps()).map((key) => key);
+		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
+			if (!acc.find((p: string) => p === prop)) {
+				acc.push(prop);
+			}
+			return acc;
+		}, [] as string[]);
+		return getParentProps(parentBlock, combinedProps);
+	} else {
+		return baseProps;
+	}
+};
+
+const getOptions = async (query: string) => {
+	let options: string[];
+	if (selectedPropType.value == "inherited") {
+		options = getParentProps(blockController.getFirstSelectedBlock()!, []);
+	} else {
+		options = dataArray.value;
+	}
+
+	return options
+		.filter((prop) => prop.toLowerCase().includes(query.toLowerCase()))
+		.map((prop) => ({
+			label: prop,
+			value: prop,
+		}));
+};
+
+const componentMapping = {
+	string: StringOptions,
+	number: NumberOptions,
+	array: ArrayOptions,
+	boolean: BooleanOptions,
+	object: ObjectOptions,
+};
+
+watch(
+	selectedPropType,
+	() => {
+		if (Array.isArray(autoCompleteRef.value)) {
+			autoCompleteRef.value.forEach((ref) => {
+				ref?.updateOptions();
+			});
+		}
+	},
+	{ immediate: true },
+);
+</script>

From 2ddaeef26050bc836dd7a34ae90216afa50a773b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 12 Nov 2025 14:48:49 +0530
Subject: [PATCH 052/547] fix: While exporting, use app_name as folder

---
 builder/builder/doctype/builder_page/builder_page.py | 1 +
 builder/utils.py                                     | 7 +++++++
 frontend/src/pages/PageBuilder.vue                   | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 6524b073d..6a80aa8c4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -885,6 +885,7 @@ def export_page_as_standard(page_name, target_app, export_name=None):
 	if page_doc.meta_image:
 		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
 
+	page_config["project_folder"] = target_app
 	page_config = frappe.as_json(page_config, ensure_ascii=False)
 
 	with open(config_file_path, "w", encoding="utf-8") as f:
diff --git a/builder/utils.py b/builder/utils.py
index ce376e54e..25f5c6e25 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -625,5 +625,12 @@ def sync_standard_builder_pages(app_name=None):
 			print(f"Importing scripts from {scripts_path}")
 			make_records(scripts_path)
 		if os.path.exists(pages_path):
+			frappe.get_doc(
+				{
+					"doctype": "Builder Project Folder",
+					"folder_name": app,
+					"is_standard": 1,
+				}
+			).insert(ignore_if_duplicate=True)
 			print(f"Importing page from {pages_path}")
 			make_records(pages_path)
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index cd124e5ca..cb7186bd1 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -153,7 +153,9 @@ const pageListDialog = ref(false);
 
 watch([() => canvasStore.editableBlock, () => pageStore.activePage?.is_standard], () => {
 	builderStore.toggleReadOnlyMode(
-		canvasStore.editingMode === "page" && Boolean(pageStore.activePage?.is_standard),
+		canvasStore.editingMode === "page" &&
+			Boolean(pageStore.activePage?.is_standard) &&
+			!window.is_developer_mode,
 	);
 });
 

From d35d9b84f9bd962f2a74cd8b4a92cc43433bfe11 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 14 Nov 2025 10:42:54 +0530
Subject: [PATCH 053/547] feat: added logic to handle prop add and update from
 popover

---
 .../src/components/Controls/Autocomplete.vue  | 183 +++++----
 .../src/components/PropsDependencyEditor.vue  |   4 +-
 frontend/src/components/PropsEditor.vue       | 386 +++++++++---------
 .../src/components/PropsPopoverContent.vue    | 228 +++++++++--
 4 files changed, 480 insertions(+), 321 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index d4d0b5013..93231b682 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -20,13 +20,14 @@
 					</div>
 				</template>
 				<ComboboxInput
-					autocomplete="off"
 					ref="comboboxInput"
+					autocomplete="off"
 					@focus="
 						() => {
 							if (!open.value) {
 								comboboxButton?.$el.click();
 							}
+							fixedStyles = getFixedStyles();
 							emit('focus');
 							return false;
 						}
@@ -40,67 +41,65 @@
 						$slots.prefix ? 'pl-1' : 'pl-2',
 					]"></ComboboxInput>
 			</div>
-			<Teleport :disabled="!isTeleported" :to="teleportedTo">
-				<ComboboxOptions
-					:style="teleportedStyle"
-					@mousedown="(ev: Event) => (isTeleported ? ev.stopPropagation() : null)"
-					class="absolute right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
-					v-show="filteredOptions.length || (showInputAsOption && query)">
-					<div class="w-full list-none px-1.5 py-1.5">
-						<ComboboxOption
-							v-if="query && !showInputAsOption"
-							:value="query"
-							class="flex items-center"></ComboboxOption>
-						<ComboboxOption
-							v-for="option in filteredOptions"
-							v-slot="{ active, selected }"
-							:key="option.value"
-							:value="option"
-							:disabled="String(option.value).startsWith('_separator')"
-							:title="option.label"
-							class="flex items-center">
-							<span
-								v-if="String(option.value).startsWith('_separator')"
-								class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
+			<ComboboxOptions
+				:class="makeFixed ? 'fixed' : 'absolute'"
+				:style="fixedStyles"
+				class="right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
+				v-show="filteredOptions.length || (showInputAsOption && query)">
+				<div class="w-full list-none px-1.5 py-1.5">
+					<ComboboxOption
+						v-if="query && !showInputAsOption"
+						:value="query"
+						class="flex items-center"></ComboboxOption>
+					<ComboboxOption
+						v-for="option in filteredOptions"
+						v-slot="{ active, selected }"
+						:key="option.value"
+						:value="option"
+						:disabled="String(option.value).startsWith('_separator')"
+						:title="option.label"
+						class="flex items-center">
+						<span
+							v-if="String(option.value).startsWith('_separator')"
+							class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
+							{{ option.label }}
+						</span>
+						<li
+							v-else
+							class="group flex w-full select-none items-center gap-2 truncate rounded px-2.5 py-1.5 text-xs"
+							:class="{
+								'bg-gray-100': active,
+								'bg-gray-300': selected,
+							}">
+							<component v-if="option.prefix" :is="option.prefix" />
+							<span class="truncate">
 								{{ option.label }}
 							</span>
-							<li
-								v-else
-								class="group flex w-full select-none items-center gap-2 truncate rounded px-2.5 py-1.5 text-xs"
-								:class="{
-									'bg-gray-100': active,
-									'bg-gray-300': selected,
-								}">
-								<component v-if="option.prefix" :is="option.prefix" />
-								<span class="truncate">
-									{{ option.label }}
-								</span>
-								<component
-									class="ml-auto"
-									v-if="option.suffix"
-									:is="option.suffix"
-									@mousedown.stop.prevent
-									@click.stop.prevent />
-							</li>
-						</ComboboxOption>
-					</div>
-					<div
-						class="sticky bottom-0 rounded-b-sm border-t border-outline-gray-2 bg-surface-gray-1"
-						v-if="actionButton">
-						<component
-							:is="actionButton.component"
-							v-if="actionButton?.component"
-							@change="updateOptions"></component>
-						<BuilderButton
-							v-else
-							:iconLeft="actionButton.icon"
-							class="w-full rounded-none text-xs text-ink-gray-8"
-							@click="actionButton.handler">
-							{{ actionButton.label }}
-						</BuilderButton>
-					</div>
-				</ComboboxOptions>
-			</Teleport>
+							<component
+								class="ml-auto"
+								v-if="option.suffix"
+								:is="option.suffix"
+								@mousedown.stop.prevent
+								@click.stop.prevent />
+						</li>
+					</ComboboxOption>
+				</div>
+				<div
+					class="sticky bottom-0 rounded-b-sm border-t border-outline-gray-2 bg-surface-gray-1"
+					v-if="actionButton">
+					<component
+						:is="actionButton.component"
+						v-if="actionButton?.component"
+						@change="updateOptions"></component>
+					<BuilderButton
+						v-else
+						:iconLeft="actionButton.icon"
+						class="w-full rounded-none text-xs text-ink-gray-8"
+						@click="actionButton.handler">
+						{{ actionButton.label }}
+					</BuilderButton>
+				</div>
+			</ComboboxOptions>
 		</Combobox>
 		<div
 			class="absolute right-[1px] top-[3px] cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
@@ -141,14 +140,14 @@ const props = withDefaults(
 		placeholder?: string;
 		showInputAsOption?: boolean;
 		actionButton?: Action;
-		isTeleported?: boolean;
-		teleportedTo?: string;
+		makeFixed?: boolean;
+		fixTo?: string;
 	}>(),
 	{
 		options: () => [],
 		placeholder: "Search",
 		showInputAsOption: false,
-		isTeleported: false,
+		makeFixed: false,
 	},
 );
 
@@ -158,7 +157,7 @@ const nullable = computed(() => !multiple.value);
 const asyncOptions = ref<Option[]>([]);
 const comboboxButton = ref<HTMLElement | null>(null);
 const comboboxInput = ref<HTMLElement | null>(null);
-const teleportedStyle = ref({});
+const fixedStyles = ref({});
 
 const filteredOptions = computed(() => {
 	const sourceOptions = props.getOptions ? asyncOptions.value : props.options;
@@ -220,27 +219,6 @@ const value = computed(() => {
 	);
 }) as ComputedRef<Option>;
 
-const getTeleportedStyle = () => {
-	if (!props.isTeleported) {
-		return {};
-	} else {
-		const teleportingToRect = document.querySelector(props.teleportedTo || "body")?.getBoundingClientRect();
-		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
-		
-		if (!teleportingToRect || !comboboxInputRect) {
-			return {};
-		}
-		return {
-			position: "absolute",
-			top: comboboxInputRect.top - teleportingToRect.top + comboboxInputRect.height + "px",
-			left: comboboxInputRect.left - teleportingToRect.left + "px",
-			width: comboboxInputRect.width + "px",
-			minWidth: "fit-content",
-			zIndex: "10",
-		};
-	}
-};
-
 watch(() => query.value, updateOptions, { immediate: true });
 watch(
 	() => props.options,
@@ -259,11 +237,38 @@ async function updateOptions() {
 	}
 }
 
+// in Popver, absolute positioning keeps all options within the popver taking extra space
+// making it fixed makes it float above Popver container
+const getFixedStyles = () => {
+	if (props.makeFixed && props.fixTo) {
+		console.log(
+			"calculating fixed styles",
+			comboboxInput.value,
+			comboboxInput.value?.$el.closest(props.fixTo),
+		);
+		const fixedToElRect = (
+			comboboxInput.value?.$el.closest(props.fixTo) as HTMLElement
+		)?.getBoundingClientRect();
+		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
+		console.log({ fixedToElRect, comboboxInputRect });
+		if (!fixedToElRect || !comboboxInputRect) {
+			return {};
+		}
+		return {
+			top: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height + "px",
+			left: comboboxInputRect.left - fixedToElRect.left + "px",
+			width: comboboxInputRect.width + "px",
+			minWidth: "fit-content",
+			zIndex: "10",
+		};
+	}
+	return {};
+};
+
 onMounted(() => {
-	teleportedStyle.value = getTeleportedStyle();
-	document.querySelector(props.teleportedTo || "body")?.addEventListener("scroll", () => {
-		teleportedStyle.value = getTeleportedStyle();
-	});
+	if (props.makeFixed) {
+		fixedStyles.value = getFixedStyles();
+	}
 });
 
 const clearValue = () => emit("update:modelValue", null);
diff --git a/frontend/src/components/PropsDependencyEditor.vue b/frontend/src/components/PropsDependencyEditor.vue
index 97355eef4..a8e994d71 100644
--- a/frontend/src/components/PropsDependencyEditor.vue
+++ b/frontend/src/components/PropsDependencyEditor.vue
@@ -2,8 +2,8 @@
 	<div ref="propsEditor" class="flex flex-col gap-2">
 		<div v-for="(value, key, index) in obj" :key="index" class="flex gap-2">
 			<Autocomplete
-				:isTeleported="true"
-				teleportedTo=".props-popover-content"
+				:make-fixed="true"
+				fix-to=".props-popover-content"
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:text-xs"
 				v-bind="events"
 				ref="autoCompleteRef"
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 0a237cbfa..58cccc106 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -1,62 +1,102 @@
 <template>
 	<div ref="propsEditor" class="flex flex-col gap-2">
-		<div v-for="(value, key, index) in obj" :key="index" class="flex gap-2">
-			<BuilderInput
-				placeholder="Property"
-				:modelValue="key"
-				:disabled="value.usedByCount || false"
-				@update:modelValue="(val: string) => replaceKey(key, val)" />
-			<Autocomplete
-				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:font-mono [&>div>input]:text-xs"
-				:class="{
-					'[&>div>input]:pl-8': value.value,
-					'[&>div>input]:text-ink-gray-7': !value.value,
-					'[&>.form-input]:bg-surface-violet-1 [&>div>input]:text-ink-violet-1':
-						value.type == 'dynamic' && value.value,
-					'[&>.form-input]:bg-surface-blue-1 [&>div>input]:text-ink-blue-3':
-						value.type == 'static' && value.value,
-					'[&>.form-input]:bg-surface-green-1 [&>div>input]:text-ink-green-3':
-						value.type == 'inherited' && value.value && listOfAvailablePropsToInherit.includes(value.value),
-					'[&>.form-input]:bg-surface-red-1 [&>div>input]:text-ink-red-3':
-						value.type == 'inherited' && value.value && !listOfAvailablePropsToInherit.includes(value.value),
-				}"
-				v-bind="events"
-				ref="autoCompleteRef"
-				placeholder="undefined"
-				:modelValue="value.value"
-				:getOptions="getOptions"
-				@update:modelValue="
-					(option) => {
-						updateObjectValue(key, typeof option == 'string' ? option : option?.value);
-					}
-				">
-				<template #prefix v-if="value.value">
-					<LucideZap v-if="value.type == 'dynamic'" class="absolute left-0 top-0 h-4 w-4 text-ink-violet-1" />
-					<LucideCaseSensitive
-						v-else-if="value.type == 'static'"
-						class="absolute left-0 top-0 h-4 w-4 text-ink-blue-3" />
-					<LucideListTree
-						v-else-if="value.type == 'inherited'"
-						class="absolute left-0 top-0 h-4 w-4"
-						:class="{
-							'text-ink-green-3': listOfAvailablePropsToInherit.includes(value.value),
-							'text-ink-red-3': !listOfAvailablePropsToInherit.includes(value.value),
-						}" />
-				</template>
-			</Autocomplete>
-			<BuilderButton
-				class="flex-shrink-0 text-xs"
-				variant="subtle"
-				icon="x"
-				:disabled="value.usedByCount || false"
-				@click="deleteObjectKey(key as string)" />
+		<div class="flex flex-col gap-2 rounded-lg">
+			<template v-for="(value, key, index) in sortedObj" :key="index">
+				<div
+					:key="index"
+					class="prop-list-item relative flex w-full flex-col rounded-sm bg-surface-gray-2 p-2"
+					v-if="value.isStandard !== true || shouldDisplayStandardProps">
+					<Popover popoverClass="!mr-[25px]" placement="left-start">
+						<template #target="{ open }">
+							<div class="flex w-full items-center justify-between">
+								<div class="flex w-full items-center gap-2 pl-2">
+									<div class="icon">
+										<component
+											v-if="!value.isStandard"
+											:is="
+												{
+													static: LucideCaseSensitive,
+													inherited: LucideListTree,
+													dynamic: LucideZap,
+												}[value.type] || LucideZap
+											"
+											class="h-4 w-4 text-ink-gray-6" />
+										<LucideChevronsLeftRightEllipsis v-else class="h-4 w-4 text-ink-gray-6" />
+									</div>
+									<div class="flex flex-col gap-1">
+										<p class="text-sm font-medium text-ink-gray-8">{{ key }}</p>
+										<p class="text-xs text-ink-gray-6">
+											{{ value.value }}
+										</p>
+									</div>
+								</div>
+								<div class="flex-shrink-0 gap-1 rounded">
+									<BuilderButton
+										class="flex-shrink-0 bg-transparent text-xs"
+										variant="subtle"
+										icon="edit-2"
+										:disabled="Boolean(value.usedByCount) || false"
+										@click.stop="
+											() => {
+												popoverContentItemsRef[index]?.reset({
+													keepName: false,
+													keepIsStandard: false,
+													keepProps: true,
+													keepType: false,
+												});
+												keyBeingEdited = key as string;
+												open();
+											}
+										" />
+									<BuilderButton
+										class="flex-shrink-0 bg-transparent text-xs"
+										variant="subtle"
+										icon="x"
+										:disabled="Boolean(value.usedByCount) || false"
+										@click="deleteObjectKey(key as string)" />
+								</div>
+							</div>
+						</template>
+						<template #body>
+							<PropsPopoverContent
+								ref="popoverContentItemsRef"
+								mode="edit"
+								:propName="key"
+								:propDetails="value"
+								@update:prop="updateProp" />
+						</template>
+					</Popover>
+				</div>
+			</template>
 		</div>
-		<Popover popoverClass="!mr-[20px]" placement="left">
-			<template #target="{ togglePopover }">
-				<BuilderButton class="w-full" variant="subtle" label="Add" @click="togglePopover()"></BuilderButton>
+		<Popover ref="popOverRef" popoverClass="!mr-[20px]" placement="left">
+			<template #target="{ open }">
+				<BuilderButton
+					class="w-full"
+					variant="subtle"
+					label="Add"
+					@click="
+						() => {
+							popoverContentAddRef?.reset({
+								keepName: false,
+								keepIsStandard: false,
+								keepProps: false,
+								keepType: false,
+							});
+							keyBeingEdited = null;
+							popupMode = 'add';
+							open();
+						}
+					"></BuilderButton>
 			</template>
 			<template #body>
-				<PropsPopoverContent />
+				<PropsPopoverContent
+					ref="popoverContentAddRef"
+					:mode="popupMode"
+					:propName="keyBeingEdited"
+					:propDetails="propDetailsOfKeyBeingEdited"
+					@add:prop="addProp"
+					@update:prop="updateProp" />
 			</template>
 		</Popover>
 		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
@@ -65,128 +105,73 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { getCollectionKeys, getDataForKey, mapToObject, replaceMapKey } from "@/utils/helpers";
-import { computed, defineComponent, h, nextTick, ref, shallowRef, useAttrs, watch, watchEffect } from "vue";
-import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import usePageStore from "@/stores/pageStore";
-import blockController from "@/utils/blockController";
+import { mapToObject, replaceMapKey } from "@/utils/helpers";
+import { computed, ref, useAttrs, watch } from "vue";
+
 import { toast } from "vue-sonner";
 
-import Block from "@/block";
 // @ts-ignore
 import LucideZap from "~icons/lucide/zap";
 // @ts-ignore
 import LucideCaseSensitive from "~icons/lucide/case-sensitive";
 // @ts-ignore
 import LucideListTree from "~icons/lucide/list-tree";
+// @ts-ignore
+import LucideChevronsLeftRightEllipsis from "~icons/lucide/chevrons-left-right-ellipsis";
+
 import { Popover } from "frappe-ui";
 import PropsPopoverContent from "./PropsPopoverContent.vue";
+import useCanvasStore from "@/stores/canvasStore";
+import blockController from "@/utils/blockController";
 
 const attrs = useAttrs();
 const events = Object.fromEntries(
 	Object.entries(attrs).filter(([key]) => key.startsWith("onFocus") || key.startsWith("onBlur")),
 );
 
-const autoCompleteRef = ref<typeof Autocomplete | null>(null);
-
-const pageStore = usePageStore();
+const popupMode = ref<"add" | "edit">("add");
+const keyBeingEdited = ref<string | null>(null);
+const propDetailsOfKeyBeingEdited = ref<BlockProps[string] | null>(null);
+const popOverRef = ref<typeof Popover | null>(null);
+const popoverContentAddRef = ref<typeof PropsPopoverContent | null>(null);
+const popoverContentItemsRef = ref<Array<typeof PropsPopoverContent | null>>([]);
 
 const props = defineProps<{
 	obj: BlockProps;
 	description?: string;
 }>();
 
+const sortedObj = computed(() => {
+	// Sort props: standard props at the front, then non-standard props
+	const entries = Object.entries(props.obj);
+	entries.sort((a, b) => {
+		const aIsStandard = a[1].isStandard ? 1 : 0;
+		const bIsStandard = b[1].isStandard ? 1 : 0;
+		return bIsStandard - aIsStandard;
+	});
+	return Object.fromEntries(entries);
+});
+
+const shouldDisplayStandardProps = computed(() => {
+	return (
+		useCanvasStore().editingMode == "fragment" && !blockController.getFirstSelectedBlock()?.getParentBlock()
+	);
+});
+
 const propsEditor = ref<HTMLElement | null>(null);
 
 const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
 	"update:ancestorUpdateDependency": (propKey: string, action: "add" | "remove") => true,
 });
-// better name
-type PropOptions = { path: string; type: "dynamic" | "inherited" | "static" };
-
-// why computed? no dependency tracking needed right?
-const dataArray = computed(() => {
-	const result: PropOptions[] = [];
-	let collectionObject = pageStore.pageData;
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
-		collectionObject = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
-	}
-
-	function processObject(obj: Record<string, any>, prefix = "") {
-		Object.entries(obj).forEach(([key, value]) => {
-			const path = prefix ? `${prefix}.${key}` : key;
-
-			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-				processObject(value, path);
-			} else if (["string", "number", "boolean"].includes(typeof value)) {
-				result.push({ path, type: "dynamic" });
-			}
-		});
-	}
-
-	processObject(collectionObject);
-	return result;
-});
-
-const listOfAvailablePropsToInherit = ref<string[]>([]);
-const getParentProps = (baseBlock: Block, baseProps: PropOptions[]): PropOptions[] => {
-	const parentBlock = baseBlock.getParentBlock();
-	if (parentBlock) {
-		const parentProps: PropOptions[] = Object.keys(parentBlock.getBlockProps()).map((key) => ({
-			path: key,
-			type: "inherited",
-		}));
-		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
-			if (
-				!acc.find((p: PropOptions) => p.path === prop.path && p.type === prop.type && p.type === "inherited")
-			) {
-				acc.push(prop);
-			}
-			return acc;
-		}, [] as PropOptions[]);
-		return getParentProps(parentBlock, combinedProps);
-	} else {
-		return baseProps;
-	}
-};
-
-const getOptions = async (query: string) => {
-	const parentPropsArray = getParentProps(blockController.getFirstSelectedBlock()!, []);
 
-	const options = [
-		...new Set([...parentPropsArray, ...dataArray.value]),
-		...(query ? [{ path: query, type: "static" } as PropOptions] : []),
-	]
-		.filter((prop) => prop.path.toLowerCase().includes(query.toLowerCase()))
-		.map((prop) => ({
-			label: prop.path || "",
-			value: `${prop.type}--${prop.path}`,
-			suffix: h(
-				prop.type === "dynamic" ? LucideZap : prop.type === "static" ? LucideCaseSensitive : LucideListTree,
-				{
-					class: "ml-2 rounded px-1 py-0.5 text-xs text-ink-gray-6 shrink-0",
-				},
-			),
-		}));
-
-	return options;
-};
-
-const addObjectKey = async () => {
+const addProp = async (name: string, value: BlockProps[string]) => {
 	const map = new Map(Object.entries(props.obj));
-	map.set("", { type: "static", value: "" });
+	map.set(name, value);
+	popupMode.value = "edit";
+	keyBeingEdited.value = name;
 	emit("update:obj", mapToObject(map));
-	await nextTick();
-	const inputs = propsEditor.value?.querySelectorAll("input");
-	if (inputs) {
-		const lastInput = inputs[inputs.length - 2];
-		lastInput.focus();
-	}
+	return map;
 };
 
 const clearObjectValue = (key: string) => {
@@ -199,53 +184,81 @@ const clearObjectValue = (key: string) => {
 		type: "static",
 	});
 
-	emit("update:obj", mapToObject(map));
-
 	if (oldValue?.type == "inherited" && oldValue?.value) {
 		emit("update:ancestorUpdateDependency", oldValue.value, "remove");
 	}
+
+	return map;
 };
 
-const updateObjectValue = (key: string, value: string | null) => {
-	if (!key) {
-		toast.error("Property name cannot be empty.");
-		return;
-	}
-	if (!value) {
-		clearObjectValue(key);
-		return;
+const updateObjectValue = (
+	map: Map<string, BlockProps[string]>,
+	key: string,
+	{ value, type }: { value: string | null; type: string },
+) => {
+	const path = value;
+	if (!path) {
+		return clearObjectValue(key);
 	}
 
-	const map = new Map(Object.entries(props.obj));
-	const splitValue = value.split("--");
-	let type, path;
-	if (splitValue.length >= 2 && ["dynamic", "inherited", "static"].includes(splitValue[0])) {
-		type = splitValue[0];
-		path = splitValue.slice(1).join("--");
-	} else {
-		type = "static";
-		path = value;
-	}
 	const oldPath = map.get(key)?.value;
+	const oldType = map.get(key)?.type;
 
 	map.set(key, {
 		...map.get(key)!,
-		value: type === "static" ? JSON.stringify(path) : path,
+		value: type === "static" && typeof path !== "string" ? JSON.stringify(path) : path,
 		type: type as BlockProps[string]["type"],
 	});
 
-	emit("update:obj", mapToObject(map));
-
-	if (path) {
+	if (path && type === "inherited") {
 		emit("update:ancestorUpdateDependency", path, "add");
-	} else if (oldPath) {
+	}
+	if (oldPath && oldType === "inherited") {
 		emit("update:ancestorUpdateDependency", oldPath, "remove");
 	}
+	return map;
 };
 
-const replaceKey = (oldKey: string, newKey: string) => {
-	const map = new Map(Object.entries(props.obj));
-	emit("update:obj", mapToObject(replaceMapKey(map, oldKey, newKey)));
+const replaceKey = (map: Map<string, BlockProps[string]>, oldKey: string, newKey: string) => {
+	keyBeingEdited.value = newKey;
+	return mapToObject(replaceMapKey(map, oldKey, newKey));
+};
+
+const updateIsStandard = (map: Map<string, BlockProps[string]>, key: string, isStandard: boolean) => {
+	const value = map.get(key);
+	map.set(key, {
+		...value!,
+		isStandard,
+	});
+	return map;
+};
+
+const updateStandardOptions = (map: Map<string, BlockProps[string]>, key: string, standardOptions: any) => {
+	const value = map.get(key);
+	map.set(key, {
+		...value!,
+		standardOptions,
+	});
+	return map;
+};
+
+const updateProp = async (oldKey: string, newKey: string, value: BlockProps[string]) => {
+	let map = new Map(Object.entries(props.obj));
+
+	if (oldKey !== newKey) {
+		map = new Map(Object.entries(replaceKey(map, oldKey, newKey)));
+	}
+
+	map = updateObjectValue(map, newKey, {
+		value: value.value,
+		type: value.type,
+	});
+	map = updateIsStandard(map, newKey, value.isStandard || false);
+	map = updateStandardOptions(map, newKey, value.standardOptions || {});
+
+	emit("update:obj", mapToObject(map));
+
+	return map;
 };
 
 const deleteObjectKey = (key: string) => {
@@ -257,18 +270,17 @@ const deleteObjectKey = (key: string) => {
 	if (path) emit("update:ancestorUpdateDependency", path, "remove");
 };
 
-watch(
-	[() => props.obj, () => blockController.getSelectedBlocks(), () => pageStore.pageData],
-	() => {
-		if (Array.isArray(autoCompleteRef.value)) {
-			autoCompleteRef.value.forEach((ref) => {
-				ref?.updateOptions();
-			});
-		}
-		listOfAvailablePropsToInherit.value = getParentProps(blockController.getFirstSelectedBlock()!, []).map(
-			(prop) => prop.path,
-		);
-	},
-	{ immediate: true },
-);
+watch([keyBeingEdited, () => props.obj], () => {
+	if (keyBeingEdited.value) {
+		propDetailsOfKeyBeingEdited.value = props.obj[keyBeingEdited.value];
+	} else {
+		propDetailsOfKeyBeingEdited.value = null;
+	}
+});
 </script>
+
+<style scoped>
+.prop-list-item > div:first-child {
+	width: 100%;
+}
+</style>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 2289becfc..bff2bc4a8 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -17,11 +17,18 @@
 					},
 				]"
 				:model-value="isStandard"
-				@update:model-value="(val) => (isStandard = val)" />
+				@update:model-value="handleIsStandardChange" />
 		</div>
 		<div class="flex items-center justify-between">
 			<InputLabel>Name</InputLabel>
-			<Input v-model="name" placeholder="Enter prop name"></Input>
+			<Input
+				v-model="name"
+				placeholder="Enter prop name"
+				@input="
+					(val) => {
+						name = val;
+					}
+				"></Input>
 		</div>
 		<div class="flex items-center justify-between">
 			<InputLabel>Type</InputLabel>
@@ -30,19 +37,23 @@
 				type="select"
 				:options="propTypes"
 				:model-value="selectedPropType"
-				@update:model-value="
-					(option) => {
-						setPropType(option);
-					}
-				"></Input>
+				@update:model-value="handleTypeChange"></Input>
 		</div>
 		<div v-if="!isStandardBool" class="flex items-center justify-between">
 			<InputLabel v-model="value">Value</InputLabel>
-			<Input v-if="selectedPropType == 'static'" v-model="value" placeholder="Enter prop name"></Input>
+			<Input
+				v-if="selectedPropType == 'static'"
+				v-model="value"
+				placeholder="Enter prop name"
+				@input="
+					(val) => {
+						value = val;
+					}
+				"></Input>
 			<Autocomplete
 				v-else
-				:is-teleported="true"
-				teleported-to=".props-popover-content"
+				:make-fixed="true"
+				fix-to=".props-popover-content"
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none"
 				ref="autoCompleteRef"
 				placeholder="Choose prop value"
@@ -88,10 +99,21 @@
 							value: 'false',
 						},
 					]"
-					:model-value="standardPropOptions.isRequired"
-					@update:model-value="(val) => (standardPropOptions.isRequired = val)" />
+					:model-value="String(standardPropOptions.isRequired)"
+					@update:model-value="(val) => (standardPropOptions.isRequired = val === 'true')" />
 			</div>
-			<component :is="componentMapping[selectedStandardPropType as keyof typeof componentMapping]" />
+			<component
+				:is="componentMapping[standardPropOptions.type as keyof typeof componentMapping]"
+				:options="standardPropOptions"
+				@update:options="(option: any) => {
+					console.log('option', option);
+					standardPropOptions = {
+						isRequired: standardPropOptions.isRequired,
+						type: standardPropOptions.type,
+						dependencies: standardPropOptions.dependencies,
+						...option,
+					};
+				}" />
 		</template>
 		<div v-if="isStandardBool" class="flex flex-col gap-2">
 			<InputLabel>Depends on</InputLabel>
@@ -106,47 +128,82 @@
 				:obj="standardPropDependencyMap"
 				@update:obj="(obj) => (standardPropDependencyMap = obj)" />
 		</div>
-		<hr />
-		<div class="flex items-center justify-between">
-			<BuilderButton class="w-full">Save</BuilderButton>
-		</div>
+		<BuilderButton label="Save" variant="subtle" class="w-full flex-shrink-0" @click="save" />
 	</div>
 </template>
 
 <script setup lang="ts">
+import Block from "@/block";
+
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import NumberOptions from "@/components/PropsOptions/NumberOptions.vue";
-import StringOptions from "@/components/PropsOptions/StringOptions.vue";
-import ArrayOptions from "@/components/PropsOptions/ArrayOptions.vue";
+import BuilderButton from "@/components/Controls/BuilderButton.vue";
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
+
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+
 import PropsDependencyEditor from "@/components/PropsDependencyEditor.vue";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
+
+import NumberOptions from "@/components/PropsOptions/NumberOptions.vue";
+import StringOptions from "@/components/PropsOptions/StringOptions.vue";
+import ArrayOptions from "@/components/PropsOptions/ArrayOptions.vue";
 import ObjectOptions from "@/components/PropsOptions/ObjectOptions.vue";
 import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
-import BuilderButton from "./Controls/BuilderButton.vue";
-import Autocomplete from "./Controls/Autocomplete.vue";
+
 import usePageStore from "@/stores/pageStore";
 import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
-import Block from "@/block";
+
+const props = withDefaults(
+	defineProps<{
+		mode: "add" | "edit";
+		propName?: string | null;
+		propDetails?: BlockProps[string] | null;
+	}>(),
+	{
+		mode: "add",
+	},
+);
 
 const canvasStore = useCanvasStore();
 
-const isStandard = ref("false");
+const isStandard = ref(props.propDetails?.isStandard ? "true" : "false");
 const isStandardBool = computed(() => isStandard.value === "true");
-const isEditable = ref("false");
-const name = ref("");
-const value = ref("");
-const selectedNonStandardPropType = ref("static");
-const selectedStandardPropType = ref("string");
-const standardPropOptions = ref<{ isRequired: string; [key: string]: any }>({
-	isRequired: "false",
-});
-const standardPropDependencyMap = ref<{ [key: string]: any }>({});
+const isEditable = ref("false"); // TODO: required?
+const name = ref(props.propName ?? "");
+const value = ref(props.propDetails?.value ?? "");
+const selectedNonStandardPropType = ref(
+	props.propDetails && !props.propDetails.isStandard ? props.propDetails.type : "static",
+);
+const standardPropOptions = ref<BlockPropsStandardOptions>(
+	props.propDetails && props.propDetails.isStandard
+		? {
+				...props.propDetails.standardOptions,
+				isRequired: Boolean(props.propDetails.standardOptions?.isRequired),
+				type: props.propDetails.standardOptions?.type || "string",
+		  }
+		: {
+				isRequired: false,
+				type: "string",
+				defaultValue: "",
+				options: [],
+				dependencies: {},
+		  },
+);
+const standardPropDependencyMap = ref<{ [key: string]: any }>(
+	props.propDetails && props.propDetails.isStandard
+		? props.propDetails.standardOptions?.dependencies || {}
+		: {},
+);
 const autoCompleteRef = ref<typeof Autocomplete | null>(null);
 
+const emit = defineEmits({
+	"add:prop": (name: string, prop: BlockProps[string]) => true,
+	"update:prop": (oldPropName: string, newName: string, newProp: BlockProps[string]) => true,
+});
+
 const propTypes = computed(() => {
 	if (isStandardBool.value) {
 		return [
@@ -199,20 +256,24 @@ const isInFragmentMode = computed(() => {
 
 const selectedPropType = computed(() => {
 	if (isStandardBool.value) {
-		return selectedStandardPropType.value;
+		console.log("standardPropOptions.value.type", standardPropOptions.value.type);
+		return standardPropOptions.value.type;
 	} else {
 		return selectedNonStandardPropType.value;
 	}
 });
 
+const STANDARD_PROP_TYPES = ["string", "number", "boolean", "array", "object"];
+
 const setPropType = (type: string) => {
-	if (isStandardBool.value) {
-		selectedStandardPropType.value = type;
+	if (isStandardBool.value && STANDARD_PROP_TYPES.includes(type)) {
+		standardPropOptions.value.type = type as "string" | "number" | "boolean" | "array" | "object";
 	} else {
-		selectedNonStandardPropType.value = type;
+		selectedNonStandardPropType.value = type as "static" | "inherited" | "dynamic";
 	}
 };
 
+// TODO: reuse this from dynamic value handler
 const dataArray = computed(() => {
 	const result: string[] = [];
 	let collectionObject = usePageStore().pageData;
@@ -280,15 +341,96 @@ const componentMapping = {
 	object: ObjectOptions,
 };
 
+const handleIsStandardChange = async (newVal: string) => {
+	isStandard.value = newVal;
+	await nextTick();
+	reset({
+		keepName: true,
+		keepIsStandard: true,
+		keepProps: false,
+		keepType: false,
+	});
+};
+
+const handleTypeChange = async (newVal: string) => {
+	setPropType(newVal);
+	await nextTick();
+	reset({
+		keepName: true,
+		keepIsStandard: true,
+		keepProps: false,
+		keepType: true,
+	});
+};
+
+const reset = async (keepParams: {
+	keepName: boolean;
+	keepIsStandard: boolean;
+	keepProps: boolean;
+	keepType: boolean;
+}) => {
+	const { keepName, keepIsStandard, keepProps, keepType } = keepParams;
+	if (!keepName) name.value = props.propName ?? "";
+	const propDetails = keepProps ? props.propDetails : null;
+	if (!keepIsStandard) isStandard.value = propDetails?.isStandard ? "true" : "false";
+	value.value = propDetails?.value ?? "";
+	console.trace("val", keepParams, propDetails?.value ?? "hello");
+	if (propDetails?.isStandard) {
+		standardPropOptions.value = {
+			...propDetails.standardOptions,
+			isRequired: Boolean(propDetails.standardOptions?.isRequired),
+			...(keepType
+				? { type: standardPropOptions.value.type }
+				: { type: propDetails.standardOptions?.type || "string" }),
+		};
+		standardPropDependencyMap.value = propDetails.standardOptions?.dependencies || {};
+	} else {
+		if (!keepType) selectedNonStandardPropType.value = propDetails?.type || "static";
+	}
+};
+
+watch(
+	[() => props.propName, () => props.propDetails],
+	() =>
+		reset({
+			keepName: false,
+			keepIsStandard: false,
+			keepProps: true,
+			keepType: false,
+		}),
+	{
+		immediate: true,
+		deep: true,
+	},
+);
+
 watch(
 	selectedPropType,
 	() => {
-		if (Array.isArray(autoCompleteRef.value)) {
-			autoCompleteRef.value.forEach((ref) => {
-				ref?.updateOptions();
-			});
-		}
+		autoCompleteRef.value?.updateOptions();
 	},
 	{ immediate: true },
 );
+
+const save = async () => {
+	await nextTick();
+	const propValue: BlockProps[string] = {
+		isStandard: isStandardBool.value,
+		type: isStandardBool.value ? "static" : selectedNonStandardPropType.value,
+		value: isStandardBool.value ? null : value.value,
+		standardOptions: isStandardBool.value
+			? {
+					...standardPropOptions.value,
+					dependencies: standardPropDependencyMap.value,
+			  }
+			: undefined,
+	};
+	if (props.mode === "add") {
+		emit("add:prop", name.value, propValue);
+	} else {
+		emit("update:prop", props.propName!, name.value, propValue);
+	}
+};
+
+defineExpose({ reset });
 </script>

From 203f1d874278edd4dd15aef6507b6a473d243ae1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 14 Nov 2025 16:36:56 +0530
Subject: [PATCH 054/547] fix: Export assets in component as well

---
 builder/builder/doctype/builder_page/builder_page.py      | 2 +-
 .../builder_project_folder/builder_project_folder.py      | 8 +++++++-
 builder/utils.py                                          | 7 ++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 6a80aa8c4..4edb54b14 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -897,7 +897,7 @@ def export_page_as_standard(page_name, target_app, export_name=None):
 	# # Export components used in the page
 	if blocks:
 		components = extract_components_from_blocks(blocks)
-		export_components(components, paths["components_path"])
+		export_components(components, paths["components_path"], paths["assets_path"])
 
 
 @frappe.whitelist()
diff --git a/builder/builder/doctype/builder_project_folder/builder_project_folder.py b/builder/builder/doctype/builder_project_folder/builder_project_folder.py
index 9de6c1bbe..a2a910c2b 100644
--- a/builder/builder/doctype/builder_project_folder/builder_project_folder.py
+++ b/builder/builder/doctype/builder_project_folder/builder_project_folder.py
@@ -42,4 +42,10 @@ def on_trash(self):
 
 
 def is_system_activity():
-	return frappe.flags.in_import or frappe.flags.in_patch or frappe.flags.in_migrate or frappe.in_test
+	return (
+		frappe.flags.in_import
+		or frappe.flags.in_patch
+		or frappe.flags.in_migrate
+		or frappe.in_test
+		or frappe.flags.in_install
+	)
diff --git a/builder/utils.py b/builder/utils.py
index 25f5c6e25..0ba9ad8d1 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -546,11 +546,16 @@ def export_client_scripts(page_doc, client_scripts_path):
 			f.write(frappe.as_json(script_config, ensure_ascii=False))
 
 
-def export_components(components, components_path):
+def export_components(components, components_path, assets_path):
 	"""Export components to files"""
 	for component_id in components:
 		try:
 			component_doc = frappe.get_doc("Builder Component", component_id)
+			# replace assets in component blocks
+			component_blocks = frappe.parse_json(component_doc.block or "[]")
+			copy_assets_from_blocks(component_blocks, assets_path)
+			component_doc.block = frappe.as_json(component_blocks)
+
 			# Replace forward slashes with underscores to create valid directory names
 			safe_component_name = frappe.scrub(component_doc.component_name).replace("/", "_")
 			component_dir = os.path.join(components_path, safe_component_name)

From 8e679f8ce65e1cdb7b2370c42299d7fb6405c9a8 Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 16 Nov 2025 11:35:46 +0530
Subject: [PATCH 055/547] feat: added logic for various standard prop options

---
 frontend/components.d.ts                      |  12 +-
 frontend/src/builder.d.ts                     |  10 ++
 frontend/src/components/PropsEditor.vue       |  44 +++++-
 .../components/PropsOptions/ArrayOptions.vue  | 131 +++++++++++++++-
 .../PropsOptions/BooleanOptions.vue           |  83 ++++++++--
 .../components/PropsOptions/NumberOptions.vue | 108 ++++++++++++-
 .../components/PropsOptions/ObjectOptions.vue | 144 +++++++++++++++++-
 .../components/PropsOptions/SelectOptions.vue |  97 ++++++++++++
 .../components/PropsOptions/StringOptions.vue |  29 +++-
 .../src/components/PropsPopoverContent.vue    |  95 ++++++++----
 10 files changed, 687 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/components/PropsOptions/SelectOptions.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6d1ee5078..168767c11 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -12,6 +12,8 @@ declare module 'vue' {
     AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
     AppsMenu: typeof import('./src/components/AppsMenu.vue')['default']
+    ArrayEditor: typeof import('./src/components/ArrayEditor.vue')['default']
+    ArrayOptions: typeof import('./src/components/PropsOptions/ArrayOptions.vue')['default']
     AuthenticatedUser: typeof import('./src/components/Icons/AuthenticatedUser.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
     BackgroundHandler: typeof import('./src/components/BackgroundHandler.vue')['default']
@@ -26,6 +28,7 @@ declare module 'vue' {
     Blocks: typeof import('./src/components/Icons/Blocks.vue')['default']
     BlockSnapGuides: typeof import('./src/components/BlockSnapGuides.vue')['default']
     BlockStyleManager: typeof import('./src/components/Controls/BlockStyleManager.vue')['default']
+    BooleanOptions: typeof import('./src/components/PropsOptions/BooleanOptions.vue')['default']
     BorderRadiusHandler: typeof import('./src/components/BorderRadiusHandler.vue')['default']
     BoxResizer: typeof import('./src/components/BoxResizer.vue')['default']
     BuilderAssets: typeof import('./src/components/BuilderAssets.vue')['default']
@@ -33,7 +36,6 @@ declare module 'vue' {
     BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
     BuilderButton: typeof import('./src/components/Controls/BuilderButton.vue')['default']
     BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
-    BuilderInput: typeof import('./src/components/BuilderInput.vue')['default']
     BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
     BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
     BuilderSettings: typeof import('./src/components/BuilderSettings.vue')['default']
@@ -47,6 +49,7 @@ declare module 'vue' {
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
+    copy: typeof import('./src/components/PropsOptions/ArrayOptions copy.vue')['default']
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
     CSS: typeof import('./src/components/Icons/CSS.vue')['default']
     CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
@@ -76,7 +79,6 @@ declare module 'vue' {
     JavaScript: typeof import('./src/components/Icons/JavaScript.vue')['default']
     Layers: typeof import('./src/components/Icons/Layers.vue')['default']
     Loading: typeof import('./src/components/Icons/Loading.vue')['default']
-    LucideCalendar: typeof import('~icons/lucide/calendar')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     Meta: typeof import('./src/components/Icons/Meta.vue')['default']
@@ -84,7 +86,9 @@ declare module 'vue' {
     NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
     NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']
     NewFolder: typeof import('./src/components/Modals/NewFolder.vue')['default']
+    NumberOptions: typeof import('./src/components/PropsOptions/NumberOptions.vue')['default']
     ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
+    ObjectOptions: typeof import('./src/components/PropsOptions/ObjectOptions.vue')['default']
     OptionToggle: typeof import('./src/components/Controls/OptionToggle.vue')['default']
     PaddingHandler: typeof import('./src/components/PaddingHandler.vue')['default']
     PageAnalytics: typeof import('./src/components/Settings/PageAnalytics.vue')['default']
@@ -104,7 +108,9 @@ declare module 'vue' {
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     Plus: typeof import('./src/components/Icons/Plus.vue')['default']
     PropertyControl: typeof import('./src/components/Controls/PropertyControl.vue')['default']
+    PropsDependencyEditor: typeof import('./src/components/PropsDependencyEditor.vue')['default']
     PropsEditor: typeof import('./src/components/PropsEditor.vue')['default']
+    PropsPopoverContent: typeof import('./src/components/PropsPopoverContent.vue')['default']
     PublishButton: typeof import('./src/components/PublishButton.vue')['default']
     RangeInput: typeof import('./src/components/Controls/RangeInput.vue')['default']
     Redirect: typeof import('./src/components/Icons/Redirect.vue')['default']
@@ -113,9 +119,11 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SearchBlock: typeof import('./src/components/Controls/SearchBlock.vue')['default']
     SelectFolder: typeof import('./src/components/Modals/SelectFolder.vue')['default']
+    SelectOptions: typeof import('./src/components/PropsOptions/SelectOptions.vue')['default']
     Settings: typeof import('./src/components/Icons/Settings.vue')['default']
     SettingsGear: typeof import('./src/components/Icons/SettingsGear.vue')['default']
     StrikeThrough: typeof import('./src/components/Icons/StrikeThrough.vue')['default']
+    StringOptions: typeof import('./src/components/PropsOptions/StringOptions.vue')['default']
     Switch: typeof import('./src/components/Controls/Switch.vue')['default']
     TabButtons: typeof import('./src/components/Controls/TabButtons.vue')['default']
     TemplatePagePreview: typeof import('./src/components/TemplatePagePreview.vue')['default']
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index f5726758c..60844802b 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -6,12 +6,22 @@ declare interface BlockStyleMap {
 	[key: styleProperty]: StyleValue;
 }
 
+type BlockPropsStandardOptions = {
+	type: "number" | "string" | "boolean" | "select" | "array" | "object";
+	isRequired?: boolean;
+	defaultValue?: any;
+	options?: Record<string, any>;
+	dependencies?: { [key: string]: any };
+}
+
 declare type BlockProps = Record<
 	string,
 	{
 		type: "dynamic" | "static" | "inherited";
 		value: string?;
 		usedByCount?: number;
+		isStandard?: boolean;
+		standardOptions?: BlockPropsStandardOptions;
 	}
 >;
 
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 58cccc106..0bfd546e1 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -21,11 +21,29 @@
 												}[value.type] || LucideZap
 											"
 											class="h-4 w-4 text-ink-gray-6" />
-										<LucideChevronsLeftRightEllipsis v-else class="h-4 w-4 text-ink-gray-6" />
+										<component
+											v-if="value.isStandard && value.standardOptions?.type"
+											:is="
+												{
+													number: LucideNumber,
+													string: LucideString,
+													boolean: LucideBoolean,
+													select: LucideSelect,
+													object: LucideObject,
+													array: LucideArray,
+												}[value.standardOptions?.type] || LucideZap
+											"
+											class="h-4 w-4 text-ink-gray-6" />
 									</div>
 									<div class="flex flex-col gap-1">
-										<p class="text-sm font-medium text-ink-gray-8">{{ key }}</p>
-										<p class="text-xs text-ink-gray-6">
+										<p class="text-sm font-medium text-ink-gray-8">
+											{{ key }}
+										</p>											<sup v-if="value.isStandard && value.standardOptions?.isRequired">*</sup>
+
+										<p v-if="value.isStandard" class="text-xs text-ink-gray-6">
+											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
+										</p>
+										<p v-else class="text-xs text-ink-gray-6">
 											{{ value.value }}
 										</p>
 									</div>
@@ -38,6 +56,7 @@
 										:disabled="Boolean(value.usedByCount) || false"
 										@click.stop="
 											() => {
+												popupMode = 'edit';
 												popoverContentItemsRef[index]?.reset({
 													keepName: false,
 													keepIsStandard: false,
@@ -61,7 +80,7 @@
 							<PropsPopoverContent
 								ref="popoverContentItemsRef"
 								mode="edit"
-								:propName="key"
+								:propName="key as string"
 								:propDetails="value"
 								@update:prop="updateProp" />
 						</template>
@@ -117,7 +136,17 @@ import LucideCaseSensitive from "~icons/lucide/case-sensitive";
 // @ts-ignore
 import LucideListTree from "~icons/lucide/list-tree";
 // @ts-ignore
-import LucideChevronsLeftRightEllipsis from "~icons/lucide/chevrons-left-right-ellipsis";
+import LucideNumber from "~icons/lucide/pi";
+// @ts-ignore
+import LucideString from "~icons/lucide/type";
+// @ts-ignore
+import LucideBoolean from "~icons/lucide/toggle-right";
+// @ts-ignore
+import LucideSelect from "~icons/lucide/chevrons-up-down";
+// @ts-ignore
+import LucideArray from "~icons/lucide/brackets";
+// @ts-ignore
+import LucideObject from "~icons/lucide/braces";
 
 import { Popover } from "frappe-ui";
 import PropsPopoverContent from "./PropsPopoverContent.vue";
@@ -174,8 +203,7 @@ const addProp = async (name: string, value: BlockProps[string]) => {
 	return map;
 };
 
-const clearObjectValue = (key: string) => {
-	const map = new Map(Object.entries(props.obj));
+const clearObjectValue = (map: Map<string, BlockProps[string]>, key: string) => {
 	const oldValue = map.get(key);
 
 	map.set(key, {
@@ -198,7 +226,7 @@ const updateObjectValue = (
 ) => {
 	const path = value;
 	if (!path) {
-		return clearObjectValue(key);
+		return clearObjectValue(map, key);
 	}
 
 	const oldPath = map.get(key)?.value;
diff --git a/frontend/src/components/PropsOptions/ArrayOptions.vue b/frontend/src/components/PropsOptions/ArrayOptions.vue
index a302b55fa..3e50133ed 100644
--- a/frontend/src/components/PropsOptions/ArrayOptions.vue
+++ b/frontend/src/components/PropsOptions/ArrayOptions.vue
@@ -1,15 +1,23 @@
 <template>
 	<div class="flex items-center justify-between">
 		<InputLabel>Min. Items</InputLabel>
-		<Input placeholder="Enter min number of items"></Input>
+		<Input
+			:model-value="minItems"
+			@update:model-value="handleMinItemsChange"
+			@input="handleMinItemsChange"
+			placeholder="Enter min number of items"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Max. Items</InputLabel>
-		<Input placeholder="Enter max number of items"></Input>
+		<Input
+			:model-value="maxItems"
+			@update:model-value="handleMaxItemsChange"
+			@input="handleMaxItemsChange"
+			placeholder="Enter max number of items"></Input>
 	</div>
 	<div class="flex flex-col gap-3">
 		<InputLabel>Default Items</InputLabel>
-		<ArrayEditor :arr @update:arr="(newArr) => (arr = newArr)" />
+		<ArrayEditor :arr @update:arr="handleArrChange" />
 	</div>
 </template>
 
@@ -17,7 +25,120 @@
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
 import ArrayEditor from "@/components/ArrayEditor.vue";
-import { ref } from "vue";
+import { nextTick, ref, watch } from "vue";
+import { Ref } from "vue";
+import { toast } from "vue-sonner";
 
-const arr = ref<string[]>([]);
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+type NumberRef = {
+	value: Ref<number | null, number | null>;
+	handleChange: (val: string) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+type StringArrayRef = {
+	value: Ref<string[], string[]>;
+	handleChange: (val: any[]) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+function toNumberOrNull(v: any) {
+	const n = parseFloat(v);
+	return Number.isFinite(n) ? n : null;
+}
+
+function performValidation() {
+	const min = toNumberOrNull(minItems.value);
+	const max = toNumberOrNull(maxItems.value);
+	const def = arr.value.length;
+	let isValid = true;
+	if (min !== null && max !== null && min > max) {
+		isValid = false;
+	}
+	if (def) {
+		if (min !== null && def < min) {
+			isValid = false;
+		}
+		if (max !== null && def > max) {
+			isValid = false;
+		}
+	}
+	return isValid;
+}
+
+function useArrayOption(key: string, isNumeric: boolean = false) {
+	const numericValue = ref(toNumberOrNull(props.options?.[key]));
+	const arrayValue = ref<string[]>(Array.isArray(props.options?.[key]) ? props.options?.[key] : []);
+
+	watch(
+		() => props.options?.[key],
+		(newVal) => {
+			if (isNumeric) {
+				numericValue.value = toNumberOrNull(newVal);
+			} else {
+				arrayValue.value = Array.isArray(newVal) ? newVal : [];
+			}
+		},
+	);
+
+	function resetNumber(toProps: boolean) {
+		numericValue.value = toProps ? toNumberOrNull(props.options?.[key]) : null;
+	}
+	function resetArray(toProps: boolean) {
+		arrayValue.value = toProps && Array.isArray(props.options?.[key]) ? props.options?.[key] : [];
+	}
+
+	async function handleNumberChange(val: string) {
+		numericValue.value = toNumberOrNull(val);
+		await nextTick();
+		const isValid = performValidation();
+		if (isValid) {
+			emit("update:options", {
+				minItems,
+				maxItems,
+				defaultValue: arr,
+			});
+		} else {
+			toast.error("Invalid option configuration!");
+		}
+	}
+
+	async function handleArrayChange(val: any[]) {
+		arrayValue.value = val;
+		await nextTick();
+		const isValid = performValidation();
+		if (isValid) {
+			emit("update:options", {
+				minItems: minItems.value,
+				maxItems: maxItems.value,
+				defaultValue: arr.value,
+			});
+		} else {
+			toast.error("Invalid option configuration!");
+		}
+	}
+
+	return isNumeric
+		? { value: numericValue, handleChange: handleNumberChange, reset: resetNumber }
+		: { value: arrayValue, handleChange: handleArrayChange, reset: resetArray };
+}
+
+const { value: minItems, handleChange: handleMinItemsChange, reset: resetMin } = useArrayOption("minItems", true) as NumberRef;
+const { value: maxItems, handleChange: handleMaxItemsChange, reset: resetMax } = useArrayOption("maxItems", true) as NumberRef;
+const { value: arr, handleChange: handleArrChange, reset: resetArr } = useArrayOption("defaultValue") as StringArrayRef;
+
+const reset = (toProps: boolean = false) => {
+	resetMin(toProps);
+	resetMax(toProps);
+	resetArr(toProps);
+};
+
+defineExpose({ reset });
 </script>
diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
index f4c02d9f1..e2ddee18c 100644
--- a/frontend/src/components/PropsOptions/BooleanOptions.vue
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -1,29 +1,88 @@
 <template>
 	<div class="flex items-center justify-between">
 		<InputLabel>True Option</InputLabel>
-		<Input placeholder="Enter true option display"></Input>
+		<Input
+			:model-value="trueOption"
+			@update:model-value="handleTrueOptionChange"
+			@input="handleTrueOptionChange"
+			placeholder="Enter true option display"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>False Option</InputLabel>
-		<Input placeholder="Enter false option display"></Input>
+		<Input
+			:model-value="falseOption"
+			@update:model-value="handleFalseOptionChange"
+			@input="handleFalseOptionChange"
+			placeholder="Enter false option display"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Default Value</InputLabel>
-		<Input type="select" :options="[
-			{
-				label: 'true',
-				value: 'true'
-			},
-			{
-				label: 'false',
-				value: 'false'
-			}
-		]" placeholder="Enter default value"></Input>
+		<Input
+			type="select"
+			:options="[
+				{
+					label: 'true',
+					value: 'true',
+				},
+				{
+					label: 'false',
+					value: 'false',
+				},
+			]"
+			@update:model-value="handleDefaultValueChange"
+			placeholder="Enter default value"></Input>
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
+import { nextTick, ref, watch } from "vue";
 
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+function useBooleanOption(key: string) {
+	const value = ref(props.options?.[key]);
+
+	watch(
+		() => props.options?.[key],
+		(newVal) => {
+			value.value = newVal;
+		},
+	);
+
+	function reset(toProps: boolean = false) {
+		value.value = toProps ? props.options?.[key] : "";
+	}
+
+	async function handleChange(val: string) {
+		value.value = val;
+		await nextTick();
+		emit("update:options", {
+			trueOption,
+			falseOption,
+			defaultValue,
+		});
+	}
+
+	return { value, reset, handleChange };
+}
+
+const { value: trueOption, reset: resetTrueOption, handleChange: handleTrueOptionChange } = useBooleanOption("trueOption");
+const { value: falseOption, reset: resetFalseOption, handleChange: handleFalseOptionChange } = useBooleanOption("falseOption");
+const { value: defaultValue, reset: resetDefaultValue, handleChange: handleDefaultValueChange } = useBooleanOption("defaultValue");
+
+const reset = (toProps: boolean = false) => {
+	resetTrueOption(toProps);
+	resetFalseOption(toProps);
+	resetDefaultValue(toProps);
+};
+
+defineExpose({ reset });
 </script>
diff --git a/frontend/src/components/PropsOptions/NumberOptions.vue b/frontend/src/components/PropsOptions/NumberOptions.vue
index cebcaa999..096b77a37 100644
--- a/frontend/src/components/PropsOptions/NumberOptions.vue
+++ b/frontend/src/components/PropsOptions/NumberOptions.vue
@@ -1,19 +1,117 @@
 <template>
-    <div class="flex items-center justify-between">
+	<div class="flex items-center justify-between">
 		<InputLabel>Min. Value</InputLabel>
-		<Input placeholder="Enter min value"></Input>
+		<Input
+			:model-value="minValue"
+			@update:model-value="handleMinValueChange"
+			@input="handleMinValueChange"
+			placeholder="Enter min value"></Input>
 	</div>
-    <div class="flex items-center justify-between">
+	<div class="flex items-center justify-between">
 		<InputLabel>Max. Value</InputLabel>
-		<Input placeholder="Enter max value"></Input>
+		<Input
+			:model-value="maxValue"
+			@update:model-value="handleMaxValueChange"
+			@input="handleMaxValueChange"
+			placeholder="Enter max value"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Default Value</InputLabel>
-		<Input placeholder="Enter default value"></Input>
+		<Input
+			:model-value="defaultValue"
+			@update:model-value="handleDefaultValueChange"
+			@input="handleDefaultValueChange"
+			placeholder="Enter default value"></Input>
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
+import { nextTick, ref, watch } from "vue";
+import { toast } from "vue-sonner";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+// helper to coerce values to number or null
+function toNumberOrNull(v: any) {
+	const n = parseFloat(v);
+	return Number.isFinite(n) ? n : null;
+}
+
+function performValidation() {
+	const min = toNumberOrNull(minValue.value);
+	const max = toNumberOrNull(maxValue.value);
+	const def = toNumberOrNull(defaultValue.value);
+
+	let isValid = true;
+	if (min !== null && max !== null && min > max) {
+		isValid = false;
+	}
+	if (def !== null) {
+		if (min !== null && def < min) {
+			isValid = false;
+		}
+		if (max !== null && def > max) {
+			isValid = false;
+		}
+	}
+	return isValid;
+}
+
+function useNumericOption(key: string) {
+	const value = ref(toNumberOrNull(props.options?.[key]));
+
+	watch(
+		() => props.options?.[key],
+		(newVal) => {
+			value.value = toNumberOrNull(newVal);
+		},
+	);
+
+	function reset(toProps: boolean) {
+		if (toProps) {
+			value.value = toNumberOrNull(props.options?.[key]);
+		} else {
+			value.value = null;
+		}
+	}
+
+	async function handleChange(val: string) {
+		const parsed = toNumberOrNull(val);
+		value.value = parsed;
+		await nextTick();
+		const isValid = performValidation();
+		if (isValid) {
+			emit("update:options", {
+				minValue: minValue.value,
+				maxValue: maxValue.value,
+				defaultValue: defaultValue.value,
+			});
+		} else {
+			toast.error("Invalid option configuration!");
+		}
+	}
+
+	return { value, reset, handleChange };
+}
+
+const { value: minValue, reset: resetMinValue, handleChange: handleMinValueChange } = useNumericOption("minValue");
+const { value: maxValue, reset: resetMaxValue, handleChange: handleMaxValueChange } = useNumericOption("maxValue");
+const { value: defaultValue, reset: resetDefaultValue, handleChange: handleDefaultValueChange } = useNumericOption("defaultValue");
+
+const reset = (toProps = false) => {
+	resetMinValue(toProps);
+	resetMaxValue(toProps);
+	resetDefaultValue(toProps);
+};
+
+defineExpose({ reset });
+
 </script>
diff --git a/frontend/src/components/PropsOptions/ObjectOptions.vue b/frontend/src/components/PropsOptions/ObjectOptions.vue
index bce1c908c..eb4839fc6 100644
--- a/frontend/src/components/PropsOptions/ObjectOptions.vue
+++ b/frontend/src/components/PropsOptions/ObjectOptions.vue
@@ -1,23 +1,157 @@
 <template>
 	<div class="flex items-center justify-between">
 		<InputLabel>Min. Items</InputLabel>
-		<Input placeholder="Enter min number of items"></Input>
+		<Input
+			:model-value="minItems"
+			@update:model-value="handleMinItemsChange"
+			@input="handleMinItemsChange"
+			placeholder="Enter min number of items"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Max. Items</InputLabel>
-		<Input placeholder="Enter max number of items"></Input>
+		<Input
+			:model-value="maxItems"
+			@update:model-value="handleMaxItemsChange"
+			@input="handleMaxItemsChange"
+			placeholder="Enter max number of items"></Input>
 	</div>
 	<div class="flex flex-col gap-3">
 		<InputLabel>Default Items</InputLabel>
-		<ObjectEditor :obj="obj" @update:obj="(newObj) => (obj = newObj)" />
+		<ObjectEditor :obj="obj" @update:obj="handleObjChange" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
-import { ref } from "vue";
 import ObjectEditor from "../ObjectEditor.vue";
 
-const obj = ref<Record<string, any>>({});
+import { nextTick, ref, watch } from "vue";
+import { Ref } from "vue";
+import { toast } from "vue-sonner";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+type NumberRef = {
+	value: Ref<number | null, number | null>;
+	handleChange: (val: string) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+type StringObjectRef = {
+	value: Ref<Record<string, any>, Record<string, any>>;
+	handleChange: (val: Record<string, any>) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+function toNumberOrNull(v: any) {
+	const n = parseFloat(v);
+	return Number.isFinite(n) ? n : null;
+}
+
+function performValidation() {
+	const min = toNumberOrNull(minItems.value);
+	const max = toNumberOrNull(maxItems.value);
+	const def = Object.keys(obj.value).length;
+	let isValid = true;
+	if (min !== null && max !== null && min > max) {
+		isValid = false;
+	}
+	if (def) {
+		if (min !== null && def < min) {
+			isValid = false;
+		}
+		if (max !== null && def > max) {
+			isValid = false;
+		}
+	}
+	return isValid;
+}
+
+function useObjectOption(key: string, isNumeric: boolean = false) {
+	const numericValue = ref(toNumberOrNull(props.options?.[key]));
+	const objectValue = ref<Record<string, any>>(
+		typeof props.options?.[key] === "object" && !Array.isArray(props.options?.[key])
+			? props.options?.[key]
+			: {},
+	);
+
+	watch(
+		() => props.options?.[key],
+		(newVal) => {
+			if (isNumeric) {
+				numericValue.value = toNumberOrNull(newVal);
+			} else {
+				objectValue.value = typeof newVal === "object" && !Array.isArray(newVal) ? newVal : {};
+			}
+		},
+	);
+
+	function resetNumber(toProps: boolean) {
+		numericValue.value = toProps ? toNumberOrNull(props.options?.[key]) : null;
+	}
+	function resetObject(toProps: boolean) {
+		if (toProps) {
+			objectValue.value =
+				typeof props.options?.[key] === "object" && !Array.isArray(props.options?.[key])
+					? props.options?.[key]
+					: {};
+		} else {
+			objectValue.value = {};
+		}
+	}
+
+	async function handleNumberChange(val: string) {
+		numericValue.value = toNumberOrNull(val);
+		await nextTick();
+		const isValid = performValidation();
+		if (isValid) {
+			emit("update:options", {
+				minItems,
+				maxItems,
+				defaultValue: obj.value,
+			});
+		} else {
+			toast.error("Invalid option configuration!");
+		}
+	}
+
+	async function handleObjectChange(val: Record<string, any>) {
+		objectValue.value = val;
+		await nextTick();
+		const isValid = performValidation();
+		if (isValid) {
+			emit("update:options", {
+				minItems: minItems.value,
+				maxItems: maxItems.value,
+				defaultValue: obj.value,
+			});
+		} else {
+			toast.error("Invalid option configuration!");
+		}
+	}
+
+	return isNumeric
+		? { value: numericValue, handleChange: handleNumberChange, reset: resetNumber }
+		: { value: objectValue, handleChange: handleObjectChange, reset: resetObject };
+}
+
+const { value: minItems, handleChange: handleMinItemsChange, reset: resetMin } = useObjectOption("minItems", true) as NumberRef;
+const { value: maxItems, handleChange: handleMaxItemsChange, reset: resetMax } = useObjectOption("maxItems", true) as NumberRef;
+const { value: obj, handleChange: handleObjChange, reset: resetObj } = useObjectOption("defaultValue") as StringObjectRef;
+
+
+const reset = (toProps: boolean = false) => {
+	resetMin(toProps);
+	resetMax(toProps);
+	resetObj(toProps);
+};
+
+defineExpose({ reset });
 </script>
diff --git a/frontend/src/components/PropsOptions/SelectOptions.vue b/frontend/src/components/PropsOptions/SelectOptions.vue
new file mode 100644
index 000000000..e7442828c
--- /dev/null
+++ b/frontend/src/components/PropsOptions/SelectOptions.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="flex flex-col gap-3">
+		<InputLabel>Options</InputLabel>
+		<ArrayEditor :arr="options" @update:arr="handleOptionsChange" />
+	</div>
+	<div class="flex items-center justify-between">
+		<InputLabel>Default Value</InputLabel>
+		<Input type="select" :options="optionsAvailable" @update:model-value="handleDefaultValueChange" placeholder="Select default value"></Input>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import Input from "@/components/Controls/Input.vue";
+import ArrayEditor from "@/components/ArrayEditor.vue";
+import { computed, nextTick, Ref, ref, watch } from "vue";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+type StringRef = {
+	value: Ref<string | null, string | null>;
+	handleChange: (val: string) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+type StringArrayRef = {
+	value: Ref<string[], string[]>;
+	handleChange: (val: any[]) => Promise<void>;
+	reset: (toProps?: boolean) => void;
+};
+
+function useSelectOption(key: string, isString: boolean = false) {
+	const stringValue = ref(props.options?.[key]);
+	const arrayValue = ref<string[]>(Array.isArray(props.options?.[key]) ? props.options?.[key] : []);
+
+	watch(
+		() => props.options?.[key],
+		(newVal) => {
+			if (isString) {
+				stringValue.value = newVal;
+			} else {
+				arrayValue.value = Array.isArray(newVal) ? newVal : [];
+			}
+		},
+	);
+
+	function resetString(toProps: boolean) {
+		stringValue.value = toProps ? props.options?.[key] : "";
+	}
+	function resetArray(toProps: boolean) {
+		arrayValue.value = toProps && Array.isArray(props.options?.[key]) ? props.options?.[key] : [];
+	}
+
+	async function handleStringChange(val: string) {
+		stringValue.value = val;
+		emit("update:options", {});
+	}
+
+	async function handleArrayChange(val: any[]) {
+		arrayValue.value = val;
+		await nextTick();
+		emit("update:options", {});
+	}
+
+	return isString
+		? { value: stringValue, handleChange: handleStringChange, reset: resetString }
+		: { value: arrayValue, handleChange: handleArrayChange, reset: resetArray };
+}
+
+const {
+	value: options,
+	handleChange: handleOptionsChange,
+	reset: resetOptions,
+} = useSelectOption("options") as StringArrayRef;
+const {
+	value: defaultValue,
+	handleChange: handleDefaultValueChange,
+	reset: resetDefaultValue,
+} = useSelectOption("defaultValue", true) as StringRef;
+
+const optionsAvailable = computed(() => {
+	return options.value.map((opt) => ({ label: opt, value: opt }));
+});
+
+const reset = (toProps: boolean = false) => {
+	resetOptions(toProps);
+	resetDefaultValue(toProps);
+};
+
+defineExpose({ reset });
+</script>
diff --git a/frontend/src/components/PropsOptions/StringOptions.vue b/frontend/src/components/PropsOptions/StringOptions.vue
index b1e871e71..306a63b75 100644
--- a/frontend/src/components/PropsOptions/StringOptions.vue
+++ b/frontend/src/components/PropsOptions/StringOptions.vue
@@ -1,11 +1,38 @@
 <template>
 	<div class="flex items-center justify-between">
 		<InputLabel>Default Value</InputLabel>
-		<Input placeholder="Enter default value"></Input>
+		<Input
+			:model-value="options.defaultValue"
+			@input="handleDefaultValueChange"
+			@update:model-value="handleDefaultValueChange"
+			placeholder="Enter default value"></Input>
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import Input from "@/components/Controls/Input.vue";
+import { ref } from "vue";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+const defaultValue = ref(props.options?.defaultValue);
+
+const handleDefaultValueChange = (value: string) => {
+	emit("update:options", {
+		defaultValue: defaultValue.value,
+	});
+};
+
+const reset = (toProps: boolean = false) => {
+	defaultValue.value = toProps ? props.options?.defaultValue : "";
+};
+
+defineExpose({ reset });
 </script>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index bff2bc4a8..e63208f4b 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -24,6 +24,11 @@
 			<Input
 				v-model="name"
 				placeholder="Enter prop name"
+				@update:model-value="
+					(val) => {
+						name = val;
+					}
+				"
 				@input="
 					(val) => {
 						name = val;
@@ -45,6 +50,11 @@
 				v-if="selectedPropType == 'static'"
 				v-model="value"
 				placeholder="Enter prop name"
+				@update:model-value="
+					(val) => {
+						value = val;
+					}
+				"
 				@input="
 					(val) => {
 						value = val;
@@ -105,14 +115,14 @@
 			<component
 				:is="componentMapping[standardPropOptions.type as keyof typeof componentMapping]"
 				:options="standardPropOptions"
+				ref="optionsComponentRef"
 				@update:options="(option: any) => {
-					console.log('option', option);
-					standardPropOptions = {
+					Object.assign(standardPropOptions, {
 						isRequired: standardPropOptions.isRequired,
 						type: standardPropOptions.type,
 						dependencies: standardPropOptions.dependencies,
 						...option,
-					};
+					});
 				}" />
 		</template>
 		<div v-if="isStandardBool" class="flex flex-col gap-2">
@@ -141,7 +151,7 @@ import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, nextTick, reactive, ref, watch } from "vue";
 
 import PropsDependencyEditor from "@/components/PropsDependencyEditor.vue";
 import useCanvasStore from "@/stores/canvasStore";
@@ -152,6 +162,7 @@ import StringOptions from "@/components/PropsOptions/StringOptions.vue";
 import ArrayOptions from "@/components/PropsOptions/ArrayOptions.vue";
 import ObjectOptions from "@/components/PropsOptions/ObjectOptions.vue";
 import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
+import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import usePageStore from "@/stores/pageStore";
 import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
@@ -177,7 +188,7 @@ const value = ref(props.propDetails?.value ?? "");
 const selectedNonStandardPropType = ref(
 	props.propDetails && !props.propDetails.isStandard ? props.propDetails.type : "static",
 );
-const standardPropOptions = ref<BlockPropsStandardOptions>(
+const standardPropOptions = reactive<BlockPropsStandardOptions>(
 	props.propDetails && props.propDetails.isStandard
 		? {
 				...props.propDetails.standardOptions,
@@ -192,12 +203,13 @@ const standardPropOptions = ref<BlockPropsStandardOptions>(
 				dependencies: {},
 		  },
 );
-const standardPropDependencyMap = ref<{ [key: string]: any }>(
+const standardPropDependencyMap = reactive<{ [key: string]: any }>(
 	props.propDetails && props.propDetails.isStandard
 		? props.propDetails.standardOptions?.dependencies || {}
 		: {},
 );
 const autoCompleteRef = ref<typeof Autocomplete | null>(null);
+const optionsComponentRef = ref<any>(null);
 
 const emit = defineEmits({
 	"add:prop": (name: string, prop: BlockProps[string]) => true,
@@ -219,6 +231,10 @@ const propTypes = computed(() => {
 				label: "Boolean",
 				value: "boolean",
 			},
+			{
+				label: "Select",
+				value: "select",
+			},
 			{
 				label: "Array",
 				value: "array",
@@ -256,18 +272,17 @@ const isInFragmentMode = computed(() => {
 
 const selectedPropType = computed(() => {
 	if (isStandardBool.value) {
-		console.log("standardPropOptions.value.type", standardPropOptions.value.type);
-		return standardPropOptions.value.type;
+		return standardPropOptions.type;
 	} else {
 		return selectedNonStandardPropType.value;
 	}
 });
 
-const STANDARD_PROP_TYPES = ["string", "number", "boolean", "array", "object"];
+const STANDARD_PROP_TYPES = ["string", "number", "boolean", "select", "array", "object"];
 
 const setPropType = (type: string) => {
 	if (isStandardBool.value && STANDARD_PROP_TYPES.includes(type)) {
-		standardPropOptions.value.type = type as "string" | "number" | "boolean" | "array" | "object";
+		standardPropOptions.type = type as "string" | "number" | "boolean" | "select" | "array" | "object";
 	} else {
 		selectedNonStandardPropType.value = type as "static" | "inherited" | "dynamic";
 	}
@@ -336,8 +351,9 @@ const getOptions = async (query: string) => {
 const componentMapping = {
 	string: StringOptions,
 	number: NumberOptions,
-	array: ArrayOptions,
 	boolean: BooleanOptions,
+	select: SelectOptions,
+	array: ArrayOptions,
 	object: ObjectOptions,
 };
 
@@ -370,23 +386,47 @@ const reset = async (keepParams: {
 	keepType: boolean;
 }) => {
 	const { keepName, keepIsStandard, keepProps, keepType } = keepParams;
+
+	const details = keepProps ? props.propDetails ?? null : null;
+
 	if (!keepName) name.value = props.propName ?? "";
-	const propDetails = keepProps ? props.propDetails : null;
-	if (!keepIsStandard) isStandard.value = propDetails?.isStandard ? "true" : "false";
-	value.value = propDetails?.value ?? "";
-	console.trace("val", keepParams, propDetails?.value ?? "hello");
-	if (propDetails?.isStandard) {
-		standardPropOptions.value = {
-			...propDetails.standardOptions,
-			isRequired: Boolean(propDetails.standardOptions?.isRequired),
-			...(keepType
-				? { type: standardPropOptions.value.type }
-				: { type: propDetails.standardOptions?.type || "string" }),
-		};
-		standardPropDependencyMap.value = propDetails.standardOptions?.dependencies || {};
+	if (!keepIsStandard) isStandard.value = details?.isStandard ? "true" : "false";
+
+	value.value = details?.value ?? "";
+
+	if (details?.isStandard) {
+		const nextType = keepType ? standardPropOptions.type : details?.standardOptions?.type ?? "string";
+
+		Object.assign(standardPropOptions, {
+			...details?.standardOptions,
+			isRequired: Boolean(details?.standardOptions?.isRequired),
+			type: nextType,
+		});
+
+		const deps = details?.standardOptions?.dependencies ?? {};
+		Object.keys(standardPropDependencyMap).forEach((k) => delete standardPropDependencyMap[k]);
+		Object.assign(standardPropDependencyMap, deps);
+	} else if (isStandardBool.value) {
+		if (!keepType) {
+			standardPropOptions.type = "string";
+		}
+
+		Object.assign(standardPropOptions, {
+			isRequired: false,
+			type: standardPropOptions.type,
+			defaultValue: "",
+			options: [],
+			dependencies: {},
+		});
+
+		Object.assign(standardPropDependencyMap, {});
 	} else {
-		if (!keepType) selectedNonStandardPropType.value = propDetails?.type || "static";
+		if (!keepType) {
+			selectedNonStandardPropType.value = details?.type || "static";
+		}
 	}
+
+	optionsComponentRef.value?.reset(!!keepProps);
 };
 
 watch(
@@ -416,11 +456,11 @@ const save = async () => {
 	await nextTick();
 	const propValue: BlockProps[string] = {
 		isStandard: isStandardBool.value,
-		type: isStandardBool.value ? "static" : selectedNonStandardPropType.value,
+		type: isStandardBool.value ? "static" : selectedNonStandardPropType.value, // all standard props are static by default
 		value: isStandardBool.value ? null : value.value,
 		standardOptions: isStandardBool.value
 			? {
-					...standardPropOptions.value,
+					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
 			  }
 			: undefined,
@@ -431,6 +471,5 @@ const save = async () => {
 		emit("update:prop", props.propName!, name.value, propValue);
 	}
 };
-
 defineExpose({ reset });
 </script>

From 9eaae3900c1b94e7d06e16198a767cef727f0cae Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 16 Nov 2025 19:25:40 +0530
Subject: [PATCH 056/547] fix: logic and labels for diff options

---
 .../PropsOptions/BooleanOptions.vue           | 34 +++++++++----------
 .../components/PropsOptions/SelectOptions.vue | 28 ++++++++-------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
index e2ddee18c..95b45d859 100644
--- a/frontend/src/components/PropsOptions/BooleanOptions.vue
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -1,19 +1,19 @@
 <template>
 	<div class="flex items-center justify-between">
-		<InputLabel>True Option</InputLabel>
+		<InputLabel>True Label</InputLabel>
 		<Input
-			:model-value="trueOption"
-			@update:model-value="handleTrueOptionChange"
-			@input="handleTrueOptionChange"
-			placeholder="Enter true option display"></Input>
+			:model-value="trueLabel"
+			@update:model-value="handleTrueLabelChange"
+			@input="handleTrueLabelChange"
+			placeholder="Enter true Label display"></Input>
 	</div>
 	<div class="flex items-center justify-between">
-		<InputLabel>False Option</InputLabel>
+		<InputLabel>False Label</InputLabel>
 		<Input
-			:model-value="falseOption"
-			@update:model-value="handleFalseOptionChange"
-			@input="handleFalseOptionChange"
-			placeholder="Enter false option display"></Input>
+			:model-value="falseLabel"
+			@update:model-value="handleFalseLabelChange"
+			@input="handleFalseLabelChange"
+			placeholder="Enter false Label display"></Input>
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Default Value</InputLabel>
@@ -65,22 +65,22 @@ function useBooleanOption(key: string) {
 		value.value = val;
 		await nextTick();
 		emit("update:options", {
-			trueOption,
-			falseOption,
-			defaultValue,
+			trueLabel: trueLabel.value,
+			falseLabel: falseLabel.value,
+			defaultValue: defaultValue.value,
 		});
 	}
 
 	return { value, reset, handleChange };
 }
 
-const { value: trueOption, reset: resetTrueOption, handleChange: handleTrueOptionChange } = useBooleanOption("trueOption");
-const { value: falseOption, reset: resetFalseOption, handleChange: handleFalseOptionChange } = useBooleanOption("falseOption");
+const { value: trueLabel, reset: resetTrueLabel, handleChange: handleTrueLabelChange } = useBooleanOption("trueLabel");
+const { value: falseLabel, reset: resetFalseLabel, handleChange: handleFalseLabelChange } = useBooleanOption("falseLabel");
 const { value: defaultValue, reset: resetDefaultValue, handleChange: handleDefaultValueChange } = useBooleanOption("defaultValue");
 
 const reset = (toProps: boolean = false) => {
-	resetTrueOption(toProps);
-	resetFalseOption(toProps);
+	resetTrueLabel(toProps);
+	resetFalseLabel(toProps);
 	resetDefaultValue(toProps);
 };
 
diff --git a/frontend/src/components/PropsOptions/SelectOptions.vue b/frontend/src/components/PropsOptions/SelectOptions.vue
index e7442828c..518bcd6f0 100644
--- a/frontend/src/components/PropsOptions/SelectOptions.vue
+++ b/frontend/src/components/PropsOptions/SelectOptions.vue
@@ -5,7 +5,11 @@
 	</div>
 	<div class="flex items-center justify-between">
 		<InputLabel>Default Value</InputLabel>
-		<Input type="select" :options="optionsAvailable" @update:model-value="handleDefaultValueChange" placeholder="Select default value"></Input>
+		<Input
+			type="select"
+			:options="optionsAvailable"
+			@update:model-value="handleDefaultValueChange"
+			placeholder="Select default value"></Input>
 	</div>
 </template>
 
@@ -59,13 +63,19 @@ function useSelectOption(key: string, isString: boolean = false) {
 
 	async function handleStringChange(val: string) {
 		stringValue.value = val;
-		emit("update:options", {});
+		emit("update:options", {
+			options: options.value,
+			defaultValue: defaultValue.value,
+		});
 	}
 
 	async function handleArrayChange(val: any[]) {
 		arrayValue.value = val;
 		await nextTick();
-		emit("update:options", {});
+		emit("update:options", {
+			options: options.value,
+			defaultValue: defaultValue.value,
+		});
 	}
 
 	return isString
@@ -73,16 +83,8 @@ function useSelectOption(key: string, isString: boolean = false) {
 		: { value: arrayValue, handleChange: handleArrayChange, reset: resetArray };
 }
 
-const {
-	value: options,
-	handleChange: handleOptionsChange,
-	reset: resetOptions,
-} = useSelectOption("options") as StringArrayRef;
-const {
-	value: defaultValue,
-	handleChange: handleDefaultValueChange,
-	reset: resetDefaultValue,
-} = useSelectOption("defaultValue", true) as StringRef;
+const { value: options, handleChange: handleOptionsChange, reset: resetOptions } = useSelectOption("options") as StringArrayRef;
+const { value: defaultValue, handleChange: handleDefaultValueChange, reset: resetDefaultValue } = useSelectOption("defaultValue", true) as StringRef;
 
 const optionsAvailable = computed(() => {
 	return options.value.map((opt) => ({ label: opt, value: opt }));

From b99ffcd4252e21d61b8e512e04674e61a6f21ea0 Mon Sep 17 00:00:00 2001
From: Sydney Gomes <67939367+aerodeval@users.noreply.github.com>
Date: Sun, 16 Nov 2025 21:51:44 +0530
Subject: [PATCH 057/547] feat: Add Accessibility section  (#431)

Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 frontend/src/components/BlockProperties.vue   |   2 +
 .../AccessibilitySection.ts                   | 148 ++++++++++++++++++
 .../BlockPropertySections/OptionsSection.ts   |  72 +--------
 3 files changed, 151 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/components/BlockPropertySections/AccessibilitySection.ts

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 52ed0d380..d2f97b44c 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -32,6 +32,7 @@
 	</div>
 </template>
 <script setup lang="ts">
+import accessibilitySection from "@/components/BlockPropertySections/AccessibilitySection";
 import collectionOptionsSection from "@/components/BlockPropertySections/CollectionOptionsSection";
 import customAttributesSection from "@/components/BlockPropertySections/CustomAttributesSection";
 import dataKeySection from "@/components/BlockPropertySections/DataKeySection";
@@ -117,6 +118,7 @@ const sections = [
 	optionsSection,
 	positionSection,
 	dataKeySection,
+	accessibilitySection,
 	customAttributesSection,
 	rawStyleSection,
 ] as PropertySection[];
diff --git a/frontend/src/components/BlockPropertySections/AccessibilitySection.ts b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
new file mode 100644
index 000000000..0eef40f65
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
@@ -0,0 +1,148 @@
+import InlineInput from "@/components/Controls/InlineInput.vue";
+import blockController from "@/utils/blockController";
+import { computed } from "vue";
+
+const accessibilitySectionProperties = [
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Tag",
+				type: "select",
+				options: [
+					"aside",
+					"article",
+					"span",
+					"div",
+					"section",
+					"button",
+					"p",
+					"a",
+					"input",
+					"hr",
+					"form",
+					"textarea",
+					"nav",
+					"header",
+					"footer",
+					"label",
+					"select",
+					"option",
+					"blockquote",
+					"cite",
+					"canvas",
+				],
+				modelValue: blockController.getKeyValue("element"),
+			};
+		},
+		searchKeyWords:
+			"Tag, Element, TagName, Tag Name, ElementName, Element Name, header, footer, nav, input, form, textarea, button, p, a, div, span, section, hr, TagType, Tag Type, ElementType, Element Type",
+		events: {
+			"update:modelValue": (val: string) => blockController.setKeyValue("element", val),
+		},
+		condition: () => !blockController.isRoot(),
+	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Input Type",
+				type: "select",
+				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color"],
+				modelValue: blockController.getAttribute("type") || "text",
+			};
+		},
+		searchKeyWords:
+			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, tag",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("type", val),
+		},
+		condition: () => blockController.isInput(),
+	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Placeholder",
+				modelValue: blockController.getAttribute("placeholder"),
+			};
+		},
+		searchKeyWords:
+			"Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
+		},
+		condition: () => blockController.isInput(),
+	},
+	{
+		component: InlineInput,
+		getProps: () => ({
+			label: "Aria Label",
+			modelValue: blockController.getAttribute("aria-label"),
+		}),
+		searchKeyWords: "AriaLabel, Aria Label, Label, Accessibility Label, Aria",
+		events: {
+			"update:modelValue": (val: string) =>
+				val?.trim()
+					? blockController.setAttribute("aria-label", val.trim())
+					: blockController.removeAttribute("aria-label"),
+		},
+	},
+	{
+		component: InlineInput,
+		getProps: () => ({
+			label: "Role",
+			type: "select",
+			options: [
+				"button",
+				"alert",
+				"link",
+				"navigation",
+				"banner",
+				"main",
+				"contentinfo",
+				"heading",
+				"form",
+				"list",
+				"table",
+				"text",
+				"alertdialog",
+				"tab",
+				"tabpanel",
+				"presentation",
+				"region",
+			],
+			modelValue: blockController.getAttribute("role"),
+		}),
+		searchKeyWords: "Role, Accessibility, AccessibilityRole, Accessibility Role",
+		events: {
+			"update:modelValue": (val: string) => {
+				blockController.setAttribute("role", val);
+			},
+		},
+	},
+	{
+		component: InlineInput,
+		getProps: () => ({
+			label: "Tab Index",
+			type: "number",
+			min: -1,
+			modelValue: blockController.getAttribute("tabindex"),
+		}),
+		searchKeyWords: "TabIndex, Keyboard Focus, Focus Order, Accessibility",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("tabindex", val),
+		},
+	},
+];
+
+export default {
+	name: "Accessibility",
+	properties: accessibilitySectionProperties,
+	collapsed: computed(
+		() =>
+			!blockController.getAttribute("aria-label") &&
+			!blockController.getAttribute("role") &&
+			!blockController.getAttribute("tabindex"),
+	),
+};
diff --git a/frontend/src/components/BlockPropertySections/OptionsSection.ts b/frontend/src/components/BlockPropertySections/OptionsSection.ts
index cd82ca086..fe5720327 100644
--- a/frontend/src/components/BlockPropertySections/OptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/OptionsSection.ts
@@ -9,77 +9,7 @@ const setClasses = (val: string) => {
 };
 
 const optionsSectionProperties = [
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Tag",
-				type: "select",
-				options: [
-					"aside",
-					"article",
-					"span",
-					"div",
-					"section",
-					"button",
-					"p",
-					"a",
-					"input",
-					"hr",
-					"form",
-					"textarea",
-					"nav",
-					"header",
-					"footer",
-					"label",
-					"select",
-					"option",
-					"blockquote",
-					"cite",
-					"canvas",
-				],
-				modelValue: blockController.getKeyValue("element"),
-			};
-		},
-		searchKeyWords:
-			"Tag, Element, TagName, Tag Name, ElementName, Element Name, header, footer, nav, input, form, textarea, button, p, a, div, span, section, hr, TagType, Tag Type, ElementType, Element Type",
-		events: {
-			"update:modelValue": (val: string) => blockController.setKeyValue("element", val),
-		},
-		condition: () => !blockController.isRoot(),
-	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Input Type",
-				type: "select",
-				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color"],
-				modelValue: blockController.getAttribute("type") || "text",
-			};
-		},
-		searchKeyWords:
-			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, tag",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("type", val),
-		},
-		condition: () => blockController.isInput(),
-	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Placeholder",
-				modelValue: blockController.getAttribute("placeholder"),
-			};
-		},
-		searchKeyWords:
-			"Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
-		},
-		condition: () => blockController.isInput(),
-	},
+
 	{
 		component: InlineInput,
 		getProps: () => {

From 9154edd3781017a6b5f860617e3e467d2b9982cc Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 16 Nov 2025 22:48:53 +0530
Subject: [PATCH 058/547] feat: adde std props inputs in right panel

---
 frontend/components.d.ts                      |  1 +
 frontend/src/components/ArrayInput.vue        | 55 +++++++++++
 frontend/src/components/BlockProperties.vue   | 32 +++++++
 .../StandardPropsInputSection.ts              | 94 +++++++++++++++++++
 frontend/src/components/PropsEditor.vue       |  5 +-
 .../src/components/PropsPopoverContent.vue    | 11 +--
 frontend/vite.config.mjs                      |  2 +-
 7 files changed, 188 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/ArrayInput.vue
 create mode 100644 frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 168767c11..23af1d651 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
     AppsMenu: typeof import('./src/components/AppsMenu.vue')['default']
     ArrayEditor: typeof import('./src/components/ArrayEditor.vue')['default']
+    ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArrayOptions: typeof import('./src/components/PropsOptions/ArrayOptions.vue')['default']
     AuthenticatedUser: typeof import('./src/components/Icons/AuthenticatedUser.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
new file mode 100644
index 000000000..707f8a404
--- /dev/null
+++ b/frontend/src/components/ArrayInput.vue
@@ -0,0 +1,55 @@
+<template>
+	<Popover popoverClass="!mr-[15px]" placement="left">
+		<template #target="{ open }">
+			<div class="relative flex w-full gap-2">
+				<div class="flex w-[88px] shrink-0 items-center">
+					<InputLabel class="truncate">
+						{{ label }}
+					</InputLabel>
+				</div>
+				<div class="relative w-full">
+					<BuilderButton
+						class="w-full"
+						variant="subtle"
+						icon="edit-2"
+						@click.stop="open()" />
+				</div>
+			</div>
+		</template>
+		<template #body="{ open, close }">
+			<div
+				@click.stop
+				@mousedown.stop
+				class="flex max-h-60 w-60 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
+				<div class="text-sm text-ink-gray-8">
+                    Array Items:
+                </div>
+				<ArrayEditor
+					:arr
+					@update:arr="
+						(newArr) => {
+							arr = newArr;
+						}
+					" />
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ArrayEditor from "./ArrayEditor.vue";
+import InputLabel from "./Controls/InputLabel.vue";
+import { Popover } from "frappe-ui";
+import BuilderButton from "./Controls/BuilderButton.vue";
+
+const props = defineProps<{
+	label: string;
+	modelValue?: string[];
+}>();
+
+const emit = defineEmits({
+	"update:modelValue": (value: string[]) => true,
+});
+const arr = ref<string[]>([]);
+</script>
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index f6f4fa9c6..df799c9f9 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -13,6 +13,17 @@
 				" />
 		</div>
 		<div class="mt-1 flex flex-col gap-3">
+			<CollapsibleSection
+				:sectionName="standardPropsInputSection.name"
+				v-if="showSectionDynamic(standardPropsInputSection)"
+				:key="standardPropsInputSection.name"
+				:sectionCollapsed="toValue(standardPropsInputSection.collapsed) && !builderStore.propertyFilter">
+				<template v-for="property in getFilteredPropertiesDynamic(standardPropsInputSection)">
+					<component :is="property.component" v-bind="property.getProps()" v-on="property.events || {}">
+						{{ property.innerText || "" }}
+					</component>
+				</template>
+			</CollapsibleSection>
 			<CollapsibleSection
 				:sectionName="section.name"
 				v-for="section in sections"
@@ -50,6 +61,7 @@ import typographySection from "@/components/BlockPropertySections/TypographySect
 import videoOptionsSection from "@/components/BlockPropertySections/VideoOptionsSection";
 import blockScriptSection from "@/components/BlockPropertySections/ScriptEditor";
 import blockPropsSection from "@/components/BlockPropertySections/PropsSection";
+import standardPropsInputSection from "@/components/BlockPropertySections/StandardPropsInputSection";
 import useBuilderStore from "@/stores/builderStore";
 import blockController from "@/utils/blockController";
 import { toValue } from "@vueuse/core";
@@ -75,6 +87,10 @@ type PropertySection = {
 	collapsed?: boolean;
 };
 
+type PropertySectionDynamic = Omit<PropertySection, "properties"> & {
+	properties: () => BlockProperty[];
+};
+
 const searchInput = ref(null) as Ref<HTMLElement | null>;
 
 const showSection = (section: PropertySection) => {
@@ -104,6 +120,22 @@ const getFilteredProperties = (section: PropertySection) => {
 	});
 };
 
+const getFilteredPropertiesDynamic = (section: PropertySectionDynamic) => {
+	const staticSection: PropertySection = {
+		...section,
+		properties: section.properties(),
+	};
+	return getFilteredProperties(staticSection);
+};
+
+const showSectionDynamic = (section: PropertySectionDynamic) => {
+	const staticSection: PropertySection = {
+		...section,
+		properties: section.properties(),
+	};
+	return showSection(staticSection);
+};
+
 const sections = [
 	collectionOptionsSection,
 	linkSection,
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
new file mode 100644
index 000000000..1c2104739
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -0,0 +1,94 @@
+import PropsEditor from "../PropsEditor.vue";
+import blockController from "@/utils/blockController";
+import OptionToggle from "../Controls/OptionToggle.vue";
+import PropertyControl from "../Controls/PropertyControl.vue";
+import ArrayInput from "../ArrayInput.vue";
+
+const componentMap = {
+	string: PropertyControl,
+	number: PropertyControl,
+	boolean: PropertyControl,
+	select: PropertyControl,
+	array: ArrayInput,
+	object: PropsEditor,
+};
+
+const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
+	const type = propDetails.standardOptions?.type || "string";
+	let map = {};
+	switch (type) {
+		case "string":
+		case "number":
+			map = {
+				enableStates: false,
+			};
+			break;
+		case "boolean":
+			map = {
+				component: OptionToggle,
+				enableStates: false,
+				options: [
+					{ label: propDetails.standardOptions?.options?.trueLabel || "True", value: true },
+					{ label: propDetails.standardOptions?.options?.falseLabel || "False", value: false },
+				],
+			};
+			break;
+		case "select":
+			map = {
+				type: "select",
+				enableStates: false,
+				options:
+					propDetails.standardOptions?.options?.options?.map((item: any) => ({
+						label: item,
+						value: item,
+					})) || [],
+			};
+			break;
+	}
+	map = {
+		label: propName,
+		...map,
+	};
+	return map;
+};
+
+const getStandardProps = (allProps: BlockProps) => {
+	console.log("all props: ", allProps);
+	const standardProps: BlockProps = {};
+	for (const [propKey, propDetails] of Object.entries(allProps || {})) {
+		if (propDetails.isStandard) {
+			standardProps[propKey] = propDetails;
+		}
+	}
+	console.log("standard props: ", standardProps);
+	return standardProps;
+};
+
+const getStandardPropsInputSection = () => {
+	const standardProps = getStandardProps(blockController.getBlockProps());
+	console;
+	const sections = [];
+	for (const [propKey, propDetails] of Object.entries(standardProps)) {
+		console.log({ propKey, propDetails });
+		const component = componentMap[propDetails.standardOptions?.type || "string"] || PropertyControl;
+		const getProps = () => {
+			const props = getPropsMap(propKey, propDetails);
+			console.log("props for standard prop input: ", props);
+			return props;
+		};
+		sections.push({
+			component,
+			getProps,
+			searchKeyWords: propKey,
+		});
+	}
+	console.log("standard props sections: ", sections);
+	return sections;
+};
+
+export default {
+	name: "Standard Props",
+	properties: getStandardPropsInputSection,
+	collapsed: false,
+	condition: () => blockController.getFirstSelectedBlock().isExtendedFromComponent(),
+};
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 0bfd546e1..d85ccb7c5 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -38,8 +38,7 @@
 									<div class="flex flex-col gap-1">
 										<p class="text-sm font-medium text-ink-gray-8">
 											{{ key }}
-										</p>											<sup v-if="value.isStandard && value.standardOptions?.isRequired">*</sup>
-
+										</p>
 										<p v-if="value.isStandard" class="text-xs text-ink-gray-6">
 											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
 										</p>
@@ -172,7 +171,7 @@ const props = defineProps<{
 
 const sortedObj = computed(() => {
 	// Sort props: standard props at the front, then non-standard props
-	const entries = Object.entries(props.obj);
+	const entries = Object.entries(props.obj || {});
 	entries.sort((a, b) => {
 		const aIsStandard = a[1].isStandard ? 1 : 0;
 		const bIsStandard = b[1].isStandard ? 1 : 0;
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index e63208f4b..d9d75660b 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -114,15 +114,10 @@
 			</div>
 			<component
 				:is="componentMapping[standardPropOptions.type as keyof typeof componentMapping]"
-				:options="standardPropOptions"
+				:options="standardPropOptions.options || {}"
 				ref="optionsComponentRef"
-				@update:options="(option: any) => {
-					Object.assign(standardPropOptions, {
-						isRequired: standardPropOptions.isRequired,
-						type: standardPropOptions.type,
-						dependencies: standardPropOptions.dependencies,
-						...option,
-					});
+				@update:options="(options: any) => {
+					standardPropOptions.options = options;
 				}" />
 		</template>
 		<div v-if="isStandardBool" class="flex flex-col gap-2">
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index eae5cf151..e2af83a3f 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -35,6 +35,6 @@ export default defineConfig({
 		allowedHosts: true,
 	},
 	optimizeDeps: {
-		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client"],
+		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client", "highlight.js/lib/core"],
 	},
 });

From c37cbb7d6eeae878afe57f49df48e4d351304ff3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 17 Nov 2025 08:44:17 +0530
Subject: [PATCH 059/547] refactor: Move export/import code to a separate file

---
 .../doctype/builder_page/builder_page.py      | 57 +-----------
 builder/export_import_standard_page.py        | 92 +++++++++++++++++++
 builder/install.py                            |  3 +-
 builder/utils.py                              | 30 ------
 4 files changed, 95 insertions(+), 87 deletions(-)
 create mode 100644 builder/export_import_standard_page.py

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 4edb54b14..d5944c42a 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -9,7 +9,7 @@
 import frappe
 import frappe.utils
 from frappe.modules import scrub
-from frappe.modules.export_file import export_to_files, strip_default_fields
+from frappe.modules.export_file import export_to_files
 from frappe.utils import set_request
 from frappe.utils.caching import redis_cache
 from frappe.utils.jinja import render_template
@@ -21,6 +21,7 @@
 from frappe.website.website_generator import WebsiteGenerator
 from jinja2.exceptions import TemplateSyntaxError
 
+from builder.export_import_standard_page import export_page_as_standard
 from builder.hooks import builder_path
 from builder.html_preview_image import generate_preview
 from builder.utils import (
@@ -28,15 +29,9 @@
 	ColonRule,
 	camel_case_to_kebab_case,
 	clean_data,
-	copy_asset_file,
-	copy_assets_from_blocks,
 	copy_img_to_asset_folder,
-	create_export_directories,
 	escape_single_quotes,
 	execute_script,
-	export_client_scripts,
-	export_components,
-	extract_components_from_blocks,
 	get_builder_page_preview_file_paths,
 	get_template_assets_folder_path,
 	is_component_used,
@@ -852,54 +847,6 @@ def reset_block(block):
 	return block
 
 
-def export_page_as_standard(page_name, target_app, export_name=None):
-	"""Export a builder page as standard files to the specified app"""
-	page_doc = frappe.get_doc("Builder Page", page_name)
-	if not export_name:
-		export_name = page_doc.page_name or page_name
-
-	# Clean the export name to be filesystem-safe
-	export_name = frappe.scrub(export_name)
-
-	# Get app path
-	app_path = frappe.get_app_path(target_app)
-	if not app_path:
-		frappe.throw(f"App '{target_app}' not found")
-
-	# Create directories and get paths
-	paths = create_export_directories(app_path, export_name)
-
-	page_config = page_doc.as_dict(no_nulls=True)
-	page_config = strip_default_fields(page_doc, page_config)
-
-	config_file_path = os.path.join(paths["page_path"], f"{export_name}.json")
-
-	blocks = frappe.parse_json(page_config.get("draft_blocks") or page_config["blocks"])
-	if blocks:
-		copy_assets_from_blocks(blocks, paths["assets_path"])
-		page_config["blocks"] = blocks
-		page_config["draft_blocks"] = None
-
-	if page_doc.favicon:
-		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"])
-	if page_doc.meta_image:
-		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
-
-	page_config["project_folder"] = target_app
-	page_config = frappe.as_json(page_config, ensure_ascii=False)
-
-	with open(config_file_path, "w", encoding="utf-8") as f:
-		f.write(page_config)
-
-	# Export client scripts
-	export_client_scripts(page_doc, paths["client_scripts_path"])
-
-	# # Export components used in the page
-	if blocks:
-		components = extract_components_from_blocks(blocks)
-		export_components(components, paths["components_path"], paths["assets_path"])
-
-
 @frappe.whitelist()
 def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
 	"""Duplicate a standard page into a new builder page"""
diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
new file mode 100644
index 000000000..3dd981eae
--- /dev/null
+++ b/builder/export_import_standard_page.py
@@ -0,0 +1,92 @@
+import os
+
+import frappe
+from frappe.modules.export_file import strip_default_fields
+
+from builder.utils import (
+	copy_asset_file,
+	copy_assets_from_blocks,
+	create_export_directories,
+	export_client_scripts,
+	export_components,
+	extract_components_from_blocks,
+	make_records,
+)
+
+
+def export_page_as_standard(page_name, target_app, export_name=None):
+	"""Export a builder page as standard files to the specified app"""
+	page_doc = frappe.get_doc("Builder Page", page_name)
+	if not export_name:
+		export_name = page_doc.page_name or page_name
+
+	# Clean the export name to be filesystem-safe
+	export_name = frappe.scrub(export_name)
+
+	# Get app path
+	app_path = frappe.get_app_path(target_app)
+	if not app_path:
+		frappe.throw(f"App '{target_app}' not found")
+
+	# Create directories and get paths
+	paths = create_export_directories(app_path, export_name)
+
+	page_config = page_doc.as_dict(no_nulls=True)
+	page_config = strip_default_fields(page_doc, page_config)
+
+	config_file_path = os.path.join(paths["page_path"], f"{export_name}.json")
+
+	blocks = frappe.parse_json(page_config.get("draft_blocks") or page_config["blocks"])
+	if blocks:
+		copy_assets_from_blocks(blocks, paths["assets_path"])
+		page_config["blocks"] = blocks
+		page_config["draft_blocks"] = None
+
+	if page_doc.favicon:
+		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"])
+	if page_doc.meta_image:
+		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
+
+	page_config["project_folder"] = target_app
+	page_config = frappe.as_json(page_config, ensure_ascii=False)
+
+	with open(config_file_path, "w", encoding="utf-8") as f:
+		f.write(page_config)
+
+	# Export client scripts
+	export_client_scripts(page_doc, paths["client_scripts_path"])
+
+	# # Export components used in the page
+	if blocks:
+		components = extract_components_from_blocks(blocks)
+		export_components(components, paths["components_path"], paths["assets_path"])
+
+
+def sync_standard_builder_pages(app_name=None):
+	print("Syncing Standard Builder Pages")
+	# fetch pages from all apps under builder_files/pages
+	# import components first
+
+	apps_to_sync = [app_name] if app_name else frappe.get_installed_apps()
+
+	for app in apps_to_sync:
+		app_path = frappe.get_app_path(app)
+		pages_path = os.path.join(app_path, "builder_files", "pages")
+		components_path = os.path.join(app_path, "builder_files", "components")
+		scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
+		if os.path.exists(components_path):
+			print(f"Importing components from {components_path}")
+			make_records(components_path)
+		if os.path.exists(scripts_path):
+			print(f"Importing scripts from {scripts_path}")
+			make_records(scripts_path)
+		if os.path.exists(pages_path):
+			frappe.get_doc(
+				{
+					"doctype": "Builder Project Folder",
+					"folder_name": app,
+					"is_standard": 1,
+				}
+			).insert(ignore_if_duplicate=True)
+			print(f"Importing page from {pages_path}")
+			make_records(pages_path)
diff --git a/builder/install.py b/builder/install.py
index 726f6a933..19e58352e 100644
--- a/builder/install.py
+++ b/builder/install.py
@@ -1,12 +1,11 @@
-import frappe
 from frappe.core.api.file import create_new_folder
 
+from builder.export_import_standard_page import sync_standard_builder_pages
 from builder.utils import (
 	add_composite_index_to_web_page_view,
 	sync_block_templates,
 	sync_builder_variables,
 	sync_page_templates,
-	sync_standard_builder_pages,
 )
 
 
diff --git a/builder/utils.py b/builder/utils.py
index 0ba9ad8d1..9a35a8c3d 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -609,33 +609,3 @@ def remove_existing_path(path):
 			shutil.rmtree(path)
 		else:
 			os.remove(path)
-
-
-def sync_standard_builder_pages(app_name=None):
-	print("Syncing Standard Builder Pages")
-	# fetch pages from all apps under builder_files/pages
-	# import components first
-
-	apps_to_sync = [app_name] if app_name else frappe.get_installed_apps()
-
-	for app in apps_to_sync:
-		app_path = frappe.get_app_path(app)
-		pages_path = os.path.join(app_path, "builder_files", "pages")
-		components_path = os.path.join(app_path, "builder_files", "components")
-		scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
-		if os.path.exists(components_path):
-			print(f"Importing components from {components_path}")
-			make_records(components_path)
-		if os.path.exists(scripts_path):
-			print(f"Importing scripts from {scripts_path}")
-			make_records(scripts_path)
-		if os.path.exists(pages_path):
-			frappe.get_doc(
-				{
-					"doctype": "Builder Project Folder",
-					"folder_name": app,
-					"is_standard": 1,
-				}
-			).insert(ignore_if_duplicate=True)
-			print(f"Importing page from {pages_path}")
-			make_records(pages_path)

From afdd01446aef7281e1f562d34ee7fc7db2af537f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 17 Nov 2025 09:01:45 +0530
Subject: [PATCH 060/547] fix: Properly set developer_mode

---
 frontend/index.html  | 2 +-
 frontend/src/main.ts | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index d4849fa0d..167f4d76f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,7 +18,7 @@
 			window.builder_path = "{{ builder_path }}";
 			window.site_name = "{{ site_name }}";
 			window.is_fc_site = "{{ is_fc_site }}";
-			window.is_developer_mode = Boolean("{{ is_developer_mode }}");
+			window.is_developer_mode = "{{ is_developer_mode }}";
 		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 90a6219f3..93b0bc690 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -35,3 +35,10 @@ declare global {
 		is_developer_mode?: boolean;
 	}
 }
+
+if (window.is_developer_mode && typeof window.is_developer_mode === "string") {
+	window.is_developer_mode =
+		window.is_developer_mode === "1" ||
+		window.is_developer_mode === "True" ||
+		(window.is_developer_mode as string).startsWith("{{");
+}

From 4ec424a27905f2f436919b941b038bcf00815c01 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 17 Nov 2025 10:33:12 +0530
Subject: [PATCH 061/547] refactor: Simplify

---
 builder/export_import_standard_page.py | 14 ++------------
 builder/utils.py                       |  6 +-----
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index 3dd981eae..5c9546702 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -14,21 +14,15 @@
 )
 
 
-def export_page_as_standard(page_name, target_app, export_name=None):
+def export_page_as_standard(page_name, target_app):
 	"""Export a builder page as standard files to the specified app"""
 	page_doc = frappe.get_doc("Builder Page", page_name)
-	if not export_name:
-		export_name = page_doc.page_name or page_name
+	export_name = frappe.scrub(page_doc.page_name)
 
-	# Clean the export name to be filesystem-safe
-	export_name = frappe.scrub(export_name)
-
-	# Get app path
 	app_path = frappe.get_app_path(target_app)
 	if not app_path:
 		frappe.throw(f"App '{target_app}' not found")
 
-	# Create directories and get paths
 	paths = create_export_directories(app_path, export_name)
 
 	page_config = page_doc.as_dict(no_nulls=True)
@@ -53,10 +47,8 @@ def export_page_as_standard(page_name, target_app, export_name=None):
 	with open(config_file_path, "w", encoding="utf-8") as f:
 		f.write(page_config)
 
-	# Export client scripts
 	export_client_scripts(page_doc, paths["client_scripts_path"])
 
-	# # Export components used in the page
 	if blocks:
 		components = extract_components_from_blocks(blocks)
 		export_components(components, paths["components_path"], paths["assets_path"])
@@ -64,8 +56,6 @@ def export_page_as_standard(page_name, target_app, export_name=None):
 
 def sync_standard_builder_pages(app_name=None):
 	print("Syncing Standard Builder Pages")
-	# fetch pages from all apps under builder_files/pages
-	# import components first
 
 	apps_to_sync = [app_name] if app_name else frappe.get_installed_apps()
 
diff --git a/builder/utils.py b/builder/utils.py
index 9a35a8c3d..7b245b535 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -1,6 +1,4 @@
-import glob
 import inspect
-import json
 import os
 import re
 import shutil
@@ -10,9 +8,8 @@
 from urllib.parse import unquote, urlparse
 
 import frappe
-from frappe.modules.export_file import export_to_files
 from frappe.modules.import_file import import_file_by_path
-from frappe.utils import get_site_base_path, get_site_path, get_url
+from frappe.utils import get_url
 from frappe.utils.safe_exec import (
 	SERVER_SCRIPT_FILE_PREFIX,
 	FrappeTransformer,
@@ -570,7 +567,6 @@ def export_components(components, components_path, assets_path):
 
 
 def create_export_directories(app_path, export_name):
-	"""Create necessary directories for export and return paths"""
 	paths = get_export_paths(app_path, export_name)
 	setup_assets_symlink(app_path, paths["assets_path"])
 	for path in paths.values():

From 6ac5320446f325e3e556dbe55b4b261f0249764c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 19 Nov 2025 10:36:34 +0530
Subject: [PATCH 062/547] fix: changing std. props now reflects on json

---
 .../StandardPropsInputSection.ts                     | 11 ++++++++++-
 frontend/src/utils/blockController.ts                | 12 ++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 1c2104739..553716ea8 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -47,6 +47,13 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 	}
 	map = {
 		label: propName,
+		setModelValue: (val: any) => {
+			blockController.setBlockProp(propName, val);
+		},
+		getModelValue: () => {
+			const value = blockController.getFirstSelectedBlock().props?.[propName]?.value;
+			return value;
+		},
 		...map,
 	};
 	return map;
@@ -90,5 +97,7 @@ export default {
 	name: "Standard Props",
 	properties: getStandardPropsInputSection,
 	collapsed: false,
-	condition: () => blockController.getFirstSelectedBlock().isExtendedFromComponent(),
+	condition: () =>
+		Boolean(blockController.getFirstSelectedBlock().extendedFromComponent) &&
+		Object.keys(getStandardProps(blockController.getBlockProps())).length > 0,
 };
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index b712f0608..aff565328 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -310,6 +310,18 @@ const blockController = {
 	getBlockProps: () => {
 		return blockController.getSelectedBlocks()[0]?.getBlockProps();
 	},
+	setBlockProp: (key: string, value: string) => {
+		const allProps = blockController.getBlockProps();
+		if(!allProps) return;
+		const updatedProps = {
+			...allProps,
+			[key]: {
+				...allProps[key],
+				value: value,
+			},
+		};
+		blockController.setBlockProps(updatedProps);
+	},
 	setBlockProps: (props: BlockProps) => {
 		const block = blockController.getFirstSelectedBlock();
 		if (!block.props) {

From fec31f32ec7ea14849c207b04eedefd9c10bd93f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 19 Nov 2025 11:27:09 +0530
Subject: [PATCH 063/547] feat: added prop get and set logic to std. array
 input

---
 frontend/src/components/ArrayInput.vue | 35 ++++++++++++++++++++------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
index 707f8a404..b45f5238b 100644
--- a/frontend/src/components/ArrayInput.vue
+++ b/frontend/src/components/ArrayInput.vue
@@ -26,11 +26,7 @@
                 </div>
 				<ArrayEditor
 					:arr
-					@update:arr="
-						(newArr) => {
-							arr = newArr;
-						}
-					" />
+					@update:arr="updateModelValue" />
 			</div>
 		</template>
 	</Popover>
@@ -45,11 +41,34 @@ import BuilderButton from "./Controls/BuilderButton.vue";
 
 const props = defineProps<{
 	label: string;
-	modelValue?: string[];
+	getModelValue: () => string;
+	setModelValue: (value: string) => void;
 }>();
 
 const emit = defineEmits({
-	"update:modelValue": (value: string[]) => true,
+	"update:modelValue": (value: string) => true,
 });
-const arr = ref<string[]>([]);
+
+const getPassedArray = () => {
+	try {
+		const value = props.getModelValue();
+		const parsed = JSON.parse(value);
+		if (Array.isArray(parsed)) {
+			return parsed;
+		}
+		return [];
+	} catch {
+		return [];
+	}
+};
+
+const arr = ref<any[]>(getPassedArray());
+
+const updateModelValue = (value: string[]) => {
+	arr.value = value;
+	props.setModelValue(JSON.stringify(value));
+	emit("update:modelValue", JSON.stringify(value));
+};
+
+
 </script>

From de6f3049d6460bf395048ab74424e4791347a0ed Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Nov 2025 09:03:25 +0530
Subject: [PATCH 064/547] fix: Enable proxy for "desk"

To make the dev environment compatible with
V16 (https://github.com/frappe/frappe/releases/tag/v16.0.0-beta.1)
---
 frontend/vite.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index eae5cf151..5beecd95f 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -12,7 +12,7 @@ export default defineConfig({
 		frappeui({
 			frappeProxy: {
 				port: 8080,
-				source: "^/(app|login|api|assets|files|pages|builder_assets)",
+				source: "^/(app|desk|login|api|assets|files|pages|builder_assets)",
 			},
 			lucideIcons: true,
 		}),

From 709fce9dd150462386fc2f913c8025baac47112a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Nov 2025 11:09:26 +0530
Subject: [PATCH 065/547] refactor: Use reka-UI components to fix issues in
 Autocomplete

---
 .../src/components/Controls/Autocomplete.vue  | 387 ++++++++++--------
 .../src/components/Controls/ColorInput.vue    |   2 +-
 2 files changed, 214 insertions(+), 175 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index fcb470855..ad6fb0d51 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -1,235 +1,274 @@
 <template>
-	<div class="relative">
-		<Combobox
-			:modelValue="value"
-			@update:modelValue="
-				(val) => {
-					emit('update:modelValue', val);
-				}
-			"
-			v-slot="{ open }"
-			:nullable="nullable"
-			:multiple="multiple">
-			<ComboboxButton v-show="false" ref="comboboxButton" as="div"></ComboboxButton>
+	<ComboboxRoot
+		v-model="selectedValue"
+		v-model:open="isOpen"
+		:multiple="multiple"
+		:by="compareValues"
+		open-on-click
+		open-on-focus
+		:reset-search-term-on-blur="false">
+		<div class="relative">
 			<div
-				class="form-input flex h-7 w-full items-center justify-between gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-ink-gray-8 transition-colors hover:border-outline-gray-2 hover:bg-surface-gray-1">
-				<!-- {{ displayValue }} -->
-				<template v-if="$slots.prefix">
-					<div class="absolute left-2 top-1.5 z-10 flex items-center">
-						<slot name="prefix" />
-					</div>
-				</template>
+				class="group form-input flex h-7 flex-1 items-center gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-ink-gray-8 transition-colors focus-within:ring-2 focus-within:ring-outline-gray-3 hover:border-outline-gray-2">
+				<div v-if="$slots.prefix" class="flex items-center pl-2">
+					<slot name="prefix" />
+				</div>
 				<ComboboxInput
+					:key="inputKey"
+					v-model="searchQuery"
 					autocomplete="off"
-					@focus="
-						() => {
-							if (!open.value) {
-								comboboxButton?.$el.click();
-							}
-							emit('focus');
-							return false;
-						}
-					"
-					@blur="emit('blur')"
-					@change="query = $event.target.value"
-					:displayValue="getDisplayValue"
-					:placeholder="!modelValue ? placeholder : null"
-					:class="[
-						'h-full w-full rounded border-none bg-transparent pr-5.5 text-base focus:ring-2 focus:ring-outline-gray-3',
-						$slots.prefix ? 'pl-1' : 'pl-2',
-					]"></ComboboxInput>
+					@focus="handleFocus"
+					@blur="handleBlur"
+					@keydown="handleKeydown"
+					:display-value="getDisplayValue"
+					:placeholder="placeholder"
+					class="h-full w-full flex-1 border-none bg-transparent px-0 text-base placeholder:text-ink-gray-4 focus:outline-none focus:ring-0"
+					:class="{
+						'pl-2': !$slots.prefix,
+						'pr-2': !hasValue,
+					}" />
+				<Button v-if="hasValue" variant="ghost" @click.stop="clearSelection">
+					<CrossIcon class="h-3 w-3" />
+				</Button>
 			</div>
-			<ComboboxOptions
-				class="absolute right-0 z-50 w-full overflow-y-auto rounded-lg border border-outline-gray-2 bg-surface-white p-0 shadow-2xl"
-				v-show="filteredOptions.length || (showInputAsOption && query)">
-				<div class="w-full list-none px-1.5 py-1.5">
-					<ComboboxOption
-						v-if="query && !showInputAsOption"
-						:value="query"
-						class="flex items-center"></ComboboxOption>
-					<ComboboxOption
-						v-for="option in filteredOptions"
-						v-slot="{ active, selected }"
-						:key="option.value"
-						:value="option"
-						:disabled="String(option.value).startsWith('_separator')"
-						:title="option.label"
-						class="flex items-center">
-						<span
-							v-if="String(option.value).startsWith('_separator')"
-							class="flex w-full items-center gap-2 px-2.5 pb-2 pt-3 text-xs font-medium !text-ink-gray-5">
+
+			<ComboboxContent
+				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
+				<div v-if="!filteredOptions.length" class="px-3 py-2 text-center text-sm text-ink-gray-5">
+					{{ searchQuery ? "No results found" : "No options available" }}
+				</div>
+				<div v-else class="overflow-y-auto p-1">
+					<template v-for="(option, index) in filteredOptions" :key="getOptionKey(option, index)">
+						<ComboboxSeparator v-if="isSeparatorLine(option)" class="bg-outline-gray-2 mx-2 my-1 h-px" />
+						<ComboboxLabel
+							v-else-if="isSeparatorLabel(option)"
+							class="px-2 py-1 text-xs font-semibold text-ink-gray-5">
 							{{ option.label }}
-						</span>
-						<li
+						</ComboboxLabel>
+						<ComboboxItem
 							v-else
-							class="group flex w-full select-none items-center gap-2 truncate rounded px-2.5 py-1.5 text-xs"
-							:class="{
-								'bg-gray-100': active,
-								'bg-gray-300': selected,
-							}">
-							<component v-if="option.prefix" :is="option.prefix" />
-							<span class="truncate">
-								{{ option.label }}
-							</span>
+							:value="option"
+							:disabled="option.disabled"
+							:text-value="option.label"
+							class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
+							<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
+							<span class="w-full flex-1 truncate">{{ option.label }}</span>
 							<component
-								class="ml-auto"
 								v-if="option.suffix"
 								:is="option.suffix"
+								class="h-4 min-w-4 flex-shrink-0 opacity-60 group-hover:opacity-100"
 								@mousedown.stop.prevent
 								@click.stop.prevent />
-						</li>
-					</ComboboxOption>
+						</ComboboxItem>
+					</template>
 				</div>
-				<div
-					class="sticky bottom-0 rounded-b-sm border-t border-outline-gray-2 bg-surface-gray-1"
-					v-if="actionButton">
-					<component
-						:is="actionButton.component"
-						v-if="actionButton?.component"
-						@change="updateOptions"></component>
+				<div v-if="actionButton" class="border-t border-outline-gray-2 bg-surface-gray-1">
+					<component v-if="actionButton.component" :is="actionButton.component" @change="refreshOptions" />
 					<BuilderButton
 						v-else
-						:iconLeft="actionButton.icon"
-						class="w-full rounded-none text-xs text-ink-gray-8"
+						:icon-left="actionButton.icon"
+						variant="ghost"
+						class="w-full justify-start rounded-none text-sm"
 						@click="actionButton.handler">
 						{{ actionButton.label }}
 					</BuilderButton>
 				</div>
-			</ComboboxOptions>
-		</Combobox>
-		<div
-			class="absolute right-[1px] top-[3px] cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
-			@click="clearValue"
-			v-show="modelValue">
-			<CrossIcon />
+			</ComboboxContent>
 		</div>
-	</div>
+	</ComboboxRoot>
 </template>
 
 <script setup lang="ts">
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
 import CrossIcon from "@/components/Icons/Cross.vue";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/vue";
-import { ComputedRef, computed, ref, watch } from "vue";
+import {
+	ComboboxContent,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxLabel,
+	ComboboxRoot,
+	ComboboxSeparator,
+} from "reka-ui";
+import type { Component } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
-type Option = {
+interface Option {
 	label: string;
 	value: string;
-	prefix?: any;
-	suffix?: any;
-};
-
-const emit = defineEmits(["update:modelValue", "focus", "blur"]);
+	prefix?: Component;
+	suffix?: Component;
+	disabled?: boolean;
+}
 
-type Action = {
-	label: String;
+interface ActionButton {
+	label: string;
 	handler: () => void;
 	icon: string;
-	component?: any;
-};
+	component?: Component;
+}
 
-const props = withDefaults(
-	defineProps<{
-		options?: Option[];
-		getOptions?: (filterString: string) => Promise<Option[]>;
-		modelValue?: any;
-		placeholder?: string;
-		showInputAsOption?: boolean;
-		actionButton?: Action;
-	}>(),
-	{
-		options: () => [],
-		placeholder: "Search",
-		showInputAsOption: false,
-	},
-);
+interface Props {
+	options?: Option[];
+	getOptions?: (query: string) => Promise<Option[]>;
+	modelValue?: string | string[] | null;
+	placeholder?: string;
+	showInputAsOption?: boolean;
+	actionButton?: ActionButton;
+}
 
-const query = ref("");
-const multiple = computed(() => Array.isArray(props.modelValue));
-const nullable = computed(() => !multiple.value);
+interface Emits {
+	"update:modelValue": [value: string | string[] | null];
+	focus: [];
+	blur: [];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	options: () => [],
+	placeholder: "Search",
+	showInputAsOption: false,
+});
+
+const emit = defineEmits<Emits>();
+
+const searchQuery = ref("");
 const asyncOptions = ref<Option[]>([]);
-const comboboxButton = ref<HTMLElement | null>(null);
+const isLoading = ref(false);
+const isOpen = ref(false);
+const userCleared = ref(false);
+const preventSelection = ref(false);
+const inputKey = ref(0);
 
-const filteredOptions = computed(() => {
-	const sourceOptions = props.getOptions ? asyncOptions.value : props.options;
-	let options: Option[] = [];
-
-	if (!query.value) {
-		options = sourceOptions;
-	} else {
-		options = sourceOptions.filter((option) => {
-			const label = option.label.toLowerCase();
-			const value = option.value.toLowerCase();
-			const queryLower = query.value.toLowerCase();
-			return label.includes(queryLower) || value.includes(queryLower);
-		});
+const multiple = computed(() => Array.isArray(props.modelValue));
+const hasValue = computed(() => {
+	if (multiple.value) {
+		return Array.isArray(props.modelValue) && props.modelValue.length > 0;
 	}
+	return props.modelValue != null && props.modelValue !== "";
+});
 
-	if (props.showInputAsOption && query.value) {
-		const existingOption = options.find((option) => option.value === query.value);
-		if (!existingOption) {
-			options.unshift({ label: query.value, value: query.value });
-		}
+const allOptions = computed(() => {
+	return props.getOptions ? asyncOptions.value : props.options;
+});
+
+const filteredOptions = computed(() => {
+	let options = allOptions.value;
+
+	if (
+		props.showInputAsOption &&
+		searchQuery.value &&
+		!options.some((opt) => opt.value === searchQuery.value)
+	) {
+		options = [{ label: searchQuery.value, value: searchQuery.value }, ...options];
 	}
 
 	return options;
 });
 
-const getDisplayValue = (option: Option | Option[]) => {
-	if (Array.isArray(option)) {
-		return option.map((o) => o.label).join(", ");
-	} else if (option) {
-		return option.label || option.value || "";
-	} else {
-		return "";
+const selectedValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit("update:modelValue", value ?? null);
+	},
+});
+
+const isSeparatorLine = (option: Option) => option.value.startsWith("_separator_line");
+const isSeparatorLabel = (option: Option) =>
+	option.value.startsWith("_separator") && !isSeparatorLine(option);
+const getOptionKey = (option: Option, index: number) => `${option.value}-${index}`;
+
+const compareValues = (a: any, b: any): boolean => {
+	if (typeof a === "object" && typeof b === "object") {
+		return a?.value === b?.value;
 	}
+	return a === b;
 };
 
-const value = computed(() => {
-	if (!props.modelValue) {
-		return null;
+const getDisplayValue = (item: any): string => {
+	const getValue = (val: any) => {
+		if (typeof val === "object") return val.label || val.value || "";
+		const found = allOptions.value.find((opt) => opt.value === val);
+		return found?.label || val || "";
+	};
+	return Array.isArray(item) ? item.map(getValue).join(", ") : getValue(item);
+};
+
+const resetFlags = () => {
+	userCleared.value = false;
+	preventSelection.value = false;
+};
+
+const handleFocus = () => {
+	resetFlags();
+	emit("focus");
+};
+const handleBlur = () => {
+	if (userCleared.value && !searchQuery.value) {
+		preventSelection.value = true;
+		isOpen.value = false;
+	}
+	emit("blur");
+};
+const handleKeydown = (event: KeyboardEvent) => {
+	if (event.key !== "Tab" && event.key !== "Escape") resetFlags();
+	if (event.key === "Escape") {
+		isOpen.value = false;
+		event.preventDefault();
 	}
+};
 
-	// Support for custom input values
-	if (props.showInputAsOption && typeof props.modelValue === "string") {
-		const existingOption = filteredOptions.value.find((option) => option.value === props.modelValue);
-		if (!existingOption) {
-			return {
-				label: props.modelValue,
-				value: props.modelValue,
-			};
-		}
-		return existingOption;
+const clearSelection = () => {
+	userCleared.value = true;
+	preventSelection.value = true;
+	selectedValue.value = multiple.value ? [] : null;
+	searchQuery.value = "";
+	nextTick(() => {
+		isOpen.value = false;
+	});
+};
+
+const refreshOptions = async (query = "") => {
+	if (!props.getOptions) return;
+
+	isLoading.value = true;
+	try {
+		const options = await props.getOptions(query);
+		asyncOptions.value = options;
+	} catch (error) {
+		console.error("Failed to load options:", error);
+	} finally {
+		isLoading.value = false;
 	}
+};
 
-	return (
-		filteredOptions.value.find((option) => option.value === props.modelValue) || {
-			label: props.modelValue,
-			value: props.modelValue,
-		}
-	);
-}) as ComputedRef<Option>;
+watch(searchQuery, (newQuery) => props.getOptions && refreshOptions(newQuery), { immediate: true });
 
-watch(() => query.value, updateOptions, { immediate: true });
 watch(
-	() => props.options,
+	allOptions,
 	() => {
-		if (!props.getOptions) {
-			asyncOptions.value = props.options;
+		if (hasValue.value && !isOpen.value) {
+			nextTick(() => {
+				inputKey.value++;
+			});
 		}
 	},
-	{ immediate: true },
+	{ deep: true },
 );
-
-async function updateOptions() {
-	if (props.getOptions) {
-		const options = await props.getOptions(query.value);
-		asyncOptions.value = options;
+watch(selectedValue, (newValue) => {
+	if (preventSelection.value && newValue != null) {
+		selectedValue.value = multiple.value ? [] : null;
+		resetFlags();
 	}
+});
+watch(isOpen, (newOpen) => !newOpen && setTimeout(() => !isOpen.value && resetFlags(), 100));
+
+if (props.getOptions) {
+	nextTick(() => refreshOptions());
 }
 
-const clearValue = () => emit("update:modelValue", null);
 defineExpose({
-	updateOptions,
+	refreshOptions,
+	clearSelection,
 });
 </script>
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 993a48f4d..bc5c6b701 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -19,7 +19,7 @@
 							<Autocomplete
 								class="[&>div>input]:pl-8"
 								:class="{
-									'[&>div>input]:font-mono [&>div>input]:text-xs [&>div>input]:text-ink-violet-1':
+									'[&>div>div>input]:text-xs [&>div>div>input]:text-ink-violet-1 [&>div>input]:font-mono':
 										isCssVariable,
 								}"
 								v-bind="events"

From a70c4b623747f978d1bd0baac56356c902c08ad5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Nov 2025 13:07:59 +0530
Subject: [PATCH 066/547] fix: Do not auto select option on blur

closes: https://github.com/frappe/builder/issues/433
---
 .../src/components/Controls/Autocomplete.vue   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index ad6fb0d51..a5de973ff 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -19,9 +19,10 @@
 					autocomplete="off"
 					@focus="handleFocus"
 					@blur="handleBlur"
+					@change="handleBlur"
 					@keydown="handleKeydown"
 					:display-value="getDisplayValue"
-					:placeholder="placeholder"
+					:placeholder="isFocused ? '' : placeholder"
 					class="h-full w-full flex-1 border-none bg-transparent px-0 text-base placeholder:text-ink-gray-4 focus:outline-none focus:ring-0"
 					:class="{
 						'pl-2': !$slots.prefix,
@@ -46,7 +47,7 @@
 							{{ option.label }}
 						</ComboboxLabel>
 						<ComboboxItem
-							v-else
+							v-else-if="option.value !== '_no_highlight_'"
 							:value="option"
 							:disabled="option.disabled"
 							:text-value="option.label"
@@ -137,6 +138,7 @@ const isOpen = ref(false);
 const userCleared = ref(false);
 const preventSelection = ref(false);
 const inputKey = ref(0);
+const isFocused = ref(false);
 
 const multiple = computed(() => Array.isArray(props.modelValue));
 const hasValue = computed(() => {
@@ -161,6 +163,10 @@ const filteredOptions = computed(() => {
 		options = [{ label: searchQuery.value, value: searchQuery.value }, ...options];
 	}
 
+	if (!searchQuery.value && options.length > 0) {
+		options = [{ label: "", value: "_no_highlight_", disabled: true }, ...options];
+	}
+
 	return options;
 });
 
@@ -201,13 +207,21 @@ const resetFlags = () => {
 
 const handleFocus = () => {
 	resetFlags();
+	isFocused.value = true;
+	refreshOptions();
 	emit("focus");
 };
 const handleBlur = () => {
+	isFocused.value = false;
 	if (userCleared.value && !searchQuery.value) {
 		preventSelection.value = true;
 		isOpen.value = false;
 	}
+	// If user has manually cleared the input (empty search query) and there's a current value,
+	// clear the selection to set it to empty
+	if (!searchQuery.value && hasValue.value) {
+		selectedValue.value = multiple.value ? [] : null;
+	}
 	emit("blur");
 };
 const handleKeydown = (event: KeyboardEvent) => {

From b83eaf2c91e9f49f8f4fac465308e271a0190190 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Nov 2025 13:54:03 +0530
Subject: [PATCH 067/547] fix: Increase limit on fetching client script options

---
 frontend/src/components/PageClientScriptManager.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 226f22f75..d54038aba 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -167,8 +167,8 @@ const attachedScriptResource = createListResource({
 
 const clientScriptResource = createListResource({
 	doctype: "Builder Client Script",
-	fields: ["script", "script_type", "name"],
-	pageLength: 500,
+	fields: ["script_type", "name"],
+	pageLength: 10000,
 	auto: true,
 });
 

From a640b06d713ca14730fd032eee59121b801389b9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Nov 2025 13:54:48 +0530
Subject: [PATCH 068/547] perf: Avoid redundant calls to fetch code completions

---
 .../components/Controls/CodeMirror/CodeMirrorEditor.vue  | 9 ++-------
 frontend/src/data/codeCompletions.ts                     | 9 +++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/data/codeCompletions.ts

diff --git a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
index 7ac1e5621..64db88936 100644
--- a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
+++ b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
@@ -7,13 +7,13 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 
+import codeCompletions from "@/data/codeCompletions";
 import { createStartingState } from "@/utils/createCodeMirrorState";
 import { openSearchPanel } from "@codemirror/search";
 import { Compartment } from "@codemirror/state";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { useDark } from "@vueuse/core";
 import { EditorView } from "codemirror";
-import { createResource } from "frappe-ui";
 import { tomorrow } from "thememirror";
 
 const props = defineProps<{
@@ -39,12 +39,7 @@ const isDark = useDark({
 });
 
 const getPythonCompletions = async () => {
-	let completionsResource = createResource({
-		url: "builder.api.get_codemirror_completions",
-		method: "GET",
-	});
-	await completionsResource.fetch();
-	return completionsResource.data || {};
+	return codeCompletions.data || {};
 };
 
 const getEditorValue = () => {
diff --git a/frontend/src/data/codeCompletions.ts b/frontend/src/data/codeCompletions.ts
new file mode 100644
index 000000000..cfa258fff
--- /dev/null
+++ b/frontend/src/data/codeCompletions.ts
@@ -0,0 +1,9 @@
+import { createResource } from "frappe-ui";
+
+let codeCompletions = createResource({
+	url: "builder.api.get_codemirror_completions",
+	method: "GET",
+	auto: true,
+});
+
+export default codeCompletions;

From cab741fc73d4e89b9bf19bb7953131987f250b05 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 20 Nov 2025 22:57:06 +0530
Subject: [PATCH 069/547] feat: props can now be used as dynamic values

---
 .../doctype/builder_page/builder_page.py      | 86 +++++++++++++------
 frontend/src/block.ts                         |  4 +-
 frontend/src/builder.d.ts                     |  1 +
 frontend/src/components/BlockHTML.vue         | 29 +++++--
 frontend/src/components/BuilderBlock.vue      | 24 ++++--
 .../Controls/DynamicValueHandler.vue          | 75 +++++++++++-----
 .../components/Controls/PropertyControl.vue   | 22 +++--
 frontend/src/components/PropsEditor.vue       | 13 ++-
 frontend/src/components/TextBlock.vue         | 22 ++++-
 frontend/src/utils/helpers.ts                 | 40 +++++++++
 10 files changed, 239 insertions(+), 77 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 2d5785088..5bd373e8b 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -2,6 +2,7 @@
 # For license information, please see license.txt
 
 import copy
+import re
 import os
 import shutil
 
@@ -494,6 +495,35 @@ def get_html(blocks, soup):
 
 		def get_tag(block, soup, data_key=None):
 			block = extend_with_component(block)
+			# not real objs, string templates to be used in jinja
+			props_obj_jinja = "{}" # to be passed as the prop obj in jinja template for dynamic values
+			props_obj_js = "{}" # to be passed as the prop obj in block script
+			props_with_successors = []
+   
+			if block.get("props"):
+       
+				# collect all key:value pairs
+				props_js = []
+				props_jinja = []
+    
+				for key, value in block.get("props", {}).items():
+					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
+					props_js.append(f"'{key}': '{interpreted_value}'")
+					if has_jinja_variable(interpreted_value):
+						# dynamic values beng used inside {% with props = ... %} should not have braces {{ ... }} or be literals '...'
+						stripped_jinja_braces = re.sub(r'{{\s*(.*?)\s*}}', r'\1', interpreted_value)
+						props_jinja.append(f"'{key}': {stripped_jinja_braces}")
+					else:
+						props_jinja.append(f"'{key}': '{interpreted_value}'")
+					
+     
+					if value.get('usedByCount', 0) > 0:
+						props_with_successors.append(key)
+						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
+
+				props_obj_js = f"{{ {', '.join(props_js)} }}"
+				props_obj_jinja = f"{{ {', '.join(props_jinja)} }}" if props_jinja else "{}"
+
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
 
@@ -568,20 +598,6 @@ def get_tag(block, soup, data_key=None):
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
 
-			props_obj = {}
-			props_with_successors = []
-			if block.get("props"):
-				props = []
-				for key, value in block.get("props", {}).items():
-					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
-					props.append(f"{key}: {interpreted_value}")
-     
-					if value.get('usedByCount', 0) > 0:
-						props_with_successors.append(key)
-						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
-
-				props_obj = f"{{ {', '.join(props)} }}"
-
 			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
 				_key = block.get("dataKey").get("key")
 				if data_key:
@@ -589,7 +605,10 @@ def get_tag(block, soup, data_key=None):
 
 				item_key = f"key_{_key.replace('.', '__')}"
 				tag.append(f"{{% for {item_key} in {_key} %}}")
-				tag.append(get_tag(block.get("children")[0], soup, item_key))
+				child_tag, child_tag_props = get_tag(block.get("children")[0], soup, item_key)
+				tag.append(f"{{% with props = {child_tag_props} %}}")
+				tag.append(child_tag)
+				tag.append("{% endwith %}")
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
@@ -598,7 +617,10 @@ def get_tag(block, soup, data_key=None):
 						if data_key:
 							key = f"{data_key}.{key}"
 						tag.append(f"{{% if {key} %}}")
-					tag.append(get_tag(child, soup, data_key=data_key))
+					child_tag, child_tag_props = get_tag(child, soup, data_key=data_key)
+					tag.append(f"{{% with props = {child_tag_props} %}}")
+					tag.append(child_tag)
+					tag.append("{% endwith %}")
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
 
@@ -610,7 +632,7 @@ def get_tag(block, soup, data_key=None):
 
 			if block.get("blockScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
-				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj or '{}'});"
+				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj_js or '{}'});"
 				print("Script content: ", script_content)
 				all_block_scripts.append(script_content)
 				tag.attrs["data-block-id"] = block_unique_id
@@ -620,10 +642,11 @@ def get_tag(block, soup, data_key=None):
 					script_tag.string = script
 					tag.append(script_tag)
 
-			return tag
+			return tag, props_obj_jinja
 
 		for block in blocks:
-			html += str(get_tag(block, soup))
+			tag, props = get_tag(block, soup)
+			html += f"{{% with props = {props} %}}{str(tag)}{{% endwith %}}"
 
 		return html, str(style_tag), font_map
 
@@ -769,6 +792,9 @@ def extend_block(block, overridden_block):
 	return block
 
 
+def has_jinja_variable(s):
+    return re.search(r'{{.*?}}', s) is not None
+
 def set_dynamic_content_placeholder(block, data_key=False):
 	block_data_key = block.get("dataKey", {}) or {}
 	dynamic_values = [block_data_key] if block_data_key else []
@@ -778,14 +804,18 @@ def set_dynamic_content_placeholder(block, data_key=False):
 			# if dynamic_value_doc is a string, convert it to dict
 			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
 		if dynamic_value_doc and dynamic_value_doc.get("key"):
-			key = f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
-			if data_key:
-				# convert a.b to (a or {}).get('b', {})
-				# to avoid undefined error in jinja
-				keys = key.split(".")
-				key = f"({keys[0]} or {{}})"
-				for k in keys[1:]:
-					key = f"{key}.get('{k}', {{}})"
+			key = ""
+			if(dynamic_value_doc.get("comesFrom") == "props"):
+				key = f"props['{dynamic_value_doc.get('key')}']"
+			else:
+				key = f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
+				if data_key:
+					# convert a.b to (a or {}).get('b', {})
+					# to avoid undefined error in jinja
+					keys = key.split(".")
+					key = f"({keys[0]} or {{}})"
+					for k in keys[1:]:
+						key = f"{key}.get('{k}', {{}})"
 
 			_property = dynamic_value_doc.get("property")
 			_type = dynamic_value_doc.get("type")
@@ -846,7 +876,7 @@ def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
 	if prop_value == "" or prop_value is None:
 		return "undefined"
 	if prop_type == "dynamic":
-		return f"'{{{{ {data_key}.{prop_value} }}}}'" if data_key else f"'{{{{ {prop_value} }}}}'"
+		return f"{{{{ {data_key}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
 	elif prop_type == "static":
 		return f"{prop_value}"
 	elif prop_type == "inherited":
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 85ffa88a3..b619c7c06 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -853,12 +853,13 @@ class Block implements BlockOptions {
 		property: BlockDataKey["property"],
 		type: BlockDataKeyType,
 		key: BlockDataKey["key"] | null = null,
+		comesFrom: BlockDataKey["comesFrom"] = "dataScript",
 	) {
 		const existingKey = this.getDynamicKey(property, type);
 		if (existingKey) {
 			this.dynamicValues = this.dynamicValues.map((v) => {
 				if (v.property === property && v.type === type) {
-					return { ...v, key: key || "" };
+					return { ...v, key: key || "", comesFrom };
 				}
 				return v;
 			});
@@ -867,6 +868,7 @@ class Block implements BlockOptions {
 				property,
 				type,
 				key: key || "",
+				comesFrom,
 			});
 		}
 	}
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 60844802b..534ac5168 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -125,6 +125,7 @@ declare type FileDoc = {
 declare interface BlockDataKey {
 	key?: string;
 	type?: BlockDataKeyType;
+	comesFrom?: "props" | "dataScript";
 	property?: string;
 }
 
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 2bd2e259d..b86da28d8 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -3,7 +3,7 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
-import { getDataForKey } from "@/utils/helpers";
+import { getDataForKey, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const component = ref<HTMLElement | null>(null);
@@ -14,18 +14,33 @@ const props = defineProps<{
 
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
-	if (props.data && props.block.getDataKey("property") === "innerHTML") {
-		const dataValue = getDataForKey(props.data, props.block.getDataKey("key"));
-		innerHTML = typeof dataValue === "string" ? dataValue : innerHTML;
-	}
 	if (props.data) {
+		const data = props.data; // to "freeze" props.data for getDataScriptValue
+		const getDataScriptValue = (path: string): any => {
+			return getDataForKey(data, path);
+		};
+		if (props.block.getDataKey("property") === "innerHTML") {
+			let value;
+			if (props.block.getDataKey("comesFrom") === "props") {
+				// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
+				value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue);
+			} else {
+				value = getDataScriptValue(props.block.getDataKey("key"));
+			}
+			innerHTML = value ?? innerHTML;
+		}
 		props.block.dynamicValues
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 			})
 			?.forEach((dataKeyObj: BlockDataKey) => {
-				const dataValue = getDataForKey(props.data as Record<string, any>, dataKeyObj.key as string);
-				innerHTML = typeof dataValue === "string" ? dataValue : innerHTML;
+				let value;
+				if (dataKeyObj.comesFrom === "props") {
+					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+				} else {
+					value = getDataScriptValue(dataKeyObj.key as string);
+				}
+				innerHTML = value ?? innerHTML;
 			});
 	}
 	return innerHTML;
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 1db07a630..7401bb693 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -35,7 +35,7 @@
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
-import { getDataForKey } from "@/utils/helpers";
+import { getDataForKey, getPropValue } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
@@ -116,10 +116,19 @@ const attributes = computed(() => {
 	}
 
 	if (props.data) {
+		const data = props.data; // to "freeze" props.data for getDataScriptValue
+		const getDataScriptValue = (path: string): any => {
+			return getDataForKey(data, path);
+		};
 		if (props.block.getDataKey("type") === "attribute") {
+			let value;
+			if (props.block.getDataKey("comesFrom") === "dataScript") {
+				value = getDataScriptValue(props.block.getDataKey("key") as string);
+			} else {
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue);
+			}
 			attribs[props.block.getDataKey("property") as string] =
-				getDataForKey(props.data, props.block.getDataKey("key")) ??
-				attribs[props.block.getDataKey("property") as string];
+				value ?? attribs[props.block.getDataKey("property") as string];
 		}
 		props.block.dynamicValues
 			?.filter((dataKeyObj: BlockDataKey) => {
@@ -127,8 +136,13 @@ const attributes = computed(() => {
 			})
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				const property = dataKeyObj.property as string;
-				attribs[property] =
-					getDataForKey(props.data as Object, dataKeyObj.key as string) ?? attribs[property];
+				let value;
+				if (dataKeyObj.comesFrom === "dataScript") {
+					value = getDataScriptValue(dataKeyObj.key as string);
+				} else {
+					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+				}
+				attribs[property] = value ?? attribs[property];
 			});
 	}
 
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index bafc23fb5..ce0f3897b 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -9,29 +9,33 @@
 				placeholder="Search..." />
 			<div class="max-h-[60vh] overflow-y-auto">
 				<ul class="m-0 list-none p-0">
-					<li v-if="selectedKey && !filteredItems.includes(selectedKey)">
+					<li
+						v-if="selectedItem?.key && !filteredItems.some(i => i.key === selectedItem!.key && i.comesFrom === selectedItem!.comesFrom)">
 						<div
 							class="w-full truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
-							@click.stop="selectKey(selectedKey)">
-							{{ selectedKey }}
-							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedKey) == null }">
-								{{ getValue(selectedKey) == null ? "No Value Set" : getValue(selectedKey) }}
+							@click.stop="selectItem(selectedItem)">
+							{{ selectedItem.key }}
+							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedItem) == null }">
+								{{ getValue(selectedItem) == null ? "No Value Set" : getValue(selectedItem) }}
 							</p>
 						</div>
 					</li>
 					<li v-for="(item, index) in filteredItems" :key="index">
 						<div
 							class="w-full truncate rounded p-2 text-left font-mono text-p-sm text-ink-gray-7 hover:bg-surface-gray-2"
-							:class="{ 'bg-surface-gray-3 text-ink-gray-9': selectedKey === item }"
-							@click.stop="selectKey(item)">
-							{{ item }}
+							:class="{
+								'bg-surface-gray-3 text-ink-gray-9':
+									selectedItem?.key === item.key && selectedItem?.comesFrom === item.comesFrom,
+							}"
+							@click.stop="selectItem(item)">
+							{{ item.key }}
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(item) == null }">
 								{{ getValue(item) == null ? "No Value Set" : getValue(item) }}
 							</p>
 						</div>
 					</li>
 					<li
-						v-if="filteredItems.length === 0 && !selectedKey"
+						v-if="filteredItems.length === 0 && !selectedItem"
 						class="flex flex-col items-center justify-center p-10 text-center text-sm text-ink-gray-5">
 						<div>
 							No dynamic values found. Please add using
@@ -49,7 +53,7 @@
 		<div class="flex items-center justify-end gap-2" v-if="dataArray.length !== 0">
 			<div class="flex gap-2">
 				<Button variant="subtle" @click="builderStore.showDataScriptDialog = true">Edit Code</Button>
-				<Button variant="solid" @click="saveSelection" :disabled="!selectedKey">Set</Button>
+				<Button variant="solid" @click="saveSelection" :disabled="!selectedItem">Set</Button>
 			</div>
 		</div>
 	</div>
@@ -60,14 +64,19 @@ import Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
+import { getCollectionKeys, getDataForKey, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
 
+type DynamicValueItem = {
+	key: string;
+	comesFrom: BlockDataKey["comesFrom"];
+};
+
 const props = defineProps<{
-	selectedValue?: string;
+	selectedValue?: DynamicValueItem;
 	block?: Block;
 }>();
 
@@ -101,7 +110,13 @@ const dataArray = computed(() => {
 	return result;
 });
 
-const getValue = (path: string): any => {
+const getValue = (item: DynamicValueItem): any => {
+	if (item.comesFrom == "dataScript") return getDatScriptValue(item.key);
+	else
+		return getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue);
+};
+
+const getDatScriptValue = (path: string): any => {
 	let collectionObject = pageStore.pageData;
 
 	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
@@ -115,24 +130,40 @@ const getValue = (path: string): any => {
 	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
 };
 
+const blockProps = computed(() => {
+	return props.block
+		? props.block.getBlockProps()
+		: blockController.getFirstSelectedBlock()?.getBlockProps() || {};
+});
+
 const filteredItems = computed(() => {
-	if (!searchQuery.value) return dataArray.value;
+	const dataArrayItems = dataArray.value.map((item) => ({ key: item, comesFrom: "dataScript" }));
+	const propItems = Object.keys(blockProps.value).map((item) => ({ key: item, comesFrom: "props" }));
+	const allItems = [...dataArrayItems, ...propItems] as DynamicValueItem[];
+	if (!searchQuery.value) return allItems;
 	const query = searchQuery.value.toLowerCase();
-	return dataArray.value.filter(
-		(item) => item.toLowerCase().includes(query) || String(getValue(item)).toLowerCase().includes(query),
+	return allItems.filter(
+		(item) =>
+			item.key.toLowerCase().includes(query) ||
+			String(getDatScriptValue(item.key)).toLowerCase().includes(query) ||
+			String(
+				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue),
+			)
+				.toLowerCase()
+				.includes(query),
 	);
 });
 
-const selectedKey = ref<string | null>(props.selectedValue || null);
+const selectedItem = ref<DynamicValueItem | null>(props.selectedValue || null);
 
-function selectKey(key: string) {
-	selectedKey.value = key;
+function selectItem(item: DynamicValueItem) {
+	selectedItem.value = item;
 }
 
 function saveSelection() {
-	if (selectedKey.value) {
-		emit("setDynamicValue", selectedKey.value);
-		selectedKey.value = null;
+	if (selectedItem.value) {
+		emit("setDynamicValue", selectedItem.value);
+		selectedItem.value = null;
 	}
 }
 </script>
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index 037691312..df182b15a 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -75,14 +75,15 @@
 				<div
 					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 					@click.stop="showDynamicValueModal = true"
-					v-if="dynamicValue">
-					<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-					<span class="truncate">{{ dynamicValue }}</span>
+					v-if="dynamicValue?.key">
+					<FeatherIcon v-if="dynamicValue?.comesFrom == 'dataScript'" name="zap" class="size-3"></FeatherIcon>
+					<FeatherIcon v-else name="git-commit" class="size-3"></FeatherIcon>
+					<span class="truncate">{{ dynamicValue.key }}</span>
 				</div>
 				<button
 					class="absolute right-1 top-1 z-20 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
 					tabindex="-1"
-					v-show="dynamicValue"
+					v-show="dynamicValue?.key"
 					@click="clearDynamicValue">
 					<CrossIcon />
 				</button>
@@ -414,9 +415,10 @@ const disableStyle = (state: string) => {
 	});
 };
 
-function setDynamicValue(value: string) {
+function setDynamicValue({ key, comesFrom }: { key: string; comesFrom?: BlockDataKey["comesFrom"] }) {
+	if (!comesFrom) comesFrom = "dataScript";
 	blockController.getSelectedBlocks().forEach((block) => {
-		block.setDynamicValue(props.styleProperty, props.controlType, value);
+		block.setDynamicValue(props.styleProperty, props.controlType, key, comesFrom);
 	});
 	showDynamicValueModal.value = false;
 	emit("setDynamicValue");
@@ -428,10 +430,14 @@ const dynamicValue = computed(() => {
 	const dataKeyObj = blocks[0].dynamicValues.find((obj) => {
 		return obj.type === props.controlType && obj.property === props.styleProperty;
 	});
+
 	if (dataKeyObj) {
-		return dataKeyObj.key;
+		return {
+			key: dataKeyObj.key || "",
+			comesFrom: dataKeyObj.comesFrom || ("dataScript" as BlockDataKey["comesFrom"]),
+		};
 	} else {
-		return "";
+		return { key: "", comesFrom: "dataScript" as BlockDataKey["comesFrom"] };
 	}
 });
 
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index d85ccb7c5..c5d40d40c 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -9,7 +9,7 @@
 					<Popover popoverClass="!mr-[25px]" placement="left-start">
 						<template #target="{ open }">
 							<div class="flex w-full items-center justify-between">
-								<div class="flex w-full items-center gap-2 pl-2">
+								<div class="flex w-fit max-w-[60%] items-center gap-2 pl-2">
 									<div class="icon">
 										<component
 											v-if="!value.isStandard"
@@ -35,14 +35,14 @@
 											"
 											class="h-4 w-4 text-ink-gray-6" />
 									</div>
-									<div class="flex flex-col gap-1">
+									<div class="flex max-w-full flex-col gap-1">
 										<p class="text-sm font-medium text-ink-gray-8">
 											{{ key }}
 										</p>
 										<p v-if="value.isStandard" class="text-xs text-ink-gray-6">
 											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
 										</p>
-										<p v-else class="text-xs text-ink-gray-6">
+										<p v-else class="max-w-full truncate text-ellipsis text-xs text-ink-gray-6">
 											{{ value.value }}
 										</p>
 									</div>
@@ -199,6 +199,9 @@ const addProp = async (name: string, value: BlockProps[string]) => {
 	popupMode.value = "edit";
 	keyBeingEdited.value = name;
 	emit("update:obj", mapToObject(map));
+	if (value.type === "inherited" && value.value) {
+		emit("update:ancestorUpdateDependency", value.value, "add");
+	}
 	return map;
 };
 
@@ -231,6 +234,10 @@ const updateObjectValue = (
 	const oldPath = map.get(key)?.value;
 	const oldType = map.get(key)?.type;
 
+	if (path === oldPath && type === oldType) {
+		return map;
+	}
+
 	map.set(key, {
 		...map.get(key)!,
 		value: type === "static" && typeof path !== "string" ? JSON.stringify(path) : path,
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 028d645d0..a83b316b8 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -185,7 +185,7 @@ import Input from "@/components/Controls/Input.vue";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 import { setFontFromHTML } from "@/utils/fontManager";
-import { getDataForKey } from "@/utils/helpers";
+import { getDataForKey, getPropValue } from "@/utils/helpers";
 import { Color } from "@tiptap/extension-color";
 import { FontFamily } from "@tiptap/extension-font-family";
 import { Link } from "@tiptap/extension-link";
@@ -274,15 +274,31 @@ const textContent = computed(() => {
 
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
+	const getDataScriptValue = (path: string): any => {
+		return getDataForKey(props.data, path);
+	};
 	if (props.block.getDataKey("property") === "innerHTML") {
-		innerHTML = getDataForKey(props.data, props.block.getDataKey("key")) ?? innerHTML;
+		let value;
+		if (props.block.getDataKey("comesFrom") === "props") {
+			// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
+			value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue);
+		} else {
+			value = getDataScriptValue(props.block.getDataKey("key"));
+		}
+		innerHTML = value ?? innerHTML;
 	}
 	props.block.dynamicValues
 		?.filter((dataKeyObj: BlockDataKey) => {
 			return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 		})
 		?.forEach((dataKeyObj: BlockDataKey) => {
-			innerHTML = getDataForKey(props.data as Object, dataKeyObj.key as string) ?? innerHTML;
+			let value;
+			if (dataKeyObj.comesFrom === "props") {
+				value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+			} else {
+				value = getDataScriptValue(dataKeyObj.key as string);
+			}
+			innerHTML = value ?? innerHTML;
 		});
 	return innerHTML;
 };
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index fe7b0cfcd..4e1dcf4c4 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -896,6 +896,45 @@ function getCollectionKeys(block: any): string[] {
 function triggerCopyEvent() {
 	document.execCommand("copy");
 }
+
+const getValueForInheritedProp = (propName: string, block: Block, getDatScriptValue: (path: string) => any): any => {
+	let parent = block.getParentBlock();
+	while (parent) {
+		const parentProps = parent.getBlockProps();
+		const matchingProp = parentProps[propName];
+		if (matchingProp) {
+			if (matchingProp.type !== "inherited") {
+				if (matchingProp.type === "dynamic" && matchingProp.value) {
+					return getDatScriptValue(matchingProp.value);
+				} else {
+					return matchingProp.value;
+				}
+			} else {
+				return getValueForInheritedProp(propName, parent, getDatScriptValue);
+			}
+		}
+		parent = parent.getParentBlock();
+	}
+	return undefined;
+};
+
+const getPropValue = (propName: string, block: Block, getDatScriptValue: (path: string) => any): any => {
+	const blockProps = block.getBlockProps();
+	if (blockProps[propName]) {
+		const prop = blockProps[propName];
+		if (prop.type === "dynamic" && prop.value) {
+			return getDatScriptValue(prop.value);
+		} else if (prop.type === "inherited") {
+			if (prop.value) {
+				return getValueForInheritedProp(prop.value, block, getDatScriptValue);
+			}
+		} else {
+			return prop.value;
+		}
+	}
+	return undefined;
+};
+
 export {
 	addPxToNumber,
 	alert,
@@ -947,4 +986,5 @@ export {
 	toKebabCase,
 	triggerCopyEvent,
 	uploadImage,
+	getPropValue,
 };

From 717bb0a45ac616dc57c1f79a357b7bb329769a40 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 21 Nov 2025 15:05:42 +0530
Subject: [PATCH 070/547] fix: Do not cut/copy if the block is editable

---
 frontend/src/utils/useBuilderEvents.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 941be5a45..baf1e09a5 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -53,11 +53,12 @@ export function useBuilderEvents(
 	);
 
 	useEventListener(document, "copy", (e) => {
+		if (isTargetEditable(e) || canvasStore.editableBlock) return;
 		copySelectedBlocksToClipboard(e);
 	});
 
 	useEventListener(document, "cut", (e) => {
-		if (isTargetEditable(e)) return;
+		if (isTargetEditable(e) || canvasStore.editableBlock) return;
 		copySelectedBlocksToClipboard(e);
 		if (canvasStore.activeCanvas?.selectedBlocks.length) {
 			for (const block of canvasStore.activeCanvas?.selectedBlocks) {

From 6e1301ad19daa17538e26636a9b0c9e427c2352c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 23 Nov 2025 10:31:14 +0530
Subject: [PATCH 071/547] fix: added object input for standard props

---
 .../StandardPropsInputSection.ts              |  4 +-
 frontend/src/components/ObjectInput.vue       | 64 +++++++++++++++++++
 2 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/ObjectInput.vue

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 553716ea8..df68d6be9 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -1,8 +1,8 @@
-import PropsEditor from "../PropsEditor.vue";
 import blockController from "@/utils/blockController";
 import OptionToggle from "../Controls/OptionToggle.vue";
 import PropertyControl from "../Controls/PropertyControl.vue";
 import ArrayInput from "../ArrayInput.vue";
+import ObjectInput from "../ObjectInput.vue";
 
 const componentMap = {
 	string: PropertyControl,
@@ -10,7 +10,7 @@ const componentMap = {
 	boolean: PropertyControl,
 	select: PropertyControl,
 	array: ArrayInput,
-	object: PropsEditor,
+	object: ObjectInput,
 };
 
 const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
diff --git a/frontend/src/components/ObjectInput.vue b/frontend/src/components/ObjectInput.vue
new file mode 100644
index 000000000..c7c26e8bc
--- /dev/null
+++ b/frontend/src/components/ObjectInput.vue
@@ -0,0 +1,64 @@
+<template>
+	<Popover popoverClass="!mr-[15px]" placement="left">
+		<template #target="{ open }">
+			<div class="relative flex w-full gap-2">
+				<div class="flex w-[88px] shrink-0 items-center">
+					<InputLabel class="truncate">
+						{{ label }}
+					</InputLabel>
+				</div>
+				<div class="relative w-full">
+					<BuilderButton class="w-full" variant="subtle" icon="edit-2" @click.stop="open()" />
+				</div>
+			</div>
+		</template>
+		<template #body="{ open, close }">
+			<div
+				@click.stop
+				@mousedown.stop
+				class="flex max-h-60 w-60 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
+				<div class="text-sm text-ink-gray-8">Object Items:</div>
+				<ObjectEditor :obj @update:obj="updateModelValue" />
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ObjectEditor from "./ObjectEditor.vue";
+import InputLabel from "./Controls/InputLabel.vue";
+import { Popover } from "frappe-ui";
+import BuilderButton from "./Controls/BuilderButton.vue";
+
+const props = defineProps<{
+	label: string;
+	getModelValue: () => string;
+	setModelValue: (value: string) => void;
+}>();
+
+const emit = defineEmits({
+	"update:modelValue": (value: string) => true,
+});
+
+const getPassedObject = () => {
+	try {
+		const value = props.getModelValue();
+		const parsed = JSON.parse(value);
+		if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+			return parsed;
+		}
+		return {};
+	} catch {
+		return {};
+	}
+};
+
+const obj = ref<Record<string, string>>(getPassedObject());
+
+const updateModelValue = (value: Record<string, string>) => {
+	obj.value = value;
+	props.setModelValue(JSON.stringify(value));
+	emit("update:modelValue", JSON.stringify(value));
+};
+</script>

From d5c8f59d82f2ba39270fe2398dec860e5c9ae2a3 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 24 Nov 2025 07:47:31 +0530
Subject: [PATCH 072/547] fix: proper type interpretation of std. props

---
 .../doctype/builder_page/builder_page.py      | 101 +++++++++++++-----
 1 file changed, 77 insertions(+), 24 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 5bd373e8b..b4b87e721 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -2,6 +2,7 @@
 # For license information, please see license.txt
 
 import copy
+import json
 import re
 import os
 import shutil
@@ -495,35 +496,20 @@ def get_html(blocks, soup):
 
 		def get_tag(block, soup, data_key=None):
 			block = extend_with_component(block)
-			# not real objs, string templates to be used in jinja
-			props_obj_jinja = "{}" # to be passed as the prop obj in jinja template for dynamic values
-			props_obj_js = "{}" # to be passed as the prop obj in block script
+
+			props_obj = {}
 			props_with_successors = []
    
 			if block.get("props"):
-       
-				# collect all key:value pairs
-				props_js = []
-				props_jinja = []
     
 				for key, value in block.get("props", {}).items():
 					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
-					props_js.append(f"'{key}': '{interpreted_value}'")
-					if has_jinja_variable(interpreted_value):
-						# dynamic values beng used inside {% with props = ... %} should not have braces {{ ... }} or be literals '...'
-						stripped_jinja_braces = re.sub(r'{{\s*(.*?)\s*}}', r'\1', interpreted_value)
-						props_jinja.append(f"'{key}': {stripped_jinja_braces}")
-					else:
-						props_jinja.append(f"'{key}': '{interpreted_value}'")
-					
+					props_obj[key] = interpreted_value
      
 					if value.get('usedByCount', 0) > 0:
 						props_with_successors.append(key)
 						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
 
-				props_obj_js = f"{{ {', '.join(props_js)} }}"
-				props_obj_jinja = f"{{ {', '.join(props_jinja)} }}" if props_jinja else "{}"
-
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
 
@@ -632,7 +618,8 @@ def get_tag(block, soup, data_key=None):
 
 			if block.get("blockScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
-				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {props_obj_js or '{}'});"
+				print("probps obj js: ", props_obj)
+				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(props_obj) or '{}'});"
 				print("Script content: ", script_content)
 				all_block_scripts.append(script_content)
 				tag.attrs["data-block-id"] = block_unique_id
@@ -642,12 +629,13 @@ def get_tag(block, soup, data_key=None):
 					script_tag.string = script
 					tag.append(script_tag)
 
-			return tag, props_obj_jinja
+			return tag, to_jinja_literal(props_obj)
 
 		for block in blocks:
 			tag, props = get_tag(block, soup)
 			html += f"{{% with props = {props} %}}{str(tag)}{{% endwith %}}"
 
+		print("Final HTML: ", html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)
@@ -791,9 +779,35 @@ def extend_block(block, overridden_block):
 	block["children"] = extended_children
 	return block
 
+def to_jinja_literal(obj):
+    # 1. Detect Jinja expressions inside strings (e.g. "{{ sample }}")
+    if isinstance(obj, str):
+        stripped = obj.strip()
+        if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
+            # remove the {{ }} so Jinja receives the variable
+            inner = stripped[2:-2].strip()
+            return inner  # <-- returned unquoted
+        return repr(obj)  # normal python string
+
+    # 2. Booleans / None
+    if obj is True: return "True"
+    if obj is False: return "False"
+    if obj is None: return "None"
+
+    # 3. Dict
+    if isinstance(obj, dict):
+        parts = []
+        for k, v in obj.items():
+            parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
+        return "{ " + ", ".join(parts) + " }"
+
+    # 4. List / tuple
+    if isinstance(obj, (list, tuple)):
+        return "[ " + ", ".join(to_jinja_literal(i) for i in obj) + " ]"
+
+    # 5. Numbers or other primitives
+    return repr(obj)
 
-def has_jinja_variable(s):
-    return re.search(r'{{.*?}}', s) is not None
 
 def set_dynamic_content_placeholder(block, data_key=False):
 	block_data_key = block.get("dataKey", {}) or {}
@@ -868,17 +882,56 @@ def resolve_path(path):
 
 	return original_resolve_path(path)
 
+def parse_static_value(value: str, prop_type: str):
+	match prop_type:
+		case "string":
+			return f"{value}"
+		case "number":
+			try:
+				return float(value)
+			except ValueError:
+				return None
+		case "boolean":
+			if value is True or value is False:
+				return value
+			if value.lower() in ["true", "1"]:
+				return True
+			elif value.lower() in ["false", "0"]:
+				return False
+			else:
+				return None
+		case "array":
+			try:
+				return frappe.parse_json(value)
+			except Exception:
+				return None
+		case "object":
+			try:
+				return frappe.parse_json(value)
+			except Exception:
+				return None
+		case "select":
+			return f"{value}"
+		case _:
+			return f"{value}"
+
 
 def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
-	prop_value = prop["value"]
 	prop_type = prop["type"]
+	prop_is_standard = prop.get("isStandard", False)
+	prop_value = prop.get("value")
 
 	if prop_value == "" or prop_value is None:
 		return "undefined"
 	if prop_type == "dynamic":
 		return f"{{{{ {data_key}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
 	elif prop_type == "static":
-		return f"{prop_value}"
+		if prop_is_standard:
+			# standard props are static only as of now
+			prop_value = parse_static_value(
+				prop.get("value"), prop.get("standardOptions", {}).get("type")
+			)
+		return prop_value
 	elif prop_type == "inherited":
 		values = map_of_inherited_props.get(prop_value, [])
 		return values[0] if values else "undefined"

From 5d0c9a21b869c0974142d5d5477f072e805daea7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 24 Nov 2025 11:31:14 +0530
Subject: [PATCH 073/547] fix: Set arbitrary value

https://github.com/frappe/builder/issues/438
---
 .../src/components/Controls/Autocomplete.vue    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index a5de973ff..6652c8146 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -34,11 +34,9 @@
 			</div>
 
 			<ComboboxContent
-				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
-				<div v-if="!filteredOptions.length" class="px-3 py-2 text-center text-sm text-ink-gray-5">
-					{{ searchQuery ? "No results found" : "No options available" }}
-				</div>
-				<div v-else class="overflow-y-auto p-1">
+				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl"
+				v-if="filteredOptions.length">
+				<div class="overflow-y-auto p-1">
 					<template v-for="(option, index) in filteredOptions" :key="getOptionKey(option, index)">
 						<ComboboxSeparator v-if="isSeparatorLine(option)" class="bg-outline-gray-2 mx-2 my-1 h-px" />
 						<ComboboxLabel
@@ -166,7 +164,6 @@ const filteredOptions = computed(() => {
 	if (!searchQuery.value && options.length > 0) {
 		options = [{ label: "", value: "_no_highlight_", disabled: true }, ...options];
 	}
-
 	return options;
 });
 
@@ -211,19 +208,21 @@ const handleFocus = () => {
 	refreshOptions();
 	emit("focus");
 };
+
 const handleBlur = () => {
 	isFocused.value = false;
 	if (userCleared.value && !searchQuery.value) {
 		preventSelection.value = true;
 		isOpen.value = false;
 	}
-	// If user has manually cleared the input (empty search query) and there's a current value,
-	// clear the selection to set it to empty
-	if (!searchQuery.value && hasValue.value) {
+	if (searchQuery.value) {
+		selectedValue.value = multiple.value ? [searchQuery.value] : searchQuery.value;
+	} else if (hasValue.value) {
 		selectedValue.value = multiple.value ? [] : null;
 	}
 	emit("blur");
 };
+
 const handleKeydown = (event: KeyboardEvent) => {
 	if (event.key !== "Tab" && event.key !== "Escape") resetFlags();
 	if (event.key === "Escape") {

From 9cadfba82d6fbe6a6953f7970cd8653957d44eab Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 24 Nov 2025 11:32:01 +0530
Subject: [PATCH 074/547] fix: Do not sort based on "order" to avoid failure

---
 frontend/src/data/builderBlockTemplate.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/data/builderBlockTemplate.ts b/frontend/src/data/builderBlockTemplate.ts
index 1447cebb2..9586b93e3 100644
--- a/frontend/src/data/builderBlockTemplate.ts
+++ b/frontend/src/data/builderBlockTemplate.ts
@@ -4,7 +4,6 @@ const builderBlockTemplate = createListResource({
 	method: "GET",
 	doctype: "Block Template",
 	fields: ["template_name", "category", "preview", "name", "preview_width", "preview_height"],
-	orderBy: "`order`",
 	cache: "blockTemplates",
 	start: 0,
 	pageLength: 100,

From 7d6834473395137b165548c707f4ff03f87b6456 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 24 Nov 2025 11:56:49 +0530
Subject: [PATCH 075/547] refactor: Remove multiple options funtionality from
 autocomplete to simplify

---
 .../src/components/Controls/Autocomplete.vue  | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 6652c8146..89123b9d1 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -2,7 +2,6 @@
 	<ComboboxRoot
 		v-model="selectedValue"
 		v-model:open="isOpen"
-		:multiple="multiple"
 		:by="compareValues"
 		open-on-click
 		open-on-focus
@@ -109,14 +108,14 @@ interface ActionButton {
 interface Props {
 	options?: Option[];
 	getOptions?: (query: string) => Promise<Option[]>;
-	modelValue?: string | string[] | null;
+	modelValue?: string | null;
 	placeholder?: string;
 	showInputAsOption?: boolean;
 	actionButton?: ActionButton;
 }
 
 interface Emits {
-	"update:modelValue": [value: string | string[] | null];
+	"update:modelValue": [value: string | null];
 	focus: [];
 	blur: [];
 }
@@ -138,11 +137,7 @@ const preventSelection = ref(false);
 const inputKey = ref(0);
 const isFocused = ref(false);
 
-const multiple = computed(() => Array.isArray(props.modelValue));
 const hasValue = computed(() => {
-	if (multiple.value) {
-		return Array.isArray(props.modelValue) && props.modelValue.length > 0;
-	}
 	return props.modelValue != null && props.modelValue !== "";
 });
 
@@ -189,12 +184,9 @@ const compareValues = (a: any, b: any): boolean => {
 };
 
 const getDisplayValue = (item: any): string => {
-	const getValue = (val: any) => {
-		if (typeof val === "object") return val.label || val.value || "";
-		const found = allOptions.value.find((opt) => opt.value === val);
-		return found?.label || val || "";
-	};
-	return Array.isArray(item) ? item.map(getValue).join(", ") : getValue(item);
+	if (typeof item === "object") return item.label || item.value || "";
+	const found = allOptions.value.find((opt) => opt.value === item);
+	return found?.label || item || "";
 };
 
 const resetFlags = () => {
@@ -216,9 +208,9 @@ const handleBlur = () => {
 		isOpen.value = false;
 	}
 	if (searchQuery.value) {
-		selectedValue.value = multiple.value ? [searchQuery.value] : searchQuery.value;
+		selectedValue.value = searchQuery.value;
 	} else if (hasValue.value) {
-		selectedValue.value = multiple.value ? [] : null;
+		selectedValue.value = null;
 	}
 	emit("blur");
 };
@@ -234,7 +226,7 @@ const handleKeydown = (event: KeyboardEvent) => {
 const clearSelection = () => {
 	userCleared.value = true;
 	preventSelection.value = true;
-	selectedValue.value = multiple.value ? [] : null;
+	selectedValue.value = null;
 	searchQuery.value = "";
 	nextTick(() => {
 		isOpen.value = false;
@@ -270,7 +262,7 @@ watch(
 );
 watch(selectedValue, (newValue) => {
 	if (preventSelection.value && newValue != null) {
-		selectedValue.value = multiple.value ? [] : null;
+		selectedValue.value = null;
 		resetFlags();
 	}
 });

From 97ccdd77bcf34d4c79de0fd3dc4b4567c4c80c7e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 25 Nov 2025 15:37:42 +0530
Subject: [PATCH 076/547] refactor: Remove unnecessary handling from
 Autocomplete

---
 .../src/components/Controls/Autocomplete.vue  | 173 ++++++------------
 1 file changed, 53 insertions(+), 120 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 89123b9d1..59a81c1bd 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -2,7 +2,6 @@
 	<ComboboxRoot
 		v-model="selectedValue"
 		v-model:open="isOpen"
-		:by="compareValues"
 		open-on-click
 		open-on-focus
 		:reset-search-term-on-blur="false">
@@ -13,15 +12,13 @@
 					<slot name="prefix" />
 				</div>
 				<ComboboxInput
-					:key="inputKey"
 					v-model="searchQuery"
 					autocomplete="off"
-					@focus="handleFocus"
+					@focus="emit('focus')"
 					@blur="handleBlur"
-					@change="handleBlur"
-					@keydown="handleKeydown"
+					@keydown.enter="handleEnter"
 					:display-value="getDisplayValue"
-					:placeholder="isFocused ? '' : placeholder"
+					:placeholder="placeholder"
 					class="h-full w-full flex-1 border-none bg-transparent px-0 text-base placeholder:text-ink-gray-4 focus:outline-none focus:ring-0"
 					:class="{
 						'pl-2': !$slots.prefix,
@@ -33,21 +30,21 @@
 			</div>
 
 			<ComboboxContent
-				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl"
-				v-if="filteredOptions.length">
+				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
 				<div class="overflow-y-auto p-1">
-					<template v-for="(option, index) in filteredOptions" :key="getOptionKey(option, index)">
-						<ComboboxSeparator v-if="isSeparatorLine(option)" class="bg-outline-gray-2 mx-2 my-1 h-px" />
+					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
+						<ComboboxSeparator
+							v-if="option.value.startsWith('_separator_line')"
+							class="bg-outline-gray-2 mx-2 my-1 h-px" />
 						<ComboboxLabel
-							v-else-if="isSeparatorLabel(option)"
+							v-else-if="option.value.startsWith('_separator')"
 							class="px-2 py-1 text-xs font-semibold text-ink-gray-5">
 							{{ option.label }}
 						</ComboboxLabel>
 						<ComboboxItem
-							v-else-if="option.value !== '_no_highlight_'"
+							v-else
 							:value="option"
 							:disabled="option.disabled"
-							:text-value="option.label"
 							class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
 							<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
 							<span class="w-full flex-1 truncate">{{ option.label }}</span>
@@ -88,7 +85,7 @@ import {
 	ComboboxSeparator,
 } from "reka-ui";
 import type { Component } from "vue";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 interface Option {
 	label: string;
@@ -112,42 +109,30 @@ interface Props {
 	placeholder?: string;
 	showInputAsOption?: boolean;
 	actionButton?: ActionButton;
-}
-
-interface Emits {
-	"update:modelValue": [value: string | null];
-	focus: [];
-	blur: [];
+	allowArbitraryValue?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	options: () => [],
 	placeholder: "Search",
 	showInputAsOption: false,
+	allowArbitraryValue: true,
 });
 
-const emit = defineEmits<Emits>();
+const emit = defineEmits<{
+	"update:modelValue": [value: string | null];
+	focus: [];
+	blur: [];
+}>();
 
+const isOpen = ref(false);
 const searchQuery = ref("");
 const asyncOptions = ref<Option[]>([]);
-const isLoading = ref(false);
-const isOpen = ref(false);
-const userCleared = ref(false);
-const preventSelection = ref(false);
-const inputKey = ref(0);
-const isFocused = ref(false);
-
-const hasValue = computed(() => {
-	return props.modelValue != null && props.modelValue !== "";
-});
-
-const allOptions = computed(() => {
-	return props.getOptions ? asyncOptions.value : props.options;
-});
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
+const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
-const filteredOptions = computed(() => {
+const displayOptions = computed(() => {
 	let options = allOptions.value;
-
 	if (
 		props.showInputAsOption &&
 		searchQuery.value &&
@@ -155,121 +140,69 @@ const filteredOptions = computed(() => {
 	) {
 		options = [{ label: searchQuery.value, value: searchQuery.value }, ...options];
 	}
-
-	if (!searchQuery.value && options.length > 0) {
-		options = [{ label: "", value: "_no_highlight_", disabled: true }, ...options];
-	}
 	return options;
 });
 
 const selectedValue = computed({
-	get() {
-		return props.modelValue;
-	},
-	set(value) {
+	get: () => props.modelValue,
+	set: (value) => {
 		emit("update:modelValue", value ?? null);
+		isOpen.value = false;
 	},
 });
 
-const isSeparatorLine = (option: Option) => option.value.startsWith("_separator_line");
-const isSeparatorLabel = (option: Option) =>
-	option.value.startsWith("_separator") && !isSeparatorLine(option);
-const getOptionKey = (option: Option, index: number) => `${option.value}-${index}`;
-
-const compareValues = (a: any, b: any): boolean => {
-	if (typeof a === "object" && typeof b === "object") {
-		return a?.value === b?.value;
-	}
-	return a === b;
-};
-
 const getDisplayValue = (item: any): string => {
 	if (typeof item === "object") return item.label || item.value || "";
 	const found = allOptions.value.find((opt) => opt.value === item);
 	return found?.label || item || "";
 };
 
-const resetFlags = () => {
-	userCleared.value = false;
-	preventSelection.value = false;
+const refreshOptions = async (query = "") => {
+	if (!props.getOptions) return;
+	try {
+		asyncOptions.value = await props.getOptions(query);
+	} catch (error) {
+		console.error("Failed to load options:", error);
+	}
 };
 
-const handleFocus = () => {
-	resetFlags();
-	isFocused.value = true;
-	refreshOptions();
-	emit("focus");
+const clearSelection = () => {
+	emit("update:modelValue", null);
 };
 
-const handleBlur = () => {
-	isFocused.value = false;
-	if (userCleared.value && !searchQuery.value) {
-		preventSelection.value = true;
-		isOpen.value = false;
-	}
-	if (searchQuery.value) {
-		selectedValue.value = searchQuery.value;
-	} else if (hasValue.value) {
-		selectedValue.value = null;
-	}
-	emit("blur");
-};
+const handleEnter = (event: KeyboardEvent) => {
+	if (!props.allowArbitraryValue) return;
 
-const handleKeydown = (event: KeyboardEvent) => {
-	if (event.key !== "Tab" && event.key !== "Escape") resetFlags();
-	if (event.key === "Escape") {
-		isOpen.value = false;
+	const inputValue = (event.target as HTMLInputElement)?.value?.trim();
+	if (inputValue) {
 		event.preventDefault();
-	}
-};
-
-const clearSelection = () => {
-	userCleared.value = true;
-	preventSelection.value = true;
-	selectedValue.value = null;
-	searchQuery.value = "";
-	nextTick(() => {
+		event.stopPropagation();
+		emit("update:modelValue", inputValue);
 		isOpen.value = false;
-	});
+	}
 };
 
-const refreshOptions = async (query = "") => {
-	if (!props.getOptions) return;
-
-	isLoading.value = true;
-	try {
-		const options = await props.getOptions(query);
-		asyncOptions.value = options;
-	} catch (error) {
-		console.error("Failed to load options:", error);
-	} finally {
-		isLoading.value = false;
+const handleBlur = (event: FocusEvent) => {
+	if (props.allowArbitraryValue) {
+		const inputValue = (event.target as HTMLInputElement)?.value?.trim();
+		if (inputValue) {
+			emit("update:modelValue", inputValue);
+		}
 	}
+	emit("blur");
 };
 
-watch(searchQuery, (newQuery) => props.getOptions && refreshOptions(newQuery), { immediate: true });
+watch(searchQuery, (newQuery) => props.getOptions && refreshOptions(newQuery));
 
 watch(
-	allOptions,
-	() => {
-		if (hasValue.value && !isOpen.value) {
-			nextTick(() => {
-				inputKey.value++;
-			});
-		}
+	() => props.modelValue,
+	(newValue) => {
+		searchQuery.value = newValue ?? "";
 	},
-	{ deep: true },
 );
-watch(selectedValue, (newValue) => {
-	if (preventSelection.value && newValue != null) {
-		selectedValue.value = null;
-		resetFlags();
-	}
-});
-watch(isOpen, (newOpen) => !newOpen && setTimeout(() => !isOpen.value && resetFlags(), 100));
 
 if (props.getOptions) {
-	nextTick(() => refreshOptions());
+	refreshOptions();
 }
 
 defineExpose({

From 9523b8fdacccb3b0f64cff362a3197031688c58b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 25 Nov 2025 16:01:04 +0530
Subject: [PATCH 077/547] refactor: Async load complete settings instead of
 async loading individual settings views

---
 frontend/src/components/BuilderSettings.vue   | 64 +++++++++++--------
 frontend/src/components/BuilderToolbar.vue    |  5 +-
 frontend/src/components/DashboardSidebar.vue  |  5 +-
 .../src/components/Settings/PageGeneral.vue   | 13 ++--
 frontend/src/data/builderProjectFolder.ts     |  2 +-
 5 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 672a4e8ef..9f3c4a72c 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -26,19 +26,32 @@
 				variant="subtle"
 				@click="$emit('close')"
 				class="absolute right-5 top-5"></BuilderButton>
-			<component :is="selectedItemDoc?.component" />
+			<component :is="selectedItemDoc?.component" v-if="settingsLoaded" />
+			<div v-else class="flex items-center justify-center">
+				<span class="text-ink-gray-5">Loading...</span>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 import RedirectIcon from "@/components/Icons/Redirect.vue";
+import GlobalRedirects from "@/components/Settings/GlobalRedirects.vue";
+import PageCode from "@/components/Settings/PageCode.vue";
+import builderProjectFolder from "@/data/builderProjectFolder";
+import { builderSettings } from "@/data/builderSettings";
 import usePageStore from "@/stores/pageStore";
-import { computed, defineAsyncComponent, onActivated, ref } from "vue";
+import { computed, onActivated, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import ChartIcon from "./Icons/Chart.vue";
 import CodeIcon from "./Icons/Code.vue";
 import MetaIcon from "./Icons/Meta.vue";
 import SettingsIcon from "./Icons/Settings.vue";
+import GlobalAnalytics from "./Settings/GlobalAnalytics.vue";
+import GlobalCode from "./Settings/GlobalCode.vue";
+import GlobalGeneral from "./Settings/GlobalGeneral.vue";
+import PageAnalytics from "./Settings/PageAnalytics.vue";
+import PageGeneral from "./Settings/PageGeneral.vue";
+import PageMeta from "./Settings/PageMeta.vue";
 
 const props = defineProps<{
 	onlyGlobal?: boolean;
@@ -48,6 +61,19 @@ const route = useRoute();
 const pageStore = usePageStore();
 const emit = defineEmits(["close"]);
 const selectedItem = ref<string>(props.onlyGlobal ? "global_general" : "page_general");
+const settingsLoaded = ref(false);
+
+onMounted(async () => {
+	const promises = [];
+	if (!builderSettings.doc) {
+		promises.push(builderSettings.reload());
+	}
+	if (!builderProjectFolder.data) {
+		promises.push(builderProjectFolder.fetch());
+	}
+	await Promise.all(promises);
+	settingsLoaded.value = true;
+});
 
 type SidebarItem = {
 	label: string;
@@ -75,28 +101,16 @@ const pageSettings = {
 		{
 			label: "General",
 			value: "page_general",
-			component: defineAsyncComponent(() => import("@/components/Settings/PageGeneral.vue")),
+			component: PageGeneral,
 			title: "General",
 			icon: SettingsIcon,
 		},
-		{
-			label: "Code",
-			value: "page_code",
-			component: defineAsyncComponent(() => import("@/components/Settings/PageCode.vue")),
-			title: "Page Code",
-			icon: CodeIcon,
-		},
-		{
-			label: "Meta",
-			value: "page_meta",
-			component: defineAsyncComponent(() => import("@/components/Settings/PageMeta.vue")),
-			title: "Meta",
-			icon: MetaIcon,
-		},
+		{ label: "Code", value: "page_code", component: PageCode, title: "Page Code", icon: CodeIcon },
+		{ label: "Meta", value: "page_meta", component: PageMeta, title: "Meta", icon: MetaIcon },
 		{
 			label: "Analytics",
 			value: "page_analytics",
-			component: defineAsyncComponent(() => import("@/components/Settings/PageAnalytics.vue")),
+			component: PageAnalytics,
 			title: "Page Views",
 			icon: ChartIcon,
 		},
@@ -109,29 +123,23 @@ const globalSettings = {
 		{
 			label: "General",
 			value: "global_general",
-			component: defineAsyncComponent(() => import("@/components/Settings/GlobalGeneral.vue")),
+			component: GlobalGeneral,
 			title: "General",
 			icon: SettingsIcon,
 			disabled: false,
 		},
-		{
-			label: "Code",
-			value: "global_code",
-			component: defineAsyncComponent(() => import("@/components/Settings/GlobalCode.vue")),
-			title: "Global Code",
-			icon: CodeIcon,
-		},
+		{ label: "Code", value: "global_code", component: GlobalCode, title: "Global Code", icon: CodeIcon },
 		{
 			label: "Redirects",
 			value: "global_redirects",
-			component: defineAsyncComponent(() => import("@/components/Settings/GlobalRedirects.vue")),
+			component: GlobalRedirects,
 			title: "Redirects",
 			icon: RedirectIcon,
 		},
 		{
 			label: "Analytics",
 			value: "global_analytics",
-			component: defineAsyncComponent(() => import("@/components/Settings/GlobalAnalytics.vue")),
+			component: GlobalAnalytics,
 			title: "Site Views",
 			icon: ChartIcon,
 		},
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 34dd8c6b1..4e6155a34 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -159,12 +159,13 @@ import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getTextContent } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
 import { Popover, Tooltip } from "frappe-ui";
-import { computed, ref } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 import { toast } from "vue-sonner";
-import BuilderSettings from "./BuilderSettings.vue";
 import MainMenu from "./MainMenu.vue";
 import PageOptions from "./PageOptions.vue";
 
+const BuilderSettings = defineAsyncComponent(() => import("./BuilderSettings.vue"));
+
 const isDark = useDark({
 	attribute: "data-theme",
 });
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 44a9df9f9..fee7e82c5 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -195,7 +195,6 @@
 </template>
 <script lang="ts" setup>
 import AppsMenu from "@/components/AppsMenu.vue";
-import BuilderSettings from "@/components/BuilderSettings.vue";
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
 import EditableSpan from "@/components/EditableSpan.vue";
 import FilesIcon from "@/components/Icons/Files.vue";
@@ -209,7 +208,9 @@ import { confirm } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
 import { createResource, Dialog, Dropdown } from "frappe-ui";
 import { TrialBanner } from "frappe-ui/frappe";
-import { ref } from "vue";
+import { defineAsyncComponent, ref } from "vue";
+
+const BuilderSettings = defineAsyncComponent(() => import("@/components/BuilderSettings.vue"));
 const isDark = useDark({
 	attribute: "data-theme",
 });
diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 81421bec7..8cb0f7e6e 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -173,12 +173,13 @@ const folderOptions = computed(() => {
 		value: "",
 	};
 
-	const options = builderProjectFolder.data.map((folder: BuilderProjectFolder) => {
-		return {
-			label: folder.folder_name,
-			value: folder.folder_name,
-		};
-	});
+	const options =
+		builderProjectFolder.data?.map((folder: BuilderProjectFolder) => {
+			return {
+				label: folder.folder_name,
+				value: folder.folder_name,
+			};
+		}) || [];
 
 	return [homeOption, ...options];
 });
diff --git a/frontend/src/data/builderProjectFolder.ts b/frontend/src/data/builderProjectFolder.ts
index 0a305e7df..76565f377 100644
--- a/frontend/src/data/builderProjectFolder.ts
+++ b/frontend/src/data/builderProjectFolder.ts
@@ -4,7 +4,7 @@ const builderProjectFolder = createListResource({
 	method: "GET",
 	doctype: "Builder Project Folder",
 	fields: ["folder_name"],
-	orderBy: "`folder_name`",
+	orderBy: "folder_name",
 	cache: "builderProjectFolder",
 	start: 0,
 	pageLength: 100,

From 68cb75ea06a57e2cc3380fb656c1406bf2480ee2 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 25 Nov 2025 16:01:39 +0530
Subject: [PATCH 078/547] fix(Autocomplete): Handle an edge case where value is
 null

---
 frontend/src/components/Controls/Autocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 59a81c1bd..0465356fb 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -152,7 +152,7 @@ const selectedValue = computed({
 });
 
 const getDisplayValue = (item: any): string => {
-	if (typeof item === "object") return item.label || item.value || "";
+	if (typeof item === "object") return item?.label || item?.value || "";
 	const found = allOptions.value.find((opt) => opt.value === item);
 	return found?.label || item || "";
 };

From 71f5dfe502d029632b42182df8ea480d3a042f19 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 26 Nov 2025 03:44:25 +0530
Subject: [PATCH 079/547] fix: Prevent empty script submission with a warning

closes: https://github.com/frappe/builder/issues/432
---
 frontend/src/components/PageClientScriptManager.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index d54038aba..40c1d4e83 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -182,6 +182,11 @@ const selectScript = (script: attachedScript) => {
 const updateScript = (value: string) => {
 	if (!activeScript.value) return;
 
+	if (!value || !value.trim()) {
+		toast.warning("Script cannot be empty");
+		return;
+	}
+
 	pageStore.activePageScripts = pageStore.activePageScripts.map((script: BuilderClientScript) => {
 		if (script.name === activeScript.value?.script_name) {
 			script.script = value;

From 4f5b8a72b910d09af8337d4dd331e7e1c43393da Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 26 Nov 2025 04:15:34 +0530
Subject: [PATCH 080/547] refactor: Abstract utility functions to normalize CSS
 values with units

Also fix: https://github.com/frappe/builder/issues/406
---
 .../src/components/Controls/InlineInput.vue   | 18 +++----
 .../components/Controls/PropertyControl.vue   | 33 +++++-------
 frontend/src/utils/helpers.ts                 | 52 +++++++++++++++++++
 3 files changed, 74 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index c91c6fb0b..b0a3464af 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -34,6 +34,7 @@
 	</div>
 </template>
 <script setup lang="ts">
+import { extractNumberAndUnit } from "@/utils/helpers";
 import { isNumber } from "@tiptap/vue-3";
 import { computed } from "vue";
 import Autocomplete from "./Autocomplete.vue";
@@ -104,9 +105,9 @@ const handleChange = (value: string | number | null | { label: string; value: st
 	if (typeof value === "object" && value !== null && "value" in value) {
 		value = value.value;
 	}
-	if (value && typeof value === "string") {
-		let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-		if (!unit && props.unitOptions.length && number) {
+	if (value && typeof value === "string" && props.unitOptions.length) {
+		const { number, unit } = extractNumberAndUnit(value);
+		if (!unit && number) {
 			value = number + props.unitOptions[0];
 		}
 	}
@@ -118,7 +119,7 @@ const handleMouseDown = (e: MouseEvent) => {
 	if (!props.enableSlider) {
 		return;
 	}
-	const number = ((props.modelValue + "" || "") as string).match(/([0-9]+)/)?.[0] || "0";
+	const { number } = extractNumberAndUnit(String(props.modelValue || ""));
 	const startY = e.clientY;
 	const startValue = Number(number);
 	const handleMouseMove = (e: MouseEvent) => {
@@ -142,11 +143,10 @@ const handleKeyDown = (e: KeyboardEvent) => {
 };
 
 const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
-	const value = props.modelValue + "" || "";
-	let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-	if (!unit && props.unitOptions.length && !isNaN(Number(number))) {
-		unit = props.unitOptions[0];
-	}
+	const value = String(props.modelValue || "");
+	const { number, unit: existingUnit } = extractNumberAndUnit(value);
+	const unit =
+		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
 	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
 	if (isNumber(props.minValue) && newValue <= props.minValue) {
 		newValue = props.minValue;
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index c20a9dfb6..7e6d0a3c9 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -163,6 +163,7 @@ import Input from "@/components/Controls/Input.vue";
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import CrossIcon from "@/components/Icons/Cross.vue";
 import blockController from "@/utils/blockController";
+import { extractNumberAndUnit, normalizeValueWithUnits } from "@/utils/helpers";
 import { Dropdown, FeatherIcon } from "frappe-ui";
 import type { Component } from "vue";
 import { computed, ref, useAttrs } from "vue";
@@ -250,10 +251,7 @@ const updateValue = (value: string | number | null | { label: string; value: str
 		value = value.value;
 	}
 	if (value && typeof value === "string") {
-		let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-		if (!unit && props.unitOptions.length && number) {
-			value = number + props.unitOptions[0];
-		}
+		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
 	}
 	if (props.setModelValue) {
 		props.setModelValue(value as string);
@@ -264,7 +262,7 @@ const updateValue = (value: string | number | null | { label: string; value: str
 
 const handleMouseDown = (e: MouseEvent) => {
 	if (!props.enableSlider) return;
-	const number = ((modelValue.value + "" || "") as string).match(/([0-9]+)/)?.[0] || "0";
+	const { number } = extractNumberAndUnit(String(modelValue.value || ""));
 	const startY = e.clientY;
 	const startValue = Number(number);
 	const handleMouseMove = (e: MouseEvent) => {
@@ -291,10 +289,7 @@ const updateStateValue = (
 		value = value.value;
 	}
 	if (value && typeof value === "string") {
-		let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-		if (!unit && props.unitOptions.length && number) {
-			value = number + props.unitOptions[0];
-		}
+		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
 	}
 	blockController.setStyle(`${state}:${props.styleProperty}`, value as string);
 };
@@ -360,7 +355,7 @@ const handleKeyDown = (e: KeyboardEvent, state?: string) => {
 
 const handleStateMouseDown = (e: MouseEvent, state: string) => {
 	if (!props.enableSlider) return;
-	const number = ((getStateValue(state) + "" || "") as string).match(/([0-9]+)/)?.[0] || "0";
+	const { number } = extractNumberAndUnit(String(getStateValue(state) || ""));
 	const startY = e.clientY;
 	const startValue = Number(number);
 	const handleMouseMove = (e: MouseEvent) => {
@@ -376,11 +371,10 @@ const handleStateMouseDown = (e: MouseEvent, state: string) => {
 };
 
 const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
-	const value = modelValue.value + "" || "";
-	let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-	if (!unit && props.unitOptions.length && !isNaN(Number(number))) {
-		unit = props.unitOptions[0];
-	}
+	const value = String(modelValue.value || "");
+	const { number, unit: existingUnit } = extractNumberAndUnit(value);
+	const unit =
+		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
 	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
 	if (typeof props.minValue === "number" && newValue <= props.minValue) {
 		newValue = props.minValue;
@@ -392,11 +386,10 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 };
 
 const incrementOrDecrementState = (state: string, step: number, initialValue: null | number = null) => {
-	const value = getStateValue(state) + "" || "";
-	let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-	if (!unit && props.unitOptions.length && !isNaN(Number(number))) {
-		unit = props.unitOptions[0];
-	}
+	const value = String(getStateValue(state) || "");
+	const { number, unit: existingUnit } = extractNumberAndUnit(value);
+	const unit =
+		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
 	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
 	if (typeof props.minValue === "number" && newValue <= props.minValue) {
 		newValue = props.minValue;
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index fe7b0cfcd..6577c4ca2 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -802,6 +802,55 @@ function getBoxSpacing(
 	return `${sTop} ${sRight} ${sBottom} ${sLeft}`;
 }
 
+/**
+ * Extracts the numeric value and unit from a CSS value string
+ * @param value - CSS value string (e.g., "10px", "1.5em", "20")
+ * @returns Object containing the number and unit parts
+ */
+function extractNumberAndUnit(value: string): { number: string; unit: string } {
+	const match = value.match(/([0-9.]+)([a-z%]*)/) || ["", "0", ""];
+	return { number: match[1], unit: match[2] };
+}
+
+/**
+ * Adds a unit to a number if it doesn't already have one
+ * @param numberStr - String containing a number with or without a unit
+ * @param unit - Default unit to add if none exists
+ * @returns String with unit attached
+ */
+function addUnitToNumber(numberStr: string, unit: string): string {
+	const match = numberStr.match(/^([0-9.]+)([a-z%]*)$/);
+	if (match) {
+		const [, number, existingUnit] = match;
+		return existingUnit ? numberStr : number + unit;
+	}
+	return numberStr;
+}
+
+/**
+ * Normalizes CSS values by adding default units where missing
+ * Handles both single values and spacing properties with multiple values
+ * @param value - CSS value string
+ * @param unitOptions - Array of possible units, first is used as default
+ * @param styleProperty - CSS property name (used to detect spacing properties)
+ * @returns Normalized value string with units added
+ */
+function normalizeValueWithUnits(value: string, unitOptions: string[], styleProperty: string): string {
+	if (!unitOptions.length) return value;
+
+	const defaultUnit = unitOptions[0];
+	const isSpacingProperty = styleProperty === "margin" || styleProperty === "padding";
+
+	if (isSpacingProperty) {
+		const parts = value.trim().split(/\s+/);
+		if (parts.length > 1) {
+			return parts.map((part) => addUnitToNumber(part, defaultUnit)).join(" ");
+		}
+	}
+
+	return addUnitToNumber(value, defaultUnit);
+}
+
 interface DialogAction {
 	label: string;
 	variant?: "solid" | "subtle" | "outline" | "ghost";
@@ -898,11 +947,13 @@ function triggerCopyEvent() {
 }
 export {
 	addPxToNumber,
+	addUnitToNumber,
 	alert,
 	confirm,
 	copyToClipboard,
 	dataURLtoFile,
 	detachBlockFromComponent,
+	extractNumberAndUnit,
 	findNearestSiblingIndex,
 	generateId,
 	getBlock,
@@ -934,6 +985,7 @@ export {
 	kebabToCamelCase,
 	logObjectDiff,
 	mapToObject,
+	normalizeValueWithUnits,
 	openInDesk,
 	parseAndSetBackground,
 	parseBackground,

From ac8e3bc5874f5655583b6b90434ed865adf4dc37 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 26 Nov 2025 10:22:50 +0530
Subject: [PATCH 081/547] feat: Option to re-order scripts

---
 builder/api.py                                |  14 +-
 frontend/components.d.ts                      |   1 +
 .../src/components/Icons/GripVertical.vue     |  19 +++
 .../components/PageClientScriptManager.vue    | 137 +++++++++++-------
 4 files changed, 120 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/components/Icons/GripVertical.vue

diff --git a/builder/api.py b/builder/api.py
index 6cd6a806f..0555021d3 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -2,7 +2,7 @@
 import os
 from io import BytesIO
 from types import FunctionType, MethodType, ModuleType
-from typing import TYPE_CHECKING, Any
+from typing import Any
 from urllib.parse import unquote
 
 import frappe
@@ -350,3 +350,15 @@ def get_codemirror_completions():
 		key="",
 		value=get_safe_globals(),
 	)
+
+
+@frappe.whitelist()
+def reorder_client_scripts(script_order):
+	if not frappe.has_permission("Builder Page", ptype="write"):
+		frappe.throw("You do not have permission to reorder client scripts")
+
+	if isinstance(script_order, str):
+		script_order = frappe.parse_json(script_order)
+
+	for idx, script_name in enumerate(script_order, start=1):
+		frappe.db.set_value("Builder Page Client Script", script_name, "idx", idx)
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c4e117593..6df879572 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -67,6 +67,7 @@ declare module 'vue' {
     GlobalMeta: typeof import('./src/components/Settings/GlobalMeta.vue')['default']
     GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
     Globe: typeof import('./src/components/Icons/Globe.vue')['default']
+    GripVertical: typeof import('./src/components/Icons/GripVertical.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
     ImageUploadInput: typeof import('./src/components/ImageUploadInput.vue')['default']
     InlineInput: typeof import('./src/components/Controls/InlineInput.vue')['default']
diff --git a/frontend/src/components/Icons/GripVertical.vue b/frontend/src/components/Icons/GripVertical.vue
new file mode 100644
index 000000000..2941a7a76
--- /dev/null
+++ b/frontend/src/components/Icons/GripVertical.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="14"
+		height="14"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round">
+		<circle cx="9" cy="5" r="1" />
+		<circle cx="9" cy="12" r="1" />
+		<circle cx="9" cy="19" r="1" />
+		<circle cx="15" cy="5" r="1" />
+		<circle cx="15" cy="12" r="1" />
+		<circle cx="15" cy="19" r="1" />
+	</svg>
+</template>
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 40c1d4e83..f437cb72c 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -3,56 +3,69 @@
 		<div class="flex flex-col gap-3">
 			<div class="flex h-full w-48 flex-col justify-between gap-1">
 				<div class="flex flex-col gap-1">
-					<a
-						v-for="script in attachedScriptResource.data"
-						href="#"
-						:class="{
-							'text-ink-gray-5': activeScript !== script,
-							'font-medium text-ink-gray-8': activeScript === script,
-						}"
-						@click="selectScript(script)"
-						class="group flex h-6 items-center justify-between gap-1 text-sm first-of-type:mt-6 last-of-type:mb-2">
-						<div class="flex w-[90%] items-center gap-1">
-							<CSSIcon class="shrink-0" v-if="script.script_type === 'CSS'" />
-
-							<JavaScriptIcon class="shrink-0" v-if="script.script_type === 'JavaScript'" />
-
-							<EditableSpan
-								v-model="script.script_name"
-								:editable="script.editable"
-								:onChange="
-									async (newName) => {
-										await updateScriptName(newName, script);
-									}
-								"
-								class="w-full truncate">
-								{{ script.script_name }}
-							</EditableSpan>
-						</div>
+					<draggable
+						v-model="attachedScriptResource.data"
+						:item-key="(script: attachedScript) => script.name"
+						handle=".drag-handle"
+						@end="onScriptReorder"
+						class="flex flex-col gap-1">
+						<template #item="{ element: script }">
+							<a
+								href="#"
+								:class="{
+									'text-ink-gray-5': activeScript !== script,
+									'font-medium text-ink-gray-8': activeScript === script,
+								}"
+								@click="selectScript(script)"
+								class="group flex h-6 items-center justify-between gap-1 text-sm first-of-type:mt-6 last-of-type:mb-2">
+								<div class="flex w-[90%] items-center gap-1">
+									<GripVertical class="drag-handle cursor-grab text-ink-gray-5 hover:text-ink-gray-8" />
+									<CSSIcon class="shrink-0" v-if="script.script_type === 'CSS'" />
 
-						<Dropdown
-							class="script-options"
-							placement="right"
-							v-if="activeScript === script"
-							:options="[
-								{
-									label: 'Rename',
-									onClick: () => {
-										script.editable = true;
-									},
-									icon: 'edit',
-								},
-								{
-									label: 'Remove Script',
-									onClick: () => deleteScript(script.name),
-									icon: 'trash',
-								},
-							]">
-							<template v-slot="{ open }">
-								<BuilderButton icon="more-horizontal" size="sm" variant="ghost" @click="open"></BuilderButton>
-							</template>
-						</Dropdown>
-					</a>
+									<JavaScriptIcon class="shrink-0" v-if="script.script_type === 'JavaScript'" />
+
+									<EditableSpan
+										v-model="script.script_name"
+										:editable="script.editable"
+										:onChange="
+											async (newName) => {
+												await updateScriptName(newName, script);
+											}
+										"
+										class="w-full truncate">
+										{{ script.script_name }}
+									</EditableSpan>
+								</div>
+
+								<Dropdown
+									class="script-options"
+									placement="right"
+									v-if="activeScript === script"
+									:options="[
+										{
+											label: 'Rename',
+											onClick: () => {
+												script.editable = true;
+											},
+											icon: 'edit',
+										},
+										{
+											label: 'Remove Script',
+											onClick: () => deleteScript(script.name),
+											icon: 'trash',
+										},
+									]">
+									<template v-slot="{ open }">
+										<BuilderButton
+											icon="more-horizontal"
+											size="sm"
+											variant="ghost"
+											@click="open"></BuilderButton>
+									</template>
+								</Dropdown>
+							</a>
+						</template>
+					</draggable>
 
 					<div class="flex w-full gap-2">
 						<Dropdown
@@ -88,7 +101,7 @@
 		</div>
 
 		<div
-			class="flex h-[70vh] w-full items-center justify-center rounded bg-surface-gray-1 text-base text-ink-gray-6"
+			class="flex h-[calc(65vh+68px)] w-full items-center justify-center rounded bg-surface-gray-1 text-base text-ink-gray-6"
 			v-show="!activeScript">
 			Add Script
 		</div>
@@ -118,8 +131,10 @@ import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { Autocomplete, createListResource, createResource, Dropdown } from "frappe-ui";
 import { computed, nextTick, ref, watch } from "vue";
 import { toast } from "vue-sonner";
+import draggable from "vuedraggable";
 import CodeEditor from "./Controls/CodeEditor.vue";
 import CSSIcon from "./Icons/CSS.vue";
+import GripVertical from "./Icons/GripVertical.vue";
 import JavaScriptIcon from "./Icons/JavaScript.vue";
 
 const scriptEditor = ref<InstanceType<typeof CodeEditor> | null>(null);
@@ -310,6 +325,28 @@ const clientScriptOptions = computed(() =>
 	})),
 );
 
+const onScriptReorder = () => {
+	if (!attachedScriptResource.data) return;
+
+	const scriptOrder = attachedScriptResource.data.map((script: attachedScript) => script.name);
+
+	createResource({
+		url: "builder.api.reorder_client_scripts",
+	})
+		.submit({
+			script_order: scriptOrder,
+		})
+		.then(() => {
+			toast.success("Script order updated");
+		})
+		.catch((e: { message: string; exc: string }) => {
+			const error_message = e.exc.split("\n").slice(-2)[0];
+			toast.error("Failed to update script order", {
+				description: error_message,
+			});
+		});
+};
+
 watch(
 	() => props.page,
 	async () => {

From 07bb0a9ef9d29e3cb841c808284b8984c6644e32 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 26 Nov 2025 22:17:45 +0530
Subject: [PATCH 082/547] feat: now array/obj props can be used as repeaters

blocks which are children of such repeater get some default props to access the looping items
---
 .../doctype/builder_page/builder_page.py      | 109 +++++++++++++++---
 frontend/src/block.ts                         |   1 +
 frontend/src/components/BlockHTML.vue         |   9 +-
 .../CollectionOptionsSection.ts               |  70 +++++++++--
 frontend/src/components/BuilderBlock.vue      |   4 +
 .../Controls/DynamicValueHandler.vue          |  47 +++++++-
 frontend/src/components/DataLoaderBlock.vue   |  49 +++++++-
 frontend/src/components/TextBlock.vue         |   8 +-
 frontend/src/utils/blockController.ts         |  21 +++-
 frontend/src/utils/helpers.ts                 |  44 ++++++-
 10 files changed, 319 insertions(+), 43 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index b4b87e721..7559d748a 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -491,14 +491,20 @@ def get_block_html(blocks):
 
 	def get_html(blocks, soup):
 		map_of_inherited_props = {} # prop_name -> array<values>
+		map_of_std_props_info = {} # prop_name -> array<values>
 		html = ""
 		all_block_scripts = []
 
-		def get_tag(block, soup, data_key=None):
+		def get_tag(block, soup, data_key=None, default_props=None):
 			block = extend_with_component(block)
 
+			# to be used in {% with %} statements
 			props_obj = {}
+			std_props_obj = {}
+
+			# to be used to pop last values from their resp maps
 			props_with_successors = []
+			std_props = []
    
 			if block.get("props"):
     
@@ -506,6 +512,11 @@ def get_tag(block, soup, data_key=None):
 					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
 					props_obj[key] = interpreted_value
      
+					if value.get('isStandard', False):
+						std_props_obj[key] = interpreted_value
+						std_props.append(key)
+						map_of_std_props_info.setdefault(key, []).append(value)
+     
 					if value.get('usedByCount', 0) > 0:
 						props_with_successors.append(key)
 						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
@@ -583,38 +594,81 @@ def get_tag(block, soup, data_key=None):
 				inner_soup = bs.BeautifulSoup(innerContent, "html.parser")
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
+    
+			if default_props:
+				for prop in default_props:
+					props_obj[prop] = f"{{{{ {prop} }}}}"
 
-			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
+			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):    
 				_key = block.get("dataKey").get("key")
-				if data_key:
-					_key = f"{data_key}.{_key}"
+				item_key = ""
+				next_data_key = None
+				next_default_props = None
+    
+				if block.get("dataKey").get("comesFrom", "dataScript") == "dataScript":
+					if data_key:
+						_key = f"{extract_data_key(data_key)}.{_key}"
+					item_key = f"key_{_key.replace('.', '__')}"
+					next_data_key = {"key": item_key, "comesFrom": "dataScript"}
+     
+				if block.get("dataKey").get("comesFrom") == "props":
+					next_data_key = None
+					looping_vars = get_looping_vars(map_of_std_props_info, _key)
+					next_default_props = looping_vars
+					item_key = ", ".join(looping_vars)
+					_key = f"std_props['{_key}']"
+					if len(looping_vars) > 1: # object repeater
+						_key = f"{_key}.items()"
+
+				if  default_props: # carried over from parent repeater
+					next_default_props = default_props + (next_default_props or [])
 
-				item_key = f"key_{_key.replace('.', '__')}"
 				tag.append(f"{{% for {item_key} in {_key} %}}")
-				child_tag, child_tag_props = get_tag(block.get("children")[0], soup, item_key)
+    
+				child_tag, child_tag_props, child_tag_std_props = get_tag(block.get("children")[0], soup, next_data_key, next_default_props)
+    
+				if child_tag_std_props:
+					tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
+     
 				tag.append(f"{{% with props = {child_tag_props} %}}")
 				tag.append(child_tag)
 				tag.append("{% endwith %}")
+    
+				if child_tag_std_props:
+					tag.append("{% endwith %}")
+     
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
 					if child.get("visibilityCondition"):
 						key = child.get("visibilityCondition")
+						# TODO: enable props based visibility conditions
 						if data_key:
-							key = f"{data_key}.{key}"
+							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
-					child_tag, child_tag_props = get_tag(child, soup, data_key=data_key)
+
+					child_tag, child_tag_props, child_tag_std_props = get_tag(child, soup, data_key=data_key, default_props=default_props)
+
+					if child_tag_std_props:
+						tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
+
 					tag.append(f"{{% with props = {child_tag_props} %}}")
 					tag.append(child_tag)
 					tag.append("{% endwith %}")
+
+					if child_tag_std_props:
+						tag.append("{% endwith %}")
+
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
 
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
-			for props in props_with_successors:
-				map_of_inherited_props[props].pop()
+			for prop in props_with_successors:
+				map_of_inherited_props[prop].pop()
+			for prop in std_props:
+				map_of_std_props_info[prop].pop()
 
 			if block.get("blockScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
@@ -629,11 +683,13 @@ def get_tag(block, soup, data_key=None):
 					script_tag.string = script
 					tag.append(script_tag)
 
-			return tag, to_jinja_literal(props_obj)
+			return tag, to_jinja_literal(props_obj), to_jinja_literal(std_props_obj) if std_props_obj else None
 
 		for block in blocks:
-			tag, props = get_tag(block, soup)
+			tag, props, std_props = get_tag(block, soup)
 			html += f"{{% with props = {props} %}}{str(tag)}{{% endwith %}}"
+			if std_props:
+				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
 
 		print("Final HTML: ", html)
 		return html, str(style_tag), font_map
@@ -822,7 +878,7 @@ def set_dynamic_content_placeholder(block, data_key=False):
 			if(dynamic_value_doc.get("comesFrom") == "props"):
 				key = f"props['{dynamic_value_doc.get('key')}']"
 			else:
-				key = f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
+				key = f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
 				if data_key:
 					# convert a.b to (a or {}).get('b', {})
 					# to avoid undefined error in jinja
@@ -921,20 +977,39 @@ def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
 	prop_is_standard = prop.get("isStandard", False)
 	prop_value = prop.get("value")
 
-	if prop_value == "" or prop_value is None:
+	if prop_value is None and not prop_is_standard:
 		return "undefined"
 	if prop_type == "dynamic":
-		return f"{{{{ {data_key}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
+		return f"{{{{ {extract_data_key(data_key)}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
 	elif prop_type == "static":
 		if prop_is_standard:
 			# standard props are static only as of now
 			prop_value = parse_static_value(
-				prop.get("value"), prop.get("standardOptions", {}).get("type")
+				prop.get("value") or prop.get("standardOptions", {}).get("options", {}).get("defaultValue"),
+				prop.get("standardOptions", {}).get("type")
 			)
 		return prop_value
 	elif prop_type == "inherited":
 		values = map_of_inherited_props.get(prop_value, [])
-		return values[0] if values else "undefined"
+		return values[-1] if values else "undefined"
+
+
+def get_looping_vars(map_of_std_props_info, key):
+	if key in map_of_std_props_info:
+		std_prop_info = map_of_std_props_info[key][-1]
+		standard_options = std_prop_info.get("standardOptions", {})
+		if standard_options.get("type") == "array":
+			return ["item"] # TODO: allow custom item name
+		elif standard_options.get("type") == "object":
+			return ["key", "value"] # TODO: allow custom key, value names
+	return []
+
+def extract_data_key(data_key):
+	if isinstance(data_key, str):
+		return data_key
+	elif isinstance(data_key, dict):
+		return data_key.get("key")
+	return None
 
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index b619c7c06..553a27372 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -692,6 +692,7 @@ class Block implements BlockOptions {
 				key: "",
 				type: this.isImage() || this.isLink() ? "attribute" : "key",
 				property: this.isLink() ? "href" : this.isImage() ? "src" : "innerHTML",
+				comesFrom: "dataScript",
 			};
 		}
 		if (!value && key === "key") {
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index b86da28d8..653dfef9b 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -10,20 +10,21 @@ const component = ref<HTMLElement | null>(null);
 const props = defineProps<{
 	block: Block;
 	data?: Record<string, unknown> | null;
+	defaultProps?: Record<string, unknown> | null;
 }>();
 
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
-	if (props.data) {
+	if (props.data || props.defaultProps) {
 		const data = props.data; // to "freeze" props.data for getDataScriptValue
 		const getDataScriptValue = (path: string): any => {
-			return getDataForKey(data, path);
+			return getDataForKey(data || {}, path);
 		};
 		if (props.block.getDataKey("property") === "innerHTML") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
 				// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-				value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue);
+				value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue, props.defaultProps);
 			} else {
 				value = getDataScriptValue(props.block.getDataKey("key"));
 			}
@@ -36,7 +37,7 @@ const getDynamicContent = () => {
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
 				} else {
 					value = getDataScriptValue(dataKeyObj.key as string);
 				}
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 2cb4386f5..658097d6d 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -1,12 +1,15 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
 import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
-import { computed } from "vue";
+import { FeatherIcon } from "frappe-ui";
+import { computed, h } from "vue";
 
 const keyOptions = computed(() => {
 	const pageStore = usePageStore();
-	const result: string[] = [];
+	let result: { label: string; value: string; prefix: any }[] = [];
+	const repeatableDataKeys: string[] = [];
 	let collectionObject = pageStore.pageData;
 
 	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
@@ -26,7 +29,7 @@ const keyOptions = computed(() => {
 			const path = prefix ? `${prefix}.${key}` : key;
 
 			if (Array.isArray(value)) {
-				result.push(path);
+				repeatableDataKeys.push(path);
 			} else if (typeof value === "object" && value !== null) {
 				processObject(value, path);
 			}
@@ -34,10 +37,48 @@ const keyOptions = computed(() => {
 	}
 
 	processObject(collectionObject);
-	return result.map((key) => ({
-		label: key,
-		value: key,
-	}));
+
+	const repeatableProps: string[] = [];
+	
+	const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
+	const isPropsBasedRepeater =
+		isInsideRepeater &&
+		blockController.getFirstSelectedBlock()?.getRepeaterParent()?.getDataKey("comesFrom") === "props";
+	const propsOfComponentRoot = blockController.getComponentRootBlock()?.getBlockProps();
+	
+	if (propsOfComponentRoot && !isPropsBasedRepeater) {
+		Object.entries(propsOfComponentRoot).forEach(([key, value]) => {
+			if (
+				value.isStandard &&
+				(value.standardOptions?.type == "array" || value.standardOptions?.type == "object")
+			) {
+				repeatableProps.push(key);
+			}
+		});
+	}
+
+	repeatableDataKeys.forEach((item) => {
+		result.push({
+			label: item,
+			value: item,
+			prefix: h(FeatherIcon, {
+				name: "zap",
+				class: "size-3",
+			}),
+		});
+	});
+	repeatableProps.forEach((prop) => {
+		result.push({
+			label: prop,
+			value: `${prop}-from-std-prop`,
+			prefix: h(FeatherIcon, {
+				name: "git-commit",
+				class: "size-3",
+			}),
+		});
+	});
+
+	return result;
 });
 
 const collectionOptions = [
@@ -54,7 +95,20 @@ const collectionOptions = [
 		searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
 		events: {
 			"update:modelValue": (selectedOption: { label: string; value: string }) => {
-				blockController.setDataKey("key", selectedOption?.value);
+				let value = selectedOption?.value;
+				let comesFrom: BlockDataKey["comesFrom"] | "" = "dataScript";
+				if (
+					selectedOption?.label != selectedOption?.value &&
+					selectedOption?.value?.endsWith("-from-std-prop")
+				) {
+					value = selectedOption.value.replace("-from-std-prop", "");
+					comesFrom = "props";
+				}
+				if (!value && useCanvasStore().editingMode != "fragment") {
+					comesFrom = "";
+				}
+				blockController.setDataKey("key", value);
+				blockController.setDataKey("comesFrom", comesFrom);
 			},
 		},
 	},
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 7401bb693..39f2823a2 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -11,6 +11,7 @@
 		ref="component">
 		<BuilderBlock
 			:data="data"
+			:defaultProps="defaultProps"
 			:block="child"
 			:breakpoint="breakpoint"
 			:preview="preview"
@@ -55,12 +56,14 @@ const props = withDefaults(
 		breakpoint?: string;
 		preview?: boolean;
 		data?: Record<string, any> | null;
+		defaultProps?: Record<string, any> | null;
 	}>(),
 	{
 		isChildOfComponent: false,
 		breakpoint: "desktop",
 		preview: false,
 		data: null,
+		defaultProps: null,
 	},
 );
 
@@ -113,6 +116,7 @@ const attributes = computed(() => {
 		attribs.preview = props.preview;
 		attribs.breakpoint = props.breakpoint;
 		attribs.data = props.data;
+		attribs.defaultProps = props.defaultProps;
 	}
 
 	if (props.data) {
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index ce0f3897b..4fb600d9b 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -50,7 +50,7 @@
 				</ul>
 			</div>
 		</div>
-		<div class="flex items-center justify-end gap-2" v-if="dataArray.length !== 0">
+		<div class="flex items-center justify-end gap-2" v-if="filteredItems.length !== 0">
 			<div class="flex gap-2">
 				<Button variant="subtle" @click="builderStore.showDataScriptDialog = true">Edit Code</Button>
 				<Button variant="solid" @click="saveSelection" :disabled="!selectedItem">Set</Button>
@@ -64,7 +64,7 @@ import Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import { getCollectionKeys, getDataForKey, getPropValue } from "@/utils/helpers";
+import { getCollectionKeys, getDataForKey, getPropValue, getStandardPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
@@ -110,10 +110,48 @@ const dataArray = computed(() => {
 	return result;
 });
 
+const defaultProps = computed(() => {
+	const currentBlock = props.block || blockController.getFirstSelectedBlock();
+	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
+	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
+	if (repeaterRoot) {
+		const key = repeaterRoot.getDataKey("key");
+		const comesFrom = repeaterRoot.getDataKey("comesFrom");
+		if (key && comesFrom === "props") {
+			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
+			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+			if (!parsedValue) return {};
+			if (Array.isArray(parsedValue)) {
+				return {
+					item: {
+						value: parsedValue[0],
+						isStandard: false,
+						type: "static",
+					},
+				};
+			} else if (typeof parsedValue === "object") {
+				return {
+					key: {
+						value: Object.keys(parsedValue)[0],
+						isStandard: false,
+						type: "static",
+					},
+					value: {
+						value: parsedValue[Object.keys(parsedValue)[0]],
+						isStandard: false,
+						type: "static",
+					},
+				};
+			}
+		}
+	}
+	return {};
+});
+
 const getValue = (item: DynamicValueItem): any => {
 	if (item.comesFrom == "dataScript") return getDatScriptValue(item.key);
 	else
-		return getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue);
+		return getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue, defaultProps.value);
 };
 
 const getDatScriptValue = (path: string): any => {
@@ -139,7 +177,8 @@ const blockProps = computed(() => {
 const filteredItems = computed(() => {
 	const dataArrayItems = dataArray.value.map((item) => ({ key: item, comesFrom: "dataScript" }));
 	const propItems = Object.keys(blockProps.value).map((item) => ({ key: item, comesFrom: "props" }));
-	const allItems = [...dataArrayItems, ...propItems] as DynamicValueItem[];
+	const defaultPropsKeys = Object.keys(defaultProps.value || {}).map((item) => ({ key: item, comesFrom: "props" }));
+	const allItems = [...dataArrayItems, ...propItems, ...defaultPropsKeys] as DynamicValueItem[];
 	if (!searchQuery.value) return allItems;
 	const query = searchQuery.value.toLowerCase();
 	return allItems.filter(
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 5880adff0..f9963651e 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -7,7 +7,8 @@
 		</div>
 		<BuilderBlock
 			v-else
-			:data="_data"
+			:data="repeatingFrom == 'dataScript' ? _data : {}"
+			:defaultProps="repeatingFrom == 'props' ? _data : null"
 			:block="block.children[0]"
 			:preview="index !== 0 || preview"
 			:breakpoint="breakpoint"
@@ -19,9 +20,10 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import usePageStore from "@/stores/pageStore";
-import { getDataForKey } from "@/utils/helpers";
+import { getDataForKey, getStandardPropValue } from "@/utils/helpers";
 import { Ref, computed, ref } from "vue";
 import BuilderBlock from "./BuilderBlock.vue";
+import blockController from "@/utils/blockController";
 
 const pageStore = usePageStore();
 
@@ -40,14 +42,53 @@ const props = withDefaults(
 
 const component = ref(null) as Ref<HTMLElement | null>;
 
+const repeatingFrom = computed(() => {
+	return props.block.getDataKey("comesFrom");
+});
+
 const blockData = computed(() => {
 	const pageData = props.data || pageStore.pageData;
-	if (pageData && props.block.getDataKey("key")) {
-		const data = getDataForKey(pageData, props.block.getDataKey("key"));
+	const key = props.block.getDataKey("key");
+	if (pageData && repeatingFrom.value === "dataScript" && key) {
+		const data = getDataForKey(pageData, key);
 		if (Array.isArray(data)) {
 			return data.slice(0, 100);
 		}
 		return data;
+	} else if (repeatingFrom.value == "props" && key) {
+		const defaultProps: BlockProps[] = [];
+		const componentRoot = blockController.getComponentRootBlock(props.block);
+		const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+		if (Array.isArray(parsedValue)) {
+			parsedValue.slice(0, 100).forEach((item: any) =>
+				defaultProps.push({
+					item: {
+						value: item,
+						isStandard: false,
+						type: "static",
+					},
+				}),
+			);
+		} else if (typeof parsedValue === "object" && parsedValue !== null) {
+			Object.entries(parsedValue)
+				.slice(0, 100)
+				.forEach(([key, value]) => {
+					defaultProps.push({
+						key: {
+							value: key,
+							isStandard: false,
+							type: "static",
+						},
+						value: {
+							value: typeof value !== "string" ? JSON.stringify(value) : value,
+							isStandard: false,
+							type: "static",
+						},
+					});
+				});
+		}
+
+		return defaultProps;
 	} else {
 		return [{}];
 	}
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index a83b316b8..515b53e66 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -223,11 +223,13 @@ const props = withDefaults(
 		block: Block;
 		preview?: boolean;
 		data?: Record<string, any>;
+		defaultProps?: Record<string, any> | null;
 		breakpoint?: string;
 	}>(),
 	{
 		preview: false,
 		data: () => ({}),
+		defaultProps: null,
 		breakpoint: "desktop",
 	},
 );
@@ -263,7 +265,7 @@ const FontFamilyPasteRule = Extension.create({
 
 const textContent = computed(() => {
 	let innerHTML = props.block.getInnerHTML();
-	if (props.data) {
+	if (props.data || props.defaultProps) {
 		const dynamicContent = getDynamicContent();
 		if (dynamicContent) {
 			innerHTML = dynamicContent;
@@ -281,7 +283,7 @@ const getDynamicContent = () => {
 		let value;
 		if (props.block.getDataKey("comesFrom") === "props") {
 			// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-			value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue);
+			value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue, props.defaultProps);
 		} else {
 			value = getDataScriptValue(props.block.getDataKey("key"));
 		}
@@ -294,7 +296,7 @@ const getDynamicContent = () => {
 		?.forEach((dataKeyObj: BlockDataKey) => {
 			let value;
 			if (dataKeyObj.comesFrom === "props") {
-				value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+				value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
 			} else {
 				value = getDataScriptValue(dataKeyObj.key as string);
 			}
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index aff565328..289f9ffe4 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -301,6 +301,25 @@ const blockController = {
 			block.unsetLink();
 		});
 	},
+	getComponentRootBlock: (block?: Block) : Block => {
+		if (!block) {
+			block = blockController.getFirstSelectedBlock();
+		}
+		const editingMode = canvasStore.editingMode;
+
+		if (editingMode == "fragment") {
+			while (block && block.getParentBlock()) {
+				block = block.getParentBlock()!;
+			}
+			return block;
+		} else {
+			while (block && block.isExtendedFromComponent()) {
+				if (block.extendedFromComponent) break;
+				block = block.getParentBlock()!;
+			}
+			return block;
+		}
+	},
 	getBlockScript: () => {
 		return blockController.getSelectedBlocks()[0]?.getBlockScript(); // TODO: change to first selected block
 	},
@@ -312,7 +331,7 @@ const blockController = {
 	},
 	setBlockProp: (key: string, value: string) => {
 		const allProps = blockController.getBlockProps();
-		if(!allProps) return;
+		if (!allProps) return;
 		const updatedProps = {
 			...allProps,
 			[key]: {
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 4e1dcf4c4..618afa8f7 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -882,7 +882,8 @@ function getCollectionKeys(block: any): string[] {
 	const keys: string[] = [];
 	if (repeaterBlock) {
 		const collectionKey = repeaterBlock.getDataKey("key");
-		if (collectionKey) {
+		const comesFrom = repeaterBlock.getDataKey("comesFrom");
+		if (collectionKey && comesFrom == "dataScript") {
 			keys.push(collectionKey);
 		}
 		const parentKeys: string[] = getCollectionKeys(repeaterBlock);
@@ -918,7 +919,15 @@ const getValueForInheritedProp = (propName: string, block: Block, getDatScriptVa
 	return undefined;
 };
 
-const getPropValue = (propName: string, block: Block, getDatScriptValue: (path: string) => any): any => {
+const getPropValue = (
+	propName: string,
+	block: Block,
+	getDatScriptValue: (path: string) => any,
+	defaultProps?: Record<string, any> | null,
+): any => {
+	if (defaultProps && defaultProps[propName] !== undefined) {
+		return defaultProps[propName].value;
+	}
 	const blockProps = block.getBlockProps();
 	if (blockProps[propName]) {
 		const prop = blockProps[propName];
@@ -935,6 +944,36 @@ const getPropValue = (propName: string, block: Block, getDatScriptValue: (path:
 	return undefined;
 };
 
+const getStandardPropValue = (
+	propName: string,
+	componentRoot: Block,
+): { value: any; options: Record<string, any> } | undefined => {
+	const propsOfComponentRoot = componentRoot.getBlockProps();
+	if (propsOfComponentRoot) {
+		for (const [name, value] of Object.entries(propsOfComponentRoot)) {
+			if (propName === name && value.isStandard) {
+				if (value.standardOptions?.type !== "string" && value.standardOptions?.type !== "select") {
+					const parsedValue = value.value
+						? JSON.parse(value.value)
+						: value.standardOptions?.options?.defaultValue || null;
+					return {
+						value: parsedValue,
+						options: value.standardOptions?.options || {},
+					};
+				} else {
+					return {
+						value: value.value || value.standardOptions?.options?.defaultValue || null,
+						options: value.standardOptions?.options || {},
+					};
+				}
+			}
+		}
+		return undefined;
+	} else {
+		return undefined;
+	}
+};
+
 export {
 	addPxToNumber,
 	alert,
@@ -987,4 +1026,5 @@ export {
 	triggerCopyEvent,
 	uploadImage,
 	getPropValue,
+	getStandardPropValue,
 };

From f26c0f8007cd508d144c580121d81313fc6a87f8 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 26 Nov 2025 22:22:48 +0530
Subject: [PATCH 083/547] fix: comesFrom always checks for props first to
 default to dataScript

---
 frontend/src/components/BuilderBlock.vue       | 12 ++++++------
 .../Controls/DynamicValueHandler.vue           | 18 ++++++++++++++----
 .../components/Controls/PropertyControl.vue    |  4 ++--
 frontend/src/components/DataLoaderBlock.vue    |  2 +-
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 39f2823a2..0bc963baf 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -126,10 +126,10 @@ const attributes = computed(() => {
 		};
 		if (props.block.getDataKey("type") === "attribute") {
 			let value;
-			if (props.block.getDataKey("comesFrom") === "dataScript") {
-				value = getDataScriptValue(props.block.getDataKey("key") as string);
-			} else {
+			if (props.block.getDataKey("comesFrom") === "props") {
 				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue);
+			} else {
+				value = getDataScriptValue(props.block.getDataKey("key") as string);
 			}
 			attribs[props.block.getDataKey("property") as string] =
 				value ?? attribs[props.block.getDataKey("property") as string];
@@ -141,10 +141,10 @@ const attributes = computed(() => {
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				const property = dataKeyObj.property as string;
 				let value;
-				if (dataKeyObj.comesFrom === "dataScript") {
-					value = getDataScriptValue(dataKeyObj.key as string);
-				} else {
+				if (dataKeyObj.comesFrom === "props") {
 					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+				} else {
+					value = getDataScriptValue(dataKeyObj.key as string);
 				}
 				attribs[property] = value ?? attribs[property];
 			});
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 4fb600d9b..83cc915e7 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -149,9 +149,16 @@ const defaultProps = computed(() => {
 });
 
 const getValue = (item: DynamicValueItem): any => {
-	if (item.comesFrom == "dataScript") return getDatScriptValue(item.key);
-	else
-		return getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue, defaultProps.value);
+	if (item.comesFrom == "props") {
+		return getPropValue(
+			item.key,
+			props.block || blockController.getFirstSelectedBlock(),
+			getDatScriptValue,
+			defaultProps.value,
+		);
+	} else {
+		return getDatScriptValue(item.key);
+	}
 };
 
 const getDatScriptValue = (path: string): any => {
@@ -177,7 +184,10 @@ const blockProps = computed(() => {
 const filteredItems = computed(() => {
 	const dataArrayItems = dataArray.value.map((item) => ({ key: item, comesFrom: "dataScript" }));
 	const propItems = Object.keys(blockProps.value).map((item) => ({ key: item, comesFrom: "props" }));
-	const defaultPropsKeys = Object.keys(defaultProps.value || {}).map((item) => ({ key: item, comesFrom: "props" }));
+	const defaultPropsKeys = Object.keys(defaultProps.value || {}).map((item) => ({
+		key: item,
+		comesFrom: "props",
+	}));
 	const allItems = [...dataArrayItems, ...propItems, ...defaultPropsKeys] as DynamicValueItem[];
 	if (!searchQuery.value) return allItems;
 	const query = searchQuery.value.toLowerCase();
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index df182b15a..1bb7e7028 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -76,8 +76,8 @@
 					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 					@click.stop="showDynamicValueModal = true"
 					v-if="dynamicValue?.key">
-					<FeatherIcon v-if="dynamicValue?.comesFrom == 'dataScript'" name="zap" class="size-3"></FeatherIcon>
-					<FeatherIcon v-else name="git-commit" class="size-3"></FeatherIcon>
+					<FeatherIcon v-if="dynamicValue?.comesFrom == 'props'" name="git-commit" class="size-3"></FeatherIcon>
+					<FeatherIcon v-else name="zap" class="size-3"></FeatherIcon>
 					<span class="truncate">{{ dynamicValue.key }}</span>
 				</div>
 				<button
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index f9963651e..b30a9a431 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -43,7 +43,7 @@ const props = withDefaults(
 const component = ref(null) as Ref<HTMLElement | null>;
 
 const repeatingFrom = computed(() => {
-	return props.block.getDataKey("comesFrom");
+	return props.block.getDataKey("comesFrom") || "dataScript";
 });
 
 const blockData = computed(() => {

From 028547623909828d49334b8ce13ced8dc3679367 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 26 Nov 2025 22:33:33 +0530
Subject: [PATCH 084/547] fix: reverting back to script tag in each individual
 tags

this is because props which are dynamic and depend on loop variables as in for eg {{ key_item.val }} go out of the loop block {% for item in arr %} ... {% endfor %} when all scripts are added in one place
---
 builder/builder/doctype/builder_page/builder_page.py | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 7559d748a..873e1b3b9 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -674,14 +674,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
 				print("probps obj js: ", props_obj)
 				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(props_obj) or '{}'});"
-				print("Script content: ", script_content)
-				all_block_scripts.append(script_content)
 				tag.attrs["data-block-id"] = block_unique_id
-			if block.get("blockId") == "root":
-				for script in all_block_scripts:
-					script_tag = soup.new_tag("script")
-					script_tag.string = script
-					tag.append(script_tag)
+				script_tag = soup.new_tag("script")
+				script_tag.string = script_content
+				tag.append(script_tag)
 
 			return tag, to_jinja_literal(props_obj), to_jinja_literal(std_props_obj) if std_props_obj else None
 

From 82f7dc156f137002902b0f5f16d9f95001ff273f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 26 Nov 2025 22:49:18 +0530
Subject: [PATCH 085/547] fix: typo for function name

---
 .../src/components/Controls/DynamicValueHandler.vue    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 83cc915e7..b88fccbd2 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -153,15 +153,15 @@ const getValue = (item: DynamicValueItem): any => {
 		return getPropValue(
 			item.key,
 			props.block || blockController.getFirstSelectedBlock(),
-			getDatScriptValue,
+			getDataScriptValue,
 			defaultProps.value,
 		);
 	} else {
-		return getDatScriptValue(item.key);
+		return getDataScriptValue(item.key);
 	}
 };
 
-const getDatScriptValue = (path: string): any => {
+const getDataScriptValue = (path: string): any => {
 	let collectionObject = pageStore.pageData;
 
 	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
@@ -194,9 +194,9 @@ const filteredItems = computed(() => {
 	return allItems.filter(
 		(item) =>
 			item.key.toLowerCase().includes(query) ||
-			String(getDatScriptValue(item.key)).toLowerCase().includes(query) ||
+			String(getDataScriptValue(item.key)).toLowerCase().includes(query) ||
 			String(
-				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDatScriptValue),
+				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDataScriptValue),
 			)
 				.toLowerCase()
 				.includes(query),

From efacaa756ed0a3361794c65428eb4c756091495c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 27 Nov 2025 15:00:22 +0530
Subject: [PATCH 086/547] fix: minor fixes

- getPropValue and getValueForInheritedProp now returns default values for std. props in specific conditions
- defaultValue in StringOptions updates properly
- No dynamic values message shown in required conditions
- removing defaultValue from standardOptions and moving it to standardOptions.options
---
 .../Controls/DynamicValueHandler.vue          |  7 ++++---
 .../components/PropsOptions/StringOptions.vue |  3 ++-
 .../src/components/PropsPopoverContent.vue    |  8 ++++----
 frontend/src/utils/helpers.ts                 | 20 +++++++++++++++++++
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index b88fccbd2..6c72f0451 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -35,7 +35,7 @@
 						</div>
 					</li>
 					<li
-						v-if="filteredItems.length === 0 && !selectedItem"
+						v-if="filteredItems.length === 0 && !selectedItem?.key"
 						class="flex flex-col items-center justify-center p-10 text-center text-sm text-ink-gray-5">
 						<div>
 							No dynamic values found. Please add using
@@ -43,8 +43,9 @@
 								href="#"
 								@click="builderStore.showDataScriptDialog = true"
 								class="text-ink-gray-5 underline hover:text-ink-gray-7">
-								Data Script
+								Data Script,
 							</a>
+							or block props.
 						</div>
 					</li>
 				</ul>
@@ -53,7 +54,7 @@
 		<div class="flex items-center justify-end gap-2" v-if="filteredItems.length !== 0">
 			<div class="flex gap-2">
 				<Button variant="subtle" @click="builderStore.showDataScriptDialog = true">Edit Code</Button>
-				<Button variant="solid" @click="saveSelection" :disabled="!selectedItem">Set</Button>
+				<Button variant="solid" @click="saveSelection" :disabled="!selectedItem?.key">Set</Button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/components/PropsOptions/StringOptions.vue b/frontend/src/components/PropsOptions/StringOptions.vue
index 306a63b75..91940b224 100644
--- a/frontend/src/components/PropsOptions/StringOptions.vue
+++ b/frontend/src/components/PropsOptions/StringOptions.vue
@@ -25,8 +25,9 @@ const emit = defineEmits<{
 const defaultValue = ref(props.options?.defaultValue);
 
 const handleDefaultValueChange = (value: string) => {
+	defaultValue.value = value;
 	emit("update:options", {
-		defaultValue: defaultValue.value,
+		defaultValue: value,
 	});
 };
 
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index d9d75660b..62d992727 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -193,8 +193,8 @@ const standardPropOptions = reactive<BlockPropsStandardOptions>(
 		: {
 				isRequired: false,
 				type: "string",
-				defaultValue: "",
-				options: [],
+				// defaultValue: "",
+				options: {},
 				dependencies: {},
 		  },
 );
@@ -409,8 +409,8 @@ const reset = async (keepParams: {
 		Object.assign(standardPropOptions, {
 			isRequired: false,
 			type: standardPropOptions.type,
-			defaultValue: "",
-			options: [],
+			// defaultValue: "",
+			options: {},
 			dependencies: {},
 		});
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 618afa8f7..a905218f2 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -908,6 +908,19 @@ const getValueForInheritedProp = (propName: string, block: Block, getDatScriptVa
 				if (matchingProp.type === "dynamic" && matchingProp.value) {
 					return getDatScriptValue(matchingProp.value);
 				} else {
+					if (matchingProp.isStandard && matchingProp.standardOptions) {
+						if (matchingProp.standardOptions.type !== "string" && matchingProp.standardOptions.type !== "select") {
+							return matchingProp.value
+								? JSON.parse(matchingProp.value)
+								: matchingProp.standardOptions?.options?.defaultValue || null;
+						} else {
+							return (
+								matchingProp.value ||
+								matchingProp.standardOptions?.options?.defaultValue ||
+								null
+							);
+						}
+					}
 					return matchingProp.value;
 				}
 			} else {
@@ -938,6 +951,13 @@ const getPropValue = (
 				return getValueForInheritedProp(prop.value, block, getDatScriptValue);
 			}
 		} else {
+			if (prop.isStandard && prop.standardOptions) {
+				if (prop.standardOptions.type !== "string" && prop.standardOptions.type !== "select") {
+					return prop.value ? JSON.parse(prop.value) : prop.standardOptions?.options?.defaultValue || null;
+				} else {
+					return prop.value || prop.standardOptions?.options?.defaultValue || null;
+				}
+			}
 			return prop.value;
 		}
 	}

From 3a633d9b9fde965b5825e57eb9f18955bdaeca6c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 28 Nov 2025 09:00:30 +0530
Subject: [PATCH 087/547] fix: Retain page URL param on page refresh

---
 frontend/src/utils/useBuilderEvents.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index baf1e09a5..7512ca458 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -410,7 +410,7 @@ export function useBuilderEvents(
 				webComponent.reload();
 				webPages.fetchOne.submit(pageStore.activePage?.name).then((doc: BuilderPage[]) => {
 					if (currentModified !== doc[0]?.modified) {
-						pageStore.setPage(route.params.pageId as string, false);
+						pageStore.setPage(route.params.pageId as string, false, route.query);
 					}
 				});
 			}

From e85a91b1d3db0498a7f7dd4e487d94c5a24d779a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 28 Nov 2025 16:58:21 +0530
Subject: [PATCH 088/547] fix: Analytics route filter

---
 frontend/src/components/Controls/Autocomplete.vue     | 11 ++++++++---
 frontend/src/components/Settings/AnalyticsFilters.vue |  1 +
 frontend/src/components/Settings/GlobalAnalytics.vue  |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 0465356fb..95d38f9ea 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -5,7 +5,7 @@
 		open-on-click
 		open-on-focus
 		:reset-search-term-on-blur="false">
-		<div class="relative">
+		<div class="relative" ref="containerRef">
 			<div
 				class="group form-input flex h-7 flex-1 items-center gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-ink-gray-8 transition-colors focus-within:ring-2 focus-within:ring-outline-gray-3 hover:border-outline-gray-2">
 				<div v-if="$slots.prefix" class="flex items-center pl-2">
@@ -43,7 +43,7 @@
 						</ComboboxLabel>
 						<ComboboxItem
 							v-else
-							:value="option"
+							:value="option.value"
 							:disabled="option.disabled"
 							class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
 							<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
@@ -125,6 +125,7 @@ const emit = defineEmits<{
 	blur: [];
 }>();
 
+const containerRef = ref<HTMLElement | null>(null);
 const isOpen = ref(false);
 const searchQuery = ref("");
 const asyncOptions = ref<Option[]>([]);
@@ -173,6 +174,10 @@ const clearSelection = () => {
 const handleEnter = (event: KeyboardEvent) => {
 	if (!props.allowArbitraryValue) return;
 
+	if (containerRef.value?.querySelector("[data-highlighted]")) {
+		return;
+	}
+
 	const inputValue = (event.target as HTMLInputElement)?.value?.trim();
 	if (inputValue) {
 		event.preventDefault();
@@ -192,7 +197,7 @@ const handleBlur = (event: FocusEvent) => {
 	emit("blur");
 };
 
-watch(searchQuery, (newQuery) => props.getOptions && refreshOptions(newQuery));
+watch(searchQuery, (newQuery: string) => props.getOptions && refreshOptions(newQuery));
 
 watch(
 	() => props.modelValue,
diff --git a/frontend/src/components/Settings/AnalyticsFilters.vue b/frontend/src/components/Settings/AnalyticsFilters.vue
index 1fc4e213b..261492f4d 100644
--- a/frontend/src/components/Settings/AnalyticsFilters.vue
+++ b/frontend/src/components/Settings/AnalyticsFilters.vue
@@ -5,6 +5,7 @@
 			placeholder="Filter by route"
 			v-model="modelRoute"
 			:getOptions="getRouteOptions"
+			:allowArbitraryValue="true"
 			:showInputAsOption="true"
 			class="w-44" />
 		<Select size="sm" v-model="modelRange" class="!w-32 pr-6" :options="rangeOptions" />
diff --git a/frontend/src/components/Settings/GlobalAnalytics.vue b/frontend/src/components/Settings/GlobalAnalytics.vue
index 6502e9af2..78efa40e0 100644
--- a/frontend/src/components/Settings/GlobalAnalytics.vue
+++ b/frontend/src/components/Settings/GlobalAnalytics.vue
@@ -10,7 +10,7 @@
 					:route="route"
 					:customDateRange="customDateRange"
 					@update:range="(val) => (range = val)"
-					@update:route="(val) => (route = val?.value)"
+					@update:route="(val) => (route = val)"
 					@update:customDateRange="(val) => (customDateRange = val)" />
 			</template>
 		</AnalyticsOverview>

From dae5cf4462b64265ea840c4f1cae4415f51642fc Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Fri, 28 Nov 2025 20:24:38 +0530
Subject: [PATCH 089/547] feat: added setting to exec block scripts in editor

---
 .../builder_settings/builder_settings.json    | 18 ++++++-
 .../builder_settings/builder_settings.py      |  2 +
 frontend/src/components/BuilderBlock.vue      | 49 +++++++++++++++++++
 frontend/src/components/BuilderSettings.vue   | 10 ++++
 .../components/Settings/GlobalDeveloper.vue   | 22 +++++++++
 frontend/src/types/Builder/BuilderSettings.ts |  4 +-
 6 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Settings/GlobalDeveloper.vue

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index 5c927b034..6a7a00464 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -15,7 +15,9 @@
   "auto_convert_images_to_webp",
   "default_language",
   "landing_page_section",
-  "home_page"
+  "home_page",
+  "developer_options_section",
+  "execute_block_scripts_in_editor"
  ],
  "fields": [
   {
@@ -85,13 +87,24 @@
    "fieldtype": "Code",
    "label": "Body HTML",
    "options": "HTML"
+  },
+  {
+   "fieldname": "developer_options_section",
+   "fieldtype": "Section Break",
+   "label": "Developer Options"
+  },
+  {
+   "default": "1",
+   "fieldname": "execute_block_scripts_in_editor",
+   "fieldtype": "Check",
+   "label": "Execute Block Scripts in Editor"
   }
  ],
  "hide_toolbar": 1,
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-02-19 14:34:18.392867",
+ "modified": "2025-11-28 20:08:12.409061",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Settings",
@@ -113,6 +126,7 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": [],
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index cab59e0e8..7ff12e7c5 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -18,6 +18,8 @@ class BuilderSettings(Document):
 
 		auto_convert_images_to_webp: DF.Check
 		body_html: DF.Code | None
+		default_language: DF.Data | None
+		execute_block_scripts_in_editor: DF.Check
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		home_page: DF.Data | None
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 0bc963baf..e3c222f58 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -3,6 +3,7 @@
 		:is="getComponentName(block)"
 		:selected="isSelected"
 		:data-block-id="block.blockId"
+		:data-block-uid="uid"
 		:data-breakpoint="breakpoint"
 		:draggable="draggable"
 		:class="classes"
@@ -43,6 +44,7 @@ import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
+import { builderSettings } from "@/data/builderSettings";
 
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
@@ -79,6 +81,8 @@ const draggable = computed(() => {
 const isHovered = ref(false);
 const isSelected = ref(false);
 
+const uid = `builder-block-${props.block.blockId}-${Math.random().toString(36).substr(2, 9)}`;
+
 const getComponentName = (block: Block) => {
 	if (block.isRepeater()) {
 		return DataLoaderBlock;
@@ -260,6 +264,51 @@ onMounted(async () => {
 	}
 });
 
+const allResolvedProps = computed(() => {
+	return {
+		...props.defaultProps,
+		...Object.fromEntries(
+			Object.entries(props.block.getBlockProps()).map(([key, prop]) => {
+				return [
+					key,
+					getPropValue(key, props.block, (path: string) => {
+						return getDataForKey(props.data || {}, path);
+					}),
+				];
+			}),
+		),
+	};
+});
+
+watch(
+	[
+		component,
+		allResolvedProps,
+		() => props.block.getBlockScript(),
+		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
+	],
+	() => {
+		if (Boolean(builderSettings.doc?.execute_block_scripts_in_editor)) {
+			const scriptContent = `(function (props){ ${props.block.getBlockScript()} }).call(document.querySelector('[data-block-uid="${uid}"]'), ${
+				JSON.stringify(allResolvedProps.value) || "{}"
+			});`;
+			const script = document.createElement("script");
+			script.type = "text/javascript";
+			script.innerHTML = scriptContent;
+			script.id = `block-script-${uid}`;
+			const componentRef = component.value?.$el || component.value;
+			if (componentRef instanceof HTMLElement) {
+				const previousScript = componentRef.querySelector(`#block-script-${uid}`);
+				if (previousScript) {
+					componentRef.removeChild(previousScript);
+				}
+				componentRef.appendChild(script);
+			}
+		}
+	},
+	{ immediate: true, deep: true },
+);
+
 const isEditable = computed(() => {
 	// to ensure it is right block and not on different breakpoint
 	return (
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 88f341cb8..4416d6261 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -41,9 +41,12 @@ import ChartIcon from "./Icons/Chart.vue";
 import CodeIcon from "./Icons/Code.vue";
 import MetaIcon from "./Icons/Meta.vue";
 import SettingsIcon from "./Icons/Settings.vue";
+// @ts-ignore
+import TerminalIcon from "~icons/lucide/terminal";
 import GlobalAnalytics from "./Settings/GlobalAnalytics.vue";
 import GlobalCode from "./Settings/GlobalCode.vue";
 import GlobalGeneral from "./Settings/GlobalGeneral.vue";
+import GlobalDeveloper from "./Settings/GlobalDeveloper.vue";
 import PageAnalytics from "./Settings/PageAnalytics.vue";
 import PageGeneral from "./Settings/PageGeneral.vue";
 import PageMeta from "./Settings/PageMeta.vue";
@@ -125,6 +128,13 @@ const globalSettings = {
 			title: "Site Views",
 			icon: ChartIcon,
 		},
+		{
+			label: "Developer Settings",
+			value: "global_developer",
+			component: GlobalDeveloper,
+			title: "Developer Settings",
+			icon: TerminalIcon,
+		}
 	],
 };
 
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
new file mode 100644
index 000000000..7759c5b34
--- /dev/null
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -0,0 +1,22 @@
+<template>
+	<div class="flex flex-col gap-5">
+		<Switch
+			size="sm"
+			label="Execute Block Scripts in Editor"
+			description="Tries to best emulate how blocks will look like on the live site by executing Block Scripts."
+			:modelValue="Boolean(builderSettings.doc?.execute_block_scripts_in_editor)"
+			@update:modelValue="
+				(val: Boolean) => {
+					builderStore.updateBuilderSettings('execute_block_scripts_in_editor', val);
+				}
+			" />
+	</div>
+</template>
+<script setup lang="ts">
+import Switch from "@/components/Controls/Switch.vue";
+import { builderSettings } from "@/data/builderSettings";
+import useBuilderStore from "@/stores/builderStore";
+
+const builderStore = useBuilderStore();
+
+</script>
diff --git a/frontend/src/types/Builder/BuilderSettings.ts b/frontend/src/types/Builder/BuilderSettings.ts
index 44124a147..86446f2ee 100644
--- a/frontend/src/types/Builder/BuilderSettings.ts
+++ b/frontend/src/types/Builder/BuilderSettings.ts
@@ -29,5 +29,7 @@ export interface BuilderSettings{
 	/**	Default Language : Data - Default language code for HTML lang attribute (e.g., en, es, fr, de)	*/
 	default_language?: string
 	/**	Home Page : Data	*/
-	home_page?: string
+	home_page?: string,
+	/**	Execute Block Scripts in Editor : Check - Tries to best emulate how blocks will look like on the live site by executing Block Scripts.	*/
+	execute_block_scripts_in_editor?: 0 | 1
 }
\ No newline at end of file

From 18ac5e9d67fb3c89c2802395441f6b594215b1fc Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 30 Nov 2025 00:45:25 +0530
Subject: [PATCH 090/547] fix: safer execute block scripts

---
 frontend/src/components/BuilderBlock.vue      |  28 ++--
 .../components/Settings/GlobalDeveloper.vue   |   9 +-
 frontend/src/utils/helpers.ts                 | 129 ++++++++++++++++++
 3 files changed, 145 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index e3c222f58..3aaacbff9 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -37,7 +37,7 @@
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
-import { getDataForKey, getPropValue } from "@/utils/helpers";
+import { getDataForKey, getPropValue, saferExecuteBlockScript } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
@@ -288,27 +288,17 @@ watch(
 		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
 	],
 	() => {
-		if (Boolean(builderSettings.doc?.execute_block_scripts_in_editor)) {
-			const scriptContent = `(function (props){ ${props.block.getBlockScript()} }).call(document.querySelector('[data-block-uid="${uid}"]'), ${
-				JSON.stringify(allResolvedProps.value) || "{}"
-			});`;
-			const script = document.createElement("script");
-			script.type = "text/javascript";
-			script.innerHTML = scriptContent;
-			script.id = `block-script-${uid}`;
-			const componentRef = component.value?.$el || component.value;
-			if (componentRef instanceof HTMLElement) {
-				const previousScript = componentRef.querySelector(`#block-script-${uid}`);
-				if (previousScript) {
-					componentRef.removeChild(previousScript);
-				}
-				componentRef.appendChild(script);
-			}
-		}
+		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps);
 	},
-	{ immediate: true, deep: true },
+	{ deep: true },
 );
 
+onMounted(() => {
+	if (builderSettings.doc?.execute_block_scripts_in_editor) {
+		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps);
+	}
+});
+
 const isEditable = computed(() => {
 	// to ensure it is right block and not on different breakpoint
 	return (
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 7759c5b34..1737f923b 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -3,13 +3,19 @@
 		<Switch
 			size="sm"
 			label="Execute Block Scripts in Editor"
-			description="Tries to best emulate how blocks will look like on the live site by executing Block Scripts."
+			description="Tries to best emulate how blocks will look like on the live site."
 			:modelValue="Boolean(builderSettings.doc?.execute_block_scripts_in_editor)"
 			@update:modelValue="
 				(val: Boolean) => {
 					builderStore.updateBuilderSettings('execute_block_scripts_in_editor', val);
 				}
 			" />
+		<div class="flex flex-col gap-2">
+			<p class="text-sm font-medium text-ink-gray-9">
+				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not perfectly replicate live site behavior. Executing
+				untrusted scripts could be unsafe.
+			</p>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -18,5 +24,4 @@ import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 
 const builderStore = useBuilderStore();
-
 </script>
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index a905218f2..9f31d19d8 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -994,6 +994,134 @@ const getStandardPropValue = (
 	}
 };
 
+/**
+ * Tries to execute user-provided script in a safer environment, (but not guarantee) restricting access to certain DOM properties and methods.
+ * It makes the editor canvas as the root (document), and thus limits the script's ability to manipulate the broader document.
+ * It tries to restrict escape hatches which could be used to access the global window or document objects.
+ * It tries to `wrap` all returned DOM nodes and collections to ensure they are also proxied.
+ * The `wrap` function creates proxies for DOM elements to intercept property access and method calls.
+ * 
+ * @param blockId - The ID of the block element to which the script is associated.
+ * @param userScript - The user-provided JavaScript code to execute.
+ * @param props - An optional object containing properties to be made available in the script's context.
+ */
+
+function saferExecuteBlockScript(
+	blockId: string,
+	userScript: string,
+	props: Record<string, any> = {},
+) {
+	const cache = new WeakMap();
+
+	const BLOCKED_GET = new Set([
+		"ownerDocument",
+		"document",
+		"defaultView",
+		"window",
+		"globalThis",
+		"parentElement",
+		"parentNode",
+		"innerHTML",
+		"outerHTML",
+	]);
+
+	const BLOCKED_SET = new Set([
+		"innerHTML",
+		"outerHTML",
+	]);
+
+	function wrap(value: Element | Node) {
+		if (value === null || typeof value !== "object") return value;
+		if (cache.has(value)) return cache.get(value);
+
+		const proxy = new Proxy(value, handler);
+		cache.set(value, proxy);
+		return proxy;
+	}
+
+	const handler = {
+		get(target: Element, prop: string, receiver: any) {
+
+			if (BLOCKED_GET.has(prop)) return undefined;
+
+			let val = Reflect.get(target, prop, receiver);
+
+			// Wrap DOM returns
+			if (val instanceof Node) return wrap(val);
+			if (val instanceof NamedNodeMap || val instanceof DOMTokenList || val instanceof CSSStyleDeclaration)
+				return wrap(val as any);
+
+			if (val instanceof NodeList || val instanceof HTMLCollection) {
+				return Array.from(val, wrap);
+			}
+
+			// Wrap functions (methods)
+			if (typeof val === "function") {
+				return (...args) => {
+					const realArgs = args.map((a) => cache.get(a) || a);
+
+					// Do not allow inserting nodes outside the sandbox
+					for (const a of realArgs) {
+						if (a instanceof Node && !sandboxRoot.contains(a)) {
+							throw new Error("Blocked: external node insertion");
+						}
+					}
+
+					const result = val.apply(target, realArgs);
+					return wrap(result);
+				};
+			}
+
+			return val; // primitive allowed
+		},
+
+		set(target: Element, prop: string, value: any) {
+			if (BLOCKED_SET.has(prop)) {
+				throw new Error(`Blocked: cannot set ${prop}`);
+			}
+
+			// Allow normal DOM props like src, value, className, id, etc.
+			try {
+				return Reflect.set(target as any, prop as any, value);
+			} catch {
+				return false;
+			}
+		},
+	};
+
+	const sandboxRoot = document.querySelector("[data-block-id='root']") as HTMLElement;
+	const thisElement = document.querySelector(`[data-block-id='${blockId}']`) as HTMLElement;
+
+	const proxiedRoot = wrap(sandboxRoot);
+	const proxiedThis = wrap(thisElement);
+
+	const context = {
+		document: proxiedRoot,
+		thisRef: proxiedThis,
+		props,
+		// Escape hatches blocked
+		window: undefined,
+		globalThis: undefined,
+		eval: undefined,
+		Function: undefined,
+		setTimeout: undefined,
+		setInterval: undefined,
+	};
+
+	const fn = new Function(
+		"context",
+		`with (context) {
+			return (function() { ${userScript} }).call(thisRef);
+		}`,
+	);
+
+	try {
+		fn.call(proxiedThis, context);
+	} catch (e) {
+		console.error("Error in user script:", e);
+	}
+}
+
 export {
 	addPxToNumber,
 	alert,
@@ -1047,4 +1175,5 @@ export {
 	uploadImage,
 	getPropValue,
 	getStandardPropValue,
+	saferExecuteBlockScript,
 };

From 357a896ab68ccaa522706805b7cee147868f1b14 Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 30 Nov 2025 15:01:37 +0530
Subject: [PATCH 091/547] refactor: better readability - builder_page.py

---
 .../doctype/builder_page/builder_page.py      | 143 +++++++++---------
 1 file changed, 69 insertions(+), 74 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 873e1b3b9..53d0ce704 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -490,36 +490,42 @@ def get_block_html(blocks):
 	font_map = {}
 
 	def get_html(blocks, soup):
-		map_of_inherited_props = {} # prop_name -> array<values>
-		map_of_std_props_info = {} # prop_name -> array<values>
+
+		# global map of inherited prop values
+     	# prop_name -> array<values>
+		# prop names act as variables and blocks provide scope, i.e., if a child block (inner scope) re-defines a prop with the same name as its parent (outer scope),
+		# for the child block and its children, the value from the child block will be used, and once the child block is processed, the value from the parent block will be restored.
+		# the array of values act as a stack to achieve this scoping behavior.
+		map_of_inherited_props = {}
+		
+		# same as above but for std. props info (not values), used to idenitfy the type of looping vars (array or object) in repeaters
+		map_of_std_props_info = {}
 		html = ""
-		all_block_scripts = []
 
 		def get_tag(block, soup, data_key=None, default_props=None):
 			block = extend_with_component(block)
 
-			# to be used in {% with %} statements
 			props_obj = {}
-			std_props_obj = {}
-
-			# to be used to pop last values from their resp maps
-			props_with_successors = []
-			std_props = []
    
 			if block.get("props"):
     
-				for key, value in block.get("props", {}).items():
-					interpreted_value = get_interpreted_prop_value(value, data_key, map_of_inherited_props)
-					props_obj[key] = interpreted_value
-     
-					if value.get('isStandard', False):
-						std_props_obj[key] = interpreted_value
-						std_props.append(key)
-						map_of_std_props_info.setdefault(key, []).append(value)
+				for prop_name, prop_info in block.get("props").items():
+        
+					is_inherited = prop_info.get('usedByCount', 0) > 0
+					is_standard = prop_info.get('isStandard', False)
+					interpreted_value = get_interpreted_prop_value(prop_info, data_key, map_of_inherited_props)
      
-					if value.get('usedByCount', 0) > 0:
-						props_with_successors.append(key)
-						map_of_inherited_props.setdefault(key, []).append(interpreted_value)
+					if is_standard:
+						map_of_std_props_info.setdefault(prop_name, []).append(prop_info)
+					if is_inherited:
+						map_of_inherited_props.setdefault(prop_name, []).append(interpreted_value)
+
+					props_obj[prop_name] = {"value": interpreted_value, "is_inherited": is_inherited, "is_standard": is_standard }
+			
+			# when inside props repeater, child blocks get the loop vars as their default props
+			if default_props:
+				for prop in default_props:
+					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_inherited": False, "is_standard": True}
 
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
@@ -595,47 +601,35 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
     
-			if default_props:
-				for prop in default_props:
-					props_obj[prop] = f"{{{{ {prop} }}}}"
 
 			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):    
 				_key = block.get("dataKey").get("key")
-				item_key = ""
+				loop_var = ""
 				next_data_key = None
 				next_default_props = None
-    
-				if block.get("dataKey").get("comesFrom", "dataScript") == "dataScript":
-					if data_key:
-						_key = f"{extract_data_key(data_key)}.{_key}"
-					item_key = f"key_{_key.replace('.', '__')}"
-					next_data_key = {"key": item_key, "comesFrom": "dataScript"}
-     
-				if block.get("dataKey").get("comesFrom") == "props":
-					next_data_key = None
-					looping_vars = get_looping_vars(map_of_std_props_info, _key)
-					next_default_props = looping_vars
-					item_key = ", ".join(looping_vars)
+					
+				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+					loop_vars = get_loop_vars(map_of_std_props_info, _key)
+					next_default_props = loop_vars
+
+					loop_var = ", ".join(loop_vars) # `item` for array and `key, value` for object
 					_key = f"std_props['{_key}']"
-					if len(looping_vars) > 1: # object repeater
+
+					if len(loop_vars) > 1: # object repeater
 						_key = f"{_key}.items()"
+				else:
+					if data_key:
+						_key = f"{extract_data_key(data_key)}.{_key}"
+					loop_var = f"key_{_key.replace('.', '__')}"
+					next_data_key = {"key": loop_var, "comesFrom": "dataScript"}
 
 				if  default_props: # carried over from parent repeater
 					next_default_props = default_props + (next_default_props or [])
 
-				tag.append(f"{{% for {item_key} in {_key} %}}")
+				tag.append(f"{{% for {loop_var} in {_key} %}}")
     
 				child_tag, child_tag_props, child_tag_std_props = get_tag(block.get("children")[0], soup, next_data_key, next_default_props)
-    
-				if child_tag_std_props:
-					tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
-     
-				tag.append(f"{{% with props = {child_tag_props} %}}")
-				tag.append(child_tag)
-				tag.append("{% endwith %}")
-    
-				if child_tag_std_props:
-					tag.append("{% endwith %}")
+				append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
      
 				tag.append("{% endfor %}")
 			else:
@@ -648,16 +642,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 						tag.append(f"{{% if {key} %}}")
 
 					child_tag, child_tag_props, child_tag_std_props = get_tag(child, soup, data_key=data_key, default_props=default_props)
-
-					if child_tag_std_props:
-						tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
-
-					tag.append(f"{{% with props = {child_tag_props} %}}")
-					tag.append(child_tag)
-					tag.append("{% endwith %}")
-
-					if child_tag_std_props:
-						tag.append("{% endwith %}")
+					append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
 
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
@@ -665,21 +650,24 @@ def get_tag(block, soup, data_key=None, default_props=None):
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
-			for prop in props_with_successors:
-				map_of_inherited_props[prop].pop()
-			for prop in std_props:
-				map_of_std_props_info[prop].pop()
+			for prop_name, prop_info in props_obj.items():
+				if prop_info.get("is_inherited"):
+					map_of_inherited_props[prop_name].pop()
+				if prop_info.get("is_standard"):
+					map_of_std_props_info[prop_name].pop()
+    
+			normal_props = {k: v["value"] for k, v in props_obj.items() if not v.get("is_standard")}
+			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
 
 			if block.get("blockScript"):
-				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"
-				print("probps obj js: ", props_obj)
-				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(props_obj) or '{}'});"
+				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}" # extra hash as repeating blocks have same blockId
+				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(normal_props) or '{}'});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)
 
-			return tag, to_jinja_literal(props_obj), to_jinja_literal(std_props_obj) if std_props_obj else None
+			return tag, to_jinja_literal(normal_props), to_jinja_literal(std_props) if std_props else None
 
 		for block in blocks:
 			tag, props, std_props = get_tag(block, soup)
@@ -831,33 +819,40 @@ def extend_block(block, overridden_block):
 	block["children"] = extended_children
 	return block
 
+def append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props):
+	if child_tag_std_props:
+		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
+  
+	tag.append(f"{{% with props = {child_tag_props} %}}")
+	tag.append(child_tag)
+	tag.append("{% endwith %}")
+ 
+	if child_tag_std_props:
+		tag.append("{% endwith %}")
+
 def to_jinja_literal(obj):
-    # 1. Detect Jinja expressions inside strings (e.g. "{{ sample }}")
+    # detect Jinja expressions inside strings (e.g. "{{ sample }}")
     if isinstance(obj, str):
         stripped = obj.strip()
         if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
             # remove the {{ }} so Jinja receives the variable
             inner = stripped[2:-2].strip()
-            return inner  # <-- returned unquoted
-        return repr(obj)  # normal python string
+            return inner  # returned unquoted
+        return repr(obj)
 
-    # 2. Booleans / None
     if obj is True: return "True"
     if obj is False: return "False"
     if obj is None: return "None"
 
-    # 3. Dict
     if isinstance(obj, dict):
         parts = []
         for k, v in obj.items():
             parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
         return "{ " + ", ".join(parts) + " }"
 
-    # 4. List / tuple
     if isinstance(obj, (list, tuple)):
         return "[ " + ", ".join(to_jinja_literal(i) for i in obj) + " ]"
 
-    # 5. Numbers or other primitives
     return repr(obj)
 
 
@@ -990,7 +985,7 @@ def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
 		return values[-1] if values else "undefined"
 
 
-def get_looping_vars(map_of_std_props_info, key):
+def get_loop_vars(map_of_std_props_info, key):
 	if key in map_of_std_props_info:
 		std_prop_info = map_of_std_props_info[key][-1]
 		standard_options = std_prop_info.get("standardOptions", {})

From 288dbd5614e20fdeb19470f0b39fc31074700612 Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 30 Nov 2025 15:10:22 +0530
Subject: [PATCH 092/547] fix: escape single quotes for props

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 53d0ce704..283a67d9f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -613,7 +613,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 					next_default_props = loop_vars
 
 					loop_var = ", ".join(loop_vars) # `item` for array and `key, value` for object
-					_key = f"std_props['{_key}']"
+					_key = f"std_props['{escape_single_quotes(_key)}']"
 
 					if len(loop_vars) > 1: # object repeater
 						_key = f"{_key}.items()"
@@ -867,7 +867,7 @@ def set_dynamic_content_placeholder(block, data_key=False):
 		if dynamic_value_doc and dynamic_value_doc.get("key"):
 			key = ""
 			if(dynamic_value_doc.get("comesFrom") == "props"):
-				key = f"props['{dynamic_value_doc.get('key')}']"
+				key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
 			else:
 				key = f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
 				if data_key:

From c8f39351016924b902e1381a7194167f6eefc46d Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Sun, 30 Nov 2025 23:50:27 +0530
Subject: [PATCH 093/547] refactor: removed usedByCount dependency

this trades off  slightly more perfomance and memory overhead for cleaner and more stable code and also better readability
---
 .../doctype/builder_page/builder_page.py      | 23 ++++-----
 frontend/src/builder.d.ts                     |  1 -
 frontend/src/components/BlockLayers.vue       | 51 +------------------
 .../BlockPropertySections/PropsSection.ts     |  4 --
 .../src/components/PropsDependencyEditor.vue  |  1 -
 frontend/src/components/PropsEditor.vue       | 17 -------
 frontend/src/utils/blockController.ts         | 35 +------------
 frontend/src/utils/builderBlockCopyPaste.ts   | 13 +----
 frontend/src/utils/useBuilderEvents.ts        |  7 ---
 frontend/src/utils/useCanvasUtils.ts          |  7 ---
 10 files changed, 13 insertions(+), 146 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 283a67d9f..398e16089 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -491,12 +491,12 @@ def get_block_html(blocks):
 
 	def get_html(blocks, soup):
 
-		# global map of inherited prop values
+		# global map of prop values
      	# prop_name -> array<values>
 		# prop names act as variables and blocks provide scope, i.e., if a child block (inner scope) re-defines a prop with the same name as its parent (outer scope),
 		# for the child block and its children, the value from the child block will be used, and once the child block is processed, the value from the parent block will be restored.
 		# the array of values act as a stack to achieve this scoping behavior.
-		map_of_inherited_props = {}
+		map_of_prop_values = {}
 		
 		# same as above but for std. props info (not values), used to idenitfy the type of looping vars (array or object) in repeaters
 		map_of_std_props_info = {}
@@ -511,21 +511,19 @@ def get_tag(block, soup, data_key=None, default_props=None):
     
 				for prop_name, prop_info in block.get("props").items():
         
-					is_inherited = prop_info.get('usedByCount', 0) > 0
 					is_standard = prop_info.get('isStandard', False)
-					interpreted_value = get_interpreted_prop_value(prop_info, data_key, map_of_inherited_props)
-     
+					interpreted_value = get_interpreted_prop_value(prop_info, data_key, map_of_prop_values)
+
+					map_of_prop_values.setdefault(prop_name, []).append(interpreted_value)
 					if is_standard:
 						map_of_std_props_info.setdefault(prop_name, []).append(prop_info)
-					if is_inherited:
-						map_of_inherited_props.setdefault(prop_name, []).append(interpreted_value)
 
-					props_obj[prop_name] = {"value": interpreted_value, "is_inherited": is_inherited, "is_standard": is_standard }
+					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard }
 			
 			# when inside props repeater, child blocks get the loop vars as their default props
 			if default_props:
 				for prop in default_props:
-					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_inherited": False, "is_standard": True}
+					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": True}
 
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
@@ -651,8 +649,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
 			for prop_name, prop_info in props_obj.items():
-				if prop_info.get("is_inherited"):
-					map_of_inherited_props[prop_name].pop()
+				map_of_prop_values[prop_name].pop()
 				if prop_info.get("is_standard"):
 					map_of_std_props_info[prop_name].pop()
     
@@ -963,7 +960,7 @@ def parse_static_value(value: str, prop_type: str):
 			return f"{value}"
 
 
-def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
+def get_interpreted_prop_value(prop, data_key, map_of_prop_values):
 	prop_type = prop["type"]
 	prop_is_standard = prop.get("isStandard", False)
 	prop_value = prop.get("value")
@@ -981,7 +978,7 @@ def get_interpreted_prop_value(prop, data_key, map_of_inherited_props):
 			)
 		return prop_value
 	elif prop_type == "inherited":
-		values = map_of_inherited_props.get(prop_value, [])
+		values = map_of_prop_values.get(prop_value, [])
 		return values[-1] if values else "undefined"
 
 
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 534ac5168..225440e9f 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -19,7 +19,6 @@ declare type BlockProps = Record<
 	{
 		type: "dynamic" | "static" | "inherited";
 		value: string?;
-		usedByCount?: number;
 		isStandard?: boolean;
 		standardOptions?: BlockPropsStandardOptions;
 	}
diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 84839f60f..42b95e4ab 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -6,8 +6,6 @@
 			:group="{ name: 'block-tree' }"
 			item-key="blockId"
 			@add="updateParent"
-			@end="handleDragEnd"
-			:move="handleDragMove"
 			:disabled="disableDraggable">
 			<template #item="{ element }">
 				<div
@@ -96,11 +94,10 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { FeatherIcon } from "frappe-ui";
-import { nextTick, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import draggable from "vuedraggable";
 import BlockLayers from "./BlockLayers.vue";
 import BlocksIcon from "./Icons/Blocks.vue";
-import blockController from "@/utils/blockController";
 
 type LayerInstance = InstanceType<typeof BlockLayers>;
 
@@ -231,52 +228,6 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
-const currentlyDraggingBlock = ref<Block | null>(null);
-
-const handleDragMove = (event: any) => {
-	const draggedBlock: Block = event.draggedContext.element;
-	if (!currentlyDraggingBlock.value) {
-		currentlyDraggingBlock.value = draggedBlock;
-
-		const canvasStore = useCanvasStore();
-		const pauseId = canvasStore.activeCanvas?.history?.pause();
-		
-		const listOfInheritedProps = [];
-		for (const propKey in draggedBlock.props) {
-			if (draggedBlock.props[propKey].type === "inherited" && draggedBlock.props[propKey].value) {
-				listOfInheritedProps.push(draggedBlock.props[propKey].value);
-			}
-		}
-		blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", draggedBlock);
-
-		nextTick(() => {
-			pauseId && canvasStore.activeCanvas?.history?.resume(pauseId);
-		});
-	}
-	return true; // Allow the move
-};
-
-const handleDragEnd = async () => {
-	await nextTick();
-	if (currentlyDraggingBlock.value) {
-		const listOfInheritedProps = [];
-		for (const propKey in currentlyDraggingBlock.value.props) {
-			if (
-				currentlyDraggingBlock.value.props[propKey].type === "inherited" &&
-				currentlyDraggingBlock.value.props[propKey].value
-			) {
-				listOfInheritedProps.push(currentlyDraggingBlock.value.props[propKey].value);
-			}
-		}
-		blockController.updateBlockPropsDependencyForAncestor(
-			listOfInheritedProps,
-			"add",
-			currentlyDraggingBlock.value,
-		);
-		currentlyDraggingBlock.value = null;
-	}
-};
-
 defineExpose({
 	toggleExpanded,
 	isExpandedInTree,
diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/PropsSection.ts
index f19dfcf26..653df95d6 100644
--- a/frontend/src/components/BlockPropertySections/PropsSection.ts
+++ b/frontend/src/components/BlockPropertySections/PropsSection.ts
@@ -21,10 +21,6 @@ const propsSection = [
 		searchKeyWords: "Props, Interface Props, Properties, Block Props, Block Properties",
 		events: {
 			"update:obj": (obj: BlockProps) => blockController.setBlockProps(obj), // TODO: race condition?
-			"update:ancestorUpdateDependency": (
-				propKey: string,
-				action: "add" | "remove", // TODO: better name?
-			) => blockController.updateBlockPropsDependencyForAncestor(propKey, action),
 		},
 	},
 ];
diff --git a/frontend/src/components/PropsDependencyEditor.vue b/frontend/src/components/PropsDependencyEditor.vue
index a8e994d71..b889500fd 100644
--- a/frontend/src/components/PropsDependencyEditor.vue
+++ b/frontend/src/components/PropsDependencyEditor.vue
@@ -77,7 +77,6 @@ const props = defineProps<{
 
 const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
-	"update:ancestorUpdateDependency": (propKey: string, action: "add" | "remove") => true,
 });
 
 const setSelectedOperator = (key: string, operator: string) => {
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index c5d40d40c..1190b65aa 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -52,7 +52,6 @@
 										class="flex-shrink-0 bg-transparent text-xs"
 										variant="subtle"
 										icon="edit-2"
-										:disabled="Boolean(value.usedByCount) || false"
 										@click.stop="
 											() => {
 												popupMode = 'edit';
@@ -70,7 +69,6 @@
 										class="flex-shrink-0 bg-transparent text-xs"
 										variant="subtle"
 										icon="x"
-										:disabled="Boolean(value.usedByCount) || false"
 										@click="deleteObjectKey(key as string)" />
 								</div>
 							</div>
@@ -190,7 +188,6 @@ const propsEditor = ref<HTMLElement | null>(null);
 
 const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
-	"update:ancestorUpdateDependency": (propKey: string, action: "add" | "remove") => true,
 });
 
 const addProp = async (name: string, value: BlockProps[string]) => {
@@ -199,9 +196,6 @@ const addProp = async (name: string, value: BlockProps[string]) => {
 	popupMode.value = "edit";
 	keyBeingEdited.value = name;
 	emit("update:obj", mapToObject(map));
-	if (value.type === "inherited" && value.value) {
-		emit("update:ancestorUpdateDependency", value.value, "add");
-	}
 	return map;
 };
 
@@ -214,10 +208,6 @@ const clearObjectValue = (map: Map<string, BlockProps[string]>, key: string) =>
 		type: "static",
 	});
 
-	if (oldValue?.type == "inherited" && oldValue?.value) {
-		emit("update:ancestorUpdateDependency", oldValue.value, "remove");
-	}
-
 	return map;
 };
 
@@ -244,12 +234,6 @@ const updateObjectValue = (
 		type: type as BlockProps[string]["type"],
 	});
 
-	if (path && type === "inherited") {
-		emit("update:ancestorUpdateDependency", path, "add");
-	}
-	if (oldPath && oldType === "inherited") {
-		emit("update:ancestorUpdateDependency", oldPath, "remove");
-	}
 	return map;
 };
 
@@ -301,7 +285,6 @@ const deleteObjectKey = (key: string) => {
 	const path = value?.value;
 	map.delete(key);
 	emit("update:obj", mapToObject(map));
-	if (path) emit("update:ancestorUpdateDependency", path, "remove");
 };
 
 watch([keyBeingEdited, () => props.obj], () => {
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 289f9ffe4..3da19ab33 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -301,7 +301,7 @@ const blockController = {
 			block.unsetLink();
 		});
 	},
-	getComponentRootBlock: (block?: Block) : Block => {
+	getComponentRootBlock: (block?: Block): Block => {
 		if (!block) {
 			block = blockController.getFirstSelectedBlock();
 		}
@@ -353,39 +353,6 @@ const blockController = {
 		});
 		Object.assign(block.props, props);
 	},
-	// TODO: should go in other file?
-	updateBlockPropsDependencyForAncestor: (
-		propKeys: string | string[],
-		action: "add" | "remove",
-		forSpecificBlock?: Block,
-	) => {
-		for (const propKey of Array.isArray(propKeys) ? propKeys : [propKeys]) {
-			let currentBlock = forSpecificBlock || blockController.getFirstSelectedBlock();
-			// go up the tree
-			let parentBlock: Block | null = currentBlock.getParentBlock();
-			while (parentBlock && !parentBlock.props?.[propKey]) {
-				parentBlock = parentBlock?.getParentBlock() || null;
-			}
-			if (parentBlock) {
-				let props = parentBlock.props;
-				if (props) {
-					let usedByCount = props[propKey]["usedByCount"];
-					if (action === "add") {
-						usedByCount = (usedByCount || 0) + 1;
-					} else {
-						usedByCount = Math.max((usedByCount || 0) - 1, 0);
-					}
-					parentBlock.setBlockProps({
-						...props,
-						[propKey]: {
-							...props[propKey],
-							usedByCount: usedByCount,
-						},
-					});
-				}
-			}
-		}
-	},
 };
 
 export default blockController;
diff --git a/frontend/src/utils/builderBlockCopyPaste.ts b/frontend/src/utils/builderBlockCopyPaste.ts
index 3d7cd7e7f..ecbe16d47 100644
--- a/frontend/src/utils/builderBlockCopyPaste.ts
+++ b/frontend/src/utils/builderBlockCopyPaste.ts
@@ -244,18 +244,7 @@ async function insertBlocks(blocks: (Block | BlockOptions)[]) {
 		while (parentBlock && !parentBlock.canHaveChildren()) {
 			parentBlock = parentBlock.getParentBlock() as Block;
 		}
-		const addedChildBlocks: Block[] = [];
-		blocks.forEach((block) => addedChildBlocks.push(parentBlock.addChild(getBlockCopy(block), null, true)));
-		await nextTick();
-		addedChildBlocks.forEach((block) => {
-			const listOfInheritedProps = [];
-			for (const propKey in block.props) {
-				if (block.props[propKey].type === "inherited" && block.props[propKey].value) {
-					listOfInheritedProps.push(block.props[propKey].value);
-				}
-			}
-			blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "add", block);
-		});
+		blocks.forEach((block) => parentBlock.addChild(getBlockCopy(block), null, true));
 	} else {
 		canvasStore.pushBlocks(blocks);
 	}
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index ec35e476c..14b4259f6 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -61,13 +61,6 @@ export function useBuilderEvents(
 		copySelectedBlocksToClipboard(e);
 		if (canvasStore.activeCanvas?.selectedBlocks.length) {
 			for (const block of canvasStore.activeCanvas?.selectedBlocks) {
-				const listOfInheritedProps = [];
-				for (const propKey in block.props) {
-					if (block.props[propKey].type === "inherited" && block.props[propKey].value) {
-						listOfInheritedProps.push(block.props[propKey].value);
-					}
-				}
-				blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", block);
 				canvasStore.activeCanvas?.removeBlock(block, true);
 			}
 			clearSelection();
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 055f73d15..8e4086628 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -254,13 +254,6 @@ export function useCanvasUtils(
 		}
 		const nextSibling = block.getSiblingBlock("next");
 		if (canvasStore.activeCanvas?.activeBreakpoint === "desktop" || force) {
-			const listOfInheritedProps = [];
-			for (const prop in block.props) {
-				if (block.props[prop].type === "inherited" && block.props[prop].value) {
-					listOfInheritedProps.push(block.props[prop].value);
-				}
-			}
-			blockController.updateBlockPropsDependencyForAncestor(listOfInheritedProps, "remove", block);
 			parentBlock.removeChild(block);
 		} else {
 			block.toggleVisibility(false);

From 86f976407de7ee9d31b883a720e9c37ea15e0ef4 Mon Sep 17 00:00:00 2001
From: sntn <stravoone@gmail.com>
Date: Mon, 1 Dec 2025 00:00:33 +0530
Subject: [PATCH 094/547] fix: make block script reactive

---
 frontend/src/block.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 553a27372..c4b4a7df9 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -99,7 +99,7 @@ class Block implements BlockOptions {
 		this.tabletStyles = reactive(options.tabletStyles || {});
 		this.attributes = reactive(options.attributes || {});
 		this.dynamicValues = reactive(options.dynamicValues || []);
-		this.blockScript = options.blockScript || "";
+		this.blockScript = reactive(options.blockScript || "");
 		this.props = reactive(options.props || {});
 
 		this.blockName = options.blockName;

From 5bab66ffe952f80993b8b0691e638e4b0c8ca8a6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 2 Dec 2025 08:19:58 +0530
Subject: [PATCH 095/547] fix(Autocomplete): Selection of collections

---
 .../BlockPropertySections/CollectionOptionsSection.ts     | 4 ++--
 frontend/src/components/Controls/ColorInput.vue           | 8 +-------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 2cb4386f5..67281282e 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -53,8 +53,8 @@ const collectionOptions = [
 		},
 		searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
 		events: {
-			"update:modelValue": (selectedOption: { label: string; value: string }) => {
-				blockController.setDataKey("key", selectedOption?.value);
+			"update:modelValue": (selectedOption: string) => {
+				blockController.setDataKey("key", selectedOption);
 			},
 		},
 	},
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index bc5c6b701..052c8f03a 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -38,16 +38,10 @@
 										: undefined
 								"
 								@update:modelValue="
-									(val) => {
-										// if value is object, extract the value
-										if (typeof val === 'object' && val !== null) {
-											val = val.value;
-										}
-										// If it's a CSS variable, preserve it
+									(val: string | null) => {
 										if (typeof val === 'string' && (val.startsWith('var(--') || val.startsWith('--'))) {
 											emit('update:modelValue', val.startsWith('var(--') ? val : `var(${val})`);
 										} else {
-											// For direct color values, convert to RGB
 											const color = getRGB(val);
 											emit('update:modelValue', color);
 										}

From edc9cd9e4acafa7f43921e80c59a7ae85a3f2bea Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 2 Dec 2025 08:22:45 +0530
Subject: [PATCH 096/547] fix(DynamicValueHandler): Add cursor pointer to list
 items for better UX

---
 frontend/src/components/Controls/DynamicValueHandler.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index db34d0eab..712bf71d9 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -11,7 +11,7 @@
 				<ul class="m-0 list-none p-0">
 					<li v-if="selectedKey && !filteredItems.includes(selectedKey)">
 						<div
-							class="w-full truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
+							class="w-full cursor-pointer truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
 							@click.stop="selectAndSetKey(selectedKey)">
 							{{ selectedKey }}
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedKey) == null }">
@@ -21,7 +21,7 @@
 					</li>
 					<li v-for="(item, index) in filteredItems" :key="index">
 						<div
-							class="w-full truncate rounded p-2 text-left font-mono text-p-sm text-ink-gray-7 hover:bg-surface-gray-2"
+							class="w-full cursor-pointer truncate rounded p-2 text-left font-mono text-p-sm text-ink-gray-7 hover:bg-surface-gray-2"
 							:class="{ 'bg-surface-gray-3 text-ink-gray-9': selectedKey === item }"
 							@click.stop="selectAndSetKey(item)">
 							{{ item }}

From 6608477a65beb0f96556d959bfa87c678dfa97de Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 2 Dec 2025 10:20:28 +0530
Subject: [PATCH 097/547] fix: passing block props value instead of ref

---
 frontend/src/components/BuilderBlock.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3aaacbff9..4d6f28e31 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -288,14 +288,16 @@ watch(
 		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
 	],
 	() => {
-		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps);
+		if (builderSettings.doc?.execute_block_scripts_in_editor) {
+			saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps.value);
+		}
 	},
 	{ deep: true },
 );
 
 onMounted(() => {
 	if (builderSettings.doc?.execute_block_scripts_in_editor) {
-		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps);
+		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps.value);
 	}
 });
 

From 813231184f2e7a33506d6cfb8043bff89e3eb917 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 3 Dec 2025 15:15:06 +0530
Subject: [PATCH 098/547] fix(history): Make sure history is tracked while
 duplicating text block

---
 frontend/src/block.ts                  | 2 +-
 frontend/src/components/TextBlock.vue  | 8 ++++++--
 frontend/src/utils/useCanvasHistory.ts | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index bbbf0e247..3b9222962 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -829,7 +829,7 @@ class Block implements BlockOptions {
 		nextTick(() => {
 			if (child) {
 				child.selectBlock();
-				pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
+				pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true, true);
 			}
 		});
 	}
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 028d645d0..6c46eaa39 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -186,6 +186,7 @@ import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 import { setFontFromHTML } from "@/utils/fontManager";
 import { getDataForKey } from "@/utils/helpers";
+import type { PauseId } from "@/utils/useCanvasHistory";
 import { Color } from "@tiptap/extension-color";
 import { FontFamily } from "@tiptap/extension-font-family";
 import { Link } from "@tiptap/extension-link";
@@ -303,16 +304,19 @@ onBeforeMount(() => {
 	setFontFromHTML(html);
 });
 
+let pauseId: PauseId | undefined = undefined;
+
 watch(
 	() => isEditable.value,
 	(editable) => {
 		editor.value?.setEditable(editable);
 		if (editable) {
-			canvasStore.activeCanvas?.history?.pause();
+			pauseId = canvasStore.activeCanvas?.history?.pause();
 			editor.value?.commands.focus("all");
 		} else {
-			canvasStore.activeCanvas?.history?.resume(undefined, dataChanged.value, true);
+			canvasStore.activeCanvas?.history?.resume(pauseId, dataChanged.value, pauseId === undefined);
 			dataChanged.value = false;
+			pauseId = undefined;
 		}
 	},
 	{ immediate: true },
diff --git a/frontend/src/utils/useCanvasHistory.ts b/frontend/src/utils/useCanvasHistory.ts
index 6e825bb71..2317a1e96 100644
--- a/frontend/src/utils/useCanvasHistory.ts
+++ b/frontend/src/utils/useCanvasHistory.ts
@@ -7,7 +7,7 @@ type CanvasState = {
 	block: string;
 	selectedBlockIds: Set<string>;
 };
-type PauseId = string & { __brand: "PauseId" };
+export type PauseId = string & { __brand: "PauseId" };
 
 const CAPACITY = 500;
 const DEBOUNCE_DELAY = 100;

From fdb1d0c2091e36c817fc68605df5bc491966cd04 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 4 Dec 2025 12:37:30 +0530
Subject: [PATCH 099/547] feat: Add option to search only inside selected block

---
 .../src/components/Controls/SearchBlock.vue   | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/SearchBlock.vue b/frontend/src/components/Controls/SearchBlock.vue
index 121a325c9..73731f793 100644
--- a/frontend/src/components/Controls/SearchBlock.vue
+++ b/frontend/src/components/Controls/SearchBlock.vue
@@ -64,6 +64,17 @@
 			</Popover>
 		</div>
 
+		<div v-if="canvasStore.activeCanvas?.selectedBlocks?.length" class="mb-4">
+			<label class="flex cursor-pointer items-center text-sm text-ink-gray-7">
+				<Input
+					type="checkbox"
+					v-model="searchInSelectedBlock"
+					@change="performSearch"
+					class="focus:ring-ink-gray-5 mr-2 size-4 border-outline-gray-1 text-ink-gray-7" />
+				<span>Search inside selected block only</span>
+			</label>
+		</div>
+
 		<div v-if="searchMode === 'replace'" class="mb-4">
 			<BuilderInput
 				class="w-full"
@@ -153,6 +164,7 @@ const replaceQuery = ref("");
 const searchMode = ref<"search" | "replace">("search");
 const replacedCount = ref(0);
 const results = ref([]) as Ref<Block[]>;
+const searchInSelectedBlock = ref(false);
 
 const propertyHandlers = [
 	{
@@ -419,9 +431,14 @@ const searchWithFilters = (searchTerm: string): Block[] => {
 		block.children?.forEach((child) => searchInBlock(child));
 	}
 
-	const rootBlock = canvasStore.activeCanvas?.getRootBlock();
-	if (rootBlock) {
-		searchInBlock(rootBlock);
+	const selectedBlocks = canvasStore.activeCanvas?.selectedBlocks;
+	const startingBlock =
+		searchInSelectedBlock.value && selectedBlocks?.length
+			? selectedBlocks[0]
+			: canvasStore.activeCanvas?.getRootBlock();
+
+	if (startingBlock) {
+		searchInBlock(startingBlock);
 	}
 
 	return searchResults;
@@ -443,6 +460,10 @@ watchDebounced(() => filters.value.map((f) => f.selected).join(","), performSear
 	debounce: 300,
 });
 
+watchDebounced(searchInSelectedBlock, performSearch, {
+	debounce: 300,
+});
+
 // Reset replaced count when switching modes
 watchDebounced(
 	searchMode,

From f7640237b6a5609696d3a24032e8a8f94de79c61 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 5 Dec 2025 01:37:21 +0530
Subject: [PATCH 100/547] fix: fetch dynamic content if hasProps

and minor fixes for dynamic props content
---
 frontend/src/components/BlockHTML.vue         |  6 ++-
 frontend/src/components/BuilderBlock.vue      | 37 ++++++++++++++-----
 .../Controls/DynamicValueHandler.vue          |  2 +-
 frontend/src/components/TextBlock.vue         |  6 ++-
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 653dfef9b..cc5c8aeaa 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -13,9 +13,13 @@ const props = defineProps<{
 	defaultProps?: Record<string, unknown> | null;
 }>();
 
+const hasBlockProps = computed(() => {
+	return props.defaultProps || Object.keys(props.block.getBlockProps()).length > 0;
+});
+
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
-	if (props.data || props.defaultProps) {
+	if (props.data || hasBlockProps.value) {
 		const data = props.data; // to "freeze" props.data for getDataScriptValue
 		const getDataScriptValue = (path: string): any => {
 			return getDataForKey(data || {}, path);
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 4d6f28e31..8baa8ea92 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -107,6 +107,10 @@ const classes = computed(() => {
 	];
 });
 
+const hasBlockProps = computed(() => {
+	return props.defaultProps || Object.keys(props.block.getBlockProps()).length > 0;
+});
+
 const attributes = computed(() => {
 	const attribs = { ...props.block.getAttributes(), ...attrs } as { [key: string]: any };
 	if (
@@ -123,15 +127,15 @@ const attributes = computed(() => {
 		attribs.defaultProps = props.defaultProps;
 	}
 
-	if (props.data) {
-		const data = props.data; // to "freeze" props.data for getDataScriptValue
+	if (props.data || hasBlockProps.value) {
+		const data = props.data || {}; // to "freeze" props.data for getDataScriptValue
 		const getDataScriptValue = (path: string): any => {
 			return getDataForKey(data, path);
 		};
 		if (props.block.getDataKey("type") === "attribute") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue);
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue, props.defaultProps);
 			} else {
 				value = getDataScriptValue(props.block.getDataKey("key") as string);
 			}
@@ -146,7 +150,7 @@ const attributes = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue);
+					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
 				} else {
 					value = getDataScriptValue(dataKeyObj.key as string);
 				}
@@ -173,13 +177,18 @@ const target = computed(() => {
 
 const styles = computed(() => {
 	let dynamicStyles = {} as { [key: string]: string };
-	if (props.data) {
+	if (props.data || hasBlockProps.value) {
 		if (props.block.getDataKey("type") === "style") {
+			let value;
+			if (props.block.getDataKey("comesFrom") === "props") {
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, (path: string) => {
+					return getDataForKey(props.data as Object, path);
+				}, props.defaultProps);
+			} else {
+				value = getDataForKey(props.data as Object, props.block.getDataKey("key") as string);
+			}
 			dynamicStyles = {
-				[props.block.getDataKey("property") as string]: getDataForKey(
-					props.data,
-					props.block.getDataKey("key"),
-				),
+				[props.block.getDataKey("property") as string]: value,
 			};
 		}
 		props.block.dynamicValues
@@ -188,7 +197,15 @@ const styles = computed(() => {
 			})
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				const property = dataKeyObj.property as string;
-				dynamicStyles[property] = getDataForKey(props.data as Object, dataKeyObj.key as string);
+				let value;
+				if (dataKeyObj.comesFrom === "props") {
+					value = getPropValue(dataKeyObj.key as string, props.block, (path: string) => {
+						return getDataForKey(props.data as Object, path);
+					}, props.defaultProps);
+				} else {
+					value = getDataForKey(props.data as Object, dataKeyObj.key as string);
+				}
+				dynamicStyles[property] = value ?? dynamicStyles[property];
 			});
 	}
 
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 6c72f0451..075698e72 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -197,7 +197,7 @@ const filteredItems = computed(() => {
 			item.key.toLowerCase().includes(query) ||
 			String(getDataScriptValue(item.key)).toLowerCase().includes(query) ||
 			String(
-				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDataScriptValue),
+				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDataScriptValue, defaultProps.value),
 			)
 				.toLowerCase()
 				.includes(query),
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 515b53e66..9f0234377 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -263,9 +263,13 @@ const FontFamilyPasteRule = Extension.create({
 	},
 });
 
+const hasBlockProps = computed(() => {
+	return props.defaultProps || Object.keys(props.block.getBlockProps()).length > 0;
+});
+
 const textContent = computed(() => {
 	let innerHTML = props.block.getInnerHTML();
-	if (props.data || props.defaultProps) {
+	if (props.data || hasBlockProps.value) {
 		const dynamicContent = getDynamicContent();
 		if (dynamicContent) {
 			innerHTML = dynamicContent;

From 564549921c8a0381c2904887466793691a50c439 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 5 Dec 2025 11:39:03 +0530
Subject: [PATCH 101/547] feat: Upload font after confirmation if user drops
 font file on canvas

---
 frontend/src/block.ts                         |  6 +-
 .../src/components/Controls/FontUploader.vue  | 65 +++----------
 frontend/src/utils/helpers.ts                 | 96 ++++++++++++++++++-
 frontend/src/utils/useBuilderEvents.ts        |  4 +-
 frontend/src/utils/useCanvasDropZone.ts       | 28 +++++-
 5 files changed, 137 insertions(+), 62 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 3b9222962..fcada5827 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -11,7 +11,7 @@ import {
 	kebabToCamelCase,
 	parseAndSetBackground,
 	setBoxSpacing,
-	uploadImage,
+	uploadBuilderAsset,
 } from "@/utils/helpers";
 import { Editor } from "@tiptap/vue-3";
 import { clamp } from "@vueuse/core";
@@ -120,7 +120,7 @@ class Block implements BlockOptions {
 				if (file) {
 					this.setAttribute("src", "");
 					options.src = "";
-					uploadImage(file, true).then((obj) => {
+					uploadBuilderAsset(file, true).then((obj) => {
 						this.setAttribute("src", obj.fileURL);
 					});
 				}
@@ -135,7 +135,7 @@ class Block implements BlockOptions {
 
 			if (file) {
 				this.setStyle("backgroundImage", "");
-				uploadImage(file, true).then((obj) => {
+				uploadBuilderAsset(file, true).then((obj) => {
 					this.setStyle("backgroundImage", `url(${obj.fileURL})`);
 				});
 			}
diff --git a/frontend/src/components/Controls/FontUploader.vue b/frontend/src/components/Controls/FontUploader.vue
index ca09c1479..18b41add9 100644
--- a/frontend/src/components/Controls/FontUploader.vue
+++ b/frontend/src/components/Controls/FontUploader.vue
@@ -7,67 +7,28 @@
 	</BuilderButton>
 </template>
 <script lang="ts" setup>
-import userFont from "@/data/userFonts";
 import blockController from "@/utils/blockController";
-import { getFontName } from "@/utils/helpers";
-import { FileUploadHandler } from "frappe-ui";
+import { uploadUserFont } from "@/utils/helpers";
 import { nextTick } from "vue";
-import { toast } from "vue-sonner";
 const emit = defineEmits(["change"]);
 
-type FileDoc = {
-	file_name: string;
-	file_url: string;
-};
-
 const openFileSelector = () => {
 	const input = document.createElement("input");
 	input.type = "file";
 	input.accept = ".woff2,.woff,.ttf,.otf";
-	input.onchange = (e) =>
-		toast.promise(
-			new Promise(async (resolve) => {
-				const file = (e.target as HTMLInputElement)?.files?.[0];
-				if (file) {
-					const fileUploadHandler = new FileUploadHandler();
-					const fileDoc = await fileUploadHandler.upload(file, {
-						private: false,
-						folder: "Home/Builder Uploads/Fonts",
-					});
-					await uploadFont(fileDoc);
+	input.onchange = async (e) => {
+		const file = (e.target as HTMLInputElement)?.files?.[0];
+		if (file) {
+			const result = await uploadUserFont(file);
+			if (result?.uploaded) {
+				emit("change");
+				await nextTick();
+				if (blockController.isBlockSelected()) {
+					blockController.setFontFamily(result.fontName);
 				}
-				resolve(null);
-			}),
-			{
-				loading: "Uploading font...",
-				success: () => "Font uploaded",
-			},
-		);
-	input.click();
-};
-
-const uploadFont = async (file: FileDoc) => {
-	const fontFamilyName = await getFontName(file.file_url);
-	const fontURL = file.file_url;
-	const fontFace = new FontFace(fontFamilyName, `url("${fontURL}")`);
-	const loadedFont = await fontFace.load();
-	document.fonts.add(loadedFont);
-	try {
-		await userFont.insert.submit({
-			font_name: fontFace.family,
-			font_file: fontURL,
-		});
-		await userFont.list.promise;
-	} catch (e: any) {
-		if (e?.message?.includes("DuplicateEntryError")) {
-			console.log("Font already exists");
+			}
 		}
-	}
-	await userFont.fetch();
-	emit("change");
-	await nextTick();
-	if (blockController.isBlockSelected()) {
-		blockController.setFontFamily(fontFace.family);
-	}
+	};
+	input.click();
 };
 </script>
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 6577c4ca2..3cf81610c 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -393,7 +393,7 @@ function getRouteVariables(route: string) {
 	return variables;
 }
 
-async function uploadImage(file: File, silent = false) {
+async function uploadBuilderAsset(file: File, silent = false) {
 	const uploader = new FileUploadHandler();
 	let fileDoc = {
 		file_url: "",
@@ -481,6 +481,97 @@ async function getFontName(file_url: string) {
 	return opentype.parse(await getFontArrayBuffer(file_url)).names.fullName.en;
 }
 
+async function getFontNameFromFile(file: File): Promise<string> {
+	const arrayBuffer = await file.arrayBuffer();
+	let buffer = arrayBuffer;
+	if (file.name.endsWith(".woff2")) {
+		const loadScript = (src: string) =>
+			new Promise((onload) =>
+				document.documentElement.append(Object.assign(document.createElement("script"), { src, onload })),
+			);
+		if (!window.Module) {
+			const path = "https://unpkg.com/wawoff2@2.0.1/build/decompress_binding.js";
+			// @ts-ignore
+			const init = new Promise((done) => (window.Module = { onRuntimeInitialized: done }));
+			await loadScript(path).then(() => init);
+		}
+		buffer = Uint8Array.from(window.Module.decompress(arrayBuffer)).buffer;
+	}
+	const opentype = await import("opentype.js");
+	return opentype.parse(buffer).names.fullName.en;
+}
+
+type UploadUserFontOptions = {
+	confirmBeforeUpload?: boolean;
+};
+
+type UploadUserFontResult = {
+	uploaded: boolean;
+	fontName: string;
+	alreadyExists?: boolean;
+};
+
+async function uploadUserFont(
+	file: File,
+	options: UploadUserFontOptions = {},
+): Promise<UploadUserFontResult | null> {
+	const { default: userFont } = await import("@/data/userFonts");
+
+	const fontName = await getFontNameFromFile(file);
+
+	// Check if font already exists
+	const existingFont = userFont.data?.find((f: { font_name: string }) => f.font_name === fontName);
+
+	if (existingFont) {
+		toast.info(`Font "${fontName}" already exists in the project`);
+		return { uploaded: false, fontName, alreadyExists: true };
+	}
+
+	// Confirm before uploading if requested
+	if (options.confirmBeforeUpload) {
+		const confirmed = await confirm(`Do you want to upload the font "${fontName}"?`, "Upload Font");
+		if (!confirmed) {
+			return null;
+		}
+	}
+
+	const uploadPromise = (async (): Promise<UploadUserFontResult> => {
+		const fileUploadHandler = new FileUploadHandler();
+		const uploadedFile = await fileUploadHandler.upload(file, {
+			private: false,
+			folder: "Home/Builder Uploads/Fonts",
+		});
+
+		// Load the font
+		const fontFace = new FontFace(fontName, `url("${uploadedFile.file_url}")`);
+		const loadedFont = await fontFace.load();
+		document.fonts.add(loadedFont);
+
+		// Save to User Font doctype
+		try {
+			await userFont.insert.submit({
+				font_name: fontName,
+				font_file: uploadedFile.file_url,
+			});
+		} catch (e: any) {
+			if (!e?.message?.includes("DuplicateEntryError")) {
+				throw e;
+			}
+		}
+
+		await userFont.fetch();
+		return { uploaded: true, fontName };
+	})();
+
+	toast.promise(uploadPromise, {
+		loading: "Uploading font...",
+		success: `Font "${fontName}" uploaded successfully`,
+		error: "Failed to upload font",
+	});
+
+	return uploadPromise;
+}
+
 function generateId() {
 	return Math.random().toString(36).substr(2, 9);
 }
@@ -998,5 +1089,6 @@ export {
 	throttle,
 	toKebabCase,
 	triggerCopyEvent,
-	uploadImage,
+	uploadBuilderAsset,
+	uploadUserFont,
 };
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 7512ca458..4a2627389 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -19,7 +19,7 @@ import {
 	isTargetEditable,
 	showDialog,
 	triggerCopyEvent,
-	uploadImage,
+	uploadBuilderAsset,
 } from "@/utils/helpers";
 import { useEventListener, useStorage } from "@vueuse/core";
 import { Ref } from "vue";
@@ -78,7 +78,7 @@ export function useBuilderEvents(
 			e.preventDefault();
 			const file = clipboardItems.find((item) => item.type.includes("image"))?.getAsFile();
 			if (file) {
-				uploadImage(file).then((res: { fileURL: string; fileName: string }) => {
+				uploadBuilderAsset(file).then((res: { fileURL: string; fileName: string }) => {
 					const selectedBlocks = blockController.getSelectedBlocks();
 					const parentBlock = selectedBlocks.length
 						? selectedBlocks[0]
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index ef5f5eb09..d442ce0d1 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -3,7 +3,14 @@ import useBlockTemplateStore from "@/stores/blockTemplateStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
 import { posthog } from "@/telemetry";
-import { getBlockCopy, getBlockInstance, getImageBlock, getVideoBlock, uploadImage } from "@/utils/helpers";
+import {
+	getBlockCopy,
+	getBlockInstance,
+	getImageBlock,
+	getVideoBlock,
+	uploadBuilderAsset,
+	uploadUserFont,
+} from "@/utils/helpers";
 import { useDropZone } from "@vueuse/core";
 import { Ref } from "vue";
 
@@ -232,7 +239,15 @@ export function useCanvasDropZone(
 
 	const handleFileDrop = (files: File[], ev: DragEvent) => {
 		let { parentBlock, index } = canvasStore.dropTarget;
-		uploadImage(files[0]).then((fileDoc: { fileURL: string; fileName: string }) => {
+		const file = files[0];
+
+		// Handle font files separately
+		if (file.name.match(/\.(woff2?|ttf|otf|eot)$/)) {
+			handleFontFileDrop(file);
+			return;
+		}
+
+		uploadBuilderAsset(file).then((fileDoc: { fileURL: string; fileName: string }) => {
 			if (!parentBlock) return;
 
 			if (fileDoc.fileName.match(/\.(mp4|webm|ogg|mov)$/)) {
@@ -245,7 +260,7 @@ export function useCanvasDropZone(
 				return;
 			}
 
-			if (parentBlock.isImage()) {
+			if (parentBlock.isImage() && files[0].type.startsWith("image/")) {
 				parentBlock.setAttribute("src", fileDoc.fileURL);
 				posthog.capture("builder_image_uploaded", {
 					type: "image-replace",
@@ -271,5 +286,12 @@ export function useCanvasDropZone(
 		});
 	};
 
+	const handleFontFileDrop = async (file: File) => {
+		const result = await uploadUserFont(file, { confirmBeforeUpload: true });
+		if (result?.uploaded) {
+			posthog.capture("builder_font_uploaded");
+		}
+	};
+
 	return { isOverDropZone };
 }

From 752d3ddb62a9d30c1eea78d60a32911d1bfbe0fa Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 5 Dec 2025 17:48:45 +0530
Subject: [PATCH 102/547] fix: Set upload font to selected block

Assuming its the most probable case
---
 frontend/src/utils/useCanvasDropZone.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index d442ce0d1..a62dc3562 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -13,6 +13,7 @@ import {
 } from "@/utils/helpers";
 import { useDropZone } from "@vueuse/core";
 import { Ref } from "vue";
+import blockController from "./blockController";
 
 const canvasStore = useCanvasStore();
 const componentStore = useComponentStore();
@@ -288,6 +289,9 @@ export function useCanvasDropZone(
 
 	const handleFontFileDrop = async (file: File) => {
 		const result = await uploadUserFont(file, { confirmBeforeUpload: true });
+		if (result && blockController.isBlockSelected()) {
+			blockController.setFontFamily(result.fontName);
+		}
 		if (result?.uploaded) {
 			posthog.capture("builder_font_uploaded");
 		}

From 4c3d7afac28b3c71ce10f03a7042623fc72b60e2 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 6 Dec 2025 19:42:45 +0530
Subject: [PATCH 103/547] fix: unified getFilteredProperties to handle dynamic
 properties

---
 frontend/src/components/BlockProperties.vue | 36 +++------------------
 1 file changed, 4 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index df799c9f9..d43c6dd11 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -13,17 +13,6 @@
 				" />
 		</div>
 		<div class="mt-1 flex flex-col gap-3">
-			<CollapsibleSection
-				:sectionName="standardPropsInputSection.name"
-				v-if="showSectionDynamic(standardPropsInputSection)"
-				:key="standardPropsInputSection.name"
-				:sectionCollapsed="toValue(standardPropsInputSection.collapsed) && !builderStore.propertyFilter">
-				<template v-for="property in getFilteredPropertiesDynamic(standardPropsInputSection)">
-					<component :is="property.component" v-bind="property.getProps()" v-on="property.events || {}">
-						{{ property.innerText || "" }}
-					</component>
-				</template>
-			</CollapsibleSection>
 			<CollapsibleSection
 				:sectionName="section.name"
 				v-for="section in sections"
@@ -82,15 +71,11 @@ type BlockProperty = {
 
 type PropertySection = {
 	name: string;
-	properties: BlockProperty[];
+	properties: BlockProperty[] | (() => BlockProperty[]);
 	condition?: () => boolean;
 	collapsed?: boolean;
 };
 
-type PropertySectionDynamic = Omit<PropertySection, "properties"> & {
-	properties: () => BlockProperty[];
-};
-
 const searchInput = ref(null) as Ref<HTMLElement | null>;
 
 const showSection = (section: PropertySection) => {
@@ -105,7 +90,8 @@ const showSection = (section: PropertySection) => {
 };
 
 const getFilteredProperties = (section: PropertySection) => {
-	return section.properties.filter((property) => {
+	const properties = typeof section.properties === "function" ? section.properties() : section.properties;
+	return properties.filter((property) => {
 		let showProperty = true;
 		if (property.condition) {
 			showProperty = property.condition();
@@ -120,23 +106,9 @@ const getFilteredProperties = (section: PropertySection) => {
 	});
 };
 
-const getFilteredPropertiesDynamic = (section: PropertySectionDynamic) => {
-	const staticSection: PropertySection = {
-		...section,
-		properties: section.properties(),
-	};
-	return getFilteredProperties(staticSection);
-};
-
-const showSectionDynamic = (section: PropertySectionDynamic) => {
-	const staticSection: PropertySection = {
-		...section,
-		properties: section.properties(),
-	};
-	return showSection(staticSection);
-};
 
 const sections = [
+	standardPropsInputSection,
 	collectionOptionsSection,
 	linkSection,
 	layoutSection,

From b62118348455847afa6341e94cb13252fff47605 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 6 Dec 2025 23:40:03 +0530
Subject: [PATCH 104/547] fix: better names for block props and std. props

---
 frontend/src/components/BlockPropertySections/PropsSection.ts   | 2 +-
 .../BlockPropertySections/StandardPropsInputSection.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/PropsSection.ts
index 653df95d6..1364556df 100644
--- a/frontend/src/components/BlockPropertySections/PropsSection.ts
+++ b/frontend/src/components/BlockPropertySections/PropsSection.ts
@@ -26,7 +26,7 @@ const propsSection = [
 ];
 
 export default {
-	name: "Props",
+	name: "Block Props",
 	properties: propsSection,
 	collapsed: computed(() => {
 		return Object.keys(blockController.getBlockProps()).length === 0;
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index df68d6be9..d774fd248 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -94,7 +94,7 @@ const getStandardPropsInputSection = () => {
 };
 
 export default {
-	name: "Standard Props",
+	name: "Component Options",
 	properties: getStandardPropsInputSection,
 	collapsed: false,
 	condition: () =>

From 5d3745f142d8577713986f07923bd3bcec0d9435 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 6 Dec 2025 23:44:52 +0530
Subject: [PATCH 105/547] fix: remove props dependency feat for current release

---
 .../src/components/PropsDependencyEditor.vue  | 287 ------------------
 .../src/components/PropsPopoverContent.vue    |  15 +-
 2 files changed, 1 insertion(+), 301 deletions(-)
 delete mode 100644 frontend/src/components/PropsDependencyEditor.vue

diff --git a/frontend/src/components/PropsDependencyEditor.vue b/frontend/src/components/PropsDependencyEditor.vue
deleted file mode 100644
index b889500fd..000000000
--- a/frontend/src/components/PropsDependencyEditor.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-	<div ref="propsEditor" class="flex flex-col gap-2">
-		<div v-for="(value, key, index) in obj" :key="index" class="flex gap-2">
-			<Autocomplete
-				:make-fixed="true"
-				fix-to=".props-popover-content"
-				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none [&>div>input]:text-xs"
-				v-bind="events"
-				ref="autoCompleteRef"
-				placeholder="Prop Name"
-				:modelValue="key"
-				:getOptions="getAutocompleteOptions"
-				@update:modelValue="
-					(option) => {
-						console.log(option);
-						if (typeof option === 'string') {
-							return;
-						}
-						replaceKey(key, option?.value);
-					}
-				" />
-			<Input
-				type="select"
-				class="!w-16"
-				placeholder="operator"
-				:modelValue="value.operator"
-				@update:modelValue="setSelectedOperator(key, $event)"
-				:options="getOperatorOptions(key)"></Input>
-			<BuilderInput
-				placeholder="Property"
-				:modelValue="value.value"
-				@update:modelValue="(val: string) => updateObjectValue(key, val)" />
-			<BuilderButton
-				class="flex-shrink-0 text-xs"
-				variant="subtle"
-				icon="x"
-				@click="deleteObjectKey(key as string)" />
-		</div>
-		<BuilderButton variant="subtle" label="Add" class="addButton" @click="addObjectKey"></BuilderButton>
-		<p class="rounded-sm bg-surface-gray-1 p-2 text-xs text-ink-gray-7" v-show="description">
-			<span v-html="description"></span>
-		</p>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { mapToObject, replaceMapKey } from "@/utils/helpers";
-import { nextTick, ref, useAttrs, watch } from "vue";
-import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import blockController from "@/utils/blockController";
-import { toast } from "vue-sonner";
-import Input from "./Controls/Input.vue";
-
-type DependencyObjType = Record<
-	string,
-	{
-		operator: string;
-		value: string;
-	}
->;
-
-type availableStdPropsType = Record<string, "string" | "number" | "boolean" | "array" | "object">;
-
-const attrs = useAttrs();
-const events = Object.fromEntries(
-	Object.entries(attrs).filter(([key]) => key.startsWith("onFocus") || key.startsWith("onBlur")),
-);
-
-const propsEditor = ref<HTMLElement | null>(null);
-const autoCompleteRef = ref<typeof Autocomplete | null>(null);
-
-const props = defineProps<{
-	availableStdProps: availableStdPropsType;
-	obj: DependencyObjType;
-	description?: string;
-}>();
-
-const emit = defineEmits({
-	"update:obj": (obj: BlockProps) => true,
-});
-
-const setSelectedOperator = (key: string, operator: string) => {
-	const map = new Map(Object.entries(props.obj));
-	const current = map.get(key);
-	if (current) {
-		map.set(key, {
-			...current,
-			operator,
-		});
-		emit("update:obj", mapToObject(map));
-	}
-};
-
-const operatorsForString = ["equals", "not equals", "contains", "does not contain"];
-const operatorsForNumber = ["equals", "not equals", "greater than", "less than"];
-const operatorsForBoolean = ["is true", "is false"];
-const operatorsForArray = ["includes", "does not include"];
-const operatorsForObject = ["has key", "does not have key"];
-
-const operatorOptionsCache: Record<string, { label: string; value: string }[]> = {};
-
-const getOperatorOptions = (propName: string) => {
-	if (!props.availableStdProps[propName]) {
-		return [];
-	}
-	const propType = props.availableStdProps[propName];
-	if (operatorOptionsCache[propType]) {
-		// to avoid mapping every time
-		return operatorOptionsCache[propType];
-	}
-	let operators: string[] = [];
-	switch (propType) {
-		case "string":
-			operators = operatorsForString;
-			break;
-		case "number":
-			operators = operatorsForNumber;
-			break;
-		case "boolean":
-			operators = operatorsForBoolean;
-			break;
-		case "array":
-			operators = operatorsForArray;
-			break;
-		case "object":
-			operators = operatorsForObject;
-			break;
-		default:
-			operators = [];
-	}
-	const options = operators.map((op) => ({ label: op, value: op }));
-	operatorOptionsCache[propType] = options;
-	return options;
-};
-
-const getAutocompleteOptions = async (query: string) => {
-	const options = Object.entries(props.availableStdProps)
-		.filter(([key]) => key.toLowerCase().includes(query.toLowerCase()))
-		.map(([key]) => ({
-			label: key,
-			value: key,
-		}));
-
-	return options;
-};
-
-const addObjectKey = async () => {
-	const map = new Map(Object.entries(props.obj));
-	map.set("", { operator: "", value: "" });
-	emit("update:obj", mapToObject(map));
-	await nextTick();
-	const inputs = propsEditor.value?.querySelectorAll("input");
-	if (inputs) {
-		const lastInput = inputs[inputs.length - 2];
-		lastInput.focus();
-	}
-};
-
-const updateObjectValue = (key: string, value: string | null) => {
-	if (!key) {
-		toast.error("Please select a property name.");
-		return;
-	}
-	if (!props.obj[key].operator) {
-		toast.error("Please select an operator.");
-		return;
-	}
-
-	const map = new Map(Object.entries(props.obj));
-
-	map.set(key, {
-		...map.get(key)!,
-		value: value || "",
-	});
-
-	emit("update:obj", mapToObject(map));
-};
-
-const replaceKey = (oldKey: string, newKey: string) => {
-	if (Object.keys(props.obj).includes(newKey)) {
-		toast.error("Property name already exists.");
-		return;
-	}
-	if (!newKey) {
-		newKey = "";
-	}
-	const map = new Map(Object.entries(props.obj));
-	emit("update:obj", mapToObject(replaceMapKey(map, oldKey, newKey)));
-	// need to add the dependdency tracking
-};
-
-const deleteObjectKey = (key: string) => {
-	const map = new Map(Object.entries(props.obj));
-	map.delete(key);
-	emit("update:obj", mapToObject(map));
-};
-
-watch(
-	[() => props.obj, () => props.availableStdProps, () => blockController.getSelectedBlocks()],
-	() => {
-		if (Array.isArray(autoCompleteRef.value)) {
-			autoCompleteRef.value.forEach((ref) => {
-				ref?.updateOptions();
-			});
-		}
-	},
-	{ immediate: true },
-);
-
-const evaluateCondition = (leftOperand: any, operator: string, rightOperand: any, type: string): boolean => {
-	try {
-		switch (type) {
-			case "string":
-				const leftStr = String(leftOperand);
-				const rightStr = String(rightOperand);
-				switch (operator) {
-					case "equals":
-						return leftStr === rightStr;
-					case "not equals":
-						return leftStr !== rightStr;
-					case "contains":
-						return leftStr.includes(rightStr);
-					case "does not contain":
-						return !leftStr.includes(rightStr);
-					default:
-						return false;
-				}
-
-			case "number":
-				const leftNum = Number(leftOperand);
-				const rightNum = Number(rightOperand);
-				switch (operator) {
-					case "equals":
-						return leftNum === rightNum;
-					case "not equals":
-						return leftNum !== rightNum;
-					case "greater than":
-						return leftNum > rightNum;
-					case "less than":
-						return leftNum < rightNum;
-					default:
-						return false;
-				}
-
-			case "boolean":
-				const boolValue = Boolean(leftOperand);
-				switch (operator) {
-					case "is true":
-						return boolValue === true;
-					case "is false":
-						return boolValue === false;
-					default:
-						return false;
-				}
-
-			case "array":
-				if (!Array.isArray(leftOperand)) return false;
-				switch (operator) {
-					case "includes":
-						return leftOperand.includes(rightOperand);
-					case "does not include":
-						return !leftOperand.includes(rightOperand);
-					default:
-						return false;
-				}
-
-			case "object":
-				if (typeof leftOperand !== "object" || leftOperand === null) return false;
-				const key = String(rightOperand);
-				switch (operator) {
-					case "has key":
-						return key in leftOperand;
-					case "does not have key":
-						return !(key in leftOperand);
-					default:
-						return false;
-				}
-
-			default:
-				return false;
-		}
-	} catch (error) {
-		console.error("Error evaluating condition:", error);
-		return false;
-	}
-};
-</script>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 62d992727..3b7825b20 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -120,19 +120,6 @@
 					standardPropOptions.options = options;
 				}" />
 		</template>
-		<div v-if="isStandardBool" class="flex flex-col gap-2">
-			<InputLabel>Depends on</InputLabel>
-			<PropsDependencyEditor
-				:available-std-props="{
-					sample_prop: 'string',
-					another_prop: 'number',
-					one_more_prop: 'boolean',
-					list_prop: 'array',
-					obj_prop: 'object',
-				}"
-				:obj="standardPropDependencyMap"
-				@update:obj="(obj) => (standardPropDependencyMap = obj)" />
-		</div>
 		<BuilderButton label="Save" variant="subtle" class="w-full flex-shrink-0" @click="save" />
 	</div>
 </template>
@@ -148,7 +135,6 @@ import Autocomplete from "@/components/Controls/Autocomplete.vue";
 
 import { computed, nextTick, reactive, ref, watch } from "vue";
 
-import PropsDependencyEditor from "@/components/PropsDependencyEditor.vue";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 
@@ -167,6 +153,7 @@ const props = withDefaults(
 		mode: "add" | "edit";
 		propName?: string | null;
 		propDetails?: BlockProps[string] | null;
+		closePopover?: () => void;
 	}>(),
 	{
 		mode: "add",

From e8e142d33abeaea658e69101dc146c6ebac23cfc Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 6 Dec 2025 23:51:39 +0530
Subject: [PATCH 106/547] fix: better uniform file names

---
 frontend/src/components/BlockProperties.vue                   | 4 ++--
 .../{PropsSection.ts => BlockPropsSection.ts}                 | 4 ++--
 .../{ScriptEditor.ts => BlockScriptSection.ts}                | 0
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/src/components/BlockPropertySections/{PropsSection.ts => BlockPropsSection.ts} (93%)
 rename frontend/src/components/BlockPropertySections/{ScriptEditor.ts => BlockScriptSection.ts} (100%)

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index d43c6dd11..f4556a878 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -48,8 +48,8 @@ import styleSection from "@/components/BlockPropertySections/StyleSection";
 import transitionSection from "@/components/BlockPropertySections/TransitionSection";
 import typographySection from "@/components/BlockPropertySections/TypographySection";
 import videoOptionsSection from "@/components/BlockPropertySections/VideoOptionsSection";
-import blockScriptSection from "@/components/BlockPropertySections/ScriptEditor";
-import blockPropsSection from "@/components/BlockPropertySections/PropsSection";
+import blockScriptSection from "@/components/BlockPropertySections/BlockScriptSection";
+import blockPropsSection from "@/components/BlockPropertySections/BlockPropsSection";
 import standardPropsInputSection from "@/components/BlockPropertySections/StandardPropsInputSection";
 import useBuilderStore from "@/stores/builderStore";
 import blockController from "@/utils/blockController";
diff --git a/frontend/src/components/BlockPropertySections/PropsSection.ts b/frontend/src/components/BlockPropertySections/BlockPropsSection.ts
similarity index 93%
rename from frontend/src/components/BlockPropertySections/PropsSection.ts
rename to frontend/src/components/BlockPropertySections/BlockPropsSection.ts
index 1364556df..f5cba5ade 100644
--- a/frontend/src/components/BlockPropertySections/PropsSection.ts
+++ b/frontend/src/components/BlockPropertySections/BlockPropsSection.ts
@@ -2,7 +2,7 @@ import PropsEditor from "../PropsEditor.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 
-const propsSection = [
+const blockPropsSection = [
 	{
 		component: PropsEditor,
 		getProps: () => {
@@ -27,7 +27,7 @@ const propsSection = [
 
 export default {
 	name: "Block Props",
-	properties: propsSection,
+	properties: blockPropsSection,
 	collapsed: computed(() => {
 		return Object.keys(blockController.getBlockProps()).length === 0;
 	}),
diff --git a/frontend/src/components/BlockPropertySections/ScriptEditor.ts b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
similarity index 100%
rename from frontend/src/components/BlockPropertySections/ScriptEditor.ts
rename to frontend/src/components/BlockPropertySections/BlockScriptSection.ts

From ce512a4c7d164b8b03040f50b4031835daecb287 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 6 Dec 2025 23:57:31 +0530
Subject: [PATCH 107/547] refactor: removed console.log

---
 .../BlockPropertySections/StandardPropsInputSection.ts      | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index d774fd248..a65584a73 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -60,27 +60,22 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 };
 
 const getStandardProps = (allProps: BlockProps) => {
-	console.log("all props: ", allProps);
 	const standardProps: BlockProps = {};
 	for (const [propKey, propDetails] of Object.entries(allProps || {})) {
 		if (propDetails.isStandard) {
 			standardProps[propKey] = propDetails;
 		}
 	}
-	console.log("standard props: ", standardProps);
 	return standardProps;
 };
 
 const getStandardPropsInputSection = () => {
 	const standardProps = getStandardProps(blockController.getBlockProps());
-	console;
 	const sections = [];
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
-		console.log({ propKey, propDetails });
 		const component = componentMap[propDetails.standardOptions?.type || "string"] || PropertyControl;
 		const getProps = () => {
 			const props = getPropsMap(propKey, propDetails);
-			console.log("props for standard prop input: ", props);
 			return props;
 		};
 		sections.push({
@@ -89,7 +84,6 @@ const getStandardPropsInputSection = () => {
 			searchKeyWords: propKey,
 		});
 	}
-	console.log("standard props sections: ", sections);
 	return sections;
 };
 

From 5dafdb5d62317ade5ba1c6ccd3adac5a14bd2194 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:16:03 +0530
Subject: [PATCH 108/547] fix: refactor getPropValue calls to use a dedicated
 data retrieval function

---
 frontend/src/components/BuilderBlock.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 8baa8ea92..ef241b2b4 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -178,12 +178,13 @@ const target = computed(() => {
 const styles = computed(() => {
 	let dynamicStyles = {} as { [key: string]: string };
 	if (props.data || hasBlockProps.value) {
+		const getDataScriptValue = (path: string): any => {
+			return getDataForKey(props.data || {}, path);
+		};
 		if (props.block.getDataKey("type") === "style") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(props.block.getDataKey("key") as string, props.block, (path: string) => {
-					return getDataForKey(props.data as Object, path);
-				}, props.defaultProps);
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue, props.defaultProps);
 			} else {
 				value = getDataForKey(props.data as Object, props.block.getDataKey("key") as string);
 			}
@@ -199,9 +200,7 @@ const styles = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, (path: string) => {
-						return getDataForKey(props.data as Object, path);
-					}, props.defaultProps);
+					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
 				} else {
 					value = getDataForKey(props.data as Object, dataKeyObj.key as string);
 				}

From ebc5097cf4e58c7b742f05214e041446c3125178 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:22:10 +0530
Subject: [PATCH 109/547] fix: update saferExecuteBlockScript to use block UID
 instead of block ID

---
 frontend/src/components/BuilderBlock.vue | 4 ++--
 frontend/src/utils/helpers.ts            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index ef241b2b4..2edecc602 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -305,7 +305,7 @@ watch(
 	],
 	() => {
 		if (builderSettings.doc?.execute_block_scripts_in_editor) {
-			saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps.value);
+			saferExecuteBlockScript(uid, props.block.getBlockScript(), allResolvedProps.value);
 		}
 	},
 	{ deep: true },
@@ -313,7 +313,7 @@ watch(
 
 onMounted(() => {
 	if (builderSettings.doc?.execute_block_scripts_in_editor) {
-		saferExecuteBlockScript(props.block.blockId, props.block.getBlockScript(), allResolvedProps.value);
+		saferExecuteBlockScript(uid, props.block.getBlockScript(), allResolvedProps.value);
 	}
 });
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 9f31d19d8..4d828bf5f 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1007,7 +1007,7 @@ const getStandardPropValue = (
  */
 
 function saferExecuteBlockScript(
-	blockId: string,
+	blockUid: string,
 	userScript: string,
 	props: Record<string, any> = {},
 ) {
@@ -1090,7 +1090,7 @@ function saferExecuteBlockScript(
 	};
 
 	const sandboxRoot = document.querySelector("[data-block-id='root']") as HTMLElement;
-	const thisElement = document.querySelector(`[data-block-id='${blockId}']`) as HTMLElement;
+	const thisElement = document.querySelector(`[data-block-uid='${blockUid}']`) as HTMLElement;
 
 	const proxiedRoot = wrap(sandboxRoot);
 	const proxiedThis = wrap(thisElement);

From 3701283feeb9b4cdff8135806b73840a05122702 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:25:50 +0530
Subject: [PATCH 110/547] refactor: remove console.log from getFixedStyles
 function

---
 frontend/src/components/Controls/Autocomplete.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 93231b682..8089eb055 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -241,11 +241,6 @@ async function updateOptions() {
 // making it fixed makes it float above Popver container
 const getFixedStyles = () => {
 	if (props.makeFixed && props.fixTo) {
-		console.log(
-			"calculating fixed styles",
-			comboboxInput.value,
-			comboboxInput.value?.$el.closest(props.fixTo),
-		);
 		const fixedToElRect = (
 			comboboxInput.value?.$el.closest(props.fixTo) as HTMLElement
 		)?.getBoundingClientRect();

From 1d6f09adbfd9290aab36345d10b6a02437a314e5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:40:49 +0530
Subject: [PATCH 111/547] refactor: remove console.log from getFixedStyles
 function

---
 frontend/src/components/Controls/Autocomplete.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 8089eb055..f96ab1ed6 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -245,7 +245,6 @@ const getFixedStyles = () => {
 			comboboxInput.value?.$el.closest(props.fixTo) as HTMLElement
 		)?.getBoundingClientRect();
 		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
-		console.log({ fixedToElRect, comboboxInputRect });
 		if (!fixedToElRect || !comboboxInputRect) {
 			return {};
 		}

From 64149c79f2249fd1233916a45832dbed109f5d8d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:49:27 +0530
Subject: [PATCH 112/547] refactor: removed unnecessary code from NewComponent
 Modal

just cleaning the first block does not solve anything
---
 frontend/src/components/Modals/NewComponent.vue | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index 4f07a0bf7..05f458941 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -53,19 +53,7 @@ const componentName = ref("");
 const isGlobalComponent = ref(0);
 
 const createComponentHandler = async (context: { close: () => void }) => {
-	// clean block with inherited or dynamic props
-	const cleanBlock = props.block;
-	if (props.block.props) {
-		const cleanProps = cleanBlock.props || {};
-		Object.entries(props.block.props).forEach(([key, value]) => {
-			if (value.type === 'inherited' || value.type === 'dynamic') {
-				cleanProps[key] = {...value, type: 'static' , value: null};
-			}
-		});
-		cleanBlock.props = cleanProps;
-	}
-
-	const blockCopy = getBlockCopy(cleanBlock, true);
+	const blockCopy = getBlockCopy(props.block, true);
 	blockCopy.removeStyle("left");
 	blockCopy.removeStyle("top");
 	blockCopy.removeStyle("position");

From 9a3ba18f0f7c2c47937c8303738cbd10322729ae Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:52:18 +0530
Subject: [PATCH 113/547] refactor: remove unused blockController import from
 builderBlockCopyPaste

---
 frontend/src/utils/builderBlockCopyPaste.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/utils/builderBlockCopyPaste.ts b/frontend/src/utils/builderBlockCopyPaste.ts
index ecbe16d47..1a85bbb4c 100644
--- a/frontend/src/utils/builderBlockCopyPaste.ts
+++ b/frontend/src/utils/builderBlockCopyPaste.ts
@@ -19,7 +19,6 @@ import { nextTick } from "vue";
 import { toast } from "vue-sonner";
 import { webPages } from "../data/webPage";
 import { BuilderClientScript } from "../types/Builder/BuilderClientScript";
-import blockController from "./blockController";
 
 type BuilderPageClientScriptRef = { builder_script: string; idx?: number };
 

From 263201656b81d0fd4a0fc252c973df03e94e30cd Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:53:43 +0530
Subject: [PATCH 114/547] refactor: remove unused blockController import from
 useCanvasUtils

---
 frontend/src/utils/useCanvasUtils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 8e4086628..6e9f7f932 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -6,7 +6,6 @@ import { useCanvasHistory } from "@/utils/useCanvasHistory";
 import { useElementBounding } from "@vueuse/core";
 import { nextTick, reactive, ref, Ref } from "vue";
 import { toast } from "vue-sonner";
-import blockController from "./blockController";
 
 const canvasStore = useCanvasStore();
 

From 316376cb0bbc0d65570a1514a920cf85110563bd Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 00:59:02 +0530
Subject: [PATCH 115/547] refactor: fix typo

---
 frontend/src/utils/helpers.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 4d828bf5f..ee116b124 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -898,7 +898,7 @@ function triggerCopyEvent() {
 	document.execCommand("copy");
 }
 
-const getValueForInheritedProp = (propName: string, block: Block, getDatScriptValue: (path: string) => any): any => {
+const getValueForInheritedProp = (propName: string, block: Block, getDataScriptValue: (path: string) => any): any => {
 	let parent = block.getParentBlock();
 	while (parent) {
 		const parentProps = parent.getBlockProps();
@@ -906,7 +906,7 @@ const getValueForInheritedProp = (propName: string, block: Block, getDatScriptVa
 		if (matchingProp) {
 			if (matchingProp.type !== "inherited") {
 				if (matchingProp.type === "dynamic" && matchingProp.value) {
-					return getDatScriptValue(matchingProp.value);
+					return getDataScriptValue(matchingProp.value);
 				} else {
 					if (matchingProp.isStandard && matchingProp.standardOptions) {
 						if (matchingProp.standardOptions.type !== "string" && matchingProp.standardOptions.type !== "select") {
@@ -924,7 +924,7 @@ const getValueForInheritedProp = (propName: string, block: Block, getDatScriptVa
 					return matchingProp.value;
 				}
 			} else {
-				return getValueForInheritedProp(propName, parent, getDatScriptValue);
+				return getValueForInheritedProp(propName, parent, getDataScriptValue);
 			}
 		}
 		parent = parent.getParentBlock();
@@ -935,7 +935,7 @@ const getValueForInheritedProp = (propName: string, block: Block, getDatScriptVa
 const getPropValue = (
 	propName: string,
 	block: Block,
-	getDatScriptValue: (path: string) => any,
+	getDataScriptValue: (path: string) => any,
 	defaultProps?: Record<string, any> | null,
 ): any => {
 	if (defaultProps && defaultProps[propName] !== undefined) {
@@ -945,10 +945,10 @@ const getPropValue = (
 	if (blockProps[propName]) {
 		const prop = blockProps[propName];
 		if (prop.type === "dynamic" && prop.value) {
-			return getDatScriptValue(prop.value);
+			return getDataScriptValue(prop.value);
 		} else if (prop.type === "inherited") {
 			if (prop.value) {
-				return getValueForInheritedProp(prop.value, block, getDatScriptValue);
+				return getValueForInheritedProp(prop.value, block, getDataScriptValue);
 			}
 		} else {
 			if (prop.isStandard && prop.standardOptions) {

From 2eb70e1a9607bd70800a72e52b83dfd1859e8fbc Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 01:12:39 +0530
Subject: [PATCH 116/547] fix: include comp. in comp. case (fragment mode)

---
 frontend/src/utils/blockController.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 3da19ab33..a16c3aee9 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -307,18 +307,16 @@ const blockController = {
 		}
 		const editingMode = canvasStore.editingMode;
 
+		while (block && block.isExtendedFromComponent()) {
+			if (block.extendedFromComponent) break;
+			block = block.getParentBlock()!;
+		}
 		if (editingMode == "fragment") {
-			while (block && block.getParentBlock()) {
-				block = block.getParentBlock()!;
-			}
-			return block;
-		} else {
-			while (block && block.isExtendedFromComponent()) {
-				if (block.extendedFromComponent) break;
+			while (block && !block.isExtendedFromComponent() && block.getParentBlock()) {
 				block = block.getParentBlock()!;
 			}
-			return block;
 		}
+		return block;
 	},
 	getBlockScript: () => {
 		return blockController.getSelectedBlocks()[0]?.getBlockScript(); // TODO: change to first selected block

From 4b38ce0eb46418cb68e4eb96deea791ac2484c52 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 01:14:51 +0530
Subject: [PATCH 117/547] refactor: replace getSelectedBlocks with
 getFirstSelectedBlock

---
 frontend/src/utils/blockController.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index a16c3aee9..417f67d19 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -319,13 +319,13 @@ const blockController = {
 		return block;
 	},
 	getBlockScript: () => {
-		return blockController.getSelectedBlocks()[0]?.getBlockScript(); // TODO: change to first selected block
+		return blockController.getFirstSelectedBlock()?.getBlockScript();
 	},
 	setBlockScript: (script: string) => {
-		blockController.getSelectedBlocks()[0]?.setBlockScript(script);
+		blockController.getFirstSelectedBlock()?.setBlockScript(script);
 	},
 	getBlockProps: () => {
-		return blockController.getSelectedBlocks()[0]?.getBlockProps();
+		return blockController.getFirstSelectedBlock()?.getBlockProps();
 	},
 	setBlockProp: (key: string, value: string) => {
 		const allProps = blockController.getBlockProps();

From 467ecdad0c2e821f31e5af5bd4de92ae39c186db Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 09:25:57 +0530
Subject: [PATCH 118/547] refactor: update Popover margin and width properties

---
 frontend/src/components/ArrayInput.vue  | 2 +-
 frontend/src/components/ObjectInput.vue | 2 +-
 frontend/src/components/PropsEditor.vue | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
index b45f5238b..f397f0307 100644
--- a/frontend/src/components/ArrayInput.vue
+++ b/frontend/src/components/ArrayInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover popoverClass="!mr-[15px]" placement="left">
+	<Popover popoverClass="!mr-[20px] !min-w-fit" placement="left">
 		<template #target="{ open }">
 			<div class="relative flex w-full gap-2">
 				<div class="flex w-[88px] shrink-0 items-center">
diff --git a/frontend/src/components/ObjectInput.vue b/frontend/src/components/ObjectInput.vue
index c7c26e8bc..e27016862 100644
--- a/frontend/src/components/ObjectInput.vue
+++ b/frontend/src/components/ObjectInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover popoverClass="!mr-[15px]" placement="left">
+	<Popover popoverClass="!mr-[20px] !min-w-fit" placement="left">
 		<template #target="{ open }">
 			<div class="relative flex w-full gap-2">
 				<div class="flex w-[88px] shrink-0 items-center">
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 1190b65aa..f96a2f062 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -6,7 +6,7 @@
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded-sm bg-surface-gray-2 p-2"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!mr-[25px]" placement="left-start">
+					<Popover popoverClass="!mr-[25px] !min-w-fit" placement="left">
 						<template #target="{ open }">
 							<div class="flex w-full items-center justify-between">
 								<div class="flex w-fit max-w-[60%] items-center gap-2 pl-2">
@@ -85,7 +85,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!mr-[20px]" placement="left">
+		<Popover ref="popOverRef" popoverClass="!mr-[17px] !min-w-fit" placement="left">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"

From 9bad172e6b8f3ddd184e550fff4c22c727689e63 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 09:54:29 +0530
Subject: [PATCH 119/547] fix: close popover on save

refactor: better name for sortedObj in PropsEditor
---
 frontend/src/components/PropsEditor.vue       | 45 ++++++++++++-------
 .../src/components/PropsPopoverContent.vue    |  8 ++--
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index f96a2f062..ff9ad114c 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="propsEditor" class="flex flex-col gap-2">
 		<div class="flex flex-col gap-2 rounded-lg">
-			<template v-for="(value, key, index) in sortedObj" :key="index">
+			<template v-for="(value, key, index) in sortedProps" :key="index">
 				<div
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded-sm bg-surface-gray-2 p-2"
@@ -73,13 +73,18 @@
 								</div>
 							</div>
 						</template>
-						<template #body>
+						<template #body="{ open, close }">
 							<PropsPopoverContent
 								ref="popoverContentItemsRef"
 								mode="edit"
 								:propName="key as string"
 								:propDetails="value"
-								@update:prop="updateProp" />
+								@update:prop="
+									(prop) => {
+										updateProp(prop);
+										close();
+									}
+								" />
 						</template>
 					</Popover>
 				</div>
@@ -105,13 +110,13 @@
 						}
 					"></BuilderButton>
 			</template>
-			<template #body>
+			<template #body="{ open, close }">
 				<PropsPopoverContent
 					ref="popoverContentAddRef"
 					:mode="popupMode"
 					:propName="keyBeingEdited"
 					:propDetails="propDetailsOfKeyBeingEdited"
-					@add:prop="addProp"
+					@add:prop="(prop) => { addProp(prop); close(); }"
 					@update:prop="updateProp" />
 			</template>
 		</Popover>
@@ -167,7 +172,7 @@ const props = defineProps<{
 	description?: string;
 }>();
 
-const sortedObj = computed(() => {
+const sortedProps = computed(() => {
 	// Sort props: standard props at the front, then non-standard props
 	const entries = Object.entries(props.obj || {});
 	entries.sort((a, b) => {
@@ -190,11 +195,10 @@ const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
 });
 
-const addProp = async (name: string, value: BlockProps[string]) => {
+const addProp = async ({ name, value }: { name: string; value: BlockProps[string] }) => {
 	const map = new Map(Object.entries(props.obj));
 	map.set(name, value);
 	popupMode.value = "edit";
-	keyBeingEdited.value = name;
 	emit("update:obj", mapToObject(map));
 	return map;
 };
@@ -260,20 +264,27 @@ const updateStandardOptions = (map: Map<string, BlockProps[string]>, key: string
 	return map;
 };
 
-const updateProp = async (oldKey: string, newKey: string, value: BlockProps[string]) => {
+const updateProp = async ({
+	oldPropName,
+	newName,
+	newValue,
+}: {
+	oldPropName: string;
+	newName: string;
+	newValue: BlockProps[string];
+}) => {
 	let map = new Map(Object.entries(props.obj));
 
-	if (oldKey !== newKey) {
-		map = new Map(Object.entries(replaceKey(map, oldKey, newKey)));
+	if (oldPropName !== newName) {
+		map = new Map(Object.entries(replaceKey(map, oldPropName, newName)));
 	}
 
-	map = updateObjectValue(map, newKey, {
-		value: value.value,
-		type: value.type,
+	map = updateObjectValue(map, newName, {
+		value: newValue.value,
+		type: newValue.type,
 	});
-	map = updateIsStandard(map, newKey, value.isStandard || false);
-	map = updateStandardOptions(map, newKey, value.standardOptions || {});
-
+	map = updateIsStandard(map, newName, newValue.isStandard || false);
+	map = updateStandardOptions(map, newName, newValue.standardOptions || {});
 	emit("update:obj", mapToObject(map));
 
 	return map;
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 3b7825b20..e70708a3d 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -194,8 +194,8 @@ const autoCompleteRef = ref<typeof Autocomplete | null>(null);
 const optionsComponentRef = ref<any>(null);
 
 const emit = defineEmits({
-	"add:prop": (name: string, prop: BlockProps[string]) => true,
-	"update:prop": (oldPropName: string, newName: string, newProp: BlockProps[string]) => true,
+	"add:prop": ({ name, value }: { name: string; value: BlockProps[string] }) => true,
+	"update:prop": ({ oldPropName, newName, newValue }: {oldPropName: string, newName: string, newValue: BlockProps[string]}) => true,
 });
 
 const propTypes = computed(() => {
@@ -448,9 +448,9 @@ const save = async () => {
 			: undefined,
 	};
 	if (props.mode === "add") {
-		emit("add:prop", name.value, propValue);
+		emit("add:prop", { name: name.value, value: propValue });
 	} else {
-		emit("update:prop", props.propName!, name.value, propValue);
+		emit("update:prop", { oldPropName: props.propName!, newName: name.value, newValue: propValue });
 	}
 };
 defineExpose({ reset });

From 33a1f049bf691a0455727947d6641ed9a8f268a4 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 10:51:44 +0530
Subject: [PATCH 120/547] refactor: rename key variable to name

---
 frontend/src/components/PropsEditor.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index ff9ad114c..0d3eb385d 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="propsEditor" class="flex flex-col gap-2">
 		<div class="flex flex-col gap-2 rounded-lg">
-			<template v-for="(value, key, index) in sortedProps" :key="index">
+			<template v-for="(value, name, index) in sortedProps" :key="index">
 				<div
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded-sm bg-surface-gray-2 p-2"
@@ -37,7 +37,7 @@
 									</div>
 									<div class="flex max-w-full flex-col gap-1">
 										<p class="text-sm font-medium text-ink-gray-8">
-											{{ key }}
+											{{ name }}
 										</p>
 										<p v-if="value.isStandard" class="text-xs text-ink-gray-6">
 											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
@@ -61,7 +61,7 @@
 													keepProps: true,
 													keepType: false,
 												});
-												keyBeingEdited = key as string;
+												keyBeingEdited = name as string;
 												open();
 											}
 										" />
@@ -69,7 +69,7 @@
 										class="flex-shrink-0 bg-transparent text-xs"
 										variant="subtle"
 										icon="x"
-										@click="deleteObjectKey(key as string)" />
+										@click="deleteObjectKey(name as string)" />
 								</div>
 							</div>
 						</template>
@@ -77,7 +77,7 @@
 							<PropsPopoverContent
 								ref="popoverContentItemsRef"
 								mode="edit"
-								:propName="key as string"
+								:propName="name as string"
 								:propDetails="value"
 								@update:prop="
 									(prop) => {

From 1ab0c439c7d4f98a66e89a332228480189f376c1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 11:25:03 +0530
Subject: [PATCH 121/547] fix: isEditable will be kept for next iterations

---
 frontend/src/components/PropsPopoverContent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index e70708a3d..2a2ae7dfd 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -79,7 +79,8 @@
 					}
 				" />
 		</div>
-		<div v-if="!isStandardBool && isInFragmentMode" class="flex items-center justify-between">
+		<!-- Disabled for now-->
+		<div v-if="false && !isStandardBool && isInFragmentMode" class="flex items-center justify-between">
 			<InputLabel>Is Editable</InputLabel>
 			<OptionToggle
 				:options="[

From 789157b77fc7f56978c9becc42dfca88e3a7359d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 11:27:54 +0530
Subject: [PATCH 122/547] fix: defaultValue now moved to options (as
 options.defaultValue)

---
 frontend/src/builder.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 225440e9f..3a9215cfe 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -9,7 +9,7 @@ declare interface BlockStyleMap {
 type BlockPropsStandardOptions = {
 	type: "number" | "string" | "boolean" | "select" | "array" | "object";
 	isRequired?: boolean;
-	defaultValue?: any;
+	// defaultValue?: any;
 	options?: Record<string, any>;
 	dependencies?: { [key: string]: any };
 }

From 1a69c5d5c2ee1b729a3574d650b025e60fcf052f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 12:23:12 +0530
Subject: [PATCH 123/547] fix: add back fixed styles

---
 frontend/src/components/Controls/Autocomplete.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 0ce05012a..39e819d14 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -15,7 +15,13 @@
 					ref="comboboxInput"
 					v-model="searchQuery"
 					autocomplete="off"
-					@focus="emit('focus')"
+					@focus="
+						() => {
+							fixedStyles = getFixedStyles();
+							emit('focus');
+							return false;
+						}
+					"
 					@blur="handleBlur"
 					@keydown.enter="handleEnter"
 					:display-value="getDisplayValue"

From bdf0b8dfdfd14090440f9a772e26004d36677ccb Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 7 Dec 2025 12:29:09 +0530
Subject: [PATCH 124/547] refactor(Autocomplete): formatting

---
 frontend/src/components/Controls/Autocomplete.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 39e819d14..b064f7054 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -118,8 +118,8 @@ interface Props {
 	placeholder?: string;
 	showInputAsOption?: boolean;
 	actionButton?: ActionButton;
-		makeFixed?: boolean;
-		fixTo?: string;
+	makeFixed?: boolean;
+	fixTo?: string;
 	allowArbitraryValue?: boolean;
 }
 
@@ -127,7 +127,7 @@ const props = withDefaults(defineProps<Props>(), {
 	options: () => [],
 	placeholder: "Search",
 	showInputAsOption: false,
-		makeFixed: false,
+	makeFixed: false,
 	allowArbitraryValue: true,
 });
 

From 762a62ea20a4379a722e6d0fa5af20db7d93b2c0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 8 Dec 2025 10:23:27 +0530
Subject: [PATCH 125/547] fix: Do not set label as value even if option to set
 arbitrary value is enabled

this stopped working after: https://github.com/frappe/builder/pull/437
---
 .../src/components/Controls/Autocomplete.vue  | 51 ++++++++-----------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 95d38f9ea..001d1f15b 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -167,48 +167,41 @@ const refreshOptions = async (query = "") => {
 	}
 };
 
-const clearSelection = () => {
-	emit("update:modelValue", null);
-};
+const clearSelection = () => emit("update:modelValue", null);
 
-const handleEnter = (event: KeyboardEvent) => {
-	if (!props.allowArbitraryValue) return;
+const getInputValue = (event: Event) => (event.target as HTMLInputElement)?.value?.trim();
 
-	if (containerRef.value?.querySelector("[data-highlighted]")) {
-		return;
-	}
+const submitArbitraryValue = (inputValue: string) => {
+	if (!inputValue) return;
+	const matchingOption = allOptions.value.find((opt) => opt.label.toLowerCase() === inputValue.toLowerCase());
+	emit("update:modelValue", matchingOption?.value ?? inputValue);
+	isOpen.value = false;
+};
 
-	const inputValue = (event.target as HTMLInputElement)?.value?.trim();
-	if (inputValue) {
-		event.preventDefault();
-		event.stopPropagation();
-		emit("update:modelValue", inputValue);
-		isOpen.value = false;
-	}
+const handleEnter = (event: KeyboardEvent) => {
+	if (!props.allowArbitraryValue || containerRef.value?.querySelector("[data-highlighted]")) return;
+	event.preventDefault();
+	event.stopPropagation();
+	submitArbitraryValue(getInputValue(event));
 };
 
 const handleBlur = (event: FocusEvent) => {
-	if (props.allowArbitraryValue) {
-		const inputValue = (event.target as HTMLInputElement)?.value?.trim();
-		if (inputValue) {
-			emit("update:modelValue", inputValue);
-		}
+	const relatedTarget = event.relatedTarget as HTMLElement;
+	if (relatedTarget && containerRef.value?.contains(relatedTarget)) {
+		emit("blur");
+		return;
 	}
+	if (props.allowArbitraryValue) submitArbitraryValue(getInputValue(event));
 	emit("blur");
 };
 
-watch(searchQuery, (newQuery: string) => props.getOptions && refreshOptions(newQuery));
-
+watch(searchQuery, (query) => props.getOptions && refreshOptions(query));
 watch(
 	() => props.modelValue,
-	(newValue) => {
-		searchQuery.value = newValue ?? "";
-	},
+	(val) => (searchQuery.value = val ?? ""),
+	{ immediate: true },
 );
-
-if (props.getOptions) {
-	refreshOptions();
-}
+if (props.getOptions) refreshOptions();
 
 defineExpose({
 	refreshOptions,

From 661a6bd5da5a164f81c3e6e9ad2511807b39323c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 9 Dec 2025 00:52:24 +0530
Subject: [PATCH 126/547] fix: include all properties in std. component root
 block rendering

---
 builder/builder/doctype/builder_page/builder_page.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 398e16089..c42ae9974 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -653,18 +653,18 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				if prop_info.get("is_standard"):
 					map_of_std_props_info[prop_name].pop()
     
-			normal_props = {k: v["value"] for k, v in props_obj.items() if not v.get("is_standard")}
+			all_props = {k: v["value"] for k, v in props_obj.items()}
 			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
 
 			if block.get("blockScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}" # extra hash as repeating blocks have same blockId
-				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(normal_props) or '{}'});"
+				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(all_props) or '{}'});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)
 
-			return tag, to_jinja_literal(normal_props), to_jinja_literal(std_props) if std_props else None
+			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None
 
 		for block in blocks:
 			tag, props, std_props = get_tag(block, soup)

From 80997de7ef4a306fa661e4596884b8c8eeecaf36 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 10:40:13 +0530
Subject: [PATCH 127/547] feat: Export custom fonts

And remove symlinking of asset directly load assets from public folder
---
 .../doctype/builder_page/builder_page.py      |   6 +-
 builder/export_import_standard_page.py        | 269 +++++++++++++++++-
 builder/utils.py                              |  57 ++--
 frontend/src/data/moduleDef.ts                |   2 +-
 4 files changed, 298 insertions(+), 36 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index d5944c42a..cd58fb4c7 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -393,12 +393,14 @@ def generate_page_preview_image(self, html=None):
 
 	def set_custom_font(self, context, font_map):
 		user_fonts = frappe.get_all(
-			"User Font", fields=["font_name", "font_file"], filters={"name": ("in", list(font_map.keys()))}
+			"User Font",
+			fields=["font_name", "font_file"],
+			filters={"font_name": ("in", list(font_map.keys()))},
 		)
 		if user_fonts:
 			context.custom_fonts = user_fonts
 		for font in user_fonts:
-			del font_map[font.font_name]
+			font_map.pop(font.font_name, None)
 
 	def replace_component(self, target_component, replace_with):
 		if self.blocks:
diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index 5c9546702..f7e088ff2 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -1,4 +1,6 @@
 import os
+import re
+import shutil
 
 import frappe
 from frappe.modules.export_file import strip_default_fields
@@ -32,14 +34,14 @@ def export_page_as_standard(page_name, target_app):
 
 	blocks = frappe.parse_json(page_config.get("draft_blocks") or page_config["blocks"])
 	if blocks:
-		copy_assets_from_blocks(blocks, paths["assets_path"])
+		copy_assets_from_blocks(blocks, paths["assets_path"], target_app)
 		page_config["blocks"] = blocks
 		page_config["draft_blocks"] = None
 
 	if page_doc.favicon:
-		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"])
+		page_config["favicon"] = copy_asset_file(page_doc.favicon, paths["assets_path"], target_app)
 	if page_doc.meta_image:
-		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"])
+		page_config["meta_image"] = copy_asset_file(page_doc.meta_image, paths["assets_path"], target_app)
 
 	page_config["project_folder"] = target_app
 	page_config = frappe.as_json(page_config, ensure_ascii=False)
@@ -51,7 +53,22 @@ def export_page_as_standard(page_name, target_app):
 
 	if blocks:
 		components = extract_components_from_blocks(blocks)
-		export_components(components, paths["components_path"], paths["assets_path"])
+		export_components(components, paths["components_path"], paths["assets_path"], target_app)
+
+		fonts = extract_fonts_from_blocks(blocks)
+		variables = extract_variables_from_blocks(blocks)
+
+		for component_id in components:
+			try:
+				component_doc = frappe.get_cached_doc("Builder Component", component_id)
+				component_blocks = frappe.parse_json(component_doc.block or "[]")
+				fonts.update(extract_fonts_from_blocks(component_blocks))
+				variables.update(extract_variables_from_blocks(component_blocks))
+			except Exception:
+				pass
+
+		export_fonts(fonts, paths["builder_files_path"], paths["assets_path"], target_app)
+		export_variables(variables, paths["builder_files_path"])
 
 
 def sync_standard_builder_pages(app_name=None):
@@ -64,12 +81,20 @@ def sync_standard_builder_pages(app_name=None):
 		pages_path = os.path.join(app_path, "builder_files", "pages")
 		components_path = os.path.join(app_path, "builder_files", "components")
 		scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
+		fonts_path = os.path.join(app_path, "builder_files", "fonts")
+		variables_path = os.path.join(app_path, "builder_files", "variables")
 		if os.path.exists(components_path):
 			print(f"Importing components from {components_path}")
 			make_records(components_path)
 		if os.path.exists(scripts_path):
 			print(f"Importing scripts from {scripts_path}")
 			make_records(scripts_path)
+		if os.path.exists(fonts_path):
+			print(f"Importing fonts from {fonts_path}")
+			import_fonts(fonts_path)
+		if os.path.exists(variables_path):
+			print(f"Importing variables from {variables_path}")
+			make_records(variables_path)
 		if os.path.exists(pages_path):
 			frappe.get_doc(
 				{
@@ -80,3 +105,239 @@ def sync_standard_builder_pages(app_name=None):
 			).insert(ignore_if_duplicate=True)
 			print(f"Importing page from {pages_path}")
 			make_records(pages_path)
+
+
+def extract_fonts_from_blocks(blocks):
+	"""Extract font family names from blocks recursively"""
+	fonts = set()
+	if not isinstance(blocks, list):
+		blocks = [blocks]
+
+	for block in blocks:
+		if not isinstance(block, dict):
+			continue
+
+		for style_key in ["baseStyles", "mobileStyles", "tabletStyles", "rawStyles"]:
+			styles = block.get(style_key, {})
+			if styles and isinstance(styles, dict):
+				font = styles.get("fontFamily")
+				if font and font.strip():
+					font = font.replace("\\", "").strip()
+					if font:
+						fonts.add(font)
+
+		inner_html = block.get("innerHTML", "")
+		if inner_html:
+			inline_fonts = re.findall(r'font-family:\s*([^;"]+)', inner_html)
+			for font in inline_fonts:
+				font = font.strip().strip("'\"")
+				if font:
+					fonts.add(font)
+
+		children = block.get("children", [])
+		if children and isinstance(children, list):
+			fonts.update(extract_fonts_from_blocks(children))
+
+	return fonts
+
+
+def extract_variables_from_blocks(blocks):
+	"""Extract CSS variable names from blocks recursively"""
+	variables = set()
+	if not isinstance(blocks, list):
+		blocks = [blocks]
+
+	# Regex to match var(--variable-name, ...) or var(--variable-name)
+	var_pattern = re.compile(r"var\(--([a-zA-Z0-9_-]+)")
+
+	def extract_vars_from_value(value):
+		"""Extract variable names from a CSS value"""
+		if not value or not isinstance(value, str):
+			return
+		matches = var_pattern.findall(value)
+		for match in matches:
+			variables.add(match)
+
+	for block in blocks:
+		if not isinstance(block, dict):
+			continue
+
+		for style_key in ["baseStyles", "mobileStyles", "tabletStyles", "rawStyles"]:
+			styles = block.get(style_key, {})
+			if styles and isinstance(styles, dict):
+				for _prop, value in styles.items():
+					extract_vars_from_value(value)
+
+		attributes = block.get("attributes", {})
+		if attributes and isinstance(attributes, dict):
+			for _prop, value in attributes.items():
+				extract_vars_from_value(value)
+
+		inner_html = block.get("innerHTML", "")
+		if inner_html:
+			extract_vars_from_value(inner_html)
+
+		children = block.get("children", [])
+		if children and isinstance(children, list):
+			variables.update(extract_variables_from_blocks(children))
+
+	return variables
+
+
+def export_fonts(fonts, builder_files_path, assets_path, target_app="builder"):
+	"""Export User Font records and their font files"""
+	if not fonts:
+		return
+
+	fonts_path = os.path.join(builder_files_path, "fonts")
+	os.makedirs(fonts_path, exist_ok=True)
+
+	for font_name in fonts:
+		try:
+			font_docs = frappe.get_all(
+				"User Font", filters={"font_name": font_name}, fields=["name", "font_name", "font_file"]
+			)
+			if not font_docs:
+				continue
+
+			font_doc = font_docs[0]
+
+			# Copy font file to assets
+			if font_doc.font_file:
+				new_font_path = copy_font_file(font_doc.font_file, assets_path, target_app)
+				if new_font_path:
+					font_doc["font_file"] = new_font_path
+
+			font_config = {
+				"doctype": "User Font",
+				"font_name": font_doc.font_name,
+				"font_file": font_doc.get("font_file"),
+			}
+
+			safe_font_name = frappe.scrub(font_name)
+			font_dir = os.path.join(fonts_path, safe_font_name)
+			os.makedirs(font_dir, exist_ok=True)
+			font_file_path = os.path.join(font_dir, f"{safe_font_name}.json")
+
+			with open(font_file_path, "w", encoding="utf-8") as f:
+				f.write(frappe.as_json(font_config, ensure_ascii=False))
+
+		except Exception as e:
+			frappe.log_error(f"Failed to export font {font_name}: {e!s}")
+
+
+def copy_font_file(file_url, assets_path, target_app="builder"):
+	"""Copy a font file to assets directory"""
+	if not file_url or not isinstance(file_url, str):
+		return None
+
+	try:
+		if file_url.startswith("/files/"):
+			source_path = os.path.join(frappe.local.site_path, "public", file_url.lstrip("/"))
+		elif file_url.startswith("/assets/") and "/builder_files/" in file_url:
+			# Extract app name from URL like /assets/{app}/builder_files/assets/file.png
+			parts = file_url.split("/")
+			if len(parts) >= 3:
+				app_name = parts[2]
+				source_path = os.path.join(frappe.get_app_path(app_name), "public", "/".join(parts[3:]))
+			else:
+				return None
+		elif file_url.startswith("/builder_assets/"):
+			# Legacy path - check www folder
+			source_path = os.path.join(frappe.get_app_path("builder"), "www", file_url.lstrip("/"))
+		else:
+			return None
+
+		if os.path.exists(source_path):
+			filename = os.path.basename(file_url)
+			dest_path = os.path.join(assets_path, filename)
+			shutil.copy2(source_path, dest_path)
+			return f"/assets/{target_app}/builder_files/assets/{filename}"
+	except Exception as e:
+		frappe.log_error(f"Failed to copy font file {file_url}: {e!s}")
+
+	return None
+
+
+def export_variables(variables, builder_files_path):
+	"""Export Builder Variable records"""
+	if not variables:
+		return
+
+	variables_path = os.path.join(builder_files_path, "variables")
+	os.makedirs(variables_path, exist_ok=True)
+
+	for var_name in variables:
+		try:
+			# Convert CSS variable name (kebab-case) to possible DB name (snake_case)
+			db_name = var_name.replace("-", "_")
+
+			# Try to find the variable by name
+			var_docs = frappe.get_all(
+				"Builder Variable",
+				filters=[
+					["variable_name", "in", [var_name, db_name, var_name.replace("-", " ").title()]],
+				],
+				fields=["name", "variable_name", "type", "value", "dark_value"],
+			)
+
+			if not var_docs:
+				# Also try searching by the scrubbed name
+				var_docs = frappe.get_all(
+					"Builder Variable",
+					filters={"name": db_name},
+					fields=["name", "variable_name", "type", "value", "dark_value"],
+				)
+
+			if not var_docs:
+				continue
+
+			var_doc = var_docs[0]
+
+			var_config = {
+				"doctype": "Builder Variable",
+				"variable_name": var_doc.variable_name,
+				"type": var_doc.type,
+				"value": var_doc.value,
+				"dark_value": var_doc.dark_value,
+			}
+
+			safe_var_name = frappe.scrub(var_doc.variable_name)
+			var_dir = os.path.join(variables_path, safe_var_name)
+			os.makedirs(var_dir, exist_ok=True)
+			var_file_path = os.path.join(var_dir, f"{safe_var_name}.json")
+
+			with open(var_file_path, "w", encoding="utf-8") as f:
+				f.write(frappe.as_json(var_config, ensure_ascii=False))
+
+		except Exception as e:
+			frappe.log_error(f"Failed to export variable {var_name}: {e!s}")
+
+
+def import_fonts(fonts_path):
+	"""Import User Font records from exported files"""
+	if not os.path.isdir(fonts_path):
+		return
+
+	for fname in os.listdir(fonts_path):
+		font_dir = os.path.join(fonts_path, fname)
+		if os.path.isdir(font_dir) and fname != "__pycache__":
+			font_file = os.path.join(font_dir, f"{fname}.json")
+			if os.path.exists(font_file):
+				try:
+					with open(font_file) as f:
+						font_config = frappe.parse_json(f.read())
+
+					if frappe.db.exists("User Font", font_config.get("font_name")):
+						continue
+
+					font_doc = frappe.get_doc(
+						{
+							"doctype": "User Font",
+							"font_name": font_config.get("font_name"),
+							"font_file": font_config.get("font_file"),
+						}
+					)
+					font_doc.insert(ignore_permissions=True)
+				except Exception as e:
+					frappe.log_error(f"Failed to import font {fname}: {e!s}")
diff --git a/builder/utils.py b/builder/utils.py
index 7b245b535..e99862890 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -442,65 +442,73 @@ def split_styles(styles):
 	}
 
 
-def copy_assets_from_blocks(blocks, assets_path):
+def copy_assets_from_blocks(blocks, assets_path, target_app="builder"):
 	if not isinstance(blocks, list):
 		blocks = [blocks]
 
 	for block in blocks:
 		if isinstance(block, dict):
-			process_block_assets(block, assets_path)
+			process_block_assets(block, assets_path, target_app)
 			children = block.get("children")
 			if children and isinstance(children, list):
-				copy_assets_from_blocks(children, assets_path)
+				copy_assets_from_blocks(children, assets_path, target_app)
 
 
-def process_block_assets(block, assets_path):
+def process_block_assets(block, assets_path, target_app="builder"):
 	"""Process assets for a single block"""
 	if block.get("element") in ("img", "video"):
 		src = block.get("attributes", {}).get("src")
 		if src:
-			new_location = copy_asset_file(src, assets_path)
+			new_location = copy_asset_file(src, assets_path, target_app)
 			if new_location:
 				block["attributes"]["src"] = new_location
 
 
-def copy_asset_file(file_url, assets_path):
+def copy_asset_file(file_url, assets_path, target_app="builder"):
 	"""Copy a file from the source to assets directory and return new public path"""
 	if not file_url or not isinstance(file_url, str):
 		return None
 
 	try:
 		if file_url.startswith("/files/"):
-			return copy_from_site_files(file_url, assets_path)
-		elif file_url.startswith("/builder_assets/"):
-			return copy_from_builder_assets(file_url, assets_path)
+			return copy_from_site_files(file_url, assets_path, target_app)
+		elif file_url.startswith("/builder_assets/") or (
+			file_url.startswith("/assets/") and "/builder_files/" in file_url
+		):
+			return copy_from_builder_assets(file_url, assets_path, target_app)
 	except Exception as e:
 		frappe.log_error(f"Failed to copy asset {file_url}: {e!s}")
 	return None
 
 
-def copy_from_site_files(file_url, assets_path):
+def copy_from_site_files(file_url, assets_path, target_app="builder"):
 	"""Copy file from site files directory"""
 	source_path = os.path.join(frappe.local.site_path, "public", file_url.lstrip("/"))
 	if os.path.exists(source_path):
-		return copy_file_to_assets(source_path, file_url, assets_path)
+		return copy_file_to_assets(source_path, file_url, assets_path, target_app)
 	return None
 
 
-def copy_from_builder_assets(file_url, assets_path):
+def copy_from_builder_assets(file_url, assets_path, target_app="builder"):
 	"""Copy file from builder assets directory"""
-	source_path = os.path.join(frappe.get_app_path("builder"), "www", file_url.lstrip("/"))
+	if file_url.startswith("/assets/") and "/builder_files/" in file_url:
+		parts = file_url.split("/")
+		if len(parts) >= 3:
+			app_name = parts[2]
+			source_path = os.path.join(frappe.get_app_path(app_name), "public", "/".join(parts[3:]))
+	else:
+		source_path = os.path.join(frappe.get_app_path("builder"), "www", file_url.lstrip("/"))
 	if os.path.exists(source_path):
-		return copy_file_to_assets(source_path, file_url, assets_path)
+		return copy_file_to_assets(source_path, file_url, assets_path, target_app)
 	return None
 
 
-def copy_file_to_assets(source_path, file_url, assets_path):
+def copy_file_to_assets(source_path, file_url, assets_path, target_app="builder"):
 	"""Copy file to assets directory and return public path"""
 	filename = os.path.basename(file_url)
 	dest_path = os.path.join(assets_path, filename)
 	shutil.copy2(source_path, dest_path)
-	return f"/builder_assets/page_{os.path.basename(assets_path)}/{filename}"
+	return f"/assets/{target_app}/builder_files/assets/{filename}"
 
 
 def extract_components_from_blocks(blocks):
@@ -543,14 +551,14 @@ def export_client_scripts(page_doc, client_scripts_path):
 			f.write(frappe.as_json(script_config, ensure_ascii=False))
 
 
-def export_components(components, components_path, assets_path):
+def export_components(components, components_path, assets_path, target_app="builder"):
 	"""Export components to files"""
 	for component_id in components:
 		try:
 			component_doc = frappe.get_doc("Builder Component", component_id)
 			# replace assets in component blocks
 			component_blocks = frappe.parse_json(component_doc.block or "[]")
-			copy_assets_from_blocks(component_blocks, assets_path)
+			copy_assets_from_blocks(component_blocks, assets_path, target_app)
 			component_doc.block = frappe.as_json(component_blocks)
 
 			# Replace forward slashes with underscores to create valid directory names
@@ -568,7 +576,6 @@ def export_components(components, components_path, assets_path):
 
 def create_export_directories(app_path, export_name):
 	paths = get_export_paths(app_path, export_name)
-	setup_assets_symlink(app_path, paths["assets_path"])
 	for path in paths.values():
 		os.makedirs(path, exist_ok=True)
 
@@ -579,10 +586,11 @@ def get_export_paths(app_path, export_name):
 	"""Get all export directory paths"""
 	builder_files_path = os.path.join(app_path, "builder_files")
 	pages_path = os.path.join(builder_files_path, "pages")
+	public_builder_files_path = os.path.join(app_path, "public", "builder_files")
 
 	return {
 		"page_path": os.path.join(pages_path, export_name),
-		"assets_path": os.path.join(builder_files_path, "assets"),
+		"assets_path": os.path.join(public_builder_files_path, "assets"),
 		"client_scripts_path": os.path.join(builder_files_path, "client_scripts"),
 		"components_path": os.path.join(builder_files_path, "components"),
 		"builder_files_path": builder_files_path,
@@ -590,15 +598,6 @@ def get_export_paths(app_path, export_name):
 	}
 
 
-def setup_assets_symlink(app_path, assets_path):
-	symlink_path = os.path.join(app_path, "www", "builder_assets", "page_assets")
-	os.makedirs(os.path.dirname(symlink_path), exist_ok=True)
-	os.makedirs(assets_path, exist_ok=True)
-	if not os.path.islink(symlink_path):
-		remove_existing_path(symlink_path)
-		os.symlink(assets_path, symlink_path)
-
-
 def remove_existing_path(path):
 	if os.path.exists(path):
 		if os.path.isdir(path):
diff --git a/frontend/src/data/moduleDef.ts b/frontend/src/data/moduleDef.ts
index 2dadbf162..3feccbb65 100644
--- a/frontend/src/data/moduleDef.ts
+++ b/frontend/src/data/moduleDef.ts
@@ -4,7 +4,7 @@ const moduleDef = createListResource({
 	method: "GET",
 	doctype: "Module Def",
 	fields: ["name", "module_name"],
-	orderBy: "`module_name`",
+	orderBy: "module_name",
 	cache: "moduleDef",
 	start: 0,
 	pageLength: 200,

From cb80ea8d9f629775c8a0ce902b76c2ce1dc6a2c3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 11:16:59 +0530
Subject: [PATCH 128/547] fix: Add name field to font and variable export
 configurations

---
 builder/export_import_standard_page.py |  2 ++
 builder/utils.py                       | 30 ++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index f7e088ff2..928f8212f 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -210,6 +210,7 @@ def export_fonts(fonts, builder_files_path, assets_path, target_app="builder"):
 
 			font_config = {
 				"doctype": "User Font",
+				"name": font_doc.name,
 				"font_name": font_doc.font_name,
 				"font_file": font_doc.get("font_file"),
 			}
@@ -296,6 +297,7 @@ def export_variables(variables, builder_files_path):
 
 			var_config = {
 				"doctype": "Builder Variable",
+				"name": var_doc.name,
 				"variable_name": var_doc.variable_name,
 				"type": var_doc.type,
 				"value": var_doc.value,
diff --git a/builder/utils.py b/builder/utils.py
index e99862890..4d0f02576 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -8,7 +8,6 @@
 from urllib.parse import unquote, urlparse
 
 import frappe
-from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_url
 from frappe.utils.safe_exec import (
 	SERVER_SCRIPT_FILE_PREFIX,
@@ -239,7 +238,34 @@ def make_records(path):
 		return
 	for fname in os.listdir(path):
 		if os.path.isdir(join(path, fname)) and fname != "__pycache__":
-			import_file_by_path(f"{path}/{fname}/{fname}.json")
+			file_path = f"{path}/{fname}/{fname}.json"
+			if not os.path.exists(file_path):
+				continue
+
+			with open(file_path) as f:
+				doc = frappe.parse_json(f.read())
+
+			if not doc.get("name"):
+				doc["name"] = fname
+
+			import_doc(doc)
+
+
+def import_doc(doc):
+	doctype = doc.get("doctype")
+	name = doc.get("name")
+
+	if not doctype or not name:
+		return
+
+	if frappe.db.exists(doctype, name):
+		return
+
+	try:
+		new_doc = frappe.get_doc(doc)
+		new_doc.insert(ignore_permissions=True)
+	except Exception as e:
+		frappe.log_error(f"Failed to import {doctype} {name}: {e!s}")
 
 
 # def generate_tailwind_css_file_from_html(html):

From c2532cd2f5e47233b36a0f018c603a79a74b3ed4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 11:40:48 +0530
Subject: [PATCH 129/547] fix: Export images in component as well

---
 builder/export_import_standard_page.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index 928f8212f..bebab1c50 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -62,6 +62,7 @@ def export_page_as_standard(page_name, target_app):
 			try:
 				component_doc = frappe.get_cached_doc("Builder Component", component_id)
 				component_blocks = frappe.parse_json(component_doc.block or "[]")
+				copy_assets_from_blocks(component_blocks, paths["assets_path"], target_app)
 				fonts.update(extract_fonts_from_blocks(component_blocks))
 				variables.update(extract_variables_from_blocks(component_blocks))
 			except Exception:

From 91b1dc0abe54877a4f0a887520af6e25f200402a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 11:41:03 +0530
Subject: [PATCH 130/547] Revert "fix: Add name field to font and variable
 export configurations"

This reverts commit cb80ea8d9f629775c8a0ce902b76c2ce1dc6a2c3.
---
 builder/export_import_standard_page.py |  2 --
 builder/utils.py                       | 30 ++------------------------
 2 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index bebab1c50..870f88dbd 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -211,7 +211,6 @@ def export_fonts(fonts, builder_files_path, assets_path, target_app="builder"):
 
 			font_config = {
 				"doctype": "User Font",
-				"name": font_doc.name,
 				"font_name": font_doc.font_name,
 				"font_file": font_doc.get("font_file"),
 			}
@@ -298,7 +297,6 @@ def export_variables(variables, builder_files_path):
 
 			var_config = {
 				"doctype": "Builder Variable",
-				"name": var_doc.name,
 				"variable_name": var_doc.variable_name,
 				"type": var_doc.type,
 				"value": var_doc.value,
diff --git a/builder/utils.py b/builder/utils.py
index 4d0f02576..e99862890 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -8,6 +8,7 @@
 from urllib.parse import unquote, urlparse
 
 import frappe
+from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_url
 from frappe.utils.safe_exec import (
 	SERVER_SCRIPT_FILE_PREFIX,
@@ -238,34 +239,7 @@ def make_records(path):
 		return
 	for fname in os.listdir(path):
 		if os.path.isdir(join(path, fname)) and fname != "__pycache__":
-			file_path = f"{path}/{fname}/{fname}.json"
-			if not os.path.exists(file_path):
-				continue
-
-			with open(file_path) as f:
-				doc = frappe.parse_json(f.read())
-
-			if not doc.get("name"):
-				doc["name"] = fname
-
-			import_doc(doc)
-
-
-def import_doc(doc):
-	doctype = doc.get("doctype")
-	name = doc.get("name")
-
-	if not doctype or not name:
-		return
-
-	if frappe.db.exists(doctype, name):
-		return
-
-	try:
-		new_doc = frappe.get_doc(doc)
-		new_doc.insert(ignore_permissions=True)
-	except Exception as e:
-		frappe.log_error(f"Failed to import {doctype} {name}: {e!s}")
+			import_file_by_path(f"{path}/{fname}/{fname}.json")
 
 
 # def generate_tailwind_css_file_from_html(html):

From 754e95563d63af9ec733958358716e9e71373009 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 11:42:21 +0530
Subject: [PATCH 131/547] fix: Set font name from doc

---
 builder/export_import_standard_page.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index 870f88dbd..bebab1c50 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -211,6 +211,7 @@ def export_fonts(fonts, builder_files_path, assets_path, target_app="builder"):
 
 			font_config = {
 				"doctype": "User Font",
+				"name": font_doc.name,
 				"font_name": font_doc.font_name,
 				"font_file": font_doc.get("font_file"),
 			}
@@ -297,6 +298,7 @@ def export_variables(variables, builder_files_path):
 
 			var_config = {
 				"doctype": "Builder Variable",
+				"name": var_doc.name,
 				"variable_name": var_doc.variable_name,
 				"type": var_doc.type,
 				"value": var_doc.value,

From bea2daaa254687e3fae302e2894e46bc819c1340 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 12:01:03 +0530
Subject: [PATCH 132/547] fix: Do not copy "Is Standard" while duplicating

and remove unused code
---
 builder/api.py                                |  7 --
 .../doctype/builder_page/builder_page.json    |  9 +-
 .../doctype/builder_page/builder_page.py      | 86 -------------------
 frontend/src/stores/pageStore.ts              | 27 ------
 4 files changed, 6 insertions(+), 123 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index eaad5838c..344a45489 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -303,13 +303,6 @@ def get_overall_analytics(
 	)
 
 
-@frappe.whitelist()
-def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
-	from builder.builder.doctype.builder_page.builder_page import duplicate_standard_page
-
-	return duplicate_standard_page(app_name, page_folder_name, new_page_name)
-
-
 @frappe.whitelist()
 def get_standard_pages(app_name):
 	import os
diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index 3df835fe7..17d97d1d3 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -168,7 +168,8 @@
    "default": "0",
    "fieldname": "is_template",
    "fieldtype": "Check",
-   "label": "Is Template"
+   "label": "Is Template",
+   "no_copy": 1
   },
   {
    "fieldname": "section_break_shab",
@@ -231,7 +232,8 @@
    "default": "0",
    "fieldname": "is_standard",
    "fieldtype": "Check",
-   "label": "Is Standard"
+   "label": "Is Standard",
+   "no_copy": 1
   },
   {
    "depends_on": "is_standard",
@@ -239,12 +241,13 @@
    "fieldtype": "Link",
    "label": "Module",
    "mandatory_depends_on": "is_standard",
+   "no_copy": 1,
    "options": "Module Def"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-09-08 19:12:34.734581",
+ "modified": "2025-12-10 11:59:00.908359",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Page",
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index cd58fb4c7..d051ddddc 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -847,89 +847,3 @@ def reset_block(block):
 	block["classes"] = []
 	block["dataKey"] = {}
 	return block
-
-
-@frappe.whitelist()
-def duplicate_standard_page(app_name, page_folder_name, new_page_name=None):
-	"""Duplicate a standard page into a new builder page"""
-	import json
-
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to create pages.")
-
-	# Get the standard page config
-	app_path = frappe.get_app_path(app_name)
-	if not app_path:
-		frappe.throw(f"App '{app_name}' not found")
-
-	config_path = os.path.join(app_path, "builder_files", "pages", page_folder_name, "config.json")
-
-	if not os.path.exists(config_path):
-		frappe.throw(f"Standard page '{page_folder_name}' not found in app '{app_name}'")
-
-	with open(config_path) as f:
-		config = json.load(f)
-
-	# Create new builder page
-	new_page = frappe.new_doc("Builder Page")
-	for field in [
-		"page_name",
-		"page_title",
-		"blocks",
-		"page_data_script",
-		"head_html",
-		"body_html",
-		"dynamic_route",
-		"disable_indexing",
-		"authenticated_access",
-		"meta_description",
-		"meta_image",
-		"canonical_url",
-		"favicon",
-	]:
-		value = config.get(field)
-		if field == "blocks":
-			value = json.dumps(value or [])
-		setattr(new_page, field, value)
-	new_page.published = 0  # Start as unpublished
-
-	# Import client scripts
-	# Import client scripts
-	client_scripts_path = os.path.join(app_path, "builder_files", "client_scripts")
-	if os.path.exists(client_scripts_path):
-		for script_file in os.listdir(client_scripts_path):
-			if script_file.endswith(".json"):
-				with open(os.path.join(client_scripts_path, script_file)) as f:
-					script_config = json.load(f)
-				client_script = frappe.get_doc(
-					{
-						"doctype": "Builder Client Script",
-						"script_name": script_config.get("script_name"),
-						"script_type": script_config.get("script_type", "JavaScript"),
-						"script": script_config.get("script"),
-					}
-				)
-				client_script.insert(ignore_permissions=True)
-				new_page.append("client_scripts", {"builder_script": client_script.name})
-
-	# find all components under builder_files/components and import them
-	components_path = os.path.join(app_path, "builder_files", "components")
-	if os.path.exists(components_path):
-		# pick only json files and import them
-		for component_file in os.listdir(components_path):
-			if component_file.endswith(".json"):
-				with open(os.path.join(components_path, component_file)) as f:
-					component_config = json.load(f)
-				component = frappe.get_doc(
-					{
-						"doctype": "Builder Component",
-						"component_name": component_config.get("component_name"),
-						"block": component_config.get("block"),
-						"component_id": component_config.get("component_id"),
-					}
-				)
-				component.insert(ignore_permissions=True)
-
-	new_page.insert(ignore_permissions=True)
-
-	return {"success": True, "message": "Standard page duplicated successfully", "page_name": new_page.name}
diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index a06f46379..f483a667b 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -152,33 +152,6 @@ const usePageStore = defineStore("pageStore", {
 				},
 			);
 		},
-
-		async duplicateStandardPage(appName: string, pageFolderName: string, newPageName?: string) {
-			toast.promise(
-				createResource({
-					url: "builder.api.duplicate_standard_page",
-					method: "POST",
-					params: {
-						app_name: appName,
-						page_folder_name: pageFolderName,
-						new_page_name: newPageName,
-					},
-				}).fetch(),
-				{
-					loading: "Duplicating standard page",
-					success: async (response: any) => {
-						// refresh page list and navigate to new page
-						await webPages.reload();
-						router.push({ name: "builder", params: { pageId: response.page_name } });
-						return "Standard page duplicated successfully";
-					},
-					error: (error) => {
-						return `Failed to duplicate standard page: ${error.message}`;
-					},
-				},
-			);
-		},
-
 		deletePage: async (page: BuilderPage) => {
 			const confirmed = await confirm(
 				`Are you sure you want to delete page: ${page.page_title || page.page_name}?`,

From 9d44382459bd88385d12d1c233b52d0c45b9ef2f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 12:05:33 +0530
Subject: [PATCH 133/547] refactor: remove unused get_standard_pages function

---
 builder/api.py | 37 -------------------------------------
 1 file changed, 37 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index 344a45489..970c05b77 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -303,43 +303,6 @@ def get_overall_analytics(
 	)
 
 
-@frappe.whitelist()
-def get_standard_pages(app_name):
-	import os
-
-	app_path = frappe.get_app_path(app_name)
-	if not app_path:
-		return []
-
-	pages_path = os.path.join(app_path, "builder_files", "pages")
-	if not os.path.exists(pages_path):
-		return []
-
-	standard_pages = []
-	for folder_name in os.listdir(pages_path):
-		folder_path = os.path.join(pages_path, folder_name)
-		config_path = os.path.join(folder_path, "config.json")
-		if os.path.isdir(folder_path) and os.path.exists(config_path):
-			try:
-				with open(config_path) as f:
-					config = json.load(f)
-
-				standard_pages.append(
-					{
-						"folder_name": folder_name,
-						"page_name": config.get("page_name", folder_name),
-						"page_title": config.get("page_title", folder_name),
-						"route": config.get("route"),
-						"modified": config.get("modified"),
-					}
-				)
-			except Exception:
-				# Skip invalid config files
-				continue
-
-	return standard_pages
-
-
 def get_keys_for_autocomplete(
 	key: str,
 	value: Any,

From bc1a570a443325b21c2ac562b0925a6730676eec Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 14:22:40 +0530
Subject: [PATCH 134/547] refactor: Remove unused code

---
 builder/utils.py | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index e99862890..4e7bcb1e8 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -270,26 +270,21 @@ def make_records(path):
 
 
 def copy_img_to_asset_folder(block, page_doc):
-	# Helper function to safely get attribute from block (dict or object)
 	def safe_get(obj, attr, default=None):
 		if isinstance(obj, dict):
 			return obj.get(attr, default)
 		else:
 			return getattr(obj, attr, default)
 
-	# Convert dict to frappe._dict for consistent access
 	if isinstance(block, dict):
 		block = frappe._dict(block)
-		# Also convert children to frappe._dict for consistent access
 		children = block.get("children", [])
 		if children and isinstance(children, list):
 			block.children = [frappe._dict(child) if isinstance(child, dict) else child for child in children]
 
-	# Get element safely
 	element = safe_get(block, "element")
 
 	if element == "img":
-		# Get attributes safely
 		attributes = safe_get(block, "attributes")
 		src = None
 
@@ -299,15 +294,12 @@ def safe_get(obj, attr, default=None):
 		site_url = get_url()
 
 		if src and (src.startswith(f"{site_url}/files") or src.startswith("/files")):
-			# find file doc
 			if src.startswith(f"{site_url}/files"):
 				src = src.split(f"{site_url}")[1]
-			# url decode
 			src = unquote(src)
 			files = frappe.get_all("File", filters={"file_url": src}, fields=["name"])
 			if files:
 				_file = frappe.get_doc("File", files[0].name)
-				# copy physical file to new location
 				assets_folder_path = get_template_assets_folder_path(page_doc)
 				shutil.copy(_file.get_full_path(), assets_folder_path)
 
@@ -318,7 +310,6 @@ def safe_get(obj, attr, default=None):
 				else:
 					attributes.src = new_src
 
-	# Process children safely
 	children = safe_get(block, "children", [])
 	for child in children or []:
 		copy_img_to_asset_folder(child, page_doc)
@@ -596,11 +587,3 @@ def get_export_paths(app_path, export_name):
 		"builder_files_path": builder_files_path,
 		"pages_path": pages_path,
 	}
-
-
-def remove_existing_path(path):
-	if os.path.exists(path):
-		if os.path.isdir(path):
-			shutil.rmtree(path)
-		else:
-			os.remove(path)

From 8a28d962c3b124352237c31a639fe886299c9c56 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 15:30:09 +0530
Subject: [PATCH 135/547] fix: Use `builderStore.readOnlyMode` for read only
 mode

---
 frontend/src/components/PageOptions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
index aa2b609fb..70328c007 100644
--- a/frontend/src/components/PageOptions.vue
+++ b/frontend/src/components/PageOptions.vue
@@ -29,7 +29,7 @@
 					type="text"
 					:label="variable.replace(/_/g, ' ')"
 					:modelValue="pageStore.routeVariables[variable]"
-					:disabled="readonly"
+					:disabled="builderStore.readOnlyMode"
 					@update:modelValue="(val: string) => pageStore.setRouteVariable(variable, val)" />
 			</CollapsibleSection>
 		</div>

From e6c017245b699f3f655f64e3ba07b5dfd194d756 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 10 Dec 2025 15:46:34 +0530
Subject: [PATCH 136/547] fix: Incorrect conflict resolution

and resolve formatting issues
---
 .../doctype/builder_page/builder_page.py      | 142 ++++++++++--------
 frontend/components.d.ts                      |   4 +-
 2 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index bb534a282..ca322ff14 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -3,8 +3,8 @@
 
 import copy
 import json
-import re
 import os
+import re
 import shutil
 
 import bs4 as bs
@@ -505,14 +505,13 @@ def get_block_html(blocks):
 	font_map = {}
 
 	def get_html(blocks, soup):
-
 		# global map of prop values
-     	# prop_name -> array<values>
+		# prop_name -> array<values>
 		# prop names act as variables and blocks provide scope, i.e., if a child block (inner scope) re-defines a prop with the same name as its parent (outer scope),
 		# for the child block and its children, the value from the child block will be used, and once the child block is processed, the value from the parent block will be restored.
 		# the array of values act as a stack to achieve this scoping behavior.
 		map_of_prop_values = {}
-		
+
 		# same as above but for std. props info (not values), used to idenitfy the type of looping vars (array or object) in repeaters
 		map_of_std_props_info = {}
 		html = ""
@@ -521,20 +520,18 @@ def get_tag(block, soup, data_key=None, default_props=None):
 			block = extend_with_component(block)
 
 			props_obj = {}
-   
+
 			if block.get("props"):
-    
 				for prop_name, prop_info in block.get("props").items():
-        
-					is_standard = prop_info.get('isStandard', False)
+					is_standard = prop_info.get("isStandard", False)
 					interpreted_value = get_interpreted_prop_value(prop_info, data_key, map_of_prop_values)
 
 					map_of_prop_values.setdefault(prop_name, []).append(interpreted_value)
 					if is_standard:
 						map_of_std_props_info.setdefault(prop_name, []).append(prop_info)
 
-					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard }
-			
+					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard}
+
 			# when inside props repeater, child blocks get the loop vars as their default props
 			if default_props:
 				for prop in default_props:
@@ -613,22 +610,21 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				inner_soup = bs.BeautifulSoup(innerContent, "html.parser")
 				set_fonts_from_html(inner_soup, font_map)
 				tag.append(inner_soup)
-    
 
-			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):    
+			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
 				_key = block.get("dataKey").get("key")
 				loop_var = ""
 				next_data_key = None
 				next_default_props = None
-					
+
 				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, _key)
 					next_default_props = loop_vars
 
-					loop_var = ", ".join(loop_vars) # `item` for array and `key, value` for object
+					loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
 					_key = f"std_props['{escape_single_quotes(_key)}']"
 
-					if len(loop_vars) > 1: # object repeater
+					if len(loop_vars) > 1:  # object repeater
 						_key = f"{_key}.items()"
 				else:
 					if data_key:
@@ -636,14 +632,16 @@ def get_tag(block, soup, data_key=None, default_props=None):
 					loop_var = f"key_{_key.replace('.', '__')}"
 					next_data_key = {"key": loop_var, "comesFrom": "dataScript"}
 
-				if  default_props: # carried over from parent repeater
+				if default_props:  # carried over from parent repeater
 					next_default_props = default_props + (next_default_props or [])
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
-    
-				child_tag, child_tag_props, child_tag_std_props = get_tag(block.get("children")[0], soup, next_data_key, next_default_props)
+
+				child_tag, child_tag_props, child_tag_std_props = get_tag(
+					block.get("children")[0], soup, next_data_key, next_default_props
+				)
 				append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
-     
+
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
@@ -654,7 +652,9 @@ def get_tag(block, soup, data_key=None, default_props=None):
 							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
 
-					child_tag, child_tag_props, child_tag_std_props = get_tag(child, soup, data_key=data_key, default_props=default_props)
+					child_tag, child_tag_props, child_tag_std_props = get_tag(
+						child, soup, data_key=data_key, default_props=default_props
+					)
 					append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
 
 					if child.get("visibilityCondition"):
@@ -667,12 +667,12 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				map_of_prop_values[prop_name].pop()
 				if prop_info.get("is_standard"):
 					map_of_std_props_info[prop_name].pop()
-    
+
 			all_props = {k: v["value"] for k, v in props_obj.items()}
 			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
 
 			if block.get("blockScript"):
-				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}" # extra hash as repeating blocks have same blockId
+				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"  # extra hash as repeating blocks have same blockId
 				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(all_props) or '{}'});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
@@ -683,7 +683,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 		for block in blocks:
 			tag, props, std_props = get_tag(block, soup)
-			html += f"{{% with props = {props} %}}{str(tag)}{{% endwith %}}"
+			html += f"{{% with props = {props} %}}{tag!s}{{% endwith %}}"
 			if std_props:
 				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
 
@@ -797,10 +797,10 @@ def extend_block(block, overridden_block):
 	if not block.get("props"):
 		block["props"] = {}
 	block["props"].update(overridden_block.get("props", {}))
-	
+
 	if overridden_block.get("blockScript"):
 		block["blockScript"] = overridden_block.get("blockScript")
- 
+
 	dataKey = overridden_block.get("dataKey", {})
 	if not block.get("dataKey"):
 		block["dataKey"] = {}
@@ -831,41 +831,46 @@ def extend_block(block, overridden_block):
 	block["children"] = extended_children
 	return block
 
+
 def append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props):
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
-  
+
 	tag.append(f"{{% with props = {child_tag_props} %}}")
 	tag.append(child_tag)
 	tag.append("{% endwith %}")
- 
+
 	if child_tag_std_props:
 		tag.append("{% endwith %}")
 
-def to_jinja_literal(obj):
-    # detect Jinja expressions inside strings (e.g. "{{ sample }}")
-    if isinstance(obj, str):
-        stripped = obj.strip()
-        if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
-            # remove the {{ }} so Jinja receives the variable
-            inner = stripped[2:-2].strip()
-            return inner  # returned unquoted
-        return repr(obj)
-
-    if obj is True: return "True"
-    if obj is False: return "False"
-    if obj is None: return "None"
 
-    if isinstance(obj, dict):
-        parts = []
-        for k, v in obj.items():
-            parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
-        return "{ " + ", ".join(parts) + " }"
-
-    if isinstance(obj, (list, tuple)):
-        return "[ " + ", ".join(to_jinja_literal(i) for i in obj) + " ]"
-
-    return repr(obj)
+def to_jinja_literal(obj):
+	# detect Jinja expressions inside strings (e.g. "{{ sample }}")
+	if isinstance(obj, str):
+		stripped = obj.strip()
+		if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
+			# remove the {{ }} so Jinja receives the variable
+			inner = stripped[2:-2].strip()
+			return inner  # returned unquoted
+		return repr(obj)
+
+	if obj is True:
+		return "True"
+	if obj is False:
+		return "False"
+	if obj is None:
+		return "None"
+
+	if isinstance(obj, dict):
+		parts = []
+		for k, v in obj.items():
+			parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
+		return "{ " + ", ".join(parts) + " }"
+
+	if isinstance(obj, list | tuple):
+		return "[ " + ", ".join(str(to_jinja_literal(i)) for i in obj) + " ]"
+
+	return repr(obj)
 
 
 def set_dynamic_content_placeholder(block, data_key=None):
@@ -878,17 +883,19 @@ def set_dynamic_content_placeholder(block, data_key=None):
 			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
 		if dynamic_value_doc and dynamic_value_doc.get("key"):
 			key = ""
-      if dynamic_value_doc.get("comesFrom") == "props":
-        key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
-      else:
-        key = f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
-        if data_key:
-          # convert a.b to (a or {}).get('b', {})
-          # to avoid undefined error in jinja
-          keys = (key or "").split(".")
-          key = f"({keys[0]} or {{}})"
-          for k in keys[1:]:
-            key = f"{key}.get('{k}', {{}})"
+			if dynamic_value_doc.get("comesFrom") == "props":
+				key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
+			else:
+				key = (
+					f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
+				)
+				if data_key:
+					# convert a.b to (a or {}).get('b', {})
+					# to avoid undefined error in jinja
+					keys = (key or "").split(".")
+					key = f"({keys[0]} or {{}})"
+					for k in keys[1:]:
+						key = f"{key}.get('{k}', {{}})"
 
 			_property = dynamic_value_doc.get("property")
 			_type = dynamic_value_doc.get("type")
@@ -941,6 +948,7 @@ def resolve_path(path):
 
 	return original_resolve_path(path)
 
+
 def parse_static_value(value: str, prop_type: str):
 	match prop_type:
 		case "string":
@@ -983,13 +991,15 @@ def get_interpreted_prop_value(prop, data_key, map_of_prop_values):
 	if prop_value is None and not prop_is_standard:
 		return "undefined"
 	if prop_type == "dynamic":
-		return f"{{{{ {extract_data_key(data_key)}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
+		return (
+			f"{{{{ {extract_data_key(data_key)}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
+		)
 	elif prop_type == "static":
 		if prop_is_standard:
 			# standard props are static only as of now
 			prop_value = parse_static_value(
 				prop.get("value") or prop.get("standardOptions", {}).get("options", {}).get("defaultValue"),
-				prop.get("standardOptions", {}).get("type")
+				prop.get("standardOptions", {}).get("type"),
 			)
 		return prop_value
 	elif prop_type == "inherited":
@@ -1002,11 +1012,12 @@ def get_loop_vars(map_of_std_props_info, key):
 		std_prop_info = map_of_std_props_info[key][-1]
 		standard_options = std_prop_info.get("standardOptions", {})
 		if standard_options.get("type") == "array":
-			return ["item"] # TODO: allow custom item name
+			return ["item"]  # TODO: allow custom item name
 		elif standard_options.get("type") == "object":
-			return ["key", "value"] # TODO: allow custom key, value names
+			return ["key", "value"]  # TODO: allow custom key, value names
 	return []
 
+
 def extract_data_key(data_key):
 	if isinstance(data_key, str):
 		return data_key
@@ -1014,6 +1025,7 @@ def extract_data_key(data_key):
 		return data_key.get("key")
 	return None
 
+
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)
 	block["children"] = []
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 3a2af735f..06949679d 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -50,7 +50,6 @@ declare module 'vue' {
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
-    copy: typeof import('./src/components/PropsOptions/ArrayOptions copy.vue')['default']
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
     CSS: typeof import('./src/components/Icons/CSS.vue')['default']
     CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
@@ -68,6 +67,7 @@ declare module 'vue' {
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
+    GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
     GlobalGeneral: typeof import('./src/components/Settings/GlobalGeneral.vue')['default']
     GlobalMeta: typeof import('./src/components/Settings/GlobalMeta.vue')['default']
     GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
@@ -90,6 +90,7 @@ declare module 'vue' {
     NewFolder: typeof import('./src/components/Modals/NewFolder.vue')['default']
     NumberOptions: typeof import('./src/components/PropsOptions/NumberOptions.vue')['default']
     ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
+    ObjectInput: typeof import('./src/components/ObjectInput.vue')['default']
     ObjectOptions: typeof import('./src/components/PropsOptions/ObjectOptions.vue')['default']
     OptionToggle: typeof import('./src/components/Controls/OptionToggle.vue')['default']
     PaddingHandler: typeof import('./src/components/PaddingHandler.vue')['default']
@@ -110,7 +111,6 @@ declare module 'vue' {
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     Plus: typeof import('./src/components/Icons/Plus.vue')['default']
     PropertyControl: typeof import('./src/components/Controls/PropertyControl.vue')['default']
-    PropsDependencyEditor: typeof import('./src/components/PropsDependencyEditor.vue')['default']
     PropsEditor: typeof import('./src/components/PropsEditor.vue')['default']
     PropsPopoverContent: typeof import('./src/components/PropsPopoverContent.vue')['default']
     PublishButton: typeof import('./src/components/PublishButton.vue')['default']

From befc386ace7a137e78487e52e79e50bef0c0608d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 11 Dec 2025 10:53:04 +0530
Subject: [PATCH 137/547] fix: Let user arrow keys to change unit values -
 without incorrectly selecting autocomplete options

closes: https://github.com/frappe/builder/issues/444
---
 frontend/src/components/Controls/Autocomplete.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 001d1f15b..d51dde67f 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -179,10 +179,21 @@ const submitArbitraryValue = (inputValue: string) => {
 };
 
 const handleEnter = (event: KeyboardEvent) => {
-	if (!props.allowArbitraryValue || containerRef.value?.querySelector("[data-highlighted]")) return;
+	if (!props.allowArbitraryValue) return;
+	const highlightedItem = containerRef.value?.querySelector("[data-highlighted]");
+	const inputValue = getInputValue(event);
+	// If there's a highlighted item and user hasn't typed anything different, let the combobox handle it
+	if (highlightedItem && !inputValue) return;
+	// If user typed something, check if it matches the highlighted item's value
+	if (highlightedItem && inputValue) {
+		const highlightedValue = highlightedItem.getAttribute("data-value");
+		const matchingOption = allOptions.value.find((opt) => opt.value === highlightedValue);
+		// If input matches highlighted item's label, let combobox handle it
+		if (matchingOption && matchingOption.label.toLowerCase() === inputValue.toLowerCase()) return;
+	}
 	event.preventDefault();
 	event.stopPropagation();
-	submitArbitraryValue(getInputValue(event));
+	submitArbitraryValue(inputValue);
 };
 
 const handleBlur = (event: FocusEvent) => {

From eb58c022487d1ef5dfa41d56bbe6357bc298c2f8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 11 Dec 2025 10:54:05 +0530
Subject: [PATCH 138/547] fix: Keep spacing section expanded by default

---
 .../components/BlockPropertySections/SpacingSection.ts    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/SpacingSection.ts b/frontend/src/components/BlockPropertySections/SpacingSection.ts
index 7f30f4ac5..789160417 100644
--- a/frontend/src/components/BlockPropertySections/SpacingSection.ts
+++ b/frontend/src/components/BlockPropertySections/SpacingSection.ts
@@ -1,5 +1,4 @@
 import blockController from "@/utils/blockController";
-import { computed } from "vue";
 import PropertyControl from "../Controls/PropertyControl.vue";
 
 const spacingSectionProperties = [
@@ -42,11 +41,4 @@ const spacingSectionProperties = [
 export default {
 	name: "Spacing",
 	properties: spacingSectionProperties,
-	collapsed: computed(
-		() =>
-			!blockController.getStyle("marginTop") &&
-			!blockController.getStyle("paddingTop") &&
-			!blockController.getStyle("marginBottom") &&
-			!blockController.getStyle("paddingBottom"),
-	),
 };

From 0753505ca8b80b958f3a07253db2ea611e3c2dd0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 11 Dec 2025 11:26:40 +0530
Subject: [PATCH 139/547] fix: On cmd+0, maintain the position of the canvas
 while resetting the zoom

---
 frontend/src/components/BuilderCanvas.vue |  5 ++-
 frontend/src/utils/panAndZoom.ts          | 43 +++++++++++++++++++++++
 frontend/src/utils/useBuilderEvents.ts    |  2 +-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 6df7fc8fa..c11ae3c49 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -149,6 +149,7 @@ const history = ref(null) as Ref<null> | CanvasHistory;
 const activeBreakpoint = ref("desktop") as Ref<string | null>;
 const hoveredBreakpoint = ref("desktop") as Ref<string | null>;
 const hoveredBlock = ref(null) as Ref<string | null>;
+const setCanvasZoom = ref<(scale: number, pinchPoint: { x: number; y: number } | "center") => void>();
 
 const {
 	clearSelection,
@@ -234,7 +235,8 @@ onMounted(() => {
 		getRootBlock,
 		findBlock,
 	);
-	setPanAndZoom(canvasEl, canvasContainerEl, canvasProps);
+	const { setZoom } = setPanAndZoom(canvasEl, canvasContainerEl, canvasProps);
+	setCanvasZoom.value = setZoom;
 	useBlockEventHandlers(canvasContainerEl);
 });
 
@@ -348,6 +350,7 @@ defineExpose({
 	setActiveBreakpoint,
 	setHoveredBreakpoint,
 	setHoveredBlock,
+	setCanvasZoom,
 });
 
 function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
diff --git a/frontend/src/utils/panAndZoom.ts b/frontend/src/utils/panAndZoom.ts
index b12897a26..1edf731d3 100644
--- a/frontend/src/utils/panAndZoom.ts
+++ b/frontend/src/utils/panAndZoom.ts
@@ -15,6 +15,47 @@ function setPanAndZoom(
 	let pinchPointSet = false;
 	let wheeling: undefined | NodeJS.Timeout;
 
+	const setZoom = (scale: number, pinchPoint: { x: number; y: number } | "center" = "center") => {
+		const clampedScale = Math.min(Math.max(scale, zoomLimits.min), zoomLimits.max);
+		const oldScale = props.scale;
+
+		let pinchX: number;
+		let pinchY: number;
+
+		if (pinchPoint === "center") {
+			const areaBound = panAndZoomAreaElement.getBoundingClientRect();
+			pinchX = areaBound.left + areaBound.width / 2;
+			pinchY = areaBound.top + areaBound.height / 2;
+		} else {
+			pinchX = pinchPoint.x;
+			pinchY = pinchPoint.y;
+		}
+
+		const middleX = targetBound.left + targetBound.width / 2;
+		const middleY = targetBound.top + targetBound.height / 2;
+		const pointFromCenterX = (pinchX - middleX) / oldScale;
+		const pointFromCenterY = (pinchY - middleY) / oldScale;
+
+		props.scale = clampedScale;
+
+		nextTick(() => {
+			// Recalculate the middle after scale change
+			const newMiddleX = targetBound.left + targetBound.width / 2;
+			const newMiddleY = targetBound.top + targetBound.height / 2;
+
+			// Calculate where the pinch point ended up after scaling
+			const pinchLocationX = newMiddleX + pointFromCenterX * clampedScale;
+			const pinchLocationY = newMiddleY + pointFromCenterY * clampedScale;
+
+			// Adjust translation to keep the pinch point in place
+			const diffX = pinchX - pinchLocationX;
+			const diffY = pinchY - pinchLocationY;
+
+			props.translateX += diffX / clampedScale;
+			props.translateY += diffY / clampedScale;
+		});
+	};
+
 	const updatePanAndZoom = (e: WheelEvent) => {
 		clearTimeout(wheeling);
 		if (e.ctrlKey || e.metaKey) {
@@ -85,6 +126,8 @@ function setPanAndZoom(
 		},
 		{ passive: false },
 	);
+
+	return { setZoom };
 }
 
 export default setPanAndZoom;
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 4090af965..c531f8f39 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -320,7 +320,7 @@ export function useBuilderEvents(
 				if (e.shiftKey) {
 					pageCanvas.value.setScaleAndTranslate();
 				} else {
-					pageCanvas.value.resetZoom();
+					pageCanvas.value.setCanvasZoom?.(1, "center");
 				}
 			}
 			return;

From fb4672fcff5bf64d96abecd28a62c54a8159d591 Mon Sep 17 00:00:00 2001
From: Ankush Menat <ankush@frappe.io>
Date: Thu, 11 Dec 2025 15:11:42 +0530
Subject: [PATCH 140/547] fix: Update Redis host format in init script

---
 docker/init.sh | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker/init.sh b/docker/init.sh
index b0b8d3b82..f012ff7e9 100755
--- a/docker/init.sh
+++ b/docker/init.sh
@@ -13,9 +13,9 @@ else
     
     # Use containers instead of localhost
     bench set-mariadb-host mariadb
-    bench set-redis-cache-host redis:6379
-    bench set-redis-queue-host redis:6379
-    bench set-redis-socketio-host redis:6379
+    bench set-redis-cache-host "redis://redis:6379"
+    bench set-redis-queue-host "redis://redis:6379"
+    bench set-redis-socketio-host "redis://redis:6379"
     
     # Remove redis, watch from Procfile
     sed -i '/redis/d' ./Procfile

From b95992800f8620ae97570b2ddc3bd9bcd03aaf78 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 11 Dec 2025 16:29:12 +0530
Subject: [PATCH 141/547] fix: Only show Load More button after data is
 properly loaded

Closes: https://github.com/frappe/builder/issues/281
---
 frontend/src/pages/PageBuilderDashboard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index 9c71a7f08..1f56a9501 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -142,7 +142,7 @@
 					<BuilderButton
 						class="m-auto mt-12 w-fit text-sm"
 						@click="loadMore"
-						v-show="webPages.hasNextPage"
+						v-show="webPages.data.length && webPages.hasNextPage"
 						variant="subtle"
 						size="sm">
 						Load More

From e6202e23878508d0efc2fa35b6f68576b82f79c6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 11:07:40 +0530
Subject: [PATCH 142/547] chore: Set proper develop version

---
 builder/__init__.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/__init__.py b/builder/__init__.py
index 6cea18d86..6c7936ab3 100644
--- a/builder/__init__.py
+++ b/builder/__init__.py
@@ -1 +1 @@
-__version__ = "1.18.0"
+__version__ = "1.0.0-dev"

From f8fac229b8a48cfc6496b1c0c64a33c937946098 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 11:40:50 +0530
Subject: [PATCH 143/547] fix(sidebar): Set min-height

Set min-height to accomodate all content in sidebar and avoid overflow on small screen
---
 frontend/src/components/DashboardSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index bd2ff9035..853cf1be2 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<section
-		class="sticky bottom-0 left-0 top-0 flex flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden"
+		class="sticky bottom-0 left-0 top-0 flex min-h-fit flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden"
 		:class="[builderStore.showDashboardSidebar ? 'w-60' : 'w-auto']">
 		<div class="flex flex-col">
 			<div class="mb-2 flex gap-2">

From fcdae75c99ea0d1e2c8c396b1ef9020a91e29050 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 11:43:22 +0530
Subject: [PATCH 144/547] feat: Show version of builder in sidebar

And remove collapse sidebar feature as it is a bit unnecessary

closes: https://github.com/frappe/builder/issues/49
---
 builder/www/_builder.py                      |  2 +
 frontend/index.html                          |  1 +
 frontend/src/components/DashboardSidebar.vue | 41 ++++++--------------
 frontend/src/main.ts                         |  5 +++
 frontend/src/stores/builderStore.ts          |  1 -
 5 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/builder/www/_builder.py b/builder/www/_builder.py
index f91d68cf2..e13a9e2de 100644
--- a/builder/www/_builder.py
+++ b/builder/www/_builder.py
@@ -1,5 +1,6 @@
 import frappe
 from frappe.integrations.frappe_providers.frappecloud_billing import is_fc_site
+from frappe.pulse.utils import get_app_version
 from frappe.utils.telemetry import capture
 
 from builder.hooks import builder_path
@@ -13,6 +14,7 @@ def get_context(context):
 	context.csrf_token = csrf_token
 	context.site_name = frappe.local.site
 	context.builder_path = builder_path
+	context.builder_version = get_app_version("builder")
 	# developer mode
 	context.is_developer_mode = frappe.conf.developer_mode
 	context.is_fc_site = is_fc_site()
diff --git a/frontend/index.html b/frontend/index.html
index 167f4d76f..8acf459dd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,6 +17,7 @@
 			window.csrf_token = "{{ csrf_token }}";
 			window.builder_path = "{{ builder_path }}";
 			window.site_name = "{{ site_name }}";
+			window.builder_version = "{{ builder_version }}";
 			window.is_fc_site = "{{ is_fc_site }}";
 			window.is_developer_mode = "{{ is_developer_mode }}";
 		</script>
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 853cf1be2..6d7d6f1ff 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -1,7 +1,6 @@
 <template>
 	<section
-		class="sticky bottom-0 left-0 top-0 flex min-h-fit flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden"
-		:class="[builderStore.showDashboardSidebar ? 'w-60' : 'w-auto']">
+		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden">
 		<div class="flex flex-col">
 			<div class="mb-2 flex gap-2">
 				<Dialog
@@ -78,26 +77,18 @@
 							<div
 								class="flex items-center justify-between rounded py-1"
 								:class="{
-									'!bg-surface-white shadow-sm dark:!bg-surface-gray-2':
-										open && builderStore.showDashboardSidebar,
-									'!p-2 hover:bg-surface-gray-2': builderStore.showDashboardSidebar,
+									'!bg-surface-white shadow-sm dark:!bg-surface-gray-2': open,
+									'!p-2 hover:bg-surface-gray-2': true,
 								}">
-								<div
-									class="flex w-full cursor-pointer items-center gap-2"
-									:class="{
-										'justify-center': !builderStore.showDashboardSidebar,
-									}">
+								<div class="flex w-full cursor-pointer items-center gap-2">
 									<img src="/builder_logo.png" alt="logo" class="h-7" />
-									<h1
-										class="text-md mt-[2px] font-semibold leading-5 text-gray-800 dark:text-gray-200"
-										v-show="builderStore.showDashboardSidebar">
+									<h1 class="text-md mt-[2px] font-semibold leading-5 text-gray-800 dark:text-gray-200">
 										Builder
 									</h1>
 								</div>
 								<FeatherIcon
 									:name="open ? 'chevron-up' : 'chevron-down'"
-									class="h-4 w-4 !text-gray-700 dark:!text-gray-200"
-									v-show="builderStore.showDashboardSidebar"></FeatherIcon>
+									class="h-4 w-4 !text-gray-700 dark:!text-gray-200"></FeatherIcon>
 							</div>
 						</template>
 					</Dropdown>
@@ -110,19 +101,17 @@
 					'bg-surface-modal text-ink-gray-8 shadow-sm dark:bg-surface-gray-2': !builderStore.activeFolder,
 				}">
 				<FilesIcon class="size-4"></FilesIcon>
-				<span v-show="builderStore.showDashboardSidebar">All Pages</span>
+				<span>All Pages</span>
 			</span>
 			<span
 				class="flex cursor-pointer gap-2 p-2 text-base text-ink-gray-6"
 				@click="showSettingsDialog = true">
 				<SettingsIcon class="size-4"></SettingsIcon>
-				<span v-show="builderStore.showDashboardSidebar">Settings</span>
+				<span>Settings</span>
 			</span>
 		</div>
 		<div class="flex flex-1 flex-col">
-			<div
-				class="flex items-center justify-between p-2 text-base text-ink-gray-6"
-				v-show="builderStore.showDashboardSidebar">
+			<div class="flex items-center justify-between p-2 text-base text-ink-gray-6">
 				<span>Folders</span>
 				<BuilderButton
 					variant="subtle"
@@ -130,12 +119,11 @@
 					class="size-4 cursor-pointer hover:text-ink-gray-8"
 					@click="showNewFolderDialog = true"></BuilderButton>
 			</div>
-			<div class="flex p-2" v-show="builderStore.showDashboardSidebar && !builderProjectFolder.data?.length">
+			<div class="flex p-2" v-show="!builderProjectFolder.data?.length">
 				<p class="text-sm text-ink-gray-5">No folders yet</p>
 			</div>
 			<span
 				class="flex h-8 w-full cursor-pointer items-center justify-between gap-2 rounded p-2 py-1 text-base text-ink-gray-6"
-				v-show="builderStore.showDashboardSidebar"
 				v-for="project in builderProjectFolder.data"
 				:class="{
 					'bg-surface-modal text-ink-gray-8 shadow-sm dark:bg-surface-gray-2': isFolderActive(
@@ -187,14 +175,7 @@
 				</Dropdown>
 			</span>
 		</div>
-		<div
-			class="flex cursor-pointer items-center gap-2 rounded p-2 text-base text-ink-gray-6 hover:bg-surface-gray-2"
-			@click="() => (builderStore.showDashboardSidebar = !builderStore.showDashboardSidebar)">
-			<FeatherIcon
-				:name="builderStore.showDashboardSidebar ? 'chevrons-left' : 'chevrons-right'"
-				class="h-4 w-4" />
-			<span v-show="builderStore.showDashboardSidebar">Collapse</span>
-		</div>
+		<p class="mt-2 p-2 text-center text-sm text-ink-gray-4">Version: {{ window.builder_version }}</p>
 		<NewFolder v-model="showNewFolderDialog"></NewFolder>
 		<TrialBanner v-if="builderStore.isFCSite"></TrialBanner>
 	</section>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 93b0bc690..9b6390d0d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -33,6 +33,7 @@ app.mount("#app");
 declare global {
 	interface Window {
 		is_developer_mode?: boolean;
+		builder_version: string;
 	}
 }
 
@@ -42,3 +43,7 @@ if (window.is_developer_mode && typeof window.is_developer_mode === "string") {
 		window.is_developer_mode === "True" ||
 		(window.is_developer_mode as string).startsWith("{{");
 }
+
+if (window.builder_version && window.builder_version.startsWith("{{")) {
+	window.builder_version = "develop";
+}
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index c7211690b..0044ff62a 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -32,7 +32,6 @@ const useBuilderStore = defineStore("builderStore", {
 		},
 		leftPanelActiveTab: <LeftSidebarTabOption>"Layers",
 		rightPanelActiveTab: <RightSidebarTabOption>"Properties",
-		showDashboardSidebar: useStorage("showDashboardSidebar", true),
 		showRightPanel: <boolean>true,
 		showLeftPanel: <boolean>true,
 		showHTMLDialog: false,

From cded900efd9c4d1004434c934ecd25a0cab88129 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 12:01:38 +0530
Subject: [PATCH 145/547] refactor: Maintain copy of posthog library in the
 repo

closes: http://github.com/frappe/builder/issues/305
---
 .pre-commit-config.yaml      | 1 +
 builder/public/js/posthog.js | 1 +
 frontend/src/telemetry.ts    | 2 +-
 frontend/tsconfig.json       | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 builder/public/js/posthog.js

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0cc1cc5ac..e6f590e2c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -36,6 +36,7 @@ repos:
                 .*boilerplate.*|
                 .*src.*.js|
                 builder/public/js/identify.js|
+                builder/public/js/posthog.js|
             )$
 
 ci:
diff --git a/builder/public/js/posthog.js b/builder/public/js/posthog.js
new file mode 100644
index 000000000..e470417e3
--- /dev/null
+++ b/builder/public/js/posthog.js
@@ -0,0 +1 @@
+!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
\ No newline at end of file
diff --git a/frontend/src/telemetry.ts b/frontend/src/telemetry.ts
index 0f726bac7..486126048 100644
--- a/frontend/src/telemetry.ts
+++ b/frontend/src/telemetry.ts
@@ -1,5 +1,5 @@
 import { createResource } from "frappe-ui";
-import "../../../frappe/frappe/public/js/lib/posthog.js";
+import "../public/js/posthog.js";
 
 declare global {
 	interface Window {
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index de569d8b4..b46236aa6 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -39,6 +39,6 @@
   ],
   "exclude": [
     "node_modules",
-    "../frappe/frappe/public/js/lib/posthog.js"
+    "../public/js/posthog.js"
   ]
 }

From 9c0da4d8ec9d486dc8e7fa3a903eab8b87734c8a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 12:07:48 +0530
Subject: [PATCH 146/547] fix: Import path of posthog library

---
 frontend/src/telemetry.ts | 2 +-
 frontend/tsconfig.json    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/telemetry.ts b/frontend/src/telemetry.ts
index 486126048..e82181edc 100644
--- a/frontend/src/telemetry.ts
+++ b/frontend/src/telemetry.ts
@@ -1,5 +1,5 @@
 import { createResource } from "frappe-ui";
-import "../public/js/posthog.js";
+import "../../builder/public/js/posthog.js";
 
 declare global {
 	interface Window {
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index b46236aa6..6b846f841 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -39,6 +39,5 @@
   ],
   "exclude": [
     "node_modules",
-    "../public/js/posthog.js"
   ]
 }

From 8c6d00baacd371d5bc8fbf7a3ce8912518476311 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 12 Dec 2025 15:47:14 +0530
Subject: [PATCH 147/547] fix: Properly show inherited style while working with
 component instance

Style from component were not showing up as placeholder to make it look like styles were getting inherited from component
---
 frontend/src/block.ts | 89 ++++++++++++++++++++++++++++---------------
 1 file changed, 58 insertions(+), 31 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index fcada5827..9c898fd91 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -346,43 +346,70 @@ class Block implements BlockOptions {
 		cascading: boolean = false,
 	): StyleValue | undefined {
 		const canvasStore = useCanvasStore();
-		breakpoint = breakpoint || canvasStore.activeCanvas?.activeBreakpoint;
-		let styleValue: StyleValue = undefined;
+		const currentBreakpoint = breakpoint || canvasStore.activeCanvas?.activeBreakpoint || "desktop";
+
 		if (nativeOnly) {
-			if (breakpoint === "mobile") {
-				styleValue = this.mobileStyles[style];
-			} else if (breakpoint === "tablet") {
-				styleValue = this.tabletStyles[style];
-			} else {
-				styleValue = this.baseStyles[style];
-			}
-			return styleValue;
+			const styleMap = this.getStyleMapForBreakpoint(currentBreakpoint);
+			return styleMap[style];
 		}
+
 		if (cascading) {
-			if (breakpoint === "mobile") {
-				return this.getStyle(style, "tablet") ?? this.getStyle(style, "desktop");
-			}
-			if (breakpoint === "tablet") {
-				return this.getStyle(style, "desktop");
-			}
-			return this.getStyle(style, "desktop");
+			return this.getStyleWithCascading(style, currentBreakpoint);
 		}
-		if (breakpoint === "mobile") {
-			styleValue = this.mobileStyles[style] || this.tabletStyles[style] || this.baseStyles[style];
-		} else if (breakpoint === "tablet") {
-			styleValue = this.tabletStyles[style] || this.baseStyles[style];
-		} else {
-			styleValue = this.baseStyles[style];
+
+		const styleValue = this.getInheritedStyleValue(style, currentBreakpoint);
+
+		return styleValue ?? this.getComponentStyleFallback(style, currentBreakpoint, nativeOnly, cascading);
+	}
+
+	private getStyleMapForBreakpoint(breakpoint: string) {
+		const styleMap = {
+			mobile: this.mobileStyles,
+			tablet: this.tabletStyles,
+			desktop: this.baseStyles,
+		};
+		return styleMap[breakpoint as keyof typeof styleMap] || this.baseStyles;
+	}
+
+	private getStyleWithCascading(style: styleProperty, breakpoint: string): StyleValue | undefined {
+		if (this.isExtendedFromComponent()) {
+			const componentValue = this.referenceComponent?.getStyle(style, breakpoint, true, false);
+			if (componentValue) return componentValue;
 		}
-		if (styleValue === undefined && this.isExtendedFromComponent()) {
-			styleValue = this.referenceComponent?.getStyle?.(
-				style,
-				breakpoint,
-				nativeOnly,
-				cascading,
-			) as StyleValue;
+
+		const fallbackBreakpoints = {
+			mobile: ["tablet", "desktop"],
+			tablet: ["desktop"],
+		};
+
+		const fallbacks = fallbackBreakpoints[breakpoint as keyof typeof fallbackBreakpoints] || [];
+		for (const fallbackBreakpoint of fallbacks) {
+			const value = this.getStyle(style, fallbackBreakpoint);
+			if (value) return value;
 		}
-		return styleValue;
+
+		return this.getStyle(style, "desktop");
+	}
+
+	private getInheritedStyleValue(style: styleProperty, breakpoint: string): StyleValue | undefined {
+		switch (breakpoint) {
+			case "mobile":
+				return this.mobileStyles[style] || this.tabletStyles[style] || this.baseStyles[style];
+			case "tablet":
+				return this.tabletStyles[style] || this.baseStyles[style];
+			default:
+				return this.baseStyles[style];
+		}
+	}
+
+	private getComponentStyleFallback(
+		style: styleProperty,
+		breakpoint: string,
+		nativeOnly: boolean,
+		cascading: boolean,
+	): StyleValue | undefined {
+		if (!this.isExtendedFromComponent()) return undefined;
+		return this.referenceComponent?.getStyle?.(style, breakpoint, nativeOnly, cascading);
 	}
 	getNativeStyle(style: styleProperty) {
 		return this.getStyle(style, undefined, true);

From 91bf50204ee19ea6ec27e250fe78afa30a1a1ad6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 13 Dec 2025 23:51:55 +0530
Subject: [PATCH 148/547] fix: All Link option for SVGs

---
 frontend/src/components/BlockPropertySections/LinkSection.ts | 2 +-
 frontend/src/utils/blockController.ts                        | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockPropertySections/LinkSection.ts b/frontend/src/components/BlockPropertySections/LinkSection.ts
index 21dc3a12c..f3ac208dd 100644
--- a/frontend/src/components/BlockPropertySections/LinkSection.ts
+++ b/frontend/src/components/BlockPropertySections/LinkSection.ts
@@ -80,5 +80,5 @@ export default {
 	condition: () =>
 		!blockController.multipleBlocksSelected() &&
 		!blockController.getSelectedBlocks()[0].parentBlock?.isLink() &&
-		!blockController.isHTML(),
+		!(blockController.isHTML() && !blockController.isSVG()),
 };
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 0ee121ad9..131e531ab 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -211,6 +211,9 @@ const blockController = {
 	isHTML: () => {
 		return blockController.isBlockSelected() && blockController.getFirstSelectedBlock().isHTML();
 	},
+	isSVG() {
+		return blockController.isBlockSelected() && blockController.getFirstSelectedBlock().isSVG();
+	},
 	getInnerHTML: () => {
 		return blockController.isBlockSelected() && blockController.getFirstSelectedBlock().getInnerHTML();
 	},

From fae539c05bd9ba3785fa5a7ae4c1dea744302b7b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 15 Dec 2025 10:20:48 +0530
Subject: [PATCH 149/547] refactor: renamed blockScript to blockClientScript

---
 .../doctype/builder_page/builder_page.py      |  8 +++----
 frontend/src/block.ts                         | 22 +++++++++----------
 .../BlockScriptSection.ts                     | 10 ++++-----
 frontend/src/components/BuilderBlock.vue      |  8 +++----
 frontend/src/pages/PageBuilder.vue            |  4 ++--
 frontend/src/stores/canvasStore.ts            |  2 +-
 frontend/src/utils/blockController.ts         |  8 +++----
 frontend/src/utils/helpers.ts                 |  4 ++--
 8 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ca322ff14..a94b9ffef 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -671,9 +671,9 @@ def get_tag(block, soup, data_key=None, default_props=None):
 			all_props = {k: v["value"] for k, v in props_obj.items()}
 			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
 
-			if block.get("blockScript"):
+			if block.get("blockClientScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"  # extra hash as repeating blocks have same blockId
-				script_content = f"(function (props){{ {block.get('blockScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(all_props) or '{}'});"
+				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(all_props) or '{}'});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
@@ -798,8 +798,8 @@ def extend_block(block, overridden_block):
 		block["props"] = {}
 	block["props"].update(overridden_block.get("props", {}))
 
-	if overridden_block.get("blockScript"):
-		block["blockScript"] = overridden_block.get("blockScript")
+	if overridden_block.get("blockClientScript"):
+		block["blockClientScript"] = overridden_block.get("blockClientScript")
 
 	dataKey = overridden_block.get("dataKey", {})
 	if not block.get("dataKey"):
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index ff4490960..7b6391529 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -42,7 +42,7 @@ class Block implements BlockOptions {
 	parentBlock: Block | null;
 	activeState?: string | null = null;
 	dynamicValues: Array<BlockDataKey>;
-	blockScript?: string;
+	blockClientScript?: string;
 	props?: BlockProps;
 	// @ts-expect-error
 	referenceComponent: Block | null;
@@ -99,7 +99,7 @@ class Block implements BlockOptions {
 		this.tabletStyles = reactive(options.tabletStyles || {});
 		this.attributes = reactive(options.attributes || {});
 		this.dynamicValues = reactive(options.dynamicValues || []);
-		this.blockScript = reactive(options.blockScript || "");
+		this.blockClientScript = reactive(options.blockClientScript || "");
 		this.props = reactive(options.props || {});
 
 		this.blockName = options.blockName;
@@ -896,17 +896,17 @@ class Block implements BlockOptions {
 	isInsideRepeater(): boolean {
 		return Boolean(this.getRepeaterParent());
 	}
-	getBlockScript(): string {
-		let blockScript = "";
-		if (this.isExtendedFromComponent() && !this.blockScript) {
-			blockScript = this.referenceComponent?.getBlockScript() || "";
+	getBlockClientScript(): string {
+		let blockClientScript = "";
+		if (this.isExtendedFromComponent() && !this.blockClientScript) {
+			blockClientScript = this.referenceComponent?.getBlockClientScript() || "";
 		} else {
-			blockScript = this.blockScript || "";
+			blockClientScript = this.blockClientScript || "";
 		}
-		return blockScript;
+		return blockClientScript;
 	}
-	setBlockScript(script: string) {
-		this.blockScript = script;
+	setBlockClientScript(script: string) {
+		this.blockClientScript = script;
 	}
 	getBlockProps(): BlockProps {
 		let blockProps = {};
@@ -1025,7 +1025,7 @@ function resetBlock(
 		block.classes = [];
 		block.dataKey = null;
 		block.props = {};
-		block.blockScript = "";
+		block.blockClientScript = "";
 	}
 
 	if (resetChildren) {
diff --git a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
index 616d2e178..3ad734c11 100644
--- a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
+++ b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
@@ -8,8 +8,8 @@ const blockScriptProperties = [
 		component: CodeEditor,
 		getProps: () => {
 			return {
-				modelValue: blockController.getBlockScript(),
-				getModelValue: () => blockController.getBlockScript() || "",
+				modelValue: blockController.getBlockClientScript(),
+				getModelValue: () => blockController.getBlockClientScript() || "",
 				type: "JavaScript",
 				readonly: false,
 				height: "200px",
@@ -19,15 +19,15 @@ const blockScriptProperties = [
 					label: "Expand",
 					icon: "maximize-2",
 					handler: () => {
-						useCanvasStore().editBlockScript(blockController.getSelectedBlocks()[0]);
+						useCanvasStore().editBlockClientScript(blockController.getSelectedBlocks()[0]);
 					},
 				},
 			};
 		},
 		searchKeyWords: "Block Script, Script, JS, JavaScript, Custom Script",
 		events: {
-			save: (script: string) => blockController.setBlockScript(script),
-			"update:modelValue": (script: string) => blockController.setBlockScript(script),
+			save: (script: string) => blockController.setBlockClientScript(script),
+			"update:modelValue": (script: string) => blockController.setBlockClientScript(script),
 		},
 	},
 ];
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index db796be36..13b463927 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -40,7 +40,7 @@
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
-import { getDataForKey, getPropValue, saferExecuteBlockScript } from "@/utils/helpers";
+import { getDataForKey, getPropValue, saferExecuteBlockClientScript } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
@@ -305,12 +305,12 @@ watch(
 	[
 		component,
 		allResolvedProps,
-		() => props.block.getBlockScript(),
+		() => props.block.getBlockClientScript(),
 		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
 	],
 	() => {
 		if (builderSettings.doc?.execute_block_scripts_in_editor) {
-			saferExecuteBlockScript(uid, props.block.getBlockScript(), allResolvedProps.value);
+			saferExecuteBlockClientScript(uid, props.block.getBlockClientScript(), allResolvedProps.value);
 		}
 	},
 	{ deep: true },
@@ -318,7 +318,7 @@ watch(
 
 onMounted(() => {
 	if (builderSettings.doc?.execute_block_scripts_in_editor) {
-		saferExecuteBlockScript(uid, props.block.getBlockScript(), allResolvedProps.value);
+		saferExecuteBlockClientScript(uid, props.block.getBlockClientScript(), allResolvedProps.value);
 	}
 });
 
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index f06d9288f..812726c42 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -217,7 +217,7 @@ function getExpandedEditorContent() {
 	if (canvasStore.editingContentType === "html") {
 		return canvasStore.editableBlock?.getInnerHTML();
 	} else if (canvasStore.editingContentType === "js") {
-		return canvasStore.editableBlock?.getBlockScript();
+		return canvasStore.editableBlock?.getBlockClientScript();
 	}
 }
 
@@ -225,7 +225,7 @@ async function saveExpandedEditorContent(val: string) {
 	if (canvasStore.editingContentType === "html") {
 		canvasStore.editableBlock?.setInnerHTML(val);
 	} else if (canvasStore.editingContentType === "js") {
-		canvasStore.editableBlock?.setBlockScript(val);
+		canvasStore.editableBlock?.setBlockClientScript(val);
 	}
 	canvasStore.showExpandedEditorDialog = false;
 }
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 2e4da5791..4302d2bd0 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -105,7 +105,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			});
 		},
 
-		editBlockScript(block: Block) {
+		editBlockClientScript(block: Block) {
 			this.editableBlock = block;
 			this.editingContentType = "js";
 			nextTick(() => {
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 417f67d19..3202f3316 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -318,11 +318,11 @@ const blockController = {
 		}
 		return block;
 	},
-	getBlockScript: () => {
-		return blockController.getFirstSelectedBlock()?.getBlockScript();
+	getBlockClientScript: () => {
+		return blockController.getFirstSelectedBlock()?.getBlockClientScript();
 	},
-	setBlockScript: (script: string) => {
-		blockController.getFirstSelectedBlock()?.setBlockScript(script);
+	setBlockClientScript: (script: string) => {
+		blockController.getFirstSelectedBlock()?.setBlockClientScript(script);
 	},
 	getBlockProps: () => {
 		return blockController.getFirstSelectedBlock()?.getBlockProps();
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index c4c548eda..76da37f42 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1146,7 +1146,7 @@ const getStandardPropValue = (
  * @param props - An optional object containing properties to be made available in the script's context.
  */
 
-function saferExecuteBlockScript(
+function saferExecuteBlockClientScript(
 	blockUid: string,
 	userScript: string,
 	props: Record<string, any> = {},
@@ -1319,5 +1319,5 @@ export {
 	uploadUserFont,
 	getPropValue,
 	getStandardPropValue,
-	saferExecuteBlockScript,
+	saferExecuteBlockClientScript,
 };

From 69e6465b062bd5c24649c1d19e4fcd40e192dfa3 Mon Sep 17 00:00:00 2001
From: Swastik Patel <swastikpatel29@gmail.com>
Date: Mon, 15 Dec 2025 23:08:21 +0530
Subject: [PATCH 150/547] feat: add radio button as an input type

---
 .../AccessibilitySection.ts                   | 66 ++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/AccessibilitySection.ts b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
index 0eef40f65..1baef9bb0 100644
--- a/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
+++ b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
@@ -1,4 +1,5 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 
@@ -48,12 +49,12 @@ const accessibilitySectionProperties = [
 			return {
 				label: "Input Type",
 				type: "select",
-				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color"],
+				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color", "radio"],
 				modelValue: blockController.getAttribute("type") || "text",
 			};
 		},
 		searchKeyWords:
-			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, tag",
+			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, Radio, tag",
 		events: {
 			"update:modelValue": (val: string) => blockController.setAttribute("type", val),
 		},
@@ -74,6 +75,67 @@ const accessibilitySectionProperties = [
 		},
 		condition: () => blockController.isInput(),
 	},
+	// Radio button specific properties
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Radio Group Name",
+				modelValue: blockController.getAttribute("name") || "",
+				description:
+					"The group name for this radio button. Radio buttons with the same name are grouped together, allowing only one to be selected at a time.",
+			};
+		},
+		searchKeyWords: "Radio, Name, Group, RadioName, Radio Name, Group Name, input, radio button",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("name", val),
+		},
+		condition: () =>
+			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
+	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Radio Value",
+				modelValue: blockController.getAttribute("value") || "",
+				description:
+					"The value assigned to this radio button. When selected, this value will be submitted with the form.",
+			};
+		},
+		searchKeyWords: "Radio, Value, RadioValue, Radio Value, input, radio button",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("value", val),
+		},
+		condition: () =>
+			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
+	},
+	{
+		component: OptionToggle,
+		getProps: () => {
+			return {
+				label: "Initially Checked",
+				options: [
+					{ label: "Yes", value: true },
+					{ label: "No", value: false },
+				],
+				modelValue:
+					blockController.getAttribute("checked") === "" || blockController.getAttribute("checked") === "checked",
+			};
+		},
+		searchKeyWords: "Checked, Radio, DefaultValue, Default Value, Selected, Initially Checked",
+		events: {
+			"update:modelValue": (val: boolean) => {
+				if (val) {
+					blockController.setAttribute("checked", "checked");
+				} else {
+					blockController.removeAttribute("checked");
+				}
+			},
+		},
+		condition: () =>
+			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
+	},
 	{
 		component: InlineInput,
 		getProps: () => ({

From be98fd3ac32eeab7e186b3af83a207956f28233e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 16 Dec 2025 12:35:36 +0530
Subject: [PATCH 151/547] fix: Update frappe-ui

Make changes to make codebase compatible with latest frappe-ui
---
 frappe-ui                                     |    2 +-
 frontend/auto-imports.d.ts                    |   10 +
 frontend/components.d.ts                      |    1 -
 frontend/index.html                           |    1 -
 frontend/package.json                         |    2 +-
 .../src/components/Controls/SearchBlock.vue   |    3 +-
 frontend/src/data/builderSettings.ts          |    3 +-
 frontend/src/data/webComponent.ts             |    2 +-
 frontend/src/index.css                        |    2 +-
 frontend/src/pages/PageBuilderDashboard.vue   |    2 -
 frontend/tailwind.config.js                   |    4 +-
 frontend/tsconfig.json                        |    2 +-
 yarn.lock                                     | 2429 +++++++++++++++--
 13 files changed, 2269 insertions(+), 194 deletions(-)
 create mode 100644 frontend/auto-imports.d.ts

diff --git a/frappe-ui b/frappe-ui
index 372b85c56..de9e0b34f 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 372b85c56de6d2d1002c1623b424809031e1da21
+Subproject commit de9e0b34ff0668692132a9784b3d9f78bc05c20c
diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 000000000..9d2400790
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 1c4aa7faa..7c7a6e933 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -76,7 +76,6 @@ declare module 'vue' {
     JavaScript: typeof import('./src/components/Icons/JavaScript.vue')['default']
     Layers: typeof import('./src/components/Icons/Layers.vue')['default']
     Loading: typeof import('./src/components/Icons/Loading.vue')['default']
-    LucideCalendar: typeof import('~icons/lucide/calendar')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     Meta: typeof import('./src/components/Icons/Meta.vue')['default']
diff --git a/frontend/index.html b/frontend/index.html
index 8acf459dd..2501115b1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -10,7 +10,6 @@
 	</head>
 	<body class="overscroll-none bg-surface-white no-scrollbar dark:selection:bg-surface-gray-4" style="scrollbar-width: auto;">
 		<div id="app"></div>
-		<div id="modals"></div>
 		<div id="popovers"></div>
 
 		<script>
diff --git a/frontend/package.json b/frontend/package.json
index 604877aa9..8444fac77 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.152",
+    "frappe-ui": "0.1.238",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/frontend/src/components/Controls/SearchBlock.vue b/frontend/src/components/Controls/SearchBlock.vue
index 73731f793..ac5b71e0b 100644
--- a/frontend/src/components/Controls/SearchBlock.vue
+++ b/frontend/src/components/Controls/SearchBlock.vue
@@ -148,8 +148,7 @@
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import { watchDebounced } from "@vueuse/core";
-import { FeatherIcon, Popover } from "frappe-ui";
-import Input from "frappe-ui/src/components/Input.vue";
+import { FeatherIcon, Input, Popover } from "frappe-ui";
 import { computed, nextTick, onMounted, Ref, ref } from "vue";
 import { toast } from "vue-sonner";
 import BuilderButton from "./BuilderButton.vue";
diff --git a/frontend/src/data/builderSettings.ts b/frontend/src/data/builderSettings.ts
index 8acb5bd8f..c86d23df4 100644
--- a/frontend/src/data/builderSettings.ts
+++ b/frontend/src/data/builderSettings.ts
@@ -1,5 +1,4 @@
-import { frappeRequest, setConfig } from "frappe-ui";
-import { createDocumentResource } from "frappe-ui/src/resources/documentResource";
+import { createDocumentResource, frappeRequest, setConfig } from "frappe-ui";
 setConfig("resourceFetcher", frappeRequest);
 
 const builderSettings = createDocumentResource({
diff --git a/frontend/src/data/webComponent.ts b/frontend/src/data/webComponent.ts
index 2da78b032..fc184f515 100644
--- a/frontend/src/data/webComponent.ts
+++ b/frontend/src/data/webComponent.ts
@@ -1,4 +1,4 @@
-import { createListResource } from "frappe-ui/src/resources/listResource";
+import { createListResource } from "frappe-ui";
 
 const webComponent = createListResource({
 	method: "GET",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fe55a6613..c99fee5f9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import "frappe-ui/src/style.css";
+@import "frappe-ui/style.css";
 
 @layer base {
 	ul,
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index 1f56a9501..9d611bb2d 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -329,6 +329,4 @@ const setFolder = async (folder: string) => {
 			builderStore.activeFolder = folder;
 		});
 };
-
-const showSettingsDialog = ref(false);
 </script>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3310689cf..9524fc688 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,5 @@
 import colors from "tailwindcss/colors";
-import frappeUIPreset from "frappe-ui/src/tailwind/preset.js";
+import frappeUIPreset from "frappe-ui/tailwind";
 import plugin from "tailwindcss/plugin";
 
 export default {
@@ -26,7 +26,7 @@ export default {
 				},
 			);
 		}),
-	  	require('@tailwindcss/container-queries'),
+		require("@tailwindcss/container-queries"),
 	],
 	theme: {
 		extend: {
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6b846f841..b4a1fb120 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -5,7 +5,7 @@
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
diff --git a/yarn.lock b/yarn.lock
index ee11a4a37..38c0eb3b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@akryum/tinypool@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@akryum/tinypool/-/tinypool-0.3.1.tgz#a14b3d51a400e7c0ab4c7e2b1c2e2fa0386aea87"
+  integrity sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -30,6 +35,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
   integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
 
+"@babel/helper-validator-identifier@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
+  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
+
 "@babel/parser@^7.27.2", "@babel/parser@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.4.tgz#da25d4643532890932cc03f7705fe19637e03fa8"
@@ -37,6 +47,13 @@
   dependencies:
     "@babel/types" "^7.28.4"
 
+"@babel/parser@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.5.tgz#0b0225ee90362f030efd644e8034c99468893b08"
+  integrity sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==
+  dependencies:
+    "@babel/types" "^7.28.5"
+
 "@babel/types@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a"
@@ -45,6 +62,14 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
+"@babel/types@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
+  integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
 "@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.18.6", "@codemirror/autocomplete@^6.3.2":
   version "6.19.0"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.19.0.tgz#4e6d6ddc9329ed387b2f7efd38febd3f6e2f63d8"
@@ -65,6 +90,16 @@
     "@codemirror/view" "^6.27.0"
     "@lezer/common" "^1.1.0"
 
+"@codemirror/commands@^6.3.0":
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.10.0.tgz#b3206984fec8443c4d910565eb2e9d591c7d80b2"
+  integrity sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
 "@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.3.1":
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz#763ca41aee81bb2431be55e3cfcc7cc8e91421a3"
@@ -104,7 +139,7 @@
     "@lezer/common" "^1.0.0"
     "@lezer/javascript" "^1.0.0"
 
-"@codemirror/lang-json@^6.0.2":
+"@codemirror/lang-json@^6.0.1", "@codemirror/lang-json@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.2.tgz#054b160671306667e25d80385286049841836179"
   integrity sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==
@@ -123,7 +158,7 @@
     "@lezer/common" "^1.2.1"
     "@lezer/python" "^1.1.4"
 
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0":
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0", "@codemirror/language@^6.9.2":
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.3.tgz#8e6632df566a7ed13a1bd307f9837765bb1abfdd"
   integrity sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==
@@ -144,6 +179,15 @@
     "@codemirror/view" "^6.35.0"
     crelt "^1.0.5"
 
+"@codemirror/lint@^6.4.2":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.9.2.tgz#09ed0aedec13381c9e36e1ac5d126027740c3ef4"
+  integrity sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
 "@codemirror/search@^6.0.0", "@codemirror/search@^6.5.11":
   version "6.5.11"
   resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.11.tgz#a324ffee36e032b7f67aa31c4fb9f3e6f9f3ed63"
@@ -153,14 +197,14 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.3.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
   integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
   dependencies:
     "@marijn/find-cluster-break" "^1.0.0"
 
-"@codemirror/theme-one-dark@^6.1.3":
+"@codemirror/theme-one-dark@^6.1.2", "@codemirror/theme-one-dark@^6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz#1dbb73f6e73c53c12ad2aed9f48c263c4e63ea37"
   integrity sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==
@@ -180,6 +224,16 @@
     style-mod "^4.1.0"
     w3c-keyname "^2.2.4"
 
+"@codemirror/view@^6.22.0":
+  version "6.39.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.39.4.tgz#b76c73ab48c749cc9ab9e5e0a5d9e47df9f31cb5"
+  integrity sha512-xMF6OfEAUVY5Waega4juo1QGACfNkNF+aJLqpd8oUJz96ms2zbfQ9Gh35/tI3y8akEV31FruKfj7hBnIU/nkqA==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    crelt "^1.0.6"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -371,7 +425,7 @@
   dependencies:
     "@floating-ui/utils" "^0.2.10"
 
-"@floating-ui/dom@^1.6.13", "@floating-ui/dom@^1.6.7", "@floating-ui/dom@^1.7.4":
+"@floating-ui/dom@^1.6.13", "@floating-ui/dom@^1.6.7", "@floating-ui/dom@^1.7.0", "@floating-ui/dom@^1.7.4":
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.4.tgz#ee667549998745c9c3e3e84683b909c31d6c9a77"
   integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
@@ -400,6 +454,63 @@
   dependencies:
     "@tanstack/vue-virtual" "^3.0.0-beta.60"
 
+"@histoire/app@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/app/-/app-0.17.17.tgz#3aa6fbb7be516c865480b5a2cf2cfad07e230af0"
+  integrity sha512-2i1V38o08V+eaR0d3L0/EA6AYG14xyQBJbyYv0Hz3r4sH3Elj1FoJiwolbCfTDmkOnSgwWTc7+JoCqkLIbxfhA==
+  dependencies:
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    "@types/flexsearch" "^0.7.6"
+    flexsearch "0.7.21"
+    shiki-es "^0.2.0"
+
+"@histoire/controls@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/controls/-/controls-0.17.17.tgz#25ab3d3c3500f783244c3f7ca6c5b7e88c8ddb0a"
+  integrity sha512-W22HZ/X078IZmE09XEKj4Fq7LxQPP/w/aMYAzm94V2NIGhI0fkiSaBDvyTUl7NYrGT66Wq5+9Po1IWPMllk3cQ==
+  dependencies:
+    "@codemirror/commands" "^6.3.0"
+    "@codemirror/lang-json" "^6.0.1"
+    "@codemirror/language" "^6.9.2"
+    "@codemirror/lint" "^6.4.2"
+    "@codemirror/state" "^6.3.1"
+    "@codemirror/theme-one-dark" "^6.1.2"
+    "@codemirror/view" "^6.22.0"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+
+"@histoire/plugin-vue@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/plugin-vue/-/plugin-vue-0.17.17.tgz#65cde4685738c06edf0f36b23b93f966a1f642c3"
+  integrity sha512-O5h/Ww6IT2CygVVT4onN27IZt11Z2qE8XeHeXJCEese3dxnnVWRhjMpsaWAU5XqgfjKNAiALJk86b49/6NQaRg==
+  dependencies:
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    change-case "^4.1.2"
+    globby "^13.2.2"
+    launch-editor "^2.6.1"
+    pathe "^1.1.1"
+
+"@histoire/shared@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/shared/-/shared-0.17.17.tgz#b72660f0ced7930a895aea82d567b59bb19c55c9"
+  integrity sha512-ueGtURysonT0MujCObPCR57+mgZluMEXCrbc2FBgKAD/DoAt38tNwSGsmLldk2O6nTr7lr6ClbVSgWrLwgY6Xw==
+  dependencies:
+    "@histoire/vendors" "^0.17.17"
+    "@types/fs-extra" "^9.0.13"
+    "@types/markdown-it" "^12.2.3"
+    chokidar "^3.5.3"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+
+"@histoire/vendors@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/vendors/-/vendors-0.17.17.tgz#d90c6c1324b5a694673ae98731b6c85a8bd5aa01"
+  integrity sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==
+
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
@@ -438,6 +549,48 @@
     local-pkg "^1.1.1"
     mlly "^1.7.4"
 
+"@inquirer/ansi@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-1.0.2.tgz#674a4c4d81ad460695cb2a1fc69d78cd187f337e"
+  integrity sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==
+
+"@inquirer/confirm@^5.0.0":
+  version "5.1.21"
+  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-5.1.21.tgz#610c4acd7797d94890a6e2dde2c98eb1e891dd12"
+  integrity sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==
+  dependencies:
+    "@inquirer/core" "^10.3.2"
+    "@inquirer/type" "^3.0.10"
+
+"@inquirer/core@^10.3.2":
+  version "10.3.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-10.3.2.tgz#535979ff3ff4fe1e7cc4f83e2320504c743b7e20"
+  integrity sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==
+  dependencies:
+    "@inquirer/ansi" "^1.0.2"
+    "@inquirer/figures" "^1.0.15"
+    "@inquirer/type" "^3.0.10"
+    cli-width "^4.1.0"
+    mute-stream "^2.0.0"
+    signal-exit "^4.1.0"
+    wrap-ansi "^6.2.0"
+    yoctocolors-cjs "^2.1.3"
+
+"@inquirer/figures@^1.0.15":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.15.tgz#dbb49ed80df11df74268023b496ac5d9acd22b3a"
+  integrity sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==
+
+"@inquirer/type@^3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-3.0.10.tgz#11ed564ec78432a200ea2601a212d24af8150d50"
+  integrity sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==
+
+"@interactjs/types@1.10.27":
+  version "1.10.27"
+  resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
+  integrity sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==
+
 "@internationalized/date@^3.5.0", "@internationalized/date@^3.5.4":
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.9.0.tgz#cf241989b5dd07a2a9f1c91aabd2ad93968a0cc3"
@@ -498,6 +651,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@juggle/resize-observer@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.2.1":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
@@ -567,6 +725,18 @@
   resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
   integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
 
+"@mswjs/interceptors@^0.40.0":
+  version "0.40.0"
+  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.40.0.tgz#1b45f215ba8c2983ed133763ca03af92896083d6"
+  integrity sha512-EFd6cVbHsgLa6wa4RljGj6Wk75qoHxUSyc5asLyyPSyuhIcdS2Q3Phw6ImS1q+CkALthJRShiYfKANcQMuMqsQ==
+  dependencies:
+    "@open-draft/deferred-promise" "^2.2.0"
+    "@open-draft/logger" "^0.3.0"
+    "@open-draft/until" "^2.0.0"
+    is-node-process "^1.2.0"
+    outvariant "^1.4.3"
+    strict-event-emitter "^0.5.1"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -588,11 +758,34 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@open-draft/deferred-promise@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz#4a822d10f6f0e316be4d67b4d4f8c9a124b073bd"
+  integrity sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==
+
+"@open-draft/logger@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/logger/-/logger-0.3.0.tgz#2b3ab1242b360aa0adb28b85f5d7da1c133a0954"
+  integrity sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==
+  dependencies:
+    is-node-process "^1.2.0"
+    outvariant "^1.4.0"
+
+"@open-draft/until@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
+  integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.29"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
+  integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
+
 "@popperjs/core@^2.11.2", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -747,6 +940,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@tailwindcss/typography@^0.5.16":
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.19.tgz#ecb734af2569681eb40932f09f60c2848b909456"
@@ -766,21 +964,36 @@
   dependencies:
     "@tanstack/virtual-core" "3.13.12"
 
-"@tiptap/core@^2.11.7", "@tiptap/core@^2.26.1":
+"@tiptap/core@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.26.2.tgz#4cc9d9299ed1f0bdec79426ba4f4cc24f2cee994"
   integrity sha512-cr30QWJECl5j7qUUG4Z4BDitHgJIBWipbC3JbjoDtumgZLedGa5SV+JiGa4GUhNt9E34Pw1BH0gBDL4adGHiLg==
 
+"@tiptap/core@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.27.1.tgz#0a91346952b8314cd6bbe5cda0c32a6e7e24f432"
+  integrity sha512-nkerkl8syHj44ZzAB7oA2GPmmZINKBKCa79FuNvmGJrJ4qyZwlkDzszud23YteFZEytbc87kVd/fP76ROS6sLg==
+
 "@tiptap/extension-blockquote@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.26.2.tgz#2e3748b3a38c03839715757fb84e18e4b3f4af8e"
   integrity sha512-SQNMX2rkWdAOYT6pM9KZ4bZK07YiCqX6wkHiKbLSZ8GMLi35dhkiSBxvY2I72q5ucIjgC9asGf8knA/2fbVypA==
 
+"@tiptap/extension-blockquote@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.27.1.tgz#52384b3e0fd0ea3d2ca44bf9b45c40d49807831e"
+  integrity sha512-QrUX3muElDrNjKM3nqCSAtm3H3pT33c6ON8kwRiQboOAjT/9D57Cs7XEVY7r6rMaJPeKztrRUrNVF9w/w/6B0A==
+
 "@tiptap/extension-bold@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.26.2.tgz#ea042a6dd7bcd0f7b5db7e10da77eb2d9fe9070d"
   integrity sha512-kNjbHZhLyDu2ZBZmJINzXg3MAW7+05KqGkcwxudC1X/DQM5V5FpW7u6TOlC+nf1I9wABgayxURyU8FsIaXDxqA==
 
+"@tiptap/extension-bold@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.27.1.tgz#d5603263209f59c362900b6f1855a0da4abfa4db"
+  integrity sha512-g4l4p892x/r7mhea8syp3fNYODxsDrimgouQ+q4DKXIgQmm5+uNhyuEPexP3I8TFNXqQ4DlMNFoM9yCqk97etQ==
+
 "@tiptap/extension-bubble-menu@^2.26.2":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.26.2.tgz#f84b8204ce27e72952315726f8a46aa475ef9da0"
@@ -788,41 +1001,78 @@
   dependencies:
     tippy.js "^6.3.7"
 
+"@tiptap/extension-bubble-menu@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.27.1.tgz#51c26f47e1a10499c7198cc8e0e5a9ea6889b2b3"
+  integrity sha512-ki1R27VsSvY2tT9Q2DIlcATwLOoEjf5DsN+5sExarQ8S/ZxT/tvIjRxB8Dx7lb2a818W5f/NER26YchGtmHfpg==
+  dependencies:
+    tippy.js "^6.3.7"
+
 "@tiptap/extension-bullet-list@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.26.2.tgz#f8cc02daebfac00e95a2d09037726812e9337352"
   integrity sha512-L0qxUa5vzUciLEVtr1nY6HG8gH8432GtuX807MM/5wKiYYdbSii3I22456ZnboiozoqXrjjvYUHeB++HhOSPgQ==
 
-"@tiptap/extension-code-block-lowlight@^2.11.5":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.26.2.tgz#e7e15bba9fbaabd3adc7a9fa50ba00993df85c09"
-  integrity sha512-FfNvM8P/WsqatTpKY3V1lu2wuHLttjMQ11nh+F5s4MBoXScSTlsb5V0eUJ4Wmg+ZX0FpAvOtBBOTcJZ2fxtqdA==
+"@tiptap/extension-bullet-list@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.27.1.tgz#d463f9cd0e660b508fa500886dfb75eb4454c316"
+  integrity sha512-5FmnfXkJ76wN4EbJNzBhAlmQxho8yEMIJLchTGmXdsD/n/tsyVVtewnQYaIOj/Z7naaGySTGDmjVtLgTuQ+Sxw==
+
+"@tiptap/extension-code-block-lowlight@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.27.1.tgz#827d67063517e46085b4516ff418778fcbd07e51"
+  integrity sha512-Ijg9724uX/l4LXLELEeztZIgg+bDE/jJCkgS1+mavkRA/qtidpQkHo7L/Ry22fmj/ktCtZLjPXE5JAPAoRU6zA==
 
-"@tiptap/extension-code-block@^2.11.9", "@tiptap/extension-code-block@^2.26.1":
+"@tiptap/extension-code-block@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.26.2.tgz#948c464b827e00dc76400a550f9a11e379f87104"
   integrity sha512-MJZ4QtziIWJ1zuSW2ogAHv+UHGk3DvGbVi+Dfmo0ybonXX7vRVHE+3qT7OcdTRBF+pC2oCnsjzqwFcGBP3BbZw==
 
+"@tiptap/extension-code-block@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.27.1.tgz#e23502e256a66c74df1b52799ce879764680ea51"
+  integrity sha512-wCI5VIOfSAdkenCWFvh4m8FFCJ51EOK+CUmOC/PWUjyo2Dgn8QC8HMi015q8XF7886T0KvYVVoqxmxJSUDAYNg==
+
 "@tiptap/extension-code@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.26.2.tgz#fa8031b5f21c571559e9556a031da13ccfe91708"
   integrity sha512-xnKJvzlAp75dheyaK5tLKAksHf9PtSr8a7OuPjf2IXS5K+QMtnwxx7KAHHijmecfWjLR0wyu9AvT/FWFfKi5LQ==
 
-"@tiptap/extension-color@^2.0.3", "@tiptap/extension-color@^2.0.4":
+"@tiptap/extension-code@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.27.1.tgz#fdfc8b3c90fb09761dc4b9a955df282d68757b52"
+  integrity sha512-i65wUGJevzBTIIUBHBc1ggVa27bgemvGl/tY1/89fEuS/0Xmre+OQjw8rCtSLevoHSiYYLgLRlvjtUSUhE4kgg==
+
+"@tiptap/extension-color@^2.0.4":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.26.2.tgz#ff0aa052fe6dd893f064ff33897df4b0f35c60d5"
   integrity sha512-hdanraIzYrXoAsnUZfR5b+mrPy1jPrdAnUBaksACW7m5brLpqjNDD9woLx5xUhT8sJ5ltsTRAocRFG4VrlBdqg==
 
+"@tiptap/extension-color@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.27.1.tgz#3936a5b8e2e95126bcd20130c18c72061dc331f8"
+  integrity sha512-raYRsdG2tZvVvY1LV/VTZnDG44Y0xRBwo5CZEat0OUqdx34dfvCtYm8HIOTyWBwr7OOW+yR4O1Vc2zFkmfthZw==
+
 "@tiptap/extension-document@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.26.2.tgz#cd4f4a87de57f4cfb048692331883c9bcb02e40f"
   integrity sha512-s0/P3A8zxWL/h3e20xWMTT/rcwD0+57I6mT9JgNBPtvhPePy8d698G6/qFK+x+GdIyjJylfsq2BrSE9H+QhIBg==
 
+"@tiptap/extension-document@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.27.1.tgz#8c7ccb5f52e560a2a55b3519d87ca5bad5c1dd83"
+  integrity sha512-NtJzJY7Q/6XWjpOm5OXKrnEaofrcc1XOTYlo/SaTwl8k2bZo918Vl0IDBWhPVDsUN7kx767uHwbtuQZ+9I82hA==
+
 "@tiptap/extension-dropcursor@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.26.2.tgz#19805fc3b15f957abb0e80d9e5729fb1e65bc8f6"
   integrity sha512-o5j4Gkurb/WBu1wP2tihYnZ8dENzmlxFWWMx++g6abEpn9xdud7VxHT5Ny7mBSBptI8uMwKT53weYC0on38n3g==
 
+"@tiptap/extension-dropcursor@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.27.1.tgz#344f30c748b014e8502e964c00cfdb9f27ab931f"
+  integrity sha512-3MBQRGHHZ0by3OT0CWbLKS7J3PH9PpobrXjmIR7kr0nde7+bHqxXiVNuuIf501oKU9rnEUSedipSHkLYGkmfsA==
+
 "@tiptap/extension-floating-menu@^2.26.2":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.26.2.tgz#55f24af6bb1db53588bc4855860f2378ef550b22"
@@ -830,6 +1080,13 @@
   dependencies:
     tippy.js "^6.3.7"
 
+"@tiptap/extension-floating-menu@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.27.1.tgz#137408c4d6c74da4cd99e9825bdcfa38b84b891b"
+  integrity sha512-nUk/8DbiXO69l6FDwkWso94BTf52IBoWALo+YGWT6o+FO6cI9LbUGghEX2CdmQYXCvSvwvISF2jXeLQWNZvPZQ==
+  dependencies:
+    tippy.js "^6.3.7"
+
 "@tiptap/extension-font-family@^2.0.4":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-font-family/-/extension-font-family-2.26.2.tgz#70ecc89b671205648abbd0f8b75a68204ab83499"
@@ -840,124 +1097,201 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.26.2.tgz#979e1d63d4e8b7e8ca78e658bbc7db4d743f52de"
   integrity sha512-a68mi8V0mh058UrBIk23f50K5JGVeRZnF6ViptIleAD/Ny1K6VLjGCz6k190de+Tb9tnQLPEwwwDcy+ZnvCmYQ==
 
+"@tiptap/extension-gapcursor@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.27.1.tgz#eb591586c8c9a4d7ac7947668209f35834a395d8"
+  integrity sha512-A9e1jr+jGhDWzNSXtIO6PYVYhf5j/udjbZwMja+wCE/3KvZU9V3IrnGKz1xNW+2Q2BDOe1QO7j5uVL9ElR6nTA==
+
 "@tiptap/extension-hard-break@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.26.2.tgz#d199352eca37e53386335fa5c2f8843da2f2e26f"
   integrity sha512-OLpeTey7p3ChyEsABLPvNv7rD/8E4k1JTt+H+MUjyL0dnrZuIWluckUJCJKnV8PhR9Mifngk1MTFUilpooiv1g==
 
-"@tiptap/extension-heading@^2.12.0", "@tiptap/extension-heading@^2.26.1":
+"@tiptap/extension-hard-break@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.27.1.tgz#823337a3b04abfee7000eb9f3677cb8e80253868"
+  integrity sha512-W4hHa4Io6QCTwpyTlN6UAvqMIQ7t56kIUByZhyY9EWrg/+JpbfpxE1kXFLPB4ZGgwBknFOw+e4bJ1j3oAbTJFw==
+
+"@tiptap/extension-heading@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.26.2.tgz#4cb92f9a5a9470c8cb227d469827a35c9997ebe3"
   integrity sha512-0VAr1l1QKFJ0B2l4D4wV0LRlyFYeJt0S09mz+HPF2TqKF4twmPjaGD6o5zzXWl8c4cQj1CmM8P+9an3SKRjOaA==
 
-"@tiptap/extension-highlight@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.26.2.tgz#5c49a23cf20d7c7276762a403b8fe5c59a240c30"
-  integrity sha512-d+9CKBnEH3htXjYUPEH3FYkbUXRUlDCqAVD27v5DftRtTF5cR0htqvib/t9gZ7T10qJOlnYH4mrB//vhZKBBmQ==
+"@tiptap/extension-heading@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.27.1.tgz#bb912f1ea0ae7b48856bd071d09a326a95e32f0b"
+  integrity sha512-6xoC7igZlW1EmnQ5WVH9IL7P1nCQb3bBUaIDLvk7LbweEogcTUECI4Xg1vxMOVmj9tlDe1I4BsgfcKpB5KEsZw==
+
+"@tiptap/extension-highlight@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.27.1.tgz#50282546e21f502e62a4ef608f54ba1ea83938e3"
+  integrity sha512-ntuYX09tvHQE/R/8WbTOxbFuQhRr2jhTkKz/gLwDD2o8IhccSy3f0nm+mVmVamKQnbsBBbLohojd5IGOnX9f1A==
 
 "@tiptap/extension-history@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.26.2.tgz#7d85a595102a25813cfe6687348d28e69c2b9982"
   integrity sha512-X/cu79AV5D2Z1QtuvKo/4/Rgl/Uti/n5V3QgCxFLQRCKTxHOCis+RlBCjBfOPztJX4T9QUE6lq20KqB47rsNwQ==
 
+"@tiptap/extension-history@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.27.1.tgz#cbf6534648d0d7be441f170c34a915f9114cbe74"
+  integrity sha512-K8PHC9gegSAt0wzSlsd4aUpoEyIJYOmVVeyniHr1P1mIblW1KYEDbRGbDlrLALTyUEfMcBhdIm8zrB9X2Nihvg==
+
 "@tiptap/extension-horizontal-rule@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.26.2.tgz#afbec6cb8165b2ed2ee2779149d9e63bf2d99a6b"
   integrity sha512-whlUskFUwmi7nXn4OT55xHXSAqwEAEQfZWswmae1Y5wTMDxavZ0FF4xvCVgsQ7gYG782tIgLCzriTN4AjBphIQ==
 
-"@tiptap/extension-image@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.26.2.tgz#7f5cd7847ca1aa980dba9352b7a4101ced3c22ce"
-  integrity sha512-3gK+ETLiWGAUdyPDXDheNJ38OgQabSzZJ+1nQo9KWjI7P3LQ7/ctxLtT+hAFpxX0qMK4bnu5vZaItSXxE3ZtpQ==
+"@tiptap/extension-horizontal-rule@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.27.1.tgz#9c42939e62bde0bfb745baca329d61a6318eb794"
+  integrity sha512-WxXWGEEsqDmGIF2o9av+3r9Qje4CKrqrpeQY6aRO5bxvWX9AabQCfasepayBok6uwtvNzh3Xpsn9zbbSk09dNA==
+
+"@tiptap/extension-image@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.27.1.tgz#d3aa9a6decf504608b7f4e071b944645085b06f3"
+  integrity sha512-wu3vMKDYWJwKS6Hrw5PPCKBO2RxyHNeFLiA/uDErEV7axzNpievK/U9DyaDXmtK3K/h1XzJAJz19X+2d/pY68w==
 
 "@tiptap/extension-italic@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.26.2.tgz#451092f007af17e26ea7b8eb1eab3bb0f56eafa2"
   integrity sha512-/4AiE2JWtjY9yW+MifMP8EOOwOSDKDUxCyqtGT6e4xqqFUNLZJA0o4P/MYjcKVwsa1/IsDRsOaFRlAiMmAXVXw==
 
-"@tiptap/extension-link@^2.0.3", "@tiptap/extension-link@^2.1.12":
+"@tiptap/extension-italic@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.27.1.tgz#a18694fbf2c9247a2e868f9786a786fd06ae338e"
+  integrity sha512-rcm0GyniWW0UhcNI9+1eIK64GqWQLyIIrWGINslvqSUoBc+WkfocLvv4CMpRkzKlfsAxwVIBuH2eLxHKDtAREA==
+
+"@tiptap/extension-link@^2.1.12":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.26.2.tgz#fb5a7d3e1f069ed4e3fd4cbf674c9a73139c23d7"
   integrity sha512-rzYxx5wI1551ubPfW2pJ3V957cX/WAmbUI3q8Un+LlOsSmbddl+5BjlF5t/vl/pwaOv7FJAz9e29n877zkGOVQ==
   dependencies:
     linkifyjs "^4.2.0"
 
+"@tiptap/extension-link@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.27.1.tgz#a57345a8a124a4fd4de1929c31ccf9b92d0a2619"
+  integrity sha512-cCwWPZsnVh9MXnGOqSIRXPPuUixRDK8eMN2TvqwbxUBb1TU7b/HtNvfMU4tAOqAuMRJ0aJkFuf3eB0Gi8LVb1g==
+  dependencies:
+    linkifyjs "^4.3.2"
+
 "@tiptap/extension-list-item@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.26.2.tgz#9196b2517b811c1a61495b235897b58b9e8567c9"
   integrity sha512-T1dFfx1JjRRX0iyStSTwMNajMyT+OE7XEggn+DON1g+zbgA+4cJ11WQpfrfA9VM2H5QWYyKGfHFigoFcJ8rjog==
 
-"@tiptap/extension-mention@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.26.2.tgz#7408900b643912e0ebe1afa8dd8dd2b71bbb4d74"
-  integrity sha512-fezYJQlewhfaIXBQ85LTDRBMsWfynb9xSsEYC8EeRhbwI5fFlWKEAi876oQiSqqJTg6NV/pda9dUn+wZkV7U4w==
+"@tiptap/extension-list-item@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.27.1.tgz#59db919133413be2ba33718f52265cc1885d5db8"
+  integrity sha512-dtsxvtzxfwOJP6dKGf0vb2MJAoDF2NxoiWzpq0XTvo7NGGYUHfuHjX07Zp0dYqb4seaDXjwsi5BIQUOp3+WMFQ==
+
+"@tiptap/extension-mention@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.27.1.tgz#956878cbf09b526a3b436428739a2b112c03d1ff"
+  integrity sha512-8qwPIum0rMK/7BaHEN0+M/VkUn00LqhqyRO8JdC/EBVrUBgxKTQsUhIhSstgVAYzD1w7cCUfTFX4bYu9lcFMEQ==
 
 "@tiptap/extension-ordered-list@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.26.2.tgz#19b6fc3bf4ba3b7b4ad8194445090ae322ea1b9e"
   integrity sha512-UVGYyWKB5wWWvrvdN/WrPXPHJoP/UD1TNyeoE75M6nq4oD4l+Nc9Y5MIPsngrv/TimbomLNilR4ZRHibEriG9w==
 
+"@tiptap/extension-ordered-list@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.27.1.tgz#60a450773552450c8183dc0344c7c82bd4b76d9d"
+  integrity sha512-U1/sWxc2TciozQsZjH35temyidYUjvroHj3PUPzPyh19w2fwKh1NSbFybWuoYs6jS3XnMSwnM2vF52tOwvfEmA==
+
 "@tiptap/extension-paragraph@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.26.2.tgz#b496c75bdcfdd361ef791f4b2a05029d6f11013f"
   integrity sha512-dccyffm95nNT9arjxGOyv4/cOPF4XS5Osylccp9KYLrmiSTXEuzVIYtMXhXbc0UUdABGvbFQWi88tRxgeDTkgA==
 
-"@tiptap/extension-placeholder@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.26.2.tgz#359db95a599b72660981f9f4728549586cce678a"
-  integrity sha512-XBTDcpEo7Zo/1+RhGnRxA2TF0elQW7EayUcV+lJ3f7HQ5lrb5NTnakYc1ydeZ8Ih6vUqbK2CQUsESe3UWHHgHg==
+"@tiptap/extension-paragraph@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.27.1.tgz#e7b0428dfaacd114401768fde6ffcb4d95f78ab6"
+  integrity sha512-R3QdrHcUdFAsdsn2UAIvhY0yWyHjqGyP/Rv8RRdN0OyFiTKtwTPqreKMHKJOflgX4sMJl/OpHTpNG1Kaf7Lo2A==
+
+"@tiptap/extension-placeholder@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.27.1.tgz#0edbcbc9b0e2b1464f03920831d41c79131263aa"
+  integrity sha512-UbXaibHHFE+lOTlw/vs3jPzBoj1sAfbXuTAhXChjgYIcTTY5Cr6yxwcymLcimbQ79gf04Xkua2FCN3YsJxIFmw==
 
 "@tiptap/extension-strike@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.26.2.tgz#95cf65bdc98ef8fa45ac0055a583d5174531b311"
   integrity sha512-gY8/P8ycvICiZsa9OeTpOnSL0o+PAYH1QpBomaBhdZZ2tcsziMYN9BZto6uQARi9tdxeOYRePyZ+Junk4xsyFg==
 
-"@tiptap/extension-table-cell@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.26.2.tgz#3130c4cf1d9d46e1f656c35e6b21656bbf7480ad"
-  integrity sha512-A2XThaJBVQvR/nKyUfHwyoSuz/NtwWYDjnGjYtN/+fFCEWx++33HjvtxmCCpGrw5xuE783L4I9cr5Pcrepgy3A==
-
-"@tiptap/extension-table-header@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.26.2.tgz#3a147ab735d9e1d04497a7da4629e50109f68312"
-  integrity sha512-ppiL8aOQuBqy8GjMuVmIWu187rvNwxANCoAE+iGRDTK0y6c27HA+f6Y9n55T9PYqzDs5Z03gIBGhNIyw1lfc5A==
-
-"@tiptap/extension-table-row@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.26.2.tgz#36f3a8295549d06e3483d0ea618b4070f1cecd0b"
-  integrity sha512-TzQn/KJ7w34oswRP3P1RKwT0qYV6TG+k2iFzKPO7Vxo24debJopqC8C+oP/qw7NJaTyTcEwx+oSavTPILFdxeg==
-
-"@tiptap/extension-table@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.26.2.tgz#472458af29328b0fd0842a2893a7692665d0af34"
-  integrity sha512-zqyKRla1Ite8itEwklCBAkXPXg81GzUwLdnKOIMP/HHqMmrDRljHq455uJbzjIOOGt1x5TUcstMOn1V0ABjn5g==
-
-"@tiptap/extension-text-align@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.26.2.tgz#288005ba496b3446cea18e1fcd8dbffc0dd8502b"
-  integrity sha512-fra+weXocCINVPGjykteTiQ+p34POSWyxw+Y+KFBegw24uecHhB5NCK6aXa68tvEMLC9EdvZRHuoKRfkxBQ9rw==
-
-"@tiptap/extension-text-style@^2.0.3", "@tiptap/extension-text-style@^2.0.4", "@tiptap/extension-text-style@^2.26.1":
+"@tiptap/extension-strike@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.27.1.tgz#1a2d3db5a33820e2d986a6cf8bc248612bacc020"
+  integrity sha512-S9I//K8KPgfFTC5I5lorClzXk0g4lrAv9y5qHzHO5EOWt7AFl0YTg2oN8NKSIBK4bHRnPIrjJJKv+dDFnUp5jQ==
+
+"@tiptap/extension-table-cell@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.27.1.tgz#9684f8e34a79b0de99fd981ec4847ac236099983"
+  integrity sha512-VowNmz1kub2qfntWkU8jGA6DoCl9xjJBWSypuQIeiN/IRId3BMrJodT26pTNJ3ChDMtYaanWaUvYqckRxgTC2A==
+
+"@tiptap/extension-table-header@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.27.1.tgz#8bbad70a3fc8b04cbc6bd5ddac78090af27e4673"
+  integrity sha512-lSbGB6kBp/sTVzAWl4v7v7ztL5XU3aTdlS7FhfGjpdsxd4zPKYG8kx+Uxgq25W9/BlCbnqHnO0poAMfOlspDQw==
+
+"@tiptap/extension-table-row@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.27.1.tgz#cc248d757f0976f3ecd0ccfc3a940f6663021231"
+  integrity sha512-3xtlmZ6NWDi5a42gK0qQQTeBUpJ2j1o7qyXTFkhQaJAeIFEqsemgSRhgXZxbwSmQQZsPJ/86KWBNVkT0FaRFDw==
+
+"@tiptap/extension-table@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.27.1.tgz#3fdfad6aa243608aac94b04c32e9a23bb856e88c"
+  integrity sha512-iOoOo0vYFzAogAZlw36DgmFfNM5vOkLqnApm81soO/YWpqtKAvBn+TMY4ss4OMDsOefUzBa6xqOJ0gJR5ZygjA==
+
+"@tiptap/extension-task-item@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.27.1.tgz#03555f12f1c2fb74163cadecd01b9b4dec9b0b6a"
+  integrity sha512-vaEtdos+9jApD6yRfD6F/xShikiZFHi7I0nswAmGKT/kE1wmHCUxme8OFMe7642e2OK0lqgHsUaOLxP/0nZJ5A==
+
+"@tiptap/extension-task-list@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.27.1.tgz#b0a03de1b6a92b07df2ddb47e1d9af757dd0c250"
+  integrity sha512-KRlYOZ6kdURvAspUrLVsC7mLkVW2DYhpj+7QxH7gVDZuAuoPUEmpJVcBVPq7GhPF9PccaRLru+n1Ege5VqvZ+Q==
+
+"@tiptap/extension-text-align@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.27.1.tgz#5363d2dff9e97bc41c616bcf5f0969e0efe130e5"
+  integrity sha512-D7dLPk7y5mDn9ZNANQ4K2gCq4vy+Emm5AdeWOGzNeqJsYrBotiQYXd9rb1QYjdup2kzAoKduMTUXV92ujo5cEg==
+
+"@tiptap/extension-text-style@^2.0.4", "@tiptap/extension-text-style@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.26.2.tgz#f1bd326f396e4d75199c21a0c41e77114fee874a"
   integrity sha512-rNkV3dgT3nTISEf3Ax/DdqQsSy9p46n2fOBkD8FCtdrwsWNH5N4uUh4jI/q0exYKJUyZGvl60uXwCkZiQ3pVBA==
 
+"@tiptap/extension-text-style@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.27.1.tgz#11c0038905d644dc827fd5ff749936285b2dc6da"
+  integrity sha512-NagQ9qLk0Ril83gfrk+C65SvTqPjL3WVnLF2arsEVnCrxcx3uDOvdJW67f/K5HEwEHsoqJ4Zq9Irco/koXrOXA==
+
 "@tiptap/extension-text@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.26.2.tgz#ebc69ef93792cb5189de2551460a01fdfedd1436"
   integrity sha512-Rb8Le/Li+EixQNc/pGkEJpLjozTjWYP9glaYfnjPtRVw4tHcd7khVm5mer0TQjonbBUjVC1zSuXv9gifXOv6DQ==
 
-"@tiptap/extension-typography@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-2.26.2.tgz#873ad647502c7b70b3a48951bc844410d6e8c5b8"
-  integrity sha512-tT6QJIr7Q87EX2z4tjImrYe8pALGTEOX4trUQGc0gwDJ9NUyiHnZbw5pCZd15TSapKfIHmxjESr+jsnb2asLPA==
+"@tiptap/extension-text@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.27.1.tgz#9b9b1efcf236104fbc2aa121430abb2eae3f1b76"
+  integrity sha512-a4GCT+GZ9tUwl82F4CEum9/+WsuW0/De9Be/NqrMmi7eNfAwbUTbLCTFU0gEvv25WMHCoUzaeNk/qGmzeVPJ1Q==
+
+"@tiptap/extension-typography@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-2.27.1.tgz#446139add71a400325f50384b63e443c0a090bab"
+  integrity sha512-jAZU5IuWH9CtZlolQ1gRhV+bT75s19SXjadQwkk18gMMiapcaIVVTxUDWY6ycv9ge4cjRoaP3lqBviW3cGqhOA==
 
 "@tiptap/extension-underline@^2.22.3":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.26.2.tgz#66c45ed8ae145e790a58344946c93331f6e34ff2"
   integrity sha512-kpKJSfsn1+b8l96YPg2GRn3aaN78pLqSeyzfA5FYVbN0lyptbqRVOrNM8p3n6l0LbAkiEjc/TgOMwNNEL93kyA==
 
-"@tiptap/pm@^2.0.3", "@tiptap/pm@^2.0.4", "@tiptap/pm@^2.26.1":
+"@tiptap/pm@^2.0.4", "@tiptap/pm@^2.26.1":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.26.2.tgz#6efd63ba27a2618a5fe1a4942cbe9793956f4b71"
   integrity sha512-H2kJHckC9idlYPu/PNdu5XR3Rdu7gbNb+Qrdt2gBnaDyHgAcs+14wak6x19vy27GV9FFzg9722Eb7LErooo28w==
@@ -981,7 +1315,31 @@
     prosemirror-transform "^1.10.2"
     prosemirror-view "^1.37.0"
 
-"@tiptap/starter-kit@^2.0.3", "@tiptap/starter-kit@^2.0.4":
+"@tiptap/pm@^2.27.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.27.1.tgz#d643627d03a74a2c10d21695ee509d9db8e6bd2f"
+  integrity sha512-ijKo3+kIjALthYsnBmkRXAuw2Tswd9gd7BUR5OMfIcjGp8v576vKxOxrRfuYiUM78GPt//P0sVc1WV82H5N0PQ==
+  dependencies:
+    prosemirror-changeset "^2.3.0"
+    prosemirror-collab "^1.3.1"
+    prosemirror-commands "^1.6.2"
+    prosemirror-dropcursor "^1.8.1"
+    prosemirror-gapcursor "^1.3.2"
+    prosemirror-history "^1.4.1"
+    prosemirror-inputrules "^1.4.0"
+    prosemirror-keymap "^1.2.2"
+    prosemirror-markdown "^1.13.1"
+    prosemirror-menu "^1.2.4"
+    prosemirror-model "^1.23.0"
+    prosemirror-schema-basic "^1.2.3"
+    prosemirror-schema-list "^1.4.1"
+    prosemirror-state "^1.4.3"
+    prosemirror-tables "^1.6.4"
+    prosemirror-trailing-node "^3.0.0"
+    prosemirror-transform "^1.10.2"
+    prosemirror-view "^1.37.0"
+
+"@tiptap/starter-kit@^2.0.4":
   version "2.26.1"
   resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.26.1.tgz#00a19c05491a51423aabe511f624567942bd2baa"
   integrity sha512-oziMGCds8SVQ3s5dRpBxVdEKZAmO/O//BjZ69mhA3q4vJdR0rnfLb5fTxSeQvHiqB878HBNn76kNaJrHrV35GA==
@@ -1008,12 +1366,39 @@
     "@tiptap/extension-text-style" "^2.26.1"
     "@tiptap/pm" "^2.26.1"
 
-"@tiptap/suggestion@^2.0.3":
-  version "2.26.2"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.26.2.tgz#c708877024fffe116041b00a8cdfc6ff147a34e9"
-  integrity sha512-BtigI3xOJQbdNh2OeKN5wQDI/EPGN4GXdpoMHhENZeXKrX6PvWNaqjyLVsV3QiLgv6P352nZWcgo51wPXY2JgQ==
-
-"@tiptap/vue-3@^2.0.3", "@tiptap/vue-3@^2.0.4":
+"@tiptap/starter-kit@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.27.1.tgz#a947c8cbf33c391809b9a8736f97e95a092014fc"
+  integrity sha512-uQQlP0Nmn9eq19qm8YoOeloEfmcGbPpB1cujq54Q6nPgxaBozR7rE7tXbFTinxRW2+Hr7XyNWhpjB7DMNkdU2Q==
+  dependencies:
+    "@tiptap/core" "^2.27.1"
+    "@tiptap/extension-blockquote" "^2.27.1"
+    "@tiptap/extension-bold" "^2.27.1"
+    "@tiptap/extension-bullet-list" "^2.27.1"
+    "@tiptap/extension-code" "^2.27.1"
+    "@tiptap/extension-code-block" "^2.27.1"
+    "@tiptap/extension-document" "^2.27.1"
+    "@tiptap/extension-dropcursor" "^2.27.1"
+    "@tiptap/extension-gapcursor" "^2.27.1"
+    "@tiptap/extension-hard-break" "^2.27.1"
+    "@tiptap/extension-heading" "^2.27.1"
+    "@tiptap/extension-history" "^2.27.1"
+    "@tiptap/extension-horizontal-rule" "^2.27.1"
+    "@tiptap/extension-italic" "^2.27.1"
+    "@tiptap/extension-list-item" "^2.27.1"
+    "@tiptap/extension-ordered-list" "^2.27.1"
+    "@tiptap/extension-paragraph" "^2.27.1"
+    "@tiptap/extension-strike" "^2.27.1"
+    "@tiptap/extension-text" "^2.27.1"
+    "@tiptap/extension-text-style" "^2.27.1"
+    "@tiptap/pm" "^2.27.1"
+
+"@tiptap/suggestion@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.27.1.tgz#9e3de78ef12d335e1051e37dbc559d948b311221"
+  integrity sha512-yTy75ZMYgVWM18cl7YxLqMJ7TorQTGysSd1aKmBA9qd8uzYlvLMmHKE9qBDxM9HXODBz1DA/BLLm9esv2enmFw==
+
+"@tiptap/vue-3@^2.0.4":
   version "2.26.2"
   resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.26.2.tgz#ff095d73502a7ab199237467a7bf8b3eaebd6da8"
   integrity sha512-kAgbr9VFjTMLSbHbP4EbDdST1viL0OKxJdLqnblpIDzJ6gH9RdOBrQTsLMPCJ8QNs3LeFvDMTPpFzaPSoKSHWA==
@@ -1021,11 +1406,38 @@
     "@tiptap/extension-bubble-menu" "^2.26.2"
     "@tiptap/extension-floating-menu" "^2.26.2"
 
-"@types/estree@1.0.8":
+"@tiptap/vue-3@^2.26.1":
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.27.1.tgz#c43986457f93bde997efb67d1c868067c3e3e407"
+  integrity sha512-1D0gTlGBeDmrl+APm/JKoNs/KnW5PecpD1PbQmg2GEHVxVZNeIUpG48D/V5uTIiRwJsDx3PMd8AmsZs1QS6GLw==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.27.1"
+    "@tiptap/extension-floating-menu" "^2.27.1"
+
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
+"@types/estree@1.0.8", "@types/estree@^1.0.0":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
+"@types/flexsearch@^0.7.6":
+  version "0.7.42"
+  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.42.tgz#4c3a551f4c78db330a9a1d9e419eb8f100f80bbb"
+  integrity sha512-FdKaw3dPgcCvqU9w8SGgqx8PrxFF2EKySRhEj1nc45HNe/2cBLff3pF52C67hzeUbNhq49t7XRIIibBd41vcIg==
+  dependencies:
+    flexsearch "*"
+
+"@types/fs-extra@^9.0.13":
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
+  integrity sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/hast@^3.0.0":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
@@ -1038,11 +1450,19 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/linkify-it@^5":
+"@types/linkify-it@*", "@types/linkify-it@^5":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
+"@types/markdown-it@^12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
+  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+
 "@types/markdown-it@^14.0.0":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
@@ -1051,7 +1471,7 @@
     "@types/linkify-it" "^5"
     "@types/mdurl" "^2"
 
-"@types/mdurl@^2":
+"@types/mdurl@*", "@types/mdurl@^2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
@@ -1078,6 +1498,16 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.10.tgz#277a542aff6776d8a9b15f2ac682a663e3e94bbd"
   integrity sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==
 
+"@types/statuses@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/statuses/-/statuses-2.0.6.tgz#66748315cc9a96d63403baa8671b2c124f8633aa"
+  integrity sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==
+
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/unist@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
@@ -1105,11 +1535,89 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
+"@vexip-ui/hooks@^2.8.0":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@vexip-ui/hooks/-/hooks-2.9.3.tgz#4a713f22c3e9e013695609e1c9857f299c14b9f8"
+  integrity sha512-DrGlwSa0P0KQ98RU0MrQ4+KcItZDaejAJISv3iT6T6/E2ly4z7c2dzuNzn5Wk7y4FYnkXDfrf2UFNv7EDw8GJg==
+  dependencies:
+    "@floating-ui/dom" "^1.7.0"
+    "@juggle/resize-observer" "^3.4.0"
+    "@vexip-ui/utils" "2.16.4"
+
+"@vexip-ui/utils@2.16.4", "@vexip-ui/utils@^2.16.1":
+  version "2.16.4"
+  resolved "https://registry.yarnpkg.com/@vexip-ui/utils/-/utils-2.16.4.tgz#3429376a8f9e88040e969c21f14e70fe25d36127"
+  integrity sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==
+
 "@vitejs/plugin-vue@5":
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
   integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
 
+"@vitejs/plugin-vue@^4.0.0":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
+
+"@vitest/expect@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.9.tgz#b566ea20d58ea6578d8dc37040d6c1a47ebe5ff8"
+  integrity sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==
+  dependencies:
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
+    chai "^5.1.2"
+    tinyrainbow "^1.2.0"
+
+"@vitest/mocker@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.9.tgz#36243b27351ca8f4d0bbc4ef91594ffd2dc25ef5"
+  integrity sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==
+  dependencies:
+    "@vitest/spy" "2.1.9"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.12"
+
+"@vitest/pretty-format@2.1.9", "@vitest/pretty-format@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.9.tgz#434ff2f7611689f9ce70cd7d567eceb883653fdf"
+  integrity sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==
+  dependencies:
+    tinyrainbow "^1.2.0"
+
+"@vitest/runner@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.9.tgz#cc18148d2d797fd1fd5908d1f1851d01459be2f6"
+  integrity sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==
+  dependencies:
+    "@vitest/utils" "2.1.9"
+    pathe "^1.1.2"
+
+"@vitest/snapshot@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.9.tgz#24260b93f798afb102e2dcbd7e61c6dfa118df91"
+  integrity sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==
+  dependencies:
+    "@vitest/pretty-format" "2.1.9"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+
+"@vitest/spy@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.9.tgz#cb28538c5039d09818b8bfa8edb4043c94727c60"
+  integrity sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==
+  dependencies:
+    tinyspy "^3.0.2"
+
+"@vitest/utils@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.9.tgz#4f2486de8a54acf7ecbf2c5c24ad7994a680a6c1"
+  integrity sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==
+  dependencies:
+    "@vitest/pretty-format" "2.1.9"
+    loupe "^3.1.2"
+    tinyrainbow "^1.2.0"
+
 "@vue/compiler-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.15.tgz#7cbda69429490f4ec0f68126dd0d6eae050dd01c"
@@ -1132,6 +1640,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.1"
 
+"@vue/compiler-core@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.25.tgz#7ffb658d7919348baad8c491eb5b948ee8e44108"
+  integrity sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==
+  dependencies:
+    "@babel/parser" "^7.28.5"
+    "@vue/shared" "3.5.25"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.15.tgz#2de7fec1a685c236585a4a1fb12cc586d7f0ffef"
@@ -1148,6 +1667,14 @@
     "@vue/compiler-core" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/compiler-dom@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz#dd799ac2474cda54303039310b8994f0cfb40957"
+  integrity sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==
+  dependencies:
+    "@vue/compiler-core" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/compiler-sfc@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.15.tgz#d45a5c5171d8823c59725d31af406693c8816195"
@@ -1178,6 +1705,21 @@
     postcss "^8.5.6"
     source-map-js "^1.2.1"
 
+"@vue/compiler-sfc@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz#30377920c3869c3bb32111aa4aefad53921831ad"
+  integrity sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==
+  dependencies:
+    "@babel/parser" "^7.28.5"
+    "@vue/compiler-core" "3.5.25"
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/compiler-ssr" "3.5.25"
+    "@vue/shared" "3.5.25"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.21"
+    postcss "^8.5.6"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-ssr@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.15.tgz#b6ffbb19ff7126fc0e60cbf9c4ca34d9a9ce9fb2"
@@ -1194,6 +1736,14 @@
     "@vue/compiler-dom" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/compiler-ssr@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.25.tgz#51dd89b88a1e044d1beab158c91a29963d28eb96"
+  integrity sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==
+  dependencies:
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
@@ -1213,6 +1763,13 @@
   dependencies:
     "@vue/shared" "3.5.22"
 
+"@vue/reactivity@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.25.tgz#2420fa02022dab3373033c955802b9cdab5435ad"
+  integrity sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==
+  dependencies:
+    "@vue/shared" "3.5.25"
+
 "@vue/runtime-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.15.tgz#0accac4b441bb4aa00f58ba353b6f61e83f45202"
@@ -1229,6 +1786,14 @@
     "@vue/reactivity" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/runtime-core@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.25.tgz#5e524db201b419db6f091db440452fe4e49efdee"
+  integrity sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==
+  dependencies:
+    "@vue/reactivity" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/runtime-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.15.tgz#048b725069f6d3fe5002e53eba118466d1fbec84"
@@ -1249,6 +1814,16 @@
     "@vue/shared" "3.5.22"
     csstype "^3.1.3"
 
+"@vue/runtime-dom@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.25.tgz#ebd9815f39ee70fe32698c615cc09bda604e4e06"
+  integrity sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==
+  dependencies:
+    "@vue/reactivity" "3.5.25"
+    "@vue/runtime-core" "3.5.25"
+    "@vue/shared" "3.5.25"
+    csstype "^3.1.3"
+
 "@vue/server-renderer@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.15.tgz#c1e8597e4bec8ea0b323c32dc032aa5c1f2983f4"
@@ -1265,6 +1840,14 @@
     "@vue/compiler-ssr" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/server-renderer@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.25.tgz#ca67ac93cb84dd3c3bc2f89c046a18ab04f7cc96"
+  integrity sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/shared@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.15.tgz#4c633a0e66f38119e38eecf340b4a65b0bad7192"
@@ -1275,6 +1858,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.22.tgz#9d56a1644a3becb8af1e34655928b0e288d827f8"
   integrity sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==
 
+"@vue/shared@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.25.tgz#21edcff133a5a04f72c4e4c6142260963fe5afbe"
+  integrity sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==
+
 "@vueuse/components@^10.2.1":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
@@ -1328,16 +1916,43 @@
   dependencies:
     vue "^3.5.13"
 
+abab@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+acorn-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
+  integrity sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==
+  dependencies:
+    acorn "^8.1.0"
+    acorn-walk "^8.0.2"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.15.0, acorn@^8.9.0:
+acorn-walk@^8.0.2:
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
+  integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
+  dependencies:
+    acorn "^8.11.0"
+
+acorn@^8.1.0, acorn@^8.11.0, acorn@^8.14.1, acorn@^8.15.0, acorn@^8.8.1, acorn@^8.9.0:
   version "8.15.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -1368,6 +1983,13 @@ ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.21.3"
 
+ansi-escapes@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-7.2.0.tgz#31b25afa3edd3efc09d98c2fee831d460ff06b49"
+  integrity sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==
+  dependencies:
+    environment "^1.0.0"
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -1385,7 +2007,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ansi-styles@^6.1.0:
+ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
   integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
@@ -1413,6 +2035,13 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -1505,6 +2134,11 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
+assertion-error@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
+  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
+
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -1530,6 +2164,17 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+autoprefixer@^10.4.13:
+  version "10.4.23"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.23.tgz#c6aa6db8e7376fcd900f9fd79d143ceebad8c4e6"
+  integrity sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==
+  dependencies:
+    browserslist "^4.28.1"
+    caniuse-lite "^1.0.30001760"
+    fraction.js "^5.3.4"
+    picocolors "^1.1.1"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^10.4.2:
   version "10.4.21"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.21.tgz#77189468e7a8ad1d9a37fbc08efc9f480cf0a95d"
@@ -1574,6 +2219,11 @@ baseline-browser-mapping@^2.8.3:
   resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz#4d3606fdb1738fd902da40c5fcc0595e87cec044"
   integrity sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==
 
+baseline-browser-mapping@^2.9.0:
+  version "2.9.7"
+  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz#d36ce64f2a2c468f6f743c8db495d319120007db"
+  integrity sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -1586,6 +2236,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+birpc@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.1.1.tgz#10b243ffe5a21ccaf4cbaf5a09a6f0cc035c4312"
+  integrity sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==
+
 bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -1643,6 +2298,17 @@ browserslist@^4.24.4:
     node-releases "^2.0.21"
     update-browserslist-db "^1.1.3"
 
+browserslist@^4.28.1:
+  version "4.28.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.1.tgz#7f534594628c53c63101079e27e40de490456a95"
+  integrity sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==
+  dependencies:
+    baseline-browser-mapping "^2.9.0"
+    caniuse-lite "^1.0.30001759"
+    electron-to-chromium "^1.5.263"
+    node-releases "^2.0.27"
+    update-browserslist-db "^1.2.0"
+
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -1656,6 +2322,11 @@ buffer@^5.5.0, buffer@^5.7.1:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+cac@^6.7.14:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
 cachedir@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.4.0.tgz#7fef9cf7367233d7c88068fe6e34ed0d355a610d"
@@ -1692,6 +2363,14 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
@@ -1702,11 +2381,36 @@ caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001741:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz#ab2a36e3b6ed5bfb268adc002c476aab6513f859"
   integrity sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==
 
+caniuse-lite@^1.0.30001759, caniuse-lite@^1.0.30001760:
+  version "1.0.30001760"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz#bdd1960fafedf8d5f04ff16e81460506ff9b798f"
+  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
+
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
+chai@^5.1.2:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-5.3.3.tgz#dd3da955e270916a4bd3f625f4b919996ada7e06"
+  integrity sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==
+  dependencies:
+    assertion-error "^2.0.1"
+    check-error "^2.1.1"
+    deep-eql "^5.0.1"
+    loupe "^3.1.0"
+    pathval "^2.0.0"
+
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -1715,12 +2419,40 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^5.4.1:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.6.2.tgz#b1238b6e23ea337af71c7f8a295db5af0c158aea"
+  integrity sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
+
+change-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
+  dependencies:
+    camel-case "^4.1.2"
+    capital-case "^1.0.4"
+    constant-case "^3.0.4"
+    dot-case "^3.0.4"
+    header-case "^2.0.4"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.2"
+    path-case "^3.0.4"
+    sentence-case "^3.0.4"
+    snake-case "^3.0.4"
+    tslib "^2.0.3"
+
+check-error@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
+  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-chokidar@^3.6.0:
+chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -1757,6 +2489,13 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-cursor@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
+  integrity sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
+  dependencies:
+    restore-cursor "^5.0.0"
+
 cli-spinners@^2.5.0:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
@@ -1779,6 +2518,28 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^7.0.0"
+
+cli-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
+  integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -1809,7 +2570,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^2.0.16:
+colorette@^2.0.16, colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
@@ -1821,6 +2582,11 @@ combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-13.1.0.tgz#776167db68c78f38dcce1f9b8d7b8b9a488abf46"
+  integrity sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -1831,11 +2597,6 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^9.0.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
-  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
-
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -1856,6 +2617,30 @@ confbox@^0.2.2:
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.2.tgz#8652f53961c74d9e081784beed78555974a9c110"
   integrity sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==
 
+connect@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
+  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.1.2"
+    parseurl "~1.3.3"
+    utils-merge "1.0.1"
+
+constant-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case "^2.0.2"
+
+cookie@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.1.1.tgz#3bb9bdfc82369db9c2f69c93c9c3ceb310c88b3c"
+  integrity sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==
+
 core-js@^3.1.3:
   version "3.45.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.45.1.tgz#5810e04a1b4e9bc5ddaa4dd12e702ff67300634d"
@@ -1871,7 +2656,7 @@ crelt@^1.0.0, crelt@^1.0.5, crelt@^1.0.6:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.6:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3, cross-spawn@^7.0.6:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
   integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
@@ -1885,6 +2670,23 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1946,6 +2748,15 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-urls@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
+  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+
 data-view-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
@@ -1978,20 +2789,27 @@ dayjs@^1.10.4, dayjs@^1.11.13:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.18.tgz#835fa712aac52ab9dec8b1494098774ed7070a11"
   integrity sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
 
-debug@^3.1.0, debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
-    ms "^2.1.1"
+    ms "2.0.0"
 
-debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.1:
+debug@4, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.7, debug@^4.4.0, debug@^4.4.1:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
   dependencies:
     ms "^2.1.3"
 
+debug@^3.1.0, debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
 debug@~4.3.1, debug@~4.3.2:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
@@ -1999,6 +2817,16 @@ debug@~4.3.1, debug@~4.3.2:
   dependencies:
     ms "^2.1.3"
 
+decimal.js@^10.4.2:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
+  integrity sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==
+
+deep-eql@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
+  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -2029,7 +2857,7 @@ define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.1.4:
+defu@^6.1.3, defu@^6.1.4:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
   integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
@@ -2051,11 +2879,23 @@ devlop@^1.0.0:
   dependencies:
     dequal "^2.0.0"
 
+diacritics@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1"
+  integrity sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 dlv@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -2075,7 +2915,29 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+domexception@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
+  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
+  dependencies:
+    webidl-conversions "^7.0.0"
+
+dompurify@^3.2.6:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.3.1.tgz#c7e1ddebfe3301eacd6c0c12a4af284936dbbb86"
+  integrity sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
   integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
@@ -2105,11 +2967,26 @@ echarts@^5.6.0:
     tslib "2.3.0"
     zrender "5.6.1"
 
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
 electron-to-chromium@^1.5.218:
   version "1.5.224"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz#dbc6827cb3d41d7293811d6d8af53114804e0ed1"
   integrity sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg==
 
+electron-to-chromium@^1.5.263:
+  version "1.5.267"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz#5d84f2df8cdb6bfe7e873706bb21bd4bfb574dc7"
+  integrity sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==
+
+emoji-regex@^10.3.0:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
+  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2120,6 +2997,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
 end-of-stream@^1.1.0:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c"
@@ -2156,6 +3038,21 @@ entities@^4.4.0, entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+entities@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
+  integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
+
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
+environment@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
+  integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
+
 es-abstract@^1.23.2, es-abstract@^1.23.5, es-abstract@^1.23.9, es-abstract@^1.24.0:
   version "1.24.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.0.tgz#c44732d2beb0acc1ed60df840869e3106e7af328"
@@ -2226,6 +3123,11 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
+es-module-lexer@^1.5.4:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz#9159601561880a85f2734560a9099b2c31e5372a"
+  integrity sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
+
 es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
@@ -2288,11 +3190,16 @@ esbuild@^0.21.3:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-escalade@^3.2.0:
+escalade@^3.1.1, escalade@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -2303,6 +3210,22 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
+escodegen@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -2424,6 +3347,11 @@ espree@^9.3.1, espree@^9.6.0, espree@^9.6.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.1"
 
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esquery@^1.4.0, esquery@^1.4.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
@@ -2448,6 +3376,13 @@ estree-walker@^2.0.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+estree-walker@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -2458,6 +3393,11 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
+eventemitter3@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 execa@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
@@ -2473,6 +3413,21 @@ execa@4.1.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
+  integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^8.0.1"
+    human-signals "^5.0.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^4.1.0"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -2480,11 +3435,23 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
+expect-type@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-1.3.0.tgz#0d58ed361877a31bbc4dd6cf71bbfef7faf6bd68"
+  integrity sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==
+
 exsolve@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.7.tgz#3b74e4c7ca5c5f9a19c3626ca857309fa99f9e9e"
   integrity sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
 
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+  dependencies:
+    is-extendable "^0.1.0"
+
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2516,7 +3483,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.2:
+fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -2585,6 +3552,19 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+finalhandler@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -2607,6 +3587,16 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
+flexsearch@*:
+  version "0.8.212"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.8.212.tgz#b9509af778a991b938292e36fe0809a4ece4b940"
+  integrity sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==
+
+flexsearch@0.7.21:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.21.tgz#0f5ede3f2aae67ddc351efbe3b24b69d29e9d48b"
+  integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
+
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
@@ -2627,6 +3617,17 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
+form-data@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"
+  integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
 form-data@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
@@ -2643,57 +3644,19 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@0.1.152:
-  version "0.1.152"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.152.tgz#b1c9a9a85d2ea2cc380ff87c0ca374e99dae14ef"
-  integrity sha512-sV87qtPCGbm9XDvyff7uzxtaoXuXA5bknocDbsUi19FkX9CNow1xTTktelw/ujzL6FpNZS/SxBoVcos7obPNnQ==
+fraction.js@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
+  integrity sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==
+
+fs-extra@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
   dependencies:
-    "@floating-ui/vue" "^1.1.6"
-    "@headlessui/vue" "^1.7.14"
-    "@popperjs/core" "^2.11.2"
-    "@tailwindcss/forms" "^0.5.3"
-    "@tailwindcss/typography" "^0.5.16"
-    "@tiptap/core" "^2.11.7"
-    "@tiptap/extension-code-block" "^2.11.9"
-    "@tiptap/extension-code-block-lowlight" "^2.11.5"
-    "@tiptap/extension-color" "^2.0.3"
-    "@tiptap/extension-heading" "^2.12.0"
-    "@tiptap/extension-highlight" "^2.0.3"
-    "@tiptap/extension-image" "^2.0.3"
-    "@tiptap/extension-link" "^2.0.3"
-    "@tiptap/extension-mention" "^2.0.3"
-    "@tiptap/extension-placeholder" "^2.0.3"
-    "@tiptap/extension-table" "^2.0.3"
-    "@tiptap/extension-table-cell" "^2.0.3"
-    "@tiptap/extension-table-header" "^2.0.3"
-    "@tiptap/extension-table-row" "^2.0.3"
-    "@tiptap/extension-text-align" "^2.0.3"
-    "@tiptap/extension-text-style" "^2.0.3"
-    "@tiptap/extension-typography" "^2.0.3"
-    "@tiptap/pm" "^2.0.3"
-    "@tiptap/starter-kit" "^2.0.3"
-    "@tiptap/suggestion" "^2.0.3"
-    "@tiptap/vue-3" "^2.0.3"
-    "@vueuse/core" "^10.4.1"
-    dayjs "^1.11.13"
-    echarts "^5.6.0"
-    feather-icons "^4.28.0"
-    idb-keyval "^6.2.0"
-    lowlight "^3.3.0"
-    lucide-static "^0.479.0"
-    ora "5.4.1"
-    prettier "^3.3.2"
-    prosemirror-model "^1.25.1"
-    prosemirror-state "^1.4.3"
-    prosemirror-view "^1.39.2"
-    radix-vue "^1.5.3"
-    reka-ui "^2.0.2"
-    showdown "^2.1.0"
-    socket.io-client "^4.5.1"
-    tippy.js "^6.3.7"
-    typescript "^5.0.2"
-    unplugin-icons "^22.1.0"
-    unplugin-vue-components "^28.4.1"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
 
 fs-extra@^9.1.0:
   version "9.1.0"
@@ -2737,6 +3700,16 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
+  integrity sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
+
 get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
@@ -2768,6 +3741,11 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-8.0.1.tgz#def9dfd71742cd7754a7761ed43749a27d02eca2"
+  integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
+
 get-symbol-description@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
@@ -2856,6 +3834,17 @@ globalthis@^1.0.4:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
+globby@^13.2.2:
+  version "13.2.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
+  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.3.0"
+    ignore "^5.2.4"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 gopd@^1.0.1, gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
@@ -2871,6 +3860,30 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+graphql@^16.12.0:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.12.0.tgz#28cc2462435b1ac3fdc6976d030cef83a0c13ac7"
+  integrity sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==
+
+gray-matter@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+  dependencies:
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
+grid-layout-plus@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/grid-layout-plus/-/grid-layout-plus-1.1.1.tgz#129f1dd6ba555a1d319d73e415821ae4fb6c35c8"
+  integrity sha512-7CWehJubrVC8Ps5QFUlnDsp0kiREvKfi3Pdjp21EyY8BNzSusqI3Utcxvu1Y9UUKe3YExvbhJzIxHK6rorbRaQ==
+  dependencies:
+    "@vexip-ui/hooks" "^2.8.0"
+    "@vexip-ui/utils" "^2.16.1"
+    interactjs "^1.10.27"
+
 has-bigints@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
@@ -2914,11 +3927,77 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-highlight.js@~11.11.0:
+header-case@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
+headers-polyfill@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-4.0.3.tgz#922a0155de30ecc1f785bcf04be77844ca95ad07"
+  integrity sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==
+
+highlight.js@^11.11.1, highlight.js@~11.11.0:
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
   integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
 
+histoire@^0.17.17:
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/histoire/-/histoire-0.17.17.tgz#3325344d0e3342938de38175ad82d91dec4fd235"
+  integrity sha512-DAwY4sgIoP7NGE5ldaws2d3RWz4OOQcwhS8elRMiA2euqzLvDU2IXm+ZjeDDFVtGkvmQNQyfZBDKLCLHfRkSUg==
+  dependencies:
+    "@akryum/tinypool" "^0.3.1"
+    "@histoire/app" "^0.17.17"
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    "@types/flexsearch" "^0.7.6"
+    "@types/markdown-it" "^12.2.3"
+    birpc "^0.1.1"
+    change-case "^4.1.2"
+    chokidar "^3.5.3"
+    connect "^3.7.0"
+    defu "^6.1.3"
+    diacritics "^1.3.0"
+    flexsearch "0.7.21"
+    fs-extra "^10.1.0"
+    globby "^13.2.2"
+    gray-matter "^4.0.3"
+    jiti "^1.21.0"
+    jsdom "^20.0.3"
+    markdown-it "^12.3.2"
+    markdown-it-anchor "^8.6.7"
+    markdown-it-attrs "^4.1.6"
+    markdown-it-emoji "^2.0.2"
+    micromatch "^4.0.5"
+    mrmime "^1.0.1"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    sade "^1.8.1"
+    shiki-es "^0.2.0"
+    sirv "^2.0.3"
+    vite-node "^0.34.6"
+
+html-encoding-sniffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+  dependencies:
+    whatwg-encoding "^2.0.0"
+
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
 http-signature@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
@@ -2928,11 +4007,31 @@ http-signature@~1.4.0:
     jsprim "^2.0.2"
     sshpk "^1.18.0"
 
+https-proxy-agent@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+human-signals@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
+  integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
+
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 idb-keyval@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.2.tgz#b0171b5f73944854a3291a5cdba8e12768c4854a"
@@ -2943,7 +4042,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -2984,6 +4083,13 @@ ini@2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
+interactjs@^1.10.27:
+  version "1.10.27"
+  resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.10.27.tgz#16499aba4987a5ccfdaddca7d1ba7bb1118e14d0"
+  integrity sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==
+  dependencies:
+    "@interactjs/types" "1.10.27"
+
 internal-slot@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
@@ -3064,6 +4170,11 @@ is-date-object@^1.0.5, is-date-object@^1.1.0:
     call-bound "^1.0.2"
     has-tostringtag "^1.0.2"
 
+is-extendable@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3081,6 +4192,18 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-fullwidth-code-point@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz#046b2a6d4f6b156b2233d3207d4b5a9783999b98"
+  integrity sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==
+  dependencies:
+    get-east-asian-width "^1.3.1"
+
 is-generator-function@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
@@ -3121,6 +4244,11 @@ is-negative-zero@^2.0.3:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
+is-node-process@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-node-process/-/is-node-process-1.2.0.tgz#ea02a1b90ddb3934a19aea414e88edef7e11d134"
+  integrity sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==
+
 is-number-object@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
@@ -3139,6 +4267,11 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
 is-regex@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
@@ -3166,6 +4299,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
@@ -3244,11 +4382,24 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.6:
+jiti@^1.21.0, jiti@^1.21.6, jiti@^1.21.7:
   version "1.21.7"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
   integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
+js-tokens@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
+  integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
+
+js-yaml@^3.13.1:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.2.tgz#77485ce1dd7f33c061fd1b16ecea23b55fcb04b0"
+  integrity sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -3261,6 +4412,38 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
+  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
+  dependencies:
+    abab "^2.0.6"
+    acorn "^8.8.1"
+    acorn-globals "^7.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.4.2"
+    domexception "^4.0.0"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.2"
+    parse5 "^7.1.1"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.11.0"
+    xml-name-validator "^4.0.0"
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -3319,11 +4502,24 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
 kolorist@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 
+launch-editor@^2.6.1:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.12.0.tgz#cc740f4e0263a6b62ead2485f9896e545321f817"
+  integrity sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==
+  dependencies:
+    picocolors "^1.1.1"
+    shell-quote "^1.8.3"
+
 lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -3337,7 +4533,7 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^3.0.0, lilconfig@^3.1.3:
+lilconfig@^3.0.0, lilconfig@^3.1.1, lilconfig@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
@@ -3347,6 +4543,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
+  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 linkify-it@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
@@ -3354,11 +4557,27 @@ linkify-it@^5.0.0:
   dependencies:
     uc.micro "^2.0.0"
 
-linkifyjs@^4.2.0:
+linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
+lint-staged@>=10, lint-staged@^15.2.10:
+  version "15.5.2"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
+  integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==
+  dependencies:
+    chalk "^5.4.1"
+    commander "^13.1.0"
+    debug "^4.4.0"
+    execa "^8.0.1"
+    lilconfig "^3.1.3"
+    listr2 "^8.2.5"
+    micromatch "^4.0.8"
+    pidtree "^0.6.0"
+    string-argv "^0.3.2"
+    yaml "^2.7.0"
+
 listr2@^3.8.3:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
@@ -3373,6 +4592,18 @@ listr2@^3.8.3:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+listr2@^8.2.5:
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.3.3.tgz#815fc8f738260ff220981bf9e866b3e11e8121bf"
+  integrity sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==
+  dependencies:
+    cli-truncate "^4.0.0"
+    colorette "^2.0.20"
+    eventemitter3 "^5.0.1"
+    log-update "^6.1.0"
+    rfdc "^1.4.1"
+    wrap-ansi "^9.0.0"
+
 local-pkg@^1.1.1, local-pkg@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-1.1.2.tgz#c03d208787126445303f8161619dc701afa4abb5"
@@ -3422,6 +4653,29 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+log-update@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.1.0.tgz#1a04ff38166f94647ae1af562f4bd6a15b1b7cd4"
+  integrity sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
+  dependencies:
+    ansi-escapes "^7.0.0"
+    cli-cursor "^5.0.0"
+    slice-ansi "^7.1.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
+
+loupe@^3.1.0, loupe@^3.1.2:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.2.1.tgz#0095cf56dc5b7a9a7c08ff5b1a8796ec8ad17e76"
+  integrity sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==
+
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lowlight@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.3.0.tgz#007b8a5bfcfd27cc65b96246d2de3e9dd4e23c6c"
@@ -3436,10 +4690,17 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
-lucide-static@^0.479.0:
-  version "0.479.0"
-  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.479.0.tgz#820318a03ab207a6242520aaf2156ff3384fd3e2"
-  integrity sha512-E+w3/8lKFpey3lZNKZfzHQGX+t/CH/afpPDdQxjBgStZ2bXY+CxI5KFX9TW818gYndLjV43fZJ7FqAO9kTCK4A==
+lucide-static@^0.535.0:
+  version "0.535.0"
+  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.535.0.tgz#3d8ad25360d166a4f584d97f2c08fd9b24be30d7"
+  integrity sha512-wlYTSPpeyMjLjQ5jgSAENQwVfURVf2XHV5TDp8YPCJBEyWz+FJGuGB5LYBgOFvWIDOMW+AIoiA8sNd8My/nxlw==
+
+magic-string@^0.30.12, magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
 
 magic-string@^0.30.17, magic-string@^0.30.19:
   version "0.30.19"
@@ -3448,6 +4709,32 @@ magic-string@^0.30.17, magic-string@^0.30.19:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.5"
 
+markdown-it-anchor@^8.6.7:
+  version "8.6.7"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz#ee6926daf3ad1ed5e4e3968b1740eef1c6399634"
+  integrity sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==
+
+markdown-it-attrs@^4.1.6:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz#1e1f9bd2c87276d8f4ed74ad4268df428b7deee6"
+  integrity sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==
+
+markdown-it-emoji@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.2.tgz#cd42421c2fda1537d9cc12b9923f5c8aeb9029c8"
+  integrity sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
+
+markdown-it@^12.3.2:
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
+  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdown-it@^14.0.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
@@ -3460,11 +4747,21 @@ markdown-it@^14.0.0:
     punycode.js "^2.3.1"
     uc.micro "^2.1.0"
 
+marked@^15.0.12:
+  version "15.0.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-15.0.12.tgz#30722c7346e12d0a2d0207ab9b0c4f0102d86c4e"
+  integrity sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -3475,12 +4772,12 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.8:
+micromatch@^4.0.5, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -3505,6 +4802,16 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
 mini-svg-data-uri@^1.2.3:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
@@ -3534,7 +4841,7 @@ minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-mlly@^1.7.4:
+mlly@^1.4.0, mlly@^1.7.4:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.0.tgz#e074612b938af8eba1eaf43299cbc89cb72d824e"
   integrity sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==
@@ -3544,11 +4851,60 @@ mlly@^1.7.4:
     pkg-types "^1.3.1"
     ufo "^1.6.1"
 
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+mrmime@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
+mrmime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
+  integrity sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+msw@^2.7.0:
+  version "2.12.4"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-2.12.4.tgz#9a7045a6ef831826f57f4050552ca41dd21fe0d4"
+  integrity sha512-rHNiVfTyKhzc0EjoXUBVGteNKBevdjOlVC6GlIRXpy+/3LHEIGRovnB5WPjcvmNODVQ1TNFnoa7wsGbd0V3epg==
+  dependencies:
+    "@inquirer/confirm" "^5.0.0"
+    "@mswjs/interceptors" "^0.40.0"
+    "@open-draft/deferred-promise" "^2.2.0"
+    "@types/statuses" "^2.0.6"
+    cookie "^1.0.2"
+    graphql "^16.12.0"
+    headers-polyfill "^4.0.2"
+    is-node-process "^1.2.0"
+    outvariant "^1.4.3"
+    path-to-regexp "^6.3.0"
+    picocolors "^1.1.1"
+    rettime "^0.7.0"
+    statuses "^2.0.2"
+    strict-event-emitter "^0.5.1"
+    tough-cookie "^6.0.0"
+    type-fest "^5.2.0"
+    until-async "^3.0.2"
+    yargs "^17.7.2"
+
+mute-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-2.0.0.tgz#a5446fc0c512b71c83c44d908d5c7b7b4c493b2b"
+  integrity sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==
+
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -3573,11 +4929,24 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-releases@^2.0.21:
   version "2.0.21"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.21.tgz#f59b018bc0048044be2d4c4c04e4c8b18160894c"
   integrity sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==
 
+node-releases@^2.0.27:
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.27.tgz#eedca519205cf20f650f61d56b070db111231e4e"
+  integrity sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -3595,6 +4964,13 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"
+  integrity sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
+  dependencies:
+    path-key "^4.0.0"
+
 nth-check@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -3602,6 +4978,11 @@ nth-check@^2.1.1:
   dependencies:
     boolbase "^1.0.0"
 
+nwsapi@^2.2.2:
+  version "2.2.23"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.23.tgz#59712c3a88e6de2bb0b6ccc1070397267019cf6c"
+  integrity sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==
+
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -3668,6 +5049,13 @@ ohash@^2.0.11:
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-2.0.11.tgz#60b11e8cff62ca9dee88d13747a5baa145f5900b"
   integrity sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==
 
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
+  dependencies:
+    ee-first "1.1.1"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -3682,6 +5070,20 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
+onetime@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-7.0.0.tgz#9f16c92d8c9ef5120e3acd9dd9957cceecc1ab60"
+  integrity sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
+  dependencies:
+    mimic-function "^5.0.0"
+
 opentype.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-1.3.4.tgz#1c0e72e46288473cc4a4c6a2dc60fd7fe6020d77"
@@ -3727,6 +5129,11 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
 
+outvariant@^1.4.0, outvariant@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
+  integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
+
 own-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
@@ -3767,6 +5174,14 @@ package-manager-detector@^1.3.0:
   resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-1.3.0.tgz#b42d641c448826e03c2b354272456a771ce453c0"
   integrity sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==
 
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -3774,6 +5189,34 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse5@^7.1.1:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.3.0.tgz#d7e224fa72399c7a175099f45fc2ad024b05ec05"
+  integrity sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==
+  dependencies:
+    entities "^6.0.0"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -3789,6 +5232,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -3802,11 +5250,31 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
+path-to-regexp@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.3.0.tgz#2b6a26a337737a8e1416f9272ed0766b1c0389f4"
+  integrity sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+pathe@^1.1.1, pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 pathe@^2.0.1, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
   integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
 
+pathval@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.1.tgz#8855c5a2899af072d6ac05d11e46045ad0dc605d"
+  integrity sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -3817,7 +5285,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^1.1.1:
+picocolors@^1.0.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -3827,11 +5295,16 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^4.0.3:
+picomatch@^4.0.2, picomatch@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
+pidtree@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
+  integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
+
 pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -3859,7 +5332,7 @@ pkg-types@^1.3.1:
     mlly "^1.7.4"
     pathe "^2.0.1"
 
-pkg-types@^2.3.0:
+pkg-types@^2.1.0, pkg-types@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-2.3.0.tgz#037f2c19bd5402966ff6810e32706558cb5b5726"
   integrity sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==
@@ -3897,6 +5370,13 @@ postcss-load-config@^4.0.2:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
+"postcss-load-config@^4.0.2 || ^5.0 || ^6.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz#6fd7dcd8ae89badcf1b2d644489cbabf83aa8096"
+  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
+  dependencies:
+    lilconfig "^3.1.1"
+
 postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
@@ -3925,7 +5405,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
+postcss@^8.4.21, postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
   integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -3939,6 +5419,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
+  integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
+
 prettier-plugin-tailwindcss@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz#e9c0356680331f909a86fefe8fc2b247c21e23a2"
@@ -4051,7 +5536,7 @@ prosemirror-menu@^1.2.4:
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.23.0, prosemirror-model@^1.25.0, prosemirror-model@^1.25.1:
+prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.23.0, prosemirror-model@^1.25.0:
   version "1.25.3"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.25.3.tgz#c657c60a361cb1e9c9f683d19118c0af50a6f7a9"
   integrity sha512-dY2HdaNXlARknJbrManZ1WyUtos+AP97AmvqdOQtWtrrC5g4mohVX5DTi9rXNFSk09eczLq9GuNTtq3EfMeMGA==
@@ -4109,7 +5594,7 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
   dependencies:
     prosemirror-model "^1.21.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0, prosemirror-view@^1.39.1, prosemirror-view@^1.39.2:
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0, prosemirror-view@^1.39.1:
   version "1.41.1"
   resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.41.1.tgz#291c275bb0972bc1cf197ae10f43221ad7612695"
   integrity sha512-cViIhlt1/T5bQMINrmXh43JZcdIgdW1YkOABmIuH5gSt3/HiCZHsLN9d5GvsgzrXn2+zZ8il0kkghisusm7tSA==
@@ -4123,6 +5608,13 @@ proxy-from-env@1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
   integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==
 
+psl@^1.1.33:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
 pump@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.3.tgz#151d979f1a29668dc0025ec589a455b53282268d"
@@ -4136,7 +5628,7 @@ punycode.js@^2.3.1:
   resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
   integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
@@ -4153,6 +5645,11 @@ quansync@^0.2.11:
   resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.11.tgz#f9c3adda2e1272e4f8cf3f1457b04cbdb4ee692a"
   integrity sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -4224,10 +5721,10 @@ regexp.prototype.flags@^1.5.4:
     gopd "^1.2.0"
     set-function-name "^2.0.2"
 
-reka-ui@^2.0.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/reka-ui/-/reka-ui-2.5.1.tgz#4623b9ad0281d1747b76dffdb620496a92f7ac1d"
-  integrity sha512-QJGB3q21wQ1Kw28HhhNDpjfFe8qpePX1gK4FTBRd68XTh9aEnhR5bTJnlV0jxi8FBPh0xivZBeNFUc3jiGx7mQ==
+reka-ui@^2.5.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/reka-ui/-/reka-ui-2.6.1.tgz#08f6b8a8ee774887b6bcde3d8ea54b608acfe82c"
+  integrity sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==
   dependencies:
     "@floating-ui/dom" "^1.6.13"
     "@floating-ui/vue" "^1.1.6"
@@ -4247,6 +5744,16 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -4269,12 +5776,25 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-5.1.0.tgz#0766d95699efacb14150993f55baf0953ea1ebe7"
+  integrity sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
+  dependencies:
+    onetime "^7.0.0"
+    signal-exit "^4.1.0"
+
+rettime@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rettime/-/rettime-0.7.0.tgz#c040f1a65e396eaa4b8346dd96ed937edc79d96f"
+  integrity sha512-LPRKoHnLKd/r3dVxcwO7vhCW+orkOGj9ViueosEBK6ie89CijnfRlhaDhHq/3Hxu4CkWQtxwlBG0mzTQY6uQjw==
+
 reusify@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.1.0.tgz#0fe13b9522e1473f51b558ee796e08f11f9b489f"
   integrity sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==
 
-rfdc@^1.3.0:
+rfdc@^1.3.0, rfdc@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
@@ -4336,6 +5856,13 @@ rxjs@^7.5.1:
   dependencies:
     tslib "^2.1.0"
 
+sade@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-array-concat@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
@@ -4369,11 +5896,31 @@ safe-regex-test@^1.1.0:
     es-errors "^1.3.0"
     is-regex "^1.2.1"
 
-safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
+scule@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/scule/-/scule-1.3.0.tgz#6efbd22fd0bb801bdcc585c89266a7d2daa8fbd3"
+  integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
+
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -4384,6 +5931,15 @@ semver@^7.3.6, semver@^7.5.3, semver@^7.6.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
   integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
 
+sentence-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -4427,12 +5983,15 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-showdown@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
-  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
-  dependencies:
-    commander "^9.0.0"
+shell-quote@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
+  integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
+
+shiki-es@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/shiki-es/-/shiki-es-0.2.0.tgz#ae5bced62dca0ba46ee81149e68d428565a3e6fb"
+  integrity sha512-RbRMD+IuJJseSZljDdne9ThrUYrwBwJR04FvN4VXpfsU3MNID5VJGHLAD5je/HGThCyEKNgH+nEkSFEWKD7C3Q==
 
 side-channel-list@^1.0.0:
   version "1.0.0"
@@ -4474,16 +6033,35 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
+siginfo@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
+  integrity sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==
+
 signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-signal-exit@^4.0.1:
+signal-exit@^4.0.1, signal-exit@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+sirv@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
+  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
 slice-ansi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
@@ -4502,6 +6080,30 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
+slice-ansi@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.2.tgz#adf7be70aa6d72162d907cd0e6d5c11f507b5403"
+  integrity sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 socket.io-client@^4.5.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"
@@ -4530,6 +6132,16 @@ source-map-js@^1.2.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
+source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
 sshpk@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
@@ -4545,6 +6157,26 @@ sshpk@^1.18.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+stackback@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
+  integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==
+
+statuses@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.2.tgz#8f75eecef765b5e1cfcdc080da59409ed424e382"
+  integrity sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==
+
+statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
+std-env@^3.8.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.10.0.tgz#d810b27e3a073047b2b5e40034881f5ea6f9c83b"
+  integrity sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==
+
 stop-iteration-iterator@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
@@ -4553,7 +6185,26 @@ stop-iteration-iterator@^1.1.0:
     es-errors "^1.3.0"
     internal-slot "^1.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+strict-event-emitter@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz#1602ece81c51574ca39c6815e09f1a3e8550bd93"
+  integrity sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==
+
+string-argv@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
+  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4571,6 +6222,15 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
+string-width@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
 string.prototype.codepointat@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
@@ -4615,20 +6275,32 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
   integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
   dependencies:
     ansi-regex "^6.0.1"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -4639,11 +6311,23 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-literal@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-3.1.0.tgz#222b243dd2d49c0bcd0de8906adbd84177196032"
+  integrity sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==
+  dependencies:
+    js-tokens "^9.0.1"
+
 style-mod@^4.0.0, style-mod@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
@@ -4681,6 +6365,44 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+tagged-tag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tagged-tag/-/tagged-tag-1.0.0.tgz#a0b5917c2864cba54841495abfa3f6b13edcf4d6"
+  integrity sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==
+
+tailwindcss@^3.2.7:
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.19.tgz#af2a0a4ae302d52ebe078b6775e799e132500ee2"
+  integrity sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.7"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2 || ^5.0 || ^6.0"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
 tailwindcss@^3.3.2:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
@@ -4748,12 +6470,22 @@ tiny-inflate@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
+tinybench@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.9.0.tgz#103c9f8ba6d7237a47ab6dd1dcff77251863426b"
+  integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
+
+tinyexec@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
 tinyexec@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.0.1.tgz#70c31ab7abbb4aea0a24f55d120e5990bfa1e0b1"
   integrity sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==
 
-tinyglobby@^0.2.14:
+tinyglobby@^0.2.12, tinyglobby@^0.2.14:
   version "0.2.15"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
   integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
@@ -4761,6 +6493,21 @@ tinyglobby@^0.2.14:
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
+tinypool@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.1.1.tgz#059f2d042bd37567fbc017d3d426bdd2a2612591"
+  integrity sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==
+
+tinyrainbow@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
+  integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==
+
+tinyspy@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
+  integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
+
 tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
@@ -4773,6 +6520,11 @@ tldts-core@^6.1.86:
   resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.86.tgz#a93e6ed9d505cb54c542ce43feb14c73913265d8"
   integrity sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==
 
+tldts-core@^7.0.19:
+  version "7.0.19"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-7.0.19.tgz#9dd8a457a09b4e65c8266c029f1847fa78dead20"
+  integrity sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==
+
 tldts@^6.1.32:
   version "6.1.86"
   resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.86.tgz#087e0555b31b9725ee48ca7e77edc56115cd82f7"
@@ -4780,6 +6532,13 @@ tldts@^6.1.32:
   dependencies:
     tldts-core "^6.1.86"
 
+tldts@^7.0.5:
+  version "7.0.19"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-7.0.19.tgz#84cd7a7f04e68ec93b93b106fac038c527b99368"
+  integrity sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==
+  dependencies:
+    tldts-core "^7.0.19"
+
 tmp@~0.2.3:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.5.tgz#b06bcd23f0f3c8357b426891726d16015abfd8f8"
@@ -4792,6 +6551,21 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
+
+tough-cookie@^4.1.2:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
 tough-cookie@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.1.2.tgz#66d774b4a1d9e12dc75089725af3ac75ec31bed7"
@@ -4799,6 +6573,20 @@ tough-cookie@^5.0.0:
   dependencies:
     tldts "^6.1.32"
 
+tough-cookie@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-6.0.0.tgz#11e418b7864a2c0d874702bc8ce0f011261940e5"
+  integrity sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==
+  dependencies:
+    tldts "^7.0.5"
+
+tr46@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
+  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
+  dependencies:
+    punycode "^2.1.1"
+
 tree-kill@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -4824,7 +6612,7 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tslib@^2.0.0, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -4858,6 +6646,13 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-5.3.1.tgz#251b8d0a813c1dbccf1f9450ba5adcdf7072adc2"
+  integrity sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==
+  dependencies:
+    tagged-tag "^1.0.0"
+
 typed-array-buffer@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
@@ -4908,6 +6703,11 @@ typescript@^5.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.2.tgz#d93450cddec5154a2d5cabe3b8102b83316fb2a6"
   integrity sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
@@ -4933,11 +6733,53 @@ undici-types@~7.12.0:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.12.0.tgz#15c5c7475c2a3ba30659529f5cdb4674b622fafb"
   integrity sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==
 
+unimport@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/unimport/-/unimport-4.2.0.tgz#c25211d206d3430e9160cc7d458e9fa9ba828ac0"
+  integrity sha512-mYVtA0nmzrysnYnyb3ALMbByJ+Maosee2+WyE0puXl+Xm2bUwPorPaaeZt0ETfuroPOtG8jj1g/qeFZ6buFnag==
+  dependencies:
+    acorn "^8.14.1"
+    escape-string-regexp "^5.0.0"
+    estree-walker "^3.0.3"
+    local-pkg "^1.1.1"
+    magic-string "^0.30.17"
+    mlly "^1.7.4"
+    pathe "^2.0.3"
+    picomatch "^4.0.2"
+    pkg-types "^2.1.0"
+    scule "^1.3.0"
+    strip-literal "^3.0.0"
+    tinyglobby "^0.2.12"
+    unplugin "^2.2.2"
+    unplugin-utils "^0.2.4"
+
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+unplugin-auto-import@^19.3.0:
+  version "19.3.0"
+  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-19.3.0.tgz#4fbfef17c87919889f5ba2167afac50f50a015f4"
+  integrity sha512-iIi0u4Gq2uGkAOGqlPJOAMI8vocvjh1clGTfSK4SOrJKrt+tirrixo/FjgBwXQNNdS7ofcr7OxzmOb/RjWxeEQ==
+  dependencies:
+    local-pkg "^1.1.1"
+    magic-string "^0.30.17"
+    picomatch "^4.0.2"
+    unimport "^4.2.0"
+    unplugin "^2.3.4"
+    unplugin-utils "^0.2.4"
+
 unplugin-icons@^22.1.0:
   version "22.3.0"
   resolved "https://registry.yarnpkg.com/unplugin-icons/-/unplugin-icons-22.3.0.tgz#66128a7a25bac329047718b05a93e9b0391e0b36"
@@ -4971,6 +6813,16 @@ unplugin-vue-components@^28.4.1:
     unplugin "^2.3.5"
     unplugin-utils "^0.2.4"
 
+unplugin@^2.2.2, unplugin@^2.3.4:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-2.3.11.tgz#411e020dd2ba90e2fbe1e7bd63a5a399e6ee3b54"
+  integrity sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.5"
+    acorn "^8.15.0"
+    picomatch "^4.0.3"
+    webpack-virtual-modules "^0.6.2"
+
 unplugin@^2.3.10, unplugin@^2.3.5:
   version "2.3.10"
   resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-2.3.10.tgz#15e75fec9384743335be7e54e5c88b5c187a3e94"
@@ -4981,6 +6833,11 @@ unplugin@^2.3.10, unplugin@^2.3.5:
     picomatch "^4.0.3"
     webpack-virtual-modules "^0.6.2"
 
+until-async@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/until-async/-/until-async-3.0.2.tgz#447f1531fdd7bb2b4c7a98869bdb1a4c2a23865f"
+  integrity sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==
+
 untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@@ -4994,6 +6851,28 @@ update-browserslist-db@^1.1.3:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
+update-browserslist-db@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz#cfb4358afa08b3d5731a2ecd95eebf4ddef8033e"
+  integrity sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
+  dependencies:
+    tslib "^2.0.3"
+
+upper-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
+  dependencies:
+    tslib "^2.0.3"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -5001,11 +6880,24 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -5020,6 +6912,40 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vite-node@2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.9.tgz#549710f76a643f1c39ef34bdb5493a944e4f895f"
+  integrity sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.7"
+    es-module-lexer "^1.5.4"
+    pathe "^1.1.2"
+    vite "^5.0.0"
+
+vite-node@^0.34.6:
+  version "0.34.7"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.7.tgz#9fbcaf5597826d224e6301a486027faa22c2b09c"
+  integrity sha512-0Yzb96QzHmqIKIs/x2q/sqG750V/EF6yDkS2p1WjJc1W2bgRSuQjf5vB9HY8h2nVb5j4pO5paS5Npcv3s69YUg==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.4"
+    mlly "^1.4.0"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+
+"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", vite@^5.0.0, vite@^5.1.8:
+  version "5.4.21"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.21.tgz#84a4f7c5d860b071676d39ba513c0d598fdc7027"
+  integrity sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==
+  dependencies:
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
 vite@^5.2.6:
   version "5.4.20"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.20.tgz#3267a5e03f21212f44edfd72758138e8fcecd76a"
@@ -5031,6 +6957,32 @@ vite@^5.2.6:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vitest@^2.1.8:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.9.tgz#7d01ffd07a553a51c87170b5e80fea3da7fb41e7"
+  integrity sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==
+  dependencies:
+    "@vitest/expect" "2.1.9"
+    "@vitest/mocker" "2.1.9"
+    "@vitest/pretty-format" "^2.1.9"
+    "@vitest/runner" "2.1.9"
+    "@vitest/snapshot" "2.1.9"
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
+    chai "^5.1.2"
+    debug "^4.3.7"
+    expect-type "^1.1.0"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+    std-env "^3.8.0"
+    tinybench "^2.9.0"
+    tinyexec "^0.3.1"
+    tinypool "^1.0.1"
+    tinyrainbow "^1.2.0"
+    vite "^5.0.0"
+    vite-node "2.1.9"
+    why-is-node-running "^2.3.0"
+
 vue-demi@>=0.13.0, vue-demi@>=0.14.8, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
@@ -5056,6 +7008,13 @@ vue-router@^4.0.12:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
+vue-router@^4.1.6:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.6.4.tgz#a0a9cb9ef811a106d249e4bb9313d286718020d8"
+  integrity sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-sonner@^1.0.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/vue-sonner/-/vue-sonner-1.3.2.tgz#3349d548218e074499fc6d1ba394603ba477156a"
@@ -5072,6 +7031,17 @@ vue@3.5.15:
     "@vue/server-renderer" "3.5.15"
     "@vue/shared" "3.5.15"
 
+vue@^3.3.0:
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.25.tgz#b68b5092b617c57a0a36e8e640fd2c09aa2a374d"
+  integrity sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==
+  dependencies:
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/compiler-sfc" "3.5.25"
+    "@vue/runtime-dom" "3.5.25"
+    "@vue/server-renderer" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 vue@^3.5.13:
   version "3.5.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.22.tgz#2b8ddb94ee4b640ef12fe7f6efe1cf16f3b582e7"
@@ -5095,6 +7065,13 @@ w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
+w3c-xmlserializer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
+  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -5107,11 +7084,36 @@ webfontloader@^1.6.28:
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
   integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
+whatwg-encoding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
+whatwg-url@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
+  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
+  dependencies:
+    tr46 "^3.0.0"
+    webidl-conversions "^7.0.0"
+
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
@@ -5172,12 +7174,20 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+why-is-node-running@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
+  integrity sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==
+  dependencies:
+    siginfo "^2.0.0"
+    stackback "0.0.2"
+
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -5195,6 +7205,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -5204,11 +7223,25 @@ wrap-ansi@^8.1.0:
     string-width "^5.0.1"
     strip-ansi "^7.0.1"
 
+wrap-ansi@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.2.tgz#956832dea9494306e6d209eb871643bb873d7c98"
+  integrity sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@^8.11.0:
+  version "8.18.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
+  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
+
 ws@~8.17.1:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
@@ -5219,16 +7252,49 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xmlhttprequest-ssl@~2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
   integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yaml@^2.3.4:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
   integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
 
+yaml@^2.7.0:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"
+  integrity sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==
+
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.7.2:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
@@ -5242,6 +7308,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yoctocolors-cjs@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz#7e4964ea8ec422b7a40ac917d3a344cfd2304baa"
+  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
+
 zrender@5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"

From c8eba85bf199e7e68115d32ae02a57a7cd84ab10 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 16 Dec 2025 12:37:30 +0530
Subject: [PATCH 152/547] fix: Misc changes to fix breakages after frappe-ui
 update

- Re-organise Dialog to keep it at the top
- Minor style fixes
---
 frontend/src/components/BuilderSettings.vue  |   2 +-
 frontend/src/components/DashboardSidebar.vue |  26 ++---
 frontend/src/pages/PageBuilderDashboard.vue  | 108 +++++++++----------
 3 files changed, 64 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 9f3c4a72c..127343ff7 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -20,7 +20,7 @@
 			</div>
 		</div>
 		<div class="flex flex-1 flex-col gap-5 overflow-hidden bg-surface-white p-14 px-16">
-			<h2 class="text-xl font-semibold leading-none">{{ selectedItemDoc?.title }}</h2>
+			<h2 class="text-xl font-semibold leading-none text-ink-gray-9">{{ selectedItemDoc?.title }}</h2>
 			<BuilderButton
 				icon="x"
 				variant="subtle"
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 6d7d6f1ff..8cdc6b80c 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -3,19 +3,6 @@
 		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden">
 		<div class="flex flex-col">
 			<div class="mb-2 flex gap-2">
-				<Dialog
-					v-model="showSettingsDialog"
-					style="z-index: 40"
-					:disableOutsideClickToClose="true"
-					class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
-					:options="{
-						title: 'Settings',
-						size: '5xl',
-					}">
-					<template #body>
-						<BuilderSettings @close="showSettingsDialog = false" :onlyGlobal="true"></BuilderSettings>
-					</template>
-				</Dialog>
 				<div class="flex w-full items-center">
 					<Dropdown
 						:options="[
@@ -179,6 +166,19 @@
 		<NewFolder v-model="showNewFolderDialog"></NewFolder>
 		<TrialBanner v-if="builderStore.isFCSite"></TrialBanner>
 	</section>
+	<Dialog
+		v-model="showSettingsDialog"
+		style="z-index: 40"
+		:disableOutsideClickToClose="true"
+		class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
+		:options="{
+			title: 'Settings',
+			size: '5xl',
+		}">
+		<template #body>
+			<BuilderSettings @close="showSettingsDialog = false" :onlyGlobal="true"></BuilderSettings>
+		</template>
+	</Dialog>
 </template>
 <script lang="ts" setup>
 import AppsMenu from "@/components/AppsMenu.vue";
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index 9d611bb2d..482f28646 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="flex h-screen">
 		<!-- toolbar -->
-		<DashboardSidebar class="z-30"></DashboardSidebar>
+		<DashboardSidebar></DashboardSidebar>
 		<div class="flex w-full flex-1 flex-col overflow-hidden">
 			<div
-				class="toolbar sticky top-0 z-10 flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1"
+				class="toolbar sticky top-0 flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1"
 				ref="toolbar">
 				<div class="flex gap-2">
 					<router-link
@@ -25,19 +25,59 @@
 			</div>
 			<div class="flex-1 overflow-auto">
 				<section class="m-auto mb-32 flex h-fit w-3/4 max-w-6xl flex-col pt-5">
+					<!-- pages -->
+					<div>
+						<div v-if="!webPages.data?.length && !searchFilter && !typeFilter" class="col-span-full">
+							<p class="px-3 text-base text-gray-500">
+								You don't have any pages yet. Click on the "+ New" button to create a new page.
+							</p>
+						</div>
+						<div v-else-if="!webPages.data?.length" class="col-span-full">
+							<p class="text-base text-gray-500">No matching pages found.</p>
+						</div>
+						<!-- grid -->
+						<div class="grid-col grid gap-3 auto-fill-[220px]" v-if="displayType === 'grid'">
+							<PageCard
+								v-for="page in webPages.data"
+								:selected="selectedPages.has(page.name)"
+								@click.capture="($event: MouseEvent) => handleClick($event, page)"
+								:key="page.page_name"
+								:page="page"
+								v-on-click-and-hold="() => enableSelectionMode(page)"></PageCard>
+						</div>
+						<!-- list -->
+						<div v-if="displayType === 'list'">
+							<PageListItem
+								@click.capture="($event: MouseEvent) => handleClick($event, page)"
+								v-for="page in webPages.data"
+								:selected="selectedPages.has(page.name)"
+								:key="page.page_name"
+								:page="page"
+								v-on-click-and-hold="() => enableSelectionMode(page)"></PageListItem>
+						</div>
+					</div>
+					<BuilderButton
+						class="m-auto mt-12 w-fit text-sm"
+						@click="loadMore"
+						v-if="webPages.data.length && webPages.hasNextPage"
+						variant="subtle"
+						size="sm">
+						Load More
+					</BuilderButton>
 					<!-- list head -->
-					<div class="sticky top-0 z-20 mb-8 flex items-center justify-between bg-surface-white px-3 py-5">
+					<div
+						class="sticky top-0 order-[-1] mb-8 flex items-center justify-between bg-surface-white px-3 py-5">
 						<h1 class="text-xl font-semibold text-ink-gray-9">
 							{{ builderStore.activeFolder || "All Pages" }}
 						</h1>
 						<div class="flex gap-2">
 							<div>
-								<BuilderButton
+								<Button
 									variant="solid"
-									v-show="selectionMode && selectedPages.size"
+									v-if="selectionMode && selectedPages.size"
 									@click="showFolderSelectorDialog = true">
 									Move To Folder
-								</BuilderButton>
+								</Button>
 							</div>
 							<div class="relative flex" v-show="!selectionMode">
 								<BuilderInput
@@ -57,9 +97,7 @@
 								</BuilderInput>
 							</div>
 							<div class="max-md:hidden" v-show="!selectionMode">
-								<BuilderInput
-									type="select"
-									class="w-24"
+								<Select
 									v-model="typeFilter"
 									:options="[
 										{ label: 'All', value: '' },
@@ -69,9 +107,7 @@
 									]" />
 							</div>
 							<div class="max-sm:hidden" v-show="!selectionMode">
-								<BuilderInput
-									type="select"
-									class="w-32"
+								<Select
 									v-model="orderBy"
 									:options="[
 										{ label: 'Sort', value: '', disabled: true },
@@ -108,45 +144,6 @@
 							</div>
 						</div>
 					</div>
-					<!-- pages -->
-					<div>
-						<div v-if="!webPages.data?.length && !searchFilter && !typeFilter" class="col-span-full">
-							<p class="px-3 text-base text-gray-500">
-								You don't have any pages yet. Click on the "+ New" button to create a new page.
-							</p>
-						</div>
-						<div v-else-if="!webPages.data?.length" class="col-span-full">
-							<p class="text-base text-gray-500">No matching pages found.</p>
-						</div>
-						<!-- grid -->
-						<div class="grid-col grid gap-3 auto-fill-[220px]" v-if="displayType === 'grid'">
-							<PageCard
-								v-for="page in webPages.data"
-								:selected="selectedPages.has(page.name)"
-								@click.capture="($event: MouseEvent) => handleClick($event, page)"
-								:key="page.page_name"
-								:page="page"
-								v-on-click-and-hold="() => enableSelectionMode(page)"></PageCard>
-						</div>
-						<!-- list -->
-						<div v-if="displayType === 'list'">
-							<PageListItem
-								@click.capture="($event: MouseEvent) => handleClick($event, page)"
-								v-for="page in webPages.data"
-								:selected="selectedPages.has(page.name)"
-								:key="page.page_name"
-								:page="page"
-								v-on-click-and-hold="() => enableSelectionMode(page)"></PageListItem>
-						</div>
-					</div>
-					<BuilderButton
-						class="m-auto mt-12 w-fit text-sm"
-						@click="loadMore"
-						v-show="webPages.data.length && webPages.hasNextPage"
-						variant="subtle"
-						size="sm">
-						Load More
-					</BuilderButton>
 				</section>
 			</div>
 		</div>
@@ -167,18 +164,13 @@ import vOnClickAndHold from "@/directives/vOnClickAndHold";
 import useBuilderStore from "@/stores/builderStore";
 import { posthog } from "@/telemetry";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { useDark, useEventListener, useStorage, useToggle, watchDebounced } from "@vueuse/core";
-import { createResource } from "frappe-ui";
+import { useEventListener, useStorage, watchDebounced } from "@vueuse/core";
+import { Button, createResource, Select } from "frappe-ui";
 import { onActivated, Ref, ref, watch } from "vue";
 
-const isDark = useDark({
-	attribute: "data-theme",
-});
-const toggleDark = useToggle(isDark);
 const builderStore = useBuilderStore();
 const displayType = useStorage("displayType", "grid") as Ref<"grid" | "list">;
 const showFolderSelectorDialog = ref(false);
-const showImportModal = ref(false);
 
 const searchFilter = ref("");
 const typeFilter = useStorage("typeFilter", "") as Ref<"" | "draft" | "published" | "unpublished">;

From 89d53cd2cd1689257778f0cafd7903ea35034f6d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 16 Dec 2025 20:21:44 +0530
Subject: [PATCH 153/547] add: block data script

---
 .../doctype/builder_page/builder_page.py      |  76 ++++-
 builder/hooks.py                              |   7 +-
 builder/utils.py                              |  10 +
 frontend/src/block.ts                         |  23 +-
 frontend/src/builder.d.ts                     |   2 +-
 frontend/src/components/BlockHTML.vue         |  10 +-
 .../BlockScriptSection.ts                     |  45 ++-
 .../CollectionOptionsSection.ts               |  79 +++--
 frontend/src/components/BuilderBlock.vue      |  71 ++++-
 .../Controls/DynamicValueHandler.vue          |  56 +++-
 .../components/Controls/GenericControl.vue    | 281 ++++++++++++++++++
 frontend/src/components/DataLoaderBlock.vue   |  16 +-
 frontend/src/components/PageScript.vue        |   8 +-
 .../src/components/PropsPopoverContent.vue    |   9 +-
 frontend/src/components/TextBlock.vue         |  16 +-
 frontend/src/data/blockData.ts                |   9 +
 frontend/src/pages/PageBuilder.vue            |  18 +-
 frontend/src/stores/canvasStore.ts            |  10 +-
 frontend/src/utils/blockController.ts         |  12 +
 frontend/src/utils/helpers.ts                 |  17 +-
 20 files changed, 684 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/Controls/GenericControl.vue
 create mode 100644 frontend/src/data/blockData.ts

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index a94b9ffef..99e08b95f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -265,7 +265,7 @@ def get_context(self, context):
 		if context.preview and self.draft_blocks:
 			blocks = self.draft_blocks
 
-		content, style, fonts = get_block_html(blocks)
+		content, style, fonts = get_block_html(blocks, page_data)
 		self.set_custom_font(context, fonts)
 		context.fonts = fonts
 		context.__content = content
@@ -495,8 +495,29 @@ def get_component(block):
 			record_module="builder",
 		)
 
+def resolve_dynamic_props(props, page_data):
+	resolved_props = {}
+	for key, value in props.items():
+		if isinstance(value, str):
+			stripped = value.strip()
+		if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
+			# remove the {{ }} so Jinja receives the variable
+			inner = stripped[2:-2].strip()
+			value = page_data.get(inner, "")
+		resolved_props[key] = value
+	return resolved_props
 
-def get_block_html(blocks):
+
+@frappe.whitelist()
+def get_block_data(block_id, block_data_script, props):
+	props = frappe._dict(frappe.parse_json(props or "{}"))
+	block_data = frappe._dict()
+	_locals = dict(block=frappe._dict(), props=props)
+	execute_script(block_data_script, _locals, block_id)
+	block_data.update(_locals["block"])
+	return block_data
+
+def get_block_html(blocks, page_data=None):
 	blocks = frappe.parse_json(blocks)
 	if not isinstance(blocks, list):
 		blocks = [blocks]
@@ -626,6 +647,13 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 					if len(loop_vars) > 1:  # object repeater
 						_key = f"{_key}.items()"
+				elif block.get("dataKey").get("comesFrom") == "blockDataScript":
+					if data_key:
+						_key = f"{extract_data_key(data_key)}.{escape_single_quotes(_key)}"
+					else:
+						_key = f"block.{escape_single_quotes(_key)}"
+					loop_var = f"key_{_key.replace('.', '__')}"
+					next_data_key = {"key": loop_var, "comesFrom": "blockDataScript"}
 				else:
 					if data_key:
 						_key = f"{extract_data_key(data_key)}.{_key}"
@@ -637,10 +665,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
-				child_tag, child_tag_props, child_tag_std_props = get_tag(
+				child_tag, child_tag_props, child_tag_std_props, child_tag_data = get_tag(
 					block.get("children")[0], soup, next_data_key, next_default_props
 				)
-				append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
+				append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data)
 
 				tag.append("{% endfor %}")
 			else:
@@ -652,10 +680,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
 
-					child_tag, child_tag_props, child_tag_std_props = get_tag(
+					child_tag, child_tag_props, child_tag_std_props, child_tag_data = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
 					)
-					append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props)
+					append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data)
 
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
@@ -679,11 +707,17 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				script_tag.string = script_content
 				tag.append(script_tag)
 
-			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None
+			block_data = {}
+			if block.get("blockDataScript"):
+				block_data = get_block_data(block.get("blockId"), block.get("blockDataScript"), resolve_dynamic_props(all_props, page_data or {}))
+				print("Block Data Script Output: ", block_data)
+
+			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None, to_jinja_literal(block_data) if block_data else None
 
 		for block in blocks:
-			tag, props, std_props = get_tag(block, soup)
-			html += f"{{% with props = {props} %}}{tag!s}{{% endwith %}}"
+			tag, props, std_props, block_data = get_tag(block, soup)
+			html += f"{{% with block = {block_data if block_data else '{}'} %}}{tag!s}{{% endwith %}}"
+			html = f"{{% with props = {props} %}}{html}{{% endwith %}}"
 			if std_props:
 				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
 
@@ -801,6 +835,9 @@ def extend_block(block, overridden_block):
 	if overridden_block.get("blockClientScript"):
 		block["blockClientScript"] = overridden_block.get("blockClientScript")
 
+	if overridden_block.get("blockDataScript"):
+		block["blockDataScript"] = overridden_block.get("blockDataScript")
+
 	dataKey = overridden_block.get("dataKey", {})
 	if not block.get("dataKey"):
 		block["dataKey"] = {}
@@ -832,12 +869,16 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props):
+def append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data):
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 
 	tag.append(f"{{% with props = {child_tag_props} %}}")
+	if child_tag_data:
+		tag.append(f"{{% with block = block | combine({child_tag_data}) %}}")
 	tag.append(child_tag)
+	if child_tag_data:
+		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 
 	if child_tag_std_props:
@@ -878,6 +919,7 @@ def set_dynamic_content_placeholder(block, data_key=None):
 	dynamic_values = [block_data_key] if block_data_key else []
 	dynamic_values += block.get("dynamicValues", []) or []
 	for dynamic_value_doc in dynamic_values:
+		original_key = escape_single_quotes(dynamic_value_doc.get("key", ""))
 		if not isinstance(dynamic_value_doc, dict):
 			# if dynamic_value_doc is a string, convert it to dict
 			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
@@ -885,9 +927,15 @@ def set_dynamic_content_placeholder(block, data_key=None):
 			key = ""
 			if dynamic_value_doc.get("comesFrom") == "props":
 				key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
+			elif dynamic_value_doc.get("comesFrom") == "blockDataScript":
+				#TODO: do what the next else does?
+				if data_key:
+					key = f"{extract_data_key(data_key)}.{(dynamic_value_doc.get('key'))}"
+				else:
+					key = f"block.{original_key}"
 			else:
 				key = (
-					f"{data_key}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
+					f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
 				)
 				if data_key:
 					# convert a.b to (a or {}).get('b', {})
@@ -901,18 +949,18 @@ def set_dynamic_content_placeholder(block, data_key=None):
 			_type = dynamic_value_doc.get("type")
 			if _type == "attribute":
 				block["attributes"][_property] = (
-					f"{{{{ {key} or '{escape_single_quotes(block['attributes'].get(_property, ''))}' }}}}"
+					f"{{{{ {key} or block['{original_key}'] or '{escape_single_quotes(block['attributes'].get(_property, ''))}' }}}}"
 				)
 			elif _type == "style":
 				if not block["attributes"].get("style"):
 					block["attributes"]["style"] = ""
 				css_property = camel_case_to_kebab_case(_property)
 				block["attributes"]["style"] += (
-					f"{css_property}: {{{{ {key} or '{escape_single_quotes(block['baseStyles'].get(_property, '') or '')}' }}}};"
+					f"{css_property}: {{{{ {key} or block['{original_key}'] or '{escape_single_quotes(block['baseStyles'].get(_property, '') or '')}' }}}};"
 				)
 			elif _type == "key" and not block.get("isRepeaterBlock"):
 				block[_property] = (
-					f"{{{{ {key} if {key} or {key} in ['', 0] else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
+					f"{{{{ {key} if {key} or {key} in ['', 0] else block['{original_key}'] if block['{original_key}'] is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
 				)
 
 
diff --git a/builder/hooks.py b/builder/hooks.py
index bc3289e57..240df9e39 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -55,10 +55,9 @@
 # ----------
 
 # add methods and filters to jinja environment
-# jinja = {
-# "methods": "builder.utils.jinja_methods",
-# "filters": "builder.utils.jinja_filters"
-# }
+jinja = {
+	"filters": ["builder.utils.combine"]
+}
 
 # Installation
 # ------------
diff --git a/builder/utils.py b/builder/utils.py
index 4e7bcb1e8..3328a5515 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -587,3 +587,13 @@ def get_export_paths(app_path, export_name):
 		"builder_files_path": builder_files_path,
 		"pages_path": pages_path,
 	}
+
+
+def combine(a, b):
+    if a is None:
+        return b
+    if b is None:
+        return a
+    res = dict(a)
+    res.update(b)
+    return res
\ No newline at end of file
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 7b6391529..d27c2584b 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -43,6 +43,8 @@ class Block implements BlockOptions {
 	activeState?: string | null = null;
 	dynamicValues: Array<BlockDataKey>;
 	blockClientScript?: string;
+	blockDataScript?: string;
+	blockData: Record<string, any> = {};
 	props?: BlockProps;
 	// @ts-expect-error
 	referenceComponent: Block | null;
@@ -99,7 +101,8 @@ class Block implements BlockOptions {
 		this.tabletStyles = reactive(options.tabletStyles || {});
 		this.attributes = reactive(options.attributes || {});
 		this.dynamicValues = reactive(options.dynamicValues || []);
-		this.blockClientScript = reactive(options.blockClientScript || "");
+		this.blockClientScript = options.blockClientScript || "";
+		this.blockDataScript = options.blockDataScript || "";
 		this.props = reactive(options.props || {});
 
 		this.blockName = options.blockName;
@@ -908,6 +911,24 @@ class Block implements BlockOptions {
 	setBlockClientScript(script: string) {
 		this.blockClientScript = script;
 	}
+	getBlockDataScript(): string {
+		let blockDataScript = "";
+		if (this.isExtendedFromComponent() && !this.blockDataScript) {
+			blockDataScript = this.referenceComponent?.getBlockDataScript() || "";
+		} else {
+			blockDataScript = this.blockDataScript || "";
+		}
+		return blockDataScript;
+	}
+	setBlockDataScript(script: string) {
+		this.blockDataScript = script;
+	}
+	getBlockData(): any {
+		return this.blockData;
+	}
+	setBlockData(data: Record<string, any>) {
+		this.blockData = data;
+	}
 	getBlockProps(): BlockProps {
 		let blockProps = {};
 		if (this.isExtendedFromComponent() && !Object.keys(this.props || {}).length) {
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 3a9215cfe..dac2e5e0f 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -124,7 +124,7 @@ declare type FileDoc = {
 declare interface BlockDataKey {
 	key?: string;
 	type?: BlockDataKeyType;
-	comesFrom?: "props" | "dataScript";
+	comesFrom?: "props" | "dataScript" | "blockDataScript";
 	property?: string;
 }
 
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index cc5c8aeaa..53816257a 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -10,6 +10,7 @@ const component = ref<HTMLElement | null>(null);
 const props = defineProps<{
 	block: Block;
 	data?: Record<string, unknown> | null;
+	blockData?: Record<string, unknown> | null;
 	defaultProps?: Record<string, unknown> | null;
 }>();
 
@@ -19,16 +20,21 @@ const hasBlockProps = computed(() => {
 
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
-	if (props.data || hasBlockProps.value) {
+	if (props.data || props.blockData || hasBlockProps.value) {
 		const data = props.data; // to "freeze" props.data for getDataScriptValue
 		const getDataScriptValue = (path: string): any => {
 			return getDataForKey(data || {}, path);
 		};
+		const getBlockDataScriptValue = (path: string): any => {
+			return getDataForKey(props.blockData || {}, path);
+		};
 		if (props.block.getDataKey("property") === "innerHTML") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
 				// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
 				value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue, props.defaultProps);
+			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
+				value = getBlockDataScriptValue(props.block.getDataKey("key"));
 			} else {
 				value = getDataScriptValue(props.block.getDataKey("key"));
 			}
@@ -42,6 +48,8 @@ const getDynamicContent = () => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
 					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+				} else if (dataKeyObj.comesFrom === "blockDataScript") {
+					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
 					value = getDataScriptValue(dataKeyObj.key as string);
 				}
diff --git a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
index 3ad734c11..282a38b4b 100644
--- a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
+++ b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
@@ -2,19 +2,22 @@ import { computed } from "vue";
 import CodeEditor from "../Controls/CodeEditor.vue";
 import blockController from "@/utils/blockController";
 import useCanvasStore from "@/stores/canvasStore";
+import GenericControl from "../Controls/GenericControl.vue";
 
 const blockScriptProperties = [
 	{
-		component: CodeEditor,
+		component: GenericControl,
 		getProps: () => {
 			return {
-				modelValue: blockController.getBlockClientScript(),
-				getModelValue: () => blockController.getBlockClientScript() || "",
+				component: CodeEditor,
 				type: "JavaScript",
-				readonly: false,
-				height: "200px",
-				showLineNumbers: true,
-				autofocus: true,
+				label: "Block Client Script",
+				autofocus: false,
+				height: "60px",
+				controlType: "key",
+				labelPlacement: "top",
+				getModelValue: () => blockController.getBlockClientScript() || "",
+				setModelValue: (val: string) => blockController.setBlockClientScript(val),
 				actionButton: {
 					label: "Expand",
 					icon: "maximize-2",
@@ -24,11 +27,31 @@ const blockScriptProperties = [
 				},
 			};
 		},
-		searchKeyWords: "Block Script, Script, JS, JavaScript, Custom Script",
-		events: {
-			save: (script: string) => blockController.setBlockClientScript(script),
-			"update:modelValue": (script: string) => blockController.setBlockClientScript(script),
+		searchKeyWords: "Block Client Script, Client Script, JS, JavaScript, Custom Script"
+	},
+	{
+		component: GenericControl,
+		getProps: () => {
+			return {
+				component: CodeEditor,
+				type: "Python",
+				label: "Block Data Script",
+				autofocus: false,
+				height: "60px",
+				controlType: "key",
+				labelPlacement: "top",
+				getModelValue: () => blockController.getBlockDataScript() || "",
+				setModelValue: (val: string) => blockController.setBlockDataScript(val),
+				actionButton: {
+					label: "Expand",
+					icon: "maximize-2",
+					handler: () => {
+						useCanvasStore().editBlockDataScript(blockController.getSelectedBlocks()[0]);
+					},
+				},
+			};
 		},
+		searchKeyWords: "Block Data Script, Data Script, Python, Py, Custom Script",
 	},
 ];
 
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 658097d6d..b234478fc 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -9,18 +9,34 @@ import { computed, h } from "vue";
 const keyOptions = computed(() => {
 	const pageStore = usePageStore();
 	let result: { label: string; value: string; prefix: any }[] = [];
+
 	const repeatableDataKeys: string[] = [];
-	let collectionObject = pageStore.pageData;
+	const repeatableBlockDataKeys: string[] = [];
+
+	let pageDataCollectionObject = pageStore.pageData;
+	let blockDataCollectionObject = blockController.getFirstSelectedBlock()?.getBlockData() || {};
+	let collectionObject = {};
+
+	const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
+	const repeaterDataKeyComesFrom: BlockDataKey["comesFrom"] | undefined = blockController
+		.getFirstSelectedBlock()
+		?.getRepeaterParent()
+		?.getDataKey("comesFrom") as BlockDataKey["comesFrom"] | undefined;
 
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
+	if (isInsideRepeater) {
+		const keys = getCollectionKeys(
+			blockController.getFirstSelectedBlock(),
+			repeaterDataKeyComesFrom || "dataScript",
+		);
+		collectionObject =
+			repeaterDataKeyComesFrom == "dataScript" ? pageDataCollectionObject : blockDataCollectionObject;
 		collectionObject = keys.reduce((acc: any, key: string) => {
 			const data = getDataForKey(acc, key);
 			return Array.isArray(data) && data.length > 0 ? data[0] : data;
 		}, collectionObject);
 	}
 
-	function processObject(obj: Record<string, any>, prefix = "") {
+	function processObject(obj: Record<string, any>, prefix = "", resultArray: string[] = []) {
 		if (!obj || typeof obj !== "object") {
 			return;
 		}
@@ -29,23 +45,29 @@ const keyOptions = computed(() => {
 			const path = prefix ? `${prefix}.${key}` : key;
 
 			if (Array.isArray(value)) {
-				repeatableDataKeys.push(path);
+				resultArray.push(path);
 			} else if (typeof value === "object" && value !== null) {
-				processObject(value, path);
+				processObject(value, path, resultArray);
 			}
 		});
 	}
 
-	processObject(collectionObject);
+	if (isInsideRepeater) {
+		if (repeaterDataKeyComesFrom == "dataScript") {
+			processObject(collectionObject, "", repeatableDataKeys);
+		} else if (repeaterDataKeyComesFrom == "blockDataScript") {
+			processObject(collectionObject, "", repeatableBlockDataKeys);
+		}
+	} else {
+		processObject(pageDataCollectionObject, "", repeatableDataKeys);
+		processObject(blockDataCollectionObject, "", repeatableBlockDataKeys);
+	}
 
+	const isPropsBasedRepeater = isInsideRepeater && repeaterDataKeyComesFrom == "props";
 	const repeatableProps: string[] = [];
-	
-	const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
-	const isPropsBasedRepeater =
-		isInsideRepeater &&
-		blockController.getFirstSelectedBlock()?.getRepeaterParent()?.getDataKey("comesFrom") === "props";
+
 	const propsOfComponentRoot = blockController.getComponentRootBlock()?.getBlockProps();
-	
+
 	if (propsOfComponentRoot && !isPropsBasedRepeater) {
 		Object.entries(propsOfComponentRoot).forEach(([key, value]) => {
 			if (
@@ -60,7 +82,17 @@ const keyOptions = computed(() => {
 	repeatableDataKeys.forEach((item) => {
 		result.push({
 			label: item,
-			value: item,
+			value: `${item}--pgdata`,
+			prefix: h(FeatherIcon, {
+				name: "zap",
+				class: "size-3",
+			}),
+		});
+	});
+	repeatableBlockDataKeys.forEach((item) => {
+		result.push({
+			label: item,
+			value: `${item}--bldata`,
 			prefix: h(FeatherIcon, {
 				name: "zap",
 				class: "size-3",
@@ -70,7 +102,7 @@ const keyOptions = computed(() => {
 	repeatableProps.forEach((prop) => {
 		result.push({
 			label: prop,
-			value: `${prop}-from-std-prop`,
+			value: `${prop}--stprop`,
 			prefix: h(FeatherIcon, {
 				name: "git-commit",
 				class: "size-3",
@@ -94,19 +126,18 @@ const collectionOptions = [
 		},
 		searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
 		events: {
-			"update:modelValue": (selectedOption: { label: string; value: string }) => {
-				let value = selectedOption?.value;
+			"update:modelValue": (selectedOption: string) => {
+				let value = selectedOption.slice(0, -8);
+				let comesFromShort = selectedOption.slice(-6);
 				let comesFrom: BlockDataKey["comesFrom"] | "" = "dataScript";
-				if (
-					selectedOption?.label != selectedOption?.value &&
-					selectedOption?.value?.endsWith("-from-std-prop")
-				) {
-					value = selectedOption.value.replace("-from-std-prop", "");
-					comesFrom = "props";
-				}
 				if (!value && useCanvasStore().editingMode != "fragment") {
 					comesFrom = "";
 				}
+				if (comesFromShort == "bldata") {
+					comesFrom = "blockDataScript";
+				} else if (comesFromShort == "stprop") {
+					comesFrom = "props";
+				}
 				blockController.setDataKey("key", value);
 				blockController.setDataKey("comesFrom", comesFrom);
 			},
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 13b463927..13f248291 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -13,6 +13,7 @@
 		ref="component">
 		<BuilderBlock
 			:data="data"
+			:block-data="cumulativeBlockData"
 			:defaultProps="defaultProps"
 			:block="child"
 			:breakpoint="breakpoint"
@@ -48,11 +49,14 @@ import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
 import { builderSettings } from "@/data/builderSettings";
+import getBlockData from "@/data/blockData";
+import usePageStore from "@/stores/pageStore";
 
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
 const editor = ref<InstanceType<typeof BlockEditor> | null>(null);
+const pageStore = usePageStore();
 
 const props = withDefaults(
 	defineProps<{
@@ -62,6 +66,7 @@ const props = withDefaults(
 		preview?: boolean;
 		readonly?: boolean;
 		data?: Record<string, any> | null;
+		blockData?: Record<string, any> | null;
 		defaultProps?: Record<string, any> | null;
 	}>(),
 	{
@@ -70,6 +75,7 @@ const props = withDefaults(
 		preview: false,
 		readonly: false,
 		data: null,
+		blockData: null,
 		defaultProps: null,
 	},
 );
@@ -129,6 +135,7 @@ const attributes = computed(() => {
 		attribs.preview = props.preview;
 		attribs.breakpoint = props.breakpoint;
 		attribs.data = props.data;
+		attribs.blockData = cumulativeBlockData.value;
 		attribs.defaultProps = props.defaultProps;
 	}
 
@@ -137,10 +144,20 @@ const attributes = computed(() => {
 		const getDataScriptValue = (path: string): any => {
 			return getDataForKey(data, path);
 		};
+		const getBlockDataScriptValue = (path: string): any => {
+			return getDataForKey(cumulativeBlockData.value || {}, path);
+		};
 		if (props.block.getDataKey("type") === "attribute") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue, props.defaultProps);
+				value = getPropValue(
+					props.block.getDataKey("key") as string,
+					props.block,
+					getDataScriptValue,
+					props.defaultProps,
+				);
+			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
+				value = getBlockDataScriptValue(props.block.getDataKey("key") as string);
 			} else {
 				value = getDataScriptValue(props.block.getDataKey("key") as string);
 			}
@@ -156,6 +173,8 @@ const attributes = computed(() => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
 					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+				} else if (dataKeyObj.comesFrom === "blockDataScript") {
+					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
 					value = getDataScriptValue(dataKeyObj.key as string);
 				}
@@ -186,10 +205,20 @@ const styles = computed(() => {
 		const getDataScriptValue = (path: string): any => {
 			return getDataForKey(props.data || {}, path);
 		};
+		const getBlockDataScriptValue = (path: string): any => {
+			return getDataForKey(cumulativeBlockData.value || {}, path);
+		};
 		if (props.block.getDataKey("type") === "style") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(props.block.getDataKey("key") as string, props.block, getDataScriptValue, props.defaultProps);
+				value = getPropValue(
+					props.block.getDataKey("key") as string,
+					props.block,
+					getDataScriptValue,
+					props.defaultProps,
+				);
+			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
+				value = getBlockDataScriptValue(props.block.getDataKey("key") as string);
 			} else {
 				value = getDataForKey(props.data as Object, props.block.getDataKey("key") as string);
 			}
@@ -206,6 +235,8 @@ const styles = computed(() => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
 					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+				} else if (dataKeyObj.comesFrom === "blockDataScript") {
+					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
 					value = getDataForKey(props.data as Object, dataKeyObj.key as string);
 				}
@@ -307,8 +338,10 @@ watch(
 		allResolvedProps,
 		() => props.block.getBlockClientScript(),
 		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
+		() => pageStore.settingPage,
 	],
 	() => {
+		if (pageStore.settingPage) return;
 		if (builderSettings.doc?.execute_block_scripts_in_editor) {
 			saferExecuteBlockClientScript(uid, props.block.getBlockClientScript(), allResolvedProps.value);
 		}
@@ -316,11 +349,35 @@ watch(
 	{ deep: true },
 );
 
-onMounted(() => {
-	if (builderSettings.doc?.execute_block_scripts_in_editor) {
-		saferExecuteBlockClientScript(uid, props.block.getBlockClientScript(), allResolvedProps.value);
-	}
-});
+const cumulativeBlockData = ref<Record<string, any>>({});
+
+watch(
+	[
+		component,
+		allResolvedProps,
+		() => props.block.getBlockDataScript(),
+		() => pageStore.settingPage,
+		() => props.block.getParentBlock()?.blockData,
+	],
+	() => {
+		if (pageStore.settingPage) return;
+		getBlockData
+			.fetch({
+				block_id: props.block.blockId,
+				block_data_script: props.block.getBlockDataScript(),
+				props: JSON.stringify(allResolvedProps.value),
+			})
+			.then((res: any) => {
+				props.block.setBlockData({ ...(props.blockData || {}), ...res });
+				cumulativeBlockData.value = { ...(props.blockData || {}), ...res };
+				console.log("Cumulative Block Data for block", props.block.blockId, ":", props.blockData, res);
+			})
+			.catch((err: any) => {
+				console.error("Error fetching block data:", err);
+			});
+	},
+	{ deep: true },
+);
 
 const isEditable = computed(() => {
 	// to ensure it is right block and not on different breakpoint
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index f434a70a8..36eb112c9 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -83,15 +83,15 @@ const props = defineProps<{
 const emit = defineEmits(["setDynamicValue"]);
 const searchQuery = ref("");
 
-const dataArray = computed(() => {
+const dataArray = (collectionObject: Record<string, any>, comesFrom: BlockDataKey["comesFrom"]) => {
 	const result: string[] = [];
-	let collectionObject = pageStore.pageData;
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
-		collectionObject = keys.reduce((acc: any, key: string) => {
+	let collectionObjectCopy = { ...collectionObject };
+	if (blockController.getFirstSelectedBlock()?.isInsideRepeater() && comesFrom == "dataScript") {
+		const keys = getCollectionKeys(blockController.getFirstSelectedBlock(), comesFrom);
+		collectionObjectCopy = keys.reduce((acc: any, key: string) => {
 			const data = getDataForKey(acc, key);
 			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
+		}, collectionObjectCopy);
 	}
 
 	function processObject(obj: Record<string, any>, prefix = "") {
@@ -106,8 +106,20 @@ const dataArray = computed(() => {
 		});
 	}
 
-	processObject(collectionObject);
+	processObject(collectionObjectCopy);
 	return result;
+};
+
+const pageDataArray = computed(() => {
+	return dataArray(pageStore.pageData, "dataScript");
+});
+
+const blockDataArray = computed(() => {
+	const currentBlock = props.block || blockController.getFirstSelectedBlock();
+	if (currentBlock) {
+		return dataArray(currentBlock.blockData || {}, "blockDataScript");
+	}
+	return [];
 });
 
 const defaultProps = computed(() => {
@@ -156,6 +168,8 @@ const getValue = (item: DynamicValueItem): any => {
 			getDataScriptValue,
 			defaultProps.value,
 		);
+	} else if (item.comesFrom == "blockDataScript") {
+		return getBlockDataScriptValue(item.key);
 	} else {
 		return getDataScriptValue(item.key);
 	}
@@ -175,6 +189,14 @@ const getDataScriptValue = (path: string): any => {
 	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
 };
 
+const getBlockDataScriptValue = (path: string): any => {
+	let collectionObject = props.block
+		? props.block.getBlockData() || {}
+		: blockController.getFirstSelectedBlock()?.getBlockData() || {};
+
+	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
+};
+
 const blockProps = computed(() => {
 	return props.block
 		? props.block.getBlockProps()
@@ -182,13 +204,22 @@ const blockProps = computed(() => {
 });
 
 const filteredItems = computed(() => {
-	const dataArrayItems = dataArray.value.map((item) => ({ key: item, comesFrom: "dataScript" }));
+	const pageDataArrayItems = pageDataArray.value.map((item) => ({ key: item, comesFrom: "dataScript" }));
+	const blockDataArrayItems = blockDataArray.value.map((item) => ({
+		key: item,
+		comesFrom: "blockDataScript",
+	}));
 	const propItems = Object.keys(blockProps.value).map((item) => ({ key: item, comesFrom: "props" }));
 	const defaultPropsKeys = Object.keys(defaultProps.value || {}).map((item) => ({
 		key: item,
 		comesFrom: "props",
 	}));
-	const allItems = [...dataArrayItems, ...propItems, ...defaultPropsKeys] as DynamicValueItem[];
+	const allItems = [
+		...pageDataArrayItems,
+		...blockDataArrayItems,
+		...propItems,
+		...defaultPropsKeys,
+	] as DynamicValueItem[];
 	if (!searchQuery.value) return allItems;
 	const query = searchQuery.value.toLowerCase();
 	return allItems.filter(
@@ -196,7 +227,12 @@ const filteredItems = computed(() => {
 			item.key.toLowerCase().includes(query) ||
 			String(getDataScriptValue(item.key)).toLowerCase().includes(query) ||
 			String(
-				getPropValue(item.key, props.block || blockController.getFirstSelectedBlock(), getDataScriptValue, defaultProps.value),
+				getPropValue(
+					item.key,
+					props.block || blockController.getFirstSelectedBlock(),
+					getDataScriptValue,
+					defaultProps.value,
+				),
 			)
 				.toLowerCase()
 				.includes(query),
diff --git a/frontend/src/components/Controls/GenericControl.vue b/frontend/src/components/Controls/GenericControl.vue
new file mode 100644
index 000000000..11bc71f32
--- /dev/null
+++ b/frontend/src/components/Controls/GenericControl.vue
@@ -0,0 +1,281 @@
+<template>
+	<div class="flex w-full flex-col gap-2">
+		<!-- Top label placement -->
+		<div v-if="labelPlacement === 'top' && label" class="flex items-center gap-2">
+			<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="options">
+				<template v-slot="{ open }">
+					<FeatherIcon
+						ref="dropdownTrigger"
+						name="plus-circle"
+						class="h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
+						@click="open" />
+				</template>
+			</Dropdown>
+			<InputLabel class="truncate" :class="{ 'cursor-ns-resize': enableSlider }" @mousedown="handleMouseDown">
+				{{ label }}
+			</InputLabel>
+		</div>
+
+		<!-- Control container with conditional layout -->
+		<div
+			class="relative flex w-full gap-2"
+			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
+			<!-- Left label placement (original layout) -->
+			<div
+				class="flex w-[88px] shrink-0 items-center"
+				v-if="labelPlacement === 'left' && (enableStateControls || label)">
+				<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="options">
+					<template v-slot="{ open }">
+						<FeatherIcon
+							ref="dropdownTrigger"
+							name="plus-circle"
+							class="mr-1.5 h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
+							@click="open" />
+					</template>
+				</Dropdown>
+				<InputLabel
+					class="truncate"
+					:class="{ 'cursor-ns-resize': enableSlider }"
+					v-if="label"
+					@mousedown="handleMouseDown">
+					{{ label }}
+				</InputLabel>
+			</div>
+
+			<!-- Hidden popup for dynamic values -->
+			<DraggablePopup
+				v-model="showDynamicValueModal"
+				:container="dropdownTrigger?.$el"
+				placement="middle-right"
+				:clickOutsideToClose="false"
+				:placementOffset="20"
+				v-if="showDynamicValueModal">
+				<template #header>Set Dynamic Value</template>
+				<template #content>
+					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
+				</template>
+			</DraggablePopup>
+
+			<div class="relative w-full">
+				<component
+					:is="props.component"
+					v-bind="controlAttrs"
+					v-on="props.events || {}"
+					:modelValue="modelValue"
+					:defaultValue="defaultValue"
+					:placeholder="placeholderValue"
+					@update:modelValue="updateValue"
+					@keydown.stop="handleKeyDown"
+					class="w-full">
+					<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+						<slot :name="name" v-bind="slotData || {}" />
+					</template>
+				</component>
+
+				<div
+					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
+					@click.stop="showDynamicValueModal = true"
+					v-if="dynamicValue?.key">
+					<FeatherIcon v-if="dynamicValue?.comesFrom == 'props'" name="git-commit" class="size-3"></FeatherIcon>
+					<FeatherIcon v-else name="zap" class="size-3"></FeatherIcon>
+					<span class="truncate">{{ dynamicValue.key }}</span>
+				</div>
+				<button
+					class="absolute right-1 top-1 z-20 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
+					tabindex="-1"
+					v-show="dynamicValue?.key"
+					@click="clearDynamicValue">
+					<CrossIcon />
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+import DynamicValueHandler from "@/components/Controls/DynamicValueHandler.vue";
+import Input from "@/components/Controls/Input.vue";
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import CrossIcon from "@/components/Icons/Cross.vue";
+import blockController from "@/utils/blockController";
+import { extractNumberAndUnit, normalizeValueWithUnits } from "@/utils/helpers";
+import { Dropdown, FeatherIcon } from "frappe-ui";
+import type { Component } from "vue";
+import { computed, ref, useAttrs } from "vue";
+
+const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
+const emit = defineEmits<{
+	(setDynamicValue: string): void;
+	(clearDynamicValue: void): void;
+}>();
+
+const props = withDefaults(
+	defineProps<{
+		property?: string;
+		label?: string;
+		placeholder?: string;
+		controlType?: "style" | "attribute" | "key";
+		getModelValue?: () => string;
+		getPlaceholder?: () => string;
+		setModelValue?: (value: string) => void;
+		enableSlider?: boolean;
+		unitOptions?: string[];
+		changeFactor?: number;
+		minValue?: number;
+		maxValue?: number | null;
+		hideClearButton?: boolean;
+		component?: Component;
+		events?: Record<string, unknown>;
+		defaultValue?: string | number;
+		enableStates?: boolean;
+		allowDynamicValue?: boolean;
+		enabledStates?: string[];
+		labelPlacement?: "left" | "top";
+	}>(),
+	{
+		placeholder: "unset",
+		type: "text",
+		controlType: "style",
+		enableSlider: false,
+		unitOptions: () => [],
+		changeFactor: 1,
+		minValue: 0,
+		maxValue: null,
+		hideClearButton: false,
+		component: Input,
+		allowDynamicValue: false,
+		enabledStates: () => ["hover", "active", "focus"],
+		enableStates: undefined,
+		labelPlacement: "left",
+	},
+);
+
+const enableStateControls = computed(() => {
+	return props.enableStates ?? props.controlType === "style";
+});
+
+const stateLabels: Record<string, string> = {
+	hover: "On Hover",
+	active: "On Active",
+	focus: "On Focus",
+};
+
+const controlAttrs = computed(() => {
+	const attrs = useAttrs();
+	const propKeys = Object.keys(props);
+	propKeys.push("style");
+	return Object.fromEntries(Object.entries(attrs).filter(([key]) => !propKeys.includes(key)));
+});
+
+const defaultValue = computed(() => {
+	return props.defaultValue;
+});
+
+const modelValue = computed(
+	() => props.getModelValue?.() ?? "",
+);
+
+const placeholderValue = computed(
+	() =>
+		props.getPlaceholder?.() ??
+		String(props.placeholder),
+);
+
+const updateValue = (value: string | number | null | { label: string; value: string }) => {
+	if (typeof value === "object" && value !== null && "value" in value) {
+		value = value.value;
+	}
+	if (props.setModelValue) {
+		props.setModelValue(value as string);
+	}
+};
+
+const handleMouseDown = (e: MouseEvent) => {
+	if (!props.enableSlider) return;
+	const { number } = extractNumberAndUnit(String(modelValue.value || ""));
+	const startY = e.clientY;
+	const startValue = Number(number);
+	const handleMouseMove = (e: MouseEvent) => {
+		let diff = (startY - e.clientY) * props.changeFactor;
+		diff = Math.round(diff);
+		incrementOrDecrement(diff, startValue);
+	};
+	const handleMouseUp = () => {
+		window.removeEventListener("mousemove", handleMouseMove);
+	};
+	window.addEventListener("mousemove", handleMouseMove);
+	window.addEventListener("mouseup", handleMouseUp, { once: true });
+};
+
+const showDynamicValueModal = ref(false);
+
+const handleKeyDown = (e: KeyboardEvent, state?: string) => {
+	if (!props.enableSlider) return;
+	if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+		const step = e.key === "ArrowUp" ? 1 : -1;
+		incrementOrDecrement(step);
+		e.preventDefault();
+	}
+};
+
+const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
+	const value = String(modelValue.value || "");
+	const { number, unit: existingUnit } = extractNumberAndUnit(value);
+	const unit =
+		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
+	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
+	if (typeof props.minValue === "number" && newValue <= props.minValue) {
+		newValue = props.minValue;
+	}
+	if (typeof props.maxValue === "number" && props.maxValue !== null && newValue >= props.maxValue) {
+		newValue = props.maxValue;
+	}
+	updateValue(newValue + "" + unit);
+};
+
+const options = computed(() => {
+	const opts = [];
+	if (props.allowDynamicValue) {
+		opts.unshift({
+			label: "Set Dynamic Value",
+			onClick: () => {
+				showDynamicValueModal.value = true;
+			},
+		});
+	}
+	return opts;
+});
+
+function setDynamicValue({ key, comesFrom }: { key: string; comesFrom?: BlockDataKey["comesFrom"] }) {
+	if (!comesFrom) comesFrom = "dataScript";
+	blockController.getSelectedBlocks().forEach((block) => {
+		block.setDynamicValue(props.property, props.controlType, key, comesFrom);
+	});
+	showDynamicValueModal.value = false;
+	emit("setDynamicValue");
+}
+
+const dynamicValue = computed(() => {
+	const blocks = blockController.getSelectedBlocks();
+	if (!blocks?.length) return;
+	const dataKeyObj = blocks[0].dynamicValues.find((obj) => {
+		return obj.type === props.controlType && obj.property === props.property;
+	});
+
+	if (dataKeyObj) {
+		return {
+			key: dataKeyObj.key || "",
+			comesFrom: dataKeyObj.comesFrom || ("dataScript" as BlockDataKey["comesFrom"]),
+		};
+	} else {
+		return { key: "", comesFrom: "dataScript" as BlockDataKey["comesFrom"] };
+	}
+});
+
+const clearDynamicValue = () => {
+	const blocks = blockController.getSelectedBlocks();
+	blocks.forEach((block) => {
+		block.removeDynamicValue(props.property, props.controlType);
+	});
+	emit("clearDynamicValue");
+};
+</script>
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 06bb511fe..871b49d12 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -7,14 +7,15 @@
 		</div>
 		<BuilderBlock
 			v-else
-			:data="repeatingFrom == 'dataScript' ? _data : {}"
+			:data="repeatingFrom == 'dataScript' ? _data : data"
+			:block-data="repeatingFrom == 'blockDataScript' ? _data : blockData"
 			:defaultProps="repeatingFrom == 'props' ? _data : null"
 			:block="block.children[0]"
 			:preview="Number(index) !== 0 || preview"
 			:readonly="readonly"
 			:breakpoint="breakpoint"
 			:isChildOfComponent="block.isExtendedFromComponent()"
-			v-for="(_data, index) in blockData" />
+			v-for="(_data, index) in blockRepeaterData" />
 	</div>
 </template>
 
@@ -34,6 +35,7 @@ const props = withDefaults(
 		preview?: boolean;
 		breakpoint?: string;
 		data?: Record<string, any> | null;
+		blockData?: Record<string, any> | null;
 		readonly?: boolean;
 	}>(),
 	{
@@ -46,11 +48,13 @@ const props = withDefaults(
 const component = ref(null) as Ref<HTMLElement | null>;
 
 const repeatingFrom = computed(() => {
+	console.log("Repeating from:", props.block.getDataKey("comesFrom"));
 	return props.block.getDataKey("comesFrom") || "dataScript";
 });
 
-const blockData = computed(() => {
+const blockRepeaterData = computed(() => {
 	const pageData = props.data || pageStore.pageData;
+	const blockData = props.block.getBlockData() || {};
 	const key = props.block.getDataKey("key");
 	if (pageData && repeatingFrom.value === "dataScript" && key) {
 		const data = getDataForKey(pageData, key);
@@ -58,6 +62,12 @@ const blockData = computed(() => {
 			return data.slice(0, 100);
 		}
 		return data;
+	} else if (pageData && repeatingFrom.value === "blockDataScript" && key) {
+		const data = getDataForKey(blockData, key);
+		if (Array.isArray(data)) {
+			return data.slice(0, 100);
+		}
+		return data;
 	} else if (repeatingFrom.value == "props" && key) {
 		const defaultProps: BlockProps[] = [];
 		const componentRoot = blockController.getComponentRootBlock(props.block);
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 7b01da193..e6b4d092f 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -4,7 +4,8 @@
 			<BuilderButton @click="showClientScriptEditor()" class="flex-1">Client Script</BuilderButton>
 			<BuilderButton @click="showServerScriptEditor()" class="flex-1">Data Script</BuilderButton>
 		</div>
-		<CodeEditor v-model="pageStore.pageData" type="JSON" label="Data Preview" :readonly="true"></CodeEditor>
+		<CodeEditor v-model="pageStore.pageData" type="JSON" label="Page Data Preview" :readonly="true"></CodeEditor>
+		<CodeEditor v-model="blockData" type="JSON" label="Block Data Preview" :readonly="true"></CodeEditor>
 		<Dialog
 			style="z-index: 40"
 			class="overscroll-none"
@@ -62,6 +63,7 @@ import { computed, defineComponent, ref, watch } from "vue";
 import { toast } from "vue-sonner";
 import CodeEditor from "./Controls/CodeEditor.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
+import blockController from "@/utils/blockController";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
@@ -130,4 +132,8 @@ watch(
 		}
 	},
 );
+
+const blockData = computed(() => {
+	return blockController.getFirstSelectedBlock()?.getBlockData() || "{}";
+});
 </script>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 2a2ae7dfd..c04a314a0 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -67,15 +67,12 @@
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none"
 				ref="autoCompleteRef"
 				placeholder="Choose prop value"
+				:allow-arbitrary-value="false"
 				:modelValue="value"
 				:getOptions="getOptions"
 				@update:modelValue="
 					(option) => {
-						if (typeof option === 'string') {
-							return;
-						} else {
-							value = option?.value;
-						}
+						value = option || '';
 					}
 				" />
 		</div>
@@ -430,7 +427,7 @@ watch(
 watch(
 	selectedPropType,
 	() => {
-		autoCompleteRef.value?.updateOptions();
+		autoCompleteRef.value?.refreshOptions();
 	},
 	{ immediate: true },
 );
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index c052bb2fb..53bd2484b 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -224,12 +224,14 @@ const props = withDefaults(
 		block: Block;
 		preview?: boolean;
 		data?: Record<string, any>;
+		blockData?: Record<string, any> | null;
 		defaultProps?: Record<string, any> | null;
 		breakpoint?: string;
 	}>(),
 	{
 		preview: false,
 		data: () => ({}),
+		blockData: null,
 		defaultProps: null,
 		breakpoint: "desktop",
 	},
@@ -284,11 +286,21 @@ const getDynamicContent = () => {
 	const getDataScriptValue = (path: string): any => {
 		return getDataForKey(props.data, path);
 	};
+	const getBlockDataScriptValue = (path: string): any => {
+		return getDataForKey(props.blockData || {}, path);
+	};
 	if (props.block.getDataKey("property") === "innerHTML") {
 		let value;
 		if (props.block.getDataKey("comesFrom") === "props") {
 			// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-			value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue, props.defaultProps);
+			value = getPropValue(
+				props.block.getDataKey("key"),
+				props.block,
+				getDataScriptValue,
+				props.defaultProps,
+			);
+		} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
+			value = getBlockDataScriptValue(props.block.getDataKey("key"));
 		} else {
 			value = getDataScriptValue(props.block.getDataKey("key"));
 		}
@@ -302,6 +314,8 @@ const getDynamicContent = () => {
 			let value;
 			if (dataKeyObj.comesFrom === "props") {
 				value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+			} else if (dataKeyObj.comesFrom === "blockDataScript") {
+				value = getBlockDataScriptValue(dataKeyObj.key as string);
 			} else {
 				value = getDataScriptValue(dataKeyObj.key as string);
 			}
diff --git a/frontend/src/data/blockData.ts b/frontend/src/data/blockData.ts
new file mode 100644
index 000000000..4c2a7034b
--- /dev/null
+++ b/frontend/src/data/blockData.ts
@@ -0,0 +1,9 @@
+import { createResource } from "frappe-ui";
+
+let getBlockData = createResource({
+	url: "builder.builder.doctype.builder_page.builder_page.get_block_data",
+	method: "GET",
+	auto: false,
+});
+
+export default getBlockData;
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 812726c42..6bfcf3438 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -201,14 +201,22 @@ async function saveAndExitFragmentMode(e: Event) {
 
 let expandedEditorOptions = computed(() => {
 	let title, label;
-	let type: "HTML" | "JavaScript" | "CSS" = "HTML";
+	let type: "HTML" | "JavaScript" | "CSS" | "Python" = "HTML";
 	if (canvasStore.editingContentType === "html") {
 		title = "HTML";
 		label = "Edit HTML";
 	} else if (canvasStore.editingContentType === "js") {
-		title = "Blockscript";
-		label = "Edit Blockscript";
+		title = "Block Client Script";
+		label = "Edit Block Client Script";
 		type = "JavaScript";
+	} else if (canvasStore.editingContentType === "css") {
+		title = "CSS";
+		label = "Edit CSS";
+		type = "CSS";
+	} else if (canvasStore.editingContentType === "python") {
+		title = "Block Data Script";
+		label = "Edit Block Data Script";
+		type = "Python";
 	}
 	return { title, label, type };
 });
@@ -218,6 +226,8 @@ function getExpandedEditorContent() {
 		return canvasStore.editableBlock?.getInnerHTML();
 	} else if (canvasStore.editingContentType === "js") {
 		return canvasStore.editableBlock?.getBlockClientScript();
+	} else if (canvasStore.editingContentType === "python") {
+		return canvasStore.editableBlock?.getBlockDataScript();
 	}
 }
 
@@ -226,6 +236,8 @@ async function saveExpandedEditorContent(val: string) {
 		canvasStore.editableBlock?.setInnerHTML(val);
 	} else if (canvasStore.editingContentType === "js") {
 		canvasStore.editableBlock?.setBlockClientScript(val);
+	} else if (canvasStore.editingContentType === "python") {
+		canvasStore.editableBlock?.setBlockDataScript(val);
 	}
 	canvasStore.showExpandedEditorDialog = false;
 }
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 4302d2bd0..d73145dad 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -26,7 +26,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			index: <number | null>null,
 		},
 		editableBlock: <Block | null>null,
-		editingContentType: <"html" | "css" | "js">"html",
+		editingContentType: <"html" | "css" | "js" | "python">"html",
 		editingMode: <EditingMode>"page",
 		settingPage: false,
 		showExpandedEditorDialog: false,
@@ -113,6 +113,14 @@ const useCanvasStore = defineStore("canvasStore", {
 			});
 		},
 
+		editBlockDataScript(block: Block) {
+			this.editableBlock = block;
+			this.editingContentType = "python";
+			nextTick(() => {
+				this.showExpandedEditorDialog = true;
+			});
+		},
+
 		editOnCanvas(
 			block: Block,
 			saveAction: (block: Block) => void,
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 3202f3316..d0e35e704 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -324,6 +324,18 @@ const blockController = {
 	setBlockClientScript: (script: string) => {
 		blockController.getFirstSelectedBlock()?.setBlockClientScript(script);
 	},
+	getBlockDataScript: () => {
+		return blockController.getFirstSelectedBlock()?.getBlockDataScript();
+	},
+	setBlockDataScript: (script: string) => {
+		blockController.getFirstSelectedBlock()?.setBlockDataScript(script);
+	},
+	getBlockData: () => {
+		return blockController.getFirstSelectedBlock()?.getBlockData();
+	},
+	setBlockData: (data: Record<string, any>) => {
+		blockController.getFirstSelectedBlock()?.setBlockData(data);
+	},
 	getBlockProps: () => {
 		return blockController.getFirstSelectedBlock()?.getBlockProps();
 	},
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 76da37f42..2e2565aa3 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -377,6 +377,7 @@ function getCopyWithoutParent(block: BlockOptions | Block): BlockOptions {
 	blockCopy.children = blockCopy.children?.map((child) => getCopyWithoutParent(child));
 	delete blockCopy.parentBlock;
 	delete blockCopy.referenceComponent;
+	delete blockCopy.blockData;
 	return blockCopy;
 }
 
@@ -1016,17 +1017,17 @@ function showDialog(options: DialogOptions): Promise<void> {
 	});
 }
 
-function getCollectionKeys(block: any): string[] {
+function getCollectionKeys(block: any, type : BlockDataKey["comesFrom"] = "dataScript"): string[] {
 	// traverse up the block to get list of dataKeys set
 	const repeaterBlock = block.getRepeaterParent();
 	const keys: string[] = [];
 	if (repeaterBlock) {
 		const collectionKey = repeaterBlock.getDataKey("key");
 		const comesFrom = repeaterBlock.getDataKey("comesFrom");
-		if (collectionKey && comesFrom == "dataScript") {
+		if (collectionKey && comesFrom == type) {
 			keys.push(collectionKey);
 		}
-		const parentKeys: string[] = getCollectionKeys(repeaterBlock);
+		const parentKeys: string[] = getCollectionKeys(repeaterBlock, type);
 		if (parentKeys.length > 0) {
 			keys.unshift(...parentKeys);
 		}
@@ -1134,6 +1135,15 @@ const getStandardPropValue = (
 	}
 };
 
+const getCumulativeBlockData = (block: Block): Record<string, any> => {
+	const parentBlock = block.getParentBlock();
+	if (parentBlock) {
+		const parentBlockData = getCumulativeBlockData(parentBlock);
+		return { ...parentBlockData, ...(block.blockData || {}) };
+	}
+	return { ...(block.blockData || {}) };
+};
+
 /**
  * Tries to execute user-provided script in a safer environment, (but not guarantee) restricting access to certain DOM properties and methods.
  * It makes the editor canvas as the root (document), and thus limits the script's ability to manipulate the broader document.
@@ -1319,5 +1329,6 @@ export {
 	uploadUserFont,
 	getPropValue,
 	getStandardPropValue,
+	getCumulativeBlockData,
 	saferExecuteBlockClientScript,
 };

From d6b99eee68a38af0e81a729900df47fb58e039ee Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 17 Dec 2025 10:29:14 +0530
Subject: [PATCH 154/547] feat: unified scripting UI

---
 frontend/src/components/BlockProperties.vue   |   1 -
 .../BlockScriptSection.ts                     |  63 -------
 frontend/src/components/BuilderLeftPanel.vue  |   3 +-
 frontend/src/components/PageScript.vue        | 178 ++++++++++++++----
 frontend/src/utils/useBlockEventHandlers.ts   |   2 +-
 5 files changed, 146 insertions(+), 101 deletions(-)
 delete mode 100644 frontend/src/components/BlockPropertySections/BlockScriptSection.ts

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 066bbb0b4..7d189031f 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -128,6 +128,5 @@ const sections = [
 	customAttributesSection,
 	rawStyleSection,
 	blockPropsSection,
-	blockScriptSection,
 ] as PropertySection[];
 </script>
diff --git a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts b/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
deleted file mode 100644
index 282a38b4b..000000000
--- a/frontend/src/components/BlockPropertySections/BlockScriptSection.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { computed } from "vue";
-import CodeEditor from "../Controls/CodeEditor.vue";
-import blockController from "@/utils/blockController";
-import useCanvasStore from "@/stores/canvasStore";
-import GenericControl from "../Controls/GenericControl.vue";
-
-const blockScriptProperties = [
-	{
-		component: GenericControl,
-		getProps: () => {
-			return {
-				component: CodeEditor,
-				type: "JavaScript",
-				label: "Block Client Script",
-				autofocus: false,
-				height: "60px",
-				controlType: "key",
-				labelPlacement: "top",
-				getModelValue: () => blockController.getBlockClientScript() || "",
-				setModelValue: (val: string) => blockController.setBlockClientScript(val),
-				actionButton: {
-					label: "Expand",
-					icon: "maximize-2",
-					handler: () => {
-						useCanvasStore().editBlockClientScript(blockController.getSelectedBlocks()[0]);
-					},
-				},
-			};
-		},
-		searchKeyWords: "Block Client Script, Client Script, JS, JavaScript, Custom Script"
-	},
-	{
-		component: GenericControl,
-		getProps: () => {
-			return {
-				component: CodeEditor,
-				type: "Python",
-				label: "Block Data Script",
-				autofocus: false,
-				height: "60px",
-				controlType: "key",
-				labelPlacement: "top",
-				getModelValue: () => blockController.getBlockDataScript() || "",
-				setModelValue: (val: string) => blockController.setBlockDataScript(val),
-				actionButton: {
-					label: "Expand",
-					icon: "maximize-2",
-					handler: () => {
-						useCanvasStore().editBlockDataScript(blockController.getSelectedBlocks()[0]);
-					},
-				},
-			};
-		},
-		searchKeyWords: "Block Data Script, Data Script, Python, Py, Custom Script",
-	},
-];
-
-export default {
-	name: "Block Script",
-	properties: blockScriptProperties,
-	collapsed: false,
-	condition: () => !blockController.multipleBlocksSelected(),
-};
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 55a1f8521..b7b04655f 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -66,9 +66,8 @@
 					:adjustForRoot="false"
 					v-if="canvasStore.editingMode === 'fragment' && fragmentCanvas" />
 			</div>
-			<div v-show="builderStore.leftPanelActiveTab === 'Code'">
+			<div class="h-full" v-show="builderStore.leftPanelActiveTab === 'Code'">
 				<PageScript
-					class="p-4"
 					:key="pageStore.selectedPage"
 					v-if="pageStore.selectedPage && pageStore.activePage"
 					:page="pageStore.activePage" />
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index e6b4d092f..9d3a6e5ef 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -1,51 +1,130 @@
 <template>
-	<div class="flex flex-col gap-4">
-		<div class="flex gap-2">
-			<BuilderButton @click="showClientScriptEditor()" class="flex-1">Client Script</BuilderButton>
-			<BuilderButton @click="showServerScriptEditor()" class="flex-1">Data Script</BuilderButton>
+	<div class="flex h-full flex-col justify-between">
+		<div class="flex h-full flex-col gap-4 p-4">
+			<div class="flex gap-2" v-if="mode == 'page' || isBlockSelected">
+				<BuilderButton @click="showClientScriptEditor()" class="flex-1">Client Script</BuilderButton>
+				<BuilderButton @click="showServerScriptEditor()" class="flex-1">Data Script</BuilderButton>
+			</div>
+
+			<div class="h-full" v-if="mode == 'page'">
+				<CodeEditor
+					class="max-h-[80%]"
+					v-model="pageStore.pageData"
+					type="JSON"
+					label="Page Data Preview"
+					:readonly="true" />
+			</div>
+			<div class="h-full" v-if="mode == 'block'">
+				<CodeEditor
+					v-if="isBlockSelected"
+					class="max-h-[80%]"
+					v-model="blockData"
+					type="JSON"
+					label="Block Data Preview"
+					:readonly="true"></CodeEditor>
+				<div v-else class="w-full py-4 text-center text-xs">Select a block to preview data.</div>
+			</div>
+		</div>
+		<div class="box-border flex items-center justify-between border-t p-4 py-2">
+			<h2 class="text-base">Mode</h2>
+			<TabButtons
+				class="w-fit"
+				:buttons="[
+					{ label: 'Page', icon: 'layout', hideLabel: true, value: 'page' },
+					{ label: 'Block', icon: 'layers', hideLabel: true, value: 'block' },
+				]"
+				v-model="mode" />
 		</div>
-		<CodeEditor v-model="pageStore.pageData" type="JSON" label="Page Data Preview" :readonly="true"></CodeEditor>
-		<CodeEditor v-model="blockData" type="JSON" label="Block Data Preview" :readonly="true"></CodeEditor>
 		<Dialog
 			style="z-index: 40"
 			class="overscroll-none"
 			:options="{
-				title: currentScriptEditor == 'data' ? 'Data Script' : 'Client Script',
+				title:
+					currentScriptEditor == 'data'
+						? `${mode.charAt(0).toUpperCase() + mode.slice(1)} Data Script`
+						: `${mode.charAt(0).toUpperCase() + mode.slice(1)} Client Script`,
 				size: '7xl',
 			}"
 			:isDirty="isDirty"
 			v-model="showDialog">
 			<template #body-content>
-				<div v-if="currentScriptEditor == 'client'">
-					<PageClientScriptManager
-						:page="pageStore.activePage as BuilderPage"
-						ref="clientScriptManager"></PageClientScriptManager>
+				<div v-if="mode == 'page'">
+					<div v-if="currentScriptEditor == 'client'">
+						<PageClientScriptManager
+							:page="pageStore.activePage as BuilderPage"
+							ref="clientScriptManager"></PageClientScriptManager>
+					</div>
+					<div v-else>
+						<div class="flex gap-4">
+							<CodeEditor
+								class="w-2/3 overscroll-none"
+								ref="dataScriptEditor"
+								v-model="page.page_data_script"
+								type="Python"
+								height="60vh"
+								:readonly="builderStore.readOnlyMode"
+								:autofocus="true"
+								@save="savePageDataScript"
+								:showSaveButton="true"
+								:show-line-numbers="true"></CodeEditor>
+							<CodeEditor
+								v-model="pageStore.pageData"
+								type="JSON"
+								label="Data Preview"
+								:showLineNumbers="true"
+								class="-mt-5 w-1/3 [&>div>div]:bg-surface-white"
+								height="calc(100% - 110px)"
+								description='Use Data Script to provide dynamic data to your web page.<br>
+								<b>Example:</b> data.events = frappe.get_list("Event")<br><br>
+								For more details on how to write data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.
+								'
+								:readonly="true"></CodeEditor>
+						</div>
+					</div>
 				</div>
-				<div v-else>
-					<div class="flex gap-4">
+				<div v-if="mode == 'block'">
+					<div v-if="currentScriptEditor == 'client'">
 						<CodeEditor
-							class="w-2/3 overscroll-none"
-							ref="dataScriptEditor"
-							v-model="page.page_data_script"
-							type="Python"
+							class="overscroll-none"
+							ref="blockClientScriptEditor"
+							v-model="blockClientScript"
+							type="JavaScript"
 							height="60vh"
 							:readonly="builderStore.readOnlyMode"
 							:autofocus="true"
-							@save="savePageDataScript"
+							@save="saveBlockClientScript"
 							:showSaveButton="true"
-							:show-line-numbers="true"></CodeEditor>
-						<CodeEditor
-							v-model="pageStore.pageData"
-							type="JSON"
-							label="Data Preview"
-							:showLineNumbers="true"
-							class="-mt-5 w-1/3 [&>div>div]:bg-surface-white"
-							height="calc(100% - 110px)"
-							description='Use Data Script to provide dynamic data to your web page.<br>
-								<b>Example:</b> data.events = frappe.get_list("Event")<br><br>
-								For more details on how to write data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.
+							:show-line-numbers="true"
+							description='Use Block Client Script to add interactivity to your block. You can access the current DOM node using the keyword `this`. All Block props are accessible using the read-only `props` object.<br>
+							<b>Example:</b> <pre style="display:inline; font-size: 11px;">this.addEventListener("click", () => { console.log(props) })</pre><br><br>
+							For more details on how to write data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.'></CodeEditor>
+					</div>
+					<div v-else>
+						<div class="flex gap-4">
+							<CodeEditor
+								class="w-2/3 overscroll-none"
+								ref="dataScriptEditor"
+								v-model="blockDataScript"
+								type="Python"
+								height="60vh"
+								:readonly="builderStore.readOnlyMode"
+								:autofocus="true"
+								@save="saveBlockDataScript"
+								:showSaveButton="true"
+								:show-line-numbers="true"></CodeEditor>
+							<CodeEditor
+								v-model="blockData"
+								type="JSON"
+								label="Data Preview"
+								:showLineNumbers="true"
+								class="-mt-5 w-1/3 [&>div>div]:bg-surface-white"
+								height="calc(100% - 110px)"
+								description='Use Block Data Script to provide dynamic data to your block.<br>
+								<b>Example:</b> block.events = frappe.get_list("Event")<br><br>
+								For more details on how to write block data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.
 								'
-							:readonly="true"></CodeEditor>
+								:readonly="true"></CodeEditor>
+						</div>
 					</div>
 				</div>
 			</template>
@@ -64,10 +143,12 @@ import { toast } from "vue-sonner";
 import CodeEditor from "./Controls/CodeEditor.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
 import blockController from "@/utils/blockController";
+import TabButtons from "./Controls/TabButtons.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
 const showDialog = ref(false);
+const mode = ref<"page" | "block">("block");
 
 const props = defineProps<{
 	page: BuilderPage;
@@ -77,6 +158,27 @@ const clientScriptManager = ref<null | InstanceType<typeof PageClientScriptManag
 const dataScriptEditor = ref<null | InstanceType<typeof CodeEditor>>(null);
 
 const currentScriptEditor = ref<"client" | "data">("client");
+const isBlockSelected = computed(() => {
+	return blockController.getFirstSelectedBlock();
+});
+
+const blockClientScript = computed(() => {
+	if (isBlockSelected.value) {
+		return blockController.getFirstSelectedBlock()?.getBlockClientScript() || "";
+	}
+	return "";
+});
+
+const blockDataScript = computed(() => {
+	if (isBlockSelected.value) {
+		return blockController.getFirstSelectedBlock()?.getBlockDataScript() || "";
+	}
+	return "";
+});
+
+const blockData = computed(() => {
+	return blockController.getFirstSelectedBlock()?.getBlockData() || {};
+});
 
 const savePageDataScript = (value: string) => {
 	webPages.setValue
@@ -103,6 +205,18 @@ const savePageDataScript = (value: string) => {
 		});
 };
 
+const saveBlockClientScript = (value: string) => {
+	if (isBlockSelected.value) {
+		blockController.getFirstSelectedBlock()?.setBlockClientScript(value);
+	}
+};
+
+const saveBlockDataScript = (value: string) => {
+	if (isBlockSelected.value) {
+		blockController.getFirstSelectedBlock()?.setBlockDataScript(value);
+	}
+};
+
 const showClientScriptEditor = () => {
 	currentScriptEditor.value = "client";
 	showDialog.value = true;
@@ -132,8 +246,4 @@ watch(
 		}
 	},
 );
-
-const blockData = computed(() => {
-	return blockController.getFirstSelectedBlock()?.getBlockData() || "{}";
-});
 </script>
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index e2e54cf07..4771b4043 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -93,6 +93,6 @@ const selectBlock = (e: MouseEvent) => {
 	canvasStore.selectBlock(block, e);
 	canvasStore.activeCanvas?.setActiveBreakpoint(breakpoint);
 
-	builderStore.leftPanelActiveTab = "Layers";
+	// builderStore.leftPanelActiveTab = "Layers";
 	builderStore.rightPanelActiveTab = "Properties";
 };

From 6f56c17f013fea6ee011b0516cbea363965429bf Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 17 Dec 2025 12:41:35 +0530
Subject: [PATCH 155/547] refactor(DashboardPage): Move dashboard page elements
 to individual files

- And fix the stacking order of elements to avoid unexpected element overlap over dialogs
- remove unused AppsMenu component
---
 frontend/components.d.ts                     |   2 +
 frontend/src/components/AppsMenu.vue         |  39 ---
 frontend/src/components/DashboardContent.vue | 297 +++++++++++++++++
 frontend/src/components/DashboardSidebar.vue |  29 +-
 frontend/src/components/DashboardToolbar.vue |  25 ++
 frontend/src/pages/PageBuilderDashboard.vue  | 318 +------------------
 6 files changed, 348 insertions(+), 362 deletions(-)
 delete mode 100644 frontend/src/components/AppsMenu.vue
 create mode 100644 frontend/src/components/DashboardContent.vue
 create mode 100644 frontend/src/components/DashboardToolbar.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 7c7a6e933..b72ac82ae 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -49,7 +49,9 @@ declare module 'vue' {
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
     CSS: typeof import('./src/components/Icons/CSS.vue')['default']
     CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
+    DashboardContent: typeof import('./src/components/DashboardContent.vue')['default']
     DashboardSidebar: typeof import('./src/components/DashboardSidebar.vue')['default']
+    DashboardToolbar: typeof import('./src/components/DashboardToolbar.vue')['default']
     DataLoaderBlock: typeof import('./src/components/DataLoaderBlock.vue')['default']
     Dialog: typeof import('./src/components/Controls/Dialog.vue')['default']
     DimensionInput: typeof import('./src/components/DimensionInput.vue')['default']
diff --git a/frontend/src/components/AppsMenu.vue b/frontend/src/components/AppsMenu.vue
deleted file mode 100644
index da090cc08..000000000
--- a/frontend/src/components/AppsMenu.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-	<Popover placement="right-start" trigger="hover" :hoverDelay="0.1" :leaveDelay="0.1">
-		<template #target="{ togglePopover, isOpen }">
-			<button
-				class="flex h-7 w-full items-center justify-between rounded px-2 text-base hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-2': isOpen }"
-				@click.prevent="togglePopover()">
-				<div class="flex items-center gap-2">
-					<FeatherIcon name="grid" class="size-4" />
-					<span class="text-ink-gray-7">Apps</span>
-				</div>
-				<FeatherIcon name="chevron-right" class="size-4" />
-			</button>
-		</template>
-		<template #body>
-			<div
-				class="flex w-fit min-w-32 max-w-48 flex-col rounded-lg border border-outline-gray-2 bg-surface-white p-1.5 text-sm text-ink-gray-8 shadow-xl auto-fill-[100px] dark:bg-surface-gray-1">
-				<a
-					:href="app.route"
-					v-for="app in apps.data"
-					key="name"
-					class="flex items-center gap-2 rounded p-1 hover:bg-surface-gray-2">
-					<img class="size-6" :src="app.logo" />
-					<span class="max-w-18 w-full truncate">
-						{{ app.title }}
-					</span>
-				</a>
-			</div>
-		</template>
-	</Popover>
-</template>
-<script setup lang="ts">
-import { Popover, createResource } from "frappe-ui";
-const apps = createResource({
-	url: "builder.api.get_apps",
-	cache: "other_apps",
-	auto: true,
-});
-</script>
diff --git a/frontend/src/components/DashboardContent.vue b/frontend/src/components/DashboardContent.vue
new file mode 100644
index 000000000..2e339877b
--- /dev/null
+++ b/frontend/src/components/DashboardContent.vue
@@ -0,0 +1,297 @@
+<template>
+	<div class="flex-1 overflow-auto">
+		<section class="m-auto mb-32 flex h-fit w-3/4 max-w-6xl flex-col pt-5">
+			<!-- pages -->
+			<div>
+				<div v-if="!webPages.data?.length && !searchFilter && !typeFilter" class="col-span-full">
+					<p class="px-3 text-base text-gray-500">
+						You don't have any pages yet. Click on the "+ New" button to create a new page.
+					</p>
+				</div>
+				<div v-else-if="!webPages.data?.length" class="col-span-full">
+					<p class="text-base text-gray-500">No matching pages found.</p>
+				</div>
+				<!-- grid -->
+				<div class="grid-col grid gap-3 auto-fill-[220px]" v-if="displayType === 'grid'">
+					<PageCard
+						v-for="page in webPages.data"
+						:selected="selectedPages.has(page.name)"
+						@click.capture="($event: MouseEvent) => handleClick($event, page)"
+						:key="page.page_name"
+						:page="page"
+						v-on-click-and-hold="() => enableSelectionMode(page)"></PageCard>
+				</div>
+				<!-- list -->
+				<div v-if="displayType === 'list'">
+					<PageListItem
+						@click.capture="($event: MouseEvent) => handleClick($event, page)"
+						v-for="page in webPages.data"
+						:selected="selectedPages.has(page.name)"
+						:key="page.page_name"
+						:page="page"
+						v-on-click-and-hold="() => enableSelectionMode(page)"></PageListItem>
+				</div>
+			</div>
+			<BuilderButton
+				class="m-auto mt-12 w-fit text-sm"
+				@click="loadMore"
+				v-if="webPages.data.length && webPages.hasNextPage"
+				variant="subtle"
+				size="sm">
+				Load More
+			</BuilderButton>
+			<!-- list head -->
+			<div class="sticky top-0 order-[-1] mb-8 flex items-center justify-between bg-surface-white px-3 py-5">
+				<h1 class="text-xl font-semibold text-ink-gray-9">
+					{{ builderStore.activeFolder || "All Pages" }}
+				</h1>
+				<div class="flex gap-2">
+					<div>
+						<Button
+							variant="solid"
+							v-if="selectionMode && selectedPages.size"
+							@click="showFolderSelectorDialog = true">
+							Move To Folder
+						</Button>
+					</div>
+					<div class="relative flex" v-show="!selectionMode">
+						<BuilderInput
+							class="w-48"
+							type="text"
+							placeholder="Filter by title or route"
+							v-model="searchFilter"
+							autofocus
+							@input="
+								(value: string) => {
+									searchFilter = value;
+								}
+							">
+							<template #prefix>
+								<FeatherIcon name="search" class="size-4 text-ink-gray-5"></FeatherIcon>
+							</template>
+						</BuilderInput>
+					</div>
+					<div class="max-md:hidden" v-show="!selectionMode">
+						<Select
+							v-model="typeFilter"
+							:options="[
+								{ label: 'All', value: 'all' },
+								{ label: 'Draft', value: 'draft' },
+								{ label: 'Published', value: 'published' },
+								{ label: 'Unpublished', value: 'unpublished' },
+							]" />
+					</div>
+					<div class="max-sm:hidden" v-show="!selectionMode">
+						<Select
+							v-model="orderBy"
+							:options="[
+								{ label: 'Sort', value: '', disabled: true },
+								{ label: 'Last Created', value: 'creation' },
+								{ label: 'Last Modified', value: 'modified' },
+								{
+									label: 'Alphabetically (A-Z)',
+									value: 'alphabetically_a_z',
+								},
+								{
+									label: 'Alphabetically (Z-A)',
+									value: 'alphabetically_z_a',
+								},
+							]" />
+					</div>
+					<div class="max-md:hidden">
+						<OptionToggle
+							class="[&>div]:min-w-0"
+							:options="[
+								{
+									label: 'Grid',
+									value: 'grid',
+									icon: 'grid',
+									hideLabel: true,
+								},
+								{
+									label: 'List',
+									value: 'list',
+									icon: 'list',
+									hideLabel: true,
+								},
+							]"
+							v-model="displayType"></OptionToggle>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+	<SelectFolder
+		v-model="showFolderSelectorDialog"
+		:currentFolder="builderStore.activeFolder"
+		@folderSelected="setFolder"></SelectFolder>
+</template>
+
+<script setup lang="ts">
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import SelectFolder from "@/components/Modals/SelectFolder.vue";
+import PageCard from "@/components/PageCard.vue";
+import PageListItem from "@/components/PageListItem.vue";
+import { webPages } from "@/data/webPage";
+import vOnClickAndHold from "@/directives/vOnClickAndHold";
+import useBuilderStore from "@/stores/builderStore";
+import { posthog } from "@/telemetry";
+import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { useEventListener, useStorage, watchDebounced } from "@vueuse/core";
+import { Button, createResource, Select } from "frappe-ui";
+import { onActivated, Ref, ref, watch } from "vue";
+
+const builderStore = useBuilderStore();
+const displayType = useStorage("displayType", "grid") as Ref<"grid" | "list">;
+const showFolderSelectorDialog = ref(false);
+
+const searchFilter = ref("");
+const typeFilter = useStorage("typeFilter", "") as Ref<"" | "draft" | "published" | "unpublished" | "all">;
+const orderBy = useStorage("orderBy", "creation") as Ref<
+	"creation" | "modified" | "alphabetically_a_z" | "alphabetically_z_a"
+>;
+
+const orderMap = {
+	creation: "creation desc",
+	modified: "modified desc",
+	alphabetically_a_z: "page_title asc",
+	alphabetically_z_a: "page_title desc",
+};
+
+const selectedPages = ref(new Set<string>());
+const selectionMode = ref(false);
+
+onActivated(() => {
+	posthog.capture("builder_dashboard_page_visited");
+});
+
+watch(
+	() => builderStore.activeFolder,
+	() => fetchPages(),
+);
+
+// remove selection mode when the escape key is pressed
+useEventListener(document, "keydown", (ev) => {
+	if (ev.key === "Escape") {
+		selectedPages.value.clear();
+		selectionMode.value = false;
+	}
+});
+
+const fetchPages = () => {
+	const filters = {
+		is_template: 0,
+	} as any;
+	if (typeFilter.value) {
+		if (typeFilter.value === "published") {
+			filters["published"] = true;
+		} else if (typeFilter.value === "unpublished") {
+			filters["published"] = false;
+		} else if (typeFilter.value === "draft") {
+			filters["draft_blocks"] = ["is", "set"];
+		}
+	}
+	const orFilters = {} as any;
+	if (searchFilter.value) {
+		orFilters["page_title"] = ["like", `%${searchFilter.value}%`];
+		orFilters["route"] = ["like", `%${searchFilter.value}%`];
+	}
+	if (builderStore.activeFolder) {
+		filters["project_folder"] = builderStore.activeFolder;
+	}
+
+	webPages.update({
+		filters,
+		orFilters,
+		orderBy: orderMap[orderBy.value],
+	});
+	webPages.fetch();
+};
+
+const loadMore = () => {
+	webPages.next();
+};
+
+const firstHold = ref(false);
+
+const handleClick = (e: MouseEvent, page: BuilderPage) => {
+	if (selectionMode.value) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (firstHold.value) {
+			firstHold.value = false;
+			return;
+		}
+		if (e.shiftKey) {
+			const pages = webPages.data || [];
+			// select all pages between the last selected page and the current page
+			const lastSelectedPage = selectedPages.value.size
+				? pages.find((p: BuilderPage) => p.name === Array.from(selectedPages.value)[0])
+				: null;
+			if (lastSelectedPage) {
+				const lastSelectedPageIndex = pages.indexOf(lastSelectedPage);
+				const currentPageIndex = pages.indexOf(page);
+				const start = Math.min(lastSelectedPageIndex, currentPageIndex);
+				const end = Math.max(lastSelectedPageIndex, currentPageIndex);
+				for (let i = start; i <= end; i++) {
+					const p = pages[i];
+					selectedPages.value.add(p.name);
+				}
+			}
+		} else if (e.ctrlKey || e.metaKey) {
+			togglePageSelection(page);
+		} else {
+			selectedPages.value.clear();
+			togglePageSelection(page);
+		}
+	} else {
+		posthog.capture("builder_page_opened", { page_name: page.page_name });
+	}
+};
+
+const enableSelectionMode = (page: BuilderPage) => {
+	selectionMode.value = true;
+	firstHold.value = true;
+	togglePageSelection(page);
+};
+
+const togglePageSelection = (page: BuilderPage) => {
+	if (selectedPages.value.has(page.name)) {
+		selectedPages.value.delete(page.name);
+	} else {
+		selectedPages.value.add(page.name);
+	}
+	// Disable selection mode if no pages are selected
+	if (!selectedPages.value.size) {
+		selectionMode.value = false;
+	}
+};
+
+watchDebounced([searchFilter, typeFilter, orderBy], fetchPages, {
+	debounce: 300,
+	immediate: true,
+});
+
+const setFolder = async (folder: string) => {
+	createResource({
+		method: "POST",
+		url: "builder.api.update_page_folder",
+	})
+		.submit({
+			pages: Array.from(selectedPages.value),
+			folder_name: folder,
+		})
+		.then(() => {
+			for (const pageName of selectedPages.value) {
+				const page = webPages.data?.find((p: BuilderPage) => p.name === pageName);
+				if (page) {
+					page.project_folder = folder;
+				}
+			}
+			selectedPages.value.clear();
+			selectionMode.value = false;
+			showFolderSelectorDialog.value = false;
+			builderStore.activeFolder = folder;
+		});
+};
+</script>
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 8cdc6b80c..e5e96bc3c 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<section
-		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden">
+		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-3 border-r border-outline-gray-1 bg-surface-gray-1 p-2 max-lg:hidden dark:bg-surface-white">
 		<div class="flex flex-col">
 			<div class="mb-2 flex gap-2">
 				<div class="flex w-full items-center">
@@ -27,8 +27,8 @@
 								items: [
 									{
 										label: 'Apps',
-										component: AppsMenu,
 										icon: 'grid',
+										submenu: appsSubmenu,
 									},
 									{
 										label: 'Toggle Theme',
@@ -57,12 +57,11 @@
 								],
 							},
 						]"
-						size="sm"
-						class="flex-1 [&>div>div>div]:w-full"
-						placement="right">
+						:offset="8"
+						size="sm">
 						<template v-slot="{ open }">
 							<div
-								class="flex items-center justify-between rounded py-1"
+								class="flex w-full items-center justify-between rounded py-1"
 								:class="{
 									'!bg-surface-white shadow-sm dark:!bg-surface-gray-2': open,
 									'!p-2 hover:bg-surface-gray-2': true,
@@ -168,7 +167,6 @@
 	</section>
 	<Dialog
 		v-model="showSettingsDialog"
-		style="z-index: 40"
 		:disableOutsideClickToClose="true"
 		class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
 		:options="{
@@ -181,7 +179,6 @@
 	</Dialog>
 </template>
 <script lang="ts" setup>
-import AppsMenu from "@/components/AppsMenu.vue";
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
 import EditableSpan from "@/components/EditableSpan.vue";
 import FilesIcon from "@/components/Icons/Files.vue";
@@ -195,7 +192,7 @@ import { confirm } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
 import { createResource, Dialog, Dropdown, Tooltip } from "frappe-ui";
 import { TrialBanner } from "frappe-ui/frappe";
-import { defineAsyncComponent, ref } from "vue";
+import { computed, defineAsyncComponent, h, ref } from "vue";
 
 const BuilderSettings = defineAsyncComponent(() => import("@/components/BuilderSettings.vue"));
 const isDark = useDark({
@@ -206,6 +203,20 @@ const builderStore = useBuilderStore();
 const renamingFolder = ref("");
 const showNewFolderDialog = ref(false);
 
+const apps = createResource({
+	url: "builder.api.get_apps",
+	cache: "other_apps",
+	auto: true,
+});
+
+const appsSubmenu = computed(() => {
+	return (apps.data || []).map((app: { route: string; logo: string; title: string }) => ({
+		label: app.title,
+		icon: h("img", { src: app.logo }),
+		onClick: () => window.open(app.route, "_self"),
+	}));
+});
+
 const isFolderActive = (folderName: string) => {
 	return builderStore.activeFolder === folderName;
 };
diff --git a/frontend/src/components/DashboardToolbar.vue b/frontend/src/components/DashboardToolbar.vue
new file mode 100644
index 000000000..3c0d069a2
--- /dev/null
+++ b/frontend/src/components/DashboardToolbar.vue
@@ -0,0 +1,25 @@
+<template>
+	<div
+		class="toolbar flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1">
+		<div class="flex gap-2">
+			<router-link
+				:to="{ name: 'builder', params: { pageId: 'new' } }"
+				@click="
+					() => {
+						posthog.capture('builder_new_page_created');
+					}
+				">
+				<BuilderButton
+					variant="solid"
+					iconLeft="plus"
+					class="bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6">
+					New
+				</BuilderButton>
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { posthog } from "@/telemetry";
+</script>
diff --git a/frontend/src/pages/PageBuilderDashboard.vue b/frontend/src/pages/PageBuilderDashboard.vue
index 482f28646..e86350ea3 100644
--- a/frontend/src/pages/PageBuilderDashboard.vue
+++ b/frontend/src/pages/PageBuilderDashboard.vue
@@ -1,324 +1,14 @@
 <template>
 	<div class="flex h-screen">
-		<!-- toolbar -->
 		<DashboardSidebar></DashboardSidebar>
 		<div class="flex w-full flex-1 flex-col overflow-hidden">
-			<div
-				class="toolbar sticky top-0 flex h-12 items-center justify-end border-b-[1px] border-outline-gray-1 bg-surface-white p-2 px-3 py-1"
-				ref="toolbar">
-				<div class="flex gap-2">
-					<router-link
-						:to="{ name: 'builder', params: { pageId: 'new' } }"
-						@click="
-							() => {
-								posthog.capture('builder_new_page_created');
-							}
-						">
-						<BuilderButton
-							variant="solid"
-							iconLeft="plus"
-							class="bg-surface-gray-7 !text-ink-white hover:bg-surface-gray-6">
-							New
-						</BuilderButton>
-					</router-link>
-				</div>
-			</div>
-			<div class="flex-1 overflow-auto">
-				<section class="m-auto mb-32 flex h-fit w-3/4 max-w-6xl flex-col pt-5">
-					<!-- pages -->
-					<div>
-						<div v-if="!webPages.data?.length && !searchFilter && !typeFilter" class="col-span-full">
-							<p class="px-3 text-base text-gray-500">
-								You don't have any pages yet. Click on the "+ New" button to create a new page.
-							</p>
-						</div>
-						<div v-else-if="!webPages.data?.length" class="col-span-full">
-							<p class="text-base text-gray-500">No matching pages found.</p>
-						</div>
-						<!-- grid -->
-						<div class="grid-col grid gap-3 auto-fill-[220px]" v-if="displayType === 'grid'">
-							<PageCard
-								v-for="page in webPages.data"
-								:selected="selectedPages.has(page.name)"
-								@click.capture="($event: MouseEvent) => handleClick($event, page)"
-								:key="page.page_name"
-								:page="page"
-								v-on-click-and-hold="() => enableSelectionMode(page)"></PageCard>
-						</div>
-						<!-- list -->
-						<div v-if="displayType === 'list'">
-							<PageListItem
-								@click.capture="($event: MouseEvent) => handleClick($event, page)"
-								v-for="page in webPages.data"
-								:selected="selectedPages.has(page.name)"
-								:key="page.page_name"
-								:page="page"
-								v-on-click-and-hold="() => enableSelectionMode(page)"></PageListItem>
-						</div>
-					</div>
-					<BuilderButton
-						class="m-auto mt-12 w-fit text-sm"
-						@click="loadMore"
-						v-if="webPages.data.length && webPages.hasNextPage"
-						variant="subtle"
-						size="sm">
-						Load More
-					</BuilderButton>
-					<!-- list head -->
-					<div
-						class="sticky top-0 order-[-1] mb-8 flex items-center justify-between bg-surface-white px-3 py-5">
-						<h1 class="text-xl font-semibold text-ink-gray-9">
-							{{ builderStore.activeFolder || "All Pages" }}
-						</h1>
-						<div class="flex gap-2">
-							<div>
-								<Button
-									variant="solid"
-									v-if="selectionMode && selectedPages.size"
-									@click="showFolderSelectorDialog = true">
-									Move To Folder
-								</Button>
-							</div>
-							<div class="relative flex" v-show="!selectionMode">
-								<BuilderInput
-									class="w-48"
-									type="text"
-									placeholder="Filter by title or route"
-									v-model="searchFilter"
-									autofocus
-									@input="
-										(value: string) => {
-											searchFilter = value;
-										}
-									">
-									<template #prefix>
-										<FeatherIcon name="search" class="size-4 text-ink-gray-5"></FeatherIcon>
-									</template>
-								</BuilderInput>
-							</div>
-							<div class="max-md:hidden" v-show="!selectionMode">
-								<Select
-									v-model="typeFilter"
-									:options="[
-										{ label: 'All', value: '' },
-										{ label: 'Draft', value: 'draft' },
-										{ label: 'Published', value: 'published' },
-										{ label: 'Unpublished', value: 'unpublished' },
-									]" />
-							</div>
-							<div class="max-sm:hidden" v-show="!selectionMode">
-								<Select
-									v-model="orderBy"
-									:options="[
-										{ label: 'Sort', value: '', disabled: true },
-										{ label: 'Last Created', value: 'creation' },
-										{ label: 'Last Modified', value: 'modified' },
-										{
-											label: 'Alphabetically (A-Z)',
-											value: 'alphabetically_a_z',
-										},
-										{
-											label: 'Alphabetically (Z-A)',
-											value: 'alphabetically_z_a',
-										},
-									]" />
-							</div>
-							<div class="max-md:hidden">
-								<OptionToggle
-									class="[&>div]:min-w-0"
-									:options="[
-										{
-											label: 'Grid',
-											value: 'grid',
-											icon: 'grid',
-											hideLabel: true,
-										},
-										{
-											label: 'List',
-											value: 'list',
-											icon: 'list',
-											hideLabel: true,
-										},
-									]"
-									v-model="displayType"></OptionToggle>
-							</div>
-						</div>
-					</div>
-				</section>
-			</div>
+			<DashboardToolbar class="sticky top-0" />
+			<DashboardContent />
 		</div>
-		<SelectFolder
-			v-model="showFolderSelectorDialog"
-			:currentFolder="builderStore.activeFolder"
-			@folderSelected="setFolder"></SelectFolder>
 	</div>
 </template>
 <script setup lang="ts">
-import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import DashboardContent from "@/components/DashboardContent.vue";
 import DashboardSidebar from "@/components/DashboardSidebar.vue";
-import SelectFolder from "@/components/Modals/SelectFolder.vue";
-import PageCard from "@/components/PageCard.vue";
-import PageListItem from "@/components/PageListItem.vue";
-import { webPages } from "@/data/webPage";
-import vOnClickAndHold from "@/directives/vOnClickAndHold";
-import useBuilderStore from "@/stores/builderStore";
-import { posthog } from "@/telemetry";
-import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { useEventListener, useStorage, watchDebounced } from "@vueuse/core";
-import { Button, createResource, Select } from "frappe-ui";
-import { onActivated, Ref, ref, watch } from "vue";
-
-const builderStore = useBuilderStore();
-const displayType = useStorage("displayType", "grid") as Ref<"grid" | "list">;
-const showFolderSelectorDialog = ref(false);
-
-const searchFilter = ref("");
-const typeFilter = useStorage("typeFilter", "") as Ref<"" | "draft" | "published" | "unpublished">;
-const orderBy = useStorage("orderBy", "creation") as Ref<
-	"creation" | "modified" | "alphabetically_a_z" | "alphabetically_z_a"
->;
-
-const orderMap = {
-	creation: "creation desc",
-	modified: "modified desc",
-	alphabetically_a_z: "page_title asc",
-	alphabetically_z_a: "page_title desc",
-};
-
-const selectedPages = ref(new Set<string>());
-const selectionMode = ref(false);
-
-onActivated(() => {
-	posthog.capture("builder_dashboard_page_visited");
-});
-
-watch(
-	() => builderStore.activeFolder,
-	() => fetchPages(),
-);
-
-// remove selection mode when the escape key is pressed
-useEventListener(document, "keydown", (ev) => {
-	if (ev.key === "Escape") {
-		selectedPages.value.clear();
-		selectionMode.value = false;
-	}
-});
-
-const fetchPages = () => {
-	const filters = {
-		is_template: 0,
-	} as any;
-	if (typeFilter.value) {
-		if (typeFilter.value === "published") {
-			filters["published"] = true;
-		} else if (typeFilter.value === "unpublished") {
-			filters["published"] = false;
-		} else if (typeFilter.value === "draft") {
-			filters["draft_blocks"] = ["is", "set"];
-		}
-	}
-	const orFilters = {} as any;
-	if (searchFilter.value) {
-		orFilters["page_title"] = ["like", `%${searchFilter.value}%`];
-		orFilters["route"] = ["like", `%${searchFilter.value}%`];
-	}
-	if (builderStore.activeFolder) {
-		filters["project_folder"] = builderStore.activeFolder;
-	}
-
-	webPages.update({
-		filters,
-		orFilters,
-		orderBy: orderMap[orderBy.value],
-	});
-	webPages.fetch();
-};
-
-const loadMore = () => {
-	webPages.next();
-};
-
-const firstHold = ref(false);
-
-const handleClick = (e: MouseEvent, page: BuilderPage) => {
-	if (selectionMode.value) {
-		e.preventDefault();
-		e.stopPropagation();
-		if (firstHold.value) {
-			firstHold.value = false;
-			return;
-		}
-		if (e.shiftKey) {
-			const pages = webPages.data || [];
-			// select all pages between the last selected page and the current page
-			const lastSelectedPage = selectedPages.value.size
-				? pages.find((p: BuilderPage) => p.name === Array.from(selectedPages.value)[0])
-				: null;
-			if (lastSelectedPage) {
-				const lastSelectedPageIndex = pages.indexOf(lastSelectedPage);
-				const currentPageIndex = pages.indexOf(page);
-				const start = Math.min(lastSelectedPageIndex, currentPageIndex);
-				const end = Math.max(lastSelectedPageIndex, currentPageIndex);
-				for (let i = start; i <= end; i++) {
-					const p = pages[i];
-					selectedPages.value.add(p.name);
-				}
-			}
-		} else if (e.ctrlKey || e.metaKey) {
-			togglePageSelection(page);
-		} else {
-			selectedPages.value.clear();
-			togglePageSelection(page);
-		}
-	} else {
-		posthog.capture("builder_page_opened", { page_name: page.page_name });
-	}
-};
-
-const enableSelectionMode = (page: BuilderPage) => {
-	selectionMode.value = true;
-	firstHold.value = true;
-	togglePageSelection(page);
-};
-
-const togglePageSelection = (page: BuilderPage) => {
-	if (selectedPages.value.has(page.name)) {
-		selectedPages.value.delete(page.name);
-	} else {
-		selectedPages.value.add(page.name);
-	}
-	// Disable selection mode if no pages are selected
-	if (!selectedPages.value.size) {
-		selectionMode.value = false;
-	}
-};
-
-watchDebounced([searchFilter, typeFilter, orderBy], fetchPages, {
-	debounce: 300,
-	immediate: true,
-});
-
-const setFolder = async (folder: string) => {
-	createResource({
-		method: "POST",
-		url: "builder.api.update_page_folder",
-	})
-		.submit({
-			pages: Array.from(selectedPages.value),
-			folder_name: folder,
-		})
-		.then(() => {
-			for (const pageName of selectedPages.value) {
-				const page = webPages.data?.find((p: BuilderPage) => p.name === pageName);
-				if (page) {
-					page.project_folder = folder;
-				}
-			}
-			selectedPages.value.clear();
-			selectionMode.value = false;
-			showFolderSelectorDialog.value = false;
-			builderStore.activeFolder = folder;
-		});
-};
+import DashboardToolbar from "@/components/DashboardToolbar.vue";
 </script>

From d87ab60a3853ad27e409cdd5066f18290abb6fe5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 17 Dec 2025 12:45:02 +0530
Subject: [PATCH 156/547] refactor(PageBuilder): Rearrange DOM structure

- to fix stacking order and avoid unexpected overlap over dialogs
---
 frontend/src/pages/PageBuilder.vue | 199 ++++++++++++++---------------
 1 file changed, 99 insertions(+), 100 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index cb7186bd1..46c99c5f4 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -6,105 +6,106 @@
 			<p class="text-p-base">Please switch to a larger screen to edit</p>
 		</div>
 	</div>
-	<div v-show="!isSmallScreen" class="page-builder h-screen flex-col overflow-hidden bg-surface-gray-1">
-		<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
-		<BuilderToolbar class="relative z-30"></BuilderToolbar>
-		<div>
-			<BuilderLeftPanel
-				v-show="builderStore.showLeftPanel"
-				class="absolute bottom-0 left-0 top-[var(--toolbar-height)] z-[21] border-r-[1px] border-outline-gray-2 bg-surface-white"></BuilderLeftPanel>
-			<BuilderCanvas
-				ref="fragmentCanvas"
-				:key="canvasStore.fragmentData.block?.blockId"
-				v-if="canvasStore.editingMode === 'fragment' && canvasStore.fragmentData.block"
-				:block-data="canvasStore.fragmentData.block"
-				:canvas-styles="{
-					width: (canvasStore.fragmentData.block.getStyle('width') + '').endsWith('px')
-						? '!fit-content'
-						: null,
-					padding: '40px',
-				}"
-				:style="{
-					left: `${
-						builderStore.showLeftPanel
-							? builderStore.builderLayout.leftPanelWidth + builderStore.builderLayout.optionsPanelWidth
-							: 0
-					}px`,
-					right: `${builderStore.showRightPanel ? builderStore.builderLayout.rightPanelWidth : 0}px`,
-				}"
-				class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-2 p-10">
-				<template v-slot:header>
-					<div
-						class="absolute left-0 right-0 top-0 z-20 flex items-center justify-between bg-surface-white p-2 text-sm text-ink-gray-8 shadow-sm">
-						<div class="flex items-center gap-1 pl-2 text-xs">
-							<a @click="canvasStore.exitFragmentMode" class="cursor-pointer">Page</a>
-							<FeatherIcon name="chevron-right" class="h-3 w-3" />
-							<span class="flex items-center gap-2">
-								{{ canvasStore.fragmentData.fragmentName }}
-								<a
-									@click="pageListDialog = true"
-									class="cursor-pointer text-ink-gray-4 underline"
-									v-if="canvasStore.fragmentData.showUsageCount">
-									{{ usageMessage }}
-								</a>
-							</span>
-						</div>
-						<BuilderButton variant="solid" class="text-xs" @click="saveAndExitFragmentMode">
-							{{ canvasStore.fragmentData.saveActionLabel || "Save" }}
-						</BuilderButton>
+	<div v-show="!isSmallScreen" class="page-builder relative h-screen overflow-hidden bg-surface-gray-1">
+		<!-- Canvas layer (bottom) - comes first in DOM -->
+		<BuilderCanvas
+			ref="fragmentCanvas"
+			:key="canvasStore.fragmentData.block?.blockId"
+			v-if="canvasStore.editingMode === 'fragment' && canvasStore.fragmentData.block"
+			:block-data="canvasStore.fragmentData.block"
+			:canvas-styles="{
+				width: (canvasStore.fragmentData.block.getStyle('width') + '').endsWith('px') ? '!fit-content' : null,
+				padding: '40px',
+			}"
+			:style="{
+				top: 'var(--toolbar-height)',
+				left: `${
+					builderStore.showLeftPanel
+						? builderStore.builderLayout.leftPanelWidth + builderStore.builderLayout.optionsPanelWidth
+						: 0
+				}px`,
+				right: `${builderStore.showRightPanel ? builderStore.builderLayout.rightPanelWidth : 0}px`,
+			}"
+			class="canvas-container absolute bottom-0 flex justify-center overflow-hidden bg-surface-gray-2 p-10">
+			<template v-slot:header>
+				<div class="flex items-center justify-between bg-surface-white p-2 text-sm text-ink-gray-8 shadow-sm">
+					<div class="flex items-center gap-1 pl-2 text-xs">
+						<a @click="canvasStore.exitFragmentMode" class="cursor-pointer">Page</a>
+						<FeatherIcon name="chevron-right" class="h-3 w-3" />
+						<span class="flex items-center gap-2">
+							{{ canvasStore.fragmentData.fragmentName }}
+							<a
+								@click="pageListDialog = true"
+								class="cursor-pointer text-ink-gray-4 underline"
+								v-if="canvasStore.fragmentData.showUsageCount">
+								{{ usageMessage }}
+							</a>
+						</span>
 					</div>
-				</template>
-			</BuilderCanvas>
-			<BuilderCanvas
-				v-show="canvasStore.editingMode === 'page'"
-				ref="pageCanvas"
-				v-if="pageStore.pageBlocks[0]"
-				:block-data="pageStore.pageBlocks[0]"
-				:canvas-styles="{
-					minHeight: '1000px',
-				}"
-				:style="{
-					left: `${
-						builderStore.showLeftPanel
-							? builderStore.builderLayout.leftPanelWidth + builderStore.builderLayout.optionsPanelWidth
-							: 0
-					}px`,
-					right: `${builderStore.showRightPanel ? builderStore.builderLayout.rightPanelWidth : 0}px`,
-				}"
-				class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-1 p-10"></BuilderCanvas>
-			<BuilderRightPanel
-				v-show="builderStore.showRightPanel"
-				class="no-scrollbar absolute bottom-0 right-0 top-[var(--toolbar-height)] z-20 overflow-auto border-l-[1px] border-outline-gray-2 bg-surface-white"></BuilderRightPanel>
-			<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
-			<Dialog
-				style="z-index: 40"
-				v-model="canvasStore.showHTMLDialog"
-				class="overscroll-none"
-				:isDirty="htmlEditor?.isDirty"
-				:options="{
-					title: 'HTML',
-					size: '7xl',
-				}">
-				<template #body-content>
-					<CodeEditor
-						:modelValue="canvasStore.editableBlock?.getInnerHTML()"
-						ref="htmlEditor"
-						type="HTML"
-						height="68vh"
-						label="Edit HTML"
-						:showLineNumbers="true"
-						:showSaveButton="true"
-						@save="
-							(val) => {
-								canvasStore.editableBlock?.setInnerHTML(val);
-								canvasStore.showHTMLDialog = false;
-							}
-						"
-						required />
-				</template>
-			</Dialog>
-		</div>
+					<BuilderButton variant="solid" class="text-xs" @click="saveAndExitFragmentMode">
+						{{ canvasStore.fragmentData.saveActionLabel || "Save" }}
+					</BuilderButton>
+				</div>
+			</template>
+		</BuilderCanvas>
+		<BuilderCanvas
+			v-show="canvasStore.editingMode === 'page'"
+			ref="pageCanvas"
+			v-if="pageStore.pageBlocks[0]"
+			:block-data="pageStore.pageBlocks[0]"
+			:canvas-styles="{
+				minHeight: '1000px',
+			}"
+			:style="{
+				top: 'var(--toolbar-height)',
+				left: `${
+					builderStore.showLeftPanel
+						? builderStore.builderLayout.leftPanelWidth + builderStore.builderLayout.optionsPanelWidth
+						: 0
+				}px`,
+				right: `${builderStore.showRightPanel ? builderStore.builderLayout.rightPanelWidth : 0}px`,
+			}"
+			class="canvas-container absolute bottom-0 flex justify-center overflow-hidden bg-surface-gray-1 p-10"></BuilderCanvas>
+
+		<!-- Panels layer (middle) - comes after canvas in DOM -->
+		<BuilderLeftPanel
+			v-show="builderStore.showLeftPanel"
+			class="absolute bottom-0 left-0 top-[var(--toolbar-height)] w-fit border-r-[1px] border-outline-gray-2 bg-surface-white"></BuilderLeftPanel>
+		<BuilderRightPanel
+			v-show="builderStore.showRightPanel"
+			class="no-scrollbar absolute bottom-0 right-0 top-[var(--toolbar-height)] overflow-auto border-l-[1px] border-outline-gray-2 bg-surface-white"></BuilderRightPanel>
+
+		<!-- Toolbar layer (top) - comes last in DOM -->
+		<BuilderToolbar class="absolute left-0 right-0 top-0"></BuilderToolbar>
 	</div>
+	<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
+	<Dialog
+		v-model="canvasStore.showHTMLDialog"
+		class="overscroll-none"
+		:isDirty="htmlEditor?.isDirty"
+		:options="{
+			title: 'HTML',
+			size: '7xl',
+		}">
+		<template #body-content>
+			<CodeEditor
+				:modelValue="canvasStore.editableBlock?.getInnerHTML()"
+				ref="htmlEditor"
+				type="HTML"
+				height="68vh"
+				label="Edit HTML"
+				:showLineNumbers="true"
+				:showSaveButton="true"
+				@save="
+					(val) => {
+						canvasStore.editableBlock?.setInnerHTML(val);
+						canvasStore.showHTMLDialog = false;
+					}
+				"
+				required />
+		</template>
+	</Dialog>
+	<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
 </template>
 
 <script setup lang="ts">
@@ -133,7 +134,7 @@ import {
 	useMagicKeys,
 } from "@vueuse/core";
 import { createResource } from "frappe-ui";
-import { computed, onActivated, onDeactivated, provide, ref, toRef, watch, watchEffect } from "vue";
+import { computed, onActivated, onDeactivated, provide, ref, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
@@ -179,8 +180,6 @@ const notUsingInput = computed(
 	() => activeElement.value?.tagName !== "INPUT" && activeElement.value?.tagName !== "TEXTAREA",
 );
 
-const blockContextMenu = toRef(builderStore, "blockContextMenu");
-
 const { space } = useMagicKeys({
 	passive: false,
 	onEventFired(e) {

From bf13042f34f4126cc432caf19ca2e9ba837f9624 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 17 Dec 2025 13:57:53 +0530
Subject: [PATCH 157/547] fix: Remove almost all usages of z-index

- Fix the stacking order by re-organizing elments instead of using z-index
---
 frontend/src/App.vue                          |  4 ---
 frontend/src/components/BackgroundHandler.vue |  2 +-
 frontend/src/components/BlockEditor.vue       |  4 +--
 frontend/src/components/BlockProperties.vue   | 26 +++++++++----------
 frontend/src/components/BuilderCanvas.vue     | 14 +++++-----
 frontend/src/components/BuilderToolbar.vue    | 16 +++---------
 frontend/src/components/ContextMenu.vue       |  2 +-
 .../src/components/Controls/Autocomplete.vue  |  2 +-
 .../src/components/Controls/CodeEditor.vue    |  2 +-
 .../src/components/Controls/ColorPicker.vue   | 14 +++++++---
 .../components/Controls/DraggablePopup.vue    |  2 +-
 .../components/Controls/PropertyControl.vue   |  8 +++---
 frontend/src/components/ImageUploadInput.vue  |  2 +-
 frontend/src/components/MainMenu.vue          |  2 +-
 .../components/Modals/NewBlockTemplate.vue    |  1 -
 .../src/components/Modals/NewComponent.vue    |  1 -
 frontend/src/components/PageScript.vue        |  1 -
 frontend/src/components/PanelResizer.vue      |  1 -
 frontend/src/components/PublishButton.vue     |  2 +-
 .../components/Settings/AnalyticsFilters.vue  |  4 ++-
 frontend/src/components/TextBlock.vue         |  4 +--
 21 files changed, 53 insertions(+), 61 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 65f3831c6..e682ca090 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -41,10 +41,6 @@ const title = computed(() => {
 useTitle(title);
 </script>
 <style>
-[id^="headlessui-dialog"] {
-	@apply z-50;
-}
-
 [id^="headlessui-dialog-panel"] {
 	@apply bg-surface-gray-1;
 	@apply dark:border-outline-gray-1;
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 65537c338..dcfeb7b9f 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -14,7 +14,7 @@
 					@update:modelValue="setBGImageURL">
 					<template #prefix>
 						<div
-							class="absolute left-2 top-[6px] z-10 h-4 w-4 cursor-pointer rounded shadow-sm"
+							class="absolute left-2 top-[6px] h-4 w-4 cursor-pointer rounded shadow-sm"
 							@click="togglePopover"
 							:class="{ 'bg-surface-gray-4': !Boolean(backgroundImage) }"
 							:style="previewStyle" />
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index c6781d92b..be507cd05 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="editor pointer-events-none fixed z-[18] box-content select-none ring-2 ring-inset"
+		class="editor pointer-events-none fixed box-content select-none ring-2 ring-inset"
 		ref="editor"
 		:selected="isBlockSelected"
 		@click.stop="handleClick"
@@ -183,8 +183,6 @@ const getStyleClasses = computed(() => {
 	) {
 		// make editor interactive
 		classes.push("pointer-events-auto");
-		// Place the block on the top of the stack
-		classes.push("!z-[19]");
 	}
 	return classes;
 });
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index d2f97b44c..c29c69365 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -1,18 +1,6 @@
 <template>
 	<div v-if="blockController.isBlockSelected()" class="flex select-none flex-col pb-16">
-		<div class="sticky top-0 z-50 mt-[-16px] flex w-full bg-surface-white py-3">
-			<BuilderInput
-				ref="searchInput"
-				type="text"
-				placeholder="Search properties"
-				v-model="builderStore.propertyFilter"
-				@input="
-					(value: string) => {
-						builderStore.propertyFilter = value;
-					}
-				" />
-		</div>
-		<div class="mt-1 flex flex-col gap-3">
+		<div class="order-1 mt-1 flex flex-col gap-3">
 			<CollapsibleSection
 				:sectionName="section.name"
 				v-for="section in sections"
@@ -26,6 +14,18 @@
 				</template>
 			</CollapsibleSection>
 		</div>
+		<div class="sticky top-0 mt-[-16px] flex w-full bg-surface-white py-3">
+			<BuilderInput
+				ref="searchInput"
+				type="text"
+				placeholder="Search properties"
+				v-model="builderStore.propertyFilter"
+				@input="
+					(value: string) => {
+						builderStore.propertyFilter = value;
+					}
+				" />
+		</div>
 	</div>
 	<div v-else>
 		<p class="mt-2 text-center text-sm text-ink-gray-6">Select a block to edit properties</p>
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index c11ae3c49..03f904ebd 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -1,14 +1,9 @@
 <template>
 	<div ref="canvasContainer" @click="handleClick">
 		<slot name="header"></slot>
-		<div
-			class="overlay absolute"
-			:class="{ 'pointer-events-none': isOverDropZone }"
-			id="overlay"
-			ref="overlay" />
 		<Transition name="fade">
 			<div
-				class="absolute bottom-0 left-0 right-0 top-0 z-[19] grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
+				class="absolute bottom-0 left-0 right-0 top-0 grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
 				v-show="pageStore.settingPage">
 				<LoadingIcon></LoadingIcon>
 			</div>
@@ -69,13 +64,18 @@
 			</div>
 		</div>
 		<div
-			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-ink-gray-7 shadow-md"
+			class="fixed bottom-12 left-[50%] flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-ink-gray-7 shadow-md"
 			v-show="!canvasProps.panning">
 			{{ Math.round(canvasProps.scale * 100) + "%" }}
 			<div class="ml-2 cursor-pointer" @click="setScaleAndTranslate">
 				<FitScreenIcon />
 			</div>
 		</div>
+		<div
+			class="overlay absolute"
+			:class="{ 'pointer-events-none': isOverDropZone }"
+			id="overlay"
+			ref="overlay" />
 		<DraggablePopup
 			v-model="builderStore.showSearchBlock"
 			:container="canvasContainer"
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 816437d8d..3c7401f4a 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -75,7 +75,7 @@
 		<div class="absolute right-3 flex items-center gap-5">
 			<!-- show dark mode toggle -->
 			<Badge variant="subtle" theme="orange" v-if="builderStore.readOnlyMode">Read Only</Badge>
-			<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6">
+			<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6" arrow-class="mb-3">
 				<FeatherIcon
 					:name="isDark ? 'sun' : 'moon'"
 					class="h-4 w-4 cursor-pointer text-ink-gray-8 outline-none"
@@ -83,7 +83,6 @@
 			</Tooltip>
 
 			<Dialog
-				style="z-index: 40"
 				:options="{
 					title: 'Get Started',
 					size: '4xl',
@@ -100,7 +99,7 @@
 			</Dialog>
 			<div class="group flex hover:gap-1" v-if="builderStore.viewers.length">
 				<div v-for="user in builderStore.viewers">
-					<Tooltip :text="currentlyViewedByText" :hoverDelay="0.6">
+					<Tooltip :text="currentlyViewedByText" :hoverDelay="0.6" arrow-class="mb-3">
 						<div class="ml-[-10px] h-6 w-6 cursor-pointer transition-all group-hover:ml-0">
 							<img
 								class="h-full w-full rounded-full border-2 border-orange-400 object-cover shadow-sm"
@@ -119,14 +118,13 @@
 			<span class="text-sm text-ink-gray-3" v-if="pageStore.savingPage && pageStore.activePage?.is_template">
 				Saving template
 			</span>
-			<Tooltip text="Settings" :hoverDelay="0.6">
+			<Tooltip text="Settings" :hoverDelay="0.6" arrow-class="mb-3">
 				<SettingsGearIcon
 					@click="showSettingsDialog = true"
 					class="size-4 cursor-pointer text-ink-gray-8"></SettingsGearIcon>
 			</Tooltip>
 			<Dialog
 				v-model="showSettingsDialog"
-				style="z-index: 40"
 				:disableOutsideClickToClose="true"
 				class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
 				:options="{
@@ -139,7 +137,7 @@
 			</Dialog>
 
 			<router-link :to="{ name: 'preview', params: { pageId: pageStore.selectedPage } }" title="Preview">
-				<Tooltip text="Preview" :hoverDelay="0.6">
+				<Tooltip text="Preview" :hoverDelay="0.6" arrow-class="mb-3">
 					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-ink-gray-8"></PlayIcon>
 				</Tooltip>
 			</router-link>
@@ -250,9 +248,3 @@ const saveAsTemplate = async () => {
 	);
 };
 </script>
-<style>
-[data-radix-popper-content-wrapper] {
-	margin-top: 15px !important;
-	z-index: 20 !important;
-}
-</style>
diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
index 22787cf10..2dcfd0c6d 100644
--- a/frontend/src/components/ContextMenu.vue
+++ b/frontend/src/components/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
 	<Menu
 		v-if="visible"
-		class="fixed z-50 h-fit w-fit min-w-[120px] rounded-md bg-surface-white p-1 shadow-xl"
+		class="fixed h-fit w-fit min-w-[120px] rounded-md bg-surface-white p-1 shadow-xl"
 		:style="{ top: y + 'px', left: x + 'px' }"
 		ref="menu"
 		v-on-click-outside="hide">
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index d51dde67f..bb690f5b1 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -30,7 +30,7 @@
 			</div>
 
 			<ComboboxContent
-				class="absolute z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
+				class="absolute z-10 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
 				<div class="overflow-y-auto p-1">
 					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
 						<ComboboxSeparator
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index b8ef9dab7..bba965715 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -4,7 +4,7 @@
 			{{ label }}
 			<span v-if="isDirty" class="text-[10px] text-gray-600">●</span>
 		</span>
-		<div v-if="actionButton" class="absolute bottom-1.5 right-1.5 z-10 flex gap-1">
+		<div v-if="actionButton" class="absolute bottom-1.5 right-1.5 flex gap-1">
 			<BuilderButton
 				@click="actionButton?.handler"
 				variant="subtle"
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index b9ef87f20..ba81b7074 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -147,13 +147,21 @@ const props = withDefaults(
 	defineProps<{
 		modelValue?: CSSColorValue | null;
 		showInput?: boolean;
-		placement?: string;
+		placement?:
+			| "bottom-start"
+			| "top-start"
+			| "top-end"
+			| "bottom-end"
+			| "right-start"
+			| "right-end"
+			| "left-start"
+			| "left-end";
 		renderMode?: "popover" | "inline";
 	}>(),
 	{
 		modelValue: null,
 		showInput: false,
-		placement: "left",
+		placement: "left-start",
 		renderMode: "popover",
 	},
 );
@@ -240,7 +248,7 @@ const handleInputChange = (color: HashString) => {
 };
 
 const setColorSelectorPosition = (color: string) => {
-	const { width, height } = colorMap.value.getBoundingClientRect();
+	const { width, height } = colorMap.value?.getBoundingClientRect();
 	const { s, v } = HexToHSV(color as HashString);
 	let x = clamp(s * width, 0, width);
 	let y = clamp((1 - v) * height, 0, height);
diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index f70c49e0d..9b08960a6 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -1,7 +1,7 @@
 <template>
 	<teleport to="body">
 		<div class="relative" ref="popover">
-			<div class="fixed z-50" @mousedown.stop>
+			<div class="fixed" @mousedown.stop>
 				<div
 					ref="popoverContent"
 					class="fixed flex flex-col gap-1 overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-2xl"
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index 7e6d0a3c9..3e4475a88 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -73,14 +73,14 @@
 				</component>
 
 				<div
-					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
+					class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 					@click.stop="showDynamicValueModal = true"
 					v-if="dynamicValue">
 					<FeatherIcon name="zap" class="size-3"></FeatherIcon>
 					<span class="truncate">{{ dynamicValue }}</span>
 				</div>
 				<button
-					class="absolute right-1 top-1 z-20 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
+					class="absolute right-1 top-1 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
 					tabindex="-1"
 					v-show="dynamicValue"
 					@click="clearDynamicValue">
@@ -115,7 +115,7 @@
 					</component>
 					<button
 						type="button"
-						class="absolute right-1 top-1 z-10 text-ink-gray-7 hover:text-ink-gray-9"
+						class="absolute right-1 top-1 text-ink-gray-7 hover:text-ink-gray-9"
 						@click="clearState(state)">
 						<FeatherIcon name="x" class="h-3 w-3" />
 					</button>
@@ -127,7 +127,7 @@
 				class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
 				<button
 					type="button"
-					class="absolute left-[11px] z-10 hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
+					class="absolute left-[11px] hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
 					@click="clearState(state)">
 					<FeatherIcon name="x" class="h-3 w-3" />
 				</button>
diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index a3bff3d50..88d7ce730 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -20,7 +20,7 @@
 						:src="imageURL || '/assets/builder/images/fallback.png'"
 						alt=""
 						@click="togglePopover"
-						class="absolute bottom-[6px] left-2 z-10 h-4 w-4 rounded border border-outline-gray-3 shadow-sm"
+						class="absolute bottom-[6px] left-2 h-4 w-4 rounded border border-outline-gray-3 shadow-sm"
 						:style="{
 							'object-fit': imageFit || 'contain',
 						}" />
diff --git a/frontend/src/components/MainMenu.vue b/frontend/src/components/MainMenu.vue
index 8026b0bbc..5b5ca14ef 100644
--- a/frontend/src/components/MainMenu.vue
+++ b/frontend/src/components/MainMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dropdown :options="mainMenuOptions" size="sm" class="flex-1 [&>div>div>div]:w-full" placement="right">
+	<Dropdown :options="mainMenuOptions" size="sm" placement="left" :offset="18">
 		<template v-slot="{ open }">
 			<div class="flex cursor-pointer items-center gap-2">
 				<img src="/builder_logo.png" alt="logo" class="h-7" />
diff --git a/frontend/src/components/Modals/NewBlockTemplate.vue b/frontend/src/components/Modals/NewBlockTemplate.vue
index 591bb8fae..06c15f915 100644
--- a/frontend/src/components/Modals/NewBlockTemplate.vue
+++ b/frontend/src/components/Modals/NewBlockTemplate.vue
@@ -1,6 +1,5 @@
 <template>
 	<Dialog
-		style="z-index: 40"
 		:options="{
 			title: 'Save as Block Template',
 			size: 'sm',
diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index 05f458941..fee0b106b 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -1,6 +1,5 @@
 <template>
 	<Dialog
-		style="z-index: 40"
 		:options="{
 			title: 'New Component',
 			size: 'sm',
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 7b01da193..f449269b9 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -6,7 +6,6 @@
 		</div>
 		<CodeEditor v-model="pageStore.pageData" type="JSON" label="Data Preview" :readonly="true"></CodeEditor>
 		<Dialog
-			style="z-index: 40"
 			class="overscroll-none"
 			:options="{
 				title: currentScriptEditor == 'data' ? 'Data Script' : 'Client Script',
diff --git a/frontend/src/components/PanelResizer.vue b/frontend/src/components/PanelResizer.vue
index e004f462a..e9251cbb1 100644
--- a/frontend/src/components/PanelResizer.vue
+++ b/frontend/src/components/PanelResizer.vue
@@ -1,6 +1,5 @@
 <template>
 	<div
-		class="absolute z-20"
 		:class="{
 			'top-0 h-full w-1 hover:cursor-ew-resize': side === 'left' || side === 'right',
 			'left-0 right-0 h-1 hover:cursor-ns-resize': side === 'top' || side === 'bottom',
diff --git a/frontend/src/components/PublishButton.vue b/frontend/src/components/PublishButton.vue
index c8d4f10c6..05963c0b3 100644
--- a/frontend/src/components/PublishButton.vue
+++ b/frontend/src/components/PublishButton.vue
@@ -17,7 +17,7 @@
 			{{ publishButtonLabel }}
 		</BuilderButton>
 		<Dropdown
-			v-show="showDropdown"
+			v-if="showDropdown"
 			:options="[
 				{
 					label: 'Revert Changes',
diff --git a/frontend/src/components/Settings/AnalyticsFilters.vue b/frontend/src/components/Settings/AnalyticsFilters.vue
index 261492f4d..9051c5de1 100644
--- a/frontend/src/components/Settings/AnalyticsFilters.vue
+++ b/frontend/src/components/Settings/AnalyticsFilters.vue
@@ -8,7 +8,9 @@
 			:allowArbitraryValue="true"
 			:showInputAsOption="true"
 			class="w-44" />
-		<Select size="sm" v-model="modelRange" class="!w-32 pr-6" :options="rangeOptions" />
+		<div class="w-32">
+			<Select size="sm" v-model="modelRange" class="pr-6" :options="rangeOptions" />
+		</div>
 		<DateRangePicker
 			v-if="modelRange === 'custom'"
 			v-model="customDateRangeValue"
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 6c46eaa39..d8e757d0e 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -22,7 +22,7 @@
 				},
 			}"
 			v-if="editor"
-			class="z-50 rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-ink-gray-9 shadow-2xl"
+			class="rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-ink-gray-9 shadow-2xl"
 			:should-show="() => isEditable">
 			<div
 				v-if="settingLink"
@@ -171,7 +171,7 @@
 			"
 			@mouseup="selectionTriggered = false"
 			v-if="editor && showEditor"
-			class="relative z-50"
+			class="relative"
 			:style="block.getRawStyles()"
 			@keydown="handleKeydown" />
 		<slot />

From 8a27ea498f4869009f8f0754e3abaf83abc0fdc3 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 17 Dec 2025 17:36:31 +0530
Subject: [PATCH 158/547] fix(Code Editor): tab behaviour on multiline
 selection

---
 frontend/src/utils/createCodeMirrorState.ts | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/frontend/src/utils/createCodeMirrorState.ts b/frontend/src/utils/createCodeMirrorState.ts
index 1c49bc9a5..b325e9475 100644
--- a/frontend/src/utils/createCodeMirrorState.ts
+++ b/frontend/src/utils/createCodeMirrorState.ts
@@ -8,6 +8,8 @@ import {
 	defaultKeymap,
 	history,
 	historyKeymap,
+	indentMore,
+	indentLess,
 } from "@codemirror/commands";
 import {
 	bracketMatching,
@@ -112,20 +114,8 @@ export const createStartingState = async ({
 		keymap.of([
 			{
 				key: "Tab",
-				run: (view) => {
-					const spaces = "	";
-					view.dispatch({
-						changes: {
-							from: view.state.selection.main.from,
-							to: view.state.selection.main.to,
-							insert: spaces,
-						},
-						selection: {
-							anchor: view.state.selection.main.from + spaces.length,
-						},
-					});
-					return true;
-				},
+				run: indentMore,
+				shift: indentLess,
 			},
 		]),
 		EditorView.domEventHandlers({

From 3dce6a263a1eae1e683e4cb68982ac1f38f9caf6 Mon Sep 17 00:00:00 2001
From: Swastik Patel <swastikpatel29@gmail.com>
Date: Wed, 17 Dec 2025 17:38:04 +0530
Subject: [PATCH 159/547] refactor: new section for input-related properties

---
 frontend/src/components/BlockProperties.vue   |   2 +
 .../AccessibilitySection.ts                   |  94 ----------------
 .../InputOptionsSection.ts                    | 100 ++++++++++++++++++
 3 files changed, 102 insertions(+), 94 deletions(-)
 create mode 100644 frontend/src/components/BlockPropertySections/InputOptionsSection.ts

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index d2f97b44c..ddf5436d1 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -39,6 +39,7 @@ import dataKeySection from "@/components/BlockPropertySections/DataKeySection";
 import dimensionSection from "@/components/BlockPropertySections/DimenstionSection";
 import HTMLOptionsSection from "@/components/BlockPropertySections/HTMLOptionsSection";
 import imageOptionsSection from "@/components/BlockPropertySections/ImageOptionsSection";
+import inputOptionsSection from "@/components/BlockPropertySections/InputOptionsSection";
 import layoutSection from "@/components/BlockPropertySections/LayoutSection";
 import linkSection from "@/components/BlockPropertySections/LinkSection";
 import optionsSection from "@/components/BlockPropertySections/OptionsSection";
@@ -110,6 +111,7 @@ const sections = [
 	imageOptionsSection,
 	HTMLOptionsSection,
 	videoOptionsSection,
+	inputOptionsSection,
 	typographySection,
 	styleSection,
 	dimensionSection,
diff --git a/frontend/src/components/BlockPropertySections/AccessibilitySection.ts b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
index 1baef9bb0..0e569bf72 100644
--- a/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
+++ b/frontend/src/components/BlockPropertySections/AccessibilitySection.ts
@@ -1,5 +1,4 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
-import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 
@@ -43,99 +42,6 @@ const accessibilitySectionProperties = [
 		},
 		condition: () => !blockController.isRoot(),
 	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Input Type",
-				type: "select",
-				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color", "radio"],
-				modelValue: blockController.getAttribute("type") || "text",
-			};
-		},
-		searchKeyWords:
-			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, Radio, tag",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("type", val),
-		},
-		condition: () => blockController.isInput(),
-	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Placeholder",
-				modelValue: blockController.getAttribute("placeholder"),
-			};
-		},
-		searchKeyWords:
-			"Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
-		},
-		condition: () => blockController.isInput(),
-	},
-	// Radio button specific properties
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Radio Group Name",
-				modelValue: blockController.getAttribute("name") || "",
-				description:
-					"The group name for this radio button. Radio buttons with the same name are grouped together, allowing only one to be selected at a time.",
-			};
-		},
-		searchKeyWords: "Radio, Name, Group, RadioName, Radio Name, Group Name, input, radio button",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("name", val),
-		},
-		condition: () =>
-			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
-	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Radio Value",
-				modelValue: blockController.getAttribute("value") || "",
-				description:
-					"The value assigned to this radio button. When selected, this value will be submitted with the form.",
-			};
-		},
-		searchKeyWords: "Radio, Value, RadioValue, Radio Value, input, radio button",
-		events: {
-			"update:modelValue": (val: string) => blockController.setAttribute("value", val),
-		},
-		condition: () =>
-			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
-	},
-	{
-		component: OptionToggle,
-		getProps: () => {
-			return {
-				label: "Initially Checked",
-				options: [
-					{ label: "Yes", value: true },
-					{ label: "No", value: false },
-				],
-				modelValue:
-					blockController.getAttribute("checked") === "" || blockController.getAttribute("checked") === "checked",
-			};
-		},
-		searchKeyWords: "Checked, Radio, DefaultValue, Default Value, Selected, Initially Checked",
-		events: {
-			"update:modelValue": (val: boolean) => {
-				if (val) {
-					blockController.setAttribute("checked", "checked");
-				} else {
-					blockController.removeAttribute("checked");
-				}
-			},
-		},
-		condition: () =>
-			blockController.getKeyValue("element") === "input" && blockController.getAttribute("type") === "radio",
-	},
 	{
 		component: InlineInput,
 		getProps: () => ({
diff --git a/frontend/src/components/BlockPropertySections/InputOptionsSection.ts b/frontend/src/components/BlockPropertySections/InputOptionsSection.ts
new file mode 100644
index 000000000..caab6a6ee
--- /dev/null
+++ b/frontend/src/components/BlockPropertySections/InputOptionsSection.ts
@@ -0,0 +1,100 @@
+import InlineInput from "@/components/Controls/InlineInput.vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import blockController from "@/utils/blockController";
+
+const inputOptionsSectionProperties = [
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Type",
+				type: "select",
+				options: ["text", "number", "email", "password", "date", "time", "search", "tel", "url", "color", "radio"],
+				modelValue: blockController.getAttribute("type") || "text",
+			};
+		},
+		searchKeyWords:
+			"Input, Type, InputType, Input Type, Text, Number, Email, Password, Date, Time, Search, Tel, Url, Color, Radio, tag",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("type", val),
+		},
+	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Placeholder",
+				modelValue: blockController.getAttribute("placeholder"),
+			};
+		},
+		searchKeyWords:
+			"Placeholder, Input, PlaceholderText, Placeholder Text, form, input, text, number, email, password, date, time, search, tel, url, color, tag",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("placeholder", val),
+		},
+	},
+	// Radio button specific properties
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Name",
+				modelValue: blockController.getAttribute("name") || "",
+				description:
+					"Group name for this radio button. Radio buttons with the same name are grouped together.",
+			};
+		},
+		searchKeyWords: "Radio, Name, Group, RadioName, Radio Name, Group Name, input, radio button",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("name", val),
+		},
+		condition: () => blockController.getAttribute("type") === "radio",
+	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Value",
+				modelValue: blockController.getAttribute("value") || "",
+				description: "Value submitted with the form when this radio button is selected.",
+			};
+		},
+		searchKeyWords: "Radio, Value, RadioValue, Radio Value, input, radio button",
+		events: {
+			"update:modelValue": (val: string) => blockController.setAttribute("value", val),
+		},
+		condition: () => blockController.getAttribute("type") === "radio",
+	},
+	{
+		component: OptionToggle,
+		getProps: () => {
+			return {
+				label: "Checked",
+				options: [
+					{ label: "Yes", value: true },
+					{ label: "No", value: false },
+				],
+				modelValue:
+					blockController.getAttribute("checked") === "" || blockController.getAttribute("checked") === "checked",
+			};
+		},
+		searchKeyWords: "Checked, Radio, DefaultValue, Default Value, Selected, Initially Checked",
+		events: {
+			"update:modelValue": (val: boolean) => {
+				if (val) {
+					blockController.setAttribute("checked", "checked");
+				} else {
+					blockController.removeAttribute("checked");
+				}
+			},
+		},
+		condition: () => blockController.getAttribute("type") === "radio",
+	},
+];
+
+export default {
+	name: "Input Options",
+	properties: inputOptionsSectionProperties,
+	condition: () => blockController.isInput(),
+};
+

From 4c25b7d032accb31483bc15830ac83b455f2e2fc Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 17 Dec 2025 19:35:15 +0530
Subject: [PATCH 160/547] fix: properly handle block keys

---
 builder/builder/doctype/builder_page/builder_page.py | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 99e08b95f..48b9afa32 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -650,9 +650,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				elif block.get("dataKey").get("comesFrom") == "blockDataScript":
 					if data_key:
 						_key = f"{extract_data_key(data_key)}.{escape_single_quotes(_key)}"
+						loop_var = f"key_{_key.replace('.', '__')}"
 					else:
-						_key = f"block.{escape_single_quotes(_key)}"
-					loop_var = f"key_{_key.replace('.', '__')}"
+						loop_var = f"key_{_key}"
+						_key = f"block['{escape_single_quotes(_key)}']"
 					next_data_key = {"key": loop_var, "comesFrom": "blockDataScript"}
 				else:
 					if data_key:
@@ -933,6 +934,13 @@ def set_dynamic_content_placeholder(block, data_key=None):
 					key = f"{extract_data_key(data_key)}.{(dynamic_value_doc.get('key'))}"
 				else:
 					key = f"block.{original_key}"
+				if data_key:
+					# convert a.b to (a or {}).get('b', {})
+					# to avoid undefined error in jinja
+					keys = (key or "").split(".")
+					key = f"({keys[0]} or {{}})"
+					for k in keys[1:]:
+						key = f"{key}.get('{k}', {{}})"
 			else:
 				key = (
 					f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")

From 293aea093698e01c6631962bb3391a32951f8065 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 17 Dec 2025 20:08:49 +0530
Subject: [PATCH 161/547] refactor: separated own and passed down block data

---
 frontend/src/block.ts                    | 27 ++++++++++++++++++------
 frontend/src/components/BuilderBlock.vue | 17 +++++++++------
 frontend/src/components/PageScript.vue   | 12 +++++++++--
 frontend/src/data/blockData.ts           |  4 ++--
 frontend/src/utils/blockController.ts    |  8 +++----
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index d27c2584b..7b2939a8c 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -44,7 +44,8 @@ class Block implements BlockOptions {
 	dynamicValues: Array<BlockDataKey>;
 	blockClientScript?: string;
 	blockDataScript?: string;
-	blockData: Record<string, any> = {};
+	ownBlockData: Record<string, any> = {};
+	passedDownBlockData: Record<string, any> = {};
 	props?: BlockProps;
 	// @ts-expect-error
 	referenceComponent: Block | null;
@@ -923,11 +924,25 @@ class Block implements BlockOptions {
 	setBlockDataScript(script: string) {
 		this.blockDataScript = script;
 	}
-	getBlockData(): any {
-		return this.blockData;
-	}
-	setBlockData(data: Record<string, any>) {
-		this.blockData = data;
+	getBlockData(filter: "all" | "passedDown" | "own" = "all"): any {
+		switch (filter) {
+			case "all":
+				return { ...this.passedDownBlockData, ...this.ownBlockData };
+			case "passedDown":
+				return this.passedDownBlockData;
+			case "own":
+				return this.ownBlockData;
+		}
+	}
+	setBlockData(data: Record<string, any>, filter: "passedDown" | "own" = "own") {
+		switch (filter) {
+			case "passedDown":
+				this.passedDownBlockData = data;
+				break;
+			case "own":
+				this.ownBlockData = data;
+				break;
+		}
 	}
 	getBlockProps(): BlockProps {
 		let blockProps = {};
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 13f248291..f09560c84 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -49,8 +49,9 @@ import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
 import { builderSettings } from "@/data/builderSettings";
-import getBlockData from "@/data/blockData";
+import fetchBlockData from "@/data/blockData";
 import usePageStore from "@/stores/pageStore";
+import { toast } from "vue-sonner";
 
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
@@ -357,23 +358,27 @@ watch(
 		allResolvedProps,
 		() => props.block.getBlockDataScript(),
 		() => pageStore.settingPage,
-		() => props.block.getParentBlock()?.blockData,
+		() => props.block.getParentBlock()?.getBlockData(),
 	],
 	() => {
 		if (pageStore.settingPage) return;
-		getBlockData
+		fetchBlockData
 			.fetch({
 				block_id: props.block.blockId,
 				block_data_script: props.block.getBlockDataScript(),
 				props: JSON.stringify(allResolvedProps.value),
 			})
 			.then((res: any) => {
-				props.block.setBlockData({ ...(props.blockData || {}), ...res });
+				props.block.setBlockData(props.blockData || {}, "passedDown");
+				props.block.setBlockData(res, "own");
 				cumulativeBlockData.value = { ...(props.blockData || {}), ...res };
 				console.log("Cumulative Block Data for block", props.block.blockId, ":", props.blockData, res);
 			})
-			.catch((err: any) => {
-				console.error("Error fetching block data:", err);
+			.catch((e: { exc: string | null }) => {
+				const error_message = e.exc?.split("\n").slice(-2)[0];
+				toast.error("There was an error while fetching page data", {
+					description: error_message,
+				});
 			});
 	},
 	{ deep: true },
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 9d3a6e5ef..e1c95fe3b 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -22,11 +22,15 @@
 					type="JSON"
 					label="Block Data Preview"
 					:readonly="true"></CodeEditor>
+				<div v-if="isBlockSelected" class="flex w-full items-center justify-between py-4">
+					<div class="text-sm text-ink-gray-6">Show cumulative data</div>
+					<Switch :model-value="showCumulativeBlockData" @update:model-value="(val) => showCumulativeBlockData = val" />
+				</div>
 				<div v-else class="w-full py-4 text-center text-xs">Select a block to preview data.</div>
 			</div>
 		</div>
 		<div class="box-border flex items-center justify-between border-t p-4 py-2">
-			<h2 class="text-base">Mode</h2>
+			<h2 class="text-base text-ink-gray-6">Mode</h2>
 			<TabButtons
 				class="w-fit"
 				:buttons="[
@@ -144,11 +148,13 @@ import CodeEditor from "./Controls/CodeEditor.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
 import blockController from "@/utils/blockController";
 import TabButtons from "./Controls/TabButtons.vue";
+import Switch from "./Controls/Switch.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
 const showDialog = ref(false);
 const mode = ref<"page" | "block">("block");
+const showCumulativeBlockData = ref(false);
 
 const props = defineProps<{
 	page: BuilderPage;
@@ -177,7 +183,9 @@ const blockDataScript = computed(() => {
 });
 
 const blockData = computed(() => {
-	return blockController.getFirstSelectedBlock()?.getBlockData() || {};
+	return (
+		blockController.getFirstSelectedBlock()?.getBlockData(showCumulativeBlockData.value ? "all" : "own") || {}
+	);
 });
 
 const savePageDataScript = (value: string) => {
diff --git a/frontend/src/data/blockData.ts b/frontend/src/data/blockData.ts
index 4c2a7034b..7699f12d0 100644
--- a/frontend/src/data/blockData.ts
+++ b/frontend/src/data/blockData.ts
@@ -1,9 +1,9 @@
 import { createResource } from "frappe-ui";
 
-let getBlockData = createResource({
+let fetchBlockData = createResource({
 	url: "builder.builder.doctype.builder_page.builder_page.get_block_data",
 	method: "GET",
 	auto: false,
 });
 
-export default getBlockData;
+export default fetchBlockData;
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index d0e35e704..34372818d 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -330,11 +330,11 @@ const blockController = {
 	setBlockDataScript: (script: string) => {
 		blockController.getFirstSelectedBlock()?.setBlockDataScript(script);
 	},
-	getBlockData: () => {
-		return blockController.getFirstSelectedBlock()?.getBlockData();
+	getBlockData: (filter: "passedDown" | "own" | "all" = "all") => {
+		return blockController.getFirstSelectedBlock()?.getBlockData(filter);
 	},
-	setBlockData: (data: Record<string, any>) => {
-		blockController.getFirstSelectedBlock()?.setBlockData(data);
+	setBlockData: (data: Record<string, any>, filter: "passedDown" | "own" = "own") => {
+		blockController.getFirstSelectedBlock()?.setBlockData(data, filter);
 	},
 	getBlockProps: () => {
 		return blockController.getFirstSelectedBlock()?.getBlockProps();

From 678200279d2d1009c173546b15308f13441a8601 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 17 Dec 2025 21:03:38 +0530
Subject: [PATCH 162/547] feat: moved block props to left panel

---
 frontend/src/components/BlockProperties.vue   |  3 -
 .../BlockPropsSection.ts                      | 35 -----------
 frontend/src/components/PageScript.vue        | 44 ++++++++------
 frontend/src/components/PropsEditor.vue       | 58 +++++++++----------
 4 files changed, 54 insertions(+), 86 deletions(-)
 delete mode 100644 frontend/src/components/BlockPropertySections/BlockPropsSection.ts

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 7d189031f..9830b4efb 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -49,8 +49,6 @@ import styleSection from "@/components/BlockPropertySections/StyleSection";
 import transitionSection from "@/components/BlockPropertySections/TransitionSection";
 import typographySection from "@/components/BlockPropertySections/TypographySection";
 import videoOptionsSection from "@/components/BlockPropertySections/VideoOptionsSection";
-import blockScriptSection from "@/components/BlockPropertySections/BlockScriptSection";
-import blockPropsSection from "@/components/BlockPropertySections/BlockPropsSection";
 import standardPropsInputSection from "@/components/BlockPropertySections/StandardPropsInputSection";
 import useBuilderStore from "@/stores/builderStore";
 import blockController from "@/utils/blockController";
@@ -127,6 +125,5 @@ const sections = [
 	accessibilitySection,
 	customAttributesSection,
 	rawStyleSection,
-	blockPropsSection,
 ] as PropertySection[];
 </script>
diff --git a/frontend/src/components/BlockPropertySections/BlockPropsSection.ts b/frontend/src/components/BlockPropertySections/BlockPropsSection.ts
deleted file mode 100644
index f5cba5ade..000000000
--- a/frontend/src/components/BlockPropertySections/BlockPropsSection.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import PropsEditor from "../PropsEditor.vue";
-import blockController from "@/utils/blockController";
-import { computed } from "vue";
-
-const blockPropsSection = [
-	{
-		component: PropsEditor,
-		getProps: () => {
-			return {
-				obj: blockController.getBlockProps(),
-				description: `
-					<b>Note:</b>
-					<br />
-					<br />
-					• A block can have multiple props
-					<br />
-					• Props can be static values, dynamic values (from data script), or inherited from ancestor blocks
-				`,
-			};
-		},
-		searchKeyWords: "Props, Interface Props, Properties, Block Props, Block Properties",
-		events: {
-			"update:obj": (obj: BlockProps) => blockController.setBlockProps(obj), // TODO: race condition?
-		},
-	},
-];
-
-export default {
-	name: "Block Props",
-	properties: blockPropsSection,
-	collapsed: computed(() => {
-		return Object.keys(blockController.getBlockProps()).length === 0;
-	}),
-	condition: () => !blockController.multipleBlocksSelected(),
-};
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index e1c95fe3b..d5b5a9469 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -7,29 +7,34 @@
 			</div>
 
 			<div class="h-full" v-if="mode == 'page'">
-				<CodeEditor
-					class="max-h-[80%]"
-					v-model="pageStore.pageData"
-					type="JSON"
-					label="Page Data Preview"
-					:readonly="true" />
+				<CodeEditor v-model="pageStore.pageData" type="JSON" label="Page Data Preview" :readonly="true" />
 			</div>
-			<div class="h-full" v-if="mode == 'block'">
-				<CodeEditor
-					v-if="isBlockSelected"
-					class="max-h-[80%]"
-					v-model="blockData"
-					type="JSON"
-					label="Block Data Preview"
-					:readonly="true"></CodeEditor>
-				<div v-if="isBlockSelected" class="flex w-full items-center justify-between py-4">
-					<div class="text-sm text-ink-gray-6">Show cumulative data</div>
-					<Switch :model-value="showCumulativeBlockData" @update:model-value="(val) => showCumulativeBlockData = val" />
+			<div class="box-border h-full overflow-y-auto pb-12" v-if="mode == 'block'">
+				<div class="flex min-h-full w-full flex-col" v-if="isBlockSelected">
+					<CodeEditor
+						v-model="blockData"
+						class="max-h-[70%]"
+						type="JSON"
+						label="Block Data Preview"
+						:readonly="true"></CodeEditor>
+					<div class="flex w-full items-center justify-between py-4">
+						<div class="text-sm text-ink-gray-6">Show cumulative data</div>
+						<Switch
+							:model-value="showCumulativeBlockData"
+							@update:model-value="(val) => (showCumulativeBlockData = val)" />
+					</div>
+					<div class="my-3 mt-4 text-sm text-ink-gray-8">Block Props</div>
+					<PropsEditor
+						:obj="blockController.getBlockProps()"
+						@update:obj="(obj: BlockProps) => blockController.setBlockProps(obj)" />
+				</div>
+				<div v-else class="w-full py-4 text-center text-xs text-ink-gray-5">
+					Select a block to preview data.
 				</div>
-				<div v-else class="w-full py-4 text-center text-xs">Select a block to preview data.</div>
 			</div>
 		</div>
-		<div class="box-border flex items-center justify-between border-t p-4 py-2">
+		<div
+			class="absolute bottom-0 left-0 box-border flex w-full items-center justify-between border-t bg-surface-white p-4 py-2">
 			<h2 class="text-base text-ink-gray-6">Mode</h2>
 			<TabButtons
 				class="w-fit"
@@ -149,6 +154,7 @@ import PageClientScriptManager from "./PageClientScriptManager.vue";
 import blockController from "@/utils/blockController";
 import TabButtons from "./Controls/TabButtons.vue";
 import Switch from "./Controls/Switch.vue";
+import PropsEditor from "./PropsEditor.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 104959fa2..20de94207 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -4,11 +4,24 @@
 			<template v-for="(value, name, index) in sortedProps" :key="index">
 				<div
 					:key="index"
-					class="prop-list-item relative flex w-full flex-col rounded-sm bg-surface-gray-2 p-2"
+					class="prop-list-item relative flex w-full flex-col rounded bg-surface-gray-1 p-2 text-ink-gray-6"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!mr-[25px] !min-w-fit" placement="left">
+					<Popover popoverClass="!ml-[25px] !min-w-fit" placement="right">
 						<template #target="{ open }">
-							<div class="flex w-full items-center justify-between">
+							<div
+								class="flex w-full items-center justify-between cursor-pointer"
+								@click.stop="
+											() => {
+												popupMode = 'edit';
+												popoverContentItemsRef[index]?.reset({
+													keepName: false,
+													keepIsStandard: false,
+													keepProps: true,
+													keepType: false,
+												});
+												keyBeingEdited = name as string;
+												open();
+											}">
 								<div class="flex w-fit max-w-[60%] items-center gap-2 pl-2">
 									<div class="icon">
 										<component
@@ -20,7 +33,7 @@
 													dynamic: LucideZap,
 												}[value.type] || LucideZap
 											"
-											class="h-4 w-4 text-ink-gray-6" />
+											class="h-4 w-4 text-ink-gray-4" />
 										<component
 											v-if="value.isStandard && value.standardOptions?.type"
 											:is="
@@ -33,40 +46,23 @@
 													array: LucideArray,
 												}[value.standardOptions?.type] || LucideZap
 											"
-											class="h-4 w-4 text-ink-gray-6" />
+											class="h-4 w-4 text-ink-gray-4" />
 									</div>
 									<div class="flex max-w-full flex-col gap-1">
-										<p class="text-sm font-medium text-ink-gray-8">
+										<p class="text-sm font-medium">
 											{{ name }}
 										</p>
-										<p v-if="value.isStandard" class="text-xs text-ink-gray-6">
+										<p v-if="value.isStandard" class="text-xs text-ink-gray-4">
 											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
 										</p>
-										<p v-else class="max-w-full truncate text-ellipsis text-xs text-ink-gray-6">
+										<p v-else class="max-w-full truncate text-ellipsis text-xs text-ink-gray-4">
 											{{ value.value }}
 										</p>
 									</div>
 								</div>
 								<div class="flex-shrink-0 gap-1 rounded">
 									<BuilderButton
-										class="flex-shrink-0 bg-transparent text-xs"
-										variant="subtle"
-										icon="edit-2"
-										@click.stop="
-											() => {
-												popupMode = 'edit';
-												popoverContentItemsRef[index]?.reset({
-													keepName: false,
-													keepIsStandard: false,
-													keepProps: true,
-													keepType: false,
-												});
-												keyBeingEdited = name as string;
-												open();
-											}
-										" />
-									<BuilderButton
-										class="flex-shrink-0 bg-transparent text-xs"
+										class="flex-shrink-0 bg-transparent text-xs text-ink-gray-6"
 										variant="subtle"
 										icon="x"
 										@click="deleteObjectKey(name as string)" />
@@ -90,7 +86,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!mr-[17px] !min-w-fit" placement="left">
+		<Popover ref="popOverRef" popoverClass="!ml-[17px] !min-w-fit" placement="right">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"
@@ -116,7 +112,12 @@
 					:mode="popupMode"
 					:propName="keyBeingEdited"
 					:propDetails="propDetailsOfKeyBeingEdited"
-					@add:prop="(prop) => { addProp(prop); close(); }"
+					@add:prop="
+						(prop) => {
+							addProp(prop);
+							close();
+						}
+					"
 					@update:prop="updateProp" />
 			</template>
 		</Popover>
@@ -131,7 +132,6 @@ import { computed, ref, useAttrs, watch } from "vue";
 
 import { toast } from "vue-sonner";
 
-
 // @ts-ignore
 import LucideZap from "~icons/lucide/zap";
 // @ts-ignore

From 5634081653f8cba45ee01adb9bdbdd8b8fc6c945 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 18 Dec 2025 20:57:49 +0530
Subject: [PATCH 163/547] fix: changed block structure to be more in tune with
 other structs

---
 frontend/src/builder.d.ts                     |   3 +-
 frontend/src/components/PropsEditor.vue       |  32 ++---
 .../src/components/PropsPopoverContent.vue    | 112 ++++++++++--------
 frontend/src/utils/helpers.ts                 |  57 +++++----
 4 files changed, 113 insertions(+), 91 deletions(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index dac2e5e0f..3eef7b13f 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -17,7 +17,8 @@ type BlockPropsStandardOptions = {
 declare type BlockProps = Record<
 	string,
 	{
-		type: "dynamic" | "static" | "inherited";
+		isDynamic: boolean;
+		comesFrom: "props" | "dataScript" | "blockDataScript" | null;
 		value: string?;
 		isStandard?: boolean;
 		standardOptions?: BlockPropsStandardOptions;
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 20de94207..c8c08cca9 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -9,7 +9,7 @@
 					<Popover popoverClass="!ml-[25px] !min-w-fit" placement="right">
 						<template #target="{ open }">
 							<div
-								class="flex w-full items-center justify-between cursor-pointer"
+								class="flex w-full cursor-pointer items-center justify-between"
 								@click.stop="
 											() => {
 												popupMode = 'edit';
@@ -26,13 +26,7 @@
 									<div class="icon">
 										<component
 											v-if="!value.isStandard"
-											:is="
-												{
-													static: LucideCaseSensitive,
-													inherited: LucideListTree,
-													dynamic: LucideZap,
-												}[value.type] || LucideZap
-											"
+											:is="value.isDynamic ? LucideZap : LucideCaseSensitive"
 											class="h-4 w-4 text-ink-gray-4" />
 										<component
 											v-if="value.isStandard && value.standardOptions?.type"
@@ -210,7 +204,8 @@ const clearObjectValue = (map: Map<string, BlockProps[string]>, key: string) =>
 	map.set(key, {
 		...oldValue!,
 		value: null,
-		type: "static",
+		isDynamic: false,
+		comesFrom: null,
 	});
 
 	return map;
@@ -219,7 +214,11 @@ const clearObjectValue = (map: Map<string, BlockProps[string]>, key: string) =>
 const updateObjectValue = (
 	map: Map<string, BlockProps[string]>,
 	key: string,
-	{ value, type }: { value: string | null; type: string },
+	{
+		value,
+		isDynamic,
+		comesFrom,
+	}: { value: string | null; isDynamic: boolean; comesFrom: BlockProps[string]["comesFrom"] },
 ) => {
 	const path = value;
 	if (!path) {
@@ -227,16 +226,18 @@ const updateObjectValue = (
 	}
 
 	const oldPath = map.get(key)?.value;
-	const oldType = map.get(key)?.type;
+	const wasDynamic = map.get(key)?.isDynamic;
+	const cameFrom = map.get(key)?.comesFrom;
 
-	if (path === oldPath && type === oldType) {
+	if (path === oldPath && isDynamic === wasDynamic && comesFrom === cameFrom) {
 		return map;
 	}
 
 	map.set(key, {
 		...map.get(key)!,
-		value: type === "static" && typeof path !== "string" ? JSON.stringify(path) : path,
-		type: type as BlockProps[string]["type"],
+		value: !isDynamic && typeof path !== "string" ? JSON.stringify(path) : path,
+		isDynamic,
+		comesFrom,
 	});
 
 	return map;
@@ -282,7 +283,8 @@ const updateProp = async ({
 
 	map = updateObjectValue(map, newName, {
 		value: newValue.value,
-		type: newValue.type,
+		isDynamic: newValue.isDynamic,
+		comesFrom: newValue.comesFrom,
 	});
 	map = updateIsStandard(map, newName, newValue.isStandard || false);
 	map = updateStandardOptions(map, newName, newValue.standardOptions || {});
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index c04a314a0..f042b1f8d 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -70,11 +70,7 @@
 				:allow-arbitrary-value="false"
 				:modelValue="value"
 				:getOptions="getOptions"
-				@update:modelValue="
-					(option) => {
-						value = option || '';
-					}
-				" />
+				@update:modelValue="handleValueSelection" />
 		</div>
 		<!-- Disabled for now-->
 		<div v-if="false && !isStandardBool && isInFragmentMode" class="flex items-center justify-between">
@@ -144,7 +140,7 @@ import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
 import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import usePageStore from "@/stores/pageStore";
-import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
+import { getCollectionKeys, getDataArray, getDataForKey } from "@/utils/helpers";
 
 const props = withDefaults(
 	defineProps<{
@@ -165,8 +161,9 @@ const isStandardBool = computed(() => isStandard.value === "true");
 const isEditable = ref("false"); // TODO: required?
 const name = ref(props.propName ?? "");
 const value = ref(props.propDetails?.value ?? "");
+const comesFrom = ref<BlockProps[string]["comesFrom"]>(props.propDetails?.comesFrom ?? null);
 const selectedNonStandardPropType = ref(
-	props.propDetails && !props.propDetails.isStandard ? props.propDetails.type : "static",
+	props.propDetails && !props.propDetails.isStandard ? !props.propDetails.isDynamic : "static",
 );
 const standardPropOptions = reactive<BlockPropsStandardOptions>(
 	props.propDetails && props.propDetails.isStandard
@@ -193,7 +190,15 @@ const optionsComponentRef = ref<any>(null);
 
 const emit = defineEmits({
 	"add:prop": ({ name, value }: { name: string; value: BlockProps[string] }) => true,
-	"update:prop": ({ oldPropName, newName, newValue }: {oldPropName: string, newName: string, newValue: BlockProps[string]}) => true,
+	"update:prop": ({
+		oldPropName,
+		newName,
+		newValue,
+	}: {
+		oldPropName: string;
+		newName: string;
+		newValue: BlockProps[string];
+	}) => true,
 });
 
 const propTypes = computed(() => {
@@ -230,10 +235,6 @@ const propTypes = computed(() => {
 				label: "Static",
 				value: "static",
 			},
-			{
-				label: "Inherited",
-				value: "inherited",
-			},
 			{
 				label: "Dynamic",
 				value: "dynamic",
@@ -264,36 +265,20 @@ const setPropType = (type: string) => {
 	if (isStandardBool.value && STANDARD_PROP_TYPES.includes(type)) {
 		standardPropOptions.type = type as "string" | "number" | "boolean" | "select" | "array" | "object";
 	} else {
-		selectedNonStandardPropType.value = type as "static" | "inherited" | "dynamic";
+		selectedNonStandardPropType.value = type as "static" | "dynamic";
 	}
 };
 
-// TODO: reuse this from dynamic value handler
-const dataArray = computed(() => {
-	const result: string[] = [];
-	let collectionObject = usePageStore().pageData;
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
-		collectionObject = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
-	}
-
-	function processObject(obj: Record<string, any>, prefix = "") {
-		Object.entries(obj).forEach(([key, value]) => {
-			const path = prefix ? `${prefix}.${key}` : key;
+const pageDataArray = computed(() => {
+	return getDataArray(blockController.getFirstSelectedBlock(), usePageStore().pageData, "dataScript");
+});
 
-			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-				processObject(value, path);
-			} else if (["string", "number", "boolean"].includes(typeof value)) {
-				result.push(path);
-			}
-		});
+const blockDataArray = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (currentBlock) {
+		return getDataArray(currentBlock, currentBlock.getBlockData("passedDown"), "blockDataScript");
 	}
-
-	processObject(collectionObject);
-	return result;
+	return [];
 });
 
 const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
@@ -313,19 +298,33 @@ const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
 };
 
 const getOptions = async (query: string) => {
-	let options: string[];
-	if (selectedPropType.value == "inherited") {
-		options = getParentProps(blockController.getFirstSelectedBlock()!, []);
-	} else {
-		options = dataArray.value;
-	}
+	let options: { label: string; value: string }[] = [];
+	getParentProps(blockController.getFirstSelectedBlock()!, []).map((prop) => {
+		if (prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--props`,
+			});
+		}
+	});
+	pageDataArray.value.map((prop) => {
+		if (prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--dataScript`,
+			});
+		}
+	});
+	blockDataArray.value.map((prop) => {
+		if (prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--blockDataScript`,
+			});
+		}
+	});
 
-	return options
-		.filter((prop) => prop.toLowerCase().includes(query.toLowerCase()))
-		.map((prop) => ({
-			label: prop,
-			value: prop,
-		}));
+	return options;
 };
 
 const componentMapping = {
@@ -359,6 +358,16 @@ const handleTypeChange = async (newVal: string) => {
 	});
 };
 
+const handleValueSelection = (option: string | null) => {
+	if (option) {
+		comesFrom.value = option.split("--").slice(-1)[0] as BlockProps[string]["comesFrom"];
+		value.value = option.split("--").slice(0, -1).join("--");
+	} else {
+		comesFrom.value = null;
+		value.value = "";
+	}
+};
+
 const reset = async (keepParams: {
 	keepName: boolean;
 	keepIsStandard: boolean;
@@ -402,7 +411,7 @@ const reset = async (keepParams: {
 		Object.assign(standardPropDependencyMap, {});
 	} else {
 		if (!keepType) {
-			selectedNonStandardPropType.value = details?.type || "static";
+			selectedNonStandardPropType.value = details?.isDynamic ? "dynamic" : "static";
 		}
 	}
 
@@ -436,7 +445,8 @@ const save = async () => {
 	await nextTick();
 	const propValue: BlockProps[string] = {
 		isStandard: isStandardBool.value,
-		type: isStandardBool.value ? "static" : selectedNonStandardPropType.value, // all standard props are static by default
+		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic", // all standard props are static by default
+		comesFrom: comesFrom.value,
 		value: isStandardBool.value ? null : value.value,
 		standardOptions: isStandardBool.value
 			? {
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 2e2565aa3..2f744d2e6 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1017,7 +1017,7 @@ function showDialog(options: DialogOptions): Promise<void> {
 	});
 }
 
-function getCollectionKeys(block: any, type : BlockDataKey["comesFrom"] = "dataScript"): string[] {
+function getCollectionKeys(block: any, type: BlockDataKey["comesFrom"] = "dataScript"): string[] {
 	// traverse up the block to get list of dataKeys set
 	const repeaterBlock = block.getRepeaterParent();
 	const keys: string[] = [];
@@ -1039,33 +1039,38 @@ function triggerCopyEvent() {
 	document.execCommand("copy");
 }
 
-const getValueForInheritedProp = (propName: string, block: Block, getDataScriptValue: (path: string) => any): any => {
+const getValueForInheritedProp = (
+	propName: string,
+	block: Block,
+	getDataScriptValue: (path: string) => any,
+): any => {
 	let parent = block.getParentBlock();
 	while (parent) {
 		const parentProps = parent.getBlockProps();
 		const matchingProp = parentProps[propName];
 		if (matchingProp) {
-			if (matchingProp.type !== "inherited") {
-				if (matchingProp.type === "dynamic" && matchingProp.value) {
+			if (matchingProp.isDynamic) {
+				if (matchingProp.comesFrom === "dataScript" && matchingProp.value) {
 					return getDataScriptValue(matchingProp.value);
+				} else if (matchingProp.comesFrom === "blockDataScript" && matchingProp.value) {
+					return block.getBlockData("passedDown")[matchingProp.value];
 				} else {
-					if (matchingProp.isStandard && matchingProp.standardOptions) {
-						if (matchingProp.standardOptions.type !== "string" && matchingProp.standardOptions.type !== "select") {
-							return matchingProp.value
-								? JSON.parse(matchingProp.value)
-								: matchingProp.standardOptions?.options?.defaultValue || null;
-						} else {
-							return (
-								matchingProp.value ||
-								matchingProp.standardOptions?.options?.defaultValue ||
-								null
-							);
-						}
-					}
-					return matchingProp.value;
+					return getValueForInheritedProp(propName, parent, getDataScriptValue);
 				}
 			} else {
-				return getValueForInheritedProp(propName, parent, getDataScriptValue);
+				if (matchingProp.isStandard && matchingProp.standardOptions) {
+					if (
+						matchingProp.standardOptions.type !== "string" &&
+						matchingProp.standardOptions.type !== "select"
+					) {
+						return matchingProp.value
+							? JSON.parse(matchingProp.value)
+							: matchingProp.standardOptions?.options?.defaultValue || null;
+					} else {
+						return matchingProp.value || matchingProp.standardOptions?.options?.defaultValue || null;
+					}
+				}
+				return matchingProp.value;
 			}
 		}
 		parent = parent.getParentBlock();
@@ -1085,11 +1090,15 @@ const getPropValue = (
 	const blockProps = block.getBlockProps();
 	if (blockProps[propName]) {
 		const prop = blockProps[propName];
-		if (prop.type === "dynamic" && prop.value) {
-			return getDataScriptValue(prop.value);
-		} else if (prop.type === "inherited") {
-			if (prop.value) {
-				return getValueForInheritedProp(prop.value, block, getDataScriptValue);
+		if (prop.isDynamic) {
+			if (prop.comesFrom === "dataScript" && prop.value) {
+				return getDataScriptValue(prop.value);
+			} else if (prop.comesFrom === "blockDataScript" && prop.value) {
+				return block.getBlockData("passedDown")[prop.value];
+			} else {
+				if (prop.value) {
+					return getValueForInheritedProp(prop.value, block, getDataScriptValue);
+				}
 			}
 		} else {
 			if (prop.isStandard && prop.standardOptions) {

From 90d6b7a8b8c1a87f18eeee9b20ec68d61dfcaa7d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 18 Dec 2025 20:58:45 +0530
Subject: [PATCH 164/547] refactor: extracted dataArray as it will be re-used

---
 .../Controls/DynamicValueHandler.vue          | 42 +++++------------
 frontend/src/utils/helpers.ts                 | 47 +++++++++++++------
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 36eb112c9..5bf94d51c 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -2,7 +2,7 @@
 	<div class="flex min-h-36 flex-col justify-between gap-2">
 		<div class="flex flex-col gap-2">
 			<BuilderInput
-				v-if="dataArray.length > 5"
+				v-if="pageDataArray.length + blockDataArray.length > 5"
 				v-model="searchQuery"
 				@input="(val: string) => (searchQuery = val)"
 				type="text"
@@ -64,7 +64,13 @@ import Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import { getCollectionKeys, getDataForKey, getPropValue, getStandardPropValue } from "@/utils/helpers";
+import {
+	getCollectionKeys,
+	getDataArray,
+	getDataForKey,
+	getPropValue,
+	getStandardPropValue,
+} from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
@@ -83,41 +89,15 @@ const props = defineProps<{
 const emit = defineEmits(["setDynamicValue"]);
 const searchQuery = ref("");
 
-const dataArray = (collectionObject: Record<string, any>, comesFrom: BlockDataKey["comesFrom"]) => {
-	const result: string[] = [];
-	let collectionObjectCopy = { ...collectionObject };
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater() && comesFrom == "dataScript") {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock(), comesFrom);
-		collectionObjectCopy = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObjectCopy);
-	}
-
-	function processObject(obj: Record<string, any>, prefix = "") {
-		Object.entries(obj).forEach(([key, value]) => {
-			const path = prefix ? `${prefix}.${key}` : key;
-
-			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-				processObject(value, path);
-			} else if (["string", "number", "boolean"].includes(typeof value)) {
-				result.push(path);
-			}
-		});
-	}
-
-	processObject(collectionObjectCopy);
-	return result;
-};
-
 const pageDataArray = computed(() => {
-	return dataArray(pageStore.pageData, "dataScript");
+	const currentBlock = props.block || blockController.getFirstSelectedBlock();
+	return getDataArray(currentBlock, pageStore.pageData, "dataScript");
 });
 
 const blockDataArray = computed(() => {
 	const currentBlock = props.block || blockController.getFirstSelectedBlock();
 	if (currentBlock) {
-		return dataArray(currentBlock.blockData || {}, "blockDataScript");
+		return getDataArray(currentBlock, currentBlock.getBlockData() || {}, "blockDataScript");
 	}
 	return [];
 });
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 2f744d2e6..3754260cb 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -377,7 +377,8 @@ function getCopyWithoutParent(block: BlockOptions | Block): BlockOptions {
 	blockCopy.children = blockCopy.children?.map((child) => getCopyWithoutParent(child));
 	delete blockCopy.parentBlock;
 	delete blockCopy.referenceComponent;
-	delete blockCopy.blockData;
+	delete blockCopy.ownBlockData;
+	delete blockCopy.passedDownBlockData;
 	return blockCopy;
 }
 
@@ -1144,13 +1145,35 @@ const getStandardPropValue = (
 	}
 };
 
-const getCumulativeBlockData = (block: Block): Record<string, any> => {
-	const parentBlock = block.getParentBlock();
-	if (parentBlock) {
-		const parentBlockData = getCumulativeBlockData(parentBlock);
-		return { ...parentBlockData, ...(block.blockData || {}) };
+const getDataArray = (
+	block: Block,
+	collectionObject: Record<string, any>,
+	comesFrom: BlockDataKey["comesFrom"],
+) => {
+	const result: string[] = [];
+	let collectionObjectCopy = { ...collectionObject };
+	if (block.isInsideRepeater() && comesFrom == "dataScript") {
+		const keys = getCollectionKeys(block, comesFrom);
+		collectionObjectCopy = keys.reduce((acc: any, key: string) => {
+			const data = getDataForKey(acc, key);
+			return Array.isArray(data) && data.length > 0 ? data[0] : data;
+		}, collectionObjectCopy);
+	}
+
+	function processObject(obj: Record<string, any>, prefix = "") {
+		Object.entries(obj).forEach(([key, value]) => {
+			const path = prefix ? `${prefix}.${key}` : key;
+
+			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+				processObject(value, path);
+			} else if (["string", "number", "boolean"].includes(typeof value)) {
+				result.push(path);
+			}
+		});
 	}
-	return { ...(block.blockData || {}) };
+
+	processObject(collectionObjectCopy);
+	return result;
 };
 
 /**
@@ -1159,7 +1182,7 @@ const getCumulativeBlockData = (block: Block): Record<string, any> => {
  * It tries to restrict escape hatches which could be used to access the global window or document objects.
  * It tries to `wrap` all returned DOM nodes and collections to ensure they are also proxied.
  * The `wrap` function creates proxies for DOM elements to intercept property access and method calls.
- * 
+ *
  * @param blockId - The ID of the block element to which the script is associated.
  * @param userScript - The user-provided JavaScript code to execute.
  * @param props - An optional object containing properties to be made available in the script's context.
@@ -1184,10 +1207,7 @@ function saferExecuteBlockClientScript(
 		"outerHTML",
 	]);
 
-	const BLOCKED_SET = new Set([
-		"innerHTML",
-		"outerHTML",
-	]);
+	const BLOCKED_SET = new Set(["innerHTML", "outerHTML"]);
 
 	function wrap(value: Element | Node) {
 		if (value === null || typeof value !== "object") return value;
@@ -1200,7 +1220,6 @@ function saferExecuteBlockClientScript(
 
 	const handler = {
 		get(target: Element, prop: string, receiver: any) {
-
 			if (BLOCKED_GET.has(prop)) return undefined;
 
 			let val = Reflect.get(target, prop, receiver);
@@ -1338,6 +1357,6 @@ export {
 	uploadUserFont,
 	getPropValue,
 	getStandardPropValue,
-	getCumulativeBlockData,
+	getDataArray,
 	saferExecuteBlockClientScript,
 };

From 165efb6c0833fe0e1e8517efca47aaa4e19a8bec Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 18 Dec 2025 23:46:33 +0530
Subject: [PATCH 165/547] feat: add DynamicValue filters for props and
 blockData

allow std. props to have dynamic values
---
 .../StandardPropsInputSection.ts              |  36 +++--
 .../Controls/DynamicValueHandler.vue          | 135 ++++++++++++------
 .../components/Controls/GenericControl.vue    |  52 ++++---
 .../components/Controls/PropertyControl.vue   |  10 +-
 frontend/src/components/PropsEditor.vue       |  10 +-
 .../src/components/PropsPopoverContent.vue    |   2 +
 frontend/src/utils/blockController.ts         |   4 +-
 7 files changed, 177 insertions(+), 72 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index a65584a73..7b8d22eb8 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -1,14 +1,14 @@
 import blockController from "@/utils/blockController";
 import OptionToggle from "../Controls/OptionToggle.vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import GenericControl from "../Controls/GenericControl.vue";
 import ArrayInput from "../ArrayInput.vue";
 import ObjectInput from "../ObjectInput.vue";
 
 const componentMap = {
-	string: PropertyControl,
-	number: PropertyControl,
-	boolean: PropertyControl,
-	select: PropertyControl,
+	string: GenericControl,
+	number: GenericControl,
+	boolean: GenericControl,
+	select: GenericControl,
 	array: ArrayInput,
 	object: ObjectInput,
 };
@@ -21,12 +21,14 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 		case "number":
 			map = {
 				enableStates: false,
+				allowDynamicValue: true,
 			};
 			break;
 		case "boolean":
 			map = {
 				component: OptionToggle,
 				enableStates: false,
+				allowDynamicValue: true,
 				options: [
 					{ label: propDetails.standardOptions?.options?.trueLabel || "True", value: true },
 					{ label: propDetails.standardOptions?.options?.falseLabel || "False", value: false },
@@ -47,13 +49,31 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 	}
 	map = {
 		label: propName,
-		setModelValue: (val: any) => {
-			blockController.setBlockProp(propName, val);
+		dynamicValueFilterOptions: {
+			excludeOwnProps: true,
+			excludeOwnBlockData: true,
+		},
+		getDynamicValue: () => {
+			if (propDetails.isDynamic) {
+				return {
+					key: propDetails.value,
+					comesFrom: propDetails.comesFrom,
+				};
+			}
+		},
+		setDynamicValue: (key: string | null, comesFrom: BlockProps[string]["comesFrom"]) => {
+			blockController.setBlockProp(propName, { value: key || "", isDynamic: Boolean(key), comesFrom });
+		},
+		setModelValue: (value: any) => {
+			blockController.setBlockProp(propName, { value });
 		},
 		getModelValue: () => {
 			const value = blockController.getFirstSelectedBlock().props?.[propName]?.value;
 			return value;
 		},
+		getPlaceholder: () => {
+			return propDetails.standardOptions?.options?.defaultValue || null;
+		},
 		...map,
 	};
 	return map;
@@ -73,7 +93,7 @@ const getStandardPropsInputSection = () => {
 	const standardProps = getStandardProps(blockController.getBlockProps());
 	const sections = [];
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
-		const component = componentMap[propDetails.standardOptions?.type || "string"] || PropertyControl;
+		const component = componentMap[propDetails.standardOptions?.type || "string"] || GenericControl;
 		const getProps = () => {
 			const props = getPropsMap(propKey, propDetails);
 			return props;
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 5bf94d51c..7a54d4c86 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -81,9 +81,17 @@ type DynamicValueItem = {
 	comesFrom: BlockDataKey["comesFrom"];
 };
 
+type DynamicValueFilterOptions = {
+	excludePassedDownProps?: boolean;
+	excludePassedDownBlockData?: boolean;
+	excludeOwnProps?: boolean;
+	excludeOwnBlockData?: boolean;
+};
+
 const props = defineProps<{
 	selectedValue?: DynamicValueItem;
 	block?: Block;
+	options?: DynamicValueFilterOptions;
 }>();
 
 const emit = defineEmits(["setDynamicValue"]);
@@ -95,9 +103,16 @@ const pageDataArray = computed(() => {
 });
 
 const blockDataArray = computed(() => {
+	if (props.options?.excludeOwnBlockData && props.options.excludePassedDownBlockData) return [];
 	const currentBlock = props.block || blockController.getFirstSelectedBlock();
+	let filter: "all" | "own" | "passedDown" = "all";
+	if (props.options?.excludeOwnBlockData) {
+		filter = "passedDown";
+	} else if (props.options?.excludePassedDownBlockData) {
+		filter = "own";
+	}
 	if (currentBlock) {
-		return getDataArray(currentBlock, currentBlock.getBlockData() || {}, "blockDataScript");
+		return getDataArray(currentBlock, currentBlock.getBlockData(filter) || {}, "blockDataScript");
 	}
 	return [];
 });
@@ -140,47 +155,35 @@ const defaultProps = computed(() => {
 	return {};
 });
 
-const getValue = (item: DynamicValueItem): any => {
-	if (item.comesFrom == "props") {
-		return getPropValue(
-			item.key,
-			props.block || blockController.getFirstSelectedBlock(),
-			getDataScriptValue,
-			defaultProps.value,
-		);
-	} else if (item.comesFrom == "blockDataScript") {
-		return getBlockDataScriptValue(item.key);
+const filteredBlockProps = computed(() => {
+	let ownBlockProps: string[];
+	if (props.options?.excludeOwnProps) {
+		ownBlockProps = [];
 	} else {
-		return getDataScriptValue(item.key);
+		ownBlockProps = Object.keys(
+			props.block
+				? props.block.getBlockProps()
+				: blockController.getFirstSelectedBlock()?.getBlockProps() || {},
+		);
 	}
-};
-
-const getDataScriptValue = (path: string): any => {
-	let collectionObject = pageStore.pageData;
-
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
-		collectionObject = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
+	let parentProps: string[];
+	if (props.options?.excludePassedDownProps) {
+		parentProps = [];
+	} else {
+		const currentBlock = props.block || blockController.getFirstSelectedBlock();
+		if (currentBlock) {
+			parentProps = getParentProps(currentBlock, []);
+		} else {
+			parentProps = [];
+		}
 	}
-
-	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
-};
-
-const getBlockDataScriptValue = (path: string): any => {
-	let collectionObject = props.block
-		? props.block.getBlockData() || {}
-		: blockController.getFirstSelectedBlock()?.getBlockData() || {};
-
-	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
-};
-
-const blockProps = computed(() => {
-	return props.block
-		? props.block.getBlockProps()
-		: blockController.getFirstSelectedBlock()?.getBlockProps() || {};
+	const combinedProps = [...ownBlockProps, ...parentProps].reduce((acc, prop) => {
+		if (!acc.find((p: string) => p === prop)) {
+			acc.push(prop);
+		}
+		return acc;
+	}, [] as string[]);
+	return combinedProps;
 });
 
 const filteredItems = computed(() => {
@@ -189,7 +192,7 @@ const filteredItems = computed(() => {
 		key: item,
 		comesFrom: "blockDataScript",
 	}));
-	const propItems = Object.keys(blockProps.value).map((item) => ({ key: item, comesFrom: "props" }));
+	const propItems = filteredBlockProps.value.map((item) => ({ key: item, comesFrom: "props" }));
 	const defaultPropsKeys = Object.keys(defaultProps.value || {}).map((item) => ({
 		key: item,
 		comesFrom: "props",
@@ -221,6 +224,58 @@ const filteredItems = computed(() => {
 
 const selectedItem = ref<DynamicValueItem | null>(props.selectedValue || null);
 
+const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
+	const parentBlock = baseBlock.getParentBlock();
+	if (parentBlock) {
+		const parentProps: string[] = Object.keys(parentBlock.getBlockProps()).map((key) => key);
+		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
+			if (!acc.find((p: string) => p === prop)) {
+				acc.push(prop);
+			}
+			return acc;
+		}, [] as string[]);
+		return getParentProps(parentBlock, combinedProps);
+	} else {
+		return baseProps;
+	}
+};
+
+const getValue = (item: DynamicValueItem): any => {
+	if (item.comesFrom == "props") {
+		return getPropValue(
+			item.key,
+			props.block || blockController.getFirstSelectedBlock(),
+			getDataScriptValue,
+			defaultProps.value,
+		);
+	} else if (item.comesFrom == "blockDataScript") {
+		return getBlockDataScriptValue(item.key);
+	} else {
+		return getDataScriptValue(item.key);
+	}
+};
+
+const getDataScriptValue = (path: string): any => {
+	let collectionObject = pageStore.pageData;
+
+	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
+		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
+		collectionObject = keys.reduce((acc: any, key: string) => {
+			const data = getDataForKey(acc, key);
+			return Array.isArray(data) && data.length > 0 ? data[0] : data;
+		}, collectionObject);
+	}
+
+	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
+};
+
+const getBlockDataScriptValue = (path: string): any => {
+	let collectionObject = props.block
+		? props.block.getBlockData() || {}
+		: blockController.getFirstSelectedBlock()?.getBlockData() || {};
+
+	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
+};
 function selectAndSetItem(item: DynamicValueItem) {
 	selectedItem.value = item;
 	emit("setDynamicValue", item);
diff --git a/frontend/src/components/Controls/GenericControl.vue b/frontend/src/components/Controls/GenericControl.vue
index 11bc71f32..31e008fea 100644
--- a/frontend/src/components/Controls/GenericControl.vue
+++ b/frontend/src/components/Controls/GenericControl.vue
@@ -52,7 +52,7 @@
 				v-if="showDynamicValueModal">
 				<template #header>Set Dynamic Value</template>
 				<template #content>
-					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
+					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" :options="dynamicValueFilterOptions" />
 				</template>
 			</DraggablePopup>
 
@@ -76,7 +76,10 @@
 					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 					@click.stop="showDynamicValueModal = true"
 					v-if="dynamicValue?.key">
-					<FeatherIcon v-if="dynamicValue?.comesFrom == 'props'" name="git-commit" class="size-3"></FeatherIcon>
+					<FeatherIcon
+						v-if="dynamicValue?.comesFrom == 'props'"
+						name="git-commit"
+						class="size-3"></FeatherIcon>
 					<FeatherIcon v-else name="zap" class="size-3"></FeatherIcon>
 					<span class="truncate">{{ dynamicValue.key }}</span>
 				</div>
@@ -116,7 +119,9 @@ const props = withDefaults(
 		controlType?: "style" | "attribute" | "key";
 		getModelValue?: () => string;
 		getPlaceholder?: () => string;
+		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
 		setModelValue?: (value: string) => void;
+		setDynamicValue?: (key: string | null, comesFrom: BlockDataKey["comesFrom"] | null) => void;
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
@@ -130,6 +135,12 @@ const props = withDefaults(
 		allowDynamicValue?: boolean;
 		enabledStates?: string[];
 		labelPlacement?: "left" | "top";
+		dynamicValueFilterOptions?: {
+			excludePassedDownProps?: boolean;
+			excludePassedDownBlockData?: boolean;
+			excludeOwnProps?: boolean;
+			excludeOwnBlockData?: boolean;
+		};
 	}>(),
 	{
 		placeholder: "unset",
@@ -170,15 +181,9 @@ const defaultValue = computed(() => {
 	return props.defaultValue;
 });
 
-const modelValue = computed(
-	() => props.getModelValue?.() ?? "",
-);
+const modelValue = computed(() => props.getModelValue?.() ?? "");
 
-const placeholderValue = computed(
-	() =>
-		props.getPlaceholder?.() ??
-		String(props.placeholder),
-);
+const placeholderValue = computed(() => props.getPlaceholder?.() ?? String(props.placeholder));
 
 const updateValue = (value: string | number | null | { label: string; value: string }) => {
 	if (typeof value === "object" && value !== null && "value" in value) {
@@ -247,16 +252,23 @@ const options = computed(() => {
 
 function setDynamicValue({ key, comesFrom }: { key: string; comesFrom?: BlockDataKey["comesFrom"] }) {
 	if (!comesFrom) comesFrom = "dataScript";
-	blockController.getSelectedBlocks().forEach((block) => {
-		block.setDynamicValue(props.property, props.controlType, key, comesFrom);
-	});
+	if (props.setDynamicValue) {
+		props.setDynamicValue(key, comesFrom);
+	} else {
+		blockController.getSelectedBlocks().forEach((block) => {
+			block.setDynamicValue(props.property, props.controlType, key, comesFrom);
+		});
+	}
 	showDynamicValueModal.value = false;
 	emit("setDynamicValue");
 }
 
 const dynamicValue = computed(() => {
+	if (props.getDynamicValue) {
+		return props.getDynamicValue();
+	}
 	const blocks = blockController.getSelectedBlocks();
-	if (!blocks?.length) return;
+	if (!blocks?.length) return undefined;
 	const dataKeyObj = blocks[0].dynamicValues.find((obj) => {
 		return obj.type === props.controlType && obj.property === props.property;
 	});
@@ -272,10 +284,14 @@ const dynamicValue = computed(() => {
 });
 
 const clearDynamicValue = () => {
-	const blocks = blockController.getSelectedBlocks();
-	blocks.forEach((block) => {
-		block.removeDynamicValue(props.property, props.controlType);
-	});
+	if (props.setDynamicValue) {
+		props.setDynamicValue(null, null);
+	} else {
+		const blocks = blockController.getSelectedBlocks();
+		blocks.forEach((block) => {
+			block.removeDynamicValue(props.property, props.controlType);
+		});
+	}
 	emit("clearDynamicValue");
 };
 </script>
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index 0981378ae..628fd6c6e 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -52,7 +52,10 @@
 				v-if="showDynamicValueModal">
 				<template #header>Set Dynamic Value</template>
 				<template #content>
-					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
+					<DynamicValueHandler
+						@setDynamicValue="setDynamicValue"
+						:selectedValue="dynamicValue"
+						:options="{ excludePassedDownProps: true}" />
 				</template>
 			</DraggablePopup>
 
@@ -76,7 +79,10 @@
 					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 					@click.stop="showDynamicValueModal = true"
 					v-if="dynamicValue?.key">
-					<FeatherIcon v-if="dynamicValue?.comesFrom == 'props'" name="git-commit" class="size-3"></FeatherIcon>
+					<FeatherIcon
+						v-if="dynamicValue?.comesFrom == 'props'"
+						name="git-commit"
+						class="size-3"></FeatherIcon>
 					<FeatherIcon v-else name="zap" class="size-3"></FeatherIcon>
 					<span class="truncate">{{ dynamicValue.key }}</span>
 				</div>
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index c8c08cca9..d3430490f 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -26,7 +26,13 @@
 									<div class="icon">
 										<component
 											v-if="!value.isStandard"
-											:is="value.isDynamic ? LucideZap : LucideCaseSensitive"
+											:is="
+												value.isDynamic
+													? value.comesFrom == 'props'
+														? LucideGitCommit
+														: LucideZap
+													: LucideCaseSensitive
+											"
 											class="h-4 w-4 text-ink-gray-4" />
 										<component
 											v-if="value.isStandard && value.standardOptions?.type"
@@ -131,7 +137,7 @@ import LucideZap from "~icons/lucide/zap";
 // @ts-ignore
 import LucideCaseSensitive from "~icons/lucide/case-sensitive";
 // @ts-ignore
-import LucideListTree from "~icons/lucide/list-tree";
+import LucideGitCommit from "~icons/lucide/git-commit-horizontal";
 // @ts-ignore
 import LucideNumber from "~icons/lucide/pi";
 // @ts-ignore
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index f042b1f8d..1d22edd39 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -267,6 +267,8 @@ const setPropType = (type: string) => {
 	} else {
 		selectedNonStandardPropType.value = type as "static" | "dynamic";
 	}
+	comesFrom.value = null;
+	value.value = "";
 };
 
 const pageDataArray = computed(() => {
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 34372818d..36d0751b9 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -339,14 +339,14 @@ const blockController = {
 	getBlockProps: () => {
 		return blockController.getFirstSelectedBlock()?.getBlockProps();
 	},
-	setBlockProp: (key: string, value: string) => {
+	setBlockProp: (key: string, value: Record<string, any>) => {
 		const allProps = blockController.getBlockProps();
 		if (!allProps) return;
 		const updatedProps = {
 			...allProps,
 			[key]: {
 				...allProps[key],
-				value: value,
+				...value,
 			},
 		};
 		blockController.setBlockProps(updatedProps);

From da9d25f8780fdd3a3bd9a743b7101c443812e632 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 19 Dec 2025 06:58:46 +0530
Subject: [PATCH 166/547] fix: updated backend to match new block props struct

---
 .../doctype/builder_page/builder_page.py      | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 48b9afa32..5af994e3e 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -702,7 +702,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 			if block.get("blockClientScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"  # extra hash as repeating blocks have same blockId
-				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {json.dumps(all_props) or '{}'});"
+				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {{{{ {to_jinja_literal(all_props) + '| tojson'} }}}});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
@@ -934,6 +934,7 @@ def set_dynamic_content_placeholder(block, data_key=None):
 					key = f"{extract_data_key(data_key)}.{(dynamic_value_doc.get('key'))}"
 				else:
 					key = f"block.{original_key}"
+				# TODO: repeating code
 				if data_key:
 					# convert a.b to (a or {}).get('b', {})
 					# to avoid undefined error in jinja
@@ -1040,27 +1041,45 @@ def parse_static_value(value: str, prop_type: str):
 
 
 def get_interpreted_prop_value(prop, data_key, map_of_prop_values):
-	prop_type = prop["type"]
+	prop_is_dynamic = prop.get("isDynamic", False)
+	prop_comes_from = prop.get("comesFrom", "props")
 	prop_is_standard = prop.get("isStandard", False)
 	prop_value = prop.get("value")
-
-	if prop_value is None and not prop_is_standard:
-		return "undefined"
-	if prop_type == "dynamic":
-		return (
-			f"{{{{ {extract_data_key(data_key)}.{prop_value} }}}}" if data_key else f"{{{{ {prop_value} }}}}"
-		)
-	elif prop_type == "static":
+	
+	default_value = None
+	if prop_is_standard:
+		default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue")
+	if prop_value is None:
+		return default_value if prop_is_standard else "undefined"
+	if prop_is_dynamic:
+		if prop_comes_from == "dataScript":
+			key = f"{extract_data_key(data_key)}.{prop_value}" if data_key else prop_value
+			return (
+				f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
+			)
+		elif prop_comes_from == "blockDataScript":
+			key = (
+					f"{extract_data_key(data_key)}.{prop_value}" if data_key else prop_value
+				)
+			if data_key:
+				# convert a.b to (a or {}).get('b', {})
+				# to avoid undefined error in jinja
+				keys = (key or "").split(".")
+				key = f"({keys[0]} or {{}})"
+				for k in keys[1:]:
+					key = f"{key}.get('{k}', {{}})"
+			return f"{{{{ {key} or block['{escape_single_quotes(prop_value)}'] or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
+		elif prop_comes_from == "props":
+			values = map_of_prop_values.get(prop_value, [])
+			return values[-1] if values else default_value if default_value is not None else "undefined"
+	else:
 		if prop_is_standard:
 			# standard props are static only as of now
 			prop_value = parse_static_value(
-				prop.get("value") or prop.get("standardOptions", {}).get("options", {}).get("defaultValue"),
+				prop.get("value") or default_value,
 				prop.get("standardOptions", {}).get("type"),
 			)
 		return prop_value
-	elif prop_type == "inherited":
-		values = map_of_prop_values.get(prop_value, [])
-		return values[-1] if values else "undefined"
 
 
 def get_loop_vars(map_of_std_props_info, key):

From e22bbec4f36fb4f40f9c702aba69116386ffe15c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 19 Dec 2025 10:12:01 +0530
Subject: [PATCH 167/547] fix: Update frappe-ui to version 0.1.242

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 yarn.lock             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index de9e0b34f..b4814bd2c 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit de9e0b34ff0668692132a9784b3d9f78bc05c20c
+Subproject commit b4814bd2cf7be88ac4e0754049a6fee08a456cd1
diff --git a/frontend/package.json b/frontend/package.json
index 8444fac77..58a5723dd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.238",
+    "frappe-ui": "0.1.242",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/yarn.lock b/yarn.lock
index 38c0eb3b2..224d7300e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4562,7 +4562,7 @@ linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
-lint-staged@>=10, lint-staged@^15.2.10:
+lint-staged@>=10:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
   integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==

From 708038814a0608c2a06b5fab0d1c68c09fa6f98b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 19 Dec 2025 13:59:57 +0530
Subject: [PATCH 168/547] fix: Adjust width of filters for better layout

---
 frontend/src/components/DashboardContent.vue          | 2 ++
 frontend/src/components/Settings/AnalyticsFilters.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DashboardContent.vue b/frontend/src/components/DashboardContent.vue
index 2e339877b..192d667b0 100644
--- a/frontend/src/components/DashboardContent.vue
+++ b/frontend/src/components/DashboardContent.vue
@@ -74,6 +74,7 @@
 					<div class="max-md:hidden" v-show="!selectionMode">
 						<Select
 							v-model="typeFilter"
+							class="!w-24"
 							:options="[
 								{ label: 'All', value: 'all' },
 								{ label: 'Draft', value: 'draft' },
@@ -84,6 +85,7 @@
 					<div class="max-sm:hidden" v-show="!selectionMode">
 						<Select
 							v-model="orderBy"
+							class="!w-32"
 							:options="[
 								{ label: 'Sort', value: '', disabled: true },
 								{ label: 'Last Created', value: 'creation' },
diff --git a/frontend/src/components/Settings/AnalyticsFilters.vue b/frontend/src/components/Settings/AnalyticsFilters.vue
index 9051c5de1..1ae58b5d4 100644
--- a/frontend/src/components/Settings/AnalyticsFilters.vue
+++ b/frontend/src/components/Settings/AnalyticsFilters.vue
@@ -9,7 +9,7 @@
 			:showInputAsOption="true"
 			class="w-44" />
 		<div class="w-32">
-			<Select size="sm" v-model="modelRange" class="pr-6" :options="rangeOptions" />
+			<Select size="sm" v-model="modelRange" :options="rangeOptions" />
 		</div>
 		<DateRangePicker
 			v-if="modelRange === 'custom'"

From 17fe66e19fcf3626bedf05e3603f412153649b46 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 12:22:33 +0530
Subject: [PATCH 169/547] fix(PageBuilder): Initialize blockContextMenu on
 mount

---
 frontend/src/pages/PageBuilder.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 46c99c5f4..d07ee9a82 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -134,7 +134,7 @@ import {
 	useMagicKeys,
 } from "@vueuse/core";
 import { createResource } from "frappe-ui";
-import { computed, onActivated, onDeactivated, provide, ref, watch, watchEffect } from "vue";
+import { computed, onActivated, onDeactivated, onMounted, provide, ref, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
@@ -151,6 +151,7 @@ const canvasStore = useCanvasStore();
 const usageCount = ref(0);
 const componentUsedInPages = ref<BuilderPage[]>([]);
 const pageListDialog = ref(false);
+const blockContextMenu = ref<InstanceType<typeof BlockContextMenu> | null>(null);
 
 watch([() => canvasStore.editableBlock, () => pageStore.activePage?.is_standard], () => {
 	builderStore.toggleReadOnlyMode(
@@ -248,6 +249,10 @@ onDeactivated(() => {
 	builderStore.viewers = [];
 });
 
+onMounted(() => {
+	builderStore.blockContextMenu = blockContextMenu.value;
+});
+
 watchEffect(() => {
 	if (fragmentCanvas.value) {
 		canvasStore.activeCanvas = fragmentCanvas.value;

From da3bd99689fd92e2df5845525b6477004db7dc5f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 12:38:25 +0530
Subject: [PATCH 170/547] fix: Misc typescript warnings

- Cleanup AppsMenu component registration from components.d.ts
- Add BlockOptions support to blockData prop to improve the flexibility
- Add type annotations wherever it was missing
- Add fallback values in autocomplete
- Fix incorrect type import in blockController.ts
---
 frontend/components.d.ts                         | 1 -
 frontend/src/components/BuilderCanvas.vue        | 2 +-
 frontend/src/components/Controls/ColorPicker.vue | 6 +++++-
 frontend/src/components/Controls/InlineInput.vue | 6 +++---
 frontend/src/components/TextBlock.vue            | 2 +-
 frontend/src/stores/canvasStore.ts               | 1 +
 frontend/src/stores/pageStore.ts                 | 2 +-
 frontend/src/utils/blockController.ts            | 2 +-
 8 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index b72ac82ae..d50c77e63 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,7 +11,6 @@ declare module 'vue' {
     AlertDialog: typeof import('./src/components/AlertDialog.vue')['default']
     AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
-    AppsMenu: typeof import('./src/components/AppsMenu.vue')['default']
     AuthenticatedUser: typeof import('./src/components/Icons/AuthenticatedUser.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
     BackgroundHandler: typeof import('./src/components/BackgroundHandler.vue')['default']
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 03f904ebd..e1e1b4e38 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -135,7 +135,7 @@ const overlay = ref(null);
 
 const props = withDefaults(
 	defineProps<{
-		blockData: Block;
+		blockData: Block | BlockOptions;
 		canvasStyles?: Record<string, any>;
 	}>(),
 	{
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index ba81b7074..9d846b188 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -155,7 +155,11 @@ const props = withDefaults(
 			| "right-start"
 			| "right-end"
 			| "left-start"
-			| "left-end";
+			| "left-end"
+			| "bottom"
+			| "top"
+			| "right"
+			| "left";
 		renderMode?: "popover" | "inline";
 	}>(),
 	{
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index b0a3464af..f57fb053a 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -22,8 +22,8 @@
 			@keydown.stop="handleKeyDown" />
 		<Autocomplete
 			v-if="type == 'autocomplete'"
-			:placeholder="placeholder"
-			:modelValue="modelValue"
+			:placeholder="placeholder ? String(placeholder) : undefined"
+			:modelValue="String(modelValue || '')"
 			:options="inputOptions"
 			:getOptions="getOptions"
 			@update:modelValue="handleChange"
@@ -41,7 +41,7 @@ import Autocomplete from "./Autocomplete.vue";
 import InputLabel from "./InputLabel.vue";
 
 type Action = {
-	label: String;
+	label: string;
 	handler: () => void;
 	icon: string;
 	component?: any;
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index d8e757d0e..8fd9e56a7 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -163,7 +163,7 @@
 				}
 			"
 			v-on-click-outside="
-				(e) => {
+				(e: MouseEvent) => {
 					if ((e.target as HTMLElement).closest('.canvas-container')) {
 						canvasStore.editableBlock = null;
 					}
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 506f8eebd..b17df009b 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -147,6 +147,7 @@ const useCanvasStore = defineStore("canvasStore", {
 				saveActionLabel: null,
 				fragmentName: null,
 				fragmentId: null,
+				showUsageCount: false,
 			};
 		},
 
diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index f483a667b..5aa9c194c 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -162,7 +162,7 @@ const usePageStore = defineStore("pageStore", {
 					success: () => {
 						return "Page deleted";
 					},
-					error: (e) => {
+					error: () => {
 						return "Page deletion failed";
 					},
 				});
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 131e531ab..6147ee1ac 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -1,5 +1,5 @@
 import type Block from "@/block";
-import type { BlockDataKey } from "@/block";
+import type BlockDataKey from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "./blockTemplate";
 

From 992f9af5c44bed4b5b9840148d61434cf37ad9ec Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 12:43:29 +0530
Subject: [PATCH 171/547] fix: Update subproject commit for frappe-ui

---
 frappe-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe-ui b/frappe-ui
index b4814bd2c..213c802a6 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit b4814bd2cf7be88ac4e0754049a6fee08a456cd1
+Subproject commit 213c802a638817d8927a1cbabd307fab8f2667ad

From c99731693f606049ede791e5b9cce2f1b47f832a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 13:27:34 +0530
Subject: [PATCH 172/547] fix: executing block data scripts now in jinja
 template

---
 .../doctype/builder_page/builder_page.py      | 39 ++++++-------------
 builder/hooks.py                              |  2 +-
 builder/utils.py                              | 10 ++++-
 3 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 5af994e3e..21f3e7d6f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -495,18 +495,6 @@ def get_component(block):
 			record_module="builder",
 		)
 
-def resolve_dynamic_props(props, page_data):
-	resolved_props = {}
-	for key, value in props.items():
-		if isinstance(value, str):
-			stripped = value.strip()
-		if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
-			# remove the {{ }} so Jinja receives the variable
-			inner = stripped[2:-2].strip()
-			value = page_data.get(inner, "")
-		resolved_props[key] = value
-	return resolved_props
-
 
 @frappe.whitelist()
 def get_block_data(block_id, block_data_script, props):
@@ -666,10 +654,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
-				child_tag, child_tag_props, child_tag_std_props, child_tag_data = get_tag(
+				child_tag, child_tag_props, child_tag_std_props, child_tag_block_script = get_tag(
 					block.get("children")[0], soup, next_data_key, next_default_props
 				)
-				append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data)
+				append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script)
 
 				tag.append("{% endfor %}")
 			else:
@@ -681,10 +669,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
 
-					child_tag, child_tag_props, child_tag_std_props, child_tag_data = get_tag(
+					child_tag, child_tag_props, child_tag_std_props, child_tag_block_script = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
 					)
-					append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data)
+					append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script)
 
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
@@ -708,16 +696,11 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				script_tag.string = script_content
 				tag.append(script_tag)
 
-			block_data = {}
-			if block.get("blockDataScript"):
-				block_data = get_block_data(block.get("blockId"), block.get("blockDataScript"), resolve_dynamic_props(all_props, page_data or {}))
-				print("Block Data Script Output: ", block_data)
-
-			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None, to_jinja_literal(block_data) if block_data else None
+			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None, block.get('blockDataScript', None)
 
 		for block in blocks:
-			tag, props, std_props, block_data = get_tag(block, soup)
-			html += f"{{% with block = {block_data if block_data else '{}'} %}}{tag!s}{{% endwith %}}"
+			tag, props, std_props, block_script = get_tag(block, soup)
+			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(block_script)}', {(props)}) %}}{tag!s}{{% endwith %}}"
 			html = f"{{% with props = {props} %}}{html}{{% endwith %}}"
 			if std_props:
 				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
@@ -870,15 +853,15 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag_with_props(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_data):
+def append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script):
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 
 	tag.append(f"{{% with props = {child_tag_props} %}}")
-	if child_tag_data:
-		tag.append(f"{{% with block = block | combine({child_tag_data}) %}}")
+	if child_tag_block_script:
+		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', {(child_tag_props)}) %}}")
 	tag.append(child_tag)
-	if child_tag_data:
+	if child_tag_block_script:
 		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 
diff --git a/builder/hooks.py b/builder/hooks.py
index 240df9e39..a258c5c42 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -56,7 +56,7 @@
 
 # add methods and filters to jinja environment
 jinja = {
-	"filters": ["builder.utils.combine"]
+	"filters": ["builder.utils.combine", "builder.utils.execute_script_and_combine"]
 }
 
 # Installation
diff --git a/builder/utils.py b/builder/utils.py
index 3328a5515..d8a57d8b0 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -596,4 +596,12 @@ def combine(a, b):
         return a
     res = dict(a)
     res.update(b)
-    return res
\ No newline at end of file
+    return res
+
+def execute_script_and_combine(prev_block_data, block_data_script, props):
+	props = frappe._dict(frappe.parse_json(props or "{}"))
+	block_data = frappe._dict()
+	_locals = dict(block=frappe._dict(), props=props)
+	execute_script(block_data_script, _locals, "sample")
+	block_data.update(_locals["block"])
+	return combine(prev_block_data, block_data)
\ No newline at end of file

From e9a8ac14cd2beaa3aa3670be9a85cccbd34e7c9e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 13:28:09 +0530
Subject: [PATCH 173/547] fix(PanelResizer): Revert changes as without absolute
 position it won't work

---
 frontend/src/components/PanelResizer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/PanelResizer.vue b/frontend/src/components/PanelResizer.vue
index e9251cbb1..2350350ef 100644
--- a/frontend/src/components/PanelResizer.vue
+++ b/frontend/src/components/PanelResizer.vue
@@ -1,5 +1,6 @@
 <template>
 	<div
+		class="absolute z-10"
 		:class="{
 			'top-0 h-full w-1 hover:cursor-ew-resize': side === 'left' || side === 'right',
 			'left-0 right-0 h-1 hover:cursor-ns-resize': side === 'top' || side === 'bottom',

From 9ecbb40de355428b2fb7b4486e0978a49af8dd4d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 13:31:21 +0530
Subject: [PATCH 174/547] fix(ColorPicker): Add null checks

---
 frontend/src/components/Controls/ColorPicker.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index 9d846b188..c35db96ff 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -252,7 +252,11 @@ const handleInputChange = (color: HashString) => {
 };
 
 const setColorSelectorPosition = (color: string) => {
-	const { width, height } = colorMap.value?.getBoundingClientRect();
+	if (!colorMap.value) return;
+	const rect = colorMap.value.getBoundingClientRect();
+	if (!rect || !rect.width || !rect.height) return;
+
+	const { width, height } = rect;
 	const { s, v } = HexToHSV(color as HashString);
 	let x = clamp(s * width, 0, width);
 	let y = clamp((1 - v) * height, 0, height);
@@ -260,7 +264,11 @@ const setColorSelectorPosition = (color: string) => {
 };
 
 const setHueSelectorPosition = (color: string) => {
-	const { width } = hueMap.value.getBoundingClientRect();
+	if (!hueMap.value) return;
+	const rect = hueMap.value.getBoundingClientRect();
+	if (!rect || !rect.width) return;
+
+	const { width } = rect;
 	const { h } = HexToHSV(color as HashString);
 	const left = (h / 360) * width;
 	hueSelectorPosition.value = { x: left, y: 0 };

From b70db120735bf9f76eb6f84b7a3564bcf6aa45df Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 13:41:23 +0530
Subject: [PATCH 175/547] feat: add block click handlers setting and update
 related functionality

---
 .../builder_settings/builder_settings.json        | 15 +++++++++++----
 .../doctype/builder_settings/builder_settings.py  |  1 +
 .../src/components/Settings/GlobalDeveloper.vue   | 12 +++++++++++-
 frontend/src/types/Builder/BuilderSettings.ts     |  2 ++
 frontend/src/utils/helpers.ts                     | 15 +++++++++++++++
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index 6a7a00464..9cc9c1b15 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -17,7 +17,8 @@
   "landing_page_section",
   "home_page",
   "developer_options_section",
-  "execute_block_scripts_in_editor"
+  "execute_block_scripts_in_editor",
+  "block_click_handlers"
  ],
  "fields": [
   {
@@ -94,17 +95,23 @@
    "label": "Developer Options"
   },
   {
-   "default": "1",
+   "default": "0",
    "fieldname": "execute_block_scripts_in_editor",
    "fieldtype": "Check",
    "label": "Execute Block Scripts in Editor"
+  },
+  {
+   "default": "1",
+   "fieldname": "block_click_handlers",
+   "fieldtype": "Check",
+   "label": "Block Click Handlers"
   }
  ],
  "hide_toolbar": 1,
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-11-28 20:08:12.409061",
+ "modified": "2025-12-20 13:31:34.606833",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Settings",
@@ -131,4 +138,4 @@
  "sort_order": "DESC",
  "states": [],
  "track_changes": 1
-}
\ No newline at end of file
+}
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index 7ff12e7c5..9111efb8c 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -17,6 +17,7 @@ class BuilderSettings(Document):
 		from frappe.types import DF
 
 		auto_convert_images_to_webp: DF.Check
+		block_click_handlers: DF.Check
 		body_html: DF.Code | None
 		default_language: DF.Data | None
 		execute_block_scripts_in_editor: DF.Check
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 1737f923b..7a93453c6 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-5">
 		<Switch
 			size="sm"
-			label="Execute Block Scripts in Editor"
+			label="Execute Block Client Scripts in Editor"
 			description="Tries to best emulate how blocks will look like on the live site."
 			:modelValue="Boolean(builderSettings.doc?.execute_block_scripts_in_editor)"
 			@update:modelValue="
@@ -10,6 +10,16 @@
 					builderStore.updateBuilderSettings('execute_block_scripts_in_editor', val);
 				}
 			" />
+		<Switch
+			size="sm"
+			label="Prevent Click Emulation"
+			description="Prevents click events from being emulated in the editor for blocks with Block Client Scripts."
+			:modelValue="Boolean(builderSettings.doc?.block_click_handlers)"
+			@update:modelValue="
+				(val: Boolean) => {
+					builderStore.updateBuilderSettings('block_click_handlers', val);
+				}
+			" />
 		<div class="flex flex-col gap-2">
 			<p class="text-sm font-medium text-ink-gray-9">
 				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not perfectly replicate live site behavior. Executing
diff --git a/frontend/src/types/Builder/BuilderSettings.ts b/frontend/src/types/Builder/BuilderSettings.ts
index 86446f2ee..d0ac86483 100644
--- a/frontend/src/types/Builder/BuilderSettings.ts
+++ b/frontend/src/types/Builder/BuilderSettings.ts
@@ -32,4 +32,6 @@ export interface BuilderSettings{
 	home_page?: string,
 	/**	Execute Block Scripts in Editor : Check - Tries to best emulate how blocks will look like on the live site by executing Block Scripts.	*/
 	execute_block_scripts_in_editor?: 0 | 1
+	/**	Prevent Click Emulation : Check - Prevents click events from being emulated in the editor for blocks with Block Client Scripts.	*/
+	block_click_handlers?: 0 | 1
 }
\ No newline at end of file
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 3754260cb..c8ca78e79 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -8,6 +8,7 @@ import { confirmDialog, FileUploadHandler } from "frappe-ui";
 import { defineComponent, h, markRaw, reactive, ref, toRaw } from "vue";
 import { toast } from "vue-sonner";
 import Dialog from "../components/Controls/Dialog.vue";
+import { builderSettings } from "@/data/builderSettings";
 
 function getNumberFromPx(px: string | number | null | undefined): number {
 	if (!px) {
@@ -1235,6 +1236,19 @@ function saferExecuteBlockClientScript(
 
 			// Wrap functions (methods)
 			if (typeof val === "function") {
+				// disallow eventListeners
+				if (prop === "addEventListener" || prop === "removeEventListener") {
+					// disallow clicks
+					return (...args: any[]) => {
+						const eventType = args[0];
+						const disallowClicks = Boolean(builderSettings.doc?.block_click_handlers)
+						if (disallowClicks && (eventType === "click" || eventType === "dblclick")) {
+							throw new Error(`Blocked: cannot add/remove ${eventType} event listeners`);
+						}
+						const realArgs = args.map((a) => cache.get(a) || a);
+						return val.apply(target, realArgs);
+					};
+				}
 				return (...args) => {
 					const realArgs = args.map((a) => cache.get(a) || a);
 
@@ -1297,6 +1311,7 @@ function saferExecuteBlockClientScript(
 		fn.call(proxiedThis, context);
 	} catch (e) {
 		console.error("Error in user script:", e);
+		toast.warning("An error occurred while executing block script: " + (e instanceof Error ? e.message : ""));
 	}
 }
 

From 68969446c582b876f708c853a88099e44897a93e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 13:50:55 +0530
Subject: [PATCH 176/547] fix: disable warning toast for block script execution
 errors

too annoying?
---
 frontend/src/utils/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index c8ca78e79..842d316c4 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1311,7 +1311,7 @@ function saferExecuteBlockClientScript(
 		fn.call(proxiedThis, context);
 	} catch (e) {
 		console.error("Error in user script:", e);
-		toast.warning("An error occurred while executing block script: " + (e instanceof Error ? e.message : ""));
+		// toast.warning("An error occurred while executing block script: " + (e instanceof Error ? e.message : ""));
 	}
 }
 

From 726e3ee8daa0930b949e6d00d46b500e754b0486 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 21:14:31 +0530
Subject: [PATCH 177/547] refactor(TextBlock):  Move bubble menu related code
 to TextBlockBubbleMenu to make TextBlock simpler

---
 frontend/components.d.ts                      |   1 +
 frontend/src/components/TextBlock.vue         | 303 ++----------------
 .../src/components/TextBlockBubbleMenu.vue    | 296 +++++++++++++++++
 3 files changed, 327 insertions(+), 273 deletions(-)
 create mode 100644 frontend/src/components/TextBlockBubbleMenu.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index d50c77e63..ee45d2c4a 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -120,6 +120,7 @@ declare module 'vue' {
     TemplatePagePreview: typeof import('./src/components/TemplatePagePreview.vue')['default']
     TemplateSelector: typeof import('./src/components/TemplateSelector.vue')['default']
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
+    TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
   }
 }
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 8fd9e56a7..af2fcffca 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -1,187 +1,33 @@
 <template>
 	<component :is="block.getTag()" ref="component" :key="editor" class="__text_block__">
 		<div v-html="textContent" v-show="!editor && textContent" @click="handleClick"></div>
-		<bubble-menu
-			ref="menu"
-			:editor="editor"
-			:tippy-options="{
-				appendTo: overlayElement,
-				interactive: true,
-				onCreate: (instance) => {
-					watch(
-						() => canvasProps,
-						() => {
-							if (canvasProps?.panning || canvasProps?.scaling) {
-								instance.hide();
-							} else {
-								instance.show();
-							}
-						},
-						{ deep: true },
-					);
-				},
-			}"
+		<TextBlockBubbleMenu
 			v-if="editor"
-			class="rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-ink-gray-9 shadow-2xl"
-			:should-show="() => isEditable">
-			<div
-				v-if="settingLink"
-				class="flex flex-col gap-2 p-1"
-				v-on-click-outside="
-					() => {
-						nextTick(() => {
-							setLink(null, false);
-						});
-					}
-				">
-				<div class="flex">
-					<Input
-						type="text"
-						v-model="textLink"
-						placeholder="https://example.com"
-						class="link-input !w-56 text-sm"
-						@keydown.enter="
-							() => {
-								if (!linkInput) return;
-								const input = linkInput.$el.querySelector('input') as HTMLInputElement;
-								setLink(input.value);
-							}
-						"
-						ref="linkInput" />
-				</div>
-				<Input
-					type="checkbox"
-					:label="'Open in New Tab'"
-					class="text-xs"
-					v-model="openInNewTab"
-					@change="() => setLink(textLink, false)"></Input>
-			</div>
-			<div v-show="!settingLink" class="flex gap-1">
-				<button
-					@click="setHeading(1)"
-					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': block.getElement() === 'h1' }">
-					<code>H1</code>
-				</button>
-				<button
-					@click="setHeading(2)"
-					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': block.getElement() === 'h2' }">
-					<code>H2</code>
-				</button>
-				<button
-					@click="setHeading(3)"
-					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': block.getElement() === 'h3' }">
-					<code>H3</code>
-				</button>
-				<button
-					v-show="!block.isHeader()"
-					@click="editor?.chain().focus().toggleBold().run()"
-					class="rounded px-2 py-1 hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': editor.isActive('bold') }">
-					<FeatherIcon class="h-3 w-3" name="bold" :stroke-width="2" />
-				</button>
-				<button
-					v-show="!block.isHeader()"
-					@click="editor?.chain().focus().toggleItalic().run()"
-					class="rounded px-2 py-1 hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': editor.isActive('italic') }">
-					<FeatherIcon class="h-3 w-3" name="italic" :stroke-width="2" />
-				</button>
-				<button
-					v-show="!block.isHeader()"
-					@click="editor?.chain().focus().toggleStrike().run()"
-					class="rounded px-2 py-1 hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
-					<StrikeThroughIcon />
-				</button>
-
-				<button
-					v-show="!block.isHeader() && !block.isLink() && !block.isButton()"
-					@click="
-						() => {
-							if (!editor) return;
-							enableLinkInput();
-						}
-					"
-					class="rounded px-2 py-1 hover:bg-surface-gray-2"
-					:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
-					<FeatherIcon class="h-3 w-3" name="link" :stroke-width="2" />
-				</button>
-				<ColorPicker
-					:modelValue="selectedColor"
-					@update:modelValue="setTextColor"
-					:show-input="true"
-					placement="top"
-					:appendTo="overlayElement"
-					v-show="!block.isHeader()"
-					popoverClass="!min-w-fit">
-					<template #target="{ togglePopover, isOpen }">
-						<button v-show="!block.isHeader()" class="rounded px-2 py-1 hover:bg-surface-gray-2">
-							<div class="p-1">
-								<div
-									class="h-4 w-4 rounded shadow-sm"
-									@click="
-										() => {
-											togglePopover();
-										}
-									"
-									:style="{
-										background:
-											editor?.isActive('textStyle') && editor?.getAttributes('textStyle').color
-												? editor?.getAttributes('textStyle').color
-												: `url(/assets/builder/images/color-circle.png) center / contain`,
-									}"></div>
-							</div>
-						</button>
-					</template>
-					<template>
-						<Input
-							type="text"
-							:modelValue="selectedColor"
-							class="!w-32 text-sm"
-							@update:modelValue="setTextColor" />
-					</template>
-				</ColorPicker>
-			</div>
-		</bubble-menu>
+			:block="block"
+			:editor="editor"
+			:canvas-props="canvasProps"
+			:overlay-element="overlayElement"
+			:is-editable="isEditable"
+			ref="bubbleMenu" />
 		<editor-content
 			@click="handleClick"
 			:editor="editor"
 			@mousedown="selectionTriggered = true"
-			@mousemove="
-				() => {
-					if (selectionTriggered) {
-						canvasStore.preventClick = true;
-					}
-				}
-			"
-			@keydown.esc="
-				() => {
-					canvasStore.editableBlock = null;
-				}
-			"
-			v-on-click-outside="
-				(e: MouseEvent) => {
-					if ((e.target as HTMLElement).closest('.canvas-container')) {
-						canvasStore.editableBlock = null;
-					}
-				}
-			"
+			@mousemove="handleMouseMove"
+			@keydown.esc="handleEscKey"
+			v-on-click-outside="handleClickOutside"
 			@mouseup="selectionTriggered = false"
 			v-if="editor && showEditor"
 			class="relative"
 			:style="block.getRawStyles()"
-			@keydown="handleKeydown" />
+			@keydown="(e: KeyboardEvent) => bubbleMenu?.handleKeydown(e)" />
 		<slot />
 	</component>
 </template>
 
 <script setup lang="ts">
 import type Block from "@/block";
-import ColorPicker from "@/components/Controls/ColorPicker.vue";
-import Input from "@/components/Controls/Input.vue";
+import TextBlockBubbleMenu from "@/components/TextBlockBubbleMenu.vue";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 import { setFontFromHTML } from "@/utils/fontManager";
@@ -193,32 +39,20 @@ import { Link } from "@tiptap/extension-link";
 import TextStyle from "@tiptap/extension-text-style";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
-import { BubbleMenu, Editor, EditorContent, Extension } from "@tiptap/vue-3";
+import { Editor, EditorContent, Extension } from "@tiptap/vue-3";
 import { vOnClickOutside } from "@vueuse/components";
-import { debounce } from "frappe-ui";
 import { Plugin, PluginKey } from "prosemirror-state";
-import { Ref, computed, inject, nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
-import { toast } from "vue-sonner";
-import StrikeThroughIcon from "./Icons/StrikeThrough.vue";
+import { Ref, computed, inject, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
 
 const canvasStore = useCanvasStore();
 
 const dataChanged = ref(false);
-const settingLink = ref(false);
-const textLink = ref("");
-const openInNewTab = ref(false);
-const linkInput = ref(null) as Ref<typeof Input | null>;
 const component = ref(null) as Ref<HTMLElement | null>;
+const bubbleMenu = ref(null) as Ref<{ handleKeydown: (e: KeyboardEvent) => void } | null>;
 const overlayElement = document.querySelector("#overlay") as HTMLElement;
 let editor: Ref<Editor | null> = ref(null);
 let selectionTriggered = false as boolean;
 
-const selectedColor = computed(() => {
-	if (editor.value?.isActive("textStyle")) {
-		return editor.value.getAttributes("textStyle").color || "#000000";
-	}
-});
-
 const props = withDefaults(
 	defineProps<{
 		block: Block;
@@ -276,14 +110,16 @@ const textContent = computed(() => {
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
 	if (props.block.getDataKey("property") === "innerHTML") {
-		innerHTML = getDataForKey(props.data, props.block.getDataKey("key")) ?? innerHTML;
+		const result = getDataForKey(props.data, props.block.getDataKey("key"));
+		innerHTML = (typeof result === "string" ? result : null) ?? innerHTML;
 	}
 	props.block.dynamicValues
 		?.filter((dataKeyObj: BlockDataKey) => {
 			return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 		})
 		?.forEach((dataKeyObj: BlockDataKey) => {
-			innerHTML = getDataForKey(props.data as Object, dataKeyObj.key as string) ?? innerHTML;
+			const result = getDataForKey(props.data as Object, dataKeyObj.key as string);
+			innerHTML = (typeof result === "string" ? result : null) ?? innerHTML;
 		});
 	return innerHTML;
 };
@@ -382,10 +218,6 @@ if (!props.preview) {
 							props.block.setInnerHTML(innerHTML);
 						}
 					},
-					onSelectionUpdate: ({ editor }) => {
-						settingLink.value = false;
-						textLink.value = "";
-					},
 					autofocus: false,
 					injectCSS: false,
 				});
@@ -408,102 +240,27 @@ if (!props.preview) {
 	});
 }
 
-const handleKeydown = (e: KeyboardEvent) => {
-	if (e.key === "k" && e.metaKey) {
-		const blockWarnings = {
-			isHeader: "You cannot make heading a link",
-			isLink: "You cannot add link inside a link block",
-			isButton: "You cannot add link inside a button block",
-		};
-
-		const blockType = Object.entries(blockWarnings).find(([type]) => props.block[type]());
-		if (blockType) {
-			toast.warning(blockType[1]);
-		} else {
-			enableLinkInput();
-		}
-	}
-};
-
-const enableLinkInput = () => {
-	settingLink.value = true;
-	// check if link is already set on selection
-	const link = editor.value?.isActive("link") ? editor.value?.getAttributes("link").href : null;
-	textLink.value = link || "";
-	openInNewTab.value = editor.value?.isActive("link")
-		? editor.value?.getAttributes("link").target === "_blank"
-		: false;
-	nextTick(() => {
-		if (linkInput.value) {
-			const input = linkInput.value.$el.querySelector("input") as HTMLInputElement;
-			input.focus();
-		}
-	});
-};
-
-const setLink = (value: string | null, closeModal = true) => {
-	if (!value && !textLink.value) {
-		editor.value?.chain().focus().unsetLink().run();
-	} else {
-		const href = value || textLink.value;
-		// const isExternal = href.startsWith("http") || href.startsWith("//");
-		editor.value
-			?.chain()
-			.focus()
-			.setLink({
-				href,
-				target: openInNewTab.value ? "_blank" : "_self",
-			})
-			.run();
-	}
-	if (closeModal) {
-		settingLink.value = false;
-		textLink.value = "";
-	}
-};
-
-const setHeading = (level: 1 | 2 | 3) => {
-	const tag = `h${level}`;
-	if (props.block.element === tag) {
-		props.block.element = "p";
-	} else {
-		props.block.element = tag;
-	}
-
-	nextTick(() => {
-		props.block.selectBlock();
-	});
-};
-
 const handleClick = (e: MouseEvent) => {
 	if (isEditable.value) {
 		e.stopPropagation();
 	}
 };
 
-const isEntireTextSelected = () => {
-	if (!editor.value) return false;
-	const { from, to } = editor.value.state.selection;
-	const textContent = editor.value.state.doc.textContent;
-	const textLength = textContent.length;
-	return from === 0 && to >= textLength;
+const handleMouseMove = () => {
+	if (selectionTriggered) {
+		canvasStore.preventClick = true;
+	}
 };
 
-const setTextColor = debounce((color: string | undefined) => {
-	const colorValue = color as string;
-	if (!colorValue) {
-		editor.value?.chain().focus().setColor(colorValue).run();
-		if (isEntireTextSelected()) {
-			props.block.setStyle("color", "");
-		}
-		return;
-	}
+const handleEscKey = () => {
+	canvasStore.editableBlock = null;
+};
 
-	editor.value?.chain().focus().setColor(colorValue).run();
-	if (isEntireTextSelected()) {
-		props.block.setStyle("color", colorValue);
+const handleClickOutside = (e: MouseEvent) => {
+	if ((e.target as HTMLElement).closest(".canvas-container")) {
+		canvasStore.editableBlock = null;
 	}
-}, 50);
+};
 
 defineExpose({
 	component,
diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
new file mode 100644
index 000000000..3e555daf7
--- /dev/null
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -0,0 +1,296 @@
+<template>
+	<bubble-menu
+		ref="menu"
+		:editor="editor"
+		:tippy-options="bubbleMenuOptions.tippyOptions"
+		v-if="editor"
+		class="rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-ink-gray-9 shadow-2xl"
+		:should-show="bubbleMenuOptions.shouldShow">
+		<div
+			v-if="settingLink"
+			class="flex flex-col gap-2 p-1"
+			v-on-click-outside="
+				() => {
+					nextTick(() => {
+						setLink(null, false);
+					});
+				}
+			">
+			<div class="flex">
+				<Input
+					type="text"
+					v-model="textLink"
+					placeholder="https://example.com"
+					class="link-input !w-56 text-sm"
+					@keydown.enter="
+						() => {
+							if (!linkInput) return;
+							const input = linkInput.$el.querySelector('input') as HTMLInputElement;
+							setLink(input.value);
+						}
+					"
+					ref="linkInput" />
+			</div>
+			<Input
+				type="checkbox"
+				:label="'Open in New Tab'"
+				class="text-xs"
+				v-model="openInNewTab"
+				@change="() => setLink(textLink, false)"></Input>
+		</div>
+		<div v-show="!settingLink" class="flex gap-1">
+			<button
+				@click="setHeading(1)"
+				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': block.getElement() === 'h1' }">
+				<code>H1</code>
+			</button>
+			<button
+				@click="setHeading(2)"
+				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': block.getElement() === 'h2' }">
+				<code>H2</code>
+			</button>
+			<button
+				@click="setHeading(3)"
+				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': block.getElement() === 'h3' }">
+				<code>H3</code>
+			</button>
+			<button
+				v-show="!block.isHeader()"
+				@click="editor?.chain().focus().toggleBold().run()"
+				class="rounded px-2 py-1 hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': editor.isActive('bold') }">
+				<FeatherIcon class="h-3 w-3" name="bold" :stroke-width="2" />
+			</button>
+			<button
+				v-show="!block.isHeader()"
+				@click="editor?.chain().focus().toggleItalic().run()"
+				class="rounded px-2 py-1 hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': editor.isActive('italic') }">
+				<FeatherIcon class="h-3 w-3" name="italic" :stroke-width="2" />
+			</button>
+			<button
+				v-show="!block.isHeader()"
+				@click="editor?.chain().focus().toggleStrike().run()"
+				class="rounded px-2 py-1 hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
+				<StrikeThroughIcon />
+			</button>
+
+			<button
+				v-show="!block.isHeader() && !block.isLink() && !block.isButton()"
+				@click="
+					() => {
+						if (!editor) return;
+						enableLinkInput();
+					}
+				"
+				class="rounded px-2 py-1 hover:bg-surface-gray-2"
+				:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
+				<FeatherIcon class="h-3 w-3" name="link" :stroke-width="2" />
+			</button>
+			<div v-show="!block.isHeader()">
+				<ColorPicker
+					:modelValue="selectedColor"
+					@update:modelValue="setTextColor"
+					:show-input="true"
+					placement="top"
+					:appendTo="overlayElement"
+					popoverClass="!min-w-fit">
+					<template #target="{ togglePopover, isOpen }">
+						<button v-show="!block.isHeader()" class="rounded px-2 py-1 hover:bg-surface-gray-2">
+							<div class="p-1">
+								<div
+									class="h-4 w-4 rounded shadow-sm"
+									@click="
+										() => {
+											togglePopover();
+										}
+									"
+									:style="{
+										background:
+											editor?.isActive('textStyle') && editor?.getAttributes('textStyle').color
+												? editor?.getAttributes('textStyle').color
+												: `url(/assets/builder/images/color-circle.png) center / contain`,
+									}"></div>
+							</div>
+						</button>
+					</template>
+					<template>
+						<Input
+							type="text"
+							:modelValue="selectedColor"
+							class="!w-32 text-sm"
+							@update:modelValue="setTextColor" />
+					</template>
+				</ColorPicker>
+			</div>
+		</div>
+	</bubble-menu>
+</template>
+
+<script setup lang="ts">
+import type Block from "@/block";
+import ColorPicker from "@/components/Controls/ColorPicker.vue";
+import Input from "@/components/Controls/Input.vue";
+import StrikeThroughIcon from "@/components/Icons/StrikeThrough.vue";
+import { BubbleMenu, type Editor } from "@tiptap/vue-3";
+import { vOnClickOutside } from "@vueuse/components";
+import { debounce } from "frappe-ui";
+import { computed, nextTick, ref, watch, type Ref } from "vue";
+import { toast } from "vue-sonner";
+
+const props = defineProps<{
+	block: Block;
+	editor: Editor;
+	canvasProps: any;
+	overlayElement: HTMLElement;
+	isEditable: boolean;
+}>();
+
+const settingLink = ref(false);
+const textLink = ref("");
+const openInNewTab = ref(false);
+const linkInput = ref(null) as Ref<typeof Input | null>;
+
+const editorRef = computed(() => props.editor);
+const isEditableRef = computed(() => props.isEditable);
+
+const selectedColor = computed(() => {
+	if (props.editor?.isActive("textStyle")) {
+		return props.editor.getAttributes("textStyle").color || "#000000";
+	}
+});
+
+const enableLinkInput = () => {
+	settingLink.value = true;
+	// check if link is already set on selection
+	const link = props.editor?.isActive("link") ? props.editor?.getAttributes("link").href : null;
+	textLink.value = link || "";
+	openInNewTab.value = props.editor?.isActive("link")
+		? props.editor?.getAttributes("link").target === "_blank"
+		: false;
+	nextTick(() => {
+		if (linkInput.value) {
+			const input = linkInput.value.$el.querySelector("input") as HTMLInputElement;
+			input.focus();
+		}
+	});
+};
+
+const setLink = (value: string | null, closeModal = true) => {
+	if (!value && !textLink.value) {
+		props.editor?.chain().focus().unsetLink().run();
+	} else {
+		const href = value || textLink.value;
+		props.editor
+			?.chain()
+			.focus()
+			.setLink({
+				href,
+				target: openInNewTab.value ? "_blank" : "_self",
+			})
+			.run();
+	}
+	if (closeModal) {
+		settingLink.value = false;
+		textLink.value = "";
+	}
+};
+
+const setHeading = (level: 1 | 2 | 3) => {
+	const tag = `h${level}`;
+	if (props.block.element === tag) {
+		props.block.element = "p";
+	} else {
+		props.block.element = tag;
+	}
+
+	nextTick(() => {
+		props.block.selectBlock();
+	});
+};
+
+// Text color functionality
+const isEntireTextSelected = () => {
+	if (!props.editor) return false;
+	const { from, to } = props.editor.state.selection;
+	const textContent = props.editor.state.doc.textContent;
+	const textLength = textContent.length;
+	return from === 0 && to >= textLength;
+};
+
+const setTextColor = debounce((color: string | undefined) => {
+	const colorValue = color as string;
+	if (!colorValue) {
+		props.editor?.chain().focus().setColor(colorValue).run();
+		if (isEntireTextSelected()) {
+			props.block.setStyle("color", "");
+		}
+		return;
+	}
+
+	props.editor?.chain().focus().setColor(colorValue).run();
+	if (isEntireTextSelected()) {
+		props.block.setStyle("color", colorValue);
+	}
+}, 50);
+
+// Keyboard handling
+const handleKeydown = (e: KeyboardEvent) => {
+	if (e.key === "k" && e.metaKey) {
+		const blockWarnings = {
+			isHeader: "You cannot make heading a link",
+			isLink: "You cannot add link inside a link block",
+			isButton: "You cannot add link inside a button block",
+		};
+
+		const blockType = Object.entries(blockWarnings).find(([type]) => (props.block as any)[type]());
+		if (blockType) {
+			toast.warning(blockType[1]);
+		} else {
+			enableLinkInput();
+		}
+	}
+};
+
+watch(
+	editorRef,
+	(newEditor) => {
+		if (newEditor) {
+			newEditor.on("selectionUpdate", () => {
+				settingLink.value = false;
+				textLink.value = "";
+			});
+		}
+	},
+	{ immediate: true },
+);
+
+const bubbleMenuOptions = {
+	tippyOptions: {
+		appendTo: props.overlayElement,
+		interactive: true,
+		onCreate: (instance: any) => {
+			watch(
+				() => props.canvasProps,
+				() => {
+					if (props.canvasProps?.panning || props.canvasProps?.scaling) {
+						instance.hide();
+					} else {
+						instance.show();
+					}
+				},
+				{ deep: true },
+			);
+		},
+	},
+	shouldShow: () => isEditableRef.value,
+};
+
+defineExpose({
+	handleKeydown,
+});
+</script>

From 1acc471ebfb191f97ea400110236aaba87361964 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 21:32:25 +0530
Subject: [PATCH 178/547] fix: prevent unnecessary req. to server to resolve
 block data

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

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index f09560c84..d611a1d40 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -358,10 +358,14 @@ watch(
 		allResolvedProps,
 		() => props.block.getBlockDataScript(),
 		() => pageStore.settingPage,
-		() => props.block.getParentBlock()?.getBlockData(),
 	],
 	() => {
 		if (pageStore.settingPage) return;
+		if (props.block.getBlockDataScript().trim() === "") {
+			// If no data script, just use parent's cumulative data
+			cumulativeBlockData.value = props.block.getParentBlock()?.getBlockData() || {};
+			return;
+		}
 		fetchBlockData
 			.fetch({
 				block_id: props.block.blockId,
@@ -372,7 +376,6 @@ watch(
 				props.block.setBlockData(props.blockData || {}, "passedDown");
 				props.block.setBlockData(res, "own");
 				cumulativeBlockData.value = { ...(props.blockData || {}), ...res };
-				console.log("Cumulative Block Data for block", props.block.blockId, ":", props.blockData, res);
 			})
 			.catch((e: { exc: string | null }) => {
 				const error_message = e.exc?.split("\n").slice(-2)[0];

From e7fba55cf5c79774fe882682c676fd7e3219a571 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 21:46:17 +0530
Subject: [PATCH 179/547] fix: PageOptions popover placement

---
 frontend/src/components/BuilderToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 3c7401f4a..fe2d029ed 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -24,7 +24,7 @@
 			</div>
 		</div>
 		<div>
-			<Popover placement="bottom" popoverClass="!absolute top-0 !mt-[20px]">
+			<Popover placement="bottom-start" popoverClass="!absolute top-0 !mt-[20px]">
 				<template #target="{ togglePopover, isOpen }">
 					<div class="flex cursor-pointer items-center gap-2 p-2 text-ink-gray-8">
 						<div class="flex h-6 items-center text-base text-ink-gray-6" v-if="!pageStore.activePage">

From c1a49c5b7a0a7d229847b0631c9a0f0b25b5beb9 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 23:01:19 +0530
Subject: [PATCH 180/547] fix: watch update own block data from parents

---
 frontend/src/components/BuilderBlock.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index d611a1d40..df031d1d0 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -363,7 +363,9 @@ watch(
 		if (pageStore.settingPage) return;
 		if (props.block.getBlockDataScript().trim() === "") {
 			// If no data script, just use parent's cumulative data
-			cumulativeBlockData.value = props.block.getParentBlock()?.getBlockData() || {};
+			cumulativeBlockData.value = props.blockData || {};
+			props.block.setBlockData(props.blockData || {}, "passedDown");
+			props.block.setBlockData({}, "own");
 			return;
 		}
 		fetchBlockData

From 936a3a13bbaa51c2bfbb92a873dd56196e6917b2 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 20 Dec 2025 23:10:36 +0530
Subject: [PATCH 181/547] fix: Correct isFCSite assignment logic in
 builderStore

---
 frontend/src/stores/builderStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index 0044ff62a..37cdc649c 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -39,7 +39,7 @@ const useBuilderStore = defineStore("builderStore", {
 		realtime: new RealTimeHandler(),
 		readOnlyMode: false,
 		viewers: <UserInfo[]>[],
-		isFCSite: window.is_fc_site === "{{ is_fc_site }}" ? false : window.is_fc_site,
+		isFCSite: window.is_fc_site === "True" ? true : false,
 		activeFolder: useStorage("activeFolder", ""),
 	}),
 	actions: {

From 26312806a2c30a81d77a172cd0a884e6ec498fd2 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 20 Dec 2025 23:18:43 +0530
Subject: [PATCH 182/547] ix: missed proper dependency checks for block data

---
 frontend/src/components/BuilderBlock.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index df031d1d0..572056b0e 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -357,6 +357,7 @@ watch(
 		component,
 		allResolvedProps,
 		() => props.block.getBlockDataScript(),
+		() => props.blockData,
 		() => pageStore.settingPage,
 	],
 	() => {

From 91a808ad8629ea8987569a0416f68fea80e43386 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 21 Dec 2025 00:43:17 +0530
Subject: [PATCH 183/547] fix: properly suggest and resolve default props

---
 frontend/src/components/BuilderBlock.vue      |  2 +-
 .../src/components/PropsPopoverContent.vue    | 49 ++++++++++++++++++-
 frontend/src/utils/helpers.ts                 |  5 +-
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 572056b0e..0407e3250 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -326,7 +326,7 @@ const allResolvedProps = computed(() => {
 					key,
 					getPropValue(key, props.block, (path: string) => {
 						return getDataForKey(props.data || {}, path);
-					}),
+					}, props.defaultProps),
 				];
 			}),
 		),
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 1d22edd39..cc1183174 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -140,7 +140,7 @@ import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
 import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import usePageStore from "@/stores/pageStore";
-import { getCollectionKeys, getDataArray, getDataForKey } from "@/utils/helpers";
+import { getCollectionKeys, getDataArray, getStandardPropValue } from "@/utils/helpers";
 
 const props = withDefaults(
 	defineProps<{
@@ -283,9 +283,48 @@ const blockDataArray = computed(() => {
 	return [];
 });
 
+const defaultProps = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
+	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
+	if (repeaterRoot) {
+		const key = repeaterRoot.getDataKey("key");
+		const comesFrom = repeaterRoot.getDataKey("comesFrom");
+		if (key && comesFrom === "props") {
+			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
+			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+			if (!parsedValue) return {};
+			if (Array.isArray(parsedValue)) {
+				return {
+					item: {
+						value: parsedValue[0],
+						isStandard: false,
+						type: "static",
+					},
+				};
+			} else if (typeof parsedValue === "object") {
+				return {
+					key: {
+						value: Object.keys(parsedValue)[0],
+						isStandard: false,
+						type: "static",
+					},
+					value: {
+						value: parsedValue[Object.keys(parsedValue)[0]],
+						isStandard: false,
+						type: "static",
+					},
+				};
+			}
+		}
+	}
+	return {};
+});
+
 const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
 	const parentBlock = baseBlock.getParentBlock();
 	if (parentBlock) {
+		// TODO: disallow array and obj props from parent blocks
 		const parentProps: string[] = Object.keys(parentBlock.getBlockProps()).map((key) => key);
 		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
 			if (!acc.find((p: string) => p === prop)) {
@@ -309,6 +348,14 @@ const getOptions = async (query: string) => {
 			});
 		}
 	});
+	Object.keys(defaultProps.value || {}).map((prop) => {
+		if (prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--props`,
+			});
+		}
+	});
 	pageDataArray.value.map((prop) => {
 		if (prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 842d316c4..09f26f7f5 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1098,6 +1098,9 @@ const getPropValue = (
 			} else if (prop.comesFrom === "blockDataScript" && prop.value) {
 				return block.getBlockData("passedDown")[prop.value];
 			} else {
+				if (prop.value && defaultProps && defaultProps[prop.value] !== undefined) {
+					return defaultProps[prop.value].value;
+				}
 				if (prop.value) {
 					return getValueForInheritedProp(prop.value, block, getDataScriptValue);
 				}
@@ -1241,7 +1244,7 @@ function saferExecuteBlockClientScript(
 					// disallow clicks
 					return (...args: any[]) => {
 						const eventType = args[0];
-						const disallowClicks = Boolean(builderSettings.doc?.block_click_handlers)
+						const disallowClicks = Boolean(builderSettings.doc?.block_click_handlers);
 						if (disallowClicks && (eventType === "click" || eventType === "dblclick")) {
 							throw new Error(`Blocked: cannot add/remove ${eventType} event listeners`);
 						}

From de7eb4ba78e7f432e6872768d26dc8eb9e562082 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 11:28:24 +0530
Subject: [PATCH 184/547] fix: Tweak dialog color in Dark mode

---
 frontend/src/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index c99fee5f9..b3bbd05cb 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -60,4 +60,8 @@ p:empty::before {
 
 [data-theme='dark'] img {
 	filter: revert;
+}
+
+[role='dialog'] .bg-surface-modal {
+	background-color: var(--surface-white);
 }
\ No newline at end of file

From 34534a4db1a33dd6463bf7fdaafce392c3830391 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 13:01:08 +0530
Subject: [PATCH 185/547] fix: Rearrange toolbar button to maintain consistent
 spacing between each items

---
 frontend/src/components/BuilderToolbar.vue | 109 +++++++++++----------
 frontend/src/components/Icons/Play.vue     |   2 +-
 frontend/src/pages/PagePreview.vue         |   7 +-
 3 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index fe2d029ed..fe43180fe 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -71,38 +71,14 @@
 				</template>
 			</Popover>
 		</div>
-		<!-- actions -->
-		<div class="absolute right-3 flex items-center gap-5">
-			<!-- show dark mode toggle -->
-			<Badge variant="subtle" theme="orange" v-if="builderStore.readOnlyMode">Read Only</Badge>
-			<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6" arrow-class="mb-3">
-				<FeatherIcon
-					:name="isDark ? 'sun' : 'moon'"
-					class="h-4 w-4 cursor-pointer text-ink-gray-8 outline-none"
-					@click="() => transitionTheme(toggleDark)"></FeatherIcon>
-			</Tooltip>
-
-			<Dialog
-				:options="{
-					title: 'Get Started',
-					size: '4xl',
-				}"
-				v-model="showInfoDialog">
-				<template #body-content>
-					<iframe
-						class="h-[60vh] w-full rounded-sm"
-						src="https://www.youtube-nocookie.com/embed/videoseries?si=8NvOFXFq6ntafauO&amp;controls=0&amp;list=PL3lFfCEoMxvwZsBfCgk6vLKstZx204xe3"
-						title="Frappe Builder - Get Started"
-						frameborder="0"
-						allowfullscreen></iframe>
-				</template>
-			</Dialog>
-			<div class="group flex hover:gap-1" v-if="builderStore.viewers.length">
+		<div class="absolute right-3 flex items-center gap-4">
+			<div class="group flex hover:gap-1">
 				<div v-for="user in builderStore.viewers">
 					<Tooltip :text="currentlyViewedByText" :hoverDelay="0.6" arrow-class="mb-3">
 						<div class="ml-[-10px] h-6 w-6 cursor-pointer transition-all group-hover:ml-0">
 							<img
 								class="h-full w-full rounded-full border-2 border-orange-400 object-cover shadow-sm"
+								:title="user.fullname"
 								:src="user.image"
 								v-if="user.image" />
 							<div
@@ -115,34 +91,62 @@
 					</Tooltip>
 				</div>
 			</div>
-			<span class="text-sm text-ink-gray-3" v-if="pageStore.savingPage && pageStore.activePage?.is_template">
-				Saving template
-			</span>
-			<Tooltip text="Settings" :hoverDelay="0.6" arrow-class="mb-3">
-				<SettingsGearIcon
-					@click="showSettingsDialog = true"
-					class="size-4 cursor-pointer text-ink-gray-8"></SettingsGearIcon>
-			</Tooltip>
-			<Dialog
-				v-model="showSettingsDialog"
-				:disableOutsideClickToClose="true"
-				class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
-				:options="{
-					title: 'Settings',
-					size: '5xl',
-				}">
-				<template #body>
-					<BuilderSettings @close="showSettingsDialog = false"></BuilderSettings>
-				</template>
-			</Dialog>
-
-			<router-link :to="{ name: 'preview', params: { pageId: pageStore.selectedPage } }" title="Preview">
-				<Tooltip text="Preview" :hoverDelay="0.6" arrow-class="mb-3">
-					<PlayIcon class="h-[18px] w-[18px] cursor-pointer text-ink-gray-8"></PlayIcon>
+			<Badge variant="subtle" theme="orange" v-if="builderStore.readOnlyMode">Read Only</Badge>
+			<div class="flex gap-2">
+				<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6" arrow-class="mb-3">
+					<Button
+						variant="ghost"
+						class="!p-1"
+						@click="() => transitionTheme(toggleDark)"
+						:icon="isDark ? 'sun' : 'moon'"></Button>
+				</Tooltip>
+				<span
+					class="text-sm text-ink-gray-3"
+					v-if="pageStore.savingPage && pageStore.activePage?.is_template">
+					Saving template
+				</span>
+				<Tooltip text="Settings" :hoverDelay="0.6" arrow-class="mb-3">
+					<Button
+						variant="ghost"
+						@click="showSettingsDialog = true"
+						class="!p-1"
+						:icon="SettingsGearIcon"></Button>
 				</Tooltip>
-			</router-link>
+				<router-link :to="{ name: 'preview', params: { pageId: pageStore.selectedPage } }" title="Preview">
+					<Tooltip text="Preview" :hoverDelay="0.6" arrow-class="mb-3">
+						<Button variant="ghost" class="!p-1" :icon="PlayIcon"></Button>
+					</Tooltip>
+				</router-link>
+			</div>
 			<PublishButton :disabled="builderStore.readOnlyMode"></PublishButton>
 		</div>
+		<Dialog
+			:options="{
+				title: 'Get Started',
+				size: '4xl',
+			}"
+			v-model="showInfoDialog">
+			<template #body-content>
+				<iframe
+					class="h-[60vh] w-full rounded-sm"
+					src="https://www.youtube-nocookie.com/embed/videoseries?si=8NvOFXFq6ntafauO&amp;controls=0&amp;list=PL3lFfCEoMxvwZsBfCgk6vLKstZx204xe3"
+					title="Frappe Builder - Get Started"
+					frameborder="0"
+					allowfullscreen></iframe>
+			</template>
+		</Dialog>
+		<Dialog
+			v-model="showSettingsDialog"
+			:disableOutsideClickToClose="true"
+			class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
+			:options="{
+				title: 'Settings',
+				size: '5xl',
+			}">
+			<template #body>
+				<BuilderSettings @close="showSettingsDialog = false"></BuilderSettings>
+			</template>
+		</Dialog>
 	</div>
 </template>
 <script setup lang="ts">
@@ -175,7 +179,6 @@ const pageStore = usePageStore();
 
 const showInfoDialog = ref(false);
 const showSettingsDialog = ref(false);
-const toolbar = ref(null);
 
 const currentlyViewedByText = computed(() => {
 	const names = builderStore.viewers.map((viewer) => viewer.fullname).map((name) => name.split(" ")[0]);
diff --git a/frontend/src/components/Icons/Play.vue b/frontend/src/components/Icons/Play.vue
index 10002418a..bcedbc324 100644
--- a/frontend/src/components/Icons/Play.vue
+++ b/frontend/src/components/Icons/Play.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
 			fill-rule="evenodd"
 			clip-rule="evenodd"
diff --git a/frontend/src/pages/PagePreview.vue b/frontend/src/pages/PagePreview.vue
index 7b811fb4f..5f1b8264e 100644
--- a/frontend/src/pages/PagePreview.vue
+++ b/frontend/src/pages/PagePreview.vue
@@ -26,9 +26,10 @@
 			</div>
 			<div class="flex items-center gap-4">
 				<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6">
-					<FeatherIcon
-						:name="isDark ? 'sun' : 'moon'"
-						class="h-4 w-4 cursor-pointer text-ink-gray-8 outline-none"
+					<Button
+						variant="ghost"
+						:icon="isDark ? 'sun' : 'moon'"
+						class="h-8 w-8 cursor-pointer text-ink-gray-8 outline-none"
 						@click="() => transitionTheme(toggleDark)" />
 				</Tooltip>
 				<PublishButton></PublishButton>

From 5d2cd109b1eb2f44f16ff522069b9caa971896bc Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 13:02:48 +0530
Subject: [PATCH 186/547] fix: Misc style fixes

---
 frontend/src/components/Controls/Dialog.vue     | 11 +++++++----
 .../src/components/PageClientScriptManager.vue  | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/Dialog.vue b/frontend/src/components/Controls/Dialog.vue
index dd7a4f96c..1a4c2832d 100644
--- a/frontend/src/components/Controls/Dialog.vue
+++ b/frontend/src/components/Controls/Dialog.vue
@@ -1,5 +1,10 @@
 <template>
-	<Dialog v-bind="attrs" ref="dialogRef" @update:modelValue="toggleDialog" @close="toggleDialog">
+	<Dialog
+		:modelValue="attrs.modelValue as boolean"
+		v-bind="attrs"
+		ref="dialogRef"
+		@update:modelValue="toggleDialog"
+		@close="() => toggleDialog(false)">
 		<template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotData">
 			<slot :name="name" v-bind="slotData"></slot>
 		</template>
@@ -10,14 +15,12 @@
 import { confirm } from "@/utils/helpers";
 import { useEventListener } from "@vueuse/core";
 import { Dialog } from "frappe-ui";
-import { ref, useAttrs } from "vue";
+import { useAttrs } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 
 const attrs = useAttrs();
 const emit = defineEmits(["update:modelValue", "close"]);
 
-const dialogRef = ref();
-
 // close dialog on route change
 onBeforeRouteLeave((to, from, next) => {
 	if (!attrs.modelValue) {
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 758989e70..5139a55c4 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -14,10 +14,10 @@
 								href="#"
 								:class="{
 									'text-ink-gray-5': activeScript !== script,
-									'font-medium text-ink-gray-8': activeScript === script,
+									'font-medium !text-ink-gray-8': activeScript === script,
 								}"
 								@click="selectScript(script)"
-								class="group flex h-6 items-center justify-between gap-1 text-sm first-of-type:mt-6 last-of-type:mb-2">
+								class="group flex h-6 items-center justify-between gap-1 text-sm first-of-type:mt-6 last-of-type:mb-2 hover:text-ink-gray-7">
 								<div class="flex w-[90%] items-center gap-1">
 									<GripVertical class="drag-handle cursor-grab text-ink-gray-5 hover:text-ink-gray-8" />
 									<CSSIcon class="shrink-0" v-if="script.script_type === 'CSS'" />
@@ -67,14 +67,21 @@
 						</template>
 					</draggable>
 
-					<div class="flex w-full gap-2" v-if="!builderStore.readOnlyMode">
+					<div
+						class="grid w-full grid-cols-1 gap-2"
+						v-if="!builderStore.readOnlyMode"
+						:class="
+							clientScriptResource.data && clientScriptResource.data.length > 0
+								? 'grid-cols-2'
+								: 'grid-cols-1'
+						">
 						<Dropdown
 							:options="[
 								{ label: 'JavaScript', onClick: () => addScript('JavaScript') },
 								{ label: 'CSS', onClick: () => addScript('CSS') },
 							]"
 							size="sm"
-							class="flex-1 [&>div>div>div]:w-full">
+							class="[&>div>div>div]:w-full">
 							<template v-slot="{ open }">
 								<BuilderButton class="w-full text-xs" @click="open">New Script</BuilderButton>
 							</template>
@@ -83,7 +90,7 @@
 						<Autocomplete
 							v-if="clientScriptResource.data && clientScriptResource.data.length > 0"
 							:options="clientScriptOptions"
-							class="[&>div>div>div]:overflow-hidden"
+							bodyClasses="overflow-hidden [&>ul]:!bg-surface-white"
 							@update:modelValue="(option: Option) => attachScript(option.value)"
 							placeholder="Attach Script">
 							<template v-slot:target="{ open }">

From fee57faeb0a63d2255dd4a17e37ba3213965ef3c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 13:15:35 +0530
Subject: [PATCH 187/547] fix: Dialog style in Dark Mode

---
 frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index b3bbd05cb..442227591 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -62,6 +62,6 @@ p:empty::before {
 	filter: revert;
 }
 
-[role='dialog'] .bg-surface-modal {
+[role='dialog'].bg-surface-modal, [role='dialog'] .bg-surface-modal {
 	background-color: var(--surface-white);
 }
\ No newline at end of file

From 078c48991e549981627370e07211fa235d9c84b1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 13:28:06 +0530
Subject: [PATCH 188/547] fix: Header style in the canvas component

---
 frontend/src/components/BuilderCanvas.vue        | 4 +++-
 frontend/src/components/Modals/PageListModal.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index e1e1b4e38..db5c65df2 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -1,6 +1,5 @@
 <template>
 	<div ref="canvasContainer" @click="handleClick">
-		<slot name="header"></slot>
 		<Transition name="fade">
 			<div
 				class="absolute bottom-0 left-0 right-0 top-0 grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
@@ -76,6 +75,9 @@
 			:class="{ 'pointer-events-none': isOverDropZone }"
 			id="overlay"
 			ref="overlay" />
+		<div class="absolute top-0 order-1 w-full">
+			<slot name="header"></slot>
+		</div>
 		<DraggablePopup
 			v-model="builderStore.showSearchBlock"
 			:container="canvasContainer"
diff --git a/frontend/src/components/Modals/PageListModal.vue b/frontend/src/components/Modals/PageListModal.vue
index 6ea19686f..cfcf338a9 100644
--- a/frontend/src/components/Modals/PageListModal.vue
+++ b/frontend/src/components/Modals/PageListModal.vue
@@ -23,7 +23,7 @@
 								:alt="page.page_title"
 								class="w-26 h-16 rounded-lg border border-outline-gray-1" />
 							<div>
-								<div class="font-bold">{{ page.page_title }}</div>
+								<div class="font-bold text-ink-gray-8">{{ page.page_title }}</div>
 								<div class="text-sm text-gray-500">{{ page.route }}</div>
 							</div>
 						</div>

From ad7979445a923dd297102dc2285bb863b3c0916f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 13:31:57 +0530
Subject: [PATCH 189/547] fix: Rearrage action button so that it shows up on
 the top of editor

---
 .../src/components/Controls/CodeEditor.vue     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index bba965715..36e3e7b5a 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -4,15 +4,6 @@
 			{{ label }}
 			<span v-if="isDirty" class="text-[10px] text-gray-600">●</span>
 		</span>
-		<div v-if="actionButton" class="absolute bottom-1.5 right-1.5 flex gap-1">
-			<BuilderButton
-				@click="actionButton?.handler"
-				variant="subtle"
-				class="!h-6 !w-6 border !border-outline-gray-2 bg-surface-white [&>svg]:!h-3.5 [&>svg]:!w-3.5"
-				:icon="actionButton.icon"
-				:title="actionButton.label"
-				:disabled="readonly"></BuilderButton>
-		</div>
 		<div
 			:style="{
 				'min-height': height,
@@ -29,6 +20,15 @@
 				@save="handleSave"
 				@blur="handleBlur" />
 		</div>
+		<div v-if="actionButton" class="absolute bottom-1.5 right-1.5 flex gap-1">
+			<BuilderButton
+				@click="actionButton?.handler"
+				variant="subtle"
+				class="!h-6 !w-6 border !border-outline-gray-2 bg-surface-white [&>svg]:!h-3.5 [&>svg]:!w-3.5"
+				:icon="actionButton.icon"
+				:title="actionButton.label"
+				:disabled="readonly"></BuilderButton>
+		</div>
 		<span class="mt-1 text-p-xs text-ink-gray-6" v-show="description" v-html="description"></span>
 		<BuilderButton
 			v-if="showSaveButton"

From 32c30d0b8972e19f315320bb3d58932024433078 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 14:09:24 +0530
Subject: [PATCH 190/547] fix: Misc styles

- Fix dark mode of autocomplete to make it look consistent with other inputs
- Fix type for placement in ColorInput. It should only accept specific options
- Remove unnecessary class overrides in Input.vue
---
 .../src/components/Controls/Autocomplete.vue  |  4 +-
 .../src/components/Controls/ColorInput.vue    |  2 +-
 frontend/src/components/Controls/Input.vue    | 59 +------------------
 3 files changed, 4 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index bb690f5b1..33a3a758f 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -7,7 +7,7 @@
 		:reset-search-term-on-blur="false">
 		<div class="relative" ref="containerRef">
 			<div
-				class="group form-input flex h-7 flex-1 items-center gap-2 rounded border-outline-gray-1 bg-surface-gray-1 p-0 text-sm text-ink-gray-8 transition-colors focus-within:ring-2 focus-within:ring-outline-gray-3 hover:border-outline-gray-2">
+				class="group form-input flex h-7 flex-1 items-center gap-2 rounded bg-surface-gray-2 p-0 text-sm text-ink-gray-8 transition-colors focus-within:bg-surface-white focus-within:ring-2 focus-within:ring-outline-gray-3">
 				<div v-if="$slots.prefix" class="flex items-center pl-2">
 					<slot name="prefix" />
 				</div>
@@ -30,7 +30,7 @@
 			</div>
 
 			<ComboboxContent
-				class="absolute z-10 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
+				class="absolute z-10 mt-1 max-h-80 w-full overflow-hidden rounded-lg border bg-surface-white shadow-xl">
 				<div class="overflow-y-auto p-1">
 					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
 						<ComboboxSeparator
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 052c8f03a..9bd921572 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -98,7 +98,7 @@ const props = withDefaults(
 		modelValue?: HashString | null;
 		label?: string;
 		placeholder?: string;
-		placement?: string;
+		placement?: "top" | "bottom" | "left" | "right";
 		showColorVariableOptions?: boolean;
 		showPickerOnMount?: boolean;
 	}>(),
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 439d9d694..ab20373a8 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -1,7 +1,6 @@
 <template>
 	<div class="relative w-full">
 		<FormControl
-			:class="classes"
 			:type="type"
 			@change="triggerUpdate"
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
@@ -32,7 +31,7 @@
 <script lang="ts" setup>
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { useDebounceFn, useVModel } from "@vueuse/core";
-import { computed, useAttrs } from "vue";
+import { useAttrs } from "vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -54,62 +53,6 @@ defineOptions({
 	inheritAttrs: false,
 });
 
-const classes = computed(() => {
-	const _classes = [];
-	if (!["select", "checkbox"].includes(props.type) && !props.hideClearButton && props.modelValue) {
-		_classes.push("[&>div>input]:pr-7");
-	}
-	if (props.type === "checkbox") {
-		_classes.push("[&>label]:text-ink-gray-7");
-	}
-	if (props.type === "select") {
-		_classes.push(
-			...[
-				"[&>div>select]:text-ink-gray-8",
-				"[&>label]:text-ink-gray-7",
-				"[&>div>select]:border-outline-gray-1",
-				"[&>div>select]:bg-surface-gray-2",
-				"[&>div>select]:pr-7",
-				"[&>div>select]:hover:border-outline-gray-2",
-				"[&>div>select]:hover:bg-surface-gray-1",
-				"focus:[&>div>select]:bg-surface-gray-1",
-				"focus:[&>div>select]:border-outline-gray-3",
-				"focus:[&>div>select]:ring-outline-gray-3",
-			],
-		);
-	} else if (props.type === "textarea") {
-		_classes.push([
-			"[&>div>textarea]:border-outline-gray-1",
-			"[&>label]:text-ink-gray-7",
-			"[&>div>textarea]:!bg-surface-gray-2",
-			"[&>div>textarea]:text-ink-gray-8",
-			"[&>div>textarea]:focus:border-outline-gray-3",
-			"[&>div>textarea]:focus:bg-surface-gray-1",
-			"[&>div>textarea]:hover:!border-outline-gray-2",
-			"[&>div>textarea]:hover:!bg-surface-gray-1",
-			"focus:[&>div>textarea]:border-outline-gray-3",
-			"focus:[&>div>textarea]:bg-surface-gray-1",
-			"focus:[&>div>textarea]:ring-outline-gray-3",
-		]);
-	} else {
-		_classes.push([
-			"[&>label]:text-ink-gray-7",
-			"[&>div>input]:border-outline-gray-1",
-			"[&>div>input]:bg-surface-gray-2",
-			"[&>div>input]:text-ink-gray-8",
-			"text-sm",
-			"[&>p]:text-p-xs",
-			"[&>div>input]:hover:!border-outline-gray-2",
-			"[&>div>input]:hover:!bg-surface-gray-1",
-			"[&>div>input]:focus-visible:bg-surface-gray-1",
-			"focus:[&>div>input]:border-outline-gray-3",
-			"focus:[&>div>input]:bg-surface-gray-1",
-			"focus:[&>div>input]:ring-outline-gray-3",
-		]);
-	}
-	return _classes;
-});
-
 const attrs = useAttrs();
 
 const clearValue = () => {

From f5906d37569cfafae69e8c929928d9cc93db5953 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 21 Dec 2025 14:26:03 +0530
Subject: [PATCH 191/547] fix: Preview button alignment

---
 frontend/src/components/BuilderToolbar.vue | 9 ++-------
 frontend/src/components/Icons/Play.vue     | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index fe43180fe..84b82fde8 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -96,7 +96,6 @@
 				<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6" arrow-class="mb-3">
 					<Button
 						variant="ghost"
-						class="!p-1"
 						@click="() => transitionTheme(toggleDark)"
 						:icon="isDark ? 'sun' : 'moon'"></Button>
 				</Tooltip>
@@ -106,15 +105,11 @@
 					Saving template
 				</span>
 				<Tooltip text="Settings" :hoverDelay="0.6" arrow-class="mb-3">
-					<Button
-						variant="ghost"
-						@click="showSettingsDialog = true"
-						class="!p-1"
-						:icon="SettingsGearIcon"></Button>
+					<Button variant="ghost" @click="showSettingsDialog = true" :icon="SettingsGearIcon"></Button>
 				</Tooltip>
 				<router-link :to="{ name: 'preview', params: { pageId: pageStore.selectedPage } }" title="Preview">
 					<Tooltip text="Preview" :hoverDelay="0.6" arrow-class="mb-3">
-						<Button variant="ghost" class="!p-1" :icon="PlayIcon"></Button>
+						<Button variant="ghost" :icon="PlayIcon"></Button>
 					</Tooltip>
 				</router-link>
 			</div>
diff --git a/frontend/src/components/Icons/Play.vue b/frontend/src/components/Icons/Play.vue
index bcedbc324..10002418a 100644
--- a/frontend/src/components/Icons/Play.vue
+++ b/frontend/src/components/Icons/Play.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
 			fill-rule="evenodd"
 			clip-rule="evenodd"

From 4f14a2caaefbf9fc71404f41063f3aa07370c0f4 Mon Sep 17 00:00:00 2001
From: Hemant <guptahemant350@gmail.com>
Date: Mon, 22 Dec 2025 14:57:31 +0530
Subject: [PATCH 192/547] fix: paste and cut events not updating input values

---
 frontend/src/components/Controls/Input.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 439d9d694..54602a4f8 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -4,6 +4,9 @@
 			:class="classes"
 			:type="type"
 			@change="triggerUpdate"
+			@paste="triggerUpdate"
+			@cut="triggerUpdate"
+			@focus="handleFocus"
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
 			autocomplete="off"
 			:autofocus="autofocus"
@@ -41,10 +44,12 @@ const props = withDefaults(
 		hideClearButton?: boolean;
 		autofocus?: boolean;
 		disabled?: boolean;
+		selectOnFocus?: boolean;
 	}>(),
 	{
 		type: "text",
 		modelValue: "",
+		selectOnFocus: true,
 	},
 );
 const emit = defineEmits(["update:modelValue", "input"]);
@@ -123,4 +128,13 @@ const triggerUpdate = useDebounceFn(($event: Event) => {
 		emit("update:modelValue", ($event.target as HTMLInputElement).value);
 	}
 }, 100);
+
+const handleFocus = ($event: Event) =>{
+	if(props.selectOnFocus && !props.disabled && props.type !== "checkbox"){
+		const target = $event.target as HTMLInputElement;
+		setTimeout(()=>{
+			target.select();
+		}, 0);
+	}
+}
 </script>

From a4eb807c9b13e6b1f6cea44a5591d47a45be3fb5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 23 Dec 2025 12:01:51 +0530
Subject: [PATCH 193/547] fix: updated inline code editor

---
 frontend/src/pages/PageBuilder.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index efb87463c..9bb577347 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -80,28 +80,23 @@
 	</div>
 	<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
 	<Dialog
-		v-model="canvasStore.showHTMLDialog"
+		v-model="canvasStore.showExpandedEditorDialog"
 		class="overscroll-none"
-		:isDirty="htmlEditor?.isDirty"
+		:isDirty="expandedEditor?.isDirty"
 		:options="{
 			title: 'HTML',
 			size: '7xl',
 		}">
 		<template #body-content>
 			<CodeEditor
-				:modelValue="canvasStore.editableBlock?.getInnerHTML()"
-				ref="htmlEditor"
-				type="HTML"
+				:modelValue="getExpandedEditorContent()"
+				ref="expandedEditor"
+				:type="expandedEditorOptions.type"
 				height="68vh"
-				label="Edit HTML"
+				:label="expandedEditorOptions.label"
 				:showLineNumbers="true"
 				:showSaveButton="true"
-				@save="
-					(val) => {
-						canvasStore.editableBlock?.setInnerHTML(val);
-						canvasStore.showHTMLDialog = false;
-					}
-				"
+				@save="saveExpandedEditorContent"
 				required />
 		</template>
 	</Dialog>

From 6da60621ca05de6849721105e569ec877e9442ca Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 23 Dec 2025 17:34:10 +0530
Subject: [PATCH 194/547] style: Fix formatting

---
 frontend/src/components/Controls/Input.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index a993e502b..960ee3023 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -72,12 +72,12 @@ const triggerUpdate = useDebounceFn(($event: Event) => {
 	}
 }, 100);
 
-const handleFocus = ($event: Event) =>{
-	if(props.selectOnFocus && !props.disabled && props.type !== "checkbox"){
+const handleFocus = ($event: Event) => {
+	if (props.selectOnFocus && !props.disabled && props.type !== "checkbox") {
 		const target = $event.target as HTMLInputElement;
-		setTimeout(()=>{
+		setTimeout(() => {
 			target.select();
 		}, 0);
 	}
-}
+};
 </script>

From 9115d08669d86b6b61e49d7703820ea6de09c788 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 23 Dec 2025 17:46:12 +0530
Subject: [PATCH 195/547] build: update Python setup in CI workflows

---
 .github/workflows/server-tests.yml | 4 ++--
 .github/workflows/ui-tests.yml     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/server-tests.yml b/.github/workflows/server-tests.yml
index 76c95057d..38267e850 100644
--- a/.github/workflows/server-tests.yml
+++ b/.github/workflows/server-tests.yml
@@ -41,9 +41,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v6
         with:
-          python-version: '3.10'
+          python-version: '3.14'
 
       - name: Setup Node
         uses: actions/setup-node@v3
diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index a74b84ef4..963e6e703 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -38,9 +38,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v6
         with:
-          python-version: '3.10'
+          python-version: '3.14'
 
       - uses: actions/setup-node@v3
         with:

From b030c6e1ebe3af73af42ef45fc586c61a054d5f1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 23 Dec 2025 19:20:14 +0530
Subject: [PATCH 196/547] fix: Add 'interactjs' to optimizeDeps to avoid build
 failure

---
 frontend/vite.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index 5beecd95f..0f1d9b8a8 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -35,6 +35,6 @@ export default defineConfig({
 		allowedHosts: true,
 	},
 	optimizeDeps: {
-		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client"],
+		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client", "interactjs"],
 	},
 });

From 15319afab2a801e0090810419230528073b81253 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 00:24:35 +0530
Subject: [PATCH 197/547] fix: block data now being tracked fro each rendered
 block

the problem with previous approach was that repeaters used a single block object to repeat which means updating an attribute of "one" of the repeating block object(s) replicated the same changes to  "rest" of them as they are actually one block object being re-used. this solution keeps the block data in the rendered component BuilderBlock instead of keeping it on the object attribute, we also maintain a store to fetch block data (of the last repearting block) for DynamicValueHandler, Props Autocomplete or CollectionOptions as they are not associated with any block
---
 frontend/src/block.ts                         | 22 -----
 frontend/src/components/BlockHTML.vue         | 29 +++++--
 .../CollectionOptionsSection.ts               |  5 +-
 frontend/src/components/BuilderBlock.vue      | 84 +++++++++++--------
 .../Controls/DynamicValueHandler.vue          | 14 +++-
 frontend/src/components/DataLoaderBlock.vue   | 13 ++-
 frontend/src/components/PageScript.vue        | 12 ++-
 .../src/components/PropsPopoverContent.vue    | 20 +++--
 frontend/src/components/TextBlock.vue         | 23 +++--
 frontend/src/utils/blockController.ts         |  6 --
 frontend/src/utils/helpers.ts                 | 12 +--
 11 files changed, 141 insertions(+), 99 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index dd35857fe..87d56fd92 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -44,8 +44,6 @@ class Block implements BlockOptions {
 	dynamicValues: Array<BlockDataKey>;
 	blockClientScript?: string;
 	blockDataScript?: string;
-	ownBlockData: Record<string, any> = {};
-	passedDownBlockData: Record<string, any> = {};
 	props?: BlockProps;
 	// @ts-expect-error
 	referenceComponent: Block | null;
@@ -951,26 +949,6 @@ class Block implements BlockOptions {
 	setBlockDataScript(script: string) {
 		this.blockDataScript = script;
 	}
-	getBlockData(filter: "all" | "passedDown" | "own" = "all"): any {
-		switch (filter) {
-			case "all":
-				return { ...this.passedDownBlockData, ...this.ownBlockData };
-			case "passedDown":
-				return this.passedDownBlockData;
-			case "own":
-				return this.ownBlockData;
-		}
-	}
-	setBlockData(data: Record<string, any>, filter: "passedDown" | "own" = "own") {
-		switch (filter) {
-			case "passedDown":
-				this.passedDownBlockData = data;
-				break;
-			case "own":
-				this.ownBlockData = data;
-				break;
-		}
-	}
 	getBlockProps(): BlockProps {
 		let blockProps = {};
 		if (this.isExtendedFromComponent() && !Object.keys(this.props || {}).length) {
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 53816257a..4fc520c0e 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -18,21 +18,28 @@ const hasBlockProps = computed(() => {
 	return props.defaultProps || Object.keys(props.block.getBlockProps()).length > 0;
 });
 
+const getDataScriptValue = (path: string): any => {
+	return getDataForKey(props.data || {}, path);
+};
+const getBlockDataScriptValue = (path: string): any => {
+	return getDataForKey(props.blockData || {}, path);
+};
+
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
 	if (props.data || props.blockData || hasBlockProps.value) {
 		const data = props.data; // to "freeze" props.data for getDataScriptValue
-		const getDataScriptValue = (path: string): any => {
-			return getDataForKey(data || {}, path);
-		};
-		const getBlockDataScriptValue = (path: string): any => {
-			return getDataForKey(props.blockData || {}, path);
-		};
 		if (props.block.getDataKey("property") === "innerHTML") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
 				// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-				value = getPropValue(props.block.getDataKey("key"), props.block, getDataScriptValue, props.defaultProps);
+				value = getPropValue(
+					props.block.getDataKey("key"),
+					props.block,
+					getDataScriptValue,
+					getBlockDataScriptValue,
+					props.defaultProps,
+				);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
 				value = getBlockDataScriptValue(props.block.getDataKey("key"));
 			} else {
@@ -47,7 +54,13 @@ const getDynamicContent = () => {
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+					value = getPropValue(
+						dataKeyObj.key as string,
+						props.block,
+						getDataScriptValue,
+						getBlockDataScriptValue,
+						props.defaultProps,
+					);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index b234478fc..4a7e1edeb 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -1,4 +1,5 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import useBlockDataStore from "@/stores/blockDataStore";
 import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
@@ -8,13 +9,15 @@ import { computed, h } from "vue";
 
 const keyOptions = computed(() => {
 	const pageStore = usePageStore();
+	const blockDataStore = useBlockDataStore();
 	let result: { label: string; value: string; prefix: any }[] = [];
 
 	const repeatableDataKeys: string[] = [];
 	const repeatableBlockDataKeys: string[] = [];
 
 	let pageDataCollectionObject = pageStore.pageData;
-	let blockDataCollectionObject = blockController.getFirstSelectedBlock()?.getBlockData() || {};
+	let blockDataCollectionObject =
+		blockDataStore.getBlockData(blockController.getFirstSelectedBlock()?.blockId || "") || {};
 	let collectionObject = {};
 
 	const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 0407e3250..ff3d344cf 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -52,12 +52,14 @@ import { builderSettings } from "@/data/builderSettings";
 import fetchBlockData from "@/data/blockData";
 import usePageStore from "@/stores/pageStore";
 import { toast } from "vue-sonner";
+import useBlockDataStore from "@/stores/blockDataStore";
 
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
 const editor = ref<InstanceType<typeof BlockEditor> | null>(null);
 const pageStore = usePageStore();
+const blockDataStore = useBlockDataStore();
 
 const props = withDefaults(
 	defineProps<{
@@ -92,6 +94,7 @@ const draggable = computed(() => {
 
 const isHovered = ref(false);
 const isSelected = ref(false);
+const ownBlockData = ref<Record<string, any>>({});
 
 const uid = `builder-block-${props.block.blockId}-${Math.random().toString(36).substr(2, 9)}`;
 
@@ -123,6 +126,20 @@ const hasBlockProps = computed(() => {
 	return props.defaultProps || Object.keys(props.block.getBlockProps()).length > 0;
 });
 
+const cumulativeBlockData = computed(() => {
+	return {
+		...props.blockData,
+		...ownBlockData.value,
+	};
+});
+
+const getDataScriptValue = (path: string): any => {
+	return getDataForKey(props.data || {}, path);
+};
+const getBlockDataScriptValue = (path: string): any => {
+	return getDataForKey(cumulativeBlockData.value, path);
+};
+
 const attributes = computed(() => {
 	const attribs = { ...props.block.getAttributes(), ...attrs } as { [key: string]: any };
 	if (
@@ -141,13 +158,6 @@ const attributes = computed(() => {
 	}
 
 	if (props.data || hasBlockProps.value) {
-		const data = props.data || {}; // to "freeze" props.data for getDataScriptValue
-		const getDataScriptValue = (path: string): any => {
-			return getDataForKey(data, path);
-		};
-		const getBlockDataScriptValue = (path: string): any => {
-			return getDataForKey(cumulativeBlockData.value || {}, path);
-		};
 		if (props.block.getDataKey("type") === "attribute") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
@@ -155,6 +165,7 @@ const attributes = computed(() => {
 					props.block.getDataKey("key") as string,
 					props.block,
 					getDataScriptValue,
+					getBlockDataScriptValue,
 					props.defaultProps,
 				);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
@@ -173,7 +184,13 @@ const attributes = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+					value = getPropValue(
+						dataKeyObj.key as string,
+						props.block,
+						getDataScriptValue,
+						getBlockDataScriptValue,
+						props.defaultProps,
+					);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
@@ -203,12 +220,6 @@ const target = computed(() => {
 const styles = computed(() => {
 	let dynamicStyles = {} as { [key: string]: string };
 	if (props.data || hasBlockProps.value) {
-		const getDataScriptValue = (path: string): any => {
-			return getDataForKey(props.data || {}, path);
-		};
-		const getBlockDataScriptValue = (path: string): any => {
-			return getDataForKey(cumulativeBlockData.value || {}, path);
-		};
 		if (props.block.getDataKey("type") === "style") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
@@ -216,6 +227,7 @@ const styles = computed(() => {
 					props.block.getDataKey("key") as string,
 					props.block,
 					getDataScriptValue,
+					getBlockDataScriptValue,
 					props.defaultProps,
 				);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
@@ -235,7 +247,13 @@ const styles = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+					value = getPropValue(
+						dataKeyObj.key as string,
+						props.block,
+						getDataScriptValue,
+						getBlockDataScriptValue,
+						props.defaultProps,
+					);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
@@ -324,9 +342,13 @@ const allResolvedProps = computed(() => {
 			Object.entries(props.block.getBlockProps()).map(([key, prop]) => {
 				return [
 					key,
-					getPropValue(key, props.block, (path: string) => {
-						return getDataForKey(props.data || {}, path);
-					}, props.defaultProps),
+					getPropValue(
+						key,
+						props.block,
+						getDataScriptValue,
+						(path: string) => ({ ...props.blockData }[path]), // block props can not refer to own block data items
+						props.defaultProps,
+					),
 				];
 			}),
 		),
@@ -350,23 +372,20 @@ watch(
 	{ deep: true },
 );
 
-const cumulativeBlockData = ref<Record<string, any>>({});
+watch(
+	() => props.blockData,
+	() => {
+		blockDataStore.setBlockData(props.block.blockId, props.blockData || {}, "passedDown");
+	},
+);
 
 watch(
-	[
-		component,
-		allResolvedProps,
-		() => props.block.getBlockDataScript(),
-		() => props.blockData,
-		() => pageStore.settingPage,
-	],
+	[component, allResolvedProps, () => props.block.getBlockDataScript(), () => pageStore.settingPage],
 	() => {
 		if (pageStore.settingPage) return;
 		if (props.block.getBlockDataScript().trim() === "") {
-			// If no data script, just use parent's cumulative data
-			cumulativeBlockData.value = props.blockData || {};
-			props.block.setBlockData(props.blockData || {}, "passedDown");
-			props.block.setBlockData({}, "own");
+			ownBlockData.value = {};
+			blockDataStore.setBlockData(props.block.blockId, {}, "own");
 			return;
 		}
 		fetchBlockData
@@ -376,9 +395,8 @@ watch(
 				props: JSON.stringify(allResolvedProps.value),
 			})
 			.then((res: any) => {
-				props.block.setBlockData(props.blockData || {}, "passedDown");
-				props.block.setBlockData(res, "own");
-				cumulativeBlockData.value = { ...(props.blockData || {}), ...res };
+				ownBlockData.value = res || {};
+				blockDataStore.setBlockData(props.block.blockId, res || {}, "own");
 			})
 			.catch((e: { exc: string | null }) => {
 				const error_message = e.exc?.split("\n").slice(-2)[0];
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 7a54d4c86..7319ab965 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -61,6 +61,7 @@
 
 <script setup lang="ts">
 import Block from "@/block";
+import useBlockDataStore from "@/stores/blockDataStore";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
@@ -75,6 +76,7 @@ import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
+const blockDataStore = useBlockDataStore();
 
 type DynamicValueItem = {
 	key: string;
@@ -112,7 +114,11 @@ const blockDataArray = computed(() => {
 		filter = "own";
 	}
 	if (currentBlock) {
-		return getDataArray(currentBlock, currentBlock.getBlockData(filter) || {}, "blockDataScript");
+		return getDataArray(
+			currentBlock,
+			blockDataStore.getBlockData(currentBlock.blockId, filter) || {},
+			"blockDataScript",
+		);
 	}
 	return [];
 });
@@ -214,6 +220,7 @@ const filteredItems = computed(() => {
 					item.key,
 					props.block || blockController.getFirstSelectedBlock(),
 					getDataScriptValue,
+					getBlockDataScriptValue,
 					defaultProps.value,
 				),
 			)
@@ -246,6 +253,7 @@ const getValue = (item: DynamicValueItem): any => {
 			item.key,
 			props.block || blockController.getFirstSelectedBlock(),
 			getDataScriptValue,
+			getBlockDataScriptValue,
 			defaultProps.value,
 		);
 	} else if (item.comesFrom == "blockDataScript") {
@@ -271,8 +279,8 @@ const getDataScriptValue = (path: string): any => {
 
 const getBlockDataScriptValue = (path: string): any => {
 	let collectionObject = props.block
-		? props.block.getBlockData() || {}
-		: blockController.getFirstSelectedBlock()?.getBlockData() || {};
+		? blockDataStore.getBlockData(props.block.blockId) || {}
+		: blockDataStore.getBlockData(blockController.getFirstSelectedBlock()?.blockId || "") || {};
 
 	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
 };
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 871b49d12..74fa378e4 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -26,8 +26,10 @@ import { getDataForKey, getStandardPropValue } from "@/utils/helpers";
 import { Ref, computed, ref } from "vue";
 import BuilderBlock from "./BuilderBlock.vue";
 import blockController from "@/utils/blockController";
+import useBlockDataStore from "@/stores/blockDataStore";
 
 const pageStore = usePageStore();
+const blockDataStore = useBlockDataStore();
 
 const props = withDefaults(
 	defineProps<{
@@ -54,7 +56,7 @@ const repeatingFrom = computed(() => {
 
 const blockRepeaterData = computed(() => {
 	const pageData = props.data || pageStore.pageData;
-	const blockData = props.block.getBlockData() || {};
+	const blockData = blockDataStore.getBlockData(props.block.blockId) || {};
 	const key = props.block.getDataKey("key");
 	if (pageData && repeatingFrom.value === "dataScript" && key) {
 		const data = getDataForKey(pageData, key);
@@ -78,7 +80,8 @@ const blockRepeaterData = computed(() => {
 					item: {
 						value: item,
 						isStandard: false,
-						type: "static",
+						isDynamic: true,
+						comesFrom: "props",
 					},
 				}),
 			);
@@ -90,12 +93,14 @@ const blockRepeaterData = computed(() => {
 						key: {
 							value: key,
 							isStandard: false,
-							type: "static",
+							isDynamic: true,
+							comesFrom: "props",
 						},
 						value: {
 							value: typeof value !== "string" ? JSON.stringify(value) : value,
 							isStandard: false,
-							type: "static",
+							isDynamic: true,
+							comesFrom: "props",
 						},
 					});
 				});
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index e08a340ba..60fee3e5d 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -154,9 +154,12 @@ import blockController from "@/utils/blockController";
 import TabButtons from "./Controls/TabButtons.vue";
 import Switch from "./Controls/Switch.vue";
 import PropsEditor from "./PropsEditor.vue";
+import useBlockDataStore from "@/stores/blockDataStore";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
+const blockDataStore = useBlockDataStore();
+
 const showDialog = ref(false);
 const mode = ref<"page" | "block">("block");
 const showCumulativeBlockData = ref(false);
@@ -188,9 +191,12 @@ const blockDataScript = computed(() => {
 });
 
 const blockData = computed(() => {
-	return (
-		blockController.getFirstSelectedBlock()?.getBlockData(showCumulativeBlockData.value ? "all" : "own") || {}
-	);
+	return isBlockSelected.value
+		? blockDataStore.getBlockData(
+				blockController.getFirstSelectedBlock().blockId,
+				showCumulativeBlockData.value ? "all" : "own",
+		  ) || {}
+		: {};
 });
 
 const savePageDataScript = (value: string) => {
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index cc1183174..d499079d8 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -141,6 +141,7 @@ import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import usePageStore from "@/stores/pageStore";
 import { getCollectionKeys, getDataArray, getStandardPropValue } from "@/utils/helpers";
+import useBlockDataStore from "@/stores/blockDataStore";
 
 const props = withDefaults(
 	defineProps<{
@@ -155,6 +156,7 @@ const props = withDefaults(
 );
 
 const canvasStore = useCanvasStore();
+const blockDataStore = useBlockDataStore();
 
 const isStandard = ref(props.propDetails?.isStandard ? "true" : "false");
 const isStandardBool = computed(() => isStandard.value === "true");
@@ -278,7 +280,11 @@ const pageDataArray = computed(() => {
 const blockDataArray = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
 	if (currentBlock) {
-		return getDataArray(currentBlock, currentBlock.getBlockData("passedDown"), "blockDataScript");
+		return getDataArray(
+			currentBlock,
+			blockDataStore.getBlockData(currentBlock.blockId, "passedDown") || {},
+			"blockDataScript",
+		);
 	}
 	return [];
 });
@@ -341,7 +347,7 @@ const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
 const getOptions = async (query: string) => {
 	let options: { label: string; value: string }[] = [];
 	getParentProps(blockController.getFirstSelectedBlock()!, []).map((prop) => {
-		if (prop.toLowerCase().includes(query.toLowerCase())) {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
 				value: `${prop}--props`,
@@ -349,7 +355,7 @@ const getOptions = async (query: string) => {
 		}
 	});
 	Object.keys(defaultProps.value || {}).map((prop) => {
-		if (prop.toLowerCase().includes(query.toLowerCase())) {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
 				value: `${prop}--props`,
@@ -357,7 +363,7 @@ const getOptions = async (query: string) => {
 		}
 	});
 	pageDataArray.value.map((prop) => {
-		if (prop.toLowerCase().includes(query.toLowerCase())) {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
 				value: `${prop}--dataScript`,
@@ -365,14 +371,14 @@ const getOptions = async (query: string) => {
 		}
 	});
 	blockDataArray.value.map((prop) => {
-		if (prop.toLowerCase().includes(query.toLowerCase())) {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
 				value: `${prop}--blockDataScript`,
 			});
 		}
 	});
-
+	console.log("Options: ", options, blockDataArray.value);
 	return options;
 };
 
@@ -397,6 +403,7 @@ const handleIsStandardChange = async (newVal: string) => {
 };
 
 const handleTypeChange = async (newVal: string) => {
+	console.log("Changing to: ", newVal);
 	setPropType(newVal);
 	await nextTick();
 	reset({
@@ -485,6 +492,7 @@ watch(
 watch(
 	selectedPropType,
 	() => {
+		console.log("Changed value detected!");
 		autoCompleteRef.value?.refreshOptions();
 	},
 	{ immediate: true },
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index c00ea855b..1d5cd5112 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -115,14 +115,16 @@ const textContent = computed(() => {
 	return String(innerHTML ?? "");
 });
 
+const getDataScriptValue = (path: string): any => {
+	return getDataForKey(props.data, path);
+};
+const getBlockDataScriptValue = (path: string): any => {
+	return getDataForKey(props.blockData || {}, path);
+};
+
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
-	const getDataScriptValue = (path: string): any => {
-		return getDataForKey(props.data, path);
-	};
-	const getBlockDataScriptValue = (path: string): any => {
-		return getDataForKey(props.blockData || {}, path);
-	};
+
 	if (props.block.getDataKey("property") === "innerHTML") {
 		let value;
 		if (props.block.getDataKey("comesFrom") === "props") {
@@ -131,6 +133,7 @@ const getDynamicContent = () => {
 				props.block.getDataKey("key"),
 				props.block,
 				getDataScriptValue,
+				getBlockDataScriptValue,
 				props.defaultProps,
 			);
 		} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
@@ -147,7 +150,13 @@ const getDynamicContent = () => {
 		?.forEach((dataKeyObj: BlockDataKey) => {
 			let value;
 			if (dataKeyObj.comesFrom === "props") {
-				value = getPropValue(dataKeyObj.key as string, props.block, getDataScriptValue, props.defaultProps);
+				value = getPropValue(
+					dataKeyObj.key as string,
+					props.block,
+					getDataScriptValue,
+					getBlockDataScriptValue,
+					props.defaultProps,
+				);
 			} else if (dataKeyObj.comesFrom === "blockDataScript") {
 				value = getBlockDataScriptValue(dataKeyObj.key as string);
 			} else {
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 83190d14d..5dbfe0ac4 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -333,12 +333,6 @@ const blockController = {
 	setBlockDataScript: (script: string) => {
 		blockController.getFirstSelectedBlock()?.setBlockDataScript(script);
 	},
-	getBlockData: (filter: "passedDown" | "own" | "all" = "all") => {
-		return blockController.getFirstSelectedBlock()?.getBlockData(filter);
-	},
-	setBlockData: (data: Record<string, any>, filter: "passedDown" | "own" = "own") => {
-		blockController.getFirstSelectedBlock()?.setBlockData(data, filter);
-	},
 	getBlockProps: () => {
 		return blockController.getFirstSelectedBlock()?.getBlockProps();
 	},
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 09f26f7f5..41131c2c6 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -378,8 +378,6 @@ function getCopyWithoutParent(block: BlockOptions | Block): BlockOptions {
 	blockCopy.children = blockCopy.children?.map((child) => getCopyWithoutParent(child));
 	delete blockCopy.parentBlock;
 	delete blockCopy.referenceComponent;
-	delete blockCopy.ownBlockData;
-	delete blockCopy.passedDownBlockData;
 	return blockCopy;
 }
 
@@ -1045,6 +1043,7 @@ const getValueForInheritedProp = (
 	propName: string,
 	block: Block,
 	getDataScriptValue: (path: string) => any,
+	getBlockScriptValue: (path: string) => any,
 ): any => {
 	let parent = block.getParentBlock();
 	while (parent) {
@@ -1055,9 +1054,9 @@ const getValueForInheritedProp = (
 				if (matchingProp.comesFrom === "dataScript" && matchingProp.value) {
 					return getDataScriptValue(matchingProp.value);
 				} else if (matchingProp.comesFrom === "blockDataScript" && matchingProp.value) {
-					return block.getBlockData("passedDown")[matchingProp.value];
+					return getBlockScriptValue(matchingProp.value);
 				} else {
-					return getValueForInheritedProp(propName, parent, getDataScriptValue);
+					return getValueForInheritedProp(propName, parent, getDataScriptValue, getBlockScriptValue);
 				}
 			} else {
 				if (matchingProp.isStandard && matchingProp.standardOptions) {
@@ -1084,6 +1083,7 @@ const getPropValue = (
 	propName: string,
 	block: Block,
 	getDataScriptValue: (path: string) => any,
+	getBlockScriptValue: (path: string) => any,
 	defaultProps?: Record<string, any> | null,
 ): any => {
 	if (defaultProps && defaultProps[propName] !== undefined) {
@@ -1096,13 +1096,13 @@ const getPropValue = (
 			if (prop.comesFrom === "dataScript" && prop.value) {
 				return getDataScriptValue(prop.value);
 			} else if (prop.comesFrom === "blockDataScript" && prop.value) {
-				return block.getBlockData("passedDown")[prop.value];
+				return getBlockScriptValue(prop.value);
 			} else {
 				if (prop.value && defaultProps && defaultProps[prop.value] !== undefined) {
 					return defaultProps[prop.value].value;
 				}
 				if (prop.value) {
-					return getValueForInheritedProp(prop.value, block, getDataScriptValue);
+					return getValueForInheritedProp(prop.value, block, getDataScriptValue, getBlockScriptValue);
 				}
 			}
 		} else {

From 6d056adccd3be15aef8efe423e7a59a569a9dbe1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 00:25:36 +0530
Subject: [PATCH 198/547] fix: handling update event seprately

select was not working, so a probable soln.
---
 frontend/src/components/Controls/Input.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 45f5a0766..843c0a47f 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -2,7 +2,8 @@
 	<div class="relative w-full">
 		<FormControl
 			:type="type"
-			@change="triggerUpdate"
+			@change="triggerChange"
+			@update:modelValue="triggerUpdate"
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
 			autocomplete="off"
 			:autofocus="autofocus"
@@ -60,11 +61,15 @@ const clearValue = () => {
 	data.value = "";
 };
 
-const triggerUpdate = useDebounceFn(($event: Event) => {
+const triggerChange = useDebounceFn(($event: Event) => {
 	if (props.type === "checkbox") {
 		emit("update:modelValue", ($event.target as HTMLInputElement).checked);
 	} else {
 		emit("update:modelValue", ($event.target as HTMLInputElement).value);
 	}
 }, 100);
+
+const triggerUpdate = useDebounceFn(($event: string | number | boolean | null) => {
+	emit("update:modelValue", $event);
+}, 100);
 </script>

From c470f09c108f2073d36abca5b6ec9679be0a4608 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 00:26:49 +0530
Subject: [PATCH 199/547] fix: misc. changes

---
 frontend/components.d.ts | 1 +
 frontend/vite.config.mjs | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 44aeac2c4..8b479fc40 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -66,6 +66,7 @@ declare module 'vue' {
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     Folder: typeof import('./src/components/Icons/Folder.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
+    GenericControl: typeof import('./src/components/Controls/GenericControl.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
     GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index 3594d6abd..00980774d 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -35,6 +35,6 @@ export default defineConfig({
 		allowedHosts: true,
 	},
 	optimizeDeps: {
-		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client", "highlight.js/lib/core"],
+		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client", "interactjs", "highlight.js/lib/core"],
 	},
 });

From 50e3f59446e33753f0832366833329abc1e313a1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 00:34:04 +0530
Subject: [PATCH 200/547] fix: add blockDataStore

---
 frontend/src/stores/blockDataStore.ts | 38 +++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/src/stores/blockDataStore.ts

diff --git a/frontend/src/stores/blockDataStore.ts b/frontend/src/stores/blockDataStore.ts
new file mode 100644
index 000000000..7f33f495a
--- /dev/null
+++ b/frontend/src/stores/blockDataStore.ts
@@ -0,0 +1,38 @@
+import { defineStore } from "pinia";
+
+type BlockData = Record<string, any>;
+
+const useBlockDataStore = defineStore("blockDataStore", {
+	state: () => ({
+		blockDataMapping: <Record<string, { ownData: BlockData; passedDownData: BlockData }>>{},
+	}),
+	actions: {
+		setBlockData(blockId: string, blockData: BlockData, type: "own" | "passedDown" = "own") {
+			if(!this.blockDataMapping[blockId]) {
+                this.blockDataMapping[blockId] = { ownData: {}, passedDownData: {} };
+            }
+			if (type === "own") {
+				this.blockDataMapping[blockId].ownData = blockData;
+			} else {
+				this.blockDataMapping[blockId].passedDownData = blockData;
+			}
+		},
+		getBlockData(blockId: string, filter: "all" | "own" | "passedDown" = "all"): BlockData | null {
+			const blockData = this.blockDataMapping[blockId];
+			if (!blockData) {
+				return null;
+			}
+			if (filter === "own") {
+				return blockData.ownData;
+			} else if (filter === "passedDown") {
+				return blockData.passedDownData;
+			}
+			return { ...blockData.ownData, ...blockData.passedDownData };
+		},
+		clearBlockData(blockId: string) {
+			delete this.blockDataMapping[blockId];
+		},
+	},
+});
+
+export default useBlockDataStore;

From bfe2735d9d38d6a6b80ad5a217996684a566c302 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 10:50:53 +0530
Subject: [PATCH 201/547] fix: updated Popover placement to new options

---
 frontend/src/components/PropsEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index d3430490f..6d7071609 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -6,7 +6,7 @@
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded bg-surface-gray-1 p-2 text-ink-gray-6"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!ml-[25px] !min-w-fit" placement="right">
+					<Popover popoverClass="!ml-[25px] !min-w-fit" placement="right-start">
 						<template #target="{ open }">
 							<div
 								class="flex w-full cursor-pointer items-center justify-between"
@@ -86,7 +86,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!ml-[17px] !min-w-fit" placement="right">
+		<Popover ref="popOverRef" popoverClass="!ml-[17px] !min-w-fit" placement="right-start">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"

From 6b675a68e8522ed2a2b09c2ab625d7920789ed39 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 11:00:39 +0530
Subject: [PATCH 202/547] fix: properly capturing select input changes

select input does not trigger change event anymore, so capturing via update:modelValue
---
 frontend/src/components/Controls/Input.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 960ee3023..57fbd146a 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -2,9 +2,10 @@
 	<div class="relative w-full">
 		<FormControl
 			:type="type"
-			@change="triggerUpdate"
-			@paste="triggerUpdate"
-			@cut="triggerUpdate"
+			@change="triggerChange"
+			@paste="triggerChange"
+			@cut="triggerChange"
+			@update:modelValue="triggerUpdate"
 			@focus="handleFocus"
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
 			autocomplete="off"
@@ -64,7 +65,7 @@ const clearValue = () => {
 	data.value = "";
 };
 
-const triggerUpdate = useDebounceFn(($event: Event) => {
+const triggerChange = useDebounceFn(($event: Event) => {
 	if (props.type === "checkbox") {
 		emit("update:modelValue", ($event.target as HTMLInputElement).checked);
 	} else {
@@ -72,6 +73,10 @@ const triggerUpdate = useDebounceFn(($event: Event) => {
 	}
 }, 100);
 
+const triggerUpdate = useDebounceFn(($event: any) => {
+	emit("update:modelValue", $event);
+}, 100);
+
 const handleFocus = ($event: Event) => {
 	if (props.selectOnFocus && !props.disabled && props.type !== "checkbox") {
 		const target = $event.target as HTMLInputElement;

From 1dcfbd1e52afeee3df2868f71901a323c84ef080 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 12:07:07 +0530
Subject: [PATCH 203/547] chore: Update frappe-ui

---
 frontend/package.json | 2 +-
 yarn.lock             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 58a5723dd..c4cf7f6c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.242",
+    "frappe-ui": "0.1.243",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/yarn.lock b/yarn.lock
index 224d7300e..38c0eb3b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4562,7 +4562,7 @@ linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
-lint-staged@>=10:
+lint-staged@>=10, lint-staged@^15.2.10:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
   integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==

From 13719a8f89bb9f6747b61280d33c8208e57300e5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 12:51:53 +0530
Subject: [PATCH 204/547] fix: misc fixes

repeating default props are properly handled in backend
passed down block props are registered immediately
---
 builder/builder/doctype/builder_page/builder_page.py | 5 +++--
 frontend/src/components/BuilderBlock.vue             | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 21f3e7d6f..2a96751f4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -544,7 +544,8 @@ def get_tag(block, soup, data_key=None, default_props=None):
 			# when inside props repeater, child blocks get the loop vars as their default props
 			if default_props:
 				for prop in default_props:
-					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": True}
+					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": False}
+					map_of_prop_values.setdefault(prop, []).append(f"{{{{ {prop} }}}}")
 
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
@@ -952,7 +953,7 @@ def set_dynamic_content_placeholder(block, data_key=None):
 				)
 			elif _type == "key" and not block.get("isRepeaterBlock"):
 				block[_property] = (
-					f"{{{{ {key} if {key} or {key} in ['', 0] else block['{original_key}'] if block['{original_key}'] is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
+					f"{{{{ {key} if {key} or {key} in ['', 0] else block['{original_key}'] if block['{original_key}'] is defined else props['{original_key}'] if props['{original_key}'] is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
 				)
 
 
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index ff3d344cf..d97e48e2d 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -377,6 +377,7 @@ watch(
 	() => {
 		blockDataStore.setBlockData(props.block.blockId, props.blockData || {}, "passedDown");
 	},
+	{ immediate: true, deep: true },
 );
 
 watch(

From c2281f70bebb91daea1592f3fce3ce16155f40ed Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 14:48:44 +0530
Subject: [PATCH 205/547] Revert "fix: properly capturing select input changes"

This reverts commit 6b675a68e8522ed2a2b09c2ab625d7920789ed39.
---
 frontend/src/components/Controls/Input.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 57fbd146a..960ee3023 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -2,10 +2,9 @@
 	<div class="relative w-full">
 		<FormControl
 			:type="type"
-			@change="triggerChange"
-			@paste="triggerChange"
-			@cut="triggerChange"
-			@update:modelValue="triggerUpdate"
+			@change="triggerUpdate"
+			@paste="triggerUpdate"
+			@cut="triggerUpdate"
 			@focus="handleFocus"
 			@input="($event: Event) => emit('input', ($event.target as HTMLInputElement).value)"
 			autocomplete="off"
@@ -65,7 +64,7 @@ const clearValue = () => {
 	data.value = "";
 };
 
-const triggerChange = useDebounceFn(($event: Event) => {
+const triggerUpdate = useDebounceFn(($event: Event) => {
 	if (props.type === "checkbox") {
 		emit("update:modelValue", ($event.target as HTMLInputElement).checked);
 	} else {
@@ -73,10 +72,6 @@ const triggerChange = useDebounceFn(($event: Event) => {
 	}
 }, 100);
 
-const triggerUpdate = useDebounceFn(($event: any) => {
-	emit("update:modelValue", $event);
-}, 100);
-
 const handleFocus = ($event: Event) => {
 	if (props.selectOnFocus && !props.disabled && props.type !== "checkbox") {
 		const target = $event.target as HTMLInputElement;

From 41c5b37a56741dc58f3095c96530d061b98d2484 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 14:51:43 +0530
Subject: [PATCH 206/547] fix: Pass unitOptions to size so that it auto adds
 unit

---
 .../src/components/BlockPropertySections/TypographySection.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 5ee8cb8ca..d3f43b04d 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -107,6 +107,7 @@ const typographySectionProperties = [
 				styleProperty: "fontSize",
 				enableSlider: true,
 				minValue: 1,
+				unitOptions: ["px", "em", "rem"],
 			};
 		},
 		searchKeyWords: "Font, Size, FontSize",

From e89ead2471ee04d23dcabb27c2864a9cef0ae6e7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 15:02:02 +0530
Subject: [PATCH 207/547] fix: Ensure modelValue is emitted correctly on update

---
 frontend/src/components/Controls/Input.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 960ee3023..0ee9a8090 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -2,6 +2,7 @@
 	<div class="relative w-full">
 		<FormControl
 			:type="type"
+			@update:modelValue="($event: string | number | boolean) => emit('update:modelValue', $event)"
 			@change="triggerUpdate"
 			@paste="triggerUpdate"
 			@cut="triggerUpdate"

From 934c5b606cfaa4b76a29e98d8a2b2a8f97b92e9e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 15:18:20 +0530
Subject: [PATCH 208/547] feat: Add Select component for type 'select' in Input
 control

---
 frontend/src/components/Controls/Input.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 0ee9a8090..a183e7f62 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -1,8 +1,14 @@
 <template>
 	<div class="relative w-full">
+		<Select
+			v-if="type === 'select'"
+			:modelValue="data as string"
+			@update:modelValue="(value) => (data = value as typeof data)"
+			:disabled="disabled"
+			v-bind="attrs" />
 		<FormControl
+			v-else
 			:type="type"
-			@update:modelValue="($event: string | number | boolean) => emit('update:modelValue', $event)"
 			@change="triggerUpdate"
 			@paste="triggerUpdate"
 			@cut="triggerUpdate"
@@ -35,6 +41,7 @@
 <script lang="ts" setup>
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { useDebounceFn, useVModel } from "@vueuse/core";
+import { Select } from "frappe-ui";
 import { useAttrs } from "vue";
 
 const props = withDefaults(

From ef3068eda5ec8c803aac81a9704f9b6f2e5e3350 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 15:55:19 +0530
Subject: [PATCH 209/547] feat: Add 'Order' property control

---
 frontend/src/components/BlockFlexLayoutHandler.vue        | 8 ++++++++
 .../src/components/BlockPropertySections/LayoutSection.ts | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 42f64273e..2e8f41937 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -42,6 +42,14 @@
 		]"
 		defaultValue="nowrap"></PropertyControl>
 	<div class="flex flex-col gap-3" v-if="blockController.getParentBlock()?.isFlex()">
+		<PropertyControl
+			label="Order"
+			styleProperty="order"
+			:enableSlider="true"
+			:min="-99"
+			:max="99"
+			:step="1"
+			:defaultValue="0" />
 		<PropertyControl
 			label="Grow"
 			styleProperty="flexGrow"
diff --git a/frontend/src/components/BlockPropertySections/LayoutSection.ts b/frontend/src/components/BlockPropertySections/LayoutSection.ts
index 0d8b7a419..e5a4d3f5c 100644
--- a/frontend/src/components/BlockPropertySections/LayoutSection.ts
+++ b/frontend/src/components/BlockPropertySections/LayoutSection.ts
@@ -56,7 +56,7 @@ const layoutSectionProperties = [
 		component: BlockFlexLayoutHandler,
 		getProps: () => {},
 		searchKeyWords:
-			"Layout, Flex, Flexbox, Flex Box, FlexBox, Justify, Space Between, Flex Grow, Flex Shrink, Flex Basis, Align Items, Align Content, Align Self, Flex Direction, Flex Wrap, Flex Flow, Flex Grow, Flex Shrink, Flex Basis, Gap",
+			"Layout, Flex, Flexbox, Flex Box, FlexBox, Justify, Space Between, Flex Grow, Flex Shrink, Flex Basis, Align Items, Align Content, Align Self, Flex Direction, Flex Wrap, Flex Flow, Flex Grow, Flex Shrink, Flex Basis, Gap, Order",
 	},
 ];
 

From cbe8b058095e9041d0b09e06053fee0d2cec1289 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 24 Dec 2025 20:23:27 +0530
Subject: [PATCH 210/547] ci: Update node version

---
 .github/workflows/on_release.yml   | 4 ++--
 .github/workflows/server-tests.yml | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/on_release.yml b/.github/workflows/on_release.yml
index 1650a21b3..bae683f0a 100644
--- a/.github/workflows/on_release.yml
+++ b/.github/workflows/on_release.yml
@@ -15,9 +15,9 @@ jobs:
           fetch-depth: 0
           persist-credentials: false
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
       - name: Setup dependencies
         run: |
           npm install @semantic-release/git @semantic-release/exec --no-save
diff --git a/.github/workflows/server-tests.yml b/.github/workflows/server-tests.yml
index 38267e850..fb479eb69 100644
--- a/.github/workflows/server-tests.yml
+++ b/.github/workflows/server-tests.yml
@@ -46,9 +46,9 @@ jobs:
           python-version: '3.14'
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
 
       - name: Cache pip

From e28b2fc72f1544db1b8d3a39722a36d187c96dea Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 24 Dec 2025 20:32:58 +0530
Subject: [PATCH 211/547] feat: props now can be passed down explicitly

---
 .../doctype/builder_page/builder_page.py      |  49 ++++----
 frontend/src/builder.d.ts                     |   1 +
 .../Controls/DynamicValueHandler.vue          |  19 +---
 .../components/Controls/PropertyControl.vue   |   3 +-
 frontend/src/components/PropsEditor.vue       |  20 +++-
 .../src/components/PropsPopoverContent.vue    | 107 ++++++------------
 frontend/src/utils/helpers.ts                 |  25 +++-
 7 files changed, 96 insertions(+), 128 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 2a96751f4..c154eca8c 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -265,7 +265,7 @@ def get_context(self, context):
 		if context.preview and self.draft_blocks:
 			blocks = self.draft_blocks
 
-		content, style, fonts = get_block_html(blocks, page_data)
+		content, style, fonts = get_block_html(blocks)
 		self.set_custom_font(context, fonts)
 		context.fonts = fonts
 		context.__content = content
@@ -505,7 +505,7 @@ def get_block_data(block_id, block_data_script, props):
 	block_data.update(_locals["block"])
 	return block_data
 
-def get_block_html(blocks, page_data=None):
+def get_block_html(blocks):
 	blocks = frappe.parse_json(blocks)
 	if not isinstance(blocks, list):
 		blocks = [blocks]
@@ -514,12 +514,6 @@ def get_block_html(blocks, page_data=None):
 	font_map = {}
 
 	def get_html(blocks, soup):
-		# global map of prop values
-		# prop_name -> array<values>
-		# prop names act as variables and blocks provide scope, i.e., if a child block (inner scope) re-defines a prop with the same name as its parent (outer scope),
-		# for the child block and its children, the value from the child block will be used, and once the child block is processed, the value from the parent block will be restored.
-		# the array of values act as a stack to achieve this scoping behavior.
-		map_of_prop_values = {}
 
 		# same as above but for std. props info (not values), used to idenitfy the type of looping vars (array or object) in repeaters
 		map_of_std_props_info = {}
@@ -533,19 +527,18 @@ def get_tag(block, soup, data_key=None, default_props=None):
 			if block.get("props"):
 				for prop_name, prop_info in block.get("props").items():
 					is_standard = prop_info.get("isStandard", False)
-					interpreted_value = get_interpreted_prop_value(prop_info, data_key, map_of_prop_values)
+					is_passed_down = prop_info.get("isPassedDown", False)
+					interpreted_value = get_interpreted_prop_value(prop_info, data_key)
 
-					map_of_prop_values.setdefault(prop_name, []).append(interpreted_value)
 					if is_standard:
 						map_of_std_props_info.setdefault(prop_name, []).append(prop_info)
-
-					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard}
+					
+					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard, "is_passed_down": is_passed_down}
 
 			# when inside props repeater, child blocks get the loop vars as their default props
 			if default_props:
 				for prop in default_props:
-					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": False}
-					map_of_prop_values.setdefault(prop, []).append(f"{{{{ {prop} }}}}")
+					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": False, "is_passed_down": True}
 
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
@@ -655,10 +648,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
-				child_tag, child_tag_props, child_tag_std_props, child_tag_block_script = get_tag(
+				child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script = get_tag(
 					block.get("children")[0], soup, next_data_key, next_default_props
 				)
-				append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script)
+				append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script)
 
 				tag.append("{% endfor %}")
 			else:
@@ -670,10 +663,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
 
-					child_tag, child_tag_props, child_tag_std_props, child_tag_block_script = get_tag(
+					child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
 					)
-					append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script)
+					append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script)
 
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
@@ -682,27 +675,28 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
 			for prop_name, prop_info in props_obj.items():
-				map_of_prop_values[prop_name].pop()
 				if prop_info.get("is_standard"):
 					map_of_std_props_info[prop_name].pop()
 
 			all_props = {k: v["value"] for k, v in props_obj.items()}
 			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
+			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
 
 			if block.get("blockClientScript"):
 				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"  # extra hash as repeating blocks have same blockId
-				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {{{{ {to_jinja_literal(all_props) + '| tojson'} }}}});"
+				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {{{{ props | tojson }}}});"
 				tag.attrs["data-block-id"] = block_unique_id
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)
 
-			return tag, to_jinja_literal(all_props), to_jinja_literal(std_props) if std_props else None, block.get('blockDataScript', None)
+			return tag, to_jinja_literal(all_props), to_jinja_literal(passed_down_props), to_jinja_literal(std_props) if std_props else None, block.get('blockDataScript', None)
 
 		for block in blocks:
-			tag, props, std_props, block_script = get_tag(block, soup)
+			tag, props, passed_down_props, std_props, block_script = get_tag(block, soup)
 			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(block_script)}', {(props)}) %}}{tag!s}{{% endwith %}}"
 			html = f"{{% with props = {props} %}}{html}{{% endwith %}}"
+			html = f"{{% with passed_down_props = {passed_down_props} %}}{html}{{% endwith %}}"
 			if std_props:
 				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
 
@@ -854,17 +848,19 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag(tag, child_tag, child_tag_props, child_tag_std_props, child_tag_block_script):
+def append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script):
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 
-	tag.append(f"{{% with props = {child_tag_props} %}}")
+	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
+	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
 	if child_tag_block_script:
 		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', {(child_tag_props)}) %}}")
 	tag.append(child_tag)
 	if child_tag_block_script:
 		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
+	tag.append("{% endwith %}")
 
 	if child_tag_std_props:
 		tag.append("{% endwith %}")
@@ -1024,7 +1020,7 @@ def parse_static_value(value: str, prop_type: str):
 			return f"{value}"
 
 
-def get_interpreted_prop_value(prop, data_key, map_of_prop_values):
+def get_interpreted_prop_value(prop, data_key):
 	prop_is_dynamic = prop.get("isDynamic", False)
 	prop_comes_from = prop.get("comesFrom", "props")
 	prop_is_standard = prop.get("isStandard", False)
@@ -1053,9 +1049,6 @@ def get_interpreted_prop_value(prop, data_key, map_of_prop_values):
 				for k in keys[1:]:
 					key = f"{key}.get('{k}', {{}})"
 			return f"{{{{ {key} or block['{escape_single_quotes(prop_value)}'] or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
-		elif prop_comes_from == "props":
-			values = map_of_prop_values.get(prop_value, [])
-			return values[-1] if values else default_value if default_value is not None else "undefined"
 	else:
 		if prop_is_standard:
 			# standard props are static only as of now
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 3eef7b13f..a603b3fb6 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -18,6 +18,7 @@ declare type BlockProps = Record<
 	string,
 	{
 		isDynamic: boolean;
+		isPassedDown: boolean;
 		comesFrom: "props" | "dataScript" | "blockDataScript" | null;
 		value: string?;
 		isStandard?: boolean;
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 7319ab965..a48f00c2d 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -69,6 +69,7 @@ import {
 	getCollectionKeys,
 	getDataArray,
 	getDataForKey,
+	getParentProps,
 	getPropValue,
 	getStandardPropValue,
 } from "@/utils/helpers";
@@ -178,7 +179,7 @@ const filteredBlockProps = computed(() => {
 	} else {
 		const currentBlock = props.block || blockController.getFirstSelectedBlock();
 		if (currentBlock) {
-			parentProps = getParentProps(currentBlock, []);
+			parentProps = Object.keys(getParentProps(currentBlock, {}));
 		} else {
 			parentProps = [];
 		}
@@ -231,21 +232,7 @@ const filteredItems = computed(() => {
 
 const selectedItem = ref<DynamicValueItem | null>(props.selectedValue || null);
 
-const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
-	const parentBlock = baseBlock.getParentBlock();
-	if (parentBlock) {
-		const parentProps: string[] = Object.keys(parentBlock.getBlockProps()).map((key) => key);
-		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
-			if (!acc.find((p: string) => p === prop)) {
-				acc.push(prop);
-			}
-			return acc;
-		}, [] as string[]);
-		return getParentProps(parentBlock, combinedProps);
-	} else {
-		return baseProps;
-	}
-};
+
 
 const getValue = (item: DynamicValueItem): any => {
 	if (item.comesFrom == "props") {
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index b65589f92..f774139f7 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -54,8 +54,7 @@
 				<template #content>
 					<DynamicValueHandler
 						@setDynamicValue="setDynamicValue"
-						:selectedValue="dynamicValue"
-						:options="{ excludePassedDownProps: true}" />
+						:selectedValue="dynamicValue" />
 				</template>
 			</DraggablePopup>
 
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 6d7071609..ec5ffdfbc 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -190,8 +190,6 @@ const shouldDisplayStandardProps = computed(() => {
 	);
 });
 
-const propsEditor = ref<HTMLElement | null>(null);
-
 const emit = defineEmits({
 	"update:obj": (obj: BlockProps) => true,
 });
@@ -224,7 +222,13 @@ const updateObjectValue = (
 		value,
 		isDynamic,
 		comesFrom,
-	}: { value: string | null; isDynamic: boolean; comesFrom: BlockProps[string]["comesFrom"] },
+		isPassedDown,
+	}: {
+		value: string | null;
+		isDynamic: boolean;
+		comesFrom: BlockProps[string]["comesFrom"];
+		isPassedDown: boolean;
+	},
 ) => {
 	const path = value;
 	if (!path) {
@@ -234,8 +238,14 @@ const updateObjectValue = (
 	const oldPath = map.get(key)?.value;
 	const wasDynamic = map.get(key)?.isDynamic;
 	const cameFrom = map.get(key)?.comesFrom;
+	const wasPassedDown = map.get(key)?.isPassedDown;
 
-	if (path === oldPath && isDynamic === wasDynamic && comesFrom === cameFrom) {
+	if (
+		path === oldPath &&
+		isDynamic === wasDynamic &&
+		comesFrom === cameFrom &&
+		isPassedDown === wasPassedDown
+	) {
 		return map;
 	}
 
@@ -244,6 +254,7 @@ const updateObjectValue = (
 		value: !isDynamic && typeof path !== "string" ? JSON.stringify(path) : path,
 		isDynamic,
 		comesFrom,
+		isPassedDown,
 	});
 
 	return map;
@@ -291,6 +302,7 @@ const updateProp = async ({
 		value: newValue.value,
 		isDynamic: newValue.isDynamic,
 		comesFrom: newValue.comesFrom,
+		isPassedDown: newValue.isPassedDown || false,
 	});
 	map = updateIsStandard(map, newName, newValue.isStandard || false);
 	map = updateStandardOptions(map, newName, newValue.standardOptions || {});
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index d499079d8..468bcc977 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -72,6 +72,22 @@
 				:getOptions="getOptions"
 				@update:modelValue="handleValueSelection" />
 		</div>
+		<div v-if="!isStandardBool" class="flex items-center justify-between">
+			<InputLabel>Pass Down</InputLabel>
+			<OptionToggle
+				:options="[
+					{
+						label: 'Yes',
+						value: 'true',
+					},
+					{
+						label: 'No',
+						value: 'false',
+					},
+				]"
+				:model-value="isPassedDown"
+				@update:model-value="(val) => (isPassedDown = val)" />
+		</div>
 		<!-- Disabled for now-->
 		<div v-if="false && !isStandardBool && isInFragmentMode" class="flex items-center justify-between">
 			<InputLabel>Is Editable</InputLabel>
@@ -161,6 +177,7 @@ const blockDataStore = useBlockDataStore();
 const isStandard = ref(props.propDetails?.isStandard ? "true" : "false");
 const isStandardBool = computed(() => isStandard.value === "true");
 const isEditable = ref("false"); // TODO: required?
+const isPassedDown = ref(props.propDetails?.isPassedDown ? "true" : "false");
 const name = ref(props.propName ?? "");
 const value = ref(props.propDetails?.value ?? "");
 const comesFrom = ref<BlockProps[string]["comesFrom"]>(props.propDetails?.comesFrom ?? null);
@@ -289,79 +306,8 @@ const blockDataArray = computed(() => {
 	return [];
 });
 
-const defaultProps = computed(() => {
-	const currentBlock = blockController.getFirstSelectedBlock();
-	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
-	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
-	if (repeaterRoot) {
-		const key = repeaterRoot.getDataKey("key");
-		const comesFrom = repeaterRoot.getDataKey("comesFrom");
-		if (key && comesFrom === "props") {
-			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
-			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
-			if (!parsedValue) return {};
-			if (Array.isArray(parsedValue)) {
-				return {
-					item: {
-						value: parsedValue[0],
-						isStandard: false,
-						type: "static",
-					},
-				};
-			} else if (typeof parsedValue === "object") {
-				return {
-					key: {
-						value: Object.keys(parsedValue)[0],
-						isStandard: false,
-						type: "static",
-					},
-					value: {
-						value: parsedValue[Object.keys(parsedValue)[0]],
-						isStandard: false,
-						type: "static",
-					},
-				};
-			}
-		}
-	}
-	return {};
-});
-
-const getParentProps = (baseBlock: Block, baseProps: string[]): string[] => {
-	const parentBlock = baseBlock.getParentBlock();
-	if (parentBlock) {
-		// TODO: disallow array and obj props from parent blocks
-		const parentProps: string[] = Object.keys(parentBlock.getBlockProps()).map((key) => key);
-		const combinedProps = [...baseProps, ...parentProps].reduce((acc, prop) => {
-			if (!acc.find((p: string) => p === prop)) {
-				acc.push(prop);
-			}
-			return acc;
-		}, [] as string[]);
-		return getParentProps(parentBlock, combinedProps);
-	} else {
-		return baseProps;
-	}
-};
-
 const getOptions = async (query: string) => {
 	let options: { label: string; value: string }[] = [];
-	getParentProps(blockController.getFirstSelectedBlock()!, []).map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--props`,
-			});
-		}
-	});
-	Object.keys(defaultProps.value || {}).map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--props`,
-			});
-		}
-	});
 	pageDataArray.value.map((prop) => {
 		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
@@ -403,7 +349,6 @@ const handleIsStandardChange = async (newVal: string) => {
 };
 
 const handleTypeChange = async (newVal: string) => {
-	console.log("Changing to: ", newVal);
 	setPropType(newVal);
 	await nextTick();
 	reset({
@@ -492,7 +437,6 @@ watch(
 watch(
 	selectedPropType,
 	() => {
-		console.log("Changed value detected!");
 		autoCompleteRef.value?.refreshOptions();
 	},
 	{ immediate: true },
@@ -500,9 +444,24 @@ watch(
 
 const save = async () => {
 	await nextTick();
+	console.log("Saving prop:", {
+		name: name.value,
+		isStandard: isStandardBool.value,
+		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
+		isPassedDown: isPassedDown.value === "true",
+		comesFrom: comesFrom.value,
+		value: isStandardBool.value ? null : value.value,
+		standardOptions: isStandardBool.value
+			? {
+					...standardPropOptions,
+					dependencies: standardPropDependencyMap.value,
+			  }
+			: undefined,
+	});
 	const propValue: BlockProps[string] = {
 		isStandard: isStandardBool.value,
-		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic", // all standard props are static by default
+		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
+		isPassedDown: isPassedDown.value === "true",
 		comesFrom: comesFrom.value,
 		value: isStandardBool.value ? null : value.value,
 		standardOptions: isStandardBool.value
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 41131c2c6..b961a5b3d 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1079,6 +1079,24 @@ const getValueForInheritedProp = (
 	return undefined;
 };
 
+const getParentProps = (baseBlock: Block, baseProps: BlockProps): BlockProps => {
+	const parentBlock = baseBlock.getParentBlock();
+	if (parentBlock) {
+		const parentProps: BlockProps = {};
+		Object.entries(parentBlock.getBlockProps())
+			.filter(([_, propDetails]) => {
+				return propDetails.isPassedDown;
+			})
+			.map(([propName, propDetails]) => {
+				parentProps[propName] = propDetails;
+			});
+		const combinedProps = { ...baseProps, ...parentProps };
+		return getParentProps(parentBlock, combinedProps);
+	} else {
+		return baseProps;
+	}
+};
+
 const getPropValue = (
 	propName: string,
 	block: Block,
@@ -1101,9 +1119,6 @@ const getPropValue = (
 				if (prop.value && defaultProps && defaultProps[prop.value] !== undefined) {
 					return defaultProps[prop.value].value;
 				}
-				if (prop.value) {
-					return getValueForInheritedProp(prop.value, block, getDataScriptValue, getBlockScriptValue);
-				}
 			}
 		} else {
 			if (prop.isStandard && prop.standardOptions) {
@@ -1115,8 +1130,9 @@ const getPropValue = (
 			}
 			return prop.value;
 		}
+	} else {
+		return getParentProps(block, {})[propName]?.value;
 	}
-	return undefined;
 };
 
 const getStandardPropValue = (
@@ -1373,6 +1389,7 @@ export {
 	triggerCopyEvent,
 	uploadBuilderAsset,
 	uploadUserFont,
+	getParentProps,
 	getPropValue,
 	getStandardPropValue,
 	getDataArray,

From 483c8eca9be0606d22a28e8991bc48d4ba780c22 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 11:53:11 +0530
Subject: [PATCH 212/547] feat: completely revamped how canvas and jinja gets
 page and block data values

in canvas just like block data, now page data for each block is also mapped and stored in a pinia store, this helps in easily getting dynamic value suggestions and collectionOptions suggestions

in jinja as all block have their passed down blocks and props, we no more need to use data_keys to resolve nested structures
---
 .../doctype/builder_page/builder_page.py      | 95 +++++++++----------
 .../CollectionOptionsSection.ts               | 31 +-----
 frontend/src/components/BuilderBlock.vue      | 12 ++-
 .../Controls/DynamicValueHandler.vue          | 15 +--
 frontend/src/components/DataLoaderBlock.vue   |  3 +
 .../src/components/PropsPopoverContent.vue    | 13 ++-
 frontend/src/stores/blockDataStore.ts         | 10 ++
 7 files changed, 86 insertions(+), 93 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c154eca8c..41613d958 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -519,7 +519,7 @@ def get_html(blocks, soup):
 		map_of_std_props_info = {}
 		html = ""
 
-		def get_tag(block, soup, data_key=None, default_props=None):
+		def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=None):
 			block = extend_with_component(block)
 
 			props_obj = {}
@@ -619,6 +619,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				loop_var = ""
 				next_data_key = None
 				next_default_props = None
+				new_block_data = None
 
 				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, _key)
@@ -629,14 +630,12 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 					if len(loop_vars) > 1:  # object repeater
 						_key = f"{_key}.items()"
-				elif block.get("dataKey").get("comesFrom") == "blockDataScript":
-					if data_key:
-						_key = f"{extract_data_key(data_key)}.{escape_single_quotes(_key)}"
-						loop_var = f"key_{_key.replace('.', '__')}"
-					else:
-						loop_var = f"key_{_key}"
-						_key = f"block['{escape_single_quotes(_key)}']"
-					next_data_key = {"key": loop_var, "comesFrom": "blockDataScript"}
+
+				elif block.get("dataKey").get("comesFrom") == "blockDataScript":		
+					loop_var = f"block_key_{_key}"
+					_key = f"block['{escape_single_quotes(_key)}']"
+					new_block_data = loop_var
+					next_data_key = data_key
 				else:
 					if data_key:
 						_key = f"{extract_data_key(data_key)}.{_key}"
@@ -648,10 +647,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
-				child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script = get_tag(
-					block.get("children")[0], soup, next_data_key, next_default_props
+				child_tag, child_tag_details = get_tag(
+					block.get("children")[0], soup, next_data_key, next_default_props, new_block_data
 				)
-				append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script)
+				append_child_tag(tag, child_tag, child_tag_details)
 
 				tag.append("{% endfor %}")
 			else:
@@ -663,10 +662,10 @@ def get_tag(block, soup, data_key=None, default_props=None):
 							key = f"{extract_data_key(data_key)}.{key}"
 						tag.append(f"{{% if {key} %}}")
 
-					child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script = get_tag(
+					child_tag, child_tag_details = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
 					)
-					append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script)
+					append_child_tag(tag, child_tag, child_tag_details)
 
 					if child.get("visibilityCondition"):
 						tag.append("{% endif %}")
@@ -689,18 +688,30 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)
+			
+			tag_details = {
+				"all_props": to_jinja_literal(all_props),
+				"passed_down_props": to_jinja_literal(passed_down_props),
+				"std_props": to_jinja_literal(std_props) if std_props else None,
+				"block_data_script": block.get("blockDataScript", None),
+				"new_block_data": reset_block_data_to,
+			}
 
-			return tag, to_jinja_literal(all_props), to_jinja_literal(passed_down_props), to_jinja_literal(std_props) if std_props else None, block.get('blockDataScript', None)
+			return tag, tag_details
 
 		for block in blocks:
-			tag, props, passed_down_props, std_props, block_script = get_tag(block, soup)
-			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(block_script)}', {(props)}) %}}{tag!s}{{% endwith %}}"
-			html = f"{{% with props = {props} %}}{html}{{% endwith %}}"
-			html = f"{{% with passed_down_props = {passed_down_props} %}}{html}{{% endwith %}}"
-			if std_props:
-				html = f"{{% with std_props = {std_props} %}}{html}{{% endwith %}}"
+			tag, tag_details = get_tag(block, soup)
+
+			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(tag_details.get('block_data_script', ''))}', {(tag_details.get('all_props', '{}'))}) %}}{tag!s}{{% endwith %}}"
+			html = f"{{% with props = {tag_details.get('all_props', '{}')} %}}{html}{{% endwith %}}"
+			html = f"{{% with passed_down_props = {tag_details.get('passed_down_props', '{}')} %}}{html}{{% endwith %}}"
+			if tag_details.get('std_props'):
+				html = f"{{% with std_props = {tag_details.get('std_props')} %}}{html}{{% endwith %}}"
 
 		print("Final HTML: ", html)
+		# write to file
+		with open("output.html", "w") as f:
+			f.write(html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)
@@ -848,16 +859,24 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag(tag, child_tag, child_tag_props, child_passed_down_props, child_tag_std_props, child_tag_block_script):
+def append_child_tag(tag, child_tag, child_tag_details: dict):
+	child_tag_props = child_tag_details.get('all_props')
+	child_passed_down_props = child_tag_details.get('passed_down_props')
+	child_tag_std_props = child_tag_details.get('std_props')
+	child_tag_block_script = child_tag_details.get('block_data_script')
+	new_block_data = child_tag_details.get('new_block_data', None)
+
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
-	if child_tag_block_script:
-		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', {(child_tag_props)}) %}}")
+	if child_tag_block_script or new_block_data is not None:
+		block_value = new_block_data if new_block_data is not None else "block"
+		script_suffix = f"| execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props)" if child_tag_block_script else ""
+		tag.append(f"{{% with block = {block_value} {script_suffix} %}}")
 	tag.append(child_tag)
-	if child_tag_block_script:
+	if child_tag_block_script or new_block_data is not None:
 		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
@@ -909,19 +928,7 @@ def set_dynamic_content_placeholder(block, data_key=None):
 			if dynamic_value_doc.get("comesFrom") == "props":
 				key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
 			elif dynamic_value_doc.get("comesFrom") == "blockDataScript":
-				#TODO: do what the next else does?
-				if data_key:
-					key = f"{extract_data_key(data_key)}.{(dynamic_value_doc.get('key'))}"
-				else:
-					key = f"block.{original_key}"
-				# TODO: repeating code
-				if data_key:
-					# convert a.b to (a or {}).get('b', {})
-					# to avoid undefined error in jinja
-					keys = (key or "").split(".")
-					key = f"({keys[0]} or {{}})"
-					for k in keys[1:]:
-						key = f"{key}.get('{k}', {{}})"
+				key = f"block['{original_key}']"
 			else:
 				key = (
 					f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
@@ -1038,17 +1045,7 @@ def get_interpreted_prop_value(prop, data_key):
 				f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
 			)
 		elif prop_comes_from == "blockDataScript":
-			key = (
-					f"{extract_data_key(data_key)}.{prop_value}" if data_key else prop_value
-				)
-			if data_key:
-				# convert a.b to (a or {}).get('b', {})
-				# to avoid undefined error in jinja
-				keys = (key or "").split(".")
-				key = f"({keys[0]} or {{}})"
-				for k in keys[1:]:
-					key = f"{key}.get('{k}', {{}})"
-			return f"{{{{ {key} or block['{escape_single_quotes(prop_value)}'] or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
+			return f"{{{{ block['{escape_single_quotes(prop_value)}'] or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
 	else:
 		if prop_is_standard:
 			# standard props are static only as of now
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 4a7e1edeb..1f1e36448 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -1,24 +1,21 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import useBlockDataStore from "@/stores/blockDataStore";
 import useCanvasStore from "@/stores/canvasStore";
-import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import { getCollectionKeys, getDataForKey } from "@/utils/helpers";
 import { FeatherIcon } from "frappe-ui";
 import { computed, h } from "vue";
 
 const keyOptions = computed(() => {
-	const pageStore = usePageStore();
 	const blockDataStore = useBlockDataStore();
 	let result: { label: string; value: string; prefix: any }[] = [];
 
 	const repeatableDataKeys: string[] = [];
 	const repeatableBlockDataKeys: string[] = [];
 
-	let pageDataCollectionObject = pageStore.pageData;
+	let pageDataCollectionObject =
+		blockDataStore.getPageData(blockController.getFirstSelectedBlock()?.blockId || "") || {};
 	let blockDataCollectionObject =
 		blockDataStore.getBlockData(blockController.getFirstSelectedBlock()?.blockId || "") || {};
-	let collectionObject = {};
 
 	const isInsideRepeater = blockController.getFirstSelectedBlock()?.isInsideRepeater();
 	const repeaterDataKeyComesFrom: BlockDataKey["comesFrom"] | undefined = blockController
@@ -26,18 +23,6 @@ const keyOptions = computed(() => {
 		?.getRepeaterParent()
 		?.getDataKey("comesFrom") as BlockDataKey["comesFrom"] | undefined;
 
-	if (isInsideRepeater) {
-		const keys = getCollectionKeys(
-			blockController.getFirstSelectedBlock(),
-			repeaterDataKeyComesFrom || "dataScript",
-		);
-		collectionObject =
-			repeaterDataKeyComesFrom == "dataScript" ? pageDataCollectionObject : blockDataCollectionObject;
-		collectionObject = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
-	}
 
 	function processObject(obj: Record<string, any>, prefix = "", resultArray: string[] = []) {
 		if (!obj || typeof obj !== "object") {
@@ -55,16 +40,8 @@ const keyOptions = computed(() => {
 		});
 	}
 
-	if (isInsideRepeater) {
-		if (repeaterDataKeyComesFrom == "dataScript") {
-			processObject(collectionObject, "", repeatableDataKeys);
-		} else if (repeaterDataKeyComesFrom == "blockDataScript") {
-			processObject(collectionObject, "", repeatableBlockDataKeys);
-		}
-	} else {
-		processObject(pageDataCollectionObject, "", repeatableDataKeys);
-		processObject(blockDataCollectionObject, "", repeatableBlockDataKeys);
-	}
+	processObject(pageDataCollectionObject, "", repeatableDataKeys);
+	processObject(blockDataCollectionObject, "", repeatableBlockDataKeys);
 
 	const isPropsBasedRepeater = isInsideRepeater && repeaterDataKeyComesFrom == "props";
 	const repeatableProps: string[] = [];
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index d97e48e2d..3c082f59e 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -43,7 +43,7 @@ import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
 import { getDataForKey, getPropValue, saferExecuteBlockClientScript } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
-import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
+import { computed, inject, nextTick, onMounted, onUnmounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
@@ -373,8 +373,9 @@ watch(
 );
 
 watch(
-	() => props.blockData,
+	[component, () => props.blockData, () => props.data],
 	() => {
+		blockDataStore.setPageData(props.block.blockId, props.data || {});
 		blockDataStore.setBlockData(props.block.blockId, props.blockData || {}, "passedDown");
 	},
 	{ immediate: true, deep: true },
@@ -406,7 +407,7 @@ watch(
 				});
 			});
 	},
-	{ deep: true },
+	{ deep: true, immediate: true },
 );
 
 const isEditable = computed(() => {
@@ -450,5 +451,10 @@ if (!props.preview) {
 	);
 }
 
+onUnmounted(() => {
+	blockDataStore.clearBlockData(props.block.blockId);
+	blockDataStore.clearPageData(props.block.blockId);
+});
+
 // Note: All the block event listeners are delegated to parent for better scalability
 </script>
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index a48f00c2d..3edbea4cf 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -66,9 +66,7 @@ import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
 import {
-	getCollectionKeys,
 	getDataArray,
-	getDataForKey,
 	getParentProps,
 	getPropValue,
 	getStandardPropValue,
@@ -251,15 +249,10 @@ const getValue = (item: DynamicValueItem): any => {
 };
 
 const getDataScriptValue = (path: string): any => {
-	let collectionObject = pageStore.pageData;
-
-	if (blockController.getFirstSelectedBlock()?.isInsideRepeater()) {
-		const keys = getCollectionKeys(blockController.getFirstSelectedBlock());
-		collectionObject = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObject);
-	}
+	let collectionObject = props.block
+		? blockDataStore.getPageData(props.block.blockId) || {}
+		: blockDataStore.getPageData(blockController.getFirstSelectedBlock()?.blockId || "") || {};
+	collectionObject = collectionObject || pageStore.pageData || {};
 
 	return path.split(".").reduce((obj: Record<string, any>, key: string) => obj?.[key], collectionObject);
 };
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 74fa378e4..aaf591e90 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -82,6 +82,7 @@ const blockRepeaterData = computed(() => {
 						isStandard: false,
 						isDynamic: true,
 						comesFrom: "props",
+						isPassedDown: true,
 					},
 				}),
 			);
@@ -95,12 +96,14 @@ const blockRepeaterData = computed(() => {
 							isStandard: false,
 							isDynamic: true,
 							comesFrom: "props",
+							isPassedDown: true,
 						},
 						value: {
 							value: typeof value !== "string" ? JSON.stringify(value) : value,
 							isStandard: false,
 							isDynamic: true,
 							comesFrom: "props",
+							isPassedDown: true,
 						},
 					});
 				});
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 468bcc977..19aea9f71 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -155,8 +155,7 @@ import ObjectOptions from "@/components/PropsOptions/ObjectOptions.vue";
 import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
 import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
-import usePageStore from "@/stores/pageStore";
-import { getCollectionKeys, getDataArray, getStandardPropValue } from "@/utils/helpers";
+import { getDataArray } from "@/utils/helpers";
 import useBlockDataStore from "@/stores/blockDataStore";
 
 const props = withDefaults(
@@ -291,7 +290,15 @@ const setPropType = (type: string) => {
 };
 
 const pageDataArray = computed(() => {
-	return getDataArray(blockController.getFirstSelectedBlock(), usePageStore().pageData, "dataScript");
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (currentBlock) {
+		return getDataArray(
+			blockController.getFirstSelectedBlock(),
+			blockDataStore.getPageData(currentBlock.blockId) || {},
+			"dataScript",
+		);
+	}
+	return [];
 });
 
 const blockDataArray = computed(() => {
diff --git a/frontend/src/stores/blockDataStore.ts b/frontend/src/stores/blockDataStore.ts
index 7f33f495a..5cf6fe955 100644
--- a/frontend/src/stores/blockDataStore.ts
+++ b/frontend/src/stores/blockDataStore.ts
@@ -5,8 +5,18 @@ type BlockData = Record<string, any>;
 const useBlockDataStore = defineStore("blockDataStore", {
 	state: () => ({
 		blockDataMapping: <Record<string, { ownData: BlockData; passedDownData: BlockData }>>{},
+		pageDataMapping: <Record<string, any>>{},
 	}),
 	actions: {
+		setPageData(pageId: string, pageData: any) {
+			this.pageDataMapping[pageId] = pageData;
+		},
+		getPageData(pageId: string): any {
+			return this.pageDataMapping[pageId];
+		},
+		clearPageData(pageId: string) {
+			delete this.pageDataMapping[pageId];
+		},
 		setBlockData(blockId: string, blockData: BlockData, type: "own" | "passedDown" = "own") {
 			if(!this.blockDataMapping[blockId]) {
                 this.blockDataMapping[blockId] = { ownData: {}, passedDownData: {} };

From 64d0634b9278f168d9bb95859b39807e56d68845 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 18:59:50 +0530
Subject: [PATCH 213/547] feat: added block data and prop based
 visibilityCondition

---
 .../doctype/builder_page/builder_page.py      |  29 ++--
 frontend/components.d.ts                      |   2 +
 frontend/src/block.ts                         |  12 +-
 frontend/src/builder.d.ts                     |   5 +
 .../BlockPropertySections/OptionsSection.ts   |  14 +-
 frontend/src/components/BuilderBlock.vue      |  36 ++++-
 .../components/Controls/GenericControl.vue    |   4 +-
 frontend/src/components/VisibilityInput.vue   | 131 ++++++++++++++++++
 frontend/src/utils/blockController.ts         |  42 ++++--
 9 files changed, 239 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/VisibilityInput.vue

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 41613d958..265e2083b 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -655,20 +655,25 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
+					visibility_key = None
 					if child.get("visibilityCondition"):
-						key = child.get("visibilityCondition")
-						# TODO: enable props based visibility conditions
-						if data_key:
-							key = f"{extract_data_key(data_key)}.{key}"
-						tag.append(f"{{% if {key} %}}")
+						visibility_condition = child.get("visibilityCondition")
+						if type(visibility_condition) == str or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
+							if data_key:
+								visibility_key = f"{extract_data_key(data_key)}.{key}"
+							else:
+								visibility_key = visibility_condition.get("key")
+						else:
+							key = visibility_condition.get("key")
+							if visibility_condition.get("comesFrom") == "props":
+								visibility_key = f"props['{escape_single_quotes(key)}']"
+							else:
+								visibility_key = f"block['{escape_single_quotes(key)}']"
 
 					child_tag, child_tag_details = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
 					)
-					append_child_tag(tag, child_tag, child_tag_details)
-
-					if child.get("visibilityCondition"):
-						tag.append("{% endif %}")
+					append_child_tag(tag, child_tag, child_tag_details, visibility_key)
 
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
@@ -859,7 +864,7 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag(tag, child_tag, child_tag_details: dict):
+def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	child_tag_props = child_tag_details.get('all_props')
 	child_passed_down_props = child_tag_details.get('passed_down_props')
 	child_tag_std_props = child_tag_details.get('std_props')
@@ -875,7 +880,11 @@ def append_child_tag(tag, child_tag, child_tag_details: dict):
 		block_value = new_block_data if new_block_data is not None else "block"
 		script_suffix = f"| execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props)" if child_tag_block_script else ""
 		tag.append(f"{{% with block = {block_value} {script_suffix} %}}")
+	if visibility_key:
+		tag.append(f"{{% if {visibility_key} %}}")
 	tag.append(child_tag)
+	if visibility_key:
+		tag.append("{% endif %}")
 	if child_tag_block_script or new_block_data is not None:
 		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 8b479fc40..7e965fcf9 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -49,6 +49,7 @@ declare module 'vue' {
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
+    copy: typeof import('./src/components/DimensionInput copy.vue')['default']
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
     CSS: typeof import('./src/components/Icons/CSS.vue')['default']
     CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
@@ -135,5 +136,6 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
+    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
   }
 }
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 87d56fd92..536c89527 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -37,7 +37,7 @@ class Block implements BlockOptions {
 	isChildOfComponent?: string;
 	referenceBlockId?: string;
 	isRepeaterBlock?: boolean;
-	visibilityCondition?: string;
+	visibilityCondition?: BlockVisibilityCondition;
 	elementBeforeConversion?: string;
 	parentBlock: Block | null;
 	activeState?: string | null = null;
@@ -56,7 +56,6 @@ class Block implements BlockOptions {
 		this.isRepeaterBlock = options.isRepeaterBlock;
 		this.isChildOfComponent = options.isChildOfComponent;
 		this.referenceBlockId = options.referenceBlockId;
-		this.visibilityCondition = options.visibilityCondition;
 		this.parentBlock = options.parentBlock || null;
 		if (this.extendedFromComponent) {
 			componentStore.loadComponent(this.extendedFromComponent);
@@ -81,6 +80,15 @@ class Block implements BlockOptions {
 			this.innerHTML = options.innerText;
 		}
 
+		if (typeof options.visibilityCondition == "string") {
+			this.visibilityCondition = {
+				key: options.visibilityCondition,
+				comesFrom: "dataScript",
+			};
+		} else {
+			this.visibilityCondition = options.visibilityCondition;
+		}
+
 		this.originalElement = options.originalElement;
 
 		if (!options.blockId || options.blockId === "root") {
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index a603b3fb6..0bfc234d8 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -26,6 +26,11 @@ declare type BlockProps = Record<
 	}
 >;
 
+declare type BlockVisibilityCondition = {
+	key: string | undefined;
+	comesFrom: "props" | "dataScript" | "blockDataScript" | undefined;
+};
+
 declare interface BlockAttributeMap {
 	[key: string]: string | number | null | undefined;
 }
diff --git a/frontend/src/components/BlockPropertySections/OptionsSection.ts b/frontend/src/components/BlockPropertySections/OptionsSection.ts
index fe5720327..62adc467d 100644
--- a/frontend/src/components/BlockPropertySections/OptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/OptionsSection.ts
@@ -1,7 +1,6 @@
-import CodeEditor from "@/components/Controls/CodeEditor.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import VisibilityInput from "@/components/VisibilityInput.vue";
 
 const setClasses = (val: string) => {
 	const classes = val.split(",").map((c) => c.trim());
@@ -9,7 +8,6 @@ const setClasses = (val: string) => {
 };
 
 const optionsSectionProperties = [
-
 	{
 		component: InlineInput,
 		getProps: () => {
@@ -25,20 +23,20 @@ const optionsSectionProperties = [
 		condition: () => !blockController.multipleBlocksSelected(),
 	},
 	{
-		component: InlineInput,
+		component: VisibilityInput,
 		getProps: () => {
 			return {
 				label: "Condition",
-				modelValue: blockController.getKeyValue("visibilityCondition"),
+				getModelValue: () => (blockController.getKeyValue("visibilityCondition") as BlockVisibilityCondition).key,
+				setModelValue: (val: BlockVisibilityCondition) => {
+					blockController.setKeyValue("visibilityCondition", val);
+				},
 				description:
 					"Visibility condition to show/hide the block based on a condition. Pass a boolean variable created in your Data Script.<br><b>Note:</b> This is only evaluated in the preview mode.",
 			};
 		},
 		searchKeyWords:
 			"Condition, Visibility, VisibilityCondition, Visibility Condition, show, hide, display, hideIf, showIf",
-		events: {
-			"update:modelValue": (val: string) => blockController.setKeyValue("visibilityCondition", val),
-		},
 		condition: () => !blockController.isRoot(),
 	},
 ];
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3c082f59e..eea0ccca8 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -43,7 +43,18 @@ import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
 import { getDataForKey, getPropValue, saferExecuteBlockClientScript } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
-import { computed, inject, nextTick, onMounted, onUnmounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
+import {
+	computed,
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	reactive,
+	ref,
+	useAttrs,
+	watch,
+	watchEffect,
+} from "vue";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
@@ -419,9 +430,26 @@ const isEditable = computed(() => {
 });
 
 const hiddenDueToVisibilityCondition = computed(() => {
-	return props.block.getVisibilityCondition()
-		? !Boolean(getDataForKey(props.data || {}, props.block.getVisibilityCondition() as string))
-		: false;
+	const visibilityCondition = props.block.getVisibilityCondition();
+	const key = visibilityCondition?.key;
+	const comesFrom = visibilityCondition?.comesFrom || "dataScript";
+	if(!key) return false;
+	if (comesFrom == "blockDataScript") {
+		const value = getBlockDataScriptValue(key as string);
+		return !Boolean(value);
+	} else if (comesFrom == "dataScript") {
+		const value = getDataScriptValue(key as string);
+		return !Boolean(value);
+	} else {
+		const value = getPropValue(
+			key as string,
+			props.block,
+			getDataScriptValue,
+			getBlockDataScriptValue,
+			props.defaultProps,
+		);
+		return !Boolean(value);
+	}
 });
 
 if (!props.preview) {
diff --git a/frontend/src/components/Controls/GenericControl.vue b/frontend/src/components/Controls/GenericControl.vue
index 31e008fea..de681571c 100644
--- a/frontend/src/components/Controls/GenericControl.vue
+++ b/frontend/src/components/Controls/GenericControl.vue
@@ -22,7 +22,7 @@
 			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
 			<!-- Left label placement (original layout) -->
 			<div
-				class="flex w-[88px] shrink-0 items-center"
+				class="flex w-fit max-w-[88px] shrink-0 items-center"
 				v-if="labelPlacement === 'left' && (enableStateControls || label)">
 				<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="options">
 					<template v-slot="{ open }">
@@ -145,7 +145,7 @@ const props = withDefaults(
 	{
 		placeholder: "unset",
 		type: "text",
-		controlType: "style",
+		controlType: "key",
 		enableSlider: false,
 		unitOptions: () => [],
 		changeFactor: 1,
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
new file mode 100644
index 000000000..f5c2e6104
--- /dev/null
+++ b/frontend/src/components/VisibilityInput.vue
@@ -0,0 +1,131 @@
+<template>
+	<GenericControl
+		:component="Autocomplete"
+		:label="label"
+		:getOptions="getOptions"
+		:getModelValue="getModelValue"
+		@update:modelValue="handleModelValueUpdate" />
+</template>
+<script setup lang="ts">
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import GenericControl from "@/components/Controls/GenericControl.vue";
+import useBlockDataStore from "@/stores/blockDataStore";
+import blockController from "@/utils/blockController";
+import { getDataArray, getParentProps, getStandardPropValue } from "@/utils/helpers";
+
+const props = defineProps<{
+	property: styleProperty;
+	label: string;
+	getModelValue: () => string;
+	setModelValue: (value: BlockVisibilityCondition) => void;
+}>();
+
+const getOptions = async (query: string) => {
+	const blockDataStore = useBlockDataStore();
+
+	let options: { label: string; value: string }[] = [];
+
+	let pageDataArray: string[] = [];
+	let blockDataArray: string[] = [];
+	let ownProps: string[] = [];
+	let parentProps: string[] = [];
+	let defaultProps: string[] = [];
+
+	const currentBlock = blockController.getFirstSelectedBlock();
+
+	if (!currentBlock) {
+		return options;
+	}
+
+	if (currentBlock) {
+
+		pageDataArray = getDataArray(
+			currentBlock,
+			blockDataStore.getPageData(currentBlock.blockId) || {},
+			"dataScript",
+		);
+
+		blockDataArray = getDataArray(
+			currentBlock,
+			blockDataStore.getBlockData(currentBlock.blockId) || {},
+			"blockDataScript",
+		);
+
+		ownProps = Object.keys(currentBlock.getBlockProps());
+
+		parentProps = Object.keys(getParentProps(currentBlock, {}));
+
+		const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
+		const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
+		if (repeaterRoot) {
+			const key = repeaterRoot.getDataKey("key");
+			const comesFrom = repeaterRoot.getDataKey("comesFrom");
+			if (key && comesFrom === "props") {
+				const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
+				const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+				if (!parsedValue) return {};
+				if (Array.isArray(parsedValue)) {
+					defaultProps = ["item"];
+				} else if (typeof parsedValue === "object") {
+					defaultProps = ["key", "value"];
+				}
+			}
+		}
+	}
+
+	const combinedProps = [...ownProps, ...parentProps].reduce((acc, prop) => {
+		if (!acc.find((p: string) => p === prop)) {
+			acc.push(prop);
+		}
+		return acc;
+	}, [] as string[]);
+
+	console.log({ pageDataArray, blockDataArray, combinedProps }, query);
+
+	pageDataArray.map((prop) => {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--dataScript`,
+			});
+		}
+	});
+	blockDataArray.map((prop) => {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--blockDataScript`,
+			});
+		}
+	});
+
+	combinedProps.map((prop) => {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--props`,
+			});
+		}
+	});
+	defaultProps.map((prop) => {
+		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
+			options.push({
+				label: prop,
+				value: `${prop}--props`,
+			});
+		}
+	});
+
+	return options;
+};
+
+const handleModelValueUpdate = (value: string | null) => {
+	if (value == null) {
+		props.setModelValue({ key: undefined, comesFrom: undefined });
+		return;
+	}
+	const key = value.split("--").slice(0, -1).join("--");
+	const comesFrom = value.split("--").slice(-1)[0];
+	props.setModelValue({ key, comesFrom: comesFrom as BlockVisibilityCondition["comesFrom"] });
+};
+</script>
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 5dbfe0ac4..3622380f0 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -116,17 +116,39 @@ const blockController = {
 		});
 	},
 	getKeyValue: (key: "element" | "innerHTML" | "visibilityCondition") => {
-		let keyValue = "__initial__" as StyleValue | undefined;
-		canvasStore.activeCanvas?.selectedBlocks.forEach((block) => {
-			if (keyValue === "__initial__") {
-				keyValue = block[key];
-			} else if (keyValue !== block[key]) {
-				keyValue = "Mixed";
-			}
-		});
-		return keyValue;
+		if (key !== "visibilityCondition") {
+			let keyValue = "__initial__" as StyleValue | undefined;
+			canvasStore.activeCanvas?.selectedBlocks.forEach((block) => {
+				if (keyValue === "__initial__") {
+					keyValue = block[key];
+				} else if (keyValue !== block[key]) {
+					keyValue = "Mixed";
+				}
+			});
+			return keyValue;
+		} else {
+			// TODO: handle it better
+			let key: string | undefined = "__initial__";
+			let comesFrom: "props" | "dataScript" | "blockDataScript" | undefined = undefined;
+			canvasStore.activeCanvas?.selectedBlocks.forEach((block) => {
+				const condition: BlockVisibilityCondition | undefined = block.getVisibilityCondition();
+				if (key === "__initial__") {
+					if (condition) {
+						key = condition.key;
+						comesFrom = condition.comesFrom;
+					} else {
+						key = undefined;
+						comesFrom = undefined;
+					}
+				} else if (condition?.comesFrom !== comesFrom || condition?.key !== key) {
+					key = "Mixed";
+					comesFrom = undefined;
+				}
+			});
+			return { key, comesFrom };
+		}
 	},
-	setKeyValue: (key: "element" | "innerHTML" | "visibilityCondition", value: string) => {
+	setKeyValue: (key: "element" | "innerHTML" | "visibilityCondition", value: any) => {
 		canvasStore.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (key === "element" && block.blockName === "container") {
 				// reset blockName since it will not be a container anymore

From 7f759c73b3a51b82d465efadea73d7b01ca93af2 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 19:00:34 +0530
Subject: [PATCH 214/547] refactor: getDataArray now no longer needs block
 details

---
 .../components/Controls/DynamicValueHandler.vue | 17 +++--------------
 frontend/src/components/PropsPopoverContent.vue | 12 ++----------
 frontend/src/components/VisibilityInput.vue     | 13 ++-----------
 frontend/src/utils/helpers.ts                   | 13 +------------
 4 files changed, 8 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 3edbea4cf..822fe45d1 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -65,12 +65,7 @@ import useBlockDataStore from "@/stores/blockDataStore";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import {
-	getDataArray,
-	getParentProps,
-	getPropValue,
-	getStandardPropValue,
-} from "@/utils/helpers";
+import { getDataArray, getParentProps, getPropValue, getStandardPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
@@ -100,7 +95,7 @@ const searchQuery = ref("");
 
 const pageDataArray = computed(() => {
 	const currentBlock = props.block || blockController.getFirstSelectedBlock();
-	return getDataArray(currentBlock, pageStore.pageData, "dataScript");
+	return getDataArray(blockDataStore.getPageData(currentBlock?.blockId) || pageStore.pageData);
 });
 
 const blockDataArray = computed(() => {
@@ -113,11 +108,7 @@ const blockDataArray = computed(() => {
 		filter = "own";
 	}
 	if (currentBlock) {
-		return getDataArray(
-			currentBlock,
-			blockDataStore.getBlockData(currentBlock.blockId, filter) || {},
-			"blockDataScript",
-		);
+		return getDataArray(blockDataStore.getBlockData(currentBlock.blockId, filter) || {});
 	}
 	return [];
 });
@@ -230,8 +221,6 @@ const filteredItems = computed(() => {
 
 const selectedItem = ref<DynamicValueItem | null>(props.selectedValue || null);
 
-
-
 const getValue = (item: DynamicValueItem): any => {
 	if (item.comesFrom == "props") {
 		return getPropValue(
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 19aea9f71..e9a67f567 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -292,11 +292,7 @@ const setPropType = (type: string) => {
 const pageDataArray = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
 	if (currentBlock) {
-		return getDataArray(
-			blockController.getFirstSelectedBlock(),
-			blockDataStore.getPageData(currentBlock.blockId) || {},
-			"dataScript",
-		);
+		return getDataArray(blockDataStore.getPageData(currentBlock.blockId) || {});
 	}
 	return [];
 });
@@ -304,11 +300,7 @@ const pageDataArray = computed(() => {
 const blockDataArray = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
 	if (currentBlock) {
-		return getDataArray(
-			currentBlock,
-			blockDataStore.getBlockData(currentBlock.blockId, "passedDown") || {},
-			"blockDataScript",
-		);
+		return getDataArray(blockDataStore.getBlockData(currentBlock.blockId, "passedDown") || {});
 	}
 	return [];
 });
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index f5c2e6104..804019281 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -38,18 +38,9 @@ const getOptions = async (query: string) => {
 	}
 
 	if (currentBlock) {
+		pageDataArray = getDataArray(blockDataStore.getPageData(currentBlock.blockId) || {});
 
-		pageDataArray = getDataArray(
-			currentBlock,
-			blockDataStore.getPageData(currentBlock.blockId) || {},
-			"dataScript",
-		);
-
-		blockDataArray = getDataArray(
-			currentBlock,
-			blockDataStore.getBlockData(currentBlock.blockId) || {},
-			"blockDataScript",
-		);
+		blockDataArray = getDataArray(blockDataStore.getBlockData(currentBlock.blockId) || {});
 
 		ownProps = Object.keys(currentBlock.getBlockProps());
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index b961a5b3d..00927fc8f 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1165,20 +1165,9 @@ const getStandardPropValue = (
 	}
 };
 
-const getDataArray = (
-	block: Block,
-	collectionObject: Record<string, any>,
-	comesFrom: BlockDataKey["comesFrom"],
-) => {
+const getDataArray = (collectionObject: Record<string, any>) => {
 	const result: string[] = [];
 	let collectionObjectCopy = { ...collectionObject };
-	if (block.isInsideRepeater() && comesFrom == "dataScript") {
-		const keys = getCollectionKeys(block, comesFrom);
-		collectionObjectCopy = keys.reduce((acc: any, key: string) => {
-			const data = getDataForKey(acc, key);
-			return Array.isArray(data) && data.length > 0 ? data[0] : data;
-		}, collectionObjectCopy);
-	}
 
 	function processObject(obj: Record<string, any>, prefix = "") {
 		Object.entries(obj).forEach(([key, value]) => {

From 73743e40d8efa457a6bad9f55186aeab77d09b8a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 20:39:27 +0530
Subject: [PATCH 215/547] fix: refreshing visibility options properly

---
 frontend/src/components/VisibilityInput.vue | 128 ++++++++++++--------
 1 file changed, 77 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 804019281..7661f029d 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -1,17 +1,28 @@
 <template>
-	<GenericControl
-		:component="Autocomplete"
-		:label="label"
-		:getOptions="getOptions"
-		:getModelValue="getModelValue"
-		@update:modelValue="handleModelValueUpdate" />
+	<div class="flex w-full flex-col gap-2">
+		<div class="relative flex w-full items-center gap-2">
+			<div class="flex w-fit max-w-[88px] shrink-0 items-center">
+				<InputLabel class="truncate" v-if="label">
+					{{ label }}
+				</InputLabel>
+			</div>
+
+			<div class="relative w-full">
+				<Autocomplete
+					ref="autocompleteRef"
+					:modelValue="getModelValue()"
+					:getOptions="getOptions"
+					@update:modelValue="handleModelValueUpdate" />
+			</div>
+		</div>
+	</div>
 </template>
 <script setup lang="ts">
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import GenericControl from "@/components/Controls/GenericControl.vue";
 import useBlockDataStore from "@/stores/blockDataStore";
 import blockController from "@/utils/blockController";
 import { getDataArray, getParentProps, getStandardPropValue } from "@/utils/helpers";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
 	property: styleProperty;
@@ -20,60 +31,66 @@ const props = defineProps<{
 	setModelValue: (value: BlockVisibilityCondition) => void;
 }>();
 
-const getOptions = async (query: string) => {
-	const blockDataStore = useBlockDataStore();
-
-	let options: { label: string; value: string }[] = [];
+const blockDataStore = useBlockDataStore();
 
-	let pageDataArray: string[] = [];
-	let blockDataArray: string[] = [];
-	let ownProps: string[] = [];
-	let parentProps: string[] = [];
-	let defaultProps: string[] = [];
+const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null);
 
+const pageDataArray = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
-
 	if (!currentBlock) {
-		return options;
+		return [];
 	}
-
-	if (currentBlock) {
-		pageDataArray = getDataArray(blockDataStore.getPageData(currentBlock.blockId) || {});
-
-		blockDataArray = getDataArray(blockDataStore.getBlockData(currentBlock.blockId) || {});
-
-		ownProps = Object.keys(currentBlock.getBlockProps());
-
-		parentProps = Object.keys(getParentProps(currentBlock, {}));
-
-		const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
-		const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
-		if (repeaterRoot) {
-			const key = repeaterRoot.getDataKey("key");
-			const comesFrom = repeaterRoot.getDataKey("comesFrom");
-			if (key && comesFrom === "props") {
-				const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
-				const parsedValue = getStandardPropValue(key, componentRoot)?.value;
-				if (!parsedValue) return {};
+	return getDataArray(blockDataStore.getPageData(currentBlock.blockId) || {});
+});
+const blockDataArray = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (!currentBlock) {
+		return [];
+	}
+	return getDataArray(blockDataStore.getBlockData(currentBlock.blockId) || {});
+});
+const ownProps = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (!currentBlock) {
+		return [];
+	}
+	return Object.keys(currentBlock.getBlockProps());
+});
+const parentProps = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (!currentBlock) {
+		return [];
+	}
+	return Object.keys(getParentProps(currentBlock, {}));
+});
+const defaultProps = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (!currentBlock) {
+		return [];
+	}
+	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
+	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
+	if (repeaterRoot) {
+		const key = repeaterRoot.getDataKey("key");
+		const comesFrom = repeaterRoot.getDataKey("comesFrom");
+		if (key && comesFrom === "props") {
+			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
+			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+			if (parsedValue) {
 				if (Array.isArray(parsedValue)) {
-					defaultProps = ["item"];
+					return ["item"];
 				} else if (typeof parsedValue === "object") {
-					defaultProps = ["key", "value"];
+					return ["key", "value"];
 				}
 			}
 		}
 	}
+	return [];
+});
+const getOptions = async (query: string) => {
+	let options: { label: string; value: string }[] = [];
 
-	const combinedProps = [...ownProps, ...parentProps].reduce((acc, prop) => {
-		if (!acc.find((p: string) => p === prop)) {
-			acc.push(prop);
-		}
-		return acc;
-	}, [] as string[]);
-
-	console.log({ pageDataArray, blockDataArray, combinedProps }, query);
-
-	pageDataArray.map((prop) => {
+	pageDataArray.value.map((prop) => {
 		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
@@ -81,7 +98,7 @@ const getOptions = async (query: string) => {
 			});
 		}
 	});
-	blockDataArray.map((prop) => {
+	blockDataArray.value.map((prop) => {
 		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
@@ -89,6 +106,7 @@ const getOptions = async (query: string) => {
 			});
 		}
 	});
+	const combinedProps = [...new Set([...ownProps.value, ...parentProps.value])];
 
 	combinedProps.map((prop) => {
 		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
@@ -98,7 +116,7 @@ const getOptions = async (query: string) => {
 			});
 		}
 	});
-	defaultProps.map((prop) => {
+	defaultProps.value.map((prop) => {
 		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
 			options.push({
 				label: prop,
@@ -119,4 +137,12 @@ const handleModelValueUpdate = (value: string | null) => {
 	const comesFrom = value.split("--").slice(-1)[0];
 	props.setModelValue({ key, comesFrom: comesFrom as BlockVisibilityCondition["comesFrom"] });
 };
+
+watch(
+	[pageDataArray, blockDataArray, ownProps, parentProps, defaultProps],
+	() => {
+		autocompleteRef.value?.refreshOptions();
+	},
+	{ immediate: true },
+);
 </script>

From e106c8428a40debdeb14693a92e5033415fa92cb Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 22:36:04 +0530
Subject: [PATCH 216/547] fix: make all keys jinja safe and consistent

---
 .../doctype/builder_page/builder_page.py      | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 265e2083b..c68bb260a 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -633,7 +633,7 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 
 				elif block.get("dataKey").get("comesFrom") == "blockDataScript":		
 					loop_var = f"block_key_{_key}"
-					_key = f"block['{escape_single_quotes(_key)}']"
+					_key = jinja_safe_key(f"block.{_key}")
 					new_block_data = loop_var
 					next_data_key = data_key
 				else:
@@ -666,9 +666,10 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 						else:
 							key = visibility_condition.get("key")
 							if visibility_condition.get("comesFrom") == "props":
-								visibility_key = f"props['{escape_single_quotes(key)}']"
+								visibility_key = f"props.{key}"
 							else:
-								visibility_key = f"block['{escape_single_quotes(key)}']"
+								visibility_key = f"block.{key}"
+						visibility_key = jinja_safe_key(visibility_key)
 
 					child_tag, child_tag_details = get_tag(
 						child, soup, data_key=data_key, default_props=default_props
@@ -928,44 +929,39 @@ def set_dynamic_content_placeholder(block, data_key=None):
 	dynamic_values = [block_data_key] if block_data_key else []
 	dynamic_values += block.get("dynamicValues", []) or []
 	for dynamic_value_doc in dynamic_values:
-		original_key = escape_single_quotes(dynamic_value_doc.get("key", ""))
+		original_key = dynamic_value_doc.get("key", "")
 		if not isinstance(dynamic_value_doc, dict):
 			# if dynamic_value_doc is a string, convert it to dict
 			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
 		if dynamic_value_doc and dynamic_value_doc.get("key"):
 			key = ""
 			if dynamic_value_doc.get("comesFrom") == "props":
-				key = f"props['{escape_single_quotes(dynamic_value_doc.get('key'))}']"
+				key = jinja_safe_key(f"props.{original_key}")
 			elif dynamic_value_doc.get("comesFrom") == "blockDataScript":
-				key = f"block['{original_key}']"
+				key = jinja_safe_key(f"block.{original_key}")
 			else:
 				key = (
 					f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
 				)
 				if data_key:
-					# convert a.b to (a or {}).get('b', {})
-					# to avoid undefined error in jinja
-					keys = (key or "").split(".")
-					key = f"({keys[0]} or {{}})"
-					for k in keys[1:]:
-						key = f"{key}.get('{k}', {{}})"
+					key = jinja_safe_key(key)
 
 			_property = dynamic_value_doc.get("property")
 			_type = dynamic_value_doc.get("type")
 			if _type == "attribute":
 				block["attributes"][_property] = (
-					f"{{{{ {key} or block['{original_key}'] or '{escape_single_quotes(block['attributes'].get(_property, ''))}' }}}}"
+					f"{{{{ {key} or '{escape_single_quotes(block['attributes'].get(_property, ''))}' }}}}"
 				)
 			elif _type == "style":
 				if not block["attributes"].get("style"):
 					block["attributes"]["style"] = ""
 				css_property = camel_case_to_kebab_case(_property)
 				block["attributes"]["style"] += (
-					f"{css_property}: {{{{ {key} or block['{original_key}'] or '{escape_single_quotes(block['baseStyles'].get(_property, '') or '')}' }}}};"
+					f"{css_property}: {{{{ {key} or '{escape_single_quotes(block['baseStyles'].get(_property, '') or '')}' }}}};"
 				)
 			elif _type == "key" and not block.get("isRepeaterBlock"):
 				block[_property] = (
-					f"{{{{ {key} if {key} or {key} in ['', 0] else block['{original_key}'] if block['{original_key}'] is defined else props['{original_key}'] if props['{original_key}'] is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
+					f"{{{{ {key} if {key} or {key} in ['', 0] else {jinja_safe_key(f'block.{original_key}')} if {jinja_safe_key(f'block.{original_key}')} is defined else {jinja_safe_key(f'props.{original_key}')} if {jinja_safe_key(f'props.{original_key}')} is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
 				)
 
 
@@ -1049,12 +1045,13 @@ def get_interpreted_prop_value(prop, data_key):
 		return default_value if prop_is_standard else "undefined"
 	if prop_is_dynamic:
 		if prop_comes_from == "dataScript":
-			key = f"{extract_data_key(data_key)}.{prop_value}" if data_key else prop_value
+			key = jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value
 			return (
 				f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
 			)
 		elif prop_comes_from == "blockDataScript":
-			return f"{{{{ block['{escape_single_quotes(prop_value)}'] or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
+			key = jinja_safe_key(f"block.{prop_value}")
+			return f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
 	else:
 		if prop_is_standard:
 			# standard props are static only as of now
@@ -1083,6 +1080,14 @@ def extract_data_key(data_key):
 		return data_key.get("key")
 	return None
 
+def jinja_safe_key(key):
+    # convert a.b to (a or {}).get('b', {})
+	# to avoid undefined error in jinja
+	keys = (key or "").split(".")
+	key = f"({keys[0]} or {{}})"
+	for k in keys[1:]:
+		key = f"{key}.get('{k}', {{}})"
+	return key
 
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)

From 9d7e86d6abf597d8c6c5223b56268f2a907f84cc Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 22:46:09 +0530
Subject: [PATCH 217/547] fix: std. props are passed down by default

---
 frontend/src/components/PropsPopoverContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index e9a67f567..6db1117ed 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -460,7 +460,7 @@ const save = async () => {
 	const propValue: BlockProps[string] = {
 		isStandard: isStandardBool.value,
 		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
-		isPassedDown: isPassedDown.value === "true",
+		isPassedDown: isStandardBool.value || isPassedDown.value === "true",
 		comesFrom: comesFrom.value,
 		value: isStandardBool.value ? null : value.value,
 		standardOptions: isStandardBool.value

From ef16e2e595efff121e24b4f37f92ce412e18edfe Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 25 Dec 2025 22:46:34 +0530
Subject: [PATCH 218/547] fix: resolve default values for passed down std.
 props

---
 frontend/src/utils/helpers.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 00927fc8f..a440b678f 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1131,7 +1131,14 @@ const getPropValue = (
 			return prop.value;
 		}
 	} else {
-		return getParentProps(block, {})[propName]?.value;
+		const parentMatchingProp = getParentProps(block, {})[propName]
+		if(parentMatchingProp) {
+			if (parentMatchingProp.isStandard)
+			{
+				return parentMatchingProp.value || parentMatchingProp.standardOptions?.options?.defaultValue;
+			}
+			return parentMatchingProp.value
+		}
 	}
 };
 

From 23ddce48427a50b5e238093749de5ed784b28424 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 26 Dec 2025 00:22:19 +0530
Subject: [PATCH 219/547] fix: force no_cache

---
 .../builder/doctype/builder_page/builder_page.py    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c68bb260a..f75e44a27 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -256,9 +256,8 @@ def get_context(self, context):
 			context.title = page_data.get("page_title")
 
 		blocks = self.blocks
-
-		if self.dynamic_route or page_data:
-			context.no_cache = 1
+		# detect dynamic_route or block/page data, forcing true for now
+		context.no_cache = 1
 
 		context.preview = getattr(getattr(frappe.local, "request", None), "for_preview", None)
 
@@ -714,10 +713,10 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 			if tag_details.get('std_props'):
 				html = f"{{% with std_props = {tag_details.get('std_props')} %}}{html}{{% endwith %}}"
 
-		print("Final HTML: ", html)
-		# write to file
-		with open("output.html", "w") as f:
-			f.write(html)
+		# print("Final HTML: ", html)
+		# # write to file
+		# with open("output.html", "w") as f:
+		# 	f.write(html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)

From 4f4b59b68d619b66792b89c491fbe89aebf64af0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 26 Dec 2025 10:22:46 +0530
Subject: [PATCH 220/547] fix: better(?) resolution of block data in repeaters

---
 .../doctype/builder_page/builder_page.py      | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index f75e44a27..7df16293a 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -518,7 +518,7 @@ def get_html(blocks, soup):
 		map_of_std_props_info = {}
 		html = ""
 
-		def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=None):
+		def get_tag(block, soup, data_key=None, default_props=None):
 			block = extend_with_component(block)
 
 			props_obj = {}
@@ -631,7 +631,9 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 						_key = f"{_key}.items()"
 
 				elif block.get("dataKey").get("comesFrom") == "blockDataScript":		
-					loop_var = f"block_key_{_key}"
+					# using 'block' as loop var to reset the block data script context for repeater children
+					# this way they do not inherit the parent block's data script context, but get their own from the loop var
+					loop_var = f"block"
 					_key = jinja_safe_key(f"block.{_key}")
 					new_block_data = loop_var
 					next_data_key = data_key
@@ -647,7 +649,7 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
 				child_tag, child_tag_details = get_tag(
-					block.get("children")[0], soup, next_data_key, next_default_props, new_block_data
+					block.get("children")[0], soup, next_data_key, next_default_props
 				)
 				append_child_tag(tag, child_tag, child_tag_details)
 
@@ -699,7 +701,6 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 				"passed_down_props": to_jinja_literal(passed_down_props),
 				"std_props": to_jinja_literal(std_props) if std_props else None,
 				"block_data_script": block.get("blockDataScript", None),
-				"new_block_data": reset_block_data_to,
 			}
 
 			return tag, tag_details
@@ -714,9 +715,9 @@ def get_tag(block, soup, data_key=None, default_props=None, reset_block_data_to=
 				html = f"{{% with std_props = {tag_details.get('std_props')} %}}{html}{{% endwith %}}"
 
 		# print("Final HTML: ", html)
-		# # write to file
-		# with open("output.html", "w") as f:
-		# 	f.write(html)
+		# write to file
+		with open("output.html", "w") as f:
+			f.write(html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)
@@ -869,23 +870,20 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	child_passed_down_props = child_tag_details.get('passed_down_props')
 	child_tag_std_props = child_tag_details.get('std_props')
 	child_tag_block_script = child_tag_details.get('block_data_script')
-	new_block_data = child_tag_details.get('new_block_data', None)
 
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
-	if child_tag_block_script or new_block_data is not None:
-		block_value = new_block_data if new_block_data is not None else "block"
-		script_suffix = f"| execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props)" if child_tag_block_script else ""
-		tag.append(f"{{% with block = {block_value} {script_suffix} %}}")
+	if child_tag_block_script:
+		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props) %}}")
 	if visibility_key:
 		tag.append(f"{{% if {visibility_key} %}}")
 	tag.append(child_tag)
 	if visibility_key:
 		tag.append("{% endif %}")
-	if child_tag_block_script or new_block_data is not None:
+	if child_tag_block_script:
 		tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 	tag.append("{% endwith %}")

From 3dc2091108589cd90577a7eb860aaa925a96fd9b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 26 Dec 2025 10:24:13 +0530
Subject: [PATCH 221/547] fix: properly resolve dynamic parent props

---
 .../StandardPropsInputSection.ts              |  2 +-
 frontend/src/components/TextBlock.vue         |  2 +-
 frontend/src/utils/helpers.ts                 | 69 +++++++++++--------
 3 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 7b8d22eb8..e4bb8557f 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -62,7 +62,7 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 			}
 		},
 		setDynamicValue: (key: string | null, comesFrom: BlockProps[string]["comesFrom"]) => {
-			blockController.setBlockProp(propName, { value: key || "", isDynamic: Boolean(key), comesFrom });
+			blockController.setBlockProp(propName, { value: key || "", isDynamic: key !== null, comesFrom });
 		},
 		setModelValue: (value: any) => {
 			blockController.setBlockProp(propName, { value });
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 1d5cd5112..961e86ad3 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -106,7 +106,7 @@ const hasBlockProps = computed(() => {
 
 const textContent = computed(() => {
 	let innerHTML = props.block.getInnerHTML();
-	if (props.data || hasBlockProps.value) {
+	if (props.data || props.blockData || hasBlockProps.value) {
 		const dynamicContent = getDynamicContent();
 		if (dynamicContent) {
 			innerHTML = dynamicContent;
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index a440b678f..a9552c6a9 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1104,42 +1104,51 @@ const getPropValue = (
 	getBlockScriptValue: (path: string) => any,
 	defaultProps?: Record<string, any> | null,
 ): any => {
-	if (defaultProps && defaultProps[propName] !== undefined) {
+	// Check default props first
+	if (defaultProps?.[propName] !== undefined) {
 		return defaultProps[propName].value;
 	}
+
+	// Find matching prop from block or parent
 	const blockProps = block.getBlockProps();
-	if (blockProps[propName]) {
-		const prop = blockProps[propName];
-		if (prop.isDynamic) {
-			if (prop.comesFrom === "dataScript" && prop.value) {
-				return getDataScriptValue(prop.value);
-			} else if (prop.comesFrom === "blockDataScript" && prop.value) {
-				return getBlockScriptValue(prop.value);
-			} else {
-				if (prop.value && defaultProps && defaultProps[prop.value] !== undefined) {
-					return defaultProps[prop.value].value;
-				}
-			}
-		} else {
-			if (prop.isStandard && prop.standardOptions) {
-				if (prop.standardOptions.type !== "string" && prop.standardOptions.type !== "select") {
-					return prop.value ? JSON.parse(prop.value) : prop.standardOptions?.options?.defaultValue || null;
-				} else {
-					return prop.value || prop.standardOptions?.options?.defaultValue || null;
-				}
-			}
-			return prop.value;
+	const matchingProp = blockProps[propName] ?? getParentProps(block, {})[propName];
+
+	if (!matchingProp) {
+		return undefined;
+	}
+
+	// Handle dynamic props
+	if (matchingProp.isDynamic) {
+		
+		if (matchingProp.comesFrom === "dataScript" && matchingProp.value) {
+			return getDataScriptValue(matchingProp.value);
 		}
-	} else {
-		const parentMatchingProp = getParentProps(block, {})[propName]
-		if(parentMatchingProp) {
-			if (parentMatchingProp.isStandard)
-			{
-				return parentMatchingProp.value || parentMatchingProp.standardOptions?.options?.defaultValue;
-			}
-			return parentMatchingProp.value
+		
+		if (matchingProp.comesFrom === "blockDataScript" && matchingProp.value) {
+			return getBlockScriptValue(matchingProp.value);
+		}
+		
+		// Fallback to default props
+		if (matchingProp.value && defaultProps?.[matchingProp.value] !== undefined) {
+			return defaultProps[matchingProp.value].value;
 		}
+		
+		return undefined;
 	}
+
+	// Handle standard props
+	if (matchingProp.isStandard && matchingProp.standardOptions) {
+		const { type, options } = matchingProp.standardOptions;
+		const defaultValue = options?.defaultValue ?? null;
+		
+		if (type !== "string" && type !== "select") {
+			return matchingProp.value ? JSON.parse(matchingProp.value) : defaultValue;
+		}
+		
+		return matchingProp.value || defaultValue;
+	}
+
+	return matchingProp.value;
 };
 
 const getStandardPropValue = (

From 611e1826c10b816f05a30e62ca072ae0dedcf33d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 26 Dec 2025 11:43:56 +0530
Subject: [PATCH 222/547] fix: handling dynamic props coming from props

default props are now handled differently as passed down props
std. props and props are rearranged and now dynamic props coming from props are properly handled
---
 .../doctype/builder_page/builder_page.py      | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 7df16293a..d0c72966e 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -518,7 +518,7 @@ def get_html(blocks, soup):
 		map_of_std_props_info = {}
 		html = ""
 
-		def get_tag(block, soup, data_key=None, default_props=None):
+		def get_tag(block, soup, data_key=None):
 			block = extend_with_component(block)
 
 			props_obj = {}
@@ -534,11 +534,6 @@ def get_tag(block, soup, data_key=None, default_props=None):
 					
 					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard, "is_passed_down": is_passed_down}
 
-			# when inside props repeater, child blocks get the loop vars as their default props
-			if default_props:
-				for prop in default_props:
-					props_obj[prop] = {"value": f"{{{{ {prop} }}}}", "is_standard": False, "is_passed_down": True}
-
 			set_dynamic_content_placeholder(block, data_key)
 			element = block.get("originalElement") or block.get("element")
 
@@ -617,12 +612,9 @@ def get_tag(block, soup, data_key=None, default_props=None):
 				_key = block.get("dataKey").get("key")
 				loop_var = ""
 				next_data_key = None
-				next_default_props = None
-				new_block_data = None
 
 				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, _key)
-					next_default_props = loop_vars
 
 					loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
 					_key = f"std_props['{escape_single_quotes(_key)}']"
@@ -635,7 +627,6 @@ def get_tag(block, soup, data_key=None, default_props=None):
 					# this way they do not inherit the parent block's data script context, but get their own from the loop var
 					loop_var = f"block"
 					_key = jinja_safe_key(f"block.{_key}")
-					new_block_data = loop_var
 					next_data_key = data_key
 				else:
 					if data_key:
@@ -643,16 +634,23 @@ def get_tag(block, soup, data_key=None, default_props=None):
 					loop_var = f"key_{_key.replace('.', '__')}"
 					next_data_key = {"key": loop_var, "comesFrom": "dataScript"}
 
-				if default_props:  # carried over from parent repeater
-					next_default_props = default_props + (next_default_props or [])
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
+				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+					loop_vars = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
+					default_props = ", ".join(
+						[f"'{var}': {var}" for var in loop_vars]
+					)
+					tag.append(f"{{% with props = props | combine({{ {default_props} }}) %}}")
+					tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
+
 				child_tag, child_tag_details = get_tag(
-					block.get("children")[0], soup, next_data_key, next_default_props
+					block.get("children")[0], soup, next_data_key
 				)
 				append_child_tag(tag, child_tag, child_tag_details)
-
+				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+					tag.append("{% endwith %}{% endwith %}")
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
@@ -673,7 +671,7 @@ def get_tag(block, soup, data_key=None, default_props=None):
 						visibility_key = jinja_safe_key(visibility_key)
 
 					child_tag, child_tag_details = get_tag(
-						child, soup, data_key=data_key, default_props=default_props
+						child, soup, data_key=data_key
 					)
 					append_child_tag(tag, child_tag, child_tag_details, visibility_key)
 
@@ -871,11 +869,10 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	child_tag_std_props = child_tag_details.get('std_props')
 	child_tag_block_script = child_tag_details.get('block_data_script')
 
-	if child_tag_std_props:
-		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
-
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
+	if child_tag_std_props:
+		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 	if child_tag_block_script:
 		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props) %}}")
 	if visibility_key:
@@ -885,11 +882,10 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 		tag.append("{% endif %}")
 	if child_tag_block_script:
 		tag.append("{% endwith %}")
-	tag.append("{% endwith %}")
-	tag.append("{% endwith %}")
-
 	if child_tag_std_props:
 		tag.append("{% endwith %}")
+	tag.append("{% endwith %}")
+	tag.append("{% endwith %}")
 
 
 def to_jinja_literal(obj):
@@ -1049,6 +1045,9 @@ def get_interpreted_prop_value(prop, data_key):
 		elif prop_comes_from == "blockDataScript":
 			key = jinja_safe_key(f"block.{prop_value}")
 			return f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
+		elif prop_comes_from == "props":
+			key = jinja_safe_key(f"props.{prop_value}")
+			return f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
 	else:
 		if prop_is_standard:
 			# standard props are static only as of now

From 8a4567d5ef3442f73afe1b185ffad2ef3129c984 Mon Sep 17 00:00:00 2001
From: Vibhuti410 <157696107+Vibhuti410@users.noreply.github.com>
Date: Fri, 26 Dec 2025 15:10:30 +0530
Subject: [PATCH 223/547] fix: validate color input and prevent invalid hex
 values (#447)

* fix: validate color input and prevent invalid hex values

* fix(color-input): auto-strip extra hashes and retain last valid color

* fix(color-input): normalize input and prevent invalid color updates

* refactor(color-input): Move  inline handler out of the template
- Move inline handler out of the template into a dedicated handleColorUpdate method
- fix formatting

---------

Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 .../src/components/Controls/ColorInput.vue    | 97 ++++++++++++++++---
 1 file changed, 86 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 9bd921572..86d819977 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -24,6 +24,7 @@
 								}"
 								v-bind="events"
 								ref="colorInput"
+								@keydown.enter="handleEnter"
 								@focus="togglePopover"
 								:placeholder="placeholder"
 								:modelValue="modelValue"
@@ -37,16 +38,7 @@
 											}
 										: undefined
 								"
-								@update:modelValue="
-									(val: string | null) => {
-										if (typeof val === 'string' && (val.startsWith('var(--') || val.startsWith('--'))) {
-											emit('update:modelValue', val.startsWith('var(--') ? val : `var(${val})`);
-										} else {
-											const color = getRGB(val);
-											emit('update:modelValue', color);
-										}
-									}
-								">
+								@update:modelValue="handleColorUpdate">
 								<template #prefix>
 									<div
 										class="h-4 w-4 rounded shadow-sm"
@@ -74,7 +66,18 @@ import { getRGB, toKebabCase } from "@/utils/helpers";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
 import { useDark } from "@vueuse/core";
 import { Tooltip } from "frappe-ui";
-import { computed, ComputedRef, defineComponent, h, onMounted, ref, shallowRef, useAttrs, watch } from "vue";
+import {
+	computed,
+	ComputedRef,
+	defineComponent,
+	h,
+	nextTick,
+	onMounted,
+	ref,
+	shallowRef,
+	useAttrs,
+	watch,
+} from "vue";
 import ColorPicker from "./ColorPicker.vue";
 import InputLabel from "./InputLabel.vue";
 
@@ -93,6 +96,67 @@ const showVariableDialog = ref(false);
 const newVariable = ref<Partial<BuilderVariable> | null>(null);
 const { variables, resolveVariableValue } = useBuilderVariable();
 
+const handleEnter = () => {
+	const val = props.modelValue;
+
+	// if current value is invalid, clear it
+	if (typeof val === "string" && !isValidColorInput(val)) {
+		emit("update:modelValue", null);
+	}
+};
+
+const handleColorUpdate = (val: string | null) => {
+	//auto strip extra hashes
+	if (typeof val == "string") {
+		val = normalizeColorInput(val);
+	}
+
+	//last valid value is retained
+	const isInvalid = !!val && !isValidColorInput(val);
+	if (isInvalid) {
+		const lastValidValue = props.modelValue;
+		// step 1: clear input
+		emit("update:modelValue", null);
+
+		// step 2: restore last valid value after render
+		nextTick(() => {
+			emit("update:modelValue", lastValidValue ?? null);
+		});
+
+		return;
+	}
+
+	if (typeof val === "string" && (val.startsWith("var(--") || val.startsWith("--"))) {
+		emit("update:modelValue", val.startsWith("var(--") ? val : `var(${val})`);
+	} else {
+		const color = getRGB(val);
+		emit("update:modelValue", color);
+	}
+};
+
+const normalizeColorInput = (val: string) => {
+	// turn multiple leading hashes into one
+	if (/^#+/.test(val)) {
+		return "#" + val.replace(/^#+/, "");
+	}
+	return val;
+};
+
+const isValidColorInput = (val: string | null) => {
+	if (!val) return true;
+
+	// rgb / rgba
+	if (/^rgba?\(/.test(val)) return true;
+
+	// hex: #RGB or #RRGGBB
+	if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) return true;
+
+	// CSS variable
+	if (val.startsWith("var(--") || val.startsWith("--")) return true;
+
+	return false;
+};
+
 const props = withDefaults(
 	defineProps<{
 		modelValue?: HashString | null;
@@ -110,6 +174,17 @@ const props = withDefaults(
 		showPickerOnMount: false,
 	},
 );
+const lastValidValue = ref<string | null>(props.modelValue ?? null);
+
+watch(
+	() => props.modelValue,
+	(val) => {
+		// keep track of the last valid value so we can restore it when user types invalid input
+		if (isValidColorInput(val as string | null)) {
+			lastValidValue.value = (val as string) ?? null;
+		}
+	},
+);
 
 const isCssVariable = computed(() => {
 	return (

From dd91305079ccc2bd5f631dee706fe4423c31e1ae Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 26 Dec 2025 15:53:12 +0530
Subject: [PATCH 224/547] fix: Reorder style/script so that page scripts gets
 more precedence

---
 .../doctype/builder_page/builder_page.py      | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index d051ddddc..8a990c5cd 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -330,6 +330,12 @@ def is_component_used(self, component_id):
 			return True
 
 	def set_style_and_script(self, context):
+		builder_settings = frappe.get_cached_doc("Builder Settings", "Builder Settings")
+		if builder_settings.script:
+			context.setdefault("scripts", []).append(builder_settings.script_public_url)
+		if builder_settings.style:
+			context.setdefault("styles", []).append(builder_settings.style_public_url)
+
 		client_scripts = self.get("client_scripts") or []
 		for script in client_scripts:
 			script_doc = frappe.get_cached_doc("Builder Client Script", script.builder_script)
@@ -344,22 +350,16 @@ def set_style_and_script(self, context):
 		if not context.get("_body_html"):
 			context._body_html = ""
 
-		if self.head_html:
-			context._head_html += self.head_html
-
-		if self.body_html:
-			context._body_html += self.body_html
-
-		builder_settings = frappe.get_cached_doc("Builder Settings", "Builder Settings")
-		if builder_settings.script:
-			context.setdefault("scripts", []).append(builder_settings.script_public_url)
-		if builder_settings.style:
-			context.setdefault("styles", []).append(builder_settings.style_public_url)
 		if builder_settings.head_html:
 			context._head_html += builder_settings.head_html
 		if builder_settings.body_html:
 			context._body_html += builder_settings.body_html
 
+		if self.head_html:
+			context._head_html += self.head_html
+		if self.body_html:
+			context._body_html += self.body_html
+
 		context["_head_html"] = render_template(context._head_html, context)
 		context["_body_html"] = render_template(context._body_html, context)
 

From 81e2471d22bdba170d0de3d0fa51eeea2d6cdfa1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 27 Dec 2025 00:02:16 +0530
Subject: [PATCH 225/547] refactor: builder_page.py for better readability

---
 .../doctype/builder_page/builder_page.py      | 79 +++++++++----------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index d0c72966e..006133663 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -2,7 +2,6 @@
 # For license information, please see license.txt
 
 import copy
-import json
 import os
 import re
 import shutil
@@ -514,7 +513,6 @@ def get_block_html(blocks):
 
 	def get_html(blocks, soup):
 
-		# same as above but for std. props info (not values), used to idenitfy the type of looping vars (array or object) in repeaters
 		map_of_std_props_info = {}
 		html = ""
 
@@ -612,8 +610,9 @@ def get_tag(block, soup, data_key=None):
 				_key = block.get("dataKey").get("key")
 				loop_var = ""
 				next_data_key = None
+				comes_from = block.get("dataKey").get("comesFrom", "dataScript")
 
-				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+				if comes_from == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, _key)
 
 					loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
@@ -622,10 +621,10 @@ def get_tag(block, soup, data_key=None):
 					if len(loop_vars) > 1:  # object repeater
 						_key = f"{_key}.items()"
 
-				elif block.get("dataKey").get("comesFrom") == "blockDataScript":		
+				elif comes_from == "blockDataScript":		
 					# using 'block' as loop var to reset the block data script context for repeater children
 					# this way they do not inherit the parent block's data script context, but get their own from the loop var
-					loop_var = f"block"
+					loop_var = "block"
 					_key = jinja_safe_key(f"block.{_key}")
 					next_data_key = data_key
 				else:
@@ -637,27 +636,25 @@ def get_tag(block, soup, data_key=None):
 
 				tag.append(f"{{% for {loop_var} in {_key} %}}")
 
-				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+				if comes_from == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
-					default_props = ", ".join(
-						[f"'{var}': {var}" for var in loop_vars]
-					)
+					default_props = ", ".join([f"'{var}': {var}" for var in loop_vars])
 					tag.append(f"{{% with props = props | combine({{ {default_props} }}) %}}")
 					tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
 
-				child_tag, child_tag_details = get_tag(
-					block.get("children")[0], soup, next_data_key
-				)
+				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, next_data_key)
 				append_child_tag(tag, child_tag, child_tag_details)
-				if block.get("dataKey").get("comesFrom", "dataScript") == "props":
+    
+				if comes_from == "props":
 					tag.append("{% endwith %}{% endwith %}")
+     
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
 					visibility_key = None
 					if child.get("visibilityCondition"):
 						visibility_condition = child.get("visibilityCondition")
-						if type(visibility_condition) == str or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
+						if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
 							if data_key:
 								visibility_key = f"{extract_data_key(data_key)}.{key}"
 							else:
@@ -670,9 +667,7 @@ def get_tag(block, soup, data_key=None):
 								visibility_key = f"block.{key}"
 						visibility_key = jinja_safe_key(visibility_key)
 
-					child_tag, child_tag_details = get_tag(
-						child, soup, data_key=data_key
-					)
+					child_tag, child_tag_details = get_tag(child, soup, data_key=data_key)
 					append_child_tag(tag, child_tag, child_tag_details, visibility_key)
 
 			if element == "body":
@@ -714,8 +709,8 @@ def get_tag(block, soup, data_key=None):
 
 		# print("Final HTML: ", html)
 		# write to file
-		with open("output.html", "w") as f:
-			f.write(html)
+		# with open("output.html", "w") as f:
+		# 	f.write(html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)
@@ -864,6 +859,7 @@ def extend_block(block, overridden_block):
 
 
 def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
+	
 	child_tag_props = child_tag_details.get('all_props')
 	child_passed_down_props = child_tag_details.get('passed_down_props')
 	child_tag_std_props = child_tag_details.get('std_props')
@@ -871,19 +867,23 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
+	
 	if child_tag_std_props:
 		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 	if child_tag_block_script:
 		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props) %}}")
 	if visibility_key:
 		tag.append(f"{{% if {visibility_key} %}}")
+	
 	tag.append(child_tag)
+	
 	if visibility_key:
 		tag.append("{% endif %}")
 	if child_tag_block_script:
 		tag.append("{% endwith %}")
 	if child_tag_std_props:
 		tag.append("{% endwith %}")
+
 	tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 
@@ -1031,31 +1031,28 @@ def get_interpreted_prop_value(prop, data_key):
 	prop_is_standard = prop.get("isStandard", False)
 	prop_value = prop.get("value")
 	
-	default_value = None
-	if prop_is_standard:
-		default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue")
+	default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue") if prop_is_standard else None
+	
 	if prop_value is None:
 		return default_value if prop_is_standard else "undefined"
+	
 	if prop_is_dynamic:
-		if prop_comes_from == "dataScript":
-			key = jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value
-			return (
-				f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
-			)
-		elif prop_comes_from == "blockDataScript":
-			key = jinja_safe_key(f"block.{prop_value}")
-			return f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
-		elif prop_comes_from == "props":
-			key = jinja_safe_key(f"props.{prop_value}")
-			return f"{{{{ {key} or '{escape_single_quotes(default_value) if default_value is not None else 'undefined'}' }}}}"
-	else:
-		if prop_is_standard:
-			# standard props are static only as of now
-			prop_value = parse_static_value(
-				prop.get("value") or default_value,
-				prop.get("standardOptions", {}).get("type"),
-			)
-		return prop_value
+		key_mapping = {
+			"dataScript": jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value,
+			"blockDataScript": jinja_safe_key(f"block.{prop_value}"),
+			"props": jinja_safe_key(f"props.{prop_value}")
+		}
+		key = key_mapping.get(prop_comes_from, prop_value)
+		fallback = escape_single_quotes(default_value) if default_value is not None else 'undefined'
+		return f"{{{{ {key} or '{fallback}' }}}}"
+	
+	if prop_is_standard:
+		prop_value = parse_static_value(
+			prop_value or default_value,
+			prop.get("standardOptions", {}).get("type"),
+		)
+	
+	return prop_value
 
 
 def get_loop_vars(map_of_std_props_info, key):

From 7027dc1962ba4fbedfc3c7d71c0bd245b91728c0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 27 Dec 2025 00:15:54 +0530
Subject: [PATCH 226/547] fix: resetting block now also resets block data
 script

---
 frontend/src/block.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 536c89527..390d555a1 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -1075,6 +1075,7 @@ function resetBlock(
 		block.dataKey = null;
 		block.props = {};
 		block.blockClientScript = "";
+		block.blockDataScript = "";
 	}
 
 	if (resetChildren) {

From 657dc7c2dc81a6db9984911b55fc7e994253a481 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 27 Dec 2025 00:24:03 +0530
Subject: [PATCH 227/547] refactor: removed unused code in BlockHTML.vue

---
 frontend/src/components/BlockHTML.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 4fc520c0e..9c287e4f6 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -28,7 +28,6 @@ const getBlockDataScriptValue = (path: string): any => {
 const getDynamicContent = () => {
 	let innerHTML = null as string | null;
 	if (props.data || props.blockData || hasBlockProps.value) {
-		const data = props.data; // to "freeze" props.data for getDataScriptValue
 		if (props.block.getDataKey("property") === "innerHTML") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {

From 660d1dc96ee4e1e3326c1315a52044be8d082721 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 27 Dec 2025 10:07:27 +0530
Subject: [PATCH 228/547] fix: Restrict HTML blocks from having children

---
 frontend/src/block.ts                  | 1 +
 frontend/src/utils/blockController.ts  | 3 +++
 frontend/src/utils/useBuilderEvents.ts | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 9c898fd91..bc110bed6 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -613,6 +613,7 @@ class Block implements BlockOptions {
 			this.isInput() ||
 			this.isVideo() ||
 			(this.isText() && !this.isLink()) ||
+			this.isHTML() ||
 			this.isExtendedFromComponent()
 		);
 	}
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 6147ee1ac..36ca987ab 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -282,6 +282,9 @@ const blockController = {
 			}
 		});
 	},
+	canHaveChildren: () => {
+		return blockController.isBlockSelected() && blockController.getFirstSelectedBlock().canHaveChildren();
+	},
 	convertToLink: async () => {
 		const blocks = blockController.getSelectedBlocks();
 		for (const block of blocks) {
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index c531f8f39..5b23bebf5 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -194,7 +194,7 @@ export function useBuilderEvents(
 		}
 
 		// if selected block is container, create a new text block inside it and set the text
-		if (blockController.isContainer()) {
+		if (blockController.canHaveChildren() && blockController.isContainer()) {
 			e.preventDefault();
 			const block = getBlockTemplate("text");
 			block.innerHTML = text;

From 1cb1eb592af4d9e72b38af5ed4e402a68db3dcd1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 27 Dec 2025 14:19:00 +0530
Subject: [PATCH 229/547] fix(Standard Page): Let users select app instead of
 module

---
 .../doctype/builder_page/builder_page.js      | 11 ++++++
 .../doctype/builder_page/builder_page.json    |  7 ++--
 .../doctype/builder_page/builder_page.py      |  8 ++---
 frontend/src/components/Controls/Switch.vue   |  2 +-
 .../src/components/Settings/PageGeneral.vue   | 35 +++++++++++--------
 frontend/src/types/Builder/BuilderPage.ts     |  2 +-
 6 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.js b/builder/builder/doctype/builder_page/builder_page.js
index 39ddc93fc..d6218553e 100644
--- a/builder/builder/doctype/builder_page/builder_page.js
+++ b/builder/builder/doctype/builder_page/builder_page.js
@@ -14,6 +14,17 @@ frappe.ui.form.on("Builder Page", {
   onload(frm) {
     frm.set_df_property("blocks", "wrap", true);
     frm.set_df_property("draft_blocks", "wrap", true);
+
+    if (frappe.boot.developer_mode) {
+      frappe.call({
+        method: "frappe.core.doctype.module_def.module_def.get_installed_apps",
+        callback: function (r) {
+          if (r.message) {
+            frm.set_df_property("module", "options", JSON.parse(r.message));
+          }
+        },
+      });
+    }
   },
   set_meta_tags(frm) {
     frappe.utils.set_meta_tag(frm.doc.route);
diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index 17d97d1d3..ab13c180a 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -238,11 +238,10 @@
   {
    "depends_on": "is_standard",
    "fieldname": "module",
-   "fieldtype": "Link",
-   "label": "Module",
+   "fieldtype": "Select",
+   "label": "App",
    "mandatory_depends_on": "is_standard",
-   "no_copy": 1,
-   "options": "Module Def"
+   "no_copy": 1
   }
  ],
  "index_web_pages_for_search": 1,
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 8a990c5cd..5959cd81d 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -186,12 +186,8 @@ def on_update(self):
 		if frappe.conf.developer_mode and self.is_template:
 			save_as_template(self)
 
-		if frappe.conf.developer_mode and self.is_standard and self.module:
-			from frappe.modules.utils import get_module_app
-
-			app = get_module_app(self.module)
-			if app:
-				export_page_as_standard(self.name, target_app=app)
+		if frappe.conf.developer_mode and self.is_standard and self.app:
+			export_page_as_standard(self.name, target_app=self.app)
 
 	def clear_route_cache(self):
 		get_web_pages_with_dynamic_routes.clear_cache()
diff --git a/frontend/src/components/Controls/Switch.vue b/frontend/src/components/Controls/Switch.vue
index 9d6de4a8b..af7741e09 100644
--- a/frontend/src/components/Controls/Switch.vue
+++ b/frontend/src/components/Controls/Switch.vue
@@ -1,7 +1,7 @@
 <template>
 	<Switch
 		v-model="value"
-		class="[&>button>span]:bg-surface-gray-1 [&>span>[id^=headlessui-description]]:text-ink-gray-5 [&>span>[id^=headlessui-label]]:text-ink-gray-9"
+		class="!px-0 [&>button>span]:bg-surface-gray-1 [&>span>[id^=headlessui-description]]:text-ink-gray-5 [&>span>[id^=headlessui-label]]:text-ink-gray-9"
 		:class="{
 			'[&>button]:bg-surface-gray-3 hover:[&>button]:!bg-surface-gray-4': !value,
 			'[&>button]:bg-surface-gray-6 hover:[&>button]:!bg-surface-gray-5': value,
diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 1a7cc2058..6a3a75893 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -137,14 +137,14 @@
 							@update:modelValue="(val: Boolean) => pageStore.updateActivePage('is_standard', val)" />
 						<div v-if="pageStore.activePage?.is_standard" class="flex items-center justify-between">
 							<div class="flex flex-col gap-2">
-								<span class="text-base font-medium text-ink-gray-9">Module</span>
-								<p class="text-base text-ink-gray-5">Select the module for this standard page</p>
+								<span class="text-base font-medium text-ink-gray-9">App</span>
+								<p class="text-base text-ink-gray-5">Select the app for this standard page</p>
 							</div>
 							<div>
 								<BuilderInput
 									class="w-fit"
 									type="select"
-									:options="moduleOptions"
+									:options="appOptions"
 									:modelValue="pageStore.activePage?.module"
 									@update:modelValue="
 										(val: string) => pageStore.updateActivePage('module', val)
@@ -180,11 +180,10 @@ import Switch from "@/components/Controls/Switch.vue";
 import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { builderSettings } from "@/data/builderSettings";
-import moduleDef from "@/data/moduleDef";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderProjectFolder } from "@/types/Builder/BuilderProjectFolder";
-import { FeatherIcon } from "frappe-ui";
+import { createResource, FeatherIcon } from "frappe-ui";
 import { computed } from "vue";
 
 const pageStore = usePageStore();
@@ -211,19 +210,27 @@ const folderOptions = computed(() => {
 	return [homeOption, ...options];
 });
 
-const moduleOptions = computed(() => {
+const installedAppsResource = createResource({
+	url: "frappe.core.doctype.module_def.module_def.get_installed_apps",
+	cache: "installed_apps",
+	auto: true,
+	transform: (data: string) => {
+		return JSON.parse(data);
+	},
+});
+
+const appOptions = computed(() => {
 	const defaultOption = {
-		label: "Select Module",
+		label: "Select App",
 		value: "",
 	};
 
-	const options =
-		moduleDef.data?.map((module: { name: string; module_name: string }) => {
-			return {
-				label: module.module_name,
-				value: module.name,
-			};
-		}) || [];
+	const options = (installedAppsResource.data || []).map((app: string) => {
+		return {
+			label: app.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+			value: app,
+		};
+	});
 
 	return [defaultOption, ...options];
 });
diff --git a/frontend/src/types/Builder/BuilderPage.ts b/frontend/src/types/Builder/BuilderPage.ts
index 869c96762..11f46dee4 100644
--- a/frontend/src/types/Builder/BuilderPage.ts
+++ b/frontend/src/types/Builder/BuilderPage.ts
@@ -23,7 +23,7 @@ export interface BuilderPage{
 	is_standard?: 0 | 1
 	/**	Is Template : Check	*/
 	is_template?: 0 | 1
-	/**	Module : Link - Module Def	*/
+	/**	App : Link - Installed Application	*/
 	module?: string
 	/**	Blocks : JSON	*/
 	blocks?: any

From 08da7ad202844924be772e391257a9c4ab8b4cea Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 27 Dec 2025 23:13:05 +0530
Subject: [PATCH 230/547] refactor: better prefix in
 CollectionOptionsSection.ts

---
 .../CollectionOptionsSection.ts               | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 1f1e36448..ac8bb357d 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -62,7 +62,7 @@ const keyOptions = computed(() => {
 	repeatableDataKeys.forEach((item) => {
 		result.push({
 			label: item,
-			value: `${item}--pgdata`,
+			value: `${item}--dataScript`,
 			prefix: h(FeatherIcon, {
 				name: "zap",
 				class: "size-3",
@@ -72,7 +72,7 @@ const keyOptions = computed(() => {
 	repeatableBlockDataKeys.forEach((item) => {
 		result.push({
 			label: item,
-			value: `${item}--bldata`,
+			value: `${item}--blockDataScript`,
 			prefix: h(FeatherIcon, {
 				name: "zap",
 				class: "size-3",
@@ -82,7 +82,7 @@ const keyOptions = computed(() => {
 	repeatableProps.forEach((prop) => {
 		result.push({
 			label: prop,
-			value: `${prop}--stprop`,
+			value: `${prop}--props`,
 			prefix: h(FeatherIcon, {
 				name: "git-commit",
 				class: "size-3",
@@ -107,17 +107,8 @@ const collectionOptions = [
 		searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
 		events: {
 			"update:modelValue": (selectedOption: string) => {
-				let value = selectedOption.slice(0, -8);
-				let comesFromShort = selectedOption.slice(-6);
-				let comesFrom: BlockDataKey["comesFrom"] | "" = "dataScript";
-				if (!value && useCanvasStore().editingMode != "fragment") {
-					comesFrom = "";
-				}
-				if (comesFromShort == "bldata") {
-					comesFrom = "blockDataScript";
-				} else if (comesFromShort == "stprop") {
-					comesFrom = "props";
-				}
+				let value = selectedOption.split("--").slice(0, -1).join("--");
+				let comesFrom = selectedOption.split("--").slice(-1)[0] as BlockDataKey["comesFrom"];
 				blockController.setDataKey("key", value);
 				blockController.setDataKey("comesFrom", comesFrom);
 			},

From efe593ce28e810bfff4cb4b71a33c87b57995a97 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 28 Dec 2025 11:16:38 +0530
Subject: [PATCH 231/547] fix: disabled all prop validation inputs for now

---
 frontend/src/components/Controls/BuilderButton.vue   |  6 +++++-
 frontend/src/components/PropsEditor.vue              | 12 ++++++++++--
 .../src/components/PropsOptions/ArrayOptions.vue     |  4 ++--
 .../src/components/PropsOptions/NumberOptions.vue    |  4 ++--
 .../src/components/PropsOptions/ObjectOptions.vue    |  4 ++--
 frontend/src/components/PropsPopoverContent.vue      |  5 +++--
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Controls/BuilderButton.vue b/frontend/src/components/Controls/BuilderButton.vue
index 08b558eb9..846df681d 100644
--- a/frontend/src/components/Controls/BuilderButton.vue
+++ b/frontend/src/components/Controls/BuilderButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<Button :variant="variant" :class="classes"><slot /></Button>
+	<Button :disabled="disabled" :variant="variant" :class="classes"><slot /></Button>
 </template>
 <script lang="ts" setup>
 import { Button } from "frappe-ui";
@@ -8,6 +8,7 @@ import { computed } from "vue";
 const props = withDefaults(
 	defineProps<{
 		variant?: string;
+		disabled?: boolean;
 	}>(),
 	{
 		variant: "subtle",
@@ -16,6 +17,9 @@ const props = withDefaults(
 
 const classes = computed(() => {
 	const _classes = [];
+	if (props.disabled) {
+		_classes.push("cursor-not-allowed");
+	}
 	if (props.variant === "solid") {
 		_classes.push([
 			"bg-surface-gray-7",
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index ec5ffdfbc..2b52f4556 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -52,8 +52,16 @@
 										<p class="text-sm font-medium">
 											{{ name }}
 										</p>
-										<p v-if="value.isStandard" class="text-xs text-ink-gray-4">
-											Std. - {{ value.standardOptions?.isRequired ? "Required" : "Optional" }}
+										<p
+											v-if="value.isStandard"
+											class="max-w-24 truncate text-ellipsis text-xs text-ink-gray-4">
+											{{
+												value.standardOptions?.options?.defaultValue
+													? ["array", "object"].includes(value.standardOptions.options.type)
+														? JSON.stringify(value.standardOptions?.options?.defaultValue)
+														: value.standardOptions?.options?.defaultValue
+													: "No Default Value"
+											}}
 										</p>
 										<p v-else class="max-w-full truncate text-ellipsis text-xs text-ink-gray-4">
 											{{ value.value }}
diff --git a/frontend/src/components/PropsOptions/ArrayOptions.vue b/frontend/src/components/PropsOptions/ArrayOptions.vue
index 3e50133ed..f8373e0a4 100644
--- a/frontend/src/components/PropsOptions/ArrayOptions.vue
+++ b/frontend/src/components/PropsOptions/ArrayOptions.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Min. Items</InputLabel>
 		<Input
 			:model-value="minItems"
@@ -7,7 +7,7 @@
 			@input="handleMinItemsChange"
 			placeholder="Enter min number of items"></Input>
 	</div>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Max. Items</InputLabel>
 		<Input
 			:model-value="maxItems"
diff --git a/frontend/src/components/PropsOptions/NumberOptions.vue b/frontend/src/components/PropsOptions/NumberOptions.vue
index 096b77a37..7660cac3d 100644
--- a/frontend/src/components/PropsOptions/NumberOptions.vue
+++ b/frontend/src/components/PropsOptions/NumberOptions.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Min. Value</InputLabel>
 		<Input
 			:model-value="minValue"
@@ -7,7 +7,7 @@
 			@input="handleMinValueChange"
 			placeholder="Enter min value"></Input>
 	</div>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Max. Value</InputLabel>
 		<Input
 			:model-value="maxValue"
diff --git a/frontend/src/components/PropsOptions/ObjectOptions.vue b/frontend/src/components/PropsOptions/ObjectOptions.vue
index eb4839fc6..d40f5fa4a 100644
--- a/frontend/src/components/PropsOptions/ObjectOptions.vue
+++ b/frontend/src/components/PropsOptions/ObjectOptions.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Min. Items</InputLabel>
 		<Input
 			:model-value="minItems"
@@ -7,7 +7,7 @@
 			@input="handleMinItemsChange"
 			placeholder="Enter min number of items"></Input>
 	</div>
-	<div class="flex items-center justify-between">
+	<div v-if="false" class="flex items-center justify-between">
 		<InputLabel>Max. Items</InputLabel>
 		<Input
 			:model-value="maxItems"
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 6db1117ed..ecf0a8880 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -106,7 +106,8 @@
 				@update:model-value="(val) => (isEditable = val)" />
 		</div>
 		<template v-if="isStandardBool">
-			<div class="flex items-center justify-between">
+			<!-- Disabled for now -->
+			<div v-if="false" class="flex items-center justify-between">
 				<InputLabel>Is Required</InputLabel>
 				<OptionToggle
 					:options="[
@@ -130,7 +131,7 @@
 					standardPropOptions.options = options;
 				}" />
 		</template>
-		<BuilderButton label="Save" variant="subtle" class="w-full flex-shrink-0" @click="save" />
+		<BuilderButton :disabled="!name.trim().length" label="Save" variant="subtle" class="w-full flex-shrink-0" @click="save" />
 	</div>
 </template>
 

From b59d699810ab796a43f923df760ce20d06da3b9a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 28 Dec 2025 11:25:50 +0530
Subject: [PATCH 232/547] fix: array editor paste events do not override passed
 items

---
 frontend/src/components/ArrayEditor.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ArrayEditor.vue b/frontend/src/components/ArrayEditor.vue
index c6e0b8fb8..4b212c766 100644
--- a/frontend/src/components/ArrayEditor.vue
+++ b/frontend/src/components/ArrayEditor.vue
@@ -4,7 +4,7 @@
 			<BuilderInput
 				placeholder="empty string"
 				:modelValue="item"
-				@update:modelValue="(val: string) => updateItem(index, val)" />
+				@input="(val: string) => updateItem(index, val)" />
 			<BuilderButton
 				class="flex-shrink-0 text-xs"
 				variant="subtle"
@@ -55,6 +55,7 @@ const deleteItem = (index: number) => {
 const arrayEditor = ref<HTMLElement | null>(null);
 
 const pasteArray = (e: ClipboardEvent) => {
+	const passedArr = props.arr.filter(item => item.trim() !== "");
 	const text = e.clipboardData?.getData("text/plain");
 	if (text) {
 		e.preventDefault();
@@ -63,7 +64,8 @@ const pasteArray = (e: ClipboardEvent) => {
 			const parsed = JSON.parse(text);
 			if (Array.isArray(parsed)) {
 				const stringArray = parsed.map(item => String(item));
-				emit("update:arr", stringArray);
+				emit("update:arr", [...passedArr, ...stringArray]);
+				console.log("Pasted JSON array:", [...passedArr, ...stringArray]);
 				return;
 			}
 		} catch (e) {
@@ -73,19 +75,19 @@ const pasteArray = (e: ClipboardEvent) => {
 		// Try to parse as comma-separated values
 		if (text.includes(",")) {
 			const items = text.split(",").map(item => item.trim()).filter(item => item);
-			emit("update:arr", items);
+			emit("update:arr", [...passedArr, ...items]);
 			return;
 		}
 		
 		// Try to parse as line-separated values
 		if (text.includes("\n")) {
 			const items = text.split("\n").map(item => item.trim()).filter(item => item);
-			emit("update:arr", items);
+			emit("update:arr", [...passedArr, ...items]);
 			return;
 		}
 		
 		// Single item
-		emit("update:arr", [text.trim()]);
+		emit("update:arr", [...passedArr, text.trim()]);
 	}
 };
 </script>

From 2be9a46f8faacc89dd10eec94ae830bd0fe6ac1c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 28 Dec 2025 19:18:47 +0530
Subject: [PATCH 233/547] misc: yarn.lock update

---
 yarn.lock | 1693 +++--------------------------------------------------
 1 file changed, 87 insertions(+), 1606 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 38c0eb3b2..2443ffbfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@akryum/tinypool@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@akryum/tinypool/-/tinypool-0.3.1.tgz#a14b3d51a400e7c0ab4c7e2b1c2e2fa0386aea87"
-  integrity sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==
-
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -35,11 +30,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
   integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
 
-"@babel/helper-validator-identifier@^7.28.5":
-  version "7.28.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
-  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
-
 "@babel/parser@^7.27.2", "@babel/parser@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.4.tgz#da25d4643532890932cc03f7705fe19637e03fa8"
@@ -47,13 +37,6 @@
   dependencies:
     "@babel/types" "^7.28.4"
 
-"@babel/parser@^7.28.5":
-  version "7.28.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.5.tgz#0b0225ee90362f030efd644e8034c99468893b08"
-  integrity sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==
-  dependencies:
-    "@babel/types" "^7.28.5"
-
 "@babel/types@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a"
@@ -62,14 +45,6 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
-"@babel/types@^7.28.5":
-  version "7.28.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
-  integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==
-  dependencies:
-    "@babel/helper-string-parser" "^7.27.1"
-    "@babel/helper-validator-identifier" "^7.28.5"
-
 "@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.18.6", "@codemirror/autocomplete@^6.3.2":
   version "6.19.0"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.19.0.tgz#4e6d6ddc9329ed387b2f7efd38febd3f6e2f63d8"
@@ -90,16 +65,6 @@
     "@codemirror/view" "^6.27.0"
     "@lezer/common" "^1.1.0"
 
-"@codemirror/commands@^6.3.0":
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.10.0.tgz#b3206984fec8443c4d910565eb2e9d591c7d80b2"
-  integrity sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.4.0"
-    "@codemirror/view" "^6.27.0"
-    "@lezer/common" "^1.1.0"
-
 "@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.3.1":
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz#763ca41aee81bb2431be55e3cfcc7cc8e91421a3"
@@ -139,7 +104,7 @@
     "@lezer/common" "^1.0.0"
     "@lezer/javascript" "^1.0.0"
 
-"@codemirror/lang-json@^6.0.1", "@codemirror/lang-json@^6.0.2":
+"@codemirror/lang-json@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.2.tgz#054b160671306667e25d80385286049841836179"
   integrity sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==
@@ -158,7 +123,7 @@
     "@lezer/common" "^1.2.1"
     "@lezer/python" "^1.1.4"
 
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0", "@codemirror/language@^6.9.2":
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0":
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.3.tgz#8e6632df566a7ed13a1bd307f9837765bb1abfdd"
   integrity sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==
@@ -179,15 +144,6 @@
     "@codemirror/view" "^6.35.0"
     crelt "^1.0.5"
 
-"@codemirror/lint@^6.4.2":
-  version "6.9.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.9.2.tgz#09ed0aedec13381c9e36e1ac5d126027740c3ef4"
-  integrity sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.35.0"
-    crelt "^1.0.5"
-
 "@codemirror/search@^6.0.0", "@codemirror/search@^6.5.11":
   version "6.5.11"
   resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.11.tgz#a324ffee36e032b7f67aa31c4fb9f3e6f9f3ed63"
@@ -197,14 +153,14 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.3.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
   integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
   dependencies:
     "@marijn/find-cluster-break" "^1.0.0"
 
-"@codemirror/theme-one-dark@^6.1.2", "@codemirror/theme-one-dark@^6.1.3":
+"@codemirror/theme-one-dark@^6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz#1dbb73f6e73c53c12ad2aed9f48c263c4e63ea37"
   integrity sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==
@@ -224,16 +180,6 @@
     style-mod "^4.1.0"
     w3c-keyname "^2.2.4"
 
-"@codemirror/view@^6.22.0":
-  version "6.39.4"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.39.4.tgz#b76c73ab48c749cc9ab9e5e0a5d9e47df9f31cb5"
-  integrity sha512-xMF6OfEAUVY5Waega4juo1QGACfNkNF+aJLqpd8oUJz96ms2zbfQ9Gh35/tI3y8akEV31FruKfj7hBnIU/nkqA==
-  dependencies:
-    "@codemirror/state" "^6.5.0"
-    crelt "^1.0.6"
-    style-mod "^4.1.0"
-    w3c-keyname "^2.2.4"
-
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -454,63 +400,6 @@
   dependencies:
     "@tanstack/vue-virtual" "^3.0.0-beta.60"
 
-"@histoire/app@^0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@histoire/app/-/app-0.17.17.tgz#3aa6fbb7be516c865480b5a2cf2cfad07e230af0"
-  integrity sha512-2i1V38o08V+eaR0d3L0/EA6AYG14xyQBJbyYv0Hz3r4sH3Elj1FoJiwolbCfTDmkOnSgwWTc7+JoCqkLIbxfhA==
-  dependencies:
-    "@histoire/controls" "^0.17.17"
-    "@histoire/shared" "^0.17.17"
-    "@histoire/vendors" "^0.17.17"
-    "@types/flexsearch" "^0.7.6"
-    flexsearch "0.7.21"
-    shiki-es "^0.2.0"
-
-"@histoire/controls@^0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@histoire/controls/-/controls-0.17.17.tgz#25ab3d3c3500f783244c3f7ca6c5b7e88c8ddb0a"
-  integrity sha512-W22HZ/X078IZmE09XEKj4Fq7LxQPP/w/aMYAzm94V2NIGhI0fkiSaBDvyTUl7NYrGT66Wq5+9Po1IWPMllk3cQ==
-  dependencies:
-    "@codemirror/commands" "^6.3.0"
-    "@codemirror/lang-json" "^6.0.1"
-    "@codemirror/language" "^6.9.2"
-    "@codemirror/lint" "^6.4.2"
-    "@codemirror/state" "^6.3.1"
-    "@codemirror/theme-one-dark" "^6.1.2"
-    "@codemirror/view" "^6.22.0"
-    "@histoire/shared" "^0.17.17"
-    "@histoire/vendors" "^0.17.17"
-
-"@histoire/plugin-vue@^0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@histoire/plugin-vue/-/plugin-vue-0.17.17.tgz#65cde4685738c06edf0f36b23b93f966a1f642c3"
-  integrity sha512-O5h/Ww6IT2CygVVT4onN27IZt11Z2qE8XeHeXJCEese3dxnnVWRhjMpsaWAU5XqgfjKNAiALJk86b49/6NQaRg==
-  dependencies:
-    "@histoire/controls" "^0.17.17"
-    "@histoire/shared" "^0.17.17"
-    "@histoire/vendors" "^0.17.17"
-    change-case "^4.1.2"
-    globby "^13.2.2"
-    launch-editor "^2.6.1"
-    pathe "^1.1.1"
-
-"@histoire/shared@^0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@histoire/shared/-/shared-0.17.17.tgz#b72660f0ced7930a895aea82d567b59bb19c55c9"
-  integrity sha512-ueGtURysonT0MujCObPCR57+mgZluMEXCrbc2FBgKAD/DoAt38tNwSGsmLldk2O6nTr7lr6ClbVSgWrLwgY6Xw==
-  dependencies:
-    "@histoire/vendors" "^0.17.17"
-    "@types/fs-extra" "^9.0.13"
-    "@types/markdown-it" "^12.2.3"
-    chokidar "^3.5.3"
-    pathe "^1.1.1"
-    picocolors "^1.0.0"
-
-"@histoire/vendors@^0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@histoire/vendors/-/vendors-0.17.17.tgz#d90c6c1324b5a694673ae98731b6c85a8bd5aa01"
-  integrity sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==
-
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
@@ -549,43 +438,6 @@
     local-pkg "^1.1.1"
     mlly "^1.7.4"
 
-"@inquirer/ansi@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-1.0.2.tgz#674a4c4d81ad460695cb2a1fc69d78cd187f337e"
-  integrity sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==
-
-"@inquirer/confirm@^5.0.0":
-  version "5.1.21"
-  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-5.1.21.tgz#610c4acd7797d94890a6e2dde2c98eb1e891dd12"
-  integrity sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==
-  dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
-
-"@inquirer/core@^10.3.2":
-  version "10.3.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-10.3.2.tgz#535979ff3ff4fe1e7cc4f83e2320504c743b7e20"
-  integrity sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==
-  dependencies:
-    "@inquirer/ansi" "^1.0.2"
-    "@inquirer/figures" "^1.0.15"
-    "@inquirer/type" "^3.0.10"
-    cli-width "^4.1.0"
-    mute-stream "^2.0.0"
-    signal-exit "^4.1.0"
-    wrap-ansi "^6.2.0"
-    yoctocolors-cjs "^2.1.3"
-
-"@inquirer/figures@^1.0.15":
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.15.tgz#dbb49ed80df11df74268023b496ac5d9acd22b3a"
-  integrity sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==
-
-"@inquirer/type@^3.0.10":
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-3.0.10.tgz#11ed564ec78432a200ea2601a212d24af8150d50"
-  integrity sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==
-
 "@interactjs/types@1.10.27":
   version "1.10.27"
   resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
@@ -725,18 +577,6 @@
   resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
   integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
 
-"@mswjs/interceptors@^0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.40.0.tgz#1b45f215ba8c2983ed133763ca03af92896083d6"
-  integrity sha512-EFd6cVbHsgLa6wa4RljGj6Wk75qoHxUSyc5asLyyPSyuhIcdS2Q3Phw6ImS1q+CkALthJRShiYfKANcQMuMqsQ==
-  dependencies:
-    "@open-draft/deferred-promise" "^2.2.0"
-    "@open-draft/logger" "^0.3.0"
-    "@open-draft/until" "^2.0.0"
-    is-node-process "^1.2.0"
-    outvariant "^1.4.3"
-    strict-event-emitter "^0.5.1"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -758,34 +598,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@open-draft/deferred-promise@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz#4a822d10f6f0e316be4d67b4d4f8c9a124b073bd"
-  integrity sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==
-
-"@open-draft/logger@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@open-draft/logger/-/logger-0.3.0.tgz#2b3ab1242b360aa0adb28b85f5d7da1c133a0954"
-  integrity sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==
-  dependencies:
-    is-node-process "^1.2.0"
-    outvariant "^1.4.0"
-
-"@open-draft/until@^2.0.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
-  integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
-
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@polka/url@^1.0.0-next.24":
-  version "1.0.0-next.29"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
-  integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
-
 "@popperjs/core@^2.11.2", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1414,30 +1231,11 @@
     "@tiptap/extension-bubble-menu" "^2.27.1"
     "@tiptap/extension-floating-menu" "^2.27.1"
 
-"@tootallnate/once@2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
-  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
-
 "@types/estree@1.0.8", "@types/estree@^1.0.0":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
-"@types/flexsearch@^0.7.6":
-  version "0.7.42"
-  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.42.tgz#4c3a551f4c78db330a9a1d9e419eb8f100f80bbb"
-  integrity sha512-FdKaw3dPgcCvqU9w8SGgqx8PrxFF2EKySRhEj1nc45HNe/2cBLff3pF52C67hzeUbNhq49t7XRIIibBd41vcIg==
-  dependencies:
-    flexsearch "*"
-
-"@types/fs-extra@^9.0.13":
-  version "9.0.13"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
-  integrity sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==
-  dependencies:
-    "@types/node" "*"
-
 "@types/hast@^3.0.0":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
@@ -1450,19 +1248,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/linkify-it@*", "@types/linkify-it@^5":
+"@types/linkify-it@^5":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
-"@types/markdown-it@^12.2.3":
-  version "12.2.3"
-  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
-  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
-  dependencies:
-    "@types/linkify-it" "*"
-    "@types/mdurl" "*"
-
 "@types/markdown-it@^14.0.0":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
@@ -1471,7 +1261,7 @@
     "@types/linkify-it" "^5"
     "@types/mdurl" "^2"
 
-"@types/mdurl@*", "@types/mdurl@^2":
+"@types/mdurl@^2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
@@ -1498,11 +1288,6 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.10.tgz#277a542aff6776d8a9b15f2ac682a663e3e94bbd"
   integrity sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==
 
-"@types/statuses@^2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/statuses/-/statuses-2.0.6.tgz#66748315cc9a96d63403baa8671b2c124f8633aa"
-  integrity sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==
-
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -1554,70 +1339,6 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
   integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
 
-"@vitejs/plugin-vue@^4.0.0":
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
-  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
-
-"@vitest/expect@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.9.tgz#b566ea20d58ea6578d8dc37040d6c1a47ebe5ff8"
-  integrity sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==
-  dependencies:
-    "@vitest/spy" "2.1.9"
-    "@vitest/utils" "2.1.9"
-    chai "^5.1.2"
-    tinyrainbow "^1.2.0"
-
-"@vitest/mocker@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.9.tgz#36243b27351ca8f4d0bbc4ef91594ffd2dc25ef5"
-  integrity sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==
-  dependencies:
-    "@vitest/spy" "2.1.9"
-    estree-walker "^3.0.3"
-    magic-string "^0.30.12"
-
-"@vitest/pretty-format@2.1.9", "@vitest/pretty-format@^2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.9.tgz#434ff2f7611689f9ce70cd7d567eceb883653fdf"
-  integrity sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==
-  dependencies:
-    tinyrainbow "^1.2.0"
-
-"@vitest/runner@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.9.tgz#cc18148d2d797fd1fd5908d1f1851d01459be2f6"
-  integrity sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==
-  dependencies:
-    "@vitest/utils" "2.1.9"
-    pathe "^1.1.2"
-
-"@vitest/snapshot@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.9.tgz#24260b93f798afb102e2dcbd7e61c6dfa118df91"
-  integrity sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==
-  dependencies:
-    "@vitest/pretty-format" "2.1.9"
-    magic-string "^0.30.12"
-    pathe "^1.1.2"
-
-"@vitest/spy@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.9.tgz#cb28538c5039d09818b8bfa8edb4043c94727c60"
-  integrity sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==
-  dependencies:
-    tinyspy "^3.0.2"
-
-"@vitest/utils@2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.9.tgz#4f2486de8a54acf7ecbf2c5c24ad7994a680a6c1"
-  integrity sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==
-  dependencies:
-    "@vitest/pretty-format" "2.1.9"
-    loupe "^3.1.2"
-    tinyrainbow "^1.2.0"
-
 "@vue/compiler-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.15.tgz#7cbda69429490f4ec0f68126dd0d6eae050dd01c"
@@ -1640,17 +1361,6 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.1"
 
-"@vue/compiler-core@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.25.tgz#7ffb658d7919348baad8c491eb5b948ee8e44108"
-  integrity sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==
-  dependencies:
-    "@babel/parser" "^7.28.5"
-    "@vue/shared" "3.5.25"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.2.1"
-
 "@vue/compiler-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.15.tgz#2de7fec1a685c236585a4a1fb12cc586d7f0ffef"
@@ -1667,14 +1377,6 @@
     "@vue/compiler-core" "3.5.22"
     "@vue/shared" "3.5.22"
 
-"@vue/compiler-dom@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz#dd799ac2474cda54303039310b8994f0cfb40957"
-  integrity sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==
-  dependencies:
-    "@vue/compiler-core" "3.5.25"
-    "@vue/shared" "3.5.25"
-
 "@vue/compiler-sfc@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.15.tgz#d45a5c5171d8823c59725d31af406693c8816195"
@@ -1705,21 +1407,6 @@
     postcss "^8.5.6"
     source-map-js "^1.2.1"
 
-"@vue/compiler-sfc@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz#30377920c3869c3bb32111aa4aefad53921831ad"
-  integrity sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==
-  dependencies:
-    "@babel/parser" "^7.28.5"
-    "@vue/compiler-core" "3.5.25"
-    "@vue/compiler-dom" "3.5.25"
-    "@vue/compiler-ssr" "3.5.25"
-    "@vue/shared" "3.5.25"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.21"
-    postcss "^8.5.6"
-    source-map-js "^1.2.1"
-
 "@vue/compiler-ssr@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.15.tgz#b6ffbb19ff7126fc0e60cbf9c4ca34d9a9ce9fb2"
@@ -1736,14 +1423,6 @@
     "@vue/compiler-dom" "3.5.22"
     "@vue/shared" "3.5.22"
 
-"@vue/compiler-ssr@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.25.tgz#51dd89b88a1e044d1beab158c91a29963d28eb96"
-  integrity sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==
-  dependencies:
-    "@vue/compiler-dom" "3.5.25"
-    "@vue/shared" "3.5.25"
-
 "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
@@ -1763,13 +1442,6 @@
   dependencies:
     "@vue/shared" "3.5.22"
 
-"@vue/reactivity@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.25.tgz#2420fa02022dab3373033c955802b9cdab5435ad"
-  integrity sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==
-  dependencies:
-    "@vue/shared" "3.5.25"
-
 "@vue/runtime-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.15.tgz#0accac4b441bb4aa00f58ba353b6f61e83f45202"
@@ -1786,14 +1458,6 @@
     "@vue/reactivity" "3.5.22"
     "@vue/shared" "3.5.22"
 
-"@vue/runtime-core@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.25.tgz#5e524db201b419db6f091db440452fe4e49efdee"
-  integrity sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==
-  dependencies:
-    "@vue/reactivity" "3.5.25"
-    "@vue/shared" "3.5.25"
-
 "@vue/runtime-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.15.tgz#048b725069f6d3fe5002e53eba118466d1fbec84"
@@ -1814,16 +1478,6 @@
     "@vue/shared" "3.5.22"
     csstype "^3.1.3"
 
-"@vue/runtime-dom@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.25.tgz#ebd9815f39ee70fe32698c615cc09bda604e4e06"
-  integrity sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==
-  dependencies:
-    "@vue/reactivity" "3.5.25"
-    "@vue/runtime-core" "3.5.25"
-    "@vue/shared" "3.5.25"
-    csstype "^3.1.3"
-
 "@vue/server-renderer@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.15.tgz#c1e8597e4bec8ea0b323c32dc032aa5c1f2983f4"
@@ -1840,14 +1494,6 @@
     "@vue/compiler-ssr" "3.5.22"
     "@vue/shared" "3.5.22"
 
-"@vue/server-renderer@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.25.tgz#ca67ac93cb84dd3c3bc2f89c046a18ab04f7cc96"
-  integrity sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==
-  dependencies:
-    "@vue/compiler-ssr" "3.5.25"
-    "@vue/shared" "3.5.25"
-
 "@vue/shared@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.15.tgz#4c633a0e66f38119e38eecf340b4a65b0bad7192"
@@ -1858,11 +1504,6 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.22.tgz#9d56a1644a3becb8af1e34655928b0e288d827f8"
   integrity sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==
 
-"@vue/shared@3.5.25":
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.25.tgz#21edcff133a5a04f72c4e4c6142260963fe5afbe"
-  integrity sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==
-
 "@vueuse/components@^10.2.1":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
@@ -1916,43 +1557,16 @@
   dependencies:
     vue "^3.5.13"
 
-abab@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
-  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
-
-acorn-globals@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
-  integrity sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==
-  dependencies:
-    acorn "^8.1.0"
-    acorn-walk "^8.0.2"
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^8.0.2:
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
-  integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
-  dependencies:
-    acorn "^8.11.0"
-
-acorn@^8.1.0, acorn@^8.11.0, acorn@^8.14.1, acorn@^8.15.0, acorn@^8.8.1, acorn@^8.9.0:
+acorn@^8.14.1, acorn@^8.15.0, acorn@^8.9.0:
   version "8.15.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
-agent-base@6:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
-  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
-  dependencies:
-    debug "4"
-
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -2035,13 +1649,6 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -2134,11 +1741,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
-assertion-error@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
-  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
-
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -2164,17 +1766,6 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10.4.13:
-  version "10.4.23"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.23.tgz#c6aa6db8e7376fcd900f9fd79d143ceebad8c4e6"
-  integrity sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==
-  dependencies:
-    browserslist "^4.28.1"
-    caniuse-lite "^1.0.30001760"
-    fraction.js "^5.3.4"
-    picocolors "^1.1.1"
-    postcss-value-parser "^4.2.0"
-
 autoprefixer@^10.4.2:
   version "10.4.21"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.21.tgz#77189468e7a8ad1d9a37fbc08efc9f480cf0a95d"
@@ -2219,11 +1810,6 @@ baseline-browser-mapping@^2.8.3:
   resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz#4d3606fdb1738fd902da40c5fcc0595e87cec044"
   integrity sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==
 
-baseline-browser-mapping@^2.9.0:
-  version "2.9.7"
-  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz#d36ce64f2a2c468f6f743c8db495d319120007db"
-  integrity sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -2236,11 +1822,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-birpc@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.1.1.tgz#10b243ffe5a21ccaf4cbaf5a09a6f0cc035c4312"
-  integrity sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==
-
 bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -2298,17 +1879,6 @@ browserslist@^4.24.4:
     node-releases "^2.0.21"
     update-browserslist-db "^1.1.3"
 
-browserslist@^4.28.1:
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.1.tgz#7f534594628c53c63101079e27e40de490456a95"
-  integrity sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==
-  dependencies:
-    baseline-browser-mapping "^2.9.0"
-    caniuse-lite "^1.0.30001759"
-    electron-to-chromium "^1.5.263"
-    node-releases "^2.0.27"
-    update-browserslist-db "^1.2.0"
-
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -2322,11 +1892,6 @@ buffer@^5.5.0, buffer@^5.7.1:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-cac@^6.7.14:
-  version "6.7.14"
-  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
-  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
-
 cachedir@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.4.0.tgz#7fef9cf7367233d7c88068fe6e34ed0d355a610d"
@@ -2363,14 +1928,6 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
-  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
-  dependencies:
-    pascal-case "^3.1.2"
-    tslib "^2.0.3"
-
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
@@ -2381,36 +1938,11 @@ caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001741:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz#ab2a36e3b6ed5bfb268adc002c476aab6513f859"
   integrity sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==
 
-caniuse-lite@^1.0.30001759, caniuse-lite@^1.0.30001760:
-  version "1.0.30001760"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz#bdd1960fafedf8d5f04ff16e81460506ff9b798f"
-  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
-
-capital-case@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
-  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-    upper-case-first "^2.0.2"
-
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-chai@^5.1.2:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-5.3.3.tgz#dd3da955e270916a4bd3f625f4b919996ada7e06"
-  integrity sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==
-  dependencies:
-    assertion-error "^2.0.1"
-    check-error "^2.1.1"
-    deep-eql "^5.0.1"
-    loupe "^3.1.0"
-    pathval "^2.0.0"
-
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -2424,35 +1956,12 @@ chalk@^5.4.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.6.2.tgz#b1238b6e23ea337af71c7f8a295db5af0c158aea"
   integrity sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
 
-change-case@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
-  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
-  dependencies:
-    camel-case "^4.1.2"
-    capital-case "^1.0.4"
-    constant-case "^3.0.4"
-    dot-case "^3.0.4"
-    header-case "^2.0.4"
-    no-case "^3.0.4"
-    param-case "^3.0.4"
-    pascal-case "^3.1.2"
-    path-case "^3.0.4"
-    sentence-case "^3.0.4"
-    snake-case "^3.0.4"
-    tslib "^2.0.3"
-
-check-error@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
-  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
-
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-chokidar@^3.5.3, chokidar@^3.6.0:
+chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -2526,20 +2035,6 @@ cli-truncate@^4.0.0:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
-cli-width@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
-  integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
-
-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
-
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -2617,30 +2112,6 @@ confbox@^0.2.2:
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.2.tgz#8652f53961c74d9e081784beed78555974a9c110"
   integrity sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==
 
-connect@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
-  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
-  dependencies:
-    debug "2.6.9"
-    finalhandler "1.1.2"
-    parseurl "~1.3.3"
-    utils-merge "1.0.1"
-
-constant-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
-  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-    upper-case "^2.0.2"
-
-cookie@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.1.1.tgz#3bb9bdfc82369db9c2f69c93c9c3ceb310c88b3c"
-  integrity sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==
-
 core-js@^3.1.3:
   version "3.45.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.45.1.tgz#5810e04a1b4e9bc5ddaa4dd12e702ff67300634d"
@@ -2670,23 +2141,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssom@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
-
-cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
-cssstyle@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
-  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
-  dependencies:
-    cssom "~0.3.6"
-
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -2748,15 +2202,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-urls@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
-  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
-  dependencies:
-    abab "^2.0.6"
-    whatwg-mimetype "^3.0.0"
-    whatwg-url "^11.0.0"
-
 data-view-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
@@ -2789,27 +2234,20 @@ dayjs@^1.10.4, dayjs@^1.11.13:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.18.tgz#835fa712aac52ab9dec8b1494098774ed7070a11"
   integrity sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
 
-debug@2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+debug@^3.1.0, debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
-    ms "2.0.0"
+    ms "^2.1.1"
 
-debug@4, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.7, debug@^4.4.0, debug@^4.4.1:
+debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0, debug@^4.4.1:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
   dependencies:
     ms "^2.1.3"
 
-debug@^3.1.0, debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@~4.3.1, debug@~4.3.2:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
@@ -2817,16 +2255,6 @@ debug@~4.3.1, debug@~4.3.2:
   dependencies:
     ms "^2.1.3"
 
-decimal.js@^10.4.2:
-  version "10.6.0"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
-  integrity sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==
-
-deep-eql@^5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
-  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -2857,7 +2285,7 @@ define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.1.3, defu@^6.1.4:
+defu@^6.1.4:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
   integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
@@ -2879,23 +2307,11 @@ devlop@^1.0.0:
   dependencies:
     dequal "^2.0.0"
 
-diacritics@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1"
-  integrity sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
 dlv@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -2915,13 +2331,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-domexception@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
-  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
-  dependencies:
-    webidl-conversions "^7.0.0"
-
 dompurify@^3.2.6:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.3.1.tgz#c7e1ddebfe3301eacd6c0c12a4af284936dbbb86"
@@ -2929,14 +2338,6 @@ dompurify@^3.2.6:
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
-dot-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
-  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -2967,21 +2368,11 @@ echarts@^5.6.0:
     tslib "2.3.0"
     zrender "5.6.1"
 
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
-
 electron-to-chromium@^1.5.218:
   version "1.5.224"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz#dbc6827cb3d41d7293811d6d8af53114804e0ed1"
   integrity sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg==
 
-electron-to-chromium@^1.5.263:
-  version "1.5.267"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz#5d84f2df8cdb6bfe7e873706bb21bd4bfb574dc7"
-  integrity sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==
-
 emoji-regex@^10.3.0:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
@@ -2997,11 +2388,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
-
 end-of-stream@^1.1.0:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c"
@@ -3038,16 +2424,6 @@ entities@^4.4.0, entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-entities@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
-  integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
-
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
 environment@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
@@ -3123,11 +2499,6 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-module-lexer@^1.5.4:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz#9159601561880a85f2734560a9099b2c31e5372a"
-  integrity sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
-
 es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
@@ -3190,16 +2561,11 @@ esbuild@^0.21.3:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-escalade@^3.1.1, escalade@^3.2.0:
+escalade@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
-escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
-
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3215,17 +2581,6 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-escodegen@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
-  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^5.2.0"
-    esutils "^2.0.2"
-  optionalDependencies:
-    source-map "~0.6.1"
-
 eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -3347,11 +2702,6 @@ espree@^9.3.1, espree@^9.6.0, espree@^9.6.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.1"
 
-esprima@^4.0.0, esprima@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
 esquery@^1.4.0, esquery@^1.4.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
@@ -3435,23 +2785,11 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
-expect-type@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-1.3.0.tgz#0d58ed361877a31bbc4dd6cf71bbfef7faf6bd68"
-  integrity sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==
-
 exsolve@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.7.tgz#3b74e4c7ca5c5f9a19c3626ca857309fa99f9e9e"
   integrity sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
 
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
-  dependencies:
-    is-extendable "^0.1.0"
-
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -3483,7 +2821,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.0, fast-glob@^3.3.2:
+fast-glob@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -3552,19 +2890,6 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -3587,16 +2912,6 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
-flexsearch@*:
-  version "0.8.212"
-  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.8.212.tgz#b9509af778a991b938292e36fe0809a4ece4b940"
-  integrity sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==
-
-flexsearch@0.7.21:
-  version "0.7.21"
-  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.21.tgz#0f5ede3f2aae67ddc351efbe3b24b69d29e9d48b"
-  integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
-
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
@@ -3617,17 +2932,6 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
-form-data@^4.0.0:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"
-  integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.8"
-    es-set-tostringtag "^2.1.0"
-    hasown "^2.0.2"
-    mime-types "^2.1.12"
-
 form-data@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
@@ -3644,19 +2948,62 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-fraction.js@^5.3.4:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
-  integrity sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==
-
-fs-extra@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
-  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+frappe-ui@0.1.243:
+  version "0.1.243"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.243.tgz#12c3d1f6e73459a909e93b2ff20fe9ad86eb4a1a"
+  integrity sha512-X4vLXKA0NxomdRuj5bUGFp3g4iVqs+XugPrmCKdzHnN/dP0ImcgscGY4zmioMAEQU8F5BcbBzr0WR9vnqunfng==
   dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
+    "@floating-ui/vue" "^1.1.6"
+    "@headlessui/vue" "^1.7.14"
+    "@popperjs/core" "^2.11.2"
+    "@tailwindcss/forms" "^0.5.3"
+    "@tailwindcss/line-clamp" "^0.4.4"
+    "@tailwindcss/typography" "^0.5.16"
+    "@tiptap/core" "^2.26.1"
+    "@tiptap/extension-code" "^2.26.1"
+    "@tiptap/extension-code-block" "^2.26.1"
+    "@tiptap/extension-code-block-lowlight" "^2.26.1"
+    "@tiptap/extension-color" "^2.26.1"
+    "@tiptap/extension-heading" "^2.26.1"
+    "@tiptap/extension-highlight" "^2.26.1"
+    "@tiptap/extension-image" "^2.26.1"
+    "@tiptap/extension-link" "^2.26.1"
+    "@tiptap/extension-mention" "^2.26.1"
+    "@tiptap/extension-placeholder" "^2.26.1"
+    "@tiptap/extension-table" "^2.26.1"
+    "@tiptap/extension-table-cell" "^2.26.1"
+    "@tiptap/extension-table-header" "^2.26.1"
+    "@tiptap/extension-table-row" "^2.26.1"
+    "@tiptap/extension-task-item" "^2.26.1"
+    "@tiptap/extension-task-list" "^2.26.1"
+    "@tiptap/extension-text-align" "^2.26.1"
+    "@tiptap/extension-text-style" "^2.26.1"
+    "@tiptap/extension-typography" "^2.26.1"
+    "@tiptap/pm" "^2.26.1"
+    "@tiptap/starter-kit" "^2.26.1"
+    "@tiptap/suggestion" "^2.26.1"
+    "@tiptap/vue-3" "^2.26.1"
+    "@vueuse/core" "^10.4.1"
+    dayjs "^1.11.13"
+    dompurify "^3.2.6"
+    echarts "^5.6.0"
+    feather-icons "^4.28.0"
+    grid-layout-plus "^1.1.0"
+    highlight.js "^11.11.1"
+    idb-keyval "^6.2.0"
+    lowlight "^3.3.0"
+    lucide-static "^0.535.0"
+    marked "^15.0.12"
+    ora "5.4.1"
+    prettier "^3.3.2"
+    radix-vue "^1.5.3"
+    reka-ui "^2.5.0"
+    socket.io-client "^4.5.1"
+    tippy.js "^6.3.7"
+    typescript "^5.0.2"
+    unplugin-auto-import "^19.3.0"
+    unplugin-icons "^22.1.0"
+    unplugin-vue-components "^28.4.1"
 
 fs-extra@^9.1.0:
   version "9.1.0"
@@ -3700,11 +3047,6 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-get-caller-file@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
 get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
@@ -3834,17 +3176,6 @@ globalthis@^1.0.4:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
-globby@^13.2.2:
-  version "13.2.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
-  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
-  dependencies:
-    dir-glob "^3.0.1"
-    fast-glob "^3.3.0"
-    ignore "^5.2.4"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
 gopd@^1.0.1, gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
@@ -3860,21 +3191,6 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-graphql@^16.12.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.12.0.tgz#28cc2462435b1ac3fdc6976d030cef83a0c13ac7"
-  integrity sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==
-
-gray-matter@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
-  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
-  dependencies:
-    js-yaml "^3.13.1"
-    kind-of "^6.0.2"
-    section-matter "^1.0.0"
-    strip-bom-string "^1.0.0"
-
 grid-layout-plus@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/grid-layout-plus/-/grid-layout-plus-1.1.1.tgz#129f1dd6ba555a1d319d73e415821ae4fb6c35c8"
@@ -3927,77 +3243,11 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-header-case@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
-  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
-  dependencies:
-    capital-case "^1.0.4"
-    tslib "^2.0.3"
-
-headers-polyfill@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-4.0.3.tgz#922a0155de30ecc1f785bcf04be77844ca95ad07"
-  integrity sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==
-
 highlight.js@^11.11.1, highlight.js@~11.11.0:
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
   integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
 
-histoire@^0.17.17:
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/histoire/-/histoire-0.17.17.tgz#3325344d0e3342938de38175ad82d91dec4fd235"
-  integrity sha512-DAwY4sgIoP7NGE5ldaws2d3RWz4OOQcwhS8elRMiA2euqzLvDU2IXm+ZjeDDFVtGkvmQNQyfZBDKLCLHfRkSUg==
-  dependencies:
-    "@akryum/tinypool" "^0.3.1"
-    "@histoire/app" "^0.17.17"
-    "@histoire/controls" "^0.17.17"
-    "@histoire/shared" "^0.17.17"
-    "@histoire/vendors" "^0.17.17"
-    "@types/flexsearch" "^0.7.6"
-    "@types/markdown-it" "^12.2.3"
-    birpc "^0.1.1"
-    change-case "^4.1.2"
-    chokidar "^3.5.3"
-    connect "^3.7.0"
-    defu "^6.1.3"
-    diacritics "^1.3.0"
-    flexsearch "0.7.21"
-    fs-extra "^10.1.0"
-    globby "^13.2.2"
-    gray-matter "^4.0.3"
-    jiti "^1.21.0"
-    jsdom "^20.0.3"
-    markdown-it "^12.3.2"
-    markdown-it-anchor "^8.6.7"
-    markdown-it-attrs "^4.1.6"
-    markdown-it-emoji "^2.0.2"
-    micromatch "^4.0.5"
-    mrmime "^1.0.1"
-    pathe "^1.1.1"
-    picocolors "^1.0.0"
-    sade "^1.8.1"
-    shiki-es "^0.2.0"
-    sirv "^2.0.3"
-    vite-node "^0.34.6"
-
-html-encoding-sniffer@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
-  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
-  dependencies:
-    whatwg-encoding "^2.0.0"
-
-http-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
-  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
-  dependencies:
-    "@tootallnate/once" "2"
-    agent-base "6"
-    debug "4"
-
 http-signature@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
@@ -4007,14 +3257,6 @@ http-signature@~1.4.0:
     jsprim "^2.0.2"
     sshpk "^1.18.0"
 
-https-proxy-agent@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
-  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
-  dependencies:
-    agent-base "6"
-    debug "4"
-
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -4025,13 +3267,6 @@ human-signals@^5.0.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
-iconv-lite@0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
-  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3.0.0"
-
 idb-keyval@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.2.tgz#b0171b5f73944854a3291a5cdba8e12768c4854a"
@@ -4042,7 +3277,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.2.0:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -4170,11 +3405,6 @@ is-date-object@^1.0.5, is-date-object@^1.1.0:
     call-bound "^1.0.2"
     has-tostringtag "^1.0.2"
 
-is-extendable@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -4244,11 +3474,6 @@ is-negative-zero@^2.0.3:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
-is-node-process@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-node-process/-/is-node-process-1.2.0.tgz#ea02a1b90ddb3934a19aea414e88edef7e11d134"
-  integrity sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==
-
 is-number-object@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
@@ -4267,11 +3492,6 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-potential-custom-element-name@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
-  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
-
 is-regex@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
@@ -4382,7 +3602,7 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.0, jiti@^1.21.6, jiti@^1.21.7:
+jiti@^1.21.6:
   version "1.21.7"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
   integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
@@ -4392,14 +3612,6 @@ js-tokens@^9.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
   integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
 
-js-yaml@^3.13.1:
-  version "3.14.2"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.2.tgz#77485ce1dd7f33c061fd1b16ecea23b55fcb04b0"
-  integrity sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -4412,38 +3624,6 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
-jsdom@^20.0.3:
-  version "20.0.3"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
-  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
-  dependencies:
-    abab "^2.0.6"
-    acorn "^8.8.1"
-    acorn-globals "^7.0.0"
-    cssom "^0.5.0"
-    cssstyle "^2.3.0"
-    data-urls "^3.0.2"
-    decimal.js "^10.4.2"
-    domexception "^4.0.0"
-    escodegen "^2.0.0"
-    form-data "^4.0.0"
-    html-encoding-sniffer "^3.0.0"
-    http-proxy-agent "^5.0.0"
-    https-proxy-agent "^5.0.1"
-    is-potential-custom-element-name "^1.0.1"
-    nwsapi "^2.2.2"
-    parse5 "^7.1.1"
-    saxes "^6.0.0"
-    symbol-tree "^3.2.4"
-    tough-cookie "^4.1.2"
-    w3c-xmlserializer "^4.0.0"
-    webidl-conversions "^7.0.0"
-    whatwg-encoding "^2.0.0"
-    whatwg-mimetype "^3.0.0"
-    whatwg-url "^11.0.0"
-    ws "^8.11.0"
-    xml-name-validator "^4.0.0"
-
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -4502,24 +3682,11 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
 kolorist@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 
-launch-editor@^2.6.1:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.12.0.tgz#cc740f4e0263a6b62ead2485f9896e545321f817"
-  integrity sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==
-  dependencies:
-    picocolors "^1.1.1"
-    shell-quote "^1.8.3"
-
 lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -4533,7 +3700,7 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^3.0.0, lilconfig@^3.1.1, lilconfig@^3.1.3:
+lilconfig@^3.0.0, lilconfig@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
@@ -4543,13 +3710,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkify-it@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
-  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
-  dependencies:
-    uc.micro "^1.0.1"
-
 linkify-it@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
@@ -4562,7 +3722,7 @@ linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
-lint-staged@>=10, lint-staged@^15.2.10:
+lint-staged@^15.2.10:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
   integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==
@@ -4664,18 +3824,6 @@ log-update@^6.1.0:
     strip-ansi "^7.1.0"
     wrap-ansi "^9.0.0"
 
-loupe@^3.1.0, loupe@^3.1.2:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.2.1.tgz#0095cf56dc5b7a9a7c08ff5b1a8796ec8ad17e76"
-  integrity sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==
-
-lower-case@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
-  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
-  dependencies:
-    tslib "^2.0.3"
-
 lowlight@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.3.0.tgz#007b8a5bfcfd27cc65b96246d2de3e9dd4e23c6c"
@@ -4695,13 +3843,6 @@ lucide-static@^0.535.0:
   resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.535.0.tgz#3d8ad25360d166a4f584d97f2c08fd9b24be30d7"
   integrity sha512-wlYTSPpeyMjLjQ5jgSAENQwVfURVf2XHV5TDp8YPCJBEyWz+FJGuGB5LYBgOFvWIDOMW+AIoiA8sNd8My/nxlw==
 
-magic-string@^0.30.12, magic-string@^0.30.21:
-  version "0.30.21"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
-  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.5.5"
-
 magic-string@^0.30.17, magic-string@^0.30.19:
   version "0.30.19"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.19.tgz#cebe9f104e565602e5d2098c5f2e79a77cc86da9"
@@ -4709,32 +3850,6 @@ magic-string@^0.30.17, magic-string@^0.30.19:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.5"
 
-markdown-it-anchor@^8.6.7:
-  version "8.6.7"
-  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz#ee6926daf3ad1ed5e4e3968b1740eef1c6399634"
-  integrity sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==
-
-markdown-it-attrs@^4.1.6:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz#1e1f9bd2c87276d8f4ed74ad4268df428b7deee6"
-  integrity sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==
-
-markdown-it-emoji@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.2.tgz#cd42421c2fda1537d9cc12b9923f5c8aeb9029c8"
-  integrity sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
-
-markdown-it@^12.3.2:
-  version "12.3.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
-  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
 markdown-it@^14.0.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
@@ -4757,11 +3872,6 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
-
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -4772,12 +3882,12 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0, merge2@^1.4.1:
+merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.5, micromatch@^4.0.8:
+micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -4841,7 +3951,7 @@ minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-mlly@^1.4.0, mlly@^1.7.4:
+mlly@^1.7.4:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.0.tgz#e074612b938af8eba1eaf43299cbc89cb72d824e"
   integrity sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==
@@ -4851,60 +3961,11 @@ mlly@^1.4.0, mlly@^1.7.4:
     pkg-types "^1.3.1"
     ufo "^1.6.1"
 
-mri@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
-  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
-
-mrmime@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
-  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
-
-mrmime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
-  integrity sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
-
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msw@^2.7.0:
-  version "2.12.4"
-  resolved "https://registry.yarnpkg.com/msw/-/msw-2.12.4.tgz#9a7045a6ef831826f57f4050552ca41dd21fe0d4"
-  integrity sha512-rHNiVfTyKhzc0EjoXUBVGteNKBevdjOlVC6GlIRXpy+/3LHEIGRovnB5WPjcvmNODVQ1TNFnoa7wsGbd0V3epg==
-  dependencies:
-    "@inquirer/confirm" "^5.0.0"
-    "@mswjs/interceptors" "^0.40.0"
-    "@open-draft/deferred-promise" "^2.2.0"
-    "@types/statuses" "^2.0.6"
-    cookie "^1.0.2"
-    graphql "^16.12.0"
-    headers-polyfill "^4.0.2"
-    is-node-process "^1.2.0"
-    outvariant "^1.4.3"
-    path-to-regexp "^6.3.0"
-    picocolors "^1.1.1"
-    rettime "^0.7.0"
-    statuses "^2.0.2"
-    strict-event-emitter "^0.5.1"
-    tough-cookie "^6.0.0"
-    type-fest "^5.2.0"
-    until-async "^3.0.2"
-    yargs "^17.7.2"
-
-mute-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-2.0.0.tgz#a5446fc0c512b71c83c44d908d5c7b7b4c493b2b"
-  integrity sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==
-
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -4929,24 +3990,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-no-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
-  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
-  dependencies:
-    lower-case "^2.0.2"
-    tslib "^2.0.3"
-
 node-releases@^2.0.21:
   version "2.0.21"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.21.tgz#f59b018bc0048044be2d4c4c04e4c8b18160894c"
   integrity sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==
 
-node-releases@^2.0.27:
-  version "2.0.27"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.27.tgz#eedca519205cf20f650f61d56b070db111231e4e"
-  integrity sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -4978,11 +4026,6 @@ nth-check@^2.1.1:
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.2:
-  version "2.2.23"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.23.tgz#59712c3a88e6de2bb0b6ccc1070397267019cf6c"
-  integrity sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==
-
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -5049,13 +4092,6 @@ ohash@^2.0.11:
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-2.0.11.tgz#60b11e8cff62ca9dee88d13747a5baa145f5900b"
   integrity sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==
 
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
-  dependencies:
-    ee-first "1.1.1"
-
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -5129,11 +4165,6 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
 
-outvariant@^1.4.0, outvariant@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
-  integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
-
 own-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
@@ -5174,14 +4205,6 @@ package-manager-detector@^1.3.0:
   resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-1.3.0.tgz#b42d641c448826e03c2b354272456a771ce453c0"
   integrity sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==
 
-param-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
-  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5189,34 +4212,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse5@^7.1.1:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.3.0.tgz#d7e224fa72399c7a175099f45fc2ad024b05ec05"
-  integrity sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==
-  dependencies:
-    entities "^6.0.0"
-
-parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-pascal-case@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
-  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
-path-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
-  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -5250,31 +4245,11 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-to-regexp@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.3.0.tgz#2b6a26a337737a8e1416f9272ed0766b1c0389f4"
-  integrity sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pathe@^1.1.1, pathe@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
-  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
-
 pathe@^2.0.1, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
   integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
 
-pathval@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.1.tgz#8855c5a2899af072d6ac05d11e46045ad0dc605d"
-  integrity sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -5285,7 +4260,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^1.0.0, picocolors@^1.1.1:
+picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -5370,13 +4345,6 @@ postcss-load-config@^4.0.2:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
-"postcss-load-config@^4.0.2 || ^5.0 || ^6.0":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz#6fd7dcd8ae89badcf1b2d644489cbabf83aa8096"
-  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
-  dependencies:
-    lilconfig "^3.1.1"
-
 postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
@@ -5405,7 +4373,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.21, postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
+postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
   integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -5419,11 +4387,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-tailwindcss@^0.1.13:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
-  integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
-
 prettier-plugin-tailwindcss@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz#e9c0356680331f909a86fefe8fc2b247c21e23a2"
@@ -5608,13 +4571,6 @@ proxy-from-env@1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
   integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==
 
-psl@^1.1.33:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
-  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
-  dependencies:
-    punycode "^2.3.1"
-
 pump@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.3.tgz#151d979f1a29668dc0025ec589a455b53282268d"
@@ -5628,7 +4584,7 @@ punycode.js@^2.3.1:
   resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
   integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
-punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
+punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
@@ -5645,11 +4601,6 @@ quansync@^0.2.11:
   resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.11.tgz#f9c3adda2e1272e4f8cf3f1457b04cbdb4ee692a"
   integrity sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
 
-querystringify@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
-  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
-
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -5744,16 +4695,6 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
-
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -5784,11 +4725,6 @@ restore-cursor@^5.0.0:
     onetime "^7.0.0"
     signal-exit "^4.1.0"
 
-rettime@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/rettime/-/rettime-0.7.0.tgz#c040f1a65e396eaa4b8346dd96ed937edc79d96f"
-  integrity sha512-LPRKoHnLKd/r3dVxcwO7vhCW+orkOGj9ViueosEBK6ie89CijnfRlhaDhHq/3Hxu4CkWQtxwlBG0mzTQY6uQjw==
-
 reusify@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.1.0.tgz#0fe13b9522e1473f51b558ee796e08f11f9b489f"
@@ -5856,13 +4792,6 @@ rxjs@^7.5.1:
   dependencies:
     tslib "^2.1.0"
 
-sade@^1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
-  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
-  dependencies:
-    mri "^1.1.0"
-
 safe-array-concat@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
@@ -5896,31 +4825,16 @@ safe-regex-test@^1.1.0:
     es-errors "^1.3.0"
     is-regex "^1.2.1"
 
-"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-saxes@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
-  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
-  dependencies:
-    xmlchars "^2.2.0"
-
 scule@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/scule/-/scule-1.3.0.tgz#6efbd22fd0bb801bdcc585c89266a7d2daa8fbd3"
   integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
 
-section-matter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
-  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
-  dependencies:
-    extend-shallow "^2.0.1"
-    kind-of "^6.0.0"
-
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -5931,15 +4845,6 @@ semver@^7.3.6, semver@^7.5.3, semver@^7.6.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
   integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
 
-sentence-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
-  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-    upper-case-first "^2.0.2"
-
 set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -5983,16 +4888,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
-  integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
-
-shiki-es@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/shiki-es/-/shiki-es-0.2.0.tgz#ae5bced62dca0ba46ee81149e68d428565a3e6fb"
-  integrity sha512-RbRMD+IuJJseSZljDdne9ThrUYrwBwJR04FvN4VXpfsU3MNID5VJGHLAD5je/HGThCyEKNgH+nEkSFEWKD7C3Q==
-
 side-channel-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
@@ -6033,11 +4928,6 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
-siginfo@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
-  integrity sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==
-
 signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -6048,20 +4938,6 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-sirv@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
-  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
-  dependencies:
-    "@polka/url" "^1.0.0-next.24"
-    mrmime "^2.0.0"
-    totalist "^3.0.0"
-
-slash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
-  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
-
 slice-ansi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
@@ -6096,14 +4972,6 @@ slice-ansi@^7.1.0:
     ansi-styles "^6.2.1"
     is-fullwidth-code-point "^5.0.0"
 
-snake-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
-  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
-
 socket.io-client@^4.5.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"
@@ -6132,16 +5000,6 @@ source-map-js@^1.2.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
-
 sshpk@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
@@ -6157,26 +5015,6 @@ sshpk@^1.18.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-stackback@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
-  integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==
-
-statuses@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.2.tgz#8f75eecef765b5e1cfcdc080da59409ed424e382"
-  integrity sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==
-
-statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
-
-std-env@^3.8.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.10.0.tgz#d810b27e3a073047b2b5e40034881f5ea6f9c83b"
-  integrity sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==
-
 stop-iteration-iterator@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
@@ -6185,26 +5023,12 @@ stop-iteration-iterator@^1.1.0:
     es-errors "^1.3.0"
     internal-slot "^1.1.0"
 
-strict-event-emitter@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz#1602ece81c51574ca39c6815e09f1a3e8550bd93"
-  integrity sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==
-
 string-argv@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6275,14 +5099,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6296,11 +5113,6 @@ strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   dependencies:
     ansi-regex "^6.0.1"
 
-strip-bom-string@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
-  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -6365,44 +5177,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-symbol-tree@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
-  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
-
-tagged-tag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/tagged-tag/-/tagged-tag-1.0.0.tgz#a0b5917c2864cba54841495abfa3f6b13edcf4d6"
-  integrity sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==
-
-tailwindcss@^3.2.7:
-  version "3.4.19"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.19.tgz#af2a0a4ae302d52ebe078b6775e799e132500ee2"
-  integrity sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==
-  dependencies:
-    "@alloc/quick-lru" "^5.2.0"
-    arg "^5.0.2"
-    chokidar "^3.6.0"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.3.2"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    jiti "^1.21.7"
-    lilconfig "^3.1.3"
-    micromatch "^4.0.8"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.1.1"
-    postcss "^8.4.47"
-    postcss-import "^15.1.0"
-    postcss-js "^4.0.1"
-    postcss-load-config "^4.0.2 || ^5.0 || ^6.0"
-    postcss-nested "^6.2.0"
-    postcss-selector-parser "^6.1.2"
-    resolve "^1.22.8"
-    sucrase "^3.35.0"
-
 tailwindcss@^3.3.2:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
@@ -6470,16 +5244,6 @@ tiny-inflate@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
-tinybench@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.9.0.tgz#103c9f8ba6d7237a47ab6dd1dcff77251863426b"
-  integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
-
-tinyexec@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
-  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
-
 tinyexec@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.0.1.tgz#70c31ab7abbb4aea0a24f55d120e5990bfa1e0b1"
@@ -6493,21 +5257,6 @@ tinyglobby@^0.2.12, tinyglobby@^0.2.14:
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
-tinypool@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.1.1.tgz#059f2d042bd37567fbc017d3d426bdd2a2612591"
-  integrity sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==
-
-tinyrainbow@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
-  integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==
-
-tinyspy@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
-  integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
-
 tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
@@ -6520,11 +5269,6 @@ tldts-core@^6.1.86:
   resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.86.tgz#a93e6ed9d505cb54c542ce43feb14c73913265d8"
   integrity sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==
 
-tldts-core@^7.0.19:
-  version "7.0.19"
-  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-7.0.19.tgz#9dd8a457a09b4e65c8266c029f1847fa78dead20"
-  integrity sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==
-
 tldts@^6.1.32:
   version "6.1.86"
   resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.86.tgz#087e0555b31b9725ee48ca7e77edc56115cd82f7"
@@ -6532,13 +5276,6 @@ tldts@^6.1.32:
   dependencies:
     tldts-core "^6.1.86"
 
-tldts@^7.0.5:
-  version "7.0.19"
-  resolved "https://registry.yarnpkg.com/tldts/-/tldts-7.0.19.tgz#84cd7a7f04e68ec93b93b106fac038c527b99368"
-  integrity sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==
-  dependencies:
-    tldts-core "^7.0.19"
-
 tmp@~0.2.3:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.5.tgz#b06bcd23f0f3c8357b426891726d16015abfd8f8"
@@ -6551,21 +5288,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-totalist@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
-  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
-
-tough-cookie@^4.1.2:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
-  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
-  dependencies:
-    psl "^1.1.33"
-    punycode "^2.1.1"
-    universalify "^0.2.0"
-    url-parse "^1.5.3"
-
 tough-cookie@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.1.2.tgz#66d774b4a1d9e12dc75089725af3ac75ec31bed7"
@@ -6573,20 +5295,6 @@ tough-cookie@^5.0.0:
   dependencies:
     tldts "^6.1.32"
 
-tough-cookie@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-6.0.0.tgz#11e418b7864a2c0d874702bc8ce0f011261940e5"
-  integrity sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==
-  dependencies:
-    tldts "^7.0.5"
-
-tr46@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
-  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
-  dependencies:
-    punycode "^2.1.1"
-
 tree-kill@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -6612,7 +5320,7 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -6646,13 +5354,6 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-type-fest@^5.2.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-5.3.1.tgz#251b8d0a813c1dbccf1f9450ba5adcdf7072adc2"
-  integrity sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==
-  dependencies:
-    tagged-tag "^1.0.0"
-
 typed-array-buffer@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
@@ -6703,11 +5404,6 @@ typescript@^5.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.2.tgz#d93450cddec5154a2d5cabe3b8102b83316fb2a6"
   integrity sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==
 
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
@@ -6753,21 +5449,11 @@ unimport@^4.2.0:
     unplugin "^2.2.2"
     unplugin-utils "^0.2.4"
 
-universalify@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
-  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
-
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
-unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
-
 unplugin-auto-import@^19.3.0:
   version "19.3.0"
   resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-19.3.0.tgz#4fbfef17c87919889f5ba2167afac50f50a015f4"
@@ -6833,11 +5519,6 @@ unplugin@^2.3.10, unplugin@^2.3.5:
     picomatch "^4.0.3"
     webpack-virtual-modules "^0.6.2"
 
-until-async@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/until-async/-/until-async-3.0.2.tgz#447f1531fdd7bb2b4c7a98869bdb1a4c2a23865f"
-  integrity sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==
-
 untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@@ -6851,28 +5532,6 @@ update-browserslist-db@^1.1.3:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
-update-browserslist-db@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz#cfb4358afa08b3d5731a2ecd95eebf4ddef8033e"
-  integrity sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==
-  dependencies:
-    escalade "^3.2.0"
-    picocolors "^1.1.1"
-
-upper-case-first@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
-  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
-  dependencies:
-    tslib "^2.0.3"
-
-upper-case@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
-  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
-  dependencies:
-    tslib "^2.0.3"
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -6880,24 +5539,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-url-parse@^1.5.3:
-  version "1.5.10"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
-  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
-
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -6912,40 +5558,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vite-node@2.1.9:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.9.tgz#549710f76a643f1c39ef34bdb5493a944e4f895f"
-  integrity sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==
-  dependencies:
-    cac "^6.7.14"
-    debug "^4.3.7"
-    es-module-lexer "^1.5.4"
-    pathe "^1.1.2"
-    vite "^5.0.0"
-
-vite-node@^0.34.6:
-  version "0.34.7"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.7.tgz#9fbcaf5597826d224e6301a486027faa22c2b09c"
-  integrity sha512-0Yzb96QzHmqIKIs/x2q/sqG750V/EF6yDkS2p1WjJc1W2bgRSuQjf5vB9HY8h2nVb5j4pO5paS5Npcv3s69YUg==
-  dependencies:
-    cac "^6.7.14"
-    debug "^4.3.4"
-    mlly "^1.4.0"
-    pathe "^1.1.1"
-    picocolors "^1.0.0"
-    vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
-
-"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", vite@^5.0.0, vite@^5.1.8:
-  version "5.4.21"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.21.tgz#84a4f7c5d860b071676d39ba513c0d598fdc7027"
-  integrity sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==
-  dependencies:
-    esbuild "^0.21.3"
-    postcss "^8.4.43"
-    rollup "^4.20.0"
-  optionalDependencies:
-    fsevents "~2.3.3"
-
 vite@^5.2.6:
   version "5.4.20"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.20.tgz#3267a5e03f21212f44edfd72758138e8fcecd76a"
@@ -6957,32 +5569,6 @@ vite@^5.2.6:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest@^2.1.8:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.9.tgz#7d01ffd07a553a51c87170b5e80fea3da7fb41e7"
-  integrity sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==
-  dependencies:
-    "@vitest/expect" "2.1.9"
-    "@vitest/mocker" "2.1.9"
-    "@vitest/pretty-format" "^2.1.9"
-    "@vitest/runner" "2.1.9"
-    "@vitest/snapshot" "2.1.9"
-    "@vitest/spy" "2.1.9"
-    "@vitest/utils" "2.1.9"
-    chai "^5.1.2"
-    debug "^4.3.7"
-    expect-type "^1.1.0"
-    magic-string "^0.30.12"
-    pathe "^1.1.2"
-    std-env "^3.8.0"
-    tinybench "^2.9.0"
-    tinyexec "^0.3.1"
-    tinypool "^1.0.1"
-    tinyrainbow "^1.2.0"
-    vite "^5.0.0"
-    vite-node "2.1.9"
-    why-is-node-running "^2.3.0"
-
 vue-demi@>=0.13.0, vue-demi@>=0.14.8, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
@@ -7008,13 +5594,6 @@ vue-router@^4.0.12:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
-vue-router@^4.1.6:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.6.4.tgz#a0a9cb9ef811a106d249e4bb9313d286718020d8"
-  integrity sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==
-  dependencies:
-    "@vue/devtools-api" "^6.6.4"
-
 vue-sonner@^1.0.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/vue-sonner/-/vue-sonner-1.3.2.tgz#3349d548218e074499fc6d1ba394603ba477156a"
@@ -7031,17 +5610,6 @@ vue@3.5.15:
     "@vue/server-renderer" "3.5.15"
     "@vue/shared" "3.5.15"
 
-vue@^3.3.0:
-  version "3.5.25"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.25.tgz#b68b5092b617c57a0a36e8e640fd2c09aa2a374d"
-  integrity sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==
-  dependencies:
-    "@vue/compiler-dom" "3.5.25"
-    "@vue/compiler-sfc" "3.5.25"
-    "@vue/runtime-dom" "3.5.25"
-    "@vue/server-renderer" "3.5.25"
-    "@vue/shared" "3.5.25"
-
 vue@^3.5.13:
   version "3.5.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.22.tgz#2b8ddb94ee4b640ef12fe7f6efe1cf16f3b582e7"
@@ -7065,13 +5633,6 @@ w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
-w3c-xmlserializer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
-  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
-  dependencies:
-    xml-name-validator "^4.0.0"
-
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -7084,36 +5645,11 @@ webfontloader@^1.6.28:
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
   integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
 
-webidl-conversions@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
-  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
-
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
-whatwg-encoding@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
-  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
-  dependencies:
-    iconv-lite "0.6.3"
-
-whatwg-mimetype@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
-  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
-
-whatwg-url@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
-  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
-  dependencies:
-    tr46 "^3.0.0"
-    webidl-conversions "^7.0.0"
-
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
@@ -7174,20 +5710,12 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-why-is-node-running@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
-  integrity sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==
-  dependencies:
-    siginfo "^2.0.0"
-    stackback "0.0.2"
-
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -7205,15 +5733,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -7237,11 +5756,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@^8.11.0:
-  version "8.18.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
-  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
-
 ws@~8.17.1:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
@@ -7252,21 +5766,11 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-xmlchars@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
-  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
-
 xmlhttprequest-ssl@~2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
   integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-
 yaml@^2.3.4:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
@@ -7277,24 +5781,6 @@ yaml@^2.7.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"
   integrity sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==
 
-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-
-yargs@^17.7.2:
-  version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
@@ -7308,11 +5794,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yoctocolors-cjs@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz#7e4964ea8ec422b7a40ac917d3a344cfd2304baa"
-  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
-
 zrender@5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"

From 75482c6aee0fff2fe8480c6e88a4f959c816917b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 28 Dec 2025 19:59:15 +0530
Subject: [PATCH 234/547] fix: better code reachability via DynamicValueHandler

---
 frontend/components.d.ts                       |  1 -
 .../Controls/DynamicValueHandler.vue           | 18 +++++++++++++-----
 frontend/src/components/PageScript.vue         |  5 +++--
 frontend/src/stores/builderStore.ts            |  2 +-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 7e965fcf9..c55157042 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -49,7 +49,6 @@ declare module 'vue' {
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
-    copy: typeof import('./src/components/DimensionInput copy.vue')['default']
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
     CSS: typeof import('./src/components/Icons/CSS.vue')['default']
     CustomSearchPanel: typeof import('./src/components/Controls/CodeMirror/CustomSearchPanel.vue')['default']
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 822fe45d1..aac401eae 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -41,19 +41,27 @@
 							No dynamic values found. Please add using
 							<a
 								href="#"
-								@click="builderStore.showDataScriptDialog = true"
+								@click="builderStore.showDataScriptDialog = 'page'"
 								class="text-ink-gray-5 underline hover:text-ink-gray-7">
-								Data Script,
+								Page
 							</a>
-							or block props.
+							<a
+								href="#"
+								@click="builderStore.showDataScriptDialog = 'block'"
+								class="text-ink-gray-5 underline hover:text-ink-gray-7">
+								/ Block
+							</a>
+							Data Scripts.
 						</div>
 					</li>
 				</ul>
 			</div>
 		</div>
-		<div class="flex items-center justify-end gap-2" v-if="filteredItems.length !== 0">
+		<div
+			class="flex items-center justify-end gap-2"
+			v-if="filteredItems.length !== 0 && builderStore.leftPanelActiveTab !== 'Code'">
 			<div class="flex gap-2">
-				<Button variant="subtle" @click="builderStore.showDataScriptDialog = true">Edit Code</Button>
+				<Button variant="subtle" @click="builderStore.leftPanelActiveTab = 'Code'">Open Code Tab</Button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 60fee3e5d..d4dedd4e6 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -259,9 +259,10 @@ watch(
 	() => builderStore.showDataScriptDialog,
 	() => {
 		// if showDataScriptDialog is true, open the dialog
-		if (builderStore.showDataScriptDialog) {
+		if (builderStore.showDataScriptDialog !== null) {
+			mode.value = builderStore.showDataScriptDialog;
 			showServerScriptEditor();
-			builderStore.showDataScriptDialog = false; // reset the flag
+			builderStore.showDataScriptDialog = null; // reset the flag
 		}
 	},
 );
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index 37cdc649c..ea4d5730e 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -35,7 +35,7 @@ const useBuilderStore = defineStore("builderStore", {
 		showRightPanel: <boolean>true,
 		showLeftPanel: <boolean>true,
 		showHTMLDialog: false,
-		showDataScriptDialog: false,
+		showDataScriptDialog: <"block" | "page" | null>null,
 		realtime: new RealTimeHandler(),
 		readOnlyMode: false,
 		viewers: <UserInfo[]>[],

From 858cf2882d7edc2428c3795a91b1e81b96bc0c5c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 28 Dec 2025 21:28:50 +0530
Subject: [PATCH 235/547] fix(PlacementControl): Show placeholder dots to make
 the control look interactable

closes: https://github.com/frappe/builder/issues/454
---
 frontend/src/components/PlacementControl.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PlacementControl.vue b/frontend/src/components/PlacementControl.vue
index c86ad5aa2..e3d90b092 100644
--- a/frontend/src/components/PlacementControl.vue
+++ b/frontend/src/components/PlacementControl.vue
@@ -15,7 +15,11 @@
 					<div
 						@click="setAlignment(option)"
 						@dblclick="setAlignment(option, true)"
-						class="hidden gap-[2px] opacity-0 hover:opacity-100 group-hover/option:flex"
+						class="flex size-1 items-center justify-center rounded-full bg-surface-gray-5 opacity-50 group-hover/option:hidden"></div>
+					<div
+						@click="setAlignment(option)"
+						@dblclick="setAlignment(option, true)"
+						class="hidden gap-[2px] hover:opacity-100 group-hover/option:flex"
 						:class="{
 							'flex-row': direction === 'row',
 							'flex-col': direction === 'column',
@@ -81,7 +85,6 @@
 	</div>
 </template>
 <script setup lang="ts">
-import InputLabel from "@/components/Controls/InputLabel.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 

From 214f2c35949e17c6892753d3c084f9bbedc161b0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 28 Dec 2025 23:18:04 +0530
Subject: [PATCH 236/547] fix: add extra space for props popover

---
 frontend/src/components/PropsEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 2b52f4556..9a32c8bc3 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -6,7 +6,7 @@
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded bg-surface-gray-1 p-2 text-ink-gray-6"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!ml-[25px] !min-w-fit" placement="right-start">
+					<Popover popoverClass="!ml-[30px] !min-w-fit" placement="right-start">
 						<template #target="{ open }">
 							<div
 								class="flex w-full cursor-pointer items-center justify-between"
@@ -94,7 +94,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!ml-[17px] !min-w-fit" placement="right-start">
+		<Popover ref="popOverRef" popoverClass="!ml-[22px] !min-w-fit" placement="right-start">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"

From 4b845deb70458b5e26c41afb3cd65179ead7c05b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 29 Dec 2025 00:33:55 +0530
Subject: [PATCH 237/547] fix: other input loses focus when code tab is opened

could not edit array items as they would update props and that would trigger recalculation of block data and thus re-render the editor and steal focus from the array editor.
---
 frontend/src/components/PageScript.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index d4dedd4e6..7a24cfb19 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -7,7 +7,12 @@
 			</div>
 
 			<div class="h-full" v-if="mode == 'page'">
-				<CodeEditor v-model="pageStore.pageData" type="JSON" label="Page Data Preview" :readonly="true" />
+				<CodeEditor
+					v-model="pageStore.pageData"
+					type="JSON"
+					label="Page Data Preview"
+					:autofocus="false"
+					:readonly="true" />
 			</div>
 			<div class="box-border h-full overflow-y-auto pb-12" v-if="mode == 'block'">
 				<div class="flex min-h-full w-full flex-col" v-if="isBlockSelected">
@@ -16,6 +21,7 @@
 						class="max-h-[70%]"
 						type="JSON"
 						label="Block Data Preview"
+						:autofocus="false"
 						:readonly="true"></CodeEditor>
 					<div class="flex w-full items-center justify-between py-4">
 						<div class="text-sm text-ink-gray-6">Show cumulative data</div>

From 94b20a64b867b7f2d2e5d2d29c1a677cf0d11cc1 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Mon, 29 Dec 2025 07:55:51 +0530
Subject: [PATCH 238/547] fix(GlobalAnalytics): add text color to section
 headers for better visibility (#457)

---
 frontend/src/components/Settings/GlobalAnalytics.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalAnalytics.vue b/frontend/src/components/Settings/GlobalAnalytics.vue
index 78efa40e0..0279e08f4 100644
--- a/frontend/src/components/Settings/GlobalAnalytics.vue
+++ b/frontend/src/components/Settings/GlobalAnalytics.vue
@@ -16,7 +16,7 @@
 		</AnalyticsOverview>
 		<div class="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2">
 			<div>
-				<h3 class="mb-4 text-lg font-medium">Top Pages</h3>
+				<h3 class="mb-4 text-lg font-medium text-ink-gray-7">Top Pages</h3>
 				<div
 					v-if="analytics.loading"
 					class="flex h-[200px] items-center justify-center py-8 text-sm text-ink-gray-4">
@@ -39,7 +39,7 @@
 					row-key="route" />
 			</div>
 			<div>
-				<h3 class="mb-4 text-lg font-medium">Top Referrers</h3>
+				<h3 class="mb-4 text-lg font-medium text-ink-gray-7">Top Referrers</h3>
 				<div
 					v-if="analytics.loading"
 					class="flex h-[200px] items-center justify-center py-8 text-sm text-ink-gray-4">

From f56e09c3314504a0a50a833dc7cfdf85724f320e Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Mon, 29 Dec 2025 07:57:36 +0530
Subject: [PATCH 239/547] fix: prevent propagation from codemirror (#458)

esc used to close the editor and the dialog
---
 frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
index 64db88936..e2aafdc71 100644
--- a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
+++ b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
@@ -80,6 +80,7 @@ const resetEditor = async (params: { content: string; resetHistory: boolean; aut
 };
 
 const handleKeyDown = (e: KeyboardEvent) => {
+	e.stopImmediatePropagation();
 	if ((e.ctrlKey || e.metaKey) && e.key === "f") {
 		e.stopImmediatePropagation();
 		e.preventDefault();

From 00ed469295d08a8009474cf7d6cf734606a74388 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Mon, 29 Dec 2025 14:07:42 +0530
Subject: [PATCH 240/547] fix: Update fieldname from module to app

Missed this change during previous update
---
 builder/builder/doctype/builder_page/builder_page.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index ab13c180a..2e3ce0a26 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -17,7 +17,7 @@
   "column_break_ymjg",
   "is_standard",
   "is_template",
-  "module",
+  "app",
   "section_break_ujsp",
   "blocks",
   "draft_blocks",
@@ -237,7 +237,7 @@
   },
   {
    "depends_on": "is_standard",
-   "fieldname": "module",
+   "fieldname": "app",
    "fieldtype": "Select",
    "label": "App",
    "mandatory_depends_on": "is_standard",

From 40b10c1646e2c0afb12e1070f4e336f1dc4cc49e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 1 Jan 2026 16:25:33 +0530
Subject: [PATCH 241/547] fix: removed std_props as they're included in
 all_props

---
 .../doctype/builder_page/builder_page.py      | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 006133663..f5fa3dbc8 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -255,7 +255,8 @@ def get_context(self, context):
 			context.title = page_data.get("page_title")
 
 		blocks = self.blocks
-		# detect dynamic_route or block/page data, forcing true for now
+		
+		# TODO: detect dynamic_route or block/page data
 		context.no_cache = 1
 
 		context.preview = getattr(getattr(frappe.local, "request", None), "for_preview", None)
@@ -513,7 +514,7 @@ def get_block_html(blocks):
 
 	def get_html(blocks, soup):
 
-		map_of_std_props_info = {}
+		map_of_std_props_info = {} # prop_name -> list of prop_info stack
 		html = ""
 
 		def get_tag(block, soup, data_key=None):
@@ -607,42 +608,41 @@ def get_tag(block, soup, data_key=None):
 				tag.append(inner_soup)
 
 			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
-				_key = block.get("dataKey").get("key")
+				iterator_key = block.get("dataKey").get("key")
 				loop_var = ""
-				next_data_key = None
 				comes_from = block.get("dataKey").get("comesFrom", "dataScript")
 
 				if comes_from == "props":
-					loop_vars = get_loop_vars(map_of_std_props_info, _key)
+					loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
 
 					loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
-					_key = f"std_props['{escape_single_quotes(_key)}']"
+					iterator_key = jinja_safe_key(f"props.{iterator_key}")
 
 					if len(loop_vars) > 1:  # object repeater
-						_key = f"{_key}.items()"
+						iterator_key = f"{iterator_key}.items()"
 
 				elif comes_from == "blockDataScript":		
 					# using 'block' as loop var to reset the block data script context for repeater children
 					# this way they do not inherit the parent block's data script context, but get their own from the loop var
 					loop_var = "block"
-					_key = jinja_safe_key(f"block.{_key}")
-					next_data_key = data_key
+					iterator_key = jinja_safe_key(f"block.{iterator_key}")
 				else:
 					if data_key:
-						_key = f"{extract_data_key(data_key)}.{_key}"
-					loop_var = f"key_{_key.replace('.', '__')}"
-					next_data_key = {"key": loop_var, "comesFrom": "dataScript"}
+						iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
+					loop_var = f"key_{iterator_key.replace('.', '__')}"
+					iterator_key = jinja_safe_key(iterator_key)
+					data_key = {"key": loop_var, "comesFrom": "dataScript"}
 
 
-				tag.append(f"{{% for {loop_var} in {_key} %}}")
+				tag.append(f"{{% for {loop_var} in {iterator_key} %}}")
 
 				if comes_from == "props":
 					loop_vars = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
 					default_props = ", ".join([f"'{var}': {var}" for var in loop_vars])
-					tag.append(f"{{% with props = props | combine({{ {default_props} }}) %}}")
 					tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
+					tag.append("{% with props = passed_down_props %}")
 
-				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, next_data_key)
+				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, data_key)
 				append_child_tag(tag, child_tag, child_tag_details)
     
 				if comes_from == "props":
@@ -678,7 +678,6 @@ def get_tag(block, soup, data_key=None):
 					map_of_std_props_info[prop_name].pop()
 
 			all_props = {k: v["value"] for k, v in props_obj.items()}
-			std_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_standard")}
 			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
 
 			if block.get("blockClientScript"):
@@ -692,7 +691,6 @@ def get_tag(block, soup, data_key=None):
 			tag_details = {
 				"all_props": to_jinja_literal(all_props),
 				"passed_down_props": to_jinja_literal(passed_down_props),
-				"std_props": to_jinja_literal(std_props) if std_props else None,
 				"block_data_script": block.get("blockDataScript", None),
 			}
 
@@ -704,9 +702,7 @@ def get_tag(block, soup, data_key=None):
 			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(tag_details.get('block_data_script', ''))}', {(tag_details.get('all_props', '{}'))}) %}}{tag!s}{{% endwith %}}"
 			html = f"{{% with props = {tag_details.get('all_props', '{}')} %}}{html}{{% endwith %}}"
 			html = f"{{% with passed_down_props = {tag_details.get('passed_down_props', '{}')} %}}{html}{{% endwith %}}"
-			if tag_details.get('std_props'):
-				html = f"{{% with std_props = {tag_details.get('std_props')} %}}{html}{{% endwith %}}"
-
+			
 		# print("Final HTML: ", html)
 		# write to file
 		# with open("output.html", "w") as f:
@@ -862,16 +858,14 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	
 	child_tag_props = child_tag_details.get('all_props')
 	child_passed_down_props = child_tag_details.get('passed_down_props')
-	child_tag_std_props = child_tag_details.get('std_props')
 	child_tag_block_script = child_tag_details.get('block_data_script')
 
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
 	
-	if child_tag_std_props:
-		tag.append(f"{{% with std_props = {child_tag_std_props} %}}")
 	if child_tag_block_script:
 		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props) %}}")
+	
 	if visibility_key:
 		tag.append(f"{{% if {visibility_key} %}}")
 	
@@ -879,10 +873,9 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	
 	if visibility_key:
 		tag.append("{% endif %}")
+  
 	if child_tag_block_script:
 		tag.append("{% endwith %}")
-	if child_tag_std_props:
-		tag.append("{% endwith %}")
 
 	tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
@@ -1113,4 +1106,7 @@ def reset_block(block):
 	block["customAttributes"] = {}
 	block["classes"] = []
 	block["dataKey"] = {}
+	block["props"] = {}
+	block["blockClientScript"] = None
+	block["blockDataScript"] = None
 	return block

From a1fa223015ff0b025e40c54a91d947cc9c3b0cbb Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 1 Jan 2026 16:28:58 +0530
Subject: [PATCH 242/547] fix: properly handle selected values in popover opts.

---
 frontend/src/components/PropsOptions/BooleanOptions.vue | 1 +
 frontend/src/components/PropsOptions/SelectOptions.vue  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
index 95b45d859..e575d87a5 100644
--- a/frontend/src/components/PropsOptions/BooleanOptions.vue
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -29,6 +29,7 @@
 					value: 'false',
 				},
 			]"
+			:model-value="defaultValue"
 			@update:model-value="handleDefaultValueChange"
 			placeholder="Enter default value"></Input>
 	</div>
diff --git a/frontend/src/components/PropsOptions/SelectOptions.vue b/frontend/src/components/PropsOptions/SelectOptions.vue
index 518bcd6f0..bdfb66ef7 100644
--- a/frontend/src/components/PropsOptions/SelectOptions.vue
+++ b/frontend/src/components/PropsOptions/SelectOptions.vue
@@ -8,6 +8,7 @@
 		<Input
 			type="select"
 			:options="optionsAvailable"
+			:model-value="defaultValue"
 			@update:model-value="handleDefaultValueChange"
 			placeholder="Select default value"></Input>
 	</div>

From 7e89750b7688313565c55cc29eb23e7b507fe243 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 2 Jan 2026 11:15:26 +0530
Subject: [PATCH 243/547] refactor: removed fallbacks

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index f5fa3dbc8..e8eeba752 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -947,7 +947,7 @@ def set_dynamic_content_placeholder(block, data_key=None):
 				)
 			elif _type == "key" and not block.get("isRepeaterBlock"):
 				block[_property] = (
-					f"{{{{ {key} if {key} or {key} in ['', 0] else {jinja_safe_key(f'block.{original_key}')} if {jinja_safe_key(f'block.{original_key}')} is defined else {jinja_safe_key(f'props.{original_key}')} if {jinja_safe_key(f'props.{original_key}')} is defined else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
+					f"{{{{ {key} if {key} or {key} in ['', 0] else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
 				)
 
 
@@ -1045,7 +1045,7 @@ def get_interpreted_prop_value(prop, data_key):
 			prop.get("standardOptions", {}).get("type"),
 		)
 	
-	return prop_value
+	return prop_value if prop_value is not None else "undefined"
 
 
 def get_loop_vars(map_of_std_props_info, key):

From 526b92d05b86ffee133f77fb6e88fc96b40964a1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 2 Jan 2026 11:41:09 +0530
Subject: [PATCH 244/547] fix: visibility properly resolved from props

`False or 'undefined'` would result in 'undefined' even though False is the actual value
---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 frontend/src/components/VisibilityInput.vue          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index e8eeba752..cd497ecfe 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -1037,7 +1037,7 @@ def get_interpreted_prop_value(prop, data_key):
 		}
 		key = key_mapping.get(prop_comes_from, prop_value)
 		fallback = escape_single_quotes(default_value) if default_value is not None else 'undefined'
-		return f"{{{{ {key} or '{fallback}' }}}}"
+		return f"{{{{ {key} if {key} is defined else '{fallback}' }}}}"
 	
 	if prop_is_standard:
 		prop_value = parse_static_value(
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 7661f029d..145d4044e 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -9,6 +9,7 @@
 
 			<div class="relative w-full">
 				<Autocomplete
+					placeholder="unset"
 					ref="autocompleteRef"
 					:modelValue="getModelValue()"
 					:getOptions="getOptions"

From 1a89422d5a635ee8e647ddeb50374843df49b953 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 2 Jan 2026 11:59:42 +0530
Subject: [PATCH 245/547] refactor: variable name for CollectionOptionsSection

---
 .../BlockPropertySections/CollectionOptionsSection.ts       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index ac8bb357d..38027fb5a 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -9,7 +9,7 @@ const keyOptions = computed(() => {
 	const blockDataStore = useBlockDataStore();
 	let result: { label: string; value: string; prefix: any }[] = [];
 
-	const repeatableDataKeys: string[] = [];
+	const repeatablePageDataKeys: string[] = [];
 	const repeatableBlockDataKeys: string[] = [];
 
 	let pageDataCollectionObject =
@@ -40,7 +40,7 @@ const keyOptions = computed(() => {
 		});
 	}
 
-	processObject(pageDataCollectionObject, "", repeatableDataKeys);
+	processObject(pageDataCollectionObject, "", repeatablePageDataKeys);
 	processObject(blockDataCollectionObject, "", repeatableBlockDataKeys);
 
 	const isPropsBasedRepeater = isInsideRepeater && repeaterDataKeyComesFrom == "props";
@@ -59,7 +59,7 @@ const keyOptions = computed(() => {
 		});
 	}
 
-	repeatableDataKeys.forEach((item) => {
+	repeatablePageDataKeys.forEach((item) => {
 		result.push({
 			label: item,
 			value: `${item}--dataScript`,

From 3b5022533dc42740ae663f12afe479e37a4e43bc Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 2 Jan 2026 12:41:21 +0530
Subject: [PATCH 246/547] refactor: extracted getDefaultProps

---
 .../Controls/DynamicValueHandler.vue          | 42 +++-----------
 frontend/src/components/VisibilityInput.vue   | 21 +------
 frontend/src/utils/helpers.ts                 | 56 +++++++++++++++++--
 3 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index aac401eae..59d3c1aed 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -73,7 +73,12 @@ import useBlockDataStore from "@/stores/blockDataStore";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import { getDataArray, getParentProps, getPropValue, getStandardPropValue } from "@/utils/helpers";
+import {
+	getDataArray,
+	getDefaultPropsList,
+	getParentProps,
+	getPropValue,
+} from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
@@ -123,40 +128,7 @@ const blockDataArray = computed(() => {
 
 const defaultProps = computed(() => {
 	const currentBlock = props.block || blockController.getFirstSelectedBlock();
-	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
-	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
-	if (repeaterRoot) {
-		const key = repeaterRoot.getDataKey("key");
-		const comesFrom = repeaterRoot.getDataKey("comesFrom");
-		if (key && comesFrom === "props") {
-			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
-			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
-			if (!parsedValue) return {};
-			if (Array.isArray(parsedValue)) {
-				return {
-					item: {
-						value: parsedValue[0],
-						isStandard: false,
-						type: "static",
-					},
-				};
-			} else if (typeof parsedValue === "object") {
-				return {
-					key: {
-						value: Object.keys(parsedValue)[0],
-						isStandard: false,
-						type: "static",
-					},
-					value: {
-						value: parsedValue[Object.keys(parsedValue)[0]],
-						isStandard: false,
-						type: "static",
-					},
-				};
-			}
-		}
-	}
-	return {};
+	return getDefaultPropsList(currentBlock!, blockController);
 });
 
 const filteredBlockProps = computed(() => {
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 145d4044e..2164876eb 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -22,7 +22,7 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import useBlockDataStore from "@/stores/blockDataStore";
 import blockController from "@/utils/blockController";
-import { getDataArray, getParentProps, getStandardPropValue } from "@/utils/helpers";
+import { getDataArray, getDefaultPropsList, getParentProps, getStandardPropValue } from "@/utils/helpers";
 import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
@@ -69,24 +69,7 @@ const defaultProps = computed(() => {
 	if (!currentBlock) {
 		return [];
 	}
-	const isCurrentBlockInRepeater = currentBlock?.isInsideRepeater();
-	const repeaterRoot = isCurrentBlockInRepeater ? currentBlock?.getRepeaterParent() : null;
-	if (repeaterRoot) {
-		const key = repeaterRoot.getDataKey("key");
-		const comesFrom = repeaterRoot.getDataKey("comesFrom");
-		if (key && comesFrom === "props") {
-			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
-			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
-			if (parsedValue) {
-				if (Array.isArray(parsedValue)) {
-					return ["item"];
-				} else if (typeof parsedValue === "object") {
-					return ["key", "value"];
-				}
-			}
-		}
-	}
-	return [];
+	return Object.keys(getDefaultPropsList(currentBlock, blockController));
 });
 const getOptions = async (query: string) => {
 	let options: { label: string; value: string }[] = [];
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index a9552c6a9..1db2b7598 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1097,6 +1097,50 @@ const getParentProps = (baseBlock: Block, baseProps: BlockProps): BlockProps =>
 	}
 };
 
+const getDefaultPropsList = (block: Block, blockController: any): BlockProps => {
+	// we need to pass blockController because during initialization phase, blockController can't use canvasStore
+	const isCurrentBlockInRepeater = block?.isInsideRepeater();
+	const repeaterRoot = isCurrentBlockInRepeater ? block?.getRepeaterParent() : null;
+	if (repeaterRoot) {
+		const key = repeaterRoot.getDataKey("key");
+		const comesFrom = repeaterRoot.getDataKey("comesFrom");
+		if (key && comesFrom === "props") {
+			const componentRoot = blockController.getComponentRootBlock(repeaterRoot);
+			const parsedValue = getStandardPropValue(key, componentRoot)?.value;
+			if (!parsedValue) return {};
+			if (Array.isArray(parsedValue)) {
+				return {
+					item: {
+						value: parsedValue[0],
+						isStandard: false,
+						isDynamic: true,
+						comesFrom: "props",
+						isPassedDown: true,
+					},
+				};
+			} else if (typeof parsedValue === "object") {
+				return {
+					key: {
+						value: Object.keys(parsedValue)[0],
+						isStandard: false,
+						isDynamic: true,
+						comesFrom: "props",
+						isPassedDown: true,
+					},
+					value: {
+						value: parsedValue[Object.keys(parsedValue)[0]],
+						isStandard: false,
+						isDynamic: true,
+						comesFrom: "props",
+						isPassedDown: true,
+					},
+				};
+			}
+		}
+	}
+	return {};
+};
+
 const getPropValue = (
 	propName: string,
 	block: Block,
@@ -1119,20 +1163,19 @@ const getPropValue = (
 
 	// Handle dynamic props
 	if (matchingProp.isDynamic) {
-		
 		if (matchingProp.comesFrom === "dataScript" && matchingProp.value) {
 			return getDataScriptValue(matchingProp.value);
 		}
-		
+
 		if (matchingProp.comesFrom === "blockDataScript" && matchingProp.value) {
 			return getBlockScriptValue(matchingProp.value);
 		}
-		
+
 		// Fallback to default props
 		if (matchingProp.value && defaultProps?.[matchingProp.value] !== undefined) {
 			return defaultProps[matchingProp.value].value;
 		}
-		
+
 		return undefined;
 	}
 
@@ -1140,11 +1183,11 @@ const getPropValue = (
 	if (matchingProp.isStandard && matchingProp.standardOptions) {
 		const { type, options } = matchingProp.standardOptions;
 		const defaultValue = options?.defaultValue ?? null;
-		
+
 		if (type !== "string" && type !== "select") {
 			return matchingProp.value ? JSON.parse(matchingProp.value) : defaultValue;
 		}
-		
+
 		return matchingProp.value || defaultValue;
 	}
 
@@ -1395,6 +1438,7 @@ export {
 	uploadBuilderAsset,
 	uploadUserFont,
 	getParentProps,
+	getDefaultPropsList,
 	getPropValue,
 	getStandardPropValue,
 	getDataArray,

From 22608c5085d3dd0dfee5ed22017400de351ea42f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 3 Jan 2026 23:32:30 +0530
Subject: [PATCH 247/547] feat: add completions in codeeditor for block scripts

- `this` is now suggested in block js completions
- `props` is now suggested in both block python and js completions
- actual props are also suggested in completions
- along side `data`, page_data now also accepts `page`
---
 .../doctype/builder_page/builder_page.py      |   3 +-
 .../src/components/Controls/CodeEditor.vue    |   2 +
 .../Controls/CodeMirror/CodeMirrorEditor.vue  |  23 ++-
 .../components/PageClientScriptManager.vue    |   1 +
 frontend/src/components/PageScript.vue        |   3 +
 frontend/src/utils/createCodeMirrorState.ts   |  30 ++--
 frontend/src/utils/jsGlobalCompletion.ts      | 136 +++++++++++-------
 frontend/src/utils/pythonCustomCompletion.ts  |  49 ++++++-
 8 files changed, 169 insertions(+), 78 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index cd497ecfe..49a3e7fd4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -370,9 +370,10 @@ def get_page_data(self, route_variables=None):
 			frappe.form_dict.update(dict(frappe.parse_json(route_variables or "{}").items()))
 		page_data = frappe._dict()
 		if self.page_data_script:
-			_locals = dict(data=frappe._dict())
+			_locals = dict(data=frappe._dict(), page=frappe._dict())
 			execute_script(self.page_data_script, _locals, self.name)
 			page_data.update(_locals["data"])
+			page_data.update(_locals["page"])
 
 		# do not let users replace __content
 		page_data.pop("__content", None)
diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index 36e3e7b5a..40fdfcea4 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -11,6 +11,7 @@
 			class="flex h-[30vh] max-h-[80vh] resize-y overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2">
 			<CodeMirrorEditor
 				ref="editor"
+				:mode
 				:type
 				:readonly="readonly"
 				:allow-save="showSaveButton"
@@ -48,6 +49,7 @@ const props = withDefaults(
 	defineProps<{
 		modelValue?: Object | String | Array<any>;
 		type?: "JSON" | "HTML" | "Python" | "JavaScript" | "CSS";
+		mode?: "block" | "page";
 		label?: string;
 		readonly?: boolean;
 		height?: string;
diff --git a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
index 64db88936..9785833a5 100644
--- a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
+++ b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
@@ -5,7 +5,7 @@
 		@keydown="handleKeyDown"></div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 import codeCompletions from "@/data/codeCompletions";
 import { createStartingState } from "@/utils/createCodeMirrorState";
@@ -15,9 +15,12 @@ import { oneDark } from "@codemirror/theme-one-dark";
 import { useDark } from "@vueuse/core";
 import { EditorView } from "codemirror";
 import { tomorrow } from "thememirror";
+import blockController from "@/utils/blockController";
+import { getDefaultPropsList, getParentProps } from "@/utils/helpers";
 
 const props = defineProps<{
 	type: "Python" | "JavaScript" | "HTML" | "CSS" | "JSON";
+	mode?: "block" | "page";
 	initialValue?: string;
 	readonly: boolean;
 	allowSave: boolean;
@@ -62,6 +65,8 @@ const resetEditor = async (params: { content: string; resetHistory: boolean; aut
 						onBlurCallback: (value: string) => emit("blur", value),
 						initialValue: params.content,
 						extraExtensions: [theme.of(isDark.value ? oneDark : tomorrow)],
+						mode: props.mode,
+						blockProps: allBlockProps.value,
 					})
 				).startState,
 			);
@@ -100,6 +105,20 @@ watch(isDark, (newVal) => {
 	}
 });
 
+const allBlockProps = computed(() => {
+	const currentBlock = blockController.getFirstSelectedBlock();
+	if (currentBlock) {
+		const ownBlockProps = currentBlock.getBlockProps();
+		const inheritedBlockProps = getParentProps(currentBlock, {});
+		const defaultProps = getDefaultPropsList(currentBlock, blockController);
+		return {
+			...defaultProps,
+			...inheritedBlockProps,
+			...ownBlockProps,
+		};
+	}
+});
+
 onMounted(async () => {
 	if (editorContainer.value) {
 		const { startState } = await createStartingState({
@@ -109,6 +128,8 @@ onMounted(async () => {
 			onChangeCallback: () => emit("change", getEditorValue()),
 			onBlurCallback: (value: string) => emit("blur", value),
 			extraExtensions: [theme.of(isDark.value ? oneDark : tomorrow)],
+			mode: props.mode,
+			blockProps: allBlockProps.value,
 		});
 		editor = new EditorView({
 			state: startState,
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index 5139a55c4..8ecf8c6a6 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -120,6 +120,7 @@
 				:label="activeScript.script_name"
 				:type="activeScript.script_type as 'JavaScript' | 'CSS'"
 				class="flex-1"
+				mode="page"
 				height="65vh"
 				:readonly="builderStore.readOnlyMode"
 				:autofocus="false"
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 7a24cfb19..3c35198eb 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -75,6 +75,7 @@
 								ref="dataScriptEditor"
 								v-model="page.page_data_script"
 								type="Python"
+								mode="page"
 								height="60vh"
 								:readonly="builderStore.readOnlyMode"
 								:autofocus="true"
@@ -103,6 +104,7 @@
 							ref="blockClientScriptEditor"
 							v-model="blockClientScript"
 							type="JavaScript"
+							mode="block"
 							height="60vh"
 							:readonly="builderStore.readOnlyMode"
 							:autofocus="true"
@@ -120,6 +122,7 @@
 								ref="dataScriptEditor"
 								v-model="blockDataScript"
 								type="Python"
+								mode="block"
 								height="60vh"
 								:readonly="builderStore.readOnlyMode"
 								:autofocus="true"
diff --git a/frontend/src/utils/createCodeMirrorState.ts b/frontend/src/utils/createCodeMirrorState.ts
index b325e9475..9a6335cab 100644
--- a/frontend/src/utils/createCodeMirrorState.ts
+++ b/frontend/src/utils/createCodeMirrorState.ts
@@ -4,13 +4,7 @@ import {
 	closeBracketsKeymap,
 	completionKeymap,
 } from "@codemirror/autocomplete";
-import {
-	defaultKeymap,
-	history,
-	historyKeymap,
-	indentMore,
-	indentLess,
-} from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, indentMore, indentLess } from "@codemirror/commands";
 import {
 	bracketMatching,
 	defaultHighlightStyle,
@@ -39,7 +33,7 @@ import customPythonCompletions from "./pythonCustomCompletion";
 
 import { createApp } from "vue";
 import CustomSearchPanel from "@/components/Controls/CodeMirror/CustomSearchPanel.vue";
-import { indentationMarkers } from '@replit/codemirror-indentation-markers';
+import { indentationMarkers } from "@replit/codemirror-indentation-markers";
 
 interface CreateStateParams {
 	props: any;
@@ -49,6 +43,8 @@ interface CreateStateParams {
 	onChangeCallback: any;
 	onBlurCallback?: any;
 	initialValue?: string;
+	mode?: "block" | "page";
+	blockProps?: Record<string, any>;
 }
 
 export const createStartingState = async ({
@@ -59,6 +55,8 @@ export const createStartingState = async ({
 	onChangeCallback,
 	onBlurCallback,
 	initialValue = "", // to override initial value without recreating state (eg: when resetting)
+	mode,
+	blockProps,
 }: CreateStateParams) => {
 	const updateEmitter = EditorView.updateListener.of((update: ViewUpdate) => {
 		if (update.docChanged) onChangeCallback();
@@ -71,7 +69,7 @@ export const createStartingState = async ({
 					onBlurCallback(view.state.doc.toString());
 					return false; // Don't prevent default
 				},
-			})
+		  })
 		: [];
 	// collection of basic extensions: https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
 	const basicSetup: Extension = (() => [
@@ -167,26 +165,22 @@ export const createStartingState = async ({
 	// TODO: reconfigure with Compartments instead of switch...case
 	switch (props.type) {
 		case "JavaScript": {
-			const { javascript, javascriptLanguage } = await import(
-				"@codemirror/lang-javascript"
-			);
+			const { javascript, javascriptLanguage } = await import("@codemirror/lang-javascript");
 			extensions.push(
 				javascript(),
 				javascriptLanguage.data.of({
-					autocomplete: jsCompletionsFromGlobalScope,
+					autocomplete: (context: any) =>
+						jsCompletionsFromGlobalScope(context, { ...(mode == "block" ? { ...blockProps } : {}) }),
 				}),
 			);
 			break;
 		}
 		case "Python": {
-			const { python, pythonLanguage } = await import(
-				"@codemirror/lang-python"
-			);
+			const { python, pythonLanguage } = await import("@codemirror/lang-python");
 			extensions.push(
 				python(),
 				pythonLanguage.data.of({
-					autocomplete: (context: any) =>
-						customPythonCompletions(context, pythonCompletions),
+					autocomplete: (context: any) => customPythonCompletions(context, pythonCompletions, mode, { ...(mode == "block" ? { ...blockProps } : {}) }),
 				}),
 			);
 			break;
diff --git a/frontend/src/utils/jsGlobalCompletion.ts b/frontend/src/utils/jsGlobalCompletion.ts
index 8584af33f..7c28f6161 100644
--- a/frontend/src/utils/jsGlobalCompletion.ts
+++ b/frontend/src/utils/jsGlobalCompletion.ts
@@ -1,67 +1,95 @@
-import { syntaxTree } from '@codemirror/language';
+import { syntaxTree } from "@codemirror/language";
 
-function getAllProperties(obj:Object) {
-  const props = new Set();
-  let current = obj;
-  
-  while (current && current !== Object.prototype) {
-    // Get all properties from current level
-    Object.getOwnPropertyNames(current).forEach(prop => {
-      props.add(prop);
-    });
-    
-    // Move up the prototype chain
-    current = Object.getPrototypeOf(current);
-  }
-  
-  return Array.from(props);
+const BOOST_INDEX = 99;
+
+function getAllProperties(obj: Object) {
+	const props = new Set();
+	let current = obj;
+
+	while (current && current !== Object.prototype) {
+		// Get all properties from current level
+		Object.getOwnPropertyNames(current).forEach((prop) => {
+			props.add(prop);
+		});
+
+		// Move up the prototype chain
+		current = Object.getPrototypeOf(current);
+	}
+
+	return Array.from(props);
 }
 
 // Usage
 const allDocumentProps = getAllProperties(document);
 
-const completePropertyAfter = ['PropertyName', '.', '?.'];
+const completePropertyAfter = ["PropertyName", ".", "?.", "["];
 const dontCompleteIn = [
-  'TemplateString',
-  'LineComment',
-  'BlockComment',
-  'VariableDefinition',
-  'PropertyDefinition',
+	"TemplateString",
+	"LineComment",
+	"BlockComment",
+	"VariableDefinition",
+	"PropertyDefinition",
 ];
 
-export default function jsCompletionsFromGlobalScope(context: any) {
-  let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+export default function jsCompletionsFromGlobalScope(context: any, blockProps: Record<string, any> = {}) {
+	let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+	const hasProps = Object.keys(blockProps).length > 0;
+
+	if (completePropertyAfter.includes(nodeBefore.name) && nodeBefore.parent?.name == "MemberExpression") {
+		let object = nodeBefore.parent.getChild("Expression");
+		if (object?.name == "VariableName") {
+			let from = /\./.test(nodeBefore.name) ? nodeBefore.to : nodeBefore.from;
+			let variableName = context.state.sliceDoc(object.from, object.to);
+			if (variableName === "props") {
+				// If props is empty, return null immediately (no suggestions)
+				if (!hasProps) return null;
 
-  if (
-    completePropertyAfter.includes(nodeBefore.name) &&
-    nodeBefore.parent?.name == 'MemberExpression'
-  ) {
-    let object = nodeBefore.parent.getChild('Expression');
-    if (object?.name == 'VariableName') {
-      let from = /\./.test(nodeBefore.name) ? nodeBefore.to : nodeBefore.from;
-      let variableName = context.state.sliceDoc(object.from, object.to);
-      if (typeof window[variableName] == 'object')
-        return completeProperties(from, window[variableName]);
-    }
-  } else if (nodeBefore.name == 'VariableName') {
-    return completeProperties(nodeBefore.from, window);
-  } else if (context.explicit && !dontCompleteIn.includes(nodeBefore.name)) {
-    return completeProperties(context.pos, window);
-  }
-  return null;
+				let isBracket = nodeBefore.name === "[";
+				return {
+					from: context.pos,
+					options: Object.keys(blockProps).map((key) => {
+						if (isBracket) {
+							return {
+								label: key,
+								displayLabel: `${key}`,
+								apply: `"${key}"`,
+								type: "property",
+							};
+						}
+						return { label: key, type: "property" };
+					}),
+				};
+			}
+			if (typeof window[variableName] == "object") return completeProperties(from, window[variableName]);
+		}
+	} else if (nodeBefore.name == "VariableName") {
+		return completeProperties(nodeBefore.from, window, hasProps ? ["props"] : []);
+	} else if (context.explicit && !dontCompleteIn.includes(nodeBefore.name)) {
+		return completeProperties(context.pos, window, hasProps ? ["props"] : []);
+	}
+	return null;
 }
 
-function completeProperties(from: any, object: any) {
-  let options = [];
-  for (let name of getAllProperties(object)) {
-    options.push({
-      label: name,
-      type: typeof object[name as string] == 'function' ? 'function' : 'variable',
-    });
-  }
-  return {
-    from,
-    options,
-    validFor: /^[\w$]*$/,
-  };
+function completeProperties(from: any, object: any, extraKeys?: string[]) {
+	let options = [];
+	for (let name of getAllProperties(object)) {
+		options.push({
+			label: name,
+			type: typeof object[name as string] == "function" ? "function" : "variable",
+		});
+	}
+	if (extraKeys) {
+		for (let key of extraKeys) {
+			options.push({
+				label: key,
+				type: "variable",
+				boost: BOOST_INDEX,
+			});
+		}
+	}
+	return {
+		from,
+		options,
+		validFor: /^[\w$]*$/,
+	};
 }
diff --git a/frontend/src/utils/pythonCustomCompletion.ts b/frontend/src/utils/pythonCustomCompletion.ts
index 4626f3d6c..09d657010 100644
--- a/frontend/src/utils/pythonCustomCompletion.ts
+++ b/frontend/src/utils/pythonCustomCompletion.ts
@@ -1,6 +1,6 @@
 import { syntaxTree } from "@codemirror/language";
 
-const completePropertyAfter = ["PropertyName", ".", "?."];
+const completePropertyAfter = ["PropertyName", ".", "?.", "["];
 const dontCompleteIn = [
 	"TemplateString",
 	"LineComment",
@@ -9,16 +9,41 @@ const dontCompleteIn = [
 	"PropertyDefinition",
 ];
 
+const BOOST_INDEX = 99;
+
 // Create completion source for custom objects
 // Currently only two levels of nesting is supported, eg: frappe.session.user
-export default function customPythonCompletions(context: any, customCompletions: any) {
+export default function customPythonCompletions(
+	context: any,
+	customCompletions: any,
+	mode: "block" | "page" = "page",
+	blockProps: Record<string, any> = {},
+) {
 	let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+	const hasProps = Object.keys(blockProps).length > 0;
 	if (completePropertyAfter.includes(nodeBefore.name) && nodeBefore.parent?.name == "MemberExpression") {
 		let object = nodeBefore.parent.getChild("Expression");
 
 		if (object?.name == "VariableName") {
 			let from = /\./.test(nodeBefore.name) ? nodeBefore.to : nodeBefore.from;
 			let variableName = context.state.sliceDoc(object.from, object.to);
+			if (variableName === "props") {
+
+				let isBracket = nodeBefore.name === "[";
+				if (!hasProps || !isBracket) return null;
+				console.log(variableName, blockProps, isBracket);
+				return {
+					from: context.pos,
+					options: Object.keys(blockProps).map((key) => {
+						return {
+							label: key,
+							displayLabel: `${key}`,
+							apply: `"${key}"`,
+							type: "property",
+						};
+					}),
+				};
+			}
 
 			if (Object.keys(customCompletions).includes(variableName)) {
 				return completeProperties(from, customCompletions[variableName as keyof typeof customCompletions]);
@@ -45,7 +70,15 @@ export default function customPythonCompletions(context: any, customCompletions:
 		return {
 			from: nodeBefore.from,
 			options: [
-				{ label: "data", type: "class" },
+				...(mode == "block"
+					? [
+							{ label: "block", type: "class", boost: BOOST_INDEX },
+							{ label: "props", type: "class", boost: BOOST_INDEX },
+					  ]
+					: [
+							{ label: "data", type: "class", boost: BOOST_INDEX },
+							{ label: "page", type: "class", boost: BOOST_INDEX },
+					  ]),
 				...Object.keys(customCompletions).map((item) => {
 					return { label: item, type: "class" };
 				}),
@@ -56,7 +89,15 @@ export default function customPythonCompletions(context: any, customCompletions:
 		return {
 			from: nodeBefore.from,
 			options: [
-				{ label: "data", type: "class" },
+				...(mode == "block"
+					? [
+							{ label: "block", type: "class", boost: BOOST_INDEX },
+							{ label: "props", type: "class", boost: BOOST_INDEX },
+					  ]
+					: [
+							{ label: "data", type: "class", boost: BOOST_INDEX },
+							{ label: "page", type: "class", boost: BOOST_INDEX },
+					  ]),
 				...Object.keys(customCompletions).map((item) => {
 					return { label: item, type: "class" };
 				}),

From 561791a19deadfb93455351f0199cf1bd54bc4b2 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 4 Jan 2026 20:04:18 +0530
Subject: [PATCH 248/547] refactor: rearranged code to extract complex logic
 into functions

---
 .../doctype/builder_page/builder_page.py      | 116 ++++++++++--------
 1 file changed, 65 insertions(+), 51 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 2e5c2090f..51cff257c 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -605,67 +605,28 @@ def get_tag(block, soup, data_key=None):
 				tag.append(inner_soup)
 
 			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
-				iterator_key = block.get("dataKey").get("key")
-				loop_var = ""
 				comes_from = block.get("dataKey").get("comesFrom", "dataScript")
+				default_props = None
 
-				if comes_from == "props":
-					loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
-
-					loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
-					iterator_key = jinja_safe_key(f"props.{iterator_key}")
-
-					if len(loop_vars) > 1:  # object repeater
-						iterator_key = f"{iterator_key}.items()"
-
-				elif comes_from == "blockDataScript":		
-					# using 'block' as loop var to reset the block data script context for repeater children
-					# this way they do not inherit the parent block's data script context, but get their own from the loop var
-					loop_var = "block"
-					iterator_key = jinja_safe_key(f"block.{iterator_key}")
-				else:
-					if data_key:
-						iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
-					loop_var = f"key_{iterator_key.replace('.', '__')}"
-					iterator_key = jinja_safe_key(iterator_key)
-					data_key = {"key": loop_var, "comesFrom": "dataScript"}
-
+				loop_var, iterator_key, data_key = get_iterator_info(block, data_key, map_of_std_props_info)
 
 				tag.append(f"{{% for {loop_var} in {iterator_key} %}}")
 
+				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, data_key)
+				
 				if comes_from == "props":
-					loop_vars = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
-					default_props = ", ".join([f"'{var}': {var}" for var in loop_vars])
-					tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
-					tag.append("{% with props = passed_down_props %}")
+					default_props = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
+					child_tag_details['default_props'] = default_props
 
-				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, data_key)
 				append_child_tag(tag, child_tag, child_tag_details)
-    
-				if comes_from == "props":
-					tag.append("{% endwith %}{% endwith %}")
      
 				tag.append("{% endfor %}")
 			else:
 				for child in block.get("children", []) or []:
-					visibility_key = None
-					if child.get("visibilityCondition"):
-						visibility_condition = child.get("visibilityCondition")
-						if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
-							if data_key:
-								visibility_key = f"{extract_data_key(data_key)}.{key}"
-							else:
-								visibility_key = visibility_condition.get("key")
-						else:
-							key = visibility_condition.get("key")
-							if visibility_condition.get("comesFrom") == "props":
-								visibility_key = f"props.{key}"
-							else:
-								visibility_key = f"block.{key}"
-						visibility_key = jinja_safe_key(visibility_key)
-
+					visibility_key = get_visibility_key(child, data_key)
 					child_tag, child_tag_details = get_tag(child, soup, data_key=data_key)
-					append_child_tag(tag, child_tag, child_tag_details, visibility_key)
+					child_tag_details['visibility_key'] = visibility_key
+					append_child_tag(tag, child_tag, child_tag_details)
 
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
@@ -702,8 +663,8 @@ def get_tag(block, soup, data_key=None):
 			
 		# print("Final HTML: ", html)
 		# write to file
-		# with open("output.html", "w") as f:
-		# 	f.write(html)
+		with open("output.html", "w") as f:
+			f.write(html)
 		return html, str(style_tag), font_map
 
 	data = get_html(blocks, soup)
@@ -851,11 +812,18 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
+def append_child_tag(tag, child_tag, child_tag_details):
 	
 	child_tag_props = child_tag_details.get('all_props')
 	child_passed_down_props = child_tag_details.get('passed_down_props')
 	child_tag_block_script = child_tag_details.get('block_data_script')
+	visibility_key = child_tag_details.get('visibility_key')
+	default_props = child_tag_details.get('default_props')
+
+	if default_props:
+		default_props = ", ".join([f"'{var}': {var}" for var in default_props])
+		tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
+		tag.append("{% with props = passed_down_props %}") # resetting props for repeater blocks and for props deriving from repeater loop vars
 
 	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
 	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
@@ -877,6 +845,9 @@ def append_child_tag(tag, child_tag, child_tag_details, visibility_key=None):
 	tag.append("{% endwith %}")
 	tag.append("{% endwith %}")
 
+	if default_props:
+		tag.append("{% endwith %}{% endwith %}")
+
 
 def to_jinja_literal(obj):
 	# detect Jinja expressions inside strings (e.g. "{{ sample }}")
@@ -1044,6 +1015,49 @@ def get_interpreted_prop_value(prop, data_key):
 	
 	return prop_value if prop_value is not None else "undefined"
 
+def get_iterator_info(block, data_key, map_of_std_props_info):
+	iterator_key = block.get("dataKey").get("key")
+	loop_var = ""
+	comes_from = block.get("dataKey").get("comesFrom", "dataScript")
+
+	if comes_from == "props":
+		loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
+
+		loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
+		iterator_key = jinja_safe_key(f"props.{iterator_key}")
+
+		if len(loop_vars) > 1:  # object repeater
+			iterator_key = f"{iterator_key}.items()"
+
+	elif comes_from == "blockDataScript":		
+		# resetting block_data for repeater blocks by reassigning loop_var to "block"
+		loop_var = "block"
+		iterator_key = jinja_safe_key(f"block.{iterator_key}")
+	else:
+		if data_key:
+			iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
+		loop_var = f"key_{iterator_key.replace('.', '__')}"
+		iterator_key = jinja_safe_key(iterator_key)
+		data_key = {"key": loop_var, "comesFrom": "dataScript"}
+	return loop_var, iterator_key, data_key
+
+def get_visibility_key(block, data_key):
+	if block.get("visibilityCondition"):
+		visibility_condition = block.get("visibilityCondition")
+		if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
+			if data_key:
+				visibility_key = f"{extract_data_key(data_key)}.{key}"
+			else:
+				visibility_key = visibility_condition.get("key")
+		else:
+			key = visibility_condition.get("key")
+			if visibility_condition.get("comesFrom") == "props":
+				visibility_key = f"props.{key}"
+			else:
+				visibility_key = f"block.{key}"
+			visibility_key = jinja_safe_key(visibility_key)
+		return visibility_key
+	return None
 
 def get_loop_vars(map_of_std_props_info, key):
 	if key in map_of_std_props_info:

From e97bf61f0bf092c63eb6117245892f94b084fae5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 4 Jan 2026 20:05:02 +0530
Subject: [PATCH 249/547] fix: properly resolving default props while fetching
 block data

---
 frontend/src/components/BuilderBlock.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index eea0ccca8..e4bb9bff6 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -348,7 +348,11 @@ onMounted(async () => {
 
 const allResolvedProps = computed(() => {
 	return {
-		...props.defaultProps,
+		...Object.fromEntries(
+			Object.entries(props.defaultProps || {}).map(([key, value]) => {
+				return [key, value.value];
+			}),
+		),
 		...Object.fromEntries(
 			Object.entries(props.block.getBlockProps()).map(([key, prop]) => {
 				return [

From a5f491d1abbf3338483815aea2f988146457ab28 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 4 Jan 2026 20:08:41 +0530
Subject: [PATCH 250/547] refactor: rearranged codes to group logically
 similiar functions

---
 .../doctype/builder_page/builder_page.py      | 323 +++++++++---------
 1 file changed, 159 insertions(+), 164 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 51cff257c..4e5b0a3d1 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -682,6 +682,88 @@ def get_style(style_obj):
 		else ""
 	)
 
+def get_interpreted_prop_value(prop, data_key):
+	prop_is_dynamic = prop.get("isDynamic", False)
+	prop_comes_from = prop.get("comesFrom", "props")
+	prop_is_standard = prop.get("isStandard", False)
+	prop_value = prop.get("value")
+	
+	default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue") if prop_is_standard else None
+	
+	if prop_value is None:
+		return default_value if prop_is_standard else "undefined"
+	
+	if prop_is_dynamic:
+		key_mapping = {
+			"dataScript": jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value,
+			"blockDataScript": jinja_safe_key(f"block.{prop_value}"),
+			"props": jinja_safe_key(f"props.{prop_value}")
+		}
+		key = key_mapping.get(prop_comes_from, prop_value)
+		fallback = escape_single_quotes(default_value) if default_value is not None else 'undefined'
+		return f"{{{{ {key} if {key} is defined else '{fallback}' }}}}"
+	
+	if prop_is_standard:
+		prop_value = parse_static_value(
+			prop_value or default_value,
+			prop.get("standardOptions", {}).get("type"),
+		)
+	
+	return prop_value if prop_value is not None else "undefined"
+
+def get_iterator_info(block, data_key, map_of_std_props_info):
+	iterator_key = block.get("dataKey").get("key")
+	loop_var = ""
+	comes_from = block.get("dataKey").get("comesFrom", "dataScript")
+
+	if comes_from == "props":
+		loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
+
+		loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
+		iterator_key = jinja_safe_key(f"props.{iterator_key}")
+
+		if len(loop_vars) > 1:  # object repeater
+			iterator_key = f"{iterator_key}.items()"
+
+	elif comes_from == "blockDataScript":		
+		# resetting block_data for repeater blocks by reassigning loop_var to "block"
+		loop_var = "block"
+		iterator_key = jinja_safe_key(f"block.{iterator_key}")
+	else:
+		if data_key:
+			iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
+		loop_var = f"key_{iterator_key.replace('.', '__')}"
+		iterator_key = jinja_safe_key(iterator_key)
+		data_key = {"key": loop_var, "comesFrom": "dataScript"}
+	return loop_var, iterator_key, data_key
+
+def get_visibility_key(block, data_key):
+	if block.get("visibilityCondition"):
+		visibility_condition = block.get("visibilityCondition")
+		if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
+			if data_key:
+				visibility_key = f"{extract_data_key(data_key)}.{key}"
+			else:
+				visibility_key = visibility_condition.get("key")
+		else:
+			key = visibility_condition.get("key")
+			if visibility_condition.get("comesFrom") == "props":
+				visibility_key = f"props.{key}"
+			else:
+				visibility_key = f"block.{key}"
+			visibility_key = jinja_safe_key(visibility_key)
+		return visibility_key
+	return None
+
+def get_loop_vars(map_of_std_props_info, key):
+	if key in map_of_std_props_info:
+		std_prop_info = map_of_std_props_info[key][-1]
+		standard_options = std_prop_info.get("standardOptions", {})
+		if standard_options.get("type") == "array":
+			return ["item"]  # TODO: allow custom item name
+		elif standard_options.get("type") == "object":
+			return ["key", "value"]  # TODO: allow custom key, value names
+	return []
 
 def wrap_with_media_query(style_string, device):
 	if device == "mobile":
@@ -849,35 +931,6 @@ def append_child_tag(tag, child_tag, child_tag_details):
 		tag.append("{% endwith %}{% endwith %}")
 
 
-def to_jinja_literal(obj):
-	# detect Jinja expressions inside strings (e.g. "{{ sample }}")
-	if isinstance(obj, str):
-		stripped = obj.strip()
-		if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
-			# remove the {{ }} so Jinja receives the variable
-			inner = stripped[2:-2].strip()
-			return inner  # returned unquoted
-		return repr(obj)
-
-	if obj is True:
-		return "True"
-	if obj is False:
-		return "False"
-	if obj is None:
-		return "None"
-
-	if isinstance(obj, dict):
-		parts = []
-		for k, v in obj.items():
-			parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
-		return "{ " + ", ".join(parts) + " }"
-
-	if isinstance(obj, list | tuple):
-		return "[ " + ", ".join(str(to_jinja_literal(i)) for i in obj) + " ]"
-
-	return repr(obj)
-
-
 def set_dynamic_content_placeholder(block, data_key=None):
 	block_data_key = block.get("dataKey", {}) or {}
 	dynamic_values = [block_data_key] if block_data_key else []
@@ -951,141 +1004,6 @@ def resolve_path(path):
 
 	return original_resolve_path(path)
 
-
-def parse_static_value(value: str, prop_type: str):
-	match prop_type:
-		case "string":
-			return f"{value}"
-		case "number":
-			try:
-				return float(value)
-			except ValueError:
-				return None
-		case "boolean":
-			if value is True or value is False:
-				return value
-			if value.lower() in ["true", "1"]:
-				return True
-			elif value.lower() in ["false", "0"]:
-				return False
-			else:
-				return None
-		case "array":
-			try:
-				return frappe.parse_json(value)
-			except Exception:
-				return None
-		case "object":
-			try:
-				return frappe.parse_json(value)
-			except Exception:
-				return None
-		case "select":
-			return f"{value}"
-		case _:
-			return f"{value}"
-
-
-def get_interpreted_prop_value(prop, data_key):
-	prop_is_dynamic = prop.get("isDynamic", False)
-	prop_comes_from = prop.get("comesFrom", "props")
-	prop_is_standard = prop.get("isStandard", False)
-	prop_value = prop.get("value")
-	
-	default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue") if prop_is_standard else None
-	
-	if prop_value is None:
-		return default_value if prop_is_standard else "undefined"
-	
-	if prop_is_dynamic:
-		key_mapping = {
-			"dataScript": jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value,
-			"blockDataScript": jinja_safe_key(f"block.{prop_value}"),
-			"props": jinja_safe_key(f"props.{prop_value}")
-		}
-		key = key_mapping.get(prop_comes_from, prop_value)
-		fallback = escape_single_quotes(default_value) if default_value is not None else 'undefined'
-		return f"{{{{ {key} if {key} is defined else '{fallback}' }}}}"
-	
-	if prop_is_standard:
-		prop_value = parse_static_value(
-			prop_value or default_value,
-			prop.get("standardOptions", {}).get("type"),
-		)
-	
-	return prop_value if prop_value is not None else "undefined"
-
-def get_iterator_info(block, data_key, map_of_std_props_info):
-	iterator_key = block.get("dataKey").get("key")
-	loop_var = ""
-	comes_from = block.get("dataKey").get("comesFrom", "dataScript")
-
-	if comes_from == "props":
-		loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
-
-		loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
-		iterator_key = jinja_safe_key(f"props.{iterator_key}")
-
-		if len(loop_vars) > 1:  # object repeater
-			iterator_key = f"{iterator_key}.items()"
-
-	elif comes_from == "blockDataScript":		
-		# resetting block_data for repeater blocks by reassigning loop_var to "block"
-		loop_var = "block"
-		iterator_key = jinja_safe_key(f"block.{iterator_key}")
-	else:
-		if data_key:
-			iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
-		loop_var = f"key_{iterator_key.replace('.', '__')}"
-		iterator_key = jinja_safe_key(iterator_key)
-		data_key = {"key": loop_var, "comesFrom": "dataScript"}
-	return loop_var, iterator_key, data_key
-
-def get_visibility_key(block, data_key):
-	if block.get("visibilityCondition"):
-		visibility_condition = block.get("visibilityCondition")
-		if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
-			if data_key:
-				visibility_key = f"{extract_data_key(data_key)}.{key}"
-			else:
-				visibility_key = visibility_condition.get("key")
-		else:
-			key = visibility_condition.get("key")
-			if visibility_condition.get("comesFrom") == "props":
-				visibility_key = f"props.{key}"
-			else:
-				visibility_key = f"block.{key}"
-			visibility_key = jinja_safe_key(visibility_key)
-		return visibility_key
-	return None
-
-def get_loop_vars(map_of_std_props_info, key):
-	if key in map_of_std_props_info:
-		std_prop_info = map_of_std_props_info[key][-1]
-		standard_options = std_prop_info.get("standardOptions", {})
-		if standard_options.get("type") == "array":
-			return ["item"]  # TODO: allow custom item name
-		elif standard_options.get("type") == "object":
-			return ["key", "value"]  # TODO: allow custom key, value names
-	return []
-
-
-def extract_data_key(data_key):
-	if isinstance(data_key, str):
-		return data_key
-	elif isinstance(data_key, dict):
-		return data_key.get("key")
-	return None
-
-def jinja_safe_key(key):
-    # convert a.b to (a or {}).get('b', {})
-	# to avoid undefined error in jinja
-	keys = (key or "").split(".")
-	key = f"({keys[0]} or {{}})"
-	for k in keys[1:]:
-		key = f"{key}.get('{k}', {{}})"
-	return key
-
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)
 	block["children"] = []
@@ -1121,3 +1039,80 @@ def reset_block(block):
 	block["blockClientScript"] = None
 	block["blockDataScript"] = None
 	return block
+
+def extract_data_key(data_key):
+	if isinstance(data_key, str):
+		return data_key
+	elif isinstance(data_key, dict):
+		return data_key.get("key")
+	return None
+
+def jinja_safe_key(key):
+    # convert a.b to (a or {}).get('b', {})
+	# to avoid undefined error in jinja
+	keys = (key or "").split(".")
+	key = f"({keys[0]} or {{}})"
+	for k in keys[1:]:
+		key = f"{key}.get('{k}', {{}})"
+	return key
+
+def to_jinja_literal(obj):
+	# detect Jinja expressions inside strings (e.g. "{{ sample }}")
+	if isinstance(obj, str):
+		stripped = obj.strip()
+		if re.fullmatch(r"{{\s*.*?\s*}}", stripped):
+			# remove the {{ }} so Jinja receives the variable
+			inner = stripped[2:-2].strip()
+			return inner  # returned unquoted
+		return repr(obj)
+
+	if obj is True:
+		return "True"
+	if obj is False:
+		return "False"
+	if obj is None:
+		return "None"
+
+	if isinstance(obj, dict):
+		parts = []
+		for k, v in obj.items():
+			parts.append(f"{to_jinja_literal(k)}: {to_jinja_literal(v)}")
+		return "{ " + ", ".join(parts) + " }"
+
+	if isinstance(obj, list | tuple):
+		return "[ " + ", ".join(str(to_jinja_literal(i)) for i in obj) + " ]"
+
+	return repr(obj)
+
+def parse_static_value(value: str, prop_type: str):
+	match prop_type:
+		case "string":
+			return f"{value}"
+		case "number":
+			try:
+				return float(value)
+			except ValueError:
+				return None
+		case "boolean":
+			if value is True or value is False:
+				return value
+			if value.lower() in ["true", "1"]:
+				return True
+			elif value.lower() in ["false", "0"]:
+				return False
+			else:
+				return None
+		case "array":
+			try:
+				return frappe.parse_json(value)
+			except Exception:
+				return None
+		case "object":
+			try:
+				return frappe.parse_json(value)
+			except Exception:
+				return None
+		case "select":
+			return f"{value}"
+		case _:
+			return f"{value}"

From 1828ba1bf51fdb9580cfda5f6e70cc249961a241 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 4 Jan 2026 22:30:50 +0530
Subject: [PATCH 251/547] fix: detaching from component retains all std. props

---
 frontend/src/utils/helpers.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 1db2b7598..436021cff 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -358,6 +358,22 @@ const detachBlockFromComponent = (block: Block, componentId: null | string) => {
 	blockCopy.isRepeaterBlock = component?.isRepeaterBlock || block.isRepeaterBlock;
 	blockCopy.visibilityCondition = component?.visibilityCondition || block.visibilityCondition;
 	blockCopy.innerHTML = block.innerHTML || component?.innerHTML;
+	blockCopy.props = Object.fromEntries(
+		Object.entries(block.getBlockProps()).map(([key, prop]) => {
+			if (prop.isStandard) {
+				let value = prop.value || prop.standardOptions?.options?.defaultValue;
+				if (!["string", "select"].includes(prop.standardOptions?.type!)) {
+					prop.value = JSON.stringify(value);
+				} else {
+					prop.value = value;
+				}
+				prop.isStandard = false;
+				prop.standardOptions = undefined;
+			}
+			return [key, prop];
+		}),
+	);
+
 	delete blockCopy.extendedFromComponent;
 	delete blockCopy.isChildOfComponent;
 	delete blockCopy.referenceBlockId;

From 0198394dd77efb627d433b8f6c64cc9800e7ff1c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 5 Jan 2026 19:16:51 +0530
Subject: [PATCH 252/547] fix: Avoid pasting image element that cannot have
 child

closes: https://github.com/frappe/builder/issues/453#issuecomment-3694852343
---
 frontend/src/utils/useBuilderEvents.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 5b23bebf5..5b903a336 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -80,16 +80,24 @@ export function useBuilderEvents(
 			if (file) {
 				uploadBuilderAsset(file).then((res: { fileURL: string; fileName: string }) => {
 					const selectedBlocks = blockController.getSelectedBlocks();
-					const parentBlock = selectedBlocks.length
+					let parentBlock = selectedBlocks.length
 						? selectedBlocks[0]
 						: (canvasStore.activeCanvas?.getRootBlock() as Block);
+
 					let imageBlock = null as unknown as Block;
 					if (parentBlock.isImage()) {
 						imageBlock = parentBlock;
+						imageBlock.setAttribute("src", res.fileURL);
 					} else {
-						imageBlock = parentBlock.addChild(getBlockCopy(getBlockTemplate("image")));
+						while (parentBlock && !parentBlock.canHaveChildren()) {
+							parentBlock = parentBlock.getParentBlock();
+						}
+
+						if (parentBlock) {
+							imageBlock = parentBlock.addChild(getBlockCopy(getBlockTemplate("image")));
+							imageBlock.setAttribute("src", res.fileURL);
+						}
 					}
-					imageBlock.setAttribute("src", res.fileURL);
 				});
 			}
 			return;

From 90b2c2b7384672d464a513b863225cb609318734 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 5 Jan 2026 19:20:29 +0530
Subject: [PATCH 253/547] fix: Use Long Text instead of JSON depth limitation

---
 builder/builder/doctype/builder_page/builder_page.json | 6 +++---
 builder/builder/doctype/builder_page/builder_page.py   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.json b/builder/builder/doctype/builder_page/builder_page.json
index 2e3ce0a26..e1cf3b7a0 100644
--- a/builder/builder/doctype/builder_page/builder_page.json
+++ b/builder/builder/doctype/builder_page/builder_page.json
@@ -69,7 +69,7 @@
   },
   {
    "fieldname": "blocks",
-   "fieldtype": "JSON",
+   "fieldtype": "Long Text",
    "label": "Blocks",
    "read_only": 1
   },
@@ -116,7 +116,7 @@
   },
   {
    "fieldname": "draft_blocks",
-   "fieldtype": "JSON",
+   "fieldtype": "Long Text",
    "label": "Draft Blocks",
    "read_only": 1
   },
@@ -246,7 +246,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-12-10 11:59:00.908359",
+ "modified": "2026-01-05 16:23:52.605250",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Page",
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 5959cd81d..39f27c204 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -98,13 +98,14 @@ class BuilderPage(WebsiteGenerator):
 			BuilderPageClientScript,
 		)
 
+		app: DF.Literal[None]
 		authenticated_access: DF.Check
-		blocks: DF.JSON | None
+		blocks: DF.LongText | None
 		body_html: DF.Code | None
 		canonical_url: DF.Data | None
 		client_scripts: DF.TableMultiSelect[BuilderPageClientScript]
 		disable_indexing: DF.Check
-		draft_blocks: DF.JSON | None
+		draft_blocks: DF.LongText | None
 		dynamic_route: DF.Check
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
@@ -113,7 +114,6 @@ class BuilderPage(WebsiteGenerator):
 		language: DF.Data | None
 		meta_description: DF.SmallText | None
 		meta_image: DF.AttachImage | None
-		module: DF.Link | None
 		page_data_script: DF.Code | None
 		page_name: DF.Data | None
 		page_title: DF.Data | None

From dd6ddaaf23e3d6ec04fe8d8213da30fc76291086 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 05:10:44 +0530
Subject: [PATCH 254/547] fix(Standard Page): Set app instead of module

---
 .../src/components/Settings/PageGeneral.vue   |  6 +-
 frontend/src/types/Builder/BuilderPage.ts     | 72 +++++++++----------
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 6a3a75893..68b1e105b 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -145,10 +145,8 @@
 									class="w-fit"
 									type="select"
 									:options="appOptions"
-									:modelValue="pageStore.activePage?.module"
-									@update:modelValue="
-										(val: string) => pageStore.updateActivePage('module', val)
-									"></BuilderInput>
+									:modelValue="pageStore.activePage?.app"
+									@update:modelValue="(val: string) => pageStore.updateActivePage('app', val)"></BuilderInput>
 							</div>
 						</div>
 					</template>
diff --git a/frontend/src/types/Builder/BuilderPage.ts b/frontend/src/types/Builder/BuilderPage.ts
index 11f46dee4..5dbf9fda8 100644
--- a/frontend/src/types/Builder/BuilderPage.ts
+++ b/frontend/src/types/Builder/BuilderPage.ts
@@ -1,63 +1,63 @@
-import { BuilderPageClientScript } from './BuilderPageClientScript'
+import { BuilderPageClientScript } from "./BuilderPageClientScript";
 
-export interface BuilderPage{
-	creation: string
-	name: string
-	modified: string
-	owner: string
-	modified_by: string
-	docstatus: 0 | 1 | 2
-	parent?: string
-	parentfield?: string
-	parenttype?: string
-	idx?: number
+export interface BuilderPage {
+	creation: string;
+	name: string;
+	modified: string;
+	owner: string;
+	modified_by: string;
+	docstatus: 0 | 1 | 2;
+	parent?: string;
+	parentfield?: string;
+	parenttype?: string;
+	idx?: number;
 	/**	Published : Check	*/
-	published?: 0 | 1
+	published?: 0 | 1;
 	/**	Page Name : Data	*/
-	page_name?: string
+	page_name?: string;
 	/**	Route : Data	*/
-	route?: string
+	route?: string;
 	/**	Dynamic Route : Check - Map route parameters into form variables. Example <code>/profile/:user</code>	*/
-	dynamic_route?: 0 | 1
+	dynamic_route?: 0 | 1;
 	/**	Is Standard : Check	*/
-	is_standard?: 0 | 1
+	is_standard?: 0 | 1;
 	/**	Is Template : Check	*/
-	is_template?: 0 | 1
+	is_template?: 0 | 1;
 	/**	App : Link - Installed Application	*/
-	module?: string
+	app?: string;
 	/**	Blocks : JSON	*/
-	blocks?: any
+	blocks?: any;
 	/**	Draft Blocks : JSON	*/
-	draft_blocks?: any
+	draft_blocks?: any;
 	/**	Page Data Script : Code - data.events = frappe.get_list("Event")
 <br>
 <b>Note:</b> Each key value of data should be a list.	*/
-	page_data_script?: string
+	page_data_script?: string;
 	/**	Head HTML : Code - This will be appended at the end of the &lt;head&gt;	*/
-	head_html?: string
+	head_html?: string;
 	/**	Body HTML : Code - This will be appended at the end of the &lt;body&gt;	*/
-	body_html?: string
+	body_html?: string;
 	/**	Client Scripts : Table MultiSelect - Builder Page Client Script	*/
-	client_scripts?: BuilderPageClientScript[]
+	client_scripts?: BuilderPageClientScript[];
 	/**	Page Preview : Data	*/
-	preview?: string
+	preview?: string;
 	/**	Favicon : Attach Image - An icon file with .ico extension. Should be 16 x 16 px.
 You can generate using favicon-generator.org	*/
-	favicon?: string
+	favicon?: string;
 	/**	Title : Data	*/
-	page_title?: string
+	page_title?: string;
 	/**	Description : Small Text	*/
-	meta_description?: string
+	meta_description?: string;
 	/**	Image : Attach Image	*/
-	meta_image?: string
+	meta_image?: string;
 	/**	Canonical URL : Data - The preferred URL version of this page for search engines. If not set, the current page URL will be used.	*/
-	canonical_url?: string
+	canonical_url?: string;
 	/**	Language : Data - Language code for HTML (e.g., en, es, fr, de). Uses default if unset.	*/
-	language?: string
+	language?: string;
 	/**	Authenticated Access : Check - Only allow logged-in users to view this page.	*/
-	authenticated_access?: 0 | 1
+	authenticated_access?: 0 | 1;
 	/**	Disable Indexing : Check - Prevent search engines from indexing this page	*/
-	disable_indexing?: 0 | 1
+	disable_indexing?: 0 | 1;
 	/**	Project Folder : Link - Builder Project Folder	*/
-	project_folder?: string
-}
\ No newline at end of file
+	project_folder?: string;
+}

From ea74f0c8faf73af7f1f1f57f42299c94dc384a0d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 05:45:57 +0530
Subject: [PATCH 255/547] fix: Add feedback via toast while enabling standard
 page or changing the app

---
 frontend/src/components/Controls/Switch.vue   |  8 +---
 .../src/components/Settings/PageGeneral.vue   | 45 +++++++++++++++----
 frontend/src/utils/helpers.ts                 |  5 +++
 3 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Controls/Switch.vue b/frontend/src/components/Controls/Switch.vue
index af7741e09..32bdef593 100644
--- a/frontend/src/components/Controls/Switch.vue
+++ b/frontend/src/components/Controls/Switch.vue
@@ -1,11 +1,5 @@
 <template>
-	<Switch
-		v-model="value"
-		class="!px-0 [&>button>span]:bg-surface-gray-1 [&>span>[id^=headlessui-description]]:text-ink-gray-5 [&>span>[id^=headlessui-label]]:text-ink-gray-9"
-		:class="{
-			'[&>button]:bg-surface-gray-3 hover:[&>button]:!bg-surface-gray-4': !value,
-			'[&>button]:bg-surface-gray-6 hover:[&>button]:!bg-surface-gray-5': value,
-		}" />
+	<Switch v-model="value" class="!px-0" />
 </template>
 <script setup lang="ts">
 import { useVModel } from "@vueuse/core";
diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 68b1e105b..037113e6e 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -127,34 +127,37 @@
 						description="Prevent search engines from indexing this page"
 						:modelValue="Boolean(pageStore.activePage?.disable_indexing)"
 						@update:modelValue="(val: Boolean) => pageStore.updateActivePage('disable_indexing', val)" />
-					<template v-if="isDeveloperMode">
+					<template v-if="isDeveloperMode || pageStore.activePage?.is_standard">
 						<hr class="w-full border-outline-gray-2" />
 						<Switch
 							size="sm"
 							label="Standard Page"
+							:disabled="!isDeveloperMode && pageStore.activePage?.is_standard"
 							description="Make this page a standard page that can be exported to an app"
 							:modelValue="Boolean(pageStore.activePage?.is_standard)"
-							@update:modelValue="(val: Boolean) => pageStore.updateActivePage('is_standard', val)" />
+							@update:modelValue="handleStandardPageToggle" />
+						<hr v-if="pageStore.activePage?.is_standard" class="w-full border-outline-gray-2" />
 						<div v-if="pageStore.activePage?.is_standard" class="flex items-center justify-between">
 							<div class="flex flex-col gap-2">
 								<span class="text-base font-medium text-ink-gray-9">App</span>
-								<p class="text-base text-ink-gray-5">Select the app for this standard page</p>
+								<p class="max-w-xs text-p-sm text-ink-gray-7">Select the app for this standard page</p>
 							</div>
 							<div>
 								<BuilderInput
 									class="w-fit"
 									type="select"
+									:disabled="!isDeveloperMode && pageStore.activePage?.is_standard"
 									:options="appOptions"
 									:modelValue="pageStore.activePage?.app"
-									@update:modelValue="(val: string) => pageStore.updateActivePage('app', val)"></BuilderInput>
+									@update:modelValue="handleAppChange"></BuilderInput>
 							</div>
 						</div>
 					</template>
-					<hr class="w-full border-outline-gray-2" />
-					<div class="flex items-center justify-between">
+					<hr class="w-full border-outline-gray-2" v-if="!pageStore.activePage?.is_standard" />
+					<div class="flex items-center justify-between" v-if="!pageStore.activePage?.is_standard">
 						<div class="flex flex-col gap-2">
 							<span class="text-base font-medium text-ink-gray-9">Folder</span>
-							<p class="text-base text-ink-gray-5">Set folder to organize your page</p>
+							<p class="max-w-xs text-p-sm text-ink-gray-7">Set folder to organize your page</p>
 						</div>
 						<div>
 							<BuilderInput
@@ -181,8 +184,10 @@ import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderProjectFolder } from "@/types/Builder/BuilderProjectFolder";
+import { toTitleCase } from "@/utils/helpers";
 import { createResource, FeatherIcon } from "frappe-ui";
 import { computed } from "vue";
+import { toast } from "vue-sonner";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
@@ -225,11 +230,35 @@ const appOptions = computed(() => {
 
 	const options = (installedAppsResource.data || []).map((app: string) => {
 		return {
-			label: app.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+			label: toTitleCase(app),
 			value: app,
 		};
 	});
 
 	return [defaultOption, ...options];
 });
+
+const handleStandardPageToggle = async (val: Boolean) => {
+	await pageStore.updateActivePage("is_standard", val);
+	notifyStandardPageExport();
+};
+
+const handleAppChange = async (val: string) => {
+	await pageStore.updateActivePage("app", val);
+	notifyStandardPageExport();
+};
+
+const notifyStandardPageExport = () => {
+	const activePage = pageStore.activePage;
+
+	if (!activePage?.app) {
+		toast.warning("Please select an app for this standard page");
+		return;
+	}
+
+	if (activePage.is_standard) {
+		const appName = toTitleCase(activePage.app);
+		toast.success(`This page will be exported to ${appName} app as standard page`);
+	}
+};
 </script>
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 3cf81610c..c7febce38 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -115,6 +115,10 @@ function getRandomColor() {
 	return HSVToHex(Math.random() * 360, 25, 100);
 }
 
+function toTitleCase(str: string): string {
+	return str.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
 async function confirm(message: string, title: string = "Confirm"): Promise<boolean> {
 	return new Promise((resolve) => {
 		confirmDialog({
@@ -1088,6 +1092,7 @@ export {
 	stripExtension,
 	throttle,
 	toKebabCase,
+	toTitleCase,
 	triggerCopyEvent,
 	uploadBuilderAsset,
 	uploadUserFont,

From 6b82515a6a8a03efeafed49f1db879214a7eea65 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 08:47:49 +0530
Subject: [PATCH 256/547] fix: Route popover position

---
 frontend/src/components/BuilderToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 84b82fde8..7e60c4821 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -24,7 +24,7 @@
 			</div>
 		</div>
 		<div>
-			<Popover placement="bottom-start" popoverClass="!absolute top-0 !mt-[20px]">
+			<Popover placement="bottom" popoverClass="!mt-[20px]">
 				<template #target="{ togglePopover, isOpen }">
 					<div class="flex cursor-pointer items-center gap-2 p-2 text-ink-gray-8">
 						<div class="flex h-6 items-center text-base text-ink-gray-6" v-if="!pageStore.activePage">

From 03460700c6927e73c283c6e653de38b3b4facb9b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 08:58:18 +0530
Subject: [PATCH 257/547] fix: Simplify asset paths from builder_files/assets
 to builder_assets

---
 builder/export_import_standard_page.py | 4 +---
 builder/utils.py                       | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/builder/export_import_standard_page.py b/builder/export_import_standard_page.py
index bebab1c50..39b725905 100644
--- a/builder/export_import_standard_page.py
+++ b/builder/export_import_standard_page.py
@@ -237,7 +237,6 @@ def copy_font_file(file_url, assets_path, target_app="builder"):
 		if file_url.startswith("/files/"):
 			source_path = os.path.join(frappe.local.site_path, "public", file_url.lstrip("/"))
 		elif file_url.startswith("/assets/") and "/builder_files/" in file_url:
-			# Extract app name from URL like /assets/{app}/builder_files/assets/file.png
 			parts = file_url.split("/")
 			if len(parts) >= 3:
 				app_name = parts[2]
@@ -245,7 +244,6 @@ def copy_font_file(file_url, assets_path, target_app="builder"):
 			else:
 				return None
 		elif file_url.startswith("/builder_assets/"):
-			# Legacy path - check www folder
 			source_path = os.path.join(frappe.get_app_path("builder"), "www", file_url.lstrip("/"))
 		else:
 			return None
@@ -254,7 +252,7 @@ def copy_font_file(file_url, assets_path, target_app="builder"):
 			filename = os.path.basename(file_url)
 			dest_path = os.path.join(assets_path, filename)
 			shutil.copy2(source_path, dest_path)
-			return f"/assets/{target_app}/builder_files/assets/{filename}"
+			return f"/assets/{target_app}/builder_assets/{filename}"
 	except Exception as e:
 		frappe.log_error(f"Failed to copy font file {file_url}: {e!s}")
 
diff --git a/builder/utils.py b/builder/utils.py
index 4e7bcb1e8..51493504b 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -482,7 +482,7 @@ def copy_from_site_files(file_url, assets_path, target_app="builder"):
 
 def copy_from_builder_assets(file_url, assets_path, target_app="builder"):
 	"""Copy file from builder assets directory"""
-	if file_url.startswith("/assets/") and "/builder_files/" in file_url:
+	if file_url.startswith("/assets/") and "/builder_assets/" in file_url:
 		parts = file_url.split("/")
 		if len(parts) >= 3:
 			app_name = parts[2]
@@ -499,7 +499,7 @@ def copy_file_to_assets(source_path, file_url, assets_path, target_app="builder"
 	filename = os.path.basename(file_url)
 	dest_path = os.path.join(assets_path, filename)
 	shutil.copy2(source_path, dest_path)
-	return f"/assets/{target_app}/builder_files/assets/{filename}"
+	return f"/assets/{target_app}/builder_assets/{filename}"
 
 
 def extract_components_from_blocks(blocks):
@@ -577,11 +577,11 @@ def get_export_paths(app_path, export_name):
 	"""Get all export directory paths"""
 	builder_files_path = os.path.join(app_path, "builder_files")
 	pages_path = os.path.join(builder_files_path, "pages")
-	public_builder_files_path = os.path.join(app_path, "public", "builder_files")
+	public_builder_files_path = os.path.join(app_path, "public", "builder_assets")
 
 	return {
 		"page_path": os.path.join(pages_path, export_name),
-		"assets_path": os.path.join(public_builder_files_path, "assets"),
+		"assets_path": public_builder_files_path,
 		"client_scripts_path": os.path.join(builder_files_path, "client_scripts"),
 		"components_path": os.path.join(builder_files_path, "components"),
 		"builder_files_path": builder_files_path,

From 0d03ef230bb9a1e4f2a9a855e83b9ad515723d5b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 09:31:52 +0530
Subject: [PATCH 258/547] fix: Check builder_assets in asset url while copying
 assets

---
 builder/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/utils.py b/builder/utils.py
index 51493504b..7a1721370 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -464,7 +464,7 @@ def copy_asset_file(file_url, assets_path, target_app="builder"):
 		if file_url.startswith("/files/"):
 			return copy_from_site_files(file_url, assets_path, target_app)
 		elif file_url.startswith("/builder_assets/") or (
-			file_url.startswith("/assets/") and "/builder_files/" in file_url
+			file_url.startswith("/assets/") and "/builder_assets/" in file_url
 		):
 			return copy_from_builder_assets(file_url, assets_path, target_app)
 	except Exception as e:

From 247019fd0021d2b70a3fa1e2c2efb0b0a707466e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 6 Jan 2026 11:21:54 +0530
Subject: [PATCH 259/547] fix: pass default value to std. props inputs

---
 .../BlockPropertySections/StandardPropsInputSection.ts        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index e4bb8557f..f77a62842 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -74,6 +74,10 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 		getPlaceholder: () => {
 			return propDetails.standardOptions?.options?.defaultValue || null;
 		},
+		defaultValue:
+			type == "boolean"
+				? propDetails.standardOptions?.options?.defaultValue == "true"
+				: propDetails.standardOptions?.options?.defaultValue,
 		...map,
 	};
 	return map;

From af681465ed1d02ef77621c9b8b39d3e38e5d774d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 6 Jan 2026 15:02:29 +0530
Subject: [PATCH 260/547] fix: Inconsistent gap in folder listing

---
 frontend/src/components/DashboardSidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index e5e96bc3c..2b3b642e0 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -117,7 +117,7 @@
 					),
 				}"
 				@click="setFolderActive(project.folder_name)">
-				<span class="flex flex-1 gap-1">
+				<span class="flex flex-1 gap-2">
 					<FolderIcon class="size-4"></FolderIcon>
 					<EditableSpan
 						v-model="project.folder_name"
@@ -128,7 +128,7 @@
 								renamingFolder = '';
 							}
 						"
-						class="w-full">
+						class="w-full capitalize">
 						{{ project.folder_name }}
 					</EditableSpan>
 				</span>

From 62eacf6cde8cde45a135507aa494b85658b023d7 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 7 Jan 2026 00:48:34 +0530
Subject: [PATCH 261/547] fix: undoing after detaching from component did not
 restore std. props

- refreshing would fix the issue
- happened because the component props were directly mutated
---
 frontend/src/utils/helpers.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 280e7fe6d..1dab80a86 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -364,17 +364,18 @@ const detachBlockFromComponent = (block: Block, componentId: null | string) => {
 	blockCopy.innerHTML = block.innerHTML || component?.innerHTML;
 	blockCopy.props = Object.fromEntries(
 		Object.entries(block.getBlockProps()).map(([key, prop]) => {
-			if (prop.isStandard) {
-				let value = prop.value || prop.standardOptions?.options?.defaultValue;
-				if (!["string", "select"].includes(prop.standardOptions?.type!)) {
-					prop.value = JSON.stringify(value);
+			const propCopy = { ...prop }; // creating copy to avoid mutating original prop
+			if (propCopy.isStandard) {
+				let value = propCopy.value || propCopy.standardOptions?.options?.defaultValue;
+				if (!["string", "select"].includes(propCopy.standardOptions?.type!)) {
+					propCopy.value = JSON.stringify(value);
 				} else {
-					prop.value = value;
+					propCopy.value = value;
 				}
-				prop.isStandard = false;
-				prop.standardOptions = undefined;
+				propCopy.isStandard = false;
+				propCopy.standardOptions = undefined;
 			}
-			return [key, prop];
+			return [key, propCopy];
 		}),
 	);
 

From 723d5c1ff532bce5f7c6b59f431124b89b17203f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 7 Jan 2026 11:47:05 +0530
Subject: [PATCH 262/547] fix: Redirect list style

---
 frontend/src/components/Settings/GlobalRedirects.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
index 671ce8dc5..7bc953846 100644
--- a/frontend/src/components/Settings/GlobalRedirects.vue
+++ b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -25,7 +25,7 @@
 					v-for="row in rows"
 					:key="row.id"
 					class="group flex items-center rounded-sm border-b border-outline-gray-1 px-2 py-2 text-sm text-ink-gray-7 hover:bg-surface-gray-2">
-					<div class="w-1/2">
+					<div class="w-[calc(50%-.5rem)]">
 						<BuilderInput
 							v-if="editingRedirect === row.id"
 							v-model="editForm.from"
@@ -40,7 +40,7 @@
 							{{ row.from }}
 						</code>
 					</div>
-					<div class="w-1/2 pl-3 pr-2">
+					<div class="w-[calc(50%-.5rem)] pl-3 pr-2">
 						<BuilderInput
 							v-if="editingRedirect === row.id"
 							v-model="editForm.to"

From cb85e5c946ca9a724001b4c38adf5dcc6ca839ba Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 7 Jan 2026 16:52:53 +0530
Subject: [PATCH 263/547] fix: Do not optimize image more than required

---
 frontend/src/components/ImageUploadInput.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index 88d7ce730..3c0cdf376 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -41,7 +41,6 @@
 					:uploadArgs="{
 						private: false,
 						folder: 'Home/Builder Uploads',
-						optimize: true,
 						upload_endpoint: '/api/method/builder.api.upload_builder_asset',
 					}">
 					<template v-slot="{ openFileSelector }">

From e9f956e3e2aed468956799e078a288c102d81ed1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 10:35:12 +0530
Subject: [PATCH 264/547] fix: handle completion for 'this' in
 jsCompletionsFromGlobalScope

---
 frontend/src/utils/jsGlobalCompletion.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/utils/jsGlobalCompletion.ts b/frontend/src/utils/jsGlobalCompletion.ts
index 7c28f6161..32fcc6cd2 100644
--- a/frontend/src/utils/jsGlobalCompletion.ts
+++ b/frontend/src/utils/jsGlobalCompletion.ts
@@ -37,6 +37,9 @@ export default function jsCompletionsFromGlobalScope(context: any, blockProps: R
 
 	if (completePropertyAfter.includes(nodeBefore.name) && nodeBefore.parent?.name == "MemberExpression") {
 		let object = nodeBefore.parent.getChild("Expression");
+		if(object?.name == "this") {
+			return completeProperties(nodeBefore.from, document.body);
+		}
 		if (object?.name == "VariableName") {
 			let from = /\./.test(nodeBefore.name) ? nodeBefore.to : nodeBefore.from;
 			let variableName = context.state.sliceDoc(object.from, object.to);

From 51f9f3c849ff852058c4eac786158c0af994e01e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 11:56:23 +0530
Subject: [PATCH 265/547] fix: unique ids for repeating blocks

previous solution was wrong as it suffered from the same issue of being re-used as classes and blockIds, solved using loop.index
---
 builder/builder/doctype/builder_page/builder_page.py | 10 +++++++---
 builder/hooks.py                                     |  2 +-
 builder/utils.py                                     |  3 +++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 37fcbc2f3..b5b18d8a7 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -639,9 +639,9 @@ def get_tag(block, soup, data_key=None):
 			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
 
 			if block.get("blockClientScript"):
-				block_unique_id = f"{block.get('blockId')}-{frappe.generate_hash(length=3)}"  # extra hash as repeating blocks have same blockId
-				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{block_unique_id}\"]'), {{{{ props | tojson }}}});"
-				tag.attrs["data-block-id"] = block_unique_id
+				block_unique_id = f"{block.get('blockId')}"  # extra hash as repeating blocks have same blockId
+				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), {{{{ props | tojson }}}});"
+				tag.attrs["data-block-id"] = f"{{{{ unique_hash }}}}"
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)
@@ -901,6 +901,8 @@ def append_child_tag(tag, child_tag, child_tag_details):
 	child_tag_block_script = child_tag_details.get('block_data_script')
 	visibility_key = child_tag_details.get('visibility_key')
 	default_props = child_tag_details.get('default_props')
+ 
+	tag.append("{% with unique_hash = (loop.index if loop is defined else 0) | hash %}")
 
 	if default_props:
 		default_props = ", ".join([f"'{var}': {var}" for var in default_props])
@@ -930,6 +932,8 @@ def append_child_tag(tag, child_tag, child_tag_details):
 	if default_props:
 		tag.append("{% endwith %}{% endwith %}")
 
+	tag.append("{% endwith %}")
+
 
 def set_dynamic_content_placeholder(block, data_key=None):
 	block_data_key = block.get("dataKey", {}) or {}
diff --git a/builder/hooks.py b/builder/hooks.py
index a258c5c42..6002987f6 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -56,7 +56,7 @@
 
 # add methods and filters to jinja environment
 jinja = {
-	"filters": ["builder.utils.combine", "builder.utils.execute_script_and_combine"]
+	"filters": ["builder.utils.combine", "builder.utils.execute_script_and_combine", "builder.utils.hash"],
 }
 
 # Installation
diff --git a/builder/utils.py b/builder/utils.py
index 10388fa66..1ff984964 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -598,6 +598,9 @@ def combine(a, b):
     res.update(b)
     return res
 
+def hash(s):
+    return f"{frappe.generate_hash(length=6)}-{s}"
+
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()

From c04154e0479c42bde25f4a9c3b15e71da6e15832 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 12:14:05 +0530
Subject: [PATCH 266/547] refactor: added comments for clarifying the need for
 unique_hash

---
 builder/builder/doctype/builder_page/builder_page.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index b5b18d8a7..546321cf7 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -639,9 +639,8 @@ def get_tag(block, soup, data_key=None):
 			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
 
 			if block.get("blockClientScript"):
-				block_unique_id = f"{block.get('blockId')}"  # extra hash as repeating blocks have same blockId
 				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), {{{{ props | tojson }}}});"
-				tag.attrs["data-block-id"] = f"{{{{ unique_hash }}}}"
+				tag.attrs["data-block-id"] = f"{{{{ unique_hash }}}}" # unique hash as repeating blocks have same blockId / class
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
 				tag.append(script_tag)

From 8bbe606bc5b7af4d42af58834a39dea9efe869cc Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 8 Jan 2026 12:19:03 +0530
Subject: [PATCH 267/547] fix: Align dashboard builder logo with logo in editor
 view

---
 frontend/src/components/DashboardSidebar.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 2b3b642e0..8be8384a5 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -1,8 +1,8 @@
 <template>
 	<section
-		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-3 border-r border-outline-gray-1 bg-surface-gray-1 p-2 max-lg:hidden dark:bg-surface-white">
+		class="sticky bottom-0 left-0 top-0 flex min-h-fit w-60 flex-col gap-2 border-r border-outline-gray-1 bg-surface-gray-1 p-1 max-lg:hidden dark:bg-surface-white">
 		<div class="flex flex-col">
-			<div class="mb-2 flex gap-2">
+			<div class="flex gap-2">
 				<div class="flex w-full items-center">
 					<Dropdown
 						:options="[
@@ -61,10 +61,9 @@
 						size="sm">
 						<template v-slot="{ open }">
 							<div
-								class="flex w-full items-center justify-between rounded py-1"
+								class="mx-0.5 flex w-full items-center justify-between rounded p-1.5 dark:hover:bg-surface-gray-2"
 								:class="{
-									'!bg-surface-white shadow-sm dark:!bg-surface-gray-2': open,
-									'!p-2 hover:bg-surface-gray-2': true,
+									'bg-surface-white shadow-sm': open,
 								}">
 								<div class="flex w-full cursor-pointer items-center gap-2">
 									<img src="/builder_logo.png" alt="logo" class="h-7" />
@@ -80,6 +79,8 @@
 					</Dropdown>
 				</div>
 			</div>
+		</div>
+		<div class="flex flex-1 flex-col p-1">
 			<span
 				class="flex cursor-pointer gap-2 rounded p-2 text-base text-ink-gray-6"
 				@click="() => setFolderActive('')"
@@ -95,8 +96,6 @@
 				<SettingsIcon class="size-4"></SettingsIcon>
 				<span>Settings</span>
 			</span>
-		</div>
-		<div class="flex flex-1 flex-col">
 			<div class="flex items-center justify-between p-2 text-base text-ink-gray-6">
 				<span>Folders</span>
 				<BuilderButton

From 1d2ff110e43c0291abb727fb43bf5db6976a8578 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 8 Jan 2026 12:20:16 +0530
Subject: [PATCH 268/547] fix: Handle dashboard list edge case

---
 frontend/src/components/DashboardContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DashboardContent.vue b/frontend/src/components/DashboardContent.vue
index 192d667b0..dc987b6e2 100644
--- a/frontend/src/components/DashboardContent.vue
+++ b/frontend/src/components/DashboardContent.vue
@@ -35,7 +35,7 @@
 			<BuilderButton
 				class="m-auto mt-12 w-fit text-sm"
 				@click="loadMore"
-				v-if="webPages.data.length && webPages.hasNextPage"
+				v-if="webPages.data?.length && webPages.hasNextPage"
 				variant="subtle"
 				size="sm">
 				Load More

From 94bd549526733f819e4c7611457067d851c75969 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 13:01:57 +0530
Subject: [PATCH 269/547] fix: opening other dialogs/popovers did not hide
 draggable popup (#456)

---
 .../components/Controls/DraggablePopup.vue    |  8 ++-
 frontend/src/composables/useDomAttr.ts        | 56 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/composables/useDomAttr.ts

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index 9b08960a6..1fb3a25d2 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -1,6 +1,6 @@
 <template>
 	<teleport to="body">
-		<div class="relative" ref="popover">
+		<div class="relative" v-show="!isHidden" ref="popover">
 			<div class="fixed" @mousedown.stop>
 				<div
 					ref="popoverContent"
@@ -35,6 +35,7 @@
 </template>
 
 <script setup lang="ts">
+import { useDomAttr } from "@/composables/useDomAttr";
 import { useEventListener } from "@vueuse/core";
 import { nextTick, onMounted, Ref, ref } from "vue";
 
@@ -70,6 +71,11 @@ const props = withDefaults(
 	},
 );
 
+const isHidden = useDomAttr(popover, "data-aria-hidden", {
+	immediate: true,
+	transform: (v) => v === "true",
+});
+
 const emit = defineEmits(["update:modelValue"]);
 
 const popoverContent = ref(null) as Ref<HTMLElement | null>;
diff --git a/frontend/src/composables/useDomAttr.ts b/frontend/src/composables/useDomAttr.ts
new file mode 100644
index 000000000..8b2a69ece
--- /dev/null
+++ b/frontend/src/composables/useDomAttr.ts
@@ -0,0 +1,56 @@
+import { ref, watch, onMounted, onBeforeUnmount, unref } from 'vue'
+
+type MaybeRef<T> = T | { value: T }
+
+export function useDomAttr(
+  target: MaybeRef<HTMLElement | null>,
+  attrName: string,
+  options: {
+    immediate?: boolean
+    transform?: (value: string | null) => any
+  } = {}
+) {
+  const {
+    immediate = true,
+    transform = (v) => v
+  } = options
+
+  const value = ref<any>(null)
+  let observer: MutationObserver | null = null
+
+  const read = () => {
+    const el = unref(target as HTMLElement)
+    if (!el) return
+    value.value = transform(el.getAttribute(attrName))
+  }
+
+  onMounted(() => {
+    const el = unref(target as HTMLElement)
+    if (!el) return
+
+    if (immediate) read()
+
+    observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (
+          m.type === 'attributes' &&
+          m.attributeName === attrName
+        ) {
+          read()
+        }
+      }
+    })
+
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: [attrName]
+    })
+  })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+    observer = null
+  })
+
+  return value
+}

From a84c556292d481e3e9584a4e3420eee6fd10b375 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 8 Jan 2026 14:07:45 +0530
Subject: [PATCH 270/547] chore: Update frappe-ui

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 213c802a6..e239181ef 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 213c802a638817d8927a1cbabd307fab8f2667ad
+Subproject commit e239181ef6a22efcfa7dc3466ff9c8899daa5bba
diff --git a/frontend/package.json b/frontend/package.json
index c4cf7f6c4..f82399e1c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.243",
+    "frappe-ui": "0.1.248",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",

From ab746fc4ecbca7e8617c1b7160b7e2f8ec237c55 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 8 Jan 2026 16:39:52 +0530
Subject: [PATCH 271/547] chore: Update frappe-ui

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index e239181ef..02a667017 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit e239181ef6a22efcfa7dc3466ff9c8899daa5bba
+Subproject commit 02a667017305d6b83618b996e6d78c3eb5edebc0
diff --git a/frontend/package.json b/frontend/package.json
index f82399e1c..810e87263 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.248",
+    "frappe-ui": "0.1.250",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",

From 52718beb671646a2c551b99428b1b034023ecb59 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 17:31:26 +0530
Subject: [PATCH 272/547] feat: use to_safe_json filter in place of tojson

---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 builder/hooks.py                                     | 8 +++++++-
 builder/utils.py                                     | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 546321cf7..b4fb36100 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -639,7 +639,7 @@ def get_tag(block, soup, data_key=None):
 			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
 
 			if block.get("blockClientScript"):
-				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), {{{{ props | tojson }}}});"
+				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), {{{{ props | to_safe_json }}}});"
 				tag.attrs["data-block-id"] = f"{{{{ unique_hash }}}}" # unique hash as repeating blocks have same blockId / class
 				script_tag = soup.new_tag("script")
 				script_tag.string = script_content
diff --git a/builder/hooks.py b/builder/hooks.py
index 6002987f6..070ea50e1 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -54,9 +54,15 @@
 # Jinja
 # ----------
 
+# add methods and filters to jinja environment
 # add methods and filters to jinja environment
 jinja = {
-	"filters": ["builder.utils.combine", "builder.utils.execute_script_and_combine", "builder.utils.hash"],
+    "filters": [
+        "builder.utils.combine",
+        "builder.utils.execute_script_and_combine",
+        "builder.utils.hash",
+        "builder.utils.to_safe_json",
+    ],
 }
 
 # Installation
diff --git a/builder/utils.py b/builder/utils.py
index 1ff984964..a1f30c1ef 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -601,6 +601,9 @@ def combine(a, b):
 def hash(s):
     return f"{frappe.generate_hash(length=6)}-{s}"
 
+def to_safe_json(data):
+	return frappe.as_json(data)
+
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()

From e6a5522b119d1293ca33f872ebad8bf301bf4ddb Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 17:31:47 +0530
Subject: [PATCH 273/547] fix: dynamic prop resolution in nested block data

---
 frontend/src/components/BuilderBlock.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index e4bb9bff6..3fd589eff 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -361,7 +361,7 @@ const allResolvedProps = computed(() => {
 						key,
 						props.block,
 						getDataScriptValue,
-						(path: string) => ({ ...props.blockData }[path]), // block props can not refer to own block data items
+						(path: string) => getDataForKey({...props.blockData}, path), // block props can not refer to own block data items
 						props.defaultProps,
 					),
 				];
@@ -405,6 +405,7 @@ watch(
 			blockDataStore.setBlockData(props.block.blockId, {}, "own");
 			return;
 		}
+		console.log("Fetching block data for", allResolvedProps.value, props.blockData);
 		fetchBlockData
 			.fetch({
 				block_id: props.block.blockId,

From 725ebf8e5f8e846fbf11f18891f73bd728de02c7 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 17:50:26 +0530
Subject: [PATCH 274/547] fix: python completions for `props.get()`

---
 frontend/src/utils/pythonCustomCompletion.ts | 46 ++++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/frontend/src/utils/pythonCustomCompletion.ts b/frontend/src/utils/pythonCustomCompletion.ts
index 09d657010..542446fcd 100644
--- a/frontend/src/utils/pythonCustomCompletion.ts
+++ b/frontend/src/utils/pythonCustomCompletion.ts
@@ -1,6 +1,6 @@
 import { syntaxTree } from "@codemirror/language";
 
-const completePropertyAfter = ["PropertyName", ".", "?.", "["];
+const completePropertyAfter = ["PropertyName", ".", "?.", "[", "("];
 const dontCompleteIn = [
 	"TemplateString",
 	"LineComment",
@@ -21,6 +21,37 @@ export default function customPythonCompletions(
 ) {
 	let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
 	const hasProps = Object.keys(blockProps).length > 0;
+	const propCompletions = {
+		from: context.pos,
+		options: Object.keys(blockProps).map((key) => {
+			return {
+				label: key,
+				displayLabel: `${key}`,
+				apply: `"${key}"`,
+				type: "property",
+			};
+		}),
+	};
+
+	if (nodeBefore.name === "(" && nodeBefore.parent?.name === "ArgList") {
+		let callExpression = nodeBefore.parent.parent;
+		if (callExpression?.name === "CallExpression") {
+			let memberExpr = callExpression.getChild("MemberExpression");
+			if (memberExpr) {
+				let object = memberExpr.getChild("Expression");
+				let property = memberExpr.getChild("PropertyName");
+
+				if (object?.name === "VariableName" && property) {
+					let objectName = context.state.sliceDoc(object.from, object.to);
+					let propertyName = context.state.sliceDoc(property.from, property.to);
+
+					if (objectName === "props" && propertyName === "get" && hasProps) {
+						return propCompletions;
+					}
+				}
+			}
+		}
+	}
 	if (completePropertyAfter.includes(nodeBefore.name) && nodeBefore.parent?.name == "MemberExpression") {
 		let object = nodeBefore.parent.getChild("Expression");
 
@@ -28,21 +59,10 @@ export default function customPythonCompletions(
 			let from = /\./.test(nodeBefore.name) ? nodeBefore.to : nodeBefore.from;
 			let variableName = context.state.sliceDoc(object.from, object.to);
 			if (variableName === "props") {
-
 				let isBracket = nodeBefore.name === "[";
 				if (!hasProps || !isBracket) return null;
 				console.log(variableName, blockProps, isBracket);
-				return {
-					from: context.pos,
-					options: Object.keys(blockProps).map((key) => {
-						return {
-							label: key,
-							displayLabel: `${key}`,
-							apply: `"${key}"`,
-							type: "property",
-						};
-					}),
-				};
+				return propCompletions;
 			}
 
 			if (Object.keys(customCompletions).includes(variableName)) {

From 637bf087c003d8cdeb6dd83a60f1c0d66f68e41f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 19:17:28 +0530
Subject: [PATCH 275/547] fix: test - proper computation of block data

---
 frontend/src/components/BuilderBlock.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3fd589eff..3992e4e5b 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -361,7 +361,7 @@ const allResolvedProps = computed(() => {
 						key,
 						props.block,
 						getDataScriptValue,
-						(path: string) => getDataForKey({...props.blockData}, path), // block props can not refer to own block data items
+						(path: string) => getDataForKey({ ...props.blockData }, path), // block props can not refer to own block data items
 						props.defaultProps,
 					),
 				];
@@ -397,7 +397,12 @@ watch(
 );
 
 watch(
-	[component, allResolvedProps, () => props.block.getBlockDataScript(), () => pageStore.settingPage],
+	[
+		allResolvedProps,
+		() => props.blockData,
+		() => props.block.getBlockDataScript(),
+		() => pageStore.settingPage,
+	],
 	() => {
 		if (pageStore.settingPage) return;
 		if (props.block.getBlockDataScript().trim() === "") {
@@ -438,7 +443,7 @@ const hiddenDueToVisibilityCondition = computed(() => {
 	const visibilityCondition = props.block.getVisibilityCondition();
 	const key = visibilityCondition?.key;
 	const comesFrom = visibilityCondition?.comesFrom || "dataScript";
-	if(!key) return false;
+	if (!key) return false;
 	if (comesFrom == "blockDataScript") {
 		const value = getBlockDataScriptValue(key as string);
 		return !Boolean(value);

From 52fb4f02e472c28e6d6ef455323b7b23150b0558 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 8 Jan 2026 19:30:20 +0530
Subject: [PATCH 276/547] fix: test - proper computation of block data

---
 frontend/src/components/BuilderBlock.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3992e4e5b..aedfb105d 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -398,6 +398,7 @@ watch(
 
 watch(
 	[
+		component,
 		allResolvedProps,
 		() => props.blockData,
 		() => props.block.getBlockDataScript(),
@@ -413,7 +414,7 @@ watch(
 		console.log("Fetching block data for", allResolvedProps.value, props.blockData);
 		fetchBlockData
 			.fetch({
-				block_id: props.block.blockId,
+				block_id: uid,
 				block_data_script: props.block.getBlockDataScript(),
 				props: JSON.stringify(allResolvedProps.value),
 			})

From e09b8301664c54f38fe3f470101fead6463608d4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 9 Jan 2026 12:40:05 +0530
Subject: [PATCH 277/547] fix: Misc

- Use button to toggle dropdown as it is semantically correct
- Use larger text for color variable
---
 frontend/src/components/Controls/ColorInput.vue | 4 ++--
 frontend/src/components/DashboardSidebar.vue    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 86d819977..ace1902fc 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -19,7 +19,7 @@
 							<Autocomplete
 								class="[&>div>input]:pl-8"
 								:class="{
-									'[&>div>div>input]:text-xs [&>div>div>input]:text-ink-violet-1 [&>div>input]:font-mono':
+									'[&>div>div>input]:text-sm [&>div>div>input]:text-ink-violet-1 [&>div>input]:font-mono':
 										isCssVariable,
 								}"
 								v-bind="events"
@@ -285,7 +285,7 @@ const getOptions = async (query: string) => {
 };
 
 watch(variables, () => {
-	colorInput.value?.updateOptions();
+	colorInput.value?.refreshOptions();
 });
 onMounted(() => {
 	if (
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 8be8384a5..54df59d4e 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -60,7 +60,7 @@
 						:offset="8"
 						size="sm">
 						<template v-slot="{ open }">
-							<div
+							<button
 								class="mx-0.5 flex w-full items-center justify-between rounded p-1.5 dark:hover:bg-surface-gray-2"
 								:class="{
 									'bg-surface-white shadow-sm': open,
@@ -74,7 +74,7 @@
 								<FeatherIcon
 									:name="open ? 'chevron-up' : 'chevron-down'"
 									class="h-4 w-4 !text-gray-700 dark:!text-gray-200"></FeatherIcon>
-							</div>
+							</button>
 						</template>
 					</Dropdown>
 				</div>

From 4fc2114b8ac3b0e975c6422ff90ed81064051723 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 10 Jan 2026 19:12:33 +0530
Subject: [PATCH 278/547] fix: solves #460

the issue occured because restting blocks did not remove dynamic values, so when a component was used in a page, all it's dynamic values are replicated into the block from the component. now while rendering the page, a block's dynamic values are calculated by combining the dynamic values of both the block and the reference block from the component from which it is derived and thus it results in replicated dynamic values. and while resolving the dynamic values the fallback value is recalculated twice and the last time it uses the result which was calculated previously.
---
 .../builder/doctype/builder_page/builder_page.py   | 11 ++++++++++-
 frontend/src/block.ts                              | 14 ++++++++++++++
 frontend/src/components/BlockHTML.vue              |  2 +-
 frontend/src/components/BuilderBlock.vue           |  4 ++--
 .../src/components/Controls/PropertyControl.vue    |  2 +-
 frontend/src/components/Controls/SearchBlock.vue   |  4 ++--
 frontend/src/components/TextBlock.vue              |  2 +-
 7 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 39f27c204..6f6f5f575 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -694,7 +694,15 @@ def extend_block(block, overridden_block):
 	block["mobileStyles"].update(overridden_block["mobileStyles"])
 	block["tabletStyles"].update(overridden_block["tabletStyles"])
 	block["attributes"].update(overridden_block["attributes"])
-	block["dynamicValues"] = block.get("dynamicValues", []) + overridden_block.get("dynamicValues", [])
+
+	dynamicValues = overridden_block.get("dynamicValues", [])
+	dynamicValuesProperty = [dv.get("property") for dv in dynamicValues]
+	for dv in block.get("dynamicValues", []):
+		if dv.get("property") in dynamicValuesProperty:
+			continue
+		dynamicValues.append(dv)
+	block["dynamicValues"] = dynamicValues
+
 	if overridden_block.get("element"):
 		block["element"] = overridden_block["element"]
 
@@ -842,4 +850,5 @@ def reset_block(block):
 	block["customAttributes"] = {}
 	block["classes"] = []
 	block["dataKey"] = {}
+	block["dynamicValues"] = []
 	return block
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index bc110bed6..a2dd626ef 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -873,6 +873,19 @@ class Block implements BlockOptions {
 	getMargin(opts?: { nativeOnly?: boolean; cascading?: boolean }) {
 		return getBoxSpacing(this, "margin", opts);
 	}
+	getDynamicValues() {
+		let dynamicValues = this.dynamicValues;
+		const dynamicValueProperties = dynamicValues.map((v) => v.property);
+		if (this.isExtendedFromComponent()) {
+			const componentDynamicValues = this.referenceComponent?.getDynamicValues() || [];
+			componentDynamicValues.forEach((v) => {
+				if (!dynamicValueProperties.includes(v.property)) {
+					dynamicValues.push(v);
+				}
+			});
+		}
+		return dynamicValues;
+	}
 	setDynamicValue(
 		property: BlockDataKey["property"],
 		type: BlockDataKeyType,
@@ -1021,6 +1034,7 @@ function resetBlock(
 		block.customAttributes = {};
 		block.classes = [];
 		block.dataKey = null;
+		block.dynamicValues = [];
 	}
 
 	if (resetChildren) {
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 2bd2e259d..7cdc4dd36 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -19,7 +19,7 @@ const getDynamicContent = () => {
 		innerHTML = typeof dataValue === "string" ? dataValue : innerHTML;
 	}
 	if (props.data) {
-		props.block.dynamicValues
+		props.block.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 			})
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 1402e6b3b..c51242d77 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -126,7 +126,7 @@ const attributes = computed(() => {
 				getDataForKey(props.data, props.block.getDataKey("key")) ??
 				attribs[props.block.getDataKey("property") as string];
 		}
-		props.block.dynamicValues
+		props.block.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "attribute";
 			})
@@ -165,7 +165,7 @@ const styles = computed(() => {
 				),
 			};
 		}
-		props.block.dynamicValues
+		props.block.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "style";
 			})
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
index 3e4475a88..760a9c020 100644
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ b/frontend/src/components/Controls/PropertyControl.vue
@@ -425,7 +425,7 @@ function setDynamicValue(value: string) {
 const dynamicValue = computed(() => {
 	const blocks = blockController.getSelectedBlocks();
 	if (!blocks?.length) return;
-	const dataKeyObj = blocks[0].dynamicValues.find((obj) => {
+	const dataKeyObj = blocks[0].getDynamicValues().find((obj) => {
 		return obj.type === props.controlType && obj.property === props.styleProperty;
 	});
 	if (dataKeyObj) {
diff --git a/frontend/src/components/Controls/SearchBlock.vue b/frontend/src/components/Controls/SearchBlock.vue
index ac5b71e0b..1326e6129 100644
--- a/frontend/src/components/Controls/SearchBlock.vue
+++ b/frontend/src/components/Controls/SearchBlock.vue
@@ -177,8 +177,8 @@ const propertyHandlers = [
 		key: "data",
 		name: "Data",
 		matches: (block: Block, term: string) => {
-			if (block.dynamicValues) {
-				block.dynamicValues.forEach((dv: BlockDataKey) => {
+			if (block.getDynamicValues()) {
+				block.getDynamicValues().forEach((dv: BlockDataKey) => {
 					if (dv.key?.toLowerCase().includes(term)) {
 						return true;
 					}
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index af2fcffca..7d42c5bdb 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -113,7 +113,7 @@ const getDynamicContent = () => {
 		const result = getDataForKey(props.data, props.block.getDataKey("key"));
 		innerHTML = (typeof result === "string" ? result : null) ?? innerHTML;
 	}
-	props.block.dynamicValues
+	props.block.getDynamicValues()
 		?.filter((dataKeyObj: BlockDataKey) => {
 			return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 		})

From 4d32d11f554c902757c64b2fc61c678196686fc6 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 10 Jan 2026 19:38:54 +0530
Subject: [PATCH 279/547] fix: correct variable name

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 6f6f5f575..db60f0cf1 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -696,9 +696,9 @@ def extend_block(block, overridden_block):
 	block["attributes"].update(overridden_block["attributes"])
 
 	dynamicValues = overridden_block.get("dynamicValues", [])
-	dynamicValuesProperty = [dv.get("property") for dv in dynamicValues]
+	dynamicValuesProperties = [dv.get("property") for dv in dynamicValues]
 	for dv in block.get("dynamicValues", []):
-		if dv.get("property") in dynamicValuesProperty:
+		if dv.get("property") in dynamicValuesProperties:
 			continue
 		dynamicValues.append(dv)
 	block["dynamicValues"] = dynamicValues

From 5c1d101f739a2f6eb55aaab61f31533dc8f91e28 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 18:23:43 +0530
Subject: [PATCH 280/547] fix: Default position of VariableManger popup

---
 .../components/Controls/DraggablePopup.vue    | 28 +++++++++++--------
 .../src/components/Modals/VariableManager.vue |  3 +-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index 1fb3a25d2..c102ce68b 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -57,6 +57,8 @@ const props = withDefaults(
 			| "middle-left"
 			| "middle-right";
 		placementOffset?: number;
+		placementOffsetLeft?: number;
+		placementOffsetTop?: number;
 		clickOutsideToClose?: boolean;
 		container?: HTMLElement | null;
 		actionLabel?: string;
@@ -130,22 +132,24 @@ const handleClickOutside = (event: Event) => {
 const setPosition = () => {
 	if (props.container) {
 		const { left, top, right, bottom } = props.container.getBoundingClientRect();
+		const horizontalOffset = props.placementOffsetLeft ?? props.placementOffset;
+		const verticalOffset = props.placementOffsetTop ?? props.placementOffset;
 		switch (props.placement) {
 			case "top-left":
-				popupLeft.value = left + props.placementOffset;
-				popupTop.value = top + props.placementOffset;
+				popupLeft.value = left + horizontalOffset;
+				popupTop.value = top + verticalOffset;
 				break;
 			case "top-right":
-				popupLeft.value = right - props.width - props.placementOffset;
-				popupTop.value = top + props.placementOffset;
+				popupLeft.value = right - props.width - horizontalOffset;
+				popupTop.value = top + verticalOffset;
 				break;
 			case "bottom-left":
-				popupLeft.value = left + props.placementOffset;
-				popupTop.value = bottom - props.height - props.placementOffset;
+				popupLeft.value = left + horizontalOffset;
+				popupTop.value = bottom - props.height - verticalOffset;
 				break;
 			case "bottom-right":
-				popupLeft.value = right - props.width - props.placementOffset;
-				popupTop.value = bottom - props.height - props.placementOffset;
+				popupLeft.value = right - props.width - horizontalOffset;
+				popupTop.value = bottom - props.height - verticalOffset;
 				break;
 			case "center":
 				popupLeft.value = left + (right - left) / 2 - props.width / 2;
@@ -153,18 +157,18 @@ const setPosition = () => {
 				break;
 			case "top-middle":
 				popupLeft.value = left + (right - left) / 2 - props.width / 2;
-				popupTop.value = top + props.placementOffset;
+				popupTop.value = top + verticalOffset;
 				break;
 			case "bottom-middle":
 				popupLeft.value = left + (right - left) / 2 - props.width / 2;
-				popupTop.value = bottom - props.height - props.placementOffset;
+				popupTop.value = bottom - props.height - verticalOffset;
 				break;
 			case "middle-left":
-				popupLeft.value = left + props.placementOffset;
+				popupLeft.value = left + horizontalOffset;
 				popupTop.value = top + (bottom - top) / 2 - props.height / 2;
 				break;
 			case "middle-right":
-				popupLeft.value = right - props.width - props.placementOffset;
+				popupLeft.value = right - props.width - horizontalOffset;
 				popupTop.value = top + (bottom - top) / 2 - props.height / 2;
 				break;
 		}
diff --git a/frontend/src/components/Modals/VariableManager.vue b/frontend/src/components/Modals/VariableManager.vue
index cad012816..f08dd6f30 100644
--- a/frontend/src/components/Modals/VariableManager.vue
+++ b/frontend/src/components/Modals/VariableManager.vue
@@ -9,7 +9,8 @@
 		:width="520"
 		:container="container"
 		v-if="modelValue"
-		:placement-offset="20"
+		:placement-offset-top="8"
+		:placement-offset-left="65"
 		action-label="Add Variable"
 		:action-handler="addNewVariable"
 		placement="top-left">

From 84b31cb5749b1306ae908e8f4527b6c267bf0724 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 20:36:30 +0530
Subject: [PATCH 281/547] fix: Adjust color popover positon

- and update frappe-ui
---
 frappe-ui                                                 | 2 +-
 frontend/package.json                                     | 2 +-
 frontend/src/components/BackgroundHandler.vue             | 6 +++++-
 .../src/components/BlockPropertySections/StyleSection.ts  | 2 ++
 frontend/src/components/Controls/Autocomplete.vue         | 2 +-
 frontend/src/components/Controls/ColorInput.vue           | 2 ++
 frontend/src/components/Controls/ColorPicker.vue          | 8 ++++----
 7 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 02a667017..6421fba4d 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 02a667017305d6b83618b996e6d78c3eb5edebc0
+Subproject commit 6421fba4d39bdea9f43495c2f9397e0fba33ccb5
diff --git a/frontend/package.json b/frontend/package.json
index 810e87263..ed6a10d36 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.250",
+    "frappe-ui": "0.1.252",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index dcfeb7b9f..328e78ba5 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -76,7 +76,11 @@
 			</div>
 		</template>
 	</Popover>
-	<PropertyControl label="BG Color" styleProperty="backgroundColor" :component="ColorInput" />
+	<PropertyControl
+		label="BG Color"
+		styleProperty="backgroundColor"
+		:component="ColorInput"
+		:popoverOffset="120" />
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 3459ac5f1..f3f792afa 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -61,6 +61,7 @@ const styleSectionProperties = [
 				styleProperty: "color",
 				component: ColorInput,
 				label: "Text Color",
+				popoverOffset: 120,
 				enableState: computed(() => {
 					return !blockController.getFirstSelectedBlock()?.getEditor();
 				}),
@@ -74,6 +75,7 @@ const styleSectionProperties = [
 			return {
 				component: ColorInput,
 				styleProperty: "borderColor",
+				popoverOffset: 120,
 				label: "Border Color",
 			};
 		},
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 33a3a758f..01c23776b 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -24,7 +24,7 @@
 						'pl-2': !$slots.prefix,
 						'pr-2': !hasValue,
 					}" />
-				<Button v-if="hasValue" variant="ghost" @click.stop="clearSelection">
+				<Button v-if="hasValue" variant="ghost" @click.stop="clearSelection" class="-ml-2">
 					<CrossIcon class="h-3 w-3" />
 				</Button>
 			</div>
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index ace1902fc..8579f40b6 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -3,6 +3,7 @@
 		<ColorPicker
 			ref="colorPickerRef"
 			:placement="placement"
+			:offset="popoverOffset"
 			@open="events.onFocus"
 			@close="handleClose"
 			:modelValue="resolvedColor"
@@ -165,6 +166,7 @@ const props = withDefaults(
 		placement?: "top" | "bottom" | "left" | "right";
 		showColorVariableOptions?: boolean;
 		showPickerOnMount?: boolean;
+		popoverOffset?: number;
 	}>(),
 	{
 		modelValue: null,
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index c35db96ff..0f8397734 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -3,8 +3,9 @@
 		ref="colorPickerPopover"
 		v-if="renderMode === 'popover'"
 		:placement="placement"
+		:offset="offset"
 		class="!block w-full"
-		popoverClass="!min-w-fit !mr-[30px]">
+		popoverClass="!min-w-fit">
 		<template #target="{ togglePopover, isOpen }">
 			<slot
 				name="target"
@@ -131,9 +132,6 @@ const { resolveVariableValue } = useBuilderVariable();
 const canvasStore = useCanvasStore();
 const hueMap = ref(null) as unknown as Ref<HTMLDivElement>;
 const colorMap = ref(null) as unknown as Ref<HTMLDivElement>;
-const hueSelector = ref(null) as unknown as Ref<HTMLDivElement>;
-const colorSelector = ref(null) as unknown as Ref<HTMLDivElement>;
-const colorPicker = ref(null) as unknown as Ref<HTMLDivElement>;
 
 const colorPickerPopover = ref<InstanceType<typeof Popover> | null>(null);
 
@@ -161,12 +159,14 @@ const props = withDefaults(
 			| "right"
 			| "left";
 		renderMode?: "popover" | "inline";
+		offset?: number;
 	}>(),
 	{
 		modelValue: null,
 		showInput: false,
 		placement: "left-start",
 		renderMode: "popover",
+		offset: 10,
 	},
 );
 

From 2c3d05fe0e10c47ed4a6bcce7e83e70366896bad Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 21:36:45 +0530
Subject: [PATCH 282/547] fix(VariableManager): Create variable onBlur and
 enter instead of explicit submit button

---
 .../src/components/Modals/VariableManager.vue | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Modals/VariableManager.vue b/frontend/src/components/Modals/VariableManager.vue
index f08dd6f30..cbe9bbff1 100644
--- a/frontend/src/components/Modals/VariableManager.vue
+++ b/frontend/src/components/Modals/VariableManager.vue
@@ -50,6 +50,8 @@
 								type="text"
 								placeholder="Enter variable name"
 								@click.stop
+								@blur="() => row.isNew && createVariable(row)"
+								@keydown.enter.prevent="() => row.isNew && createVariable(row)"
 								class="w-[130px]"
 								autofocus />
 
@@ -129,14 +131,6 @@
 						<!-- Actions Column -->
 						<div v-else-if="column.key === 'actions'" class="flex items-center justify-center gap-1">
 							<template v-if="!row.is_standard">
-								<BuilderButton
-									v-if="row.isNew"
-									variant="ghost"
-									class="text-ink-gray-6"
-									@click="createVariable(row)"
-									title="Create Variable">
-									<FeatherIcon name="check" class="h-3 w-3" />
-								</BuilderButton>
 								<BuilderButton
 									variant="ghost"
 									class="text-ink-gray-6 hover:text-red-600"
@@ -199,6 +193,7 @@ const editingCell = ref<string | null>(null);
 const nextNewId = ref(1);
 const newVariable = ref<Partial<BuilderVariable> | null>(null);
 const searchQuery = ref("");
+const isCreating = ref(false);
 
 const columns = [
 	{ label: "Name", key: "variable_name" },
@@ -294,7 +289,9 @@ const updateColor = async (row: ListViewRow, value: string | null, mode: "light"
 		row.dark_value = value || "";
 	}
 
-	if (row.name && !row.isNew) {
+	if (row.isNew) {
+		await createVariable(row);
+	} else if (row.name) {
 		debouncedSaveVariable(row);
 	}
 };
@@ -307,23 +304,25 @@ const debouncedSaveVariable = useDebounceFn(async (row: ListViewRow) => {
 	}
 }, 300);
 
-const createVariable = async (variable: BuilderVariable) => {
-	if (!variable.variable_name?.trim()) {
-		toast.error("Variable name is required");
-		return;
-	}
+const createVariable = async (row: ListViewRow) => {
+	if (!row.isNew || !row.variable_name?.trim() || isCreating.value) return;
 
+	isCreating.value = true;
 	try {
-		await createVar({
-			variable_name: variable.variable_name!,
-			value: variable.value!,
-			dark_value: variable.dark_value || undefined,
-			type: variable.type || "Color",
+		const createdVariable = await createVar({
+			variable_name: row.variable_name!,
+			value: row.value || "#ffffff",
+			dark_value: row.dark_value || undefined,
+			type: row.type || "Color",
 		});
 		newVariable.value = null;
+		await nextTick();
 		toast.success("Variable created successfully");
+		return createdVariable;
 	} catch (error) {
 		toast.error((error as Error).message || "Failed to create variable");
+	} finally {
+		isCreating.value = false;
 	}
 };
 

From 05df9f4b92a6c06f4157388854c721344f9a666a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 22:08:51 +0530
Subject: [PATCH 283/547] fix(VariableManager): Improve variable creation UX

---
 frontend/src/components/Modals/VariableManager.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Modals/VariableManager.vue b/frontend/src/components/Modals/VariableManager.vue
index cbe9bbff1..47e9c4fd5 100644
--- a/frontend/src/components/Modals/VariableManager.vue
+++ b/frontend/src/components/Modals/VariableManager.vue
@@ -16,7 +16,7 @@
 		placement="top-left">
 		<template #header><h2 class="py-2 text-lg font-semibold">Manage Variables</h2></template>
 		<template #content>
-			<div>
+			<div @click.stop="stopEditing">
 				<div class="mb-4">
 					<BuilderInput
 						:modelValue="searchQuery"
@@ -50,8 +50,8 @@
 								type="text"
 								placeholder="Enter variable name"
 								@click.stop
-								@blur="() => row.isNew && createVariable(row)"
-								@keydown.enter.prevent="() => row.isNew && createVariable(row)"
+								@blur="() => (row.isNew ? createVariable(row) : stopEditing())"
+								@keydown.enter.prevent="() => (row.isNew ? createVariable(row) : stopEditing())"
 								class="w-[130px]"
 								autofocus />
 
@@ -233,6 +233,7 @@ const listViewOptions = {
 	selectable: false,
 	showTooltip: false,
 	resizeColumn: false,
+	enableActive: false,
 	emptyState: {
 		title: computed(() => (searchQuery.value.trim() ? "No Variables Found" : "No Variables")),
 		description: computed(() =>
@@ -520,11 +521,8 @@ const downloadSampleCSV = () => {
 
 const setVariableName = (value: string, row: ListViewRow) => {
 	if (!row.isNew) {
-		updateVariable({
-			name: row.name,
-			variable_name: value,
-		});
-		stopEditing();
+		row.variable_name = value;
+		debouncedSaveVariable(row);
 	} else {
 		row.variable_name = value;
 	}

From 14e1a1762b425cff69006ee9c53b13d3ea3a372c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 22:36:25 +0530
Subject: [PATCH 284/547] fix(VariableManager): Input width

---
 frontend/src/components/Modals/VariableManager.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Modals/VariableManager.vue b/frontend/src/components/Modals/VariableManager.vue
index 47e9c4fd5..a43a1a822 100644
--- a/frontend/src/components/Modals/VariableManager.vue
+++ b/frontend/src/components/Modals/VariableManager.vue
@@ -52,12 +52,12 @@
 								@click.stop
 								@blur="() => (row.isNew ? createVariable(row) : stopEditing())"
 								@keydown.enter.prevent="() => (row.isNew ? createVariable(row) : stopEditing())"
-								class="w-[130px]"
+								class="w-[160px]"
 								autofocus />
 
 							<span
 								v-else
-								class="rounded px-2 py-1 text-sm"
+								class="truncate rounded px-2 py-1 text-sm"
 								:class="getNameDisplayClasses(row)"
 								@click.stop="startEditing('name', row.id, row.is_standard)"
 								:title="getNameTooltip(row)">
@@ -196,7 +196,7 @@ const searchQuery = ref("");
 const isCreating = ref(false);
 
 const columns = [
-	{ label: "Name", key: "variable_name" },
+	{ label: "Name", key: "variable_name", width: "180px" },
 	{ label: "Light", key: "light_color" },
 	{ label: "Dark", key: "dark_color" },
 	{ label: "", key: "actions", width: "40px" },

From 3dbe1cf3cdcf320469cb96f4d5dfb75a823ab81a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 22:37:38 +0530
Subject: [PATCH 285/547] revert: "fix: opening other dialogs/popovers did not
 hide draggable popup (#456)"

This reverts commit 94bd549526733f819e4c7611457067d851c75969.
---
 .../components/Controls/DraggablePopup.vue    |  8 +--
 frontend/src/composables/useDomAttr.ts        | 56 -------------------
 2 files changed, 1 insertion(+), 63 deletions(-)
 delete mode 100644 frontend/src/composables/useDomAttr.ts

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index c102ce68b..f42ee530a 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -1,6 +1,6 @@
 <template>
 	<teleport to="body">
-		<div class="relative" v-show="!isHidden" ref="popover">
+		<div class="relative" ref="popover">
 			<div class="fixed" @mousedown.stop>
 				<div
 					ref="popoverContent"
@@ -35,7 +35,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDomAttr } from "@/composables/useDomAttr";
 import { useEventListener } from "@vueuse/core";
 import { nextTick, onMounted, Ref, ref } from "vue";
 
@@ -73,11 +72,6 @@ const props = withDefaults(
 	},
 );
 
-const isHidden = useDomAttr(popover, "data-aria-hidden", {
-	immediate: true,
-	transform: (v) => v === "true",
-});
-
 const emit = defineEmits(["update:modelValue"]);
 
 const popoverContent = ref(null) as Ref<HTMLElement | null>;
diff --git a/frontend/src/composables/useDomAttr.ts b/frontend/src/composables/useDomAttr.ts
deleted file mode 100644
index 8b2a69ece..000000000
--- a/frontend/src/composables/useDomAttr.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ref, watch, onMounted, onBeforeUnmount, unref } from 'vue'
-
-type MaybeRef<T> = T | { value: T }
-
-export function useDomAttr(
-  target: MaybeRef<HTMLElement | null>,
-  attrName: string,
-  options: {
-    immediate?: boolean
-    transform?: (value: string | null) => any
-  } = {}
-) {
-  const {
-    immediate = true,
-    transform = (v) => v
-  } = options
-
-  const value = ref<any>(null)
-  let observer: MutationObserver | null = null
-
-  const read = () => {
-    const el = unref(target as HTMLElement)
-    if (!el) return
-    value.value = transform(el.getAttribute(attrName))
-  }
-
-  onMounted(() => {
-    const el = unref(target as HTMLElement)
-    if (!el) return
-
-    if (immediate) read()
-
-    observer = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        if (
-          m.type === 'attributes' &&
-          m.attributeName === attrName
-        ) {
-          read()
-        }
-      }
-    })
-
-    observer.observe(el, {
-      attributes: true,
-      attributeFilter: [attrName]
-    })
-  })
-
-  onBeforeUnmount(() => {
-    observer?.disconnect()
-    observer = null
-  })
-
-  return value
-}

From baa79fce17e98183a2160dad2c1c10230362d856 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 22:44:12 +0530
Subject: [PATCH 286/547] fix: Transport popup to popovers instead of body

So that it does not always stays on top when modal appears because modal gets appended to the body and it should always be on top and not the popup

https://github.com/frappe/builder/pull/456 this fix worked but it completely hides popup till the modal is open which creates unnecessary UI flashes and causes confusion
---
 frontend/src/components/Controls/DraggablePopup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index f42ee530a..9fa193cfa 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -1,5 +1,5 @@
 <template>
-	<teleport to="body">
+	<teleport to="#popovers">
 		<div class="relative" ref="popover">
 			<div class="fixed" @mousedown.stop>
 				<div

From 3499d1332f95f1280c7a49411ee557c015861059 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 11 Jan 2026 23:38:49 +0530
Subject: [PATCH 287/547] ci: Use develop version of frappe

---
 .github/workflows/server-tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/server-tests.yml b/.github/workflows/server-tests.yml
index fb479eb69..20104a9e7 100644
--- a/.github/workflows/server-tests.yml
+++ b/.github/workflows/server-tests.yml
@@ -76,7 +76,7 @@ jobs:
         run: |
           bash ${GITHUB_WORKSPACE}/.github/helper/install_dependencies.sh
           pip install frappe-bench
-          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench --frappe-branch develop
           mysql --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
           mysql --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
 

From 67c48fc1655465c6b798c95c6caaacb96c0ab122 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 12 Jan 2026 13:26:55 +0530
Subject: [PATCH 288/547] fix: Update frappe-ui

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 6421fba4d..055bd0290 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 6421fba4d39bdea9f43495c2f9397e0fba33ccb5
+Subproject commit 055bd0290a378f811a45198208fdbe5c5bf44c7c
diff --git a/frontend/package.json b/frontend/package.json
index ed6a10d36..a9e91482c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.2.1",
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
-    "frappe-ui": "0.1.252",
+    "frappe-ui": "0.1.253",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",

From 172745d9ca1231212f50b6f690f811320ea5f470 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 12 Jan 2026 16:50:55 +0530
Subject: [PATCH 289/547] test: added tests for dynamic values derived from
 component

---
 .../doctype/builder_page/test_builder_page.py | 166 +++++++++++++++++-
 1 file changed, 165 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index fec3f0343..cd8c44db2 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -24,6 +24,12 @@
 })
 """
 
+custom_data_script = """
+data.update({
+	"name_new": "Jane Doe",
+})
+"""
+
 
 class TestBuilderPage(FrappeTestCase):
 	@classmethod
@@ -198,13 +204,169 @@ def test_repeater_block_dynamic_values(self):
 		finally:
 			page.delete()
 
+	def test_component_dynamic_values(self):
+		component = frappe.get_doc(
+			{
+				"doctype": "Builder Component",
+				"block": 
+					{
+						"blockId": "comp-block-1",
+						"element": "div",
+						"attributes": {"style": "background: #f0f0f0;"},
+						"baseStyles": {},
+						"mobileStyles": {},
+						"tabletStyles": {},
+						"classes": [],
+						"children": [
+							{
+								"blockId": "comp-block-1-1",
+								"element": "h1",
+								"innerHTML": "Hello",
+								"attributes": {"style": "background: #f0f0f0;"},
+								"baseStyles": {},
+								"mobileStyles": {},
+								"tabletStyles": {},
+								"classes": [],
+								"dynamicValues": [{"key": "name", "type": "key", "property": "innerHTML"}],
+							},
+						],
+					}
+			}
+		).insert()
+
+		page_no_overrides = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Component Dynamic Values Test",
+				"published": 1,
+				"route": "/component-dynamic-values-test-no-overrides",
+				"page_data_script": page_data_script,
+				"blocks": [
+					{
+						"element": "body",
+						"children": [
+							{
+								"extendedFromComponent": component.name,
+								"baseStyles": {},
+								"mobileStyles": {},
+								"tabletStyles": {},
+								"attributes": {},
+								"classes": [],
+								"children": [
+									{
+										"isChildOfComponent": component.name,
+										"referenceBlockId": "comp-block-1-1",
+										"dynamicValues": [],
+										"baseStyles": {},
+										"mobileStyles": {},
+										"tabletStyles": {},
+										"attributes": {},
+										"classes": []
+									},
+								
+								],
+							}
+						],
+					}
+				],
+			}
+		).insert()
+
+		page_with_overrides = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Component Dynamic Values Test",
+				"published": 1,
+				"route": "/component-dynamic-values-test-with-overrides",
+				"page_data_script": custom_data_script,
+				"blocks": [
+					{
+						"element": "body",
+						"children": [
+							{
+								"extendedFromComponent": component.name,
+								"baseStyles": {},
+								"mobileStyles": {},
+								"tabletStyles": {},
+								"attributes": {},
+								"classes": [],
+								"children": [
+									{
+										"isChildOfComponent": component.name,
+										"referenceBlockId": "comp-block-1-1",
+										"dynamicValues": [{"key": "name_new", "type": "key", "property": "innerHTML"}],
+										"baseStyles": {},
+										"mobileStyles": {},
+										"tabletStyles": {},
+										"attributes": {},
+										"classes": []
+									},
+								],
+							}
+						],
+					}
+				],
+			}
+		).insert()
+
+		page_with_bad_overrides = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Component Dynamic Values Test",
+				"published": 1,
+				"route": "/component-dynamic-values-test-with-bad-overrides",
+				"page_data_script": custom_data_script,
+				"blocks": [
+					{
+						"element": "body",
+						"children": [
+							{
+								"extendedFromComponent": component.name,
+								"baseStyles": {},
+								"mobileStyles": {},
+								"tabletStyles": {},
+								"attributes": {},
+								"classes": [],
+								"children": [
+									{
+										"isChildOfComponent": component.name,
+										"referenceBlockId": "comp-block-1-1",
+										"dynamicValues": [{"key": "non_existent_key", "type": "key", "property": "innerHTML"}],
+										"baseStyles": {},
+										"mobileStyles": {},
+										"tabletStyles": {},
+										"attributes": {},
+										"classes": []
+									}
+],
+							}
+						],
+					}
+				],
+			}
+		).insert()
+
+		try:
+			content_no_overrides = get_response_content("/component-dynamic-values-test-no-overrides")
+			content_with_overrides = get_response_content("/component-dynamic-values-test-with-overrides")
+			content_with_bad_overrides = get_response_content("/component-dynamic-values-test-with-bad-overrides")
+	
+			self.assertTrue("John Doe" == get_html_for(content_no_overrides, "tag", "h1", only_content=True))
+			self.assertTrue("Jane Doe" == get_html_for(content_with_overrides, "tag", "h1", only_content=True))
+			self.assertTrue("Hello" == get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True))
+		finally:
+			page_no_overrides.delete()
+			page_with_overrides.delete()
+			page_with_bad_overrides.delete()
+			component.delete()
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()
 		cls.page_with_dynamic_route.delete()
 
 
-def get_html_for(html, type, value, index=None):
+def get_html_for(html, type, value, index=None, only_content=False):
 	from bs4 import BeautifulSoup
 
 	soup = BeautifulSoup(html, "html.parser")
@@ -213,6 +375,8 @@ def get_html_for(html, type, value, index=None):
 		result = (
 			results[index] if index is not None and index < len(results) else results[0] if results else None
 		)
+		if only_content and result:
+			return result.decode_contents()
 		return str(result) if result else ""
 	if type == "attribute":
 		results = soup.find_all(attrs=value)

From f12fbed864fd46a875214f363c29a57cfce9d42e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 12 Jan 2026 17:17:06 +0530
Subject: [PATCH 290/547] fix: rename variables for clarity

---
 .../doctype/builder_page/test_builder_page.py | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index cd8c44db2..687aa6443 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -24,11 +24,7 @@
 })
 """
 
-custom_data_script = """
-data.update({
-	"name_new": "Jane Doe",
-})
-"""
+custom_data_script = "data.update({\"name_new\": \"Jane Doe\",})"
 
 
 class TestBuilderPage(FrappeTestCase):
@@ -234,7 +230,7 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		page_no_overrides = frappe.get_doc(
+		page_with_component_no_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
 				"page_title": "Component Dynamic Values Test",
@@ -272,7 +268,7 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		page_with_overrides = frappe.get_doc(
+		page_with_component_having_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
 				"page_title": "Component Dynamic Values Test",
@@ -309,7 +305,7 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		page_with_bad_overrides = frappe.get_doc(
+		page_with_component_having_bad_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
 				"page_title": "Component Dynamic Values Test",
@@ -347,17 +343,17 @@ def test_component_dynamic_values(self):
 		).insert()
 
 		try:
-			content_no_overrides = get_response_content("/component-dynamic-values-test-no-overrides")
+			content_with_no_overrides = get_response_content("/component-dynamic-values-test-no-overrides")
 			content_with_overrides = get_response_content("/component-dynamic-values-test-with-overrides")
 			content_with_bad_overrides = get_response_content("/component-dynamic-values-test-with-bad-overrides")
 	
-			self.assertTrue("John Doe" == get_html_for(content_no_overrides, "tag", "h1", only_content=True))
+			self.assertTrue("John Doe" == get_html_for(content_with_no_overrides, "tag", "h1", only_content=True))
 			self.assertTrue("Jane Doe" == get_html_for(content_with_overrides, "tag", "h1", only_content=True))
 			self.assertTrue("Hello" == get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True))
 		finally:
-			page_no_overrides.delete()
-			page_with_overrides.delete()
-			page_with_bad_overrides.delete()
+			page_with_component_no_overrides.delete()
+			page_with_component_having_overrides.delete()
+			page_with_component_having_bad_overrides.delete()
 			component.delete()
 
 	@classmethod

From 25b0e48b2b5199c1f35fc5150f956a88fcaf3f4d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 12 Jan 2026 17:26:41 +0530
Subject: [PATCH 291/547] chore: Update Node.js setup to version 24 to fix UI
 test setup

Co-authored-by: Sayantan Ghosh <stravoone@gmail.com>
---
 .github/workflows/ui-tests.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 963e6e703..643e66738 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -42,9 +42,10 @@ jobs:
         with:
           python-version: '3.14'
 
-      - uses: actions/setup-node@v3
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
 
       - name: Add to Hosts

From d969ee27f3794fcdba2fc7fc123aed3a835aade0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 13 Jan 2026 16:34:22 +0530
Subject: [PATCH 292/547] fix: Order redirects based on idx instead on creation

---
 frontend/src/data/routeRedirects.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/data/routeRedirects.ts b/frontend/src/data/routeRedirects.ts
index f1ecbbf39..2e9aab202 100644
--- a/frontend/src/data/routeRedirects.ts
+++ b/frontend/src/data/routeRedirects.ts
@@ -5,7 +5,7 @@ const routeRedirects = createListResource({
 	doctype: "Website Route Redirect",
 	parent: "Website Settings",
 	fields: ["source", "target", "redirect_http_status", "name"],
-	orderBy: "creation desc",
+	orderBy: "idx desc",
 	cache: "routeRedirects",
 	start: 0,
 	pageLength: 100,

From b6b17f508e59c8fd8b56a7210e3db93c05ee1711 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 14 Jan 2026 11:28:16 +0530
Subject: [PATCH 293/547] feat(TabButtons): added tooltip if label is hidden

---
 .../src/components/Controls/TabButtons.vue    | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index f4c5f1477..58f9d413c 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -7,23 +7,28 @@
 				:key="button.label"
 				:value="button.value ?? button.label"
 				v-slot="{ active, checked }">
-				<button
-					:class="[
-						active ? 'ring-outline-gray-2 focus-visible:ring' : '',
-						!modelValue && checked ? 'border border-dashed border-outline-gray-3' : '',
-						modelValue && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
-						'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
-					]">
-					<FeatherIcon
-						class="h-4 w-4"
-						v-if="button.icon"
-						:name="button.icon"
-						:label="button.label"
-						:aria-label="button.label" />
-					<RadioGroupLabel as="span" class="flex h-4 items-center" v-show="button.label && !button.hideLabel">
-						{{ button.label }}
-					</RadioGroupLabel>
-				</button>
+				<Tooltip :disabled="!button.hideLabel" :text="button.label" placement="top">
+					<button
+						:class="[
+							active ? 'ring-outline-gray-2 focus-visible:ring' : '',
+							!modelValue && checked ? 'border border-dashed border-outline-gray-3' : '',
+							modelValue && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
+							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
+						]">
+						<FeatherIcon
+							class="h-4 w-4"
+							v-if="button.icon"
+							:name="button.icon"
+							:label="button.label"
+							:aria-label="button.label" />
+						<RadioGroupLabel
+							as="span"
+							class="flex h-4 items-center"
+							v-show="button.label && !button.hideLabel">
+							{{ button.label }}
+						</RadioGroupLabel>
+					</button>
+				</Tooltip>
 			</RadioGroupOption>
 		</div>
 	</RadioGroup>
@@ -31,7 +36,7 @@
 
 <script lang="ts" setup>
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
-import { FeatherIcon } from "frappe-ui";
+import { FeatherIcon, Tooltip } from "frappe-ui";
 import { computed } from "vue";
 
 interface Button {

From d2444376d872711c4167d2c36730ca64232509c0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 14 Jan 2026 13:06:04 +0530
Subject: [PATCH 294/547] fix(TabButtons): replaced as="template" with
 class="contents"

both as="template" and as-child tries to pass down props and attrs to the button but Tooltip wins and the ToolTipTrigger click handler gets registered.
---
 frontend/src/components/Controls/TabButtons.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index 58f9d413c..622cc3669 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -2,7 +2,7 @@
 	<RadioGroup :modelValue="value" @update:modelValue="emit('update:modelValue', $event)">
 		<div class="box-border flex space-x-1 rounded bg-surface-gray-2 p-0.5 text-sm">
 			<RadioGroupOption
-				as="template"
+				class="contents"
 				v-for="button in buttons"
 				:key="button.label"
 				:value="button.value ?? button.label"
@@ -16,14 +16,14 @@
 							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
 						]">
 						<FeatherIcon
-							class="h-4 w-4"
+							class="size-4"
 							v-if="button.icon"
 							:name="button.icon"
 							:label="button.label"
 							:aria-label="button.label" />
 						<RadioGroupLabel
 							as="span"
-							class="flex h-4 items-center"
+							class="flex items-center"
 							v-show="button.label && !button.hideLabel">
 							{{ button.label }}
 						</RadioGroupLabel>

From 8ed6d52c1718691ffd3b64df930db2567d53a7b0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 14 Jan 2026 13:08:44 +0530
Subject: [PATCH 295/547] feat(TabButtons): add showTooltip property to control
 tooltip visibility

---
 frontend/src/components/Controls/TabButtons.vue | 3 ++-
 frontend/src/components/PageScript.vue          | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index 622cc3669..cd042079c 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -7,7 +7,7 @@
 				:key="button.label"
 				:value="button.value ?? button.label"
 				v-slot="{ active, checked }">
-				<Tooltip :disabled="!button.hideLabel" :text="button.label" placement="top">
+				<Tooltip :disabled="!button.showTooltip" :text="button.label" placement="top">
 					<button
 						:class="[
 							active ? 'ring-outline-gray-2 focus-visible:ring' : '',
@@ -44,6 +44,7 @@ interface Button {
 	value?: string | number | boolean;
 	icon?: string;
 	hideLabel?: boolean;
+	showTooltip?: boolean;
 }
 
 const props = defineProps<{
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 3c35198eb..4d796a707 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -45,8 +45,8 @@
 			<TabButtons
 				class="w-fit"
 				:buttons="[
-					{ label: 'Page', icon: 'layout', hideLabel: true, value: 'page' },
-					{ label: 'Block', icon: 'layers', hideLabel: true, value: 'block' },
+					{ label: 'Page', icon: 'layout', hideLabel: true, value: 'page', showTooltip: true },
+					{ label: 'Block', icon: 'layers', hideLabel: true, value: 'block', showTooltip: true },
 				]"
 				v-model="mode" />
 		</div>

From be3001502ea122be13b5fd80968faf99f5016467 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 14 Jan 2026 14:03:32 +0530
Subject: [PATCH 296/547] fix(PropsPopoverContent): isStandard by default when
 adding props in fragment mode

---
 frontend/src/components/PropsPopoverContent.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index ecf0a8880..254bbe58c 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -131,7 +131,12 @@
 					standardPropOptions.options = options;
 				}" />
 		</template>
-		<BuilderButton :disabled="!name.trim().length" label="Save" variant="subtle" class="w-full flex-shrink-0" @click="save" />
+		<BuilderButton
+			:disabled="!name.trim().length"
+			label="Save"
+			variant="subtle"
+			class="w-full flex-shrink-0"
+			@click="save" />
 	</div>
 </template>
 
@@ -376,11 +381,14 @@ const reset = async (keepParams: {
 	keepType: boolean;
 }) => {
 	const { keepName, keepIsStandard, keepProps, keepType } = keepParams;
+	const isStandardByDefault = isInFragmentMode.value && props.mode == "add";
 
 	const details = keepProps ? props.propDetails ?? null : null;
 
 	if (!keepName) name.value = props.propName ?? "";
-	if (!keepIsStandard) isStandard.value = details?.isStandard ? "true" : "false";
+	if (!keepIsStandard)
+		isStandard.value =
+			details?.isStandard || isStandardByDefault ? "true" : "false";
 
 	value.value = details?.value ?? "";
 

From 31390e4d896b26406207e0b07bc2e9e7ddc91f43 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 15 Jan 2026 19:04:05 +0530
Subject: [PATCH 297/547] fix: Popover position

---
 frontend/src/components/BackgroundHandler.vue             | 2 +-
 .../BlockPropertySections/ImageOptionsSection.ts          | 1 +
 frontend/src/components/Controls/ImageUploader.vue        | 3 ---
 frontend/src/components/ImageUploadInput.vue              | 8 +++++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 328e78ba5..5200953e7 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover placement="left" class="!block w-full" popoverClass="!min-w-fit !mr-[30px]">
+	<Popover placement="left" class="!block w-full" :offset="25">
 		<template #target="{ togglePopover }">
 			<div class="flex w-full items-center justify-between">
 				<PropertyControl
diff --git a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
index 127aab5ae..03e233474 100644
--- a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
@@ -15,6 +15,7 @@ const imageOptionsSectionProperties = [
 				styleProperty: "src",
 				label: "Image URL",
 				allowDynamicValue: true,
+				popoverOffset: 120,
 				imageURL: blockController.getAttribute("src"),
 				imageFit: blockController.getStyle("objectFit"),
 			};
diff --git a/frontend/src/components/Controls/ImageUploader.vue b/frontend/src/components/Controls/ImageUploader.vue
index b593a6603..fc55c5e00 100644
--- a/frontend/src/components/Controls/ImageUploader.vue
+++ b/frontend/src/components/Controls/ImageUploader.vue
@@ -9,7 +9,6 @@
 		">
 		<template v-slot="{ file, progress, uploading, openFileSelector }">
 			<div class="flex items-end space-x-1">
-				<!-- <BuilderInput v-model="url" readonly="true" :hideClearButton="true" :label="label"></BuilderInput> -->
 				<BuilderButton @click="openFileSelector">
 					{{ uploading ? `Uploading ${progress}%` : image_url ? "Change" : "Upload" }}
 				</BuilderButton>
@@ -20,7 +19,6 @@
 </template>
 <script setup lang="ts">
 import { FileUploader } from "frappe-ui";
-import { computed } from "vue";
 const prop = withDefaults(
 	defineProps<{
 		image_url?: string;
@@ -33,5 +31,4 @@ const prop = withDefaults(
 	},
 );
 const emit = defineEmits(["upload", "remove"]);
-const url = computed(() => prop.image_url);
 </script>
diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index 3c0cdf376..0ae3ebe3d 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover placement="left" class="!block w-full" popoverClass="!min-w-fit !mr-[30px]">
+	<Popover placement="left" class="!block w-full" :offset="popoverOffset">
 		<template #target="{ togglePopover, isOpen }">
 			<div class="flex items-center justify-between">
 				<InputLabel v-if="label && labelPosition === 'left'">{{ label }}</InputLabel>
@@ -53,12 +53,12 @@
 									'object-fit': imageFit || 'contain',
 								}" />
 							<div
-								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-gray-500 bg-opacity-20"
+								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-surface-gray-4 bg-opacity-20"
 								:class="{
 									'!grid': !imageURL,
 									'group-hover:grid': imageURL,
 								}">
-								<BuilderButton variant="solid" @click="openFileSelector">Upload</BuilderButton>
+								<BuilderButton variant="subtle" @click="openFileSelector">Upload</BuilderButton>
 							</div>
 						</div>
 					</template>
@@ -88,11 +88,13 @@ withDefaults(
 		placeholder?: string;
 		imageFit?: "contain" | "cover" | "fill" | "none";
 		description?: string;
+		popoverOffset?: number;
 	}>(),
 	{
 		labelPosition: "left",
 		placeholder: "Set Image",
 		imageFit: "contain",
+		popoverOffset: 10,
 	},
 );
 

From eb9776cb7ab455920d8821a615f23fb1c879e985 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 16 Jan 2026 16:02:13 +0530
Subject: [PATCH 298/547] refactor: broke get_tag into smaller readable
 functions

---
 .../doctype/builder_page/builder_page.py      | 937 +++++++++++-------
 1 file changed, 576 insertions(+), 361 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 9a3f945fe..8ac7511af 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -5,6 +5,7 @@
 import os
 import re
 import shutil
+from typing import Any, Optional
 
 import bs4 as bs
 import frappe
@@ -251,16 +252,16 @@ def get_context(self, context):
 			context.title = page_data.get("page_title")
 
 		blocks = self.blocks
-		
-		# TODO: detect dynamic_route or block/page data
-		context.no_cache = 1
-
 		context.preview = getattr(getattr(frappe.local, "request", None), "for_preview", None)
 
 		if context.preview and self.draft_blocks:
 			blocks = self.draft_blocks
 
-		content, style, fonts = get_block_html(blocks)
+		content, style, fonts, has_block_script = get_block_html(blocks)
+
+		if self.dynamic_route or page_data or has_block_script:
+			context.no_cache = 1
+
 		self.set_custom_font(context, fonts)
 		context.fonts = fonts
 		context.__content = content
@@ -501,269 +502,570 @@ def get_block_data(block_id, block_data_script, props):
 	block_data.update(_locals["block"])
 	return block_data
 
-def get_block_html(blocks):
+
+def get_block_html(blocks: str | list) -> tuple[str, str, dict, bool]:
+	"""
+	Main entry point for converting blocks to HTML.
+
+	#### Args:
+		blocks: JSON string or list of block dictionaries
+
+	#### Returns:
+		Tuple of (`html_content`, `css_styles`, `font_map`, `has_block_script`)
+	"""
 	blocks = frappe.parse_json(blocks)
 	if not isinstance(blocks, list):
 		blocks = [blocks]
+
 	soup = bs.BeautifulSoup("", "html.parser")
 	style_tag = soup.new_tag("style")
 	font_map = {}
 
-	def get_html(blocks, soup):
-
-		map_of_std_props_info = {} # prop_name -> list of prop_info stack
-		html = ""
-
-		def get_tag(block, soup, data_key=None):
-			block = extend_with_component(block)
-
-			props_obj = {}
-
-			if block.get("props"):
-				for prop_name, prop_info in block.get("props").items():
-					is_standard = prop_info.get("isStandard", False)
-					is_passed_down = prop_info.get("isPassedDown", False)
-					interpreted_value = get_interpreted_prop_value(prop_info, data_key)
-
-					if is_standard:
-						map_of_std_props_info.setdefault(prop_name, []).append(prop_info)
-					
-					props_obj[prop_name] = {"value": interpreted_value, "is_standard": is_standard, "is_passed_down": is_passed_down}
-
-			set_dynamic_content_placeholder(block, data_key)
-			element = block.get("originalElement") or block.get("element")
-
-			if not element:
-				return ""
-
-			classes = block.get("classes", [])
-			if element in (
-				"span",
-				"h1",
-				"p",
-				"b",
-				"h2",
-				"h3",
-				"h4",
-				"h5",
-				"h6",
-				"label",
-				"a",
-			):
-				classes.insert(0, "__text_block__")
-
-			# temp fix: since p inside p is illegal
-			if element in ["p", "__raw_html__"]:
-				element = "div"
-
-			tag = soup.new_tag(element)
-			tag.attrs = block.get("attributes", {})
-
-			customAttributes = block.get("customAttributes", {})
-			if customAttributes:
-				for key, value in customAttributes.items():
-					tag[key] = value
-
-			if block.get("baseStyles", {}):
-				style_class = f"fb-{frappe.generate_hash(length=8)}"
-				styles = {
-					"base": split_styles(block.get("baseStyles", {})),
-					"mobile": split_styles(block.get("mobileStyles", {})),
-					"tablet": split_styles(block.get("tabletStyles", {})),
-					"raw": split_styles(block.get("rawStyles", {})),
-				}
-
-				set_fonts(
-					[
-						styles["base"]["regular"],
-						styles["mobile"]["regular"],
-						styles["tablet"]["regular"],
-						styles["raw"]["regular"],
-					],
-					font_map,
-				)
-
-				append_style(styles["base"]["regular"], style_tag, style_class)
-				append_style(styles["raw"]["regular"], style_tag, style_class)
-				append_state_style(styles["raw"]["state"], style_tag, style_class)
-				append_state_style(styles["base"]["state"], style_tag, style_class)
-
-				append_style(styles["tablet"]["regular"], style_tag, style_class, device="tablet")
-				append_state_style(styles["tablet"]["state"], style_tag, style_class, device="tablet")
-
-				append_style(styles["mobile"]["regular"], style_tag, style_class, device="mobile")
-				append_state_style(styles["mobile"]["state"], style_tag, style_class, device="mobile")
-
-				classes.insert(0, style_class)
-
-			tag.attrs["class"] = " ".join(classes)
-
-			innerContent = block.get("innerHTML")
-			if innerContent:
-				inner_soup = bs.BeautifulSoup(innerContent, "html.parser")
-				set_fonts_from_html(inner_soup, font_map)
-				tag.append(inner_soup)
-
-			if block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"):
-				comes_from = block.get("dataKey").get("comesFrom", "dataScript")
-				default_props = None
-
-				loop_var, iterator_key, data_key = get_iterator_info(block, data_key, map_of_std_props_info)
-
-				tag.append(f"{{% for {loop_var} in {iterator_key} %}}")
-
-				child_tag, child_tag_details = get_tag(block.get("children")[0], soup, data_key)
-				
-				if comes_from == "props":
-					default_props = get_loop_vars(map_of_std_props_info, block.get("dataKey").get("key"))
-					child_tag_details['default_props'] = default_props
-
-				append_child_tag(tag, child_tag, child_tag_details)
-     
-				tag.append("{% endfor %}")
-			else:
-				for child in block.get("children", []) or []:
-					visibility_key = get_visibility_key(child, data_key)
-					child_tag, child_tag_details = get_tag(child, soup, data_key=data_key)
-					child_tag_details['visibility_key'] = visibility_key
-					append_child_tag(tag, child_tag, child_tag_details)
-
-			if element == "body":
-				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
-
-			for prop_name, prop_info in props_obj.items():
-				if prop_info.get("is_standard"):
-					map_of_std_props_info[prop_name].pop()
-
-			all_props = {k: v["value"] for k, v in props_obj.items()}
-			passed_down_props = {k: v["value"] for k, v in props_obj.items() if v.get("is_passed_down")}
-
-			if block.get("blockClientScript"):
-				script_content = f"(function (props){{ {block.get('blockClientScript')} }}).call(document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), {{{{ props | to_safe_json }}}});"
-				tag.attrs["data-block-id"] = f"{{{{ unique_hash }}}}" # unique hash as repeating blocks have same blockId / class
-				script_tag = soup.new_tag("script")
-				script_tag.string = script_content
-				tag.append(script_tag)
-			
-			tag_details = {
-				"all_props": to_jinja_literal(all_props),
-				"passed_down_props": to_jinja_literal(passed_down_props),
-				"block_data_script": block.get("blockDataScript", None),
-			}
-
-			return tag, tag_details
-
-		for block in blocks:
-			tag, tag_details = get_tag(block, soup)
-
-			html += f"{{% with block = {{ }} | execute_script_and_combine('{escape_single_quotes(tag_details.get('block_data_script', ''))}', {(tag_details.get('all_props', '{}'))}) %}}{tag!s}{{% endwith %}}"
-			html = f"{{% with props = {tag_details.get('all_props', '{}')} %}}{html}{{% endwith %}}"
-			html = f"{{% with passed_down_props = {tag_details.get('passed_down_props', '{}')} %}}{html}{{% endwith %}}"
-			
-		# print("Final HTML: ", html)
-		# write to file
+	# Shared state during rendering
+	shared_state = {
+		"soup": soup,
+		"style_tag": style_tag,
+		"font_map": font_map,
+		"has_block_script": False,
+		"standard_props_stack": {},  # prop_name -> list of prop_info
+		"global_script_tag": soup.new_tag("script"),
+		"used_block_scripts": set(),
+	}
+
+	html_parts = []
+
+	for block in blocks:
+		block = extend_block_with_component(block)
+		props = process_block_props(block, None, shared_state["standard_props_stack"])
+		block_context = get_block_context(block, props)
+
+		shared_state["has_block_script"] = block_context["block_data_script"] is not None
+
+		tag = build_tag(block, shared_state)
+		# Add global script to the top
+		tag.insert(0, shared_state["global_script_tag"])
+
+		html = wrap_html_with_context(str(tag), block_context)
+		# Write html to a file for debugging
 		with open("output.html", "w") as f:
 			f.write(html)
-		return html, str(style_tag), font_map
+		html_parts.append(html)
 
-	data = get_html(blocks, soup)
-	return data
+	return "".join(html_parts), str(style_tag), font_map, shared_state["has_block_script"]
 
 
-def get_style(style_obj):
-	return (
-		"".join(
-			f"{camel_case_to_kebab_case(key)}: {value};"
-			for key, value in style_obj.items()
-			if value is not None and value != "" and not key.startswith("__")
-		)
-		if style_obj
-		else ""
-	)
+def build_tag(block: dict, state: dict, data_key: Optional[dict] = None) -> bs.Tag:
+	"""
+	Transforms a single block to an HTML tag.
 
-def get_interpreted_prop_value(prop, data_key):
-	prop_is_dynamic = prop.get("isDynamic", False)
-	prop_comes_from = prop.get("comesFrom", "props")
-	prop_is_standard = prop.get("isStandard", False)
-	prop_value = prop.get("value")
-	
-	default_value = prop.get("standardOptions", {}).get("options", {}).get("defaultValue") if prop_is_standard else None
-	
-	if prop_value is None:
-		return default_value if prop_is_standard else "undefined"
-	
-	if prop_is_dynamic:
-		key_mapping = {
-			"dataScript": jinja_safe_key(f"{extract_data_key(data_key)}.{prop_value}") if data_key else prop_value,
-			"blockDataScript": jinja_safe_key(f"block.{prop_value}"),
-			"props": jinja_safe_key(f"props.{prop_value}")
-		}
-		key = key_mapping.get(prop_comes_from, prop_value)
-		fallback = escape_single_quotes(default_value) if default_value is not None else 'undefined'
-		return f"{{{{ {key} if {key} is defined else '{fallback}' }}}}"
-	
-	if prop_is_standard:
-		prop_value = parse_static_value(
-			prop_value or default_value,
-			prop.get("standardOptions", {}).get("type"),
-		)
-	
-	return prop_value if prop_value is not None else "undefined"
+	#### Returns:
+		BeautifulSoup tag element
+	"""
+
+	props = process_block_props(block, data_key, state["standard_props_stack"])
+
+	set_dynamic_content_placeholders(block, data_key)
+
+	tag = create_html_tag(block, state)
+
+	if is_repeater_block(block):
+		render_repeater_children(tag, block, data_key, state)
+	else:
+		render_children(tag, block, data_key, state)
+
+	attach_client_script(tag, block, state)
+
+	# Add body scripts for body element
+	if block.get("element") == "body":
+		tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
+
+	cleanup_props_stack(props, state["standard_props_stack"])
+
+	return tag
+
+
+def get_block_context(block: dict, props: dict) -> dict:
+	"""
+	Get the Jinja template context for a block.
+
+	#### Returns:
+		Dict with keys: { `all_props`, `passed_down_props`, `block_data_script` }
+	"""
+	all_props = {name: info["value"] for name, info in props.items()}
+	passed_down_props = {name: info["value"] for name, info in props.items() if info["is_passed_down"]}
+
+	return {
+		"all_props": all_props,
+		"passed_down_props": passed_down_props,
+		"block_data_script": block.get("blockDataScript"),
+	}
+
+
+def cleanup_props_stack(props: dict, props_stack: dict):
+	"""Remove standard props from the stack after processing."""
+	for name, info in props.items():
+		if info["is_standard"] and name in props_stack:
+			props_stack[name].pop()
+
+
+def process_block_props(block: dict, data_key: Optional[dict], props_stack: dict) -> dict:
+	"""
+	Process all properties of a block. Also adds standard props info to the props stack if applicable.
+
+	#### Returns:
+		Dict with keys: { `value`, `is_standard`, `is_passed_down` }
+	"""
+	props = {}
+
+	for prop_name, prop_config in block.get("props", {}).items():
+		is_standard = prop_config.get("isStandard", False)
+		is_passed_down = prop_config.get("isPassedDown", False)
+
+		value = interpret_prop_value(prop_config, data_key)
+
+		# Track standard properties in stack
+		if is_standard:
+			props_stack.setdefault(prop_name, []).append(prop_config)
+
+		props[prop_name] = {"value": value, "is_standard": is_standard, "is_passed_down": is_passed_down}
+
+	return props
+
+
+def interpret_prop_value(prop_config: dict, data_key: Optional[dict]) -> Any:
+	"""Interpret prop value based on its configuration (static or dynamic)."""
+	is_dynamic = prop_config.get("isDynamic", False)
+	comes_from = prop_config.get("comesFrom", "props")
+	is_standard = prop_config.get("isStandard", False)
+	value = prop_config.get("value")
+
+	default_value = None
+	if is_standard:
+		default_value = prop_config.get("standardOptions", {}).get("options", {}).get("defaultValue")
+
+	if value is None:
+		return default_value if is_standard else "undefined"
+
+	if is_dynamic:
+		return get_dynamic_props_template(value, comes_from, data_key, default_value)
+
+	if is_standard:
+		prop_type = prop_config.get("standardOptions", {}).get("type")
+		value = parse_static_value(value or default_value, prop_type)
 
-def get_iterator_info(block, data_key, map_of_std_props_info):
-	iterator_key = block.get("dataKey").get("key")
-	loop_var = ""
-	comes_from = block.get("dataKey").get("comesFrom", "dataScript")
+	return value if value is not None else "undefined"
+
+
+def get_dynamic_props_template(
+	prop_value: str, comes_from: str, data_key: Optional[dict], default_value: Any
+) -> str:
+	"""Get a Jinja template reference for dynamic properties."""
+	if comes_from == "blockDataScript":
+		key = jinja_safe_key(f"block.{prop_value}")
+	elif comes_from == "props":
+		key = jinja_safe_key(f"props.{prop_value}")
+	else:  # dataScript
+		if data_key:
+			base_key = extract_data_key(data_key)
+			key = jinja_safe_key(f"{base_key}.{prop_value}")
+		else:
+			key = prop_value
+
+	fallback = escape_single_quotes(default_value) if default_value is not None else "undefined"
+	return f"{{{{ {key} if {key} is defined else '{fallback}' }}}}"
+
+
+def create_html_tag(block: dict, state: dict) -> bs.Tag:
+	"""Create HTML tag element with attributes, classes, and styling."""
+	soup = state["soup"]
+
+	element = block.get("originalElement") or block.get("element") or "div"
+
+	# fix: since p inside p is illegal
+	if element in ["p", "__raw_html__"]:
+		element = "div"
+
+	tag = soup.new_tag(element)
+
+	tag.attrs = block.get("attributes", {}).copy()
+
+	for key, value in block.get("customAttributes", {}).items():
+		tag[key] = value
+
+	classes = build_tag_classes(block, state)
+	tag.attrs["class"] = " ".join(classes)
+
+	add_inner_html_content(tag, block, state)
+
+	return tag
+
+
+def build_tag_classes(block: dict, state: dict) -> list[str]:
+	"""Build list of CSS classes for the tag."""
+	classes = block.get("classes", []).copy()
+	element = block.get("originalElement") or block.get("element")
+
+	text_elements = {"span", "h1", "p", "b", "h2", "h3", "h4", "h5", "h6", "label", "a"}
+	if element in text_elements:
+		classes.insert(0, "__text_block__")
+
+	if block.get("baseStyles"):
+		style_class = generate_and_apply_styles(block, state)
+		classes.insert(0, style_class)
+
+	return classes
+
+
+def generate_and_apply_styles(block: dict, state: dict) -> str:
+	"""Generate a unique style class and append all styles to the style tag."""
+	style_class = f"fb-{frappe.generate_hash(length=8)}"
+	style_tag = state["style_tag"]
+	font_map = state["font_map"]
+
+	styles = {
+		"base": split_styles(block.get("baseStyles", {})),
+		"mobile": split_styles(block.get("mobileStyles", {})),
+		"tablet": split_styles(block.get("tabletStyles", {})),
+		"raw": split_styles(block.get("rawStyles", {})),
+	}
+
+	style_list = [
+		styles["base"]["regular"],
+		styles["mobile"]["regular"],
+		styles["tablet"]["regular"],
+		styles["raw"]["regular"],
+	]
+	set_fonts(style_list, font_map)
+
+	# Append styles for different states and devices
+	# Base and raw
+	append_style(styles["base"]["regular"], style_tag, style_class)
+	append_style(styles["raw"]["regular"], style_tag, style_class)
+	append_state_style(styles["raw"]["state"], style_tag, style_class)
+	append_state_style(styles["base"]["state"], style_tag, style_class)
+
+	# Tablet
+	append_style(styles["tablet"]["regular"], style_tag, style_class, device="tablet")
+	append_state_style(styles["tablet"]["state"], style_tag, style_class, device="tablet")
+
+	# Mobile
+	append_style(styles["mobile"]["regular"], style_tag, style_class, device="mobile")
+	append_state_style(styles["mobile"]["state"], style_tag, style_class, device="mobile")
+
+	return style_class
+
+
+def add_inner_html_content(tag: bs.Tag, block: dict, state: dict):
+	"""Add inner HTML content to the tag."""
+	inner_content = block.get("innerHTML")
+	if inner_content:
+		inner_soup = bs.BeautifulSoup(inner_content, "html.parser")
+		set_fonts_from_html(inner_soup, state["font_map"])
+		tag.append(inner_soup)
+
+
+def is_repeater_block(block: dict) -> bool:
+	"""Check if block is a repeater (loop) block."""
+	return bool(block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"))
+
+
+def render_children(tag: bs.Tag, block: dict, data_key: Optional[dict], state: dict):
+	"""Render (non-repeater) children."""
+	for child in block.get("children", []) or []:
+		child = extend_block_with_component(child)
+		child_props = process_block_props(child, data_key, state["standard_props_stack"])
+		child_context = get_block_context(child, child_props)
+		child_context["visibility_key"] = get_visibility_condition_key(child, data_key)
+
+		state["has_block_script"] = child_context["block_data_script"] is not None
+
+		child_tag = build_tag(child, state, data_key)
+
+		append_child_with_context(tag, child_tag, child_context)
+
+
+def render_repeater_children(tag: bs.Tag, block: dict, data_key: Optional[dict], state: dict):
+	"""Render children for repeater blocks (with for loops)."""
+	loop_info = get_loop_info(block, data_key, state["standard_props_stack"])
+
+	tag.append(f"{{% for {loop_info['loop_var']} in {loop_info['iterator_key']} %}}")
+
+	child = block.get("children")[0]
+	child = extend_block_with_component(child)
+
+	child_props = process_block_props(child, loop_info["data_key"], state["standard_props_stack"])
+	child_context = get_block_context(child, child_props)
+
+	state["has_block_script"] = child_context["block_data_script"] is not None
+
+	if block.get("dataKey", {}).get("comesFrom") == "props":
+		data_key_key = block.get("dataKey").get("key")
+		child_context["default_props"] = extract_loop_variables(data_key_key, state["standard_props_stack"])
+
+	child_tag = build_tag(child, state, loop_info["data_key"])
+
+	append_child_with_context(tag, child_tag, child_context)
+
+	tag.append("{% endfor %}")
+
+
+def get_loop_info(block: dict, data_key: Optional[dict], props_stack: dict) -> dict:
+	"""
+	Get loop information (variable name, iterator, data_key).
+
+	Returns:
+	    Dict with keys: loop_var, iterator_key, data_key
+	"""
+	data_key_config = block.get("dataKey", {})
+	iterator_key = data_key_config.get("key")
+	comes_from = data_key_config.get("comesFrom", "dataScript")
 
 	if comes_from == "props":
-		loop_vars = get_loop_vars(map_of_std_props_info, iterator_key)
+		loop_vars = extract_loop_variables(iterator_key, props_stack)
+		loop_var = ", ".join(loop_vars)  # "item" or "key, value"
+		safe_key = jinja_safe_key(f"props.{iterator_key}")
 
-		loop_var = ", ".join(loop_vars)  # `item` for array and `key, value` for object
-		iterator_key = jinja_safe_key(f"props.{iterator_key}")
+		# For objects, iterate over items()
+		if len(loop_vars) > 1:
+			safe_key = f"{safe_key}.items()"
 
-		if len(loop_vars) > 1:  # object repeater
-			iterator_key = f"{iterator_key}.items()"
+		return {"loop_var": loop_var, "iterator_key": safe_key, "data_key": data_key}
 
-	elif comes_from == "blockDataScript":		
-		# resetting block_data for repeater blocks by reassigning loop_var to "block"
-		loop_var = "block"
-		iterator_key = jinja_safe_key(f"block.{iterator_key}")
-	else:
+	elif comes_from == "blockDataScript":
+		return {
+			"loop_var": "block",
+			"iterator_key": jinja_safe_key(f"block.{iterator_key}"),
+			"data_key": data_key,
+		}
+
+	else:  # dataScript
 		if data_key:
-			iterator_key = f"{extract_data_key(data_key)}.{iterator_key}"
-		loop_var = f"key_{iterator_key.replace('.', '__')}"
-		iterator_key = jinja_safe_key(iterator_key)
-		data_key = {"key": loop_var, "comesFrom": "dataScript"}
-	return loop_var, iterator_key, data_key
-
-def get_visibility_key(block, data_key):
-	if block.get("visibilityCondition"):
-		visibility_condition = block.get("visibilityCondition")
-		if isinstance(visibility_condition, str) or visibility_condition.get("comesFrom", "dataScript") == "dataScript":
-			if data_key:
-				visibility_key = f"{extract_data_key(data_key)}.{key}"
-			else:
-				visibility_key = visibility_condition.get("key")
+			full_key = f"{extract_data_key(data_key)}.{iterator_key}"
 		else:
-			key = visibility_condition.get("key")
-			if visibility_condition.get("comesFrom") == "props":
-				visibility_key = f"props.{key}"
-			else:
-				visibility_key = f"block.{key}"
-			visibility_key = jinja_safe_key(visibility_key)
-		return visibility_key
-	return None
+			full_key = iterator_key
+
+		loop_var = f"key_{full_key.replace('.', '__')}"
+
+		return {
+			"loop_var": loop_var,
+			"iterator_key": jinja_safe_key(full_key),
+			"data_key": {"key": loop_var, "comesFrom": "dataScript"},
+		}
+
+
+def extract_loop_variables(key: str, props_stack: dict) -> list[str]:
+	"""Extract loop variable names based on prop type (array or object)."""
+	if key not in props_stack:
+		return []
+
+	prop_info = props_stack[key][-1]
+	standard_options = prop_info.get("standardOptions", {})
+	prop_type = standard_options.get("type")
+
+	if prop_type == "array":
+		return ["item"]  # TODO: allow custom item name
+	elif prop_type == "object":
+		return ["key", "value"]  # TODO: allow custom key/value names
 
-def get_loop_vars(map_of_std_props_info, key):
-	if key in map_of_std_props_info:
-		std_prop_info = map_of_std_props_info[key][-1]
-		standard_options = std_prop_info.get("standardOptions", {})
-		if standard_options.get("type") == "array":
-			return ["item"]  # TODO: allow custom item name
-		elif standard_options.get("type") == "object":
-			return ["key", "value"]  # TODO: allow custom key, value names
 	return []
 
+
+def get_visibility_condition_key(block: dict, data_key: Optional[dict]) -> Optional[str]:
+	"""Get the Jinja key for visibility condition."""
+	visibility_condition = block.get("visibilityCondition")
+	if not visibility_condition:
+		return None
+
+	# Handle string format (legacy)
+	if isinstance(visibility_condition, str):
+		key = visibility_condition
+		comes_from = "dataScript"
+	else:
+		key = visibility_condition.get("key")
+		comes_from = visibility_condition.get("comesFrom", "dataScript")
+
+	# Get key based on source
+	if comes_from == "props":
+		return jinja_safe_key(f"props.{key}")
+	elif comes_from == "blockDataScript":
+		return jinja_safe_key(f"block.{key}")
+	else:  # dataScript
+		if data_key:
+			return f"{extract_data_key(data_key)}.{key}"
+		return key
+
+
+def attach_client_script(tag: bs.Tag, block: dict, state: dict):
+	"""Attach client-side JavaScript to the block."""
+	script = block.get("blockClientScript")
+	if not script:
+		return
+
+	# Generate unique identifier for the script
+	script_unique_id = block.get("blockId")
+	if block.get("isBlockClientScriptOverridden"):
+		script_unique_id = frappe.generate_hash(length=8)
+
+	# Add global function definition (only once)
+	if script_unique_id not in state["used_block_scripts"]:
+		state["global_script_tag"].append(f"function {script_unique_id}(props) {{{script}}}\n")
+		state["used_block_scripts"].add(script_unique_id)
+
+	# Add data attribute for selecting this specific block
+	tag.attrs["data-block-id"] = "{{ unique_hash }}"
+
+	# Add local script to call the function
+	local_script = state["soup"].new_tag("script")
+	local_script.string = (
+		f"({script_unique_id}).call("
+		f"document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), "
+		f"{{{{ props | to_safe_json }}}}"
+		f");"
+	)
+	tag.append(local_script)
+
+
+def append_child_with_context(parent: bs.Tag, child: bs.Tag, context: dict):
+	"""Append child tag with proper Jinja context wrapping."""
+	# Generate unique hash for this block instance
+	# This is unique for each block irrespective of loops or components
+	parent.append("{% with unique_hash = (loop.index if loop is defined else 0) | hash %}")
+
+	if context.get("default_props"):
+		props_str = ", ".join([f"'{var}': {var}" for var in context["default_props"]])
+		parent.append(f"{{% with passed_down_props = passed_down_props | combine({{ {props_str} }}) %}}")
+		parent.append("{% with props = passed_down_props %}")
+
+	all_props_literal = to_jinja_literal(context["all_props"])
+	passed_down_literal = to_jinja_literal(context["passed_down_props"])
+
+	parent.append(f"{{% with props = {all_props_literal} | combine(passed_down_props) %}}")
+	parent.append(f"{{% with passed_down_props = passed_down_props | combine({passed_down_literal}) %}}")
+
+	if context.get("block_data_script"):
+		escaped_script = escape_single_quotes(context["block_data_script"])
+		parent.append(f"{{% with block = block | execute_script_and_combine('{escaped_script}', props) %}}")
+
+	if context.get("visibility_key"):
+		parent.append(f"{{% if {context['visibility_key']} %}}")
+
+	parent.append(child)
+
+	if context.get("visibility_key"):
+		parent.append("{% endif %}")
+
+	if context.get("block_data_script"):
+		parent.append("{% endwith %}")
+
+	parent.append("{% endwith %}")
+	parent.append("{% endwith %}")
+
+	if context.get("default_props"):
+		parent.append("{% endwith %}{% endwith %}")
+
+	parent.append("{% endwith %}")
+
+
+def set_dynamic_content_placeholders(block: dict, data_key: Optional[dict] = None):
+	"""Apply dynamic content placeholders to block attributes and styles."""
+	block_data_key = block.get("dataKey", {}) or {}
+	dynamic_values = [block_data_key] if block_data_key else []
+	dynamic_values += block.get("dynamicValues", []) or []
+
+	for dynamic_value_doc in dynamic_values:
+		original_key = dynamic_value_doc.get("key", "")
+
+		if not isinstance(dynamic_value_doc, dict):
+			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
+
+		if not dynamic_value_doc or not dynamic_value_doc.get("key"):
+			continue
+
+		key = get_dynamic_value_key(dynamic_value_doc, original_key, data_key)
+
+		property_name = dynamic_value_doc.get("property")
+		value_type = dynamic_value_doc.get("type")
+
+		if value_type == "attribute":
+			current_value = block["attributes"].get(property_name, "")
+			block["attributes"][property_name] = f"{{{{ {key} or '{escape_single_quotes(current_value)}' }}}}"
+
+		elif value_type == "style":
+			if not block["attributes"].get("style"):
+				block["attributes"]["style"] = ""
+
+			css_property = camel_case_to_kebab_case(property_name)
+			current_value = block["baseStyles"].get(property_name, "") or ""
+			block["attributes"]["style"] += (
+				f"{css_property}: {{{{ {key} or '{escape_single_quotes(current_value)}' }}}};"
+			)
+
+		elif value_type == "key" and not block.get("isRepeaterBlock"):
+			current_value = block.get(property_name, "")
+			block[property_name] = (
+				f"{{{{ {key} if {key} or {key} in ['', 0] else '{escape_single_quotes(current_value)}' }}}}"
+			)
+
+
+def get_dynamic_value_key(dynamic_value_doc: dict, original_key: str, data_key: Optional[dict]) -> str:
+	"""Get the Jinja key for a dynamic value."""
+	comes_from = dynamic_value_doc.get("comesFrom", "dataScript")
+
+	if comes_from == "props":
+		return jinja_safe_key(f"props.{original_key}")
+	elif comes_from == "blockDataScript":
+		return jinja_safe_key(f"block.{original_key}")
+	else:  # dataScript
+		key = dynamic_value_doc.get("key")
+		if data_key:
+			key = f"{extract_data_key(data_key)}.{key}"
+			return jinja_safe_key(key)
+		return key
+
+
+def wrap_html_with_context(html: str, context: dict) -> str:
+	"""
+	Wrap HTML with Jinja context variables.
+
+	#### Returns:
+	    HTML string
+	"""
+	all_props_literal = to_jinja_literal(context["all_props"])
+	passed_down_literal = to_jinja_literal(context["passed_down_props"])
+
+	script_escaped = escape_single_quotes(context.get("block_data_script") or "")
+	html = (
+		f"{{% with block = {{}} | execute_script_and_combine('{script_escaped}', {all_props_literal}) %}}"
+		f"{html}"
+		f"{{% endwith %}}"
+	)
+
+	# Set props contexts
+	html = f"{{% with props = {all_props_literal} %}}{html}{{% endwith %}}"
+	html = f"{{% with passed_down_props = {passed_down_literal} %}}{html}{{% endwith %}}"
+
+	return html
+
+
+def extend_block_with_component(block: dict) -> dict:
+	if not block.get("extendedFromComponent"):
+		return block
+
+	component = frappe.get_cached_value(
+		"Builder Component",
+		block["extendedFromComponent"],
+		["block", "name"],
+		as_dict=True,
+	)
+
+	component_block = frappe.parse_json(component.block if component else "{}")
+	if component_block:
+		extend_block(component_block, block)
+		return component_block
+
+	return block
+
+
 def wrap_with_media_query(style_string, device):
 	if device == "mobile":
 		return f"@media only screen and (max-width: {MOBILE_BREAKPOINT}px) {{ {style_string} }}"
@@ -772,6 +1074,18 @@ def wrap_with_media_query(style_string, device):
 	return style_string
 
 
+def get_style(style_obj):
+	return (
+		"".join(
+			f"{camel_case_to_kebab_case(key)}: {value};"
+			for key, value in style_obj.items()
+			if value is not None and value != "" and not key.startswith("__")
+		)
+		if style_obj
+		else ""
+	)
+
+
 def append_style(style_obj, style_tag, style_class, device="desktop"):
 	style = get_style(style_obj)
 	if not style:
@@ -814,22 +1128,6 @@ def set_fonts_from_html(soup, font_map):
 					font_map[font] = {"weights": ["400"]}
 
 
-def extend_with_component(block):
-	if block.get("extendedFromComponent"):
-		component = frappe.get_cached_value(
-			"Builder Component",
-			block["extendedFromComponent"],
-			["block", "name"],
-			as_dict=True,
-		)
-		component_block = frappe.parse_json(component.block if component else "{}")
-		if component_block:
-			extend_block(component_block, block)
-			block = component_block
-
-	return block
-
-
 def extend_block(block, overridden_block):
 	block["baseStyles"].update(overridden_block["baseStyles"])
 	block["mobileStyles"].update(overridden_block["mobileStyles"])
@@ -866,6 +1164,7 @@ def extend_block(block, overridden_block):
 
 	if overridden_block.get("blockClientScript"):
 		block["blockClientScript"] = overridden_block.get("blockClientScript")
+		block["isBlockClientScriptOverridden"] = True
 
 	if overridden_block.get("blockDataScript"):
 		block["blockDataScript"] = overridden_block.get("blockDataScript")
@@ -901,88 +1200,6 @@ def extend_block(block, overridden_block):
 	return block
 
 
-def append_child_tag(tag, child_tag, child_tag_details):
-	
-	child_tag_props = child_tag_details.get('all_props')
-	child_passed_down_props = child_tag_details.get('passed_down_props')
-	child_tag_block_script = child_tag_details.get('block_data_script')
-	visibility_key = child_tag_details.get('visibility_key')
-	default_props = child_tag_details.get('default_props')
- 
-	tag.append("{% with unique_hash = (loop.index if loop is defined else 0) | hash %}")
-
-	if default_props:
-		default_props = ", ".join([f"'{var}': {var}" for var in default_props])
-		tag.append(f"{{% with passed_down_props = passed_down_props | combine({{ {default_props} }}) %}}")
-		tag.append("{% with props = passed_down_props %}") # resetting props for repeater blocks and for props deriving from repeater loop vars
-
-	tag.append(f"{{% with props = {child_tag_props} | combine(passed_down_props) %}}")
-	tag.append(f"{{% with passed_down_props = passed_down_props | combine({child_passed_down_props}) %}}")
-	
-	if child_tag_block_script:
-		tag.append(f"{{% with block = block | execute_script_and_combine('{escape_single_quotes(child_tag_block_script)}', props) %}}")
-	
-	if visibility_key:
-		tag.append(f"{{% if {visibility_key} %}}")
-	
-	tag.append(child_tag)
-	
-	if visibility_key:
-		tag.append("{% endif %}")
-  
-	if child_tag_block_script:
-		tag.append("{% endwith %}")
-
-	tag.append("{% endwith %}")
-	tag.append("{% endwith %}")
-
-	if default_props:
-		tag.append("{% endwith %}{% endwith %}")
-
-	tag.append("{% endwith %}")
-
-
-def set_dynamic_content_placeholder(block, data_key=None):
-	block_data_key = block.get("dataKey", {}) or {}
-	dynamic_values = [block_data_key] if block_data_key else []
-	dynamic_values += block.get("dynamicValues", []) or []
-	for dynamic_value_doc in dynamic_values:
-		original_key = dynamic_value_doc.get("key", "")
-		if not isinstance(dynamic_value_doc, dict):
-			# if dynamic_value_doc is a string, convert it to dict
-			dynamic_value_doc = {"key": dynamic_value_doc, "type": "key", "property": dynamic_value_doc}
-		if dynamic_value_doc and dynamic_value_doc.get("key"):
-			key = ""
-			if dynamic_value_doc.get("comesFrom") == "props":
-				key = jinja_safe_key(f"props.{original_key}")
-			elif dynamic_value_doc.get("comesFrom") == "blockDataScript":
-				key = jinja_safe_key(f"block.{original_key}")
-			else:
-				key = (
-					f"{extract_data_key(data_key)}.{dynamic_value_doc.get('key')}" if data_key else dynamic_value_doc.get("key")
-				)
-				if data_key:
-					key = jinja_safe_key(key)
-
-			_property = dynamic_value_doc.get("property")
-			_type = dynamic_value_doc.get("type")
-			if _type == "attribute":
-				block["attributes"][_property] = (
-					f"{{{{ {key} or '{escape_single_quotes(block['attributes'].get(_property, ''))}' }}}}"
-				)
-			elif _type == "style":
-				if not block["attributes"].get("style"):
-					block["attributes"]["style"] = ""
-				css_property = camel_case_to_kebab_case(_property)
-				block["attributes"]["style"] += (
-					f"{css_property}: {{{{ {key} or '{escape_single_quotes(block['baseStyles'].get(_property, '') or '')}' }}}};"
-				)
-			elif _type == "key" and not block.get("isRepeaterBlock"):
-				block[_property] = (
-					f"{{{{ {key} if {key} or {key} in ['', 0] else '{escape_single_quotes(block.get(_property, ''))}' }}}}"
-				)
-
-
 @redis_cache(ttl=60 * 60)
 def find_page_with_path(route):
 	try:
@@ -1015,6 +1232,7 @@ def resolve_path(path):
 
 	return original_resolve_path(path)
 
+
 def reset_with_component(block, extended_with_component, component_children):
 	reset_block(block)
 	block["children"] = []
@@ -1052,6 +1270,7 @@ def reset_block(block):
 	block["dynamicValues"] = []
 	return block
 
+
 def extract_data_key(data_key):
 	if isinstance(data_key, str):
 		return data_key
@@ -1059,8 +1278,9 @@ def extract_data_key(data_key):
 		return data_key.get("key")
 	return None
 
+
 def jinja_safe_key(key):
-    # convert a.b to (a or {}).get('b', {})
+	# convert a.b to (a or {}).get('b', {})
 	# to avoid undefined error in jinja
 	keys = (key or "").split(".")
 	key = f"({keys[0]} or {{}})"
@@ -1068,6 +1288,7 @@ def jinja_safe_key(key):
 		key = f"{key}.get('{k}', {{}})"
 	return key
 
+
 def to_jinja_literal(obj):
 	# detect Jinja expressions inside strings (e.g. "{{ sample }}")
 	if isinstance(obj, str):
@@ -1096,35 +1317,29 @@ def to_jinja_literal(obj):
 
 	return repr(obj)
 
-def parse_static_value(value: str, prop_type: str):
+
+def parse_static_value(value: str, prop_type: str) -> Any:
+	"""Parse static value based on property type."""
 	match prop_type:
-		case "string":
-			return f"{value}"
+		case "string" | "select":
+			return str(value)
 		case "number":
 			try:
 				return float(value)
-			except ValueError:
+			except (ValueError, TypeError):
 				return None
 		case "boolean":
-			if value is True or value is False:
+			if isinstance(value, bool):
 				return value
-			if value.lower() in ["true", "1"]:
+			if str(value).lower() in ["true", "1"]:
 				return True
-			elif value.lower() in ["false", "0"]:
+			elif str(value).lower() in ["false", "0"]:
 				return False
-			else:
-				return None
-		case "array":
-			try:
-				return frappe.parse_json(value)
-			except Exception:
-				return None
-		case "object":
+			return None
+		case "array" | "object":
 			try:
 				return frappe.parse_json(value)
 			except Exception:
 				return None
-		case "select":
-			return f"{value}"
 		case _:
-			return f"{value}"
+			return str(value)

From 1ab976eeae3d650bd275663008fcefceeb5a3647 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 16 Jan 2026 16:02:38 +0530
Subject: [PATCH 299/547] refactor(PropsPopoverContent): simplify toggle
 options and streamline state management

---
 .../src/components/PropsPopoverContent.vue    | 470 ++++++++----------
 1 file changed, 209 insertions(+), 261 deletions(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 254bbe58c..25a84fd56 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -6,16 +6,7 @@
 		<div v-if="showIsStandardInput" class="flex items-center justify-between">
 			<InputLabel>Is Standard</InputLabel>
 			<OptionToggle
-				:options="[
-					{
-						label: 'Yes',
-						value: 'true',
-					},
-					{
-						label: 'No',
-						value: 'false',
-					},
-				]"
+				:options="toggleOptions"
 				:model-value="isStandard"
 				@update:model-value="handleIsStandardChange" />
 		</div>
@@ -24,16 +15,8 @@
 			<Input
 				v-model="name"
 				placeholder="Enter prop name"
-				@update:model-value="
-					(val) => {
-						name = val;
-					}
-				"
-				@input="
-					(val) => {
-						name = val;
-					}
-				"></Input>
+				@update:model-value="(val) => (name = val)"
+				@input="(val) => (name = val)"></Input>
 		</div>
 		<div class="flex items-center justify-between">
 			<InputLabel>Type</InputLabel>
@@ -47,19 +30,11 @@
 		<div v-if="!isStandardBool" class="flex items-center justify-between">
 			<InputLabel v-model="value">Value</InputLabel>
 			<Input
-				v-if="selectedPropType == 'static'"
+				v-if="isStaticProp"
 				v-model="value"
 				placeholder="Enter prop name"
-				@update:model-value="
-					(val) => {
-						value = val;
-					}
-				"
-				@input="
-					(val) => {
-						value = val;
-					}
-				"></Input>
+				@update:model-value="(val) => (value = val)"
+				@input="(val) => (value = val)"></Input>
 			<Autocomplete
 				v-else
 				:make-fixed="true"
@@ -75,16 +50,7 @@
 		<div v-if="!isStandardBool" class="flex items-center justify-between">
 			<InputLabel>Pass Down</InputLabel>
 			<OptionToggle
-				:options="[
-					{
-						label: 'Yes',
-						value: 'true',
-					},
-					{
-						label: 'No',
-						value: 'false',
-					},
-				]"
+				:options="toggleOptions"
 				:model-value="isPassedDown"
 				@update:model-value="(val) => (isPassedDown = val)" />
 		</div>
@@ -92,16 +58,7 @@
 		<div v-if="false && !isStandardBool && isInFragmentMode" class="flex items-center justify-between">
 			<InputLabel>Is Editable</InputLabel>
 			<OptionToggle
-				:options="[
-					{
-						label: 'Yes',
-						value: 'true',
-					},
-					{
-						label: 'No',
-						value: 'false',
-					},
-				]"
+				:options="toggleOptions"
 				:model-value="isEditable"
 				@update:model-value="(val) => (isEditable = val)" />
 		</div>
@@ -110,26 +67,15 @@
 			<div v-if="false" class="flex items-center justify-between">
 				<InputLabel>Is Required</InputLabel>
 				<OptionToggle
-					:options="[
-						{
-							label: 'Yes',
-							value: 'true',
-						},
-						{
-							label: 'No',
-							value: 'false',
-						},
-					]"
+					:options="toggleOptions"
 					:model-value="String(standardPropOptions.isRequired)"
 					@update:model-value="(val) => (standardPropOptions.isRequired = val === 'true')" />
 			</div>
 			<component
-				:is="componentMapping[standardPropOptions.type as keyof typeof componentMapping]"
+				:is="standardPropTypeComponent"
 				:options="standardPropOptions.options || {}"
 				ref="optionsComponentRef"
-				@update:options="(options: any) => {
-					standardPropOptions.options = options;
-				}" />
+				@update:options="updateStandardPropOptions" />
 		</template>
 		<BuilderButton
 			:disabled="!name.trim().length"
@@ -179,36 +125,30 @@ const props = withDefaults(
 const canvasStore = useCanvasStore();
 const blockDataStore = useBlockDataStore();
 
+const STANDARD_PROP_TYPES = ["string", "number", "boolean", "select", "array", "object"] as const;
+const COMPONENT_MAPPING = {
+	string: StringOptions,
+	number: NumberOptions,
+	boolean: BooleanOptions,
+	select: SelectOptions,
+	array: ArrayOptions,
+	object: ObjectOptions,
+} as const;
+
+const TOGGLE_OPTIONS: { label: string; value: string }[] = [
+	{ label: "Yes", value: "true" },
+	{ label: "No", value: "false" },
+];
+
 const isStandard = ref(props.propDetails?.isStandard ? "true" : "false");
-const isStandardBool = computed(() => isStandard.value === "true");
-const isEditable = ref("false"); // TODO: required?
+const isEditable = ref("false");
 const isPassedDown = ref(props.propDetails?.isPassedDown ? "true" : "false");
 const name = ref(props.propName ?? "");
 const value = ref(props.propDetails?.value ?? "");
 const comesFrom = ref<BlockProps[string]["comesFrom"]>(props.propDetails?.comesFrom ?? null);
-const selectedNonStandardPropType = ref(
-	props.propDetails && !props.propDetails.isStandard ? !props.propDetails.isDynamic : "static",
-);
-const standardPropOptions = reactive<BlockPropsStandardOptions>(
-	props.propDetails && props.propDetails.isStandard
-		? {
-				...props.propDetails.standardOptions,
-				isRequired: Boolean(props.propDetails.standardOptions?.isRequired),
-				type: props.propDetails.standardOptions?.type || "string",
-		  }
-		: {
-				isRequired: false,
-				type: "string",
-				// defaultValue: "",
-				options: {},
-				dependencies: {},
-		  },
-);
-const standardPropDependencyMap = reactive<{ [key: string]: any }>(
-	props.propDetails && props.propDetails.isStandard
-		? props.propDetails.standardOptions?.dependencies || {}
-		: {},
-);
+const selectedNonStandardPropType = ref(getInitialNonStandardPropType());
+const standardPropOptions = reactive<BlockPropsStandardOptions>(getInitialStandardPropOptions());
+const standardPropDependencyMap = reactive<{ [key: string]: any }>(getInitialDependencies());
 const autoCompleteRef = ref<typeof Autocomplete | null>(null);
 const optionsComponentRef = ref<any>(null);
 
@@ -225,185 +165,191 @@ const emit = defineEmits({
 	}) => true,
 });
 
-const propTypes = computed(() => {
-	if (isStandardBool.value) {
-		return [
-			{
-				label: "String",
-				value: "string",
-			},
-			{
-				label: "Number",
-				value: "number",
-			},
-			{
-				label: "Boolean",
-				value: "boolean",
-			},
-			{
-				label: "Select",
-				value: "select",
-			},
-			{
-				label: "Array",
-				value: "array",
-			},
-			{
-				label: "Object",
-				value: "object",
-			},
-		];
-	} else {
-		return [
-			{
-				label: "Static",
-				value: "static",
-			},
-			{
-				label: "Dynamic",
-				value: "dynamic",
-			},
-		];
-	}
-});
+const isStandardBool = computed(() => isStandard.value === "true");
+const isInFragmentMode = computed(() => canvasStore.editingMode == "fragment");
+const isStaticProp = computed(() => selectedNonStandardPropType.value === "static");
 
 const showIsStandardInput = computed(() => {
-	return canvasStore.editingMode == "fragment" && !blockController.getFirstSelectedBlock()?.getParentBlock();
+	return isInFragmentMode.value && !blockController.getFirstSelectedBlock()?.getParentBlock();
 });
 
-const isInFragmentMode = computed(() => {
-	return canvasStore.editingMode == "fragment";
+const toggleOptions = computed(() => TOGGLE_OPTIONS);
+
+const propTypes = computed(() => {
+	return isStandardBool.value ? getStandardPropTypes() : getNonStandardPropTypes();
 });
 
 const selectedPropType = computed(() => {
-	if (isStandardBool.value) {
-		return standardPropOptions.type;
-	} else {
-		return selectedNonStandardPropType.value;
-	}
+	return isStandardBool.value ? standardPropOptions.type : selectedNonStandardPropType.value;
 });
 
-const STANDARD_PROP_TYPES = ["string", "number", "boolean", "select", "array", "object"];
+const standardPropTypeComponent = computed(() => {
+	return COMPONENT_MAPPING[standardPropOptions.type as keyof typeof COMPONENT_MAPPING];
+});
 
-const setPropType = (type: string) => {
-	if (isStandardBool.value && STANDARD_PROP_TYPES.includes(type)) {
-		standardPropOptions.type = type as "string" | "number" | "boolean" | "select" | "array" | "object";
-	} else {
-		selectedNonStandardPropType.value = type as "static" | "dynamic";
-	}
-	comesFrom.value = null;
-	value.value = "";
-};
+const currentBlock = computed(() => blockController.getFirstSelectedBlock());
 
 const pageDataArray = computed(() => {
-	const currentBlock = blockController.getFirstSelectedBlock();
-	if (currentBlock) {
-		return getDataArray(blockDataStore.getPageData(currentBlock.blockId) || {});
+	if (currentBlock.value) {
+		return getDataArray(blockDataStore.getPageData(currentBlock.value.blockId) || {});
 	}
 	return [];
 });
 
 const blockDataArray = computed(() => {
-	const currentBlock = blockController.getFirstSelectedBlock();
-	if (currentBlock) {
-		return getDataArray(blockDataStore.getBlockData(currentBlock.blockId, "passedDown") || {});
+	if (currentBlock.value) {
+		return getDataArray(blockDataStore.getBlockData(currentBlock.value.blockId, "passedDown") || {});
 	}
 	return [];
 });
 
+function getInitialNonStandardPropType() {
+	return props.propDetails && !props.propDetails.isStandard
+		? props.propDetails.isDynamic
+			? "dynamic"
+			: "static"
+		: "static";
+}
+
+function getInitialStandardPropOptions(): BlockPropsStandardOptions {
+	if (props.propDetails?.isStandard) {
+		return {
+			...props.propDetails.standardOptions,
+			isRequired: Boolean(props.propDetails.standardOptions?.isRequired),
+			type: props.propDetails.standardOptions?.type || "string",
+		};
+	}
+
+	return {
+		isRequired: false,
+		type: "string",
+		options: {},
+		dependencies: {},
+	};
+}
+
+function getInitialDependencies() {
+	return props.propDetails?.isStandard ? props.propDetails.standardOptions?.dependencies || {} : {};
+}
+
+function getStandardPropTypes() {
+	return [
+		{ label: "String", value: "string" },
+		{ label: "Number", value: "number" },
+		{ label: "Boolean", value: "boolean" },
+		{ label: "Select", value: "select" },
+		{ label: "Array", value: "array" },
+		{ label: "Object", value: "object" },
+	];
+}
+
+function getNonStandardPropTypes() {
+	return [
+		{ label: "Static", value: "static" },
+		{ label: "Dynamic", value: "dynamic" },
+	];
+}
+
+function isValidStandardPropType(
+	type: string,
+): type is "string" | "number" | "boolean" | "select" | "array" | "object" {
+	return STANDARD_PROP_TYPES.includes(type as any);
+}
+
+function setPropType(type: string) {
+	if (isStandardBool.value && isValidStandardPropType(type)) {
+		standardPropOptions.type = type;
+	} else {
+		selectedNonStandardPropType.value = type as "static" | "dynamic";
+	}
+	comesFrom.value = null;
+	value.value = "";
+}
+
+function filterDataOptions(dataArray: string[], query: string) {
+	return dataArray
+		.filter((prop) => query.trim() === "" || prop.toLowerCase().includes(query.toLowerCase()))
+		.map((prop) => ({ label: prop, value: prop }));
+}
+
 const getOptions = async (query: string) => {
-	let options: { label: string; value: string }[] = [];
-	pageDataArray.value.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--dataScript`,
-			});
-		}
-	});
-	blockDataArray.value.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--blockDataScript`,
-			});
-		}
-	});
-	console.log("Options: ", options, blockDataArray.value);
-	return options;
-};
+	const pageOptions = filterDataOptions(pageDataArray.value, query).map((opt) => ({
+		...opt,
+		value: `${opt.value}--dataScript`,
+	}));
 
-const componentMapping = {
-	string: StringOptions,
-	number: NumberOptions,
-	boolean: BooleanOptions,
-	select: SelectOptions,
-	array: ArrayOptions,
-	object: ObjectOptions,
+	const blockOptions = filterDataOptions(blockDataArray.value, query).map((opt) => ({
+		...opt,
+		value: `${opt.value}--blockDataScript`,
+	}));
+
+	return [...pageOptions, ...blockOptions];
 };
 
 const handleIsStandardChange = async (newVal: string) => {
 	isStandard.value = newVal;
 	await nextTick();
-	reset({
-		keepName: true,
-		keepIsStandard: true,
-		keepProps: false,
-		keepType: false,
-	});
+	resetState({ keepName: true, keepIsStandard: true, keepProps: false, keepType: false });
 };
 
 const handleTypeChange = async (newVal: string) => {
 	setPropType(newVal);
 	await nextTick();
-	reset({
-		keepName: true,
-		keepIsStandard: true,
-		keepProps: false,
-		keepType: true,
-	});
+	resetState({ keepName: true, keepIsStandard: true, keepProps: false, keepType: true });
 };
 
 const handleValueSelection = (option: string | null) => {
 	if (option) {
-		comesFrom.value = option.split("--").slice(-1)[0] as BlockProps[string]["comesFrom"];
-		value.value = option.split("--").slice(0, -1).join("--");
+		const parts = option.split("--");
+		comesFrom.value = parts[parts.length - 1] as BlockProps[string]["comesFrom"];
+		value.value = parts.slice(0, -1).join("--");
 	} else {
 		comesFrom.value = null;
 		value.value = "";
 	}
 };
 
-const reset = async (keepParams: {
+const updateStandardPropOptions = (options: any) => {
+	standardPropOptions.options = options;
+};
+
+interface ResetParams {
 	keepName: boolean;
 	keepIsStandard: boolean;
 	keepProps: boolean;
 	keepType: boolean;
-}) => {
-	const { keepName, keepIsStandard, keepProps, keepType } = keepParams;
-	const isStandardByDefault = isInFragmentMode.value && props.mode == "add";
-
-	const details = keepProps ? props.propDetails ?? null : null;
+}
+
+function getDefaultIsStandard(keepProps: boolean): string {
+	const isStandardByDefault = isInFragmentMode.value && props.mode === "add";
+	const propDetailsStandard = keepProps ? props.propDetails?.isStandard : undefined;
+	return propDetailsStandard !== undefined
+		? String(propDetailsStandard)
+		: isStandardByDefault
+		? "true"
+		: "false";
+}
+
+function resetNonStandardState(keepProps: boolean, keepType: boolean) {
+	if (!keepType) {
+		const details = keepProps ? props.propDetails : null;
+		selectedNonStandardPropType.value = details?.isDynamic ? "dynamic" : "static";
+	}
+}
 
-	if (!keepName) name.value = props.propName ?? "";
-	if (!keepIsStandard)
-		isStandard.value =
-			details?.isStandard || isStandardByDefault ? "true" : "false";
-
-	value.value = details?.value ?? "";
+function resetStandardState(keepProps: boolean, keepType: boolean) {
+	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : details?.standardOptions?.type ?? "string";
+		const nextType = keepType ? standardPropOptions.type : details.standardOptions?.type ?? "string";
 
 		Object.assign(standardPropOptions, {
-			...details?.standardOptions,
-			isRequired: Boolean(details?.standardOptions?.isRequired),
+			...details.standardOptions,
+			isRequired: Boolean(details.standardOptions?.isRequired),
 			type: nextType,
 		});
 
-		const deps = details?.standardOptions?.dependencies ?? {};
-		Object.keys(standardPropDependencyMap).forEach((k) => delete standardPropDependencyMap[k]);
-		Object.assign(standardPropDependencyMap, deps);
+		updateDependencyMap(details.standardOptions?.dependencies || {});
 	} else if (isStandardBool.value) {
 		if (!keepType) {
 			standardPropOptions.type = "string";
@@ -412,61 +358,44 @@ const reset = async (keepParams: {
 		Object.assign(standardPropOptions, {
 			isRequired: false,
 			type: standardPropOptions.type,
-			// defaultValue: "",
 			options: {},
 			dependencies: {},
 		});
 
-		Object.assign(standardPropDependencyMap, {});
+		updateDependencyMap({});
+	}
+}
+
+function updateDependencyMap(deps: { [key: string]: any }) {
+	Object.keys(standardPropDependencyMap).forEach((k) => delete standardPropDependencyMap[k]);
+	Object.assign(standardPropDependencyMap, deps);
+}
+
+const resetState = async (params: ResetParams) => {
+	const { keepName, keepIsStandard, keepProps, keepType } = params;
+	const details = keepProps ? props.propDetails : null;
+
+	if (!keepName) {
+		name.value = props.propName ?? "";
+	}
+
+	if (!keepIsStandard) {
+		isStandard.value = getDefaultIsStandard(keepProps);
+	}
+
+	value.value = details?.value ?? "";
+
+	if (isStandardBool.value) {
+		resetStandardState(keepProps, keepType);
 	} else {
-		if (!keepType) {
-			selectedNonStandardPropType.value = details?.isDynamic ? "dynamic" : "static";
-		}
+		resetNonStandardState(keepProps, keepType);
 	}
 
 	optionsComponentRef.value?.reset(!!keepProps);
 };
 
-watch(
-	[() => props.propName, () => props.propDetails],
-	() =>
-		reset({
-			keepName: false,
-			keepIsStandard: false,
-			keepProps: true,
-			keepType: false,
-		}),
-	{
-		immediate: true,
-		deep: true,
-	},
-);
-
-watch(
-	selectedPropType,
-	() => {
-		autoCompleteRef.value?.refreshOptions();
-	},
-	{ immediate: true },
-);
-
-const save = async () => {
-	await nextTick();
-	console.log("Saving prop:", {
-		name: name.value,
-		isStandard: isStandardBool.value,
-		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
-		isPassedDown: isPassedDown.value === "true",
-		comesFrom: comesFrom.value,
-		value: isStandardBool.value ? null : value.value,
-		standardOptions: isStandardBool.value
-			? {
-					...standardPropOptions,
-					dependencies: standardPropDependencyMap.value,
-			  }
-			: undefined,
-	});
-	const propValue: BlockProps[string] = {
+function buildPropValue(): BlockProps[string] {
+	return {
 		isStandard: isStandardBool.value,
 		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
 		isPassedDown: isStandardBool.value || isPassedDown.value === "true",
@@ -479,11 +408,30 @@ const save = async () => {
 			  }
 			: undefined,
 	};
+}
+
+const save = async () => {
+	await nextTick();
+	const propValue = buildPropValue();
+
 	if (props.mode === "add") {
 		emit("add:prop", { name: name.value, value: propValue });
 	} else {
-		emit("update:prop", { oldPropName: props.propName!, newName: name.value, newValue: propValue });
+		emit("update:prop", {
+			oldPropName: props.propName!,
+			newName: name.value,
+			newValue: propValue,
+		});
 	}
 };
-defineExpose({ reset });
+
+watch(
+	[() => props.propName, () => props.propDetails],
+	() => resetState({ keepName: false, keepIsStandard: false, keepProps: true, keepType: false }),
+	{ immediate: true, deep: true },
+);
+
+watch(selectedPropType, () => autoCompleteRef.value?.refreshOptions(), { immediate: true });
+
+defineExpose({ reset: resetState });
 </script>

From 3fd2a4a13e8eb3d273bba9e98f2bb2bdff5f7156 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 16 Jan 2026 23:37:10 +0530
Subject: [PATCH 300/547] refactor(tests): switched from json string to Block
 objects in tests

---
 .../doctype/builder_page/builder_page.py      |   2 +-
 .../doctype/builder_page/test_builder_page.py | 388 +++++++++---------
 builder/utils.py                              |  13 +-
 3 files changed, 203 insertions(+), 200 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 8ac7511af..9be2c32db 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -1136,7 +1136,7 @@ def extend_block(block, overridden_block):
 
 	dynamicValues = overridden_block.get("dynamicValues", [])
 	dynamicValuesProperties = [dv.get("property") for dv in dynamicValues]
-	for dv in block.get("dynamicValues", []):
+	for dv in block.get("dynamicValues", []) or []:
 		if dv.get("property") in dynamicValuesProperties:
 			continue
 		dynamicValues.append(dv)
diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 687aa6443..3769fccd9 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -1,11 +1,15 @@
 # Copyright (c) 2023, asdf and Contributors
 # See license.txt
 
+import json
+
 import frappe
 from frappe.desk.form.load import getdoc
 from frappe.tests.utils import FrappeTestCase
 from frappe.website.serve import get_response_content
 
+from builder.utils import Block
+
 repeater_page_data_script = """
 data.update({
 	"items": [
@@ -24,7 +28,7 @@
 })
 """
 
-custom_data_script = "data.update({\"name_new\": \"Jane Doe\",})"
+custom_data_script = 'data.update({"name_new": "Jane Doe",})'
 
 
 class TestBuilderPage(FrappeTestCase):
@@ -37,24 +41,26 @@ def setUpClass(cls):
 				"page_title": "Test Page",
 				"published": 1,
 				"route": "/test-page",
-				"blocks": [
-					{
-						"element": "body",
-						"baseStyles": {"background": "red", "fontFamily": "Inter"},
-						"customAttributes": {"dir": "ltr"},
-						"children": [
-							{
-								"element": "h1",
-								"innerHTML": "Hello World!",
-								"baseStyles": {
-									"color": "blue",
-									"fontFamily": "Comic Sans MS",
-									"fontWeight": "500",
-								},
-							}
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							baseStyles={"background": "red", "fontFamily": "Inter"},
+							customAttributes={"dir": "ltr"},
+							children=[
+								Block(
+									element="h1",
+									innerHTML="Hello World!",
+									baseStyles={
+										"color": "blue",
+										"fontFamily": "Comic Sans MS",
+										"fontWeight": "500",
+									},
+								)
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert(ignore_if_duplicate=True)
 		cls.page_with_dynamic_route = frappe.get_doc(
@@ -64,9 +70,13 @@ def setUpClass(cls):
 				"published": 1,
 				"route": "/test-page-dynamic-route/<name>",
 				"dynamic_route": 1,
-				"blocks": [
-					{"element": "body", "children": [{"element": "h1", "innerHTML": "Dynamic Content!"}]}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body", children=[Block(element="h1", innerHTML="Dynamic Content!")]
+						).as_dict()
+					]
+				),
 			}
 		).insert(ignore_if_duplicate=True)
 
@@ -103,36 +113,36 @@ def test_dynamic_values(self):
 				"published": 1,
 				"route": "/dynamic-values-test",
 				"page_data_script": page_data_script,
-				"blocks": [
-					{
-						"element": "body",
-						"attributes": {"style": "background: #f0f0f0;"},
-						"children": [
-							{
-								"element": "h1",
-								"innerHTML": "Hello",
-								"attributes": {"style": "background: #f0f0f0;"},
-								"dynamicValues": [{"key": "name", "type": "key", "property": "innerHTML"}],
-							},
-							{
-								"element": "h2",
-								"innerHTML": "Content",
-								"attributes": {"style": "background: #f0f0f0;"},
-								"dynamicValues": [
-									{"key": "color", "type": "style", "property": "color"},
-									{"key": "padding", "type": "style", "property": "padding"},
-								],
-								"baseStyles": {},
-							},
-							{
-								"element": "a",
-								"innerHTML": "Link",
-								"attributes": {},
-								"dynamicValues": [{"key": "link", "type": "attribute", "property": "href"}],
-							},
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							attributes={"style": "background: #f0f0f0;"},
+							children=[
+								Block(
+									element="h1",
+									innerHTML="Hello",
+									attributes={"style": "background: #f0f0f0;"},
+									dynamicValues=[{"key": "name", "type": "key", "property": "innerHTML"}],
+								),
+								Block(
+									element="h2",
+									innerHTML="Content",
+									attributes={"style": "background: #f0f0f0;"},
+									dynamicValues=[
+										{"key": "color", "type": "style", "property": "color"},
+										{"key": "padding", "type": "style", "property": "padding"},
+									],
+								),
+								Block(
+									element="a",
+									innerHTML="Link",
+									dynamicValues=[{"key": "link", "type": "attribute", "property": "href"}],
+								),
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert()
 
@@ -152,41 +162,47 @@ def test_repeater_block_dynamic_values(self):
 				"published": 1,
 				"route": "/repeater-block-test",
 				"page_data_script": repeater_page_data_script,
-				"blocks": [
-					{
-						"element": "body",
-						"children": [
-							{
-								"element": "div",
-								"isRepeaterBlock": True,
-								"dataKey": {"key": "items", "type": "key", "property": "dataKey"},
-								"children": [
-									{
-										"element": "div",
-										"children": [
-											{
-												"element": "h2",
-												"innerHTML": "",
-												"attributes": {},
-												"dynamicValues": [
-													{"key": "name", "type": "key", "property": "innerHTML"}
-												],
-											},
-											{
-												"element": "span",
-												"innerHTML": "",
-												"attributes": {},
-												"dynamicValues": [
-													{"key": "price", "type": "key", "property": "innerHTML"}
-												],
-											},
-										],
-									}
-								],
-							}
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							children=[
+								Block(
+									element="div",
+									isRepeaterBlock=True,
+									dataKey={"key": "items", "type": "key", "property": "dataKey"},
+									children=[
+										Block(
+											element="div",
+											children=[
+												Block(
+													element="h2",
+													dynamicValues=[
+														{
+															"key": "name",
+															"type": "key",
+															"property": "innerHTML",
+														}
+													],
+												),
+												Block(
+													element="span",
+													dynamicValues=[
+														{
+															"key": "price",
+															"type": "key",
+															"property": "innerHTML",
+														}
+													],
+												),
+											],
+										)
+									],
+								)
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert()
 
@@ -204,29 +220,22 @@ def test_component_dynamic_values(self):
 		component = frappe.get_doc(
 			{
 				"doctype": "Builder Component",
-				"block": 
-					{
-						"blockId": "comp-block-1",
-						"element": "div",
-						"attributes": {"style": "background: #f0f0f0;"},
-						"baseStyles": {},
-						"mobileStyles": {},
-						"tabletStyles": {},
-						"classes": [],
-						"children": [
-							{
-								"blockId": "comp-block-1-1",
-								"element": "h1",
-								"innerHTML": "Hello",
-								"attributes": {"style": "background: #f0f0f0;"},
-								"baseStyles": {},
-								"mobileStyles": {},
-								"tabletStyles": {},
-								"classes": [],
-								"dynamicValues": [{"key": "name", "type": "key", "property": "innerHTML"}],
-							},
+				"block": json.dumps(
+					Block(
+						blockId="comp-block-1",
+						element="div",
+						attributes={"style": "background: #f0f0f0;"},
+						children=[
+							Block(
+								blockId="comp-block-1-1",
+								element="h1",
+								innerHTML="Hello",
+								attributes={"style": "background: #f0f0f0;"},
+								dynamicValues=[{"key": "name", "type": "key", "property": "innerHTML"}],
+							),
 						],
-					}
+					).as_dict()
+				),
 			}
 		).insert()
 
@@ -237,34 +246,24 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-no-overrides",
 				"page_data_script": page_data_script,
-				"blocks": [
-					{
-						"element": "body",
-						"children": [
-							{
-								"extendedFromComponent": component.name,
-								"baseStyles": {},
-								"mobileStyles": {},
-								"tabletStyles": {},
-								"attributes": {},
-								"classes": [],
-								"children": [
-									{
-										"isChildOfComponent": component.name,
-										"referenceBlockId": "comp-block-1-1",
-										"dynamicValues": [],
-										"baseStyles": {},
-										"mobileStyles": {},
-										"tabletStyles": {},
-										"attributes": {},
-										"classes": []
-									},
-								
-								],
-							}
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							children=[
+								Block(
+									extendedFromComponent=component.name,
+									children=[
+										Block(
+											isChildOfComponent=component.name,
+											referenceBlockId="comp-block-1-1",
+										),
+									],
+								)
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert()
 
@@ -275,33 +274,27 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-with-overrides",
 				"page_data_script": custom_data_script,
-				"blocks": [
-					{
-						"element": "body",
-						"children": [
-							{
-								"extendedFromComponent": component.name,
-								"baseStyles": {},
-								"mobileStyles": {},
-								"tabletStyles": {},
-								"attributes": {},
-								"classes": [],
-								"children": [
-									{
-										"isChildOfComponent": component.name,
-										"referenceBlockId": "comp-block-1-1",
-										"dynamicValues": [{"key": "name_new", "type": "key", "property": "innerHTML"}],
-										"baseStyles": {},
-										"mobileStyles": {},
-										"tabletStyles": {},
-										"attributes": {},
-										"classes": []
-									},
-								],
-							}
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							children=[
+								Block(
+									extendedFromComponent=component.name,
+									children=[
+										Block(
+											isChildOfComponent=component.name,
+											referenceBlockId="comp-block-1-1",
+											dynamicValues=[
+												{"key": "name_new", "type": "key", "property": "innerHTML"}
+											],
+										),
+									],
+								)
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert()
 
@@ -312,44 +305,47 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-with-bad-overrides",
 				"page_data_script": custom_data_script,
-				"blocks": [
-					{
-						"element": "body",
-						"children": [
-							{
-								"extendedFromComponent": component.name,
-								"baseStyles": {},
-								"mobileStyles": {},
-								"tabletStyles": {},
-								"attributes": {},
-								"classes": [],
-								"children": [
-									{
-										"isChildOfComponent": component.name,
-										"referenceBlockId": "comp-block-1-1",
-										"dynamicValues": [{"key": "non_existent_key", "type": "key", "property": "innerHTML"}],
-										"baseStyles": {},
-										"mobileStyles": {},
-										"tabletStyles": {},
-										"attributes": {},
-										"classes": []
-									}
-],
-							}
-						],
-					}
-				],
+				"blocks": json.dumps(
+					[
+						Block(
+							element="body",
+							children=[
+								Block(
+									extendedFromComponent=component.name,
+									children=[
+										Block(
+											isChildOfComponent=component.name,
+											referenceBlockId="comp-block-1-1",
+											dynamicValues=[
+												{
+													"key": "non_existent_key",
+													"type": "key",
+													"property": "innerHTML",
+												}
+											],
+										)
+									],
+								)
+							],
+						).as_dict()
+					]
+				),
 			}
 		).insert()
 
 		try:
 			content_with_no_overrides = get_response_content("/component-dynamic-values-test-no-overrides")
 			content_with_overrides = get_response_content("/component-dynamic-values-test-with-overrides")
-			content_with_bad_overrides = get_response_content("/component-dynamic-values-test-with-bad-overrides")
-	
-			self.assertTrue("John Doe" == get_html_for(content_with_no_overrides, "tag", "h1", only_content=True))
-			self.assertTrue("Jane Doe" == get_html_for(content_with_overrides, "tag", "h1", only_content=True))
-			self.assertTrue("Hello" == get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True))
+			content_with_bad_overrides = get_response_content(
+				"/component-dynamic-values-test-with-bad-overrides"
+			)
+			self.assertEqual(
+				"John Doe", get_html_for(content_with_no_overrides, "tag", "h1", only_content=True)
+			)
+			self.assertEqual("Jane Doe", get_html_for(content_with_overrides, "tag", "h1", only_content=True))
+			self.assertEqual(
+				"Hello", get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True)
+			)
 		finally:
 			page_with_component_no_overrides.delete()
 			page_with_component_having_overrides.delete()
diff --git a/builder/utils.py b/builder/utils.py
index a1f30c1ef..93902b07f 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -55,13 +55,17 @@ class Block:
 	isRepeaterBlock: bool = False
 	visibilityCondition: str | None = None
 	elementBeforeConversion: str | None = None
-	customAttributes: dict | None = None
-	dynamicValues: list[BlockDataKey] | None = None
+	customAttributes: ClassVar[dict] = {}
+	dynamicValues: ClassVar[list[BlockDataKey]] = []
+	blockClientScript: str = ""
+	blockDataScript: str = ""
+	props: ClassVar[dict] = {}
 
 	def __init__(self, **kwargs) -> None:
 		for key, value in kwargs.items():
 			if key == "children":
-				value = [Block(**b) if b and isinstance(b, dict) else None for b in (value or [])]
+				value = [b if isinstance(b, Block) else Block(**b) if b and isinstance(b, dict) else None for b in (value or [])]
+
 			setattr(self, key, value)
 
 	def as_dict(self):
@@ -89,6 +93,9 @@ def as_dict(self):
 			"elementBeforeConversion": self.elementBeforeConversion,
 			"customAttributes": self.customAttributes,
 			"dynamicValues": self.dynamicValues,
+			"blockClientScript": self.blockClientScript,
+			"blockDataScript": self.blockDataScript,
+			"props": self.props,
 		}
 
 

From fbbeba6e01d6ae882dc1f023f2b4af9606ac7d5b Mon Sep 17 00:00:00 2001
From: Hemant <guptahemant350@gmail.com>
Date: Mon, 19 Jan 2026 02:17:28 +0530
Subject: [PATCH 301/547] fix: Add hyphenated search support for z-index
 property

Issue:
The z-index property could only be found by searching 'zi' but not 'z-' which matches the actual CSS property name 'z-index'.

Solution:
Added 'z-index' and 'Z-Index' to the searchKeyWords array to support hyphenated search patterns while keeping camelCase support.

Now both search patterns work:
- Searching 'zi' matches 'ZIndex'
- Searching 'z-' matches 'z-index'

Fixes #451
---
 frontend/src/components/BlockPropertySections/StyleSection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 3459ac5f1..803ad0d7c 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -183,7 +183,7 @@ const styleSectionProperties = [
 				styleProperty: "zIndex",
 			};
 		},
-		searchKeyWords: "Z, Index, ZIndex, Z Index",
+		searchKeyWords: "Z, Index, ZIndex, Z Index, Z-index, Z-Index",
 		condition: () =>
 			!blockController.multipleBlocksSelected() &&
 			!blockController.isRoot() &&

From c43490e5711b1d920b4c678e81a9fdcd97cb11d5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 19 Jan 2026 22:14:09 +0530
Subject: [PATCH 302/547] refactor: renamed field to remove confusion from
 Builder Blocks

---
 .../builder/doctype/builder_settings/builder_settings.json    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index 9cc9c1b15..ca16683d5 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -104,14 +104,14 @@
    "default": "1",
    "fieldname": "block_click_handlers",
    "fieldtype": "Check",
-   "label": "Block Click Handlers"
+   "label": "Restrict Click Handlers"
   }
  ],
  "hide_toolbar": 1,
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2025-12-20 13:31:34.606833",
+ "modified": "2026-01-19 22:13:08.784598",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Settings",

From e376b6a38251b291c3b11fc2e5b0735bf9f67999 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 19 Jan 2026 22:15:20 +0530
Subject: [PATCH 303/547] fix: typo in comment

---
 frontend/src/components/Controls/Autocomplete.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 2f56bef31..c15604362 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -228,8 +228,8 @@ watch(
 );
 if (props.getOptions) refreshOptions();
 
-// in Popver, absolute positioning keeps all options within the popver taking extra space
-// making it fixed makes it float above Popver container
+// in Popover, absolute positioning keeps all options within the Popover taking extra space
+// making it fixed makes it float above Popover container
 const getFixedStyles = () => {
 	if (props.makeFixed && props.fixTo) {
 		const fixedToElRect = (

From fec98327c7e8a030174cc40820c5f406e128fa94 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 20 Jan 2026 14:46:29 +0530
Subject: [PATCH 304/547] fix(DynamicValueSelector): Allow setting key that has
 empty value

---
 frontend/src/components/Controls/DynamicValueHandler.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 712bf71d9..3e9cdf5c2 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -87,11 +87,10 @@ const dataArray = computed(() => {
 	function processObject(obj: Record<string, any>, prefix = "") {
 		Object.entries(obj).forEach(([key, value]) => {
 			const path = prefix ? `${prefix}.${key}` : key;
-
-			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-				processObject(value, path);
-			} else if (["string", "number", "boolean"].includes(typeof value)) {
+			if (!value || ["string", "number", "boolean"].includes(typeof value)) {
 				result.push(path);
+			} else if (typeof value === "object" && !Array.isArray(value)) {
+				processObject(value, path);
 			}
 		});
 	}

From a0e224f076899d48a7b8d3dd30000ab841bfddd2 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 20 Jan 2026 15:25:08 +0530
Subject: [PATCH 305/547] feat: [Init] Add support for dark mode images with
 dynamic source handling

---
 .../doctype/builder_page/builder_page.py      | 31 +++++++++-
 frontend/src/block.ts                         | 16 ++----
 .../ImageOptionsSection.ts                    | 56 +++++++++++++++++++
 frontend/src/components/BuilderBlock.vue      | 19 ++++++-
 frontend/src/utils/builderBlockCopyPaste.ts   |  7 +++
 frontend/src/utils/helpers.ts                 | 14 +++++
 6 files changed, 127 insertions(+), 16 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index db60f0cf1..c569d0a66 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -529,8 +529,31 @@ def get_tag(block, soup, data_key=None):
 			if element in ["p", "__raw_html__"]:
 				element = "div"
 
-			tag = soup.new_tag(element)
-			tag.attrs = block.get("attributes", {})
+			if element == "img":
+				attributes = block.get("attributes", {})
+				dark_src = (
+					frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
+				)
+				light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
+				if dark_src and light_src:
+					picture_tag = soup.new_tag("picture")
+
+					# Add source for dark mode
+					dark_source = soup.new_tag("source")
+					dark_source["srcset"] = dark_src
+					dark_source["media"] = "(prefers-color-scheme: dark)"
+					picture_tag.append(dark_source)
+
+					tag = soup.new_tag("img")
+					tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
+				else:
+					tag = soup.new_tag(element)
+					tag.attrs = block.get("attributes", {})
+					picture_tag = None
+			else:
+				tag = soup.new_tag(element)
+				tag.attrs = block.get("attributes", {})
+				picture_tag = None
 
 			customAttributes = block.get("customAttributes", {})
 			if customAttributes:
@@ -600,6 +623,10 @@ def get_tag(block, soup, data_key=None):
 			if element == "body":
 				tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
+			if picture_tag is not None:
+				picture_tag.append(tag)
+				return picture_tag
+
 			return tag
 
 		for block in blocks:
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index a2dd626ef..4f14c27db 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -8,6 +8,7 @@ import {
 	getBoxSpacing,
 	getNumberFromPx,
 	getTextContent,
+	handleBase64Attribute,
 	kebabToCamelCase,
 	parseAndSetBackground,
 	setBoxSpacing,
@@ -113,19 +114,10 @@ class Block implements BlockOptions {
 		parseAndSetBackground(this.tabletStyles);
 
 		if (this.isImage()) {
-			// if src is base64, convert it to a file
-			const src = this.getAttribute("src") as string;
-			if (src && src.startsWith("data:image")) {
-				const file = dataURLtoFile(src, "image.png");
-				if (file) {
-					this.setAttribute("src", "");
-					options.src = "";
-					uploadBuilderAsset(file, true).then((obj) => {
-						this.setAttribute("src", obj.fileURL);
-					});
-				}
-			}
+			handleBase64Attribute(this, "src", "image.png");
+			handleBase64Attribute(this, "darkSrc", "image-dark.png");
 		}
+
 		const bgImage = this.getStyle("backgroundImage") as string;
 		if (bgImage && /^url\(['"]?data:image/.test(bgImage)) {
 			let bgImage = this.getStyle("backgroundImage") as string;
diff --git a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
index 03e233474..39c9f9f1c 100644
--- a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
@@ -26,6 +26,27 @@ const imageOptionsSectionProperties = [
 		},
 		searchKeyWords: "Image, URL, Src, Fit, ObjectFit, Object Fit, Fill, Contain, Cover",
 	},
+	{
+		component: PropertyControl,
+		getProps: () => {
+			return {
+				component: ImageUploadInput,
+				controlType: "attribute",
+				styleProperty: "darkSrc",
+				label: "Dark Image",
+				allowDynamicValue: true,
+				popoverOffset: 120,
+				imageURL: blockController.getAttribute("darkSrc"),
+				imageFit: blockController.getStyle("objectFit"),
+			};
+		},
+		events: {
+			"update:imageURL": (val: string) => blockController.setAttribute("darkSrc", val),
+			"update:imageFit": (val: StyleValue) => blockController.setStyle("objectFit", val),
+		},
+		searchKeyWords: "Dark, Mode, Image, URL, Src, Dark Mode, Theme",
+		condition: () => blockController.isImage(),
+	},
 	{
 		component: Button,
 		getProps: () => {
@@ -61,6 +82,41 @@ const imageOptionsSectionProperties = [
 			return shouldShowOptimizeButton(imageUrl);
 		},
 	},
+	{
+		component: Button,
+		getProps: () => {
+			return {
+				class: "text-base self-end",
+			};
+		},
+		innerText: computed(() => {
+			const block = blockController.getSelectedBlocks()[0];
+			const imageUrl = (block?.getAttribute("darkSrc") as string) || "";
+			return getOptimizeButtonText(imageUrl);
+		}),
+		searchKeyWords:
+			"Dark, Mode, Image, Local, Copy, Server, Download, Host, Store, Convert, webp, Convert to webp, image, darkSrc, url",
+		events: {
+			click: () => {
+				const block = blockController.getSelectedBlocks()[0];
+				const imageUrl = block.getAttribute("darkSrc") as string;
+
+				return optimizeImage({
+					imageUrl,
+					onSuccess: (newUrl: string) => {
+						block.setAttribute("darkSrc", newUrl);
+					},
+				});
+			},
+		},
+		condition: () => {
+			if (!blockController.isImage()) {
+				return false;
+			}
+			const imageUrl = blockController.getAttribute("darkSrc") as string;
+			return shouldShowOptimizeButton(imageUrl);
+		},
+	},
 	{
 		component: PropertyControl,
 		getProps: () => {
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index c51242d77..337ce5cc7 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -40,12 +40,17 @@ import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
 import { getDataForKey } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
+import { useDark } from "@vueuse/core";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
 
+const isDark = useDark({
+	attribute: "data-theme",
+});
+
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
@@ -107,6 +112,14 @@ const classes = computed(() => {
 
 const attributes = computed(() => {
 	const attribs = { ...props.block.getAttributes(), ...attrs } as { [key: string]: any };
+
+	if (props.block.isImage() && !props.preview) {
+		if (isDark.value && attribs.darkSrc) {
+			attribs.src = attribs.darkSrc;
+		}
+		delete attribs.darkSrc;
+	}
+
 	if (
 		props.block.isText() ||
 		props.block.isHTML() ||
@@ -126,7 +139,8 @@ const attributes = computed(() => {
 				getDataForKey(props.data, props.block.getDataKey("key")) ??
 				attribs[props.block.getDataKey("property") as string];
 		}
-		props.block.getDynamicValues()
+		props.block
+			.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "attribute";
 			})
@@ -165,7 +179,8 @@ const styles = computed(() => {
 				),
 			};
 		}
-		props.block.getDynamicValues()
+		props.block
+			.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "style";
 			})
diff --git a/frontend/src/utils/builderBlockCopyPaste.ts b/frontend/src/utils/builderBlockCopyPaste.ts
index 1a85bbb4c..e12deb7cd 100644
--- a/frontend/src/utils/builderBlockCopyPaste.ts
+++ b/frontend/src/utils/builderBlockCopyPaste.ts
@@ -305,6 +305,13 @@ function updateURLsInBlock(block: Block, currentSiteURL: string): void {
 		if (src && typeof src === "string" && src.startsWith("/")) {
 			block.setAttribute("src", `${currentSiteURL}${src}`);
 		}
+
+		if (block.isImage()) {
+			const darkSrc = block.getAttribute("darkSrc");
+			if (darkSrc && typeof darkSrc === "string" && darkSrc.startsWith("/")) {
+				block.setAttribute("darkSrc", `${currentSiteURL}${darkSrc}`);
+			}
+		}
 	}
 
 	// Update background image URLs
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index c7febce38..5d03ae57a 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -453,6 +453,19 @@ function dataURLtoFile(dataurl: string, filename: string) {
 	}
 }
 
+function handleBase64Attribute(block: Block, attrName: string, fileName: string) {
+	const attrValue = block.getAttribute(attrName) as string;
+	if (attrValue?.startsWith("data:image")) {
+		const file = dataURLtoFile(attrValue, fileName);
+		if (file) {
+			block.setAttribute(attrName, "");
+			uploadBuilderAsset(file, true).then((obj) => {
+				block.setAttribute(attrName, obj.fileURL);
+			});
+		}
+	}
+}
+
 declare global {
 	interface Window {
 		Module: {
@@ -1070,6 +1083,7 @@ export {
 	getRouteVariables,
 	getTextContent,
 	getVideoBlock,
+	handleBase64Attribute,
 	HexToHSV,
 	HSVToHex,
 	isBlock,

From b6ceeac51ae41d599797687e2c60b4acb559ed5c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 20 Jan 2026 23:14:37 +0530
Subject: [PATCH 306/547] refactor(tests): flattened Blocks

---
 .../doctype/builder_page/test_builder_page.py | 204 +++++-------------
 builder/utils.py                              |  52 ++++-
 2 files changed, 95 insertions(+), 161 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 3769fccd9..84130de37 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -106,6 +106,20 @@ def test_publish_unpublish(self):
 		self.assertTrue("Hello World!" in content)
 
 	def test_dynamic_values(self):
+		body = Block(element="body")
+		header = Block(element="h1", innerHTML="Hello")
+		sub_header = Block(element="h2", innerHTML="Content")
+		link = Block(element="a", innerHTML="Link")
+
+		header.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
+		sub_header.attach_dynamic_values(
+			{"key": "color", "type": "style", "property": "color"},
+			{"key": "padding", "type": "style", "property": "padding"},
+		)
+		link.attach_dynamic_values({"key": "link", "type": "attribute", "property": "href"})
+
+		body.attach_children(header, sub_header, link)
+
 		page = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -113,36 +127,7 @@ def test_dynamic_values(self):
 				"published": 1,
 				"route": "/dynamic-values-test",
 				"page_data_script": page_data_script,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body",
-							attributes={"style": "background: #f0f0f0;"},
-							children=[
-								Block(
-									element="h1",
-									innerHTML="Hello",
-									attributes={"style": "background: #f0f0f0;"},
-									dynamicValues=[{"key": "name", "type": "key", "property": "innerHTML"}],
-								),
-								Block(
-									element="h2",
-									innerHTML="Content",
-									attributes={"style": "background: #f0f0f0;"},
-									dynamicValues=[
-										{"key": "color", "type": "style", "property": "color"},
-										{"key": "padding", "type": "style", "property": "padding"},
-									],
-								),
-								Block(
-									element="a",
-									innerHTML="Link",
-									dynamicValues=[{"key": "link", "type": "attribute", "property": "href"}],
-								),
-							],
-						).as_dict()
-					]
-				),
+				"blocks": body.as_json(wrap_in_array=True),
 			}
 		).insert()
 
@@ -155,6 +140,20 @@ def test_dynamic_values(self):
 			page.delete()
 
 	def test_repeater_block_dynamic_values(self):
+		body = Block(element="body")
+		repeater_block = Block(element="div", isRepeaterBlock=True)
+		wrapper_div = Block(element="div")
+		item_name = Block(element="h2")
+		item_price = Block(element="span")
+
+		repeater_block.attach_data_key("items", "dataKey")
+		item_name.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
+		item_price.attach_dynamic_values({"key": "price", "type": "key", "property": "innerHTML"})
+
+		wrapper_div.attach_children(item_name, item_price)
+		repeater_block.attach_children(wrapper_div)
+		body.attach_children(repeater_block)
+
 		page = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -162,47 +161,7 @@ def test_repeater_block_dynamic_values(self):
 				"published": 1,
 				"route": "/repeater-block-test",
 				"page_data_script": repeater_page_data_script,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body",
-							children=[
-								Block(
-									element="div",
-									isRepeaterBlock=True,
-									dataKey={"key": "items", "type": "key", "property": "dataKey"},
-									children=[
-										Block(
-											element="div",
-											children=[
-												Block(
-													element="h2",
-													dynamicValues=[
-														{
-															"key": "name",
-															"type": "key",
-															"property": "innerHTML",
-														}
-													],
-												),
-												Block(
-													element="span",
-													dynamicValues=[
-														{
-															"key": "price",
-															"type": "key",
-															"property": "innerHTML",
-														}
-													],
-												),
-											],
-										)
-									],
-								)
-							],
-						).as_dict()
-					]
-				),
+				"blocks": body.as_json(wrap_in_array=True),
 			}
 		).insert()
 
@@ -217,28 +176,25 @@ def test_repeater_block_dynamic_values(self):
 			page.delete()
 
 	def test_component_dynamic_values(self):
+		comp_root = Block(element="div", blockId="comp-block-1")
+		comp_name = Block(element="h1", blockId="comp-block-1-1", innerHTML="Hello")
+
+		comp_name.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
+		comp_root.attach_children(comp_name)
 		component = frappe.get_doc(
 			{
 				"doctype": "Builder Component",
-				"block": json.dumps(
-					Block(
-						blockId="comp-block-1",
-						element="div",
-						attributes={"style": "background: #f0f0f0;"},
-						children=[
-							Block(
-								blockId="comp-block-1-1",
-								element="h1",
-								innerHTML="Hello",
-								attributes={"style": "background: #f0f0f0;"},
-								dynamicValues=[{"key": "name", "type": "key", "property": "innerHTML"}],
-							),
-						],
-					).as_dict()
-				),
+				"block": comp_root.as_json(),
 			}
 		).insert()
 
+		body = Block(element="body")
+		comp_root_copy = Block(extendedFromComponent=component.name)
+		comp_name_copy = Block(isChildOfComponent=component.name, referenceBlockId="comp-block-1-1")
+
+		comp_root_copy.attach_children(comp_name_copy)
+		body.attach_children(comp_root_copy)
+
 		page_with_component_no_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -246,27 +202,12 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-no-overrides",
 				"page_data_script": page_data_script,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body",
-							children=[
-								Block(
-									extendedFromComponent=component.name,
-									children=[
-										Block(
-											isChildOfComponent=component.name,
-											referenceBlockId="comp-block-1-1",
-										),
-									],
-								)
-							],
-						).as_dict()
-					]
-				),
+				"blocks": body.as_json(wrap_in_array=True),
 			}
 		).insert()
 
+		comp_name_copy.attach_dynamic_values({"key": "name_new", "type": "key", "property": "innerHTML"})
+
 		page_with_component_having_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -274,30 +215,15 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-with-overrides",
 				"page_data_script": custom_data_script,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body",
-							children=[
-								Block(
-									extendedFromComponent=component.name,
-									children=[
-										Block(
-											isChildOfComponent=component.name,
-											referenceBlockId="comp-block-1-1",
-											dynamicValues=[
-												{"key": "name_new", "type": "key", "property": "innerHTML"}
-											],
-										),
-									],
-								)
-							],
-						).as_dict()
-					]
-				),
+				"blocks": body.as_json(wrap_in_array=True),
 			}
 		).insert()
 
+		comp_name_copy.clear_dynamic_values()
+		comp_name_copy.attach_dynamic_values(
+			{"key": "non_existent_key", "type": "key", "property": "innerHTML"}
+		)
+
 		page_with_component_having_bad_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -305,31 +231,7 @@ def test_component_dynamic_values(self):
 				"published": 1,
 				"route": "/component-dynamic-values-test-with-bad-overrides",
 				"page_data_script": custom_data_script,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body",
-							children=[
-								Block(
-									extendedFromComponent=component.name,
-									children=[
-										Block(
-											isChildOfComponent=component.name,
-											referenceBlockId="comp-block-1-1",
-											dynamicValues=[
-												{
-													"key": "non_existent_key",
-													"type": "key",
-													"property": "innerHTML",
-												}
-											],
-										)
-									],
-								)
-							],
-						).as_dict()
-					]
-				),
+				"blocks": body.as_json(wrap_in_array=True),
 			}
 		).insert()
 
diff --git a/builder/utils.py b/builder/utils.py
index 93902b07f..6eb3931a9 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -64,10 +64,36 @@ class Block:
 	def __init__(self, **kwargs) -> None:
 		for key, value in kwargs.items():
 			if key == "children":
-				value = [b if isinstance(b, Block) else Block(**b) if b and isinstance(b, dict) else None for b in (value or [])]
+				value = [
+					b if isinstance(b, Block) else Block(**b) if b and isinstance(b, dict) else None
+					for b in (value or [])
+				]
 
 			setattr(self, key, value)
 
+	@classmethod
+	def from_block(cls, block: "Block") -> "Block":
+		return cls(**block.as_dict())
+
+	def attach_dynamic_values(self, *dynamic_values: BlockDataKey):
+		if not self.dynamicValues:
+			self.dynamicValues = []
+		self.dynamicValues.extend(dynamic_values)
+
+	def clear_dynamic_values(self):
+		self.dynamicValues = []
+
+	def attach_data_key(self, key: str, property: str, type: str = "key"):
+		self.dataKey = {"key": key, "property": property, "type": type}
+
+	def clear_data_key(self):
+		self.dataKey = None
+
+	def attach_children(self, *children: "Block"):
+		if not self.children:
+			self.children = []
+		self.children.extend(children)
+
 	def as_dict(self):
 		return {
 			"blockId": self.blockId,
@@ -98,6 +124,9 @@ def as_dict(self):
 			"props": self.props,
 		}
 
+	def as_json(self, wrap_in_array=False):
+		return frappe.as_json([self.as_dict()]) if wrap_in_array else frappe.as_json(self.as_dict())
+
 
 def get_doc_as_dict(doctype, name):
 	assert isinstance(doctype, str)
@@ -597,24 +626,27 @@ def get_export_paths(app_path, export_name):
 
 
 def combine(a, b):
-    if a is None:
-        return b
-    if b is None:
-        return a
-    res = dict(a)
-    res.update(b)
-    return res
+	if a is None:
+		return b
+	if b is None:
+		return a
+	res = dict(a)
+	res.update(b)
+	return res
+
 
 def hash(s):
-    return f"{frappe.generate_hash(length=6)}-{s}"
+	return f"{frappe.generate_hash(length=6)}-{s}"
+
 
 def to_safe_json(data):
 	return frappe.as_json(data)
 
+
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()
 	_locals = dict(block=frappe._dict(), props=props)
 	execute_script(block_data_script, _locals, "sample")
 	block_data.update(_locals["block"])
-	return combine(prev_block_data, block_data)
\ No newline at end of file
+	return combine(prev_block_data, block_data)

From 0fad62004dfbb0c584248149666f6333fba3693f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 21 Jan 2026 12:51:40 +0530
Subject: [PATCH 307/547] fix: Replace by default if image is dropped over an
 image

---
 frontend/src/utils/useCanvasDropZone.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index 7743b3b20..8fbb8e198 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -43,12 +43,19 @@ export function useCanvasDropZone(
 
 		onOver: (files, ev) => {
 			if (builderStore.readOnlyMode) return;
-			if (ev.shiftKey) {
-				const parentBlock = getBlockToReplace(ev);
+			const initialBlock = getInitialParentBlock(ev);
+			const shouldReplaceImage = initialBlock?.isImage();
+
+			if (ev.shiftKey || shouldReplaceImage) {
+				const parentBlock = shouldReplaceImage ? initialBlock : getBlockToReplace(ev);
 				if (parentBlock) {
 					canvasStore.activeCanvas?.setHoveredBlock(parentBlock.blockId);
-					updateDropTarget(ev, parentBlock, 0, "column");
 					canvasStore.removeDropPlaceholder();
+
+					canvasStore.dropTarget.parentBlock = parentBlock;
+					canvasStore.dropTarget.index = 0;
+					canvasStore.dropTarget.x = ev.x;
+					canvasStore.dropTarget.y = ev.y;
 				}
 			} else {
 				const { parentBlock, index, layoutDirection } = findDropTarget(ev);

From 3afe7fed81b9b5dcf81a0f6836245744a5f5e89b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 21 Jan 2026 18:36:23 +0530
Subject: [PATCH 308/547] tests: added tests for block data scripts and props

---
 .../doctype/builder_page/test_builder_page.py | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 84130de37..2b61e19b0 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -30,6 +30,16 @@
 
 custom_data_script = 'data.update({"name_new": "Jane Doe",})'
 
+block_data_script = """
+block.update({
+	"content": "Custom Block Data",
+	"items": [
+		{"name": "Item 1", "price": "$10"},
+		{"name": "Item 2", "price": "$20"}
+	]
+})
+"""
+
 
 class TestBuilderPage(FrappeTestCase):
 	@classmethod
@@ -254,6 +264,110 @@ def test_component_dynamic_values(self):
 			page_with_component_having_bad_overrides.delete()
 			component.delete()
 
+	def test_block_data(self):
+		body = Block(element="body")
+		wrapper = Block(element="div", blockDataScript=block_data_script)
+		content_dynamic = Block(element="h4", innerHTML="Block Content")
+		content_fallback = Block(element="h4", innerHTML="Block Content")
+
+		content_dynamic.attach_dynamic_values(
+			{"key": "content", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"},
+		)
+		content_fallback.attach_dynamic_values(
+			{"key": "no_key", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"},
+		)
+
+		wrapper.attach_children(content_dynamic, content_fallback)
+		body.attach_children(wrapper)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Block Data Test",
+				"published": 1,
+				"route": "/block-data-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/block-data-test")
+			self.assertEqual("Custom Block Data", get_html_for(content, "tag", "h4", only_content=True))
+			self.assertEqual("Block Content", get_html_for(content, "tag", "h4", index=1, only_content=True))
+		finally:
+			page.delete()
+
+	def test_block_props(self):
+		body = Block(element="body")
+		div_wrapper = Block(
+			element="div",
+			props={
+				"first_name": {
+					"isDynamic": False,
+					"isPassedDown": True,
+					"value": "John",
+					"isStandard": False,
+				},
+				"last_name": {
+					"isDynamic": False,
+					"isPassedDown": False,
+					"value": "Doe",
+					"isStandard": False,
+				},
+			},
+			blockDataScript=block_data_script,
+		)
+		content_static_prop = Block(element="h4", innerHTML="Block Props Content")
+		content_dynamic_prop = Block(
+			element="h4",
+			innerHTML="Block Props Content",
+			props={
+				"content": {
+					"isDynamic": True,
+					"comesFrom": "blockDataScript",
+					"isPassedDown": True,
+					"value": "content",
+					"isStandard": False,
+				},
+			},
+		)
+		content_fallback = Block(element="h4", innerHTML="Block Props Content")
+
+		content_static_prop.attach_dynamic_values(
+			{"key": "first_name", "type": "key", "property": "innerHTML", "comesFrom": "props"},
+		)
+		content_dynamic_prop.attach_dynamic_values(
+			{"key": "content", "type": "key", "property": "innerHTML", "comesFrom": "props"},
+		)
+		content_fallback.attach_dynamic_values(
+			{"key": "last_name", "type": "key", "property": "innerHTML", "comesFrom": "props"},
+		)
+
+		div_wrapper.attach_children(content_static_prop, content_dynamic_prop, content_fallback)
+		body.attach_children(div_wrapper)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Block Props Test",
+				"published": 1,
+				"route": "/block-props-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/block-props-test")
+			self.assertEqual("John", get_html_for(content, "tag", "h4", only_content=True))
+			self.assertEqual(
+				"Custom Block Data", get_html_for(content, "tag", "h4", index=1, only_content=True)
+			)
+			self.assertEqual(
+				"Block Props Content", get_html_for(content, "tag", "h4", index=2, only_content=True)
+			)
+		finally:
+			page.delete()
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()

From 74513c2bc0ced1c37ecb9ba06c3fe02d3cc2d2b0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 21 Jan 2026 21:30:56 +0530
Subject: [PATCH 309/547] feat(blockProps): added labels for std. props

---
 frontend/src/builder.d.ts                     |  1 +
 .../StandardPropsInputSection.ts              |  2 +-
 frontend/src/components/PropsEditor.vue       |  2 +-
 .../src/components/PropsPopoverContent.vue    | 42 +++++++++++++------
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 0bfc234d8..4dd1df6e6 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -17,6 +17,7 @@ type BlockPropsStandardOptions = {
 declare type BlockProps = Record<
 	string,
 	{
+		label: string;
 		isDynamic: boolean;
 		isPassedDown: boolean;
 		comesFrom: "props" | "dataScript" | "blockDataScript" | null;
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index f77a62842..68d52de89 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -48,7 +48,7 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 			break;
 	}
 	map = {
-		label: propName,
+		label: propDetails.label || propName,
 		dynamicValueFilterOptions: {
 			excludeOwnProps: true,
 			excludeOwnBlockData: true,
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 9a32c8bc3..61fd28c0e 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -50,7 +50,7 @@
 									</div>
 									<div class="flex max-w-full flex-col gap-1">
 										<p class="text-sm font-medium">
-											{{ name }}
+											{{ value.label || name }}
 										</p>
 										<p
 											v-if="value.isStandard"
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 25a84fd56..18e1b33f7 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -10,13 +10,21 @@
 				:model-value="isStandard"
 				@update:model-value="handleIsStandardChange" />
 		</div>
+		<div v-if="isStandardBool" class="flex items-center justify-between">
+			<InputLabel>Label</InputLabel>
+			<Input
+				v-model="label"
+				placeholder="Enter prop label"
+				@update:model-value="(val) => (label = val)"
+				@input="(val) => (label = val)"></Input>
+		</div>
 		<div class="flex items-center justify-between">
-			<InputLabel>Name</InputLabel>
+			<InputLabel>Key</InputLabel>
 			<Input
-				v-model="name"
-				placeholder="Enter prop name"
-				@update:model-value="(val) => (name = val)"
-				@input="(val) => (name = val)"></Input>
+				v-model="key"
+				:placeholder="computedKey || 'Enter prop key'"
+				@update:model-value="(val) => (key = val)"
+				@input="(val) => (key = val)"></Input>
 		</div>
 		<div class="flex items-center justify-between">
 			<InputLabel>Type</InputLabel>
@@ -32,7 +40,7 @@
 			<Input
 				v-if="isStaticProp"
 				v-model="value"
-				placeholder="Enter prop name"
+				placeholder="Enter prop value"
 				@update:model-value="(val) => (value = val)"
 				@input="(val) => (value = val)"></Input>
 			<Autocomplete
@@ -78,7 +86,7 @@
 				@update:options="updateStandardPropOptions" />
 		</template>
 		<BuilderButton
-			:disabled="!name.trim().length"
+			:disabled="!key.trim().length && !label.trim().length"
 			label="Save"
 			variant="subtle"
 			class="w-full flex-shrink-0"
@@ -107,7 +115,7 @@ import ObjectOptions from "@/components/PropsOptions/ObjectOptions.vue";
 import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
 import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
-import { getDataArray } from "@/utils/helpers";
+import { getDataArray, toKebabCase } from "@/utils/helpers";
 import useBlockDataStore from "@/stores/blockDataStore";
 
 const props = withDefaults(
@@ -143,7 +151,8 @@ const TOGGLE_OPTIONS: { label: string; value: string }[] = [
 const isStandard = ref(props.propDetails?.isStandard ? "true" : "false");
 const isEditable = ref("false");
 const isPassedDown = ref(props.propDetails?.isPassedDown ? "true" : "false");
-const name = ref(props.propName ?? "");
+const label = ref(props.propDetails?.label ?? "");
+const key = ref(props.propName ?? "");
 const value = ref(props.propDetails?.value ?? "");
 const comesFrom = ref<BlockProps[string]["comesFrom"]>(props.propDetails?.comesFrom ?? null);
 const selectedNonStandardPropType = ref(getInitialNonStandardPropType());
@@ -165,6 +174,13 @@ const emit = defineEmits({
 	}) => true,
 });
 
+const computedKey = computed({
+	get: () => (key.value ? key.value : toKebabCase(label.value).replaceAll("-", "_")),
+	set: (val) => {
+		key.value = val;
+	},
+});
+
 const isStandardBool = computed(() => isStandard.value === "true");
 const isInFragmentMode = computed(() => canvasStore.editingMode == "fragment");
 const isStaticProp = computed(() => selectedNonStandardPropType.value === "static");
@@ -376,7 +392,8 @@ const resetState = async (params: ResetParams) => {
 	const details = keepProps ? props.propDetails : null;
 
 	if (!keepName) {
-		name.value = props.propName ?? "";
+		key.value = props.propName ?? "";
+		label.value = details?.label ?? "";
 	}
 
 	if (!keepIsStandard) {
@@ -396,6 +413,7 @@ const resetState = async (params: ResetParams) => {
 
 function buildPropValue(): BlockProps[string] {
 	return {
+		label: label.value,
 		isStandard: isStandardBool.value,
 		isDynamic: isStandardBool.value ? false : selectedNonStandardPropType.value === "dynamic",
 		isPassedDown: isStandardBool.value || isPassedDown.value === "true",
@@ -415,11 +433,11 @@ const save = async () => {
 	const propValue = buildPropValue();
 
 	if (props.mode === "add") {
-		emit("add:prop", { name: name.value, value: propValue });
+		emit("add:prop", { name: computedKey.value, value: propValue });
 	} else {
 		emit("update:prop", {
 			oldPropName: props.propName!,
-			newName: name.value,
+			newName: computedKey.value,
 			newValue: propValue,
 		});
 	}

From 9b54d1aa7d8d985ff632e37cc3909942e2212926 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 21 Jan 2026 23:28:34 +0530
Subject: [PATCH 310/547] refactor(PropsEditor): streamline updateObjectValue
 logic and include label handling

---
 .../components/Controls/GenericControl.vue    |  2 +-
 frontend/src/components/PropsEditor.vue       | 35 +++++++++----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Controls/GenericControl.vue b/frontend/src/components/Controls/GenericControl.vue
index de681571c..4510b6da8 100644
--- a/frontend/src/components/Controls/GenericControl.vue
+++ b/frontend/src/components/Controls/GenericControl.vue
@@ -34,7 +34,7 @@
 					</template>
 				</Dropdown>
 				<InputLabel
-					class="truncate"
+					class="pr-2"
 					:class="{ 'cursor-ns-resize': enableSlider }"
 					v-if="label"
 					@mousedown="handleMouseDown">
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 61fd28c0e..addb4d270 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -210,46 +210,40 @@ const addProp = async ({ name, value }: { name: string; value: BlockProps[string
 	return map;
 };
 
-const clearObjectValue = (map: Map<string, BlockProps[string]>, key: string) => {
-	const oldValue = map.get(key);
-
-	map.set(key, {
-		...oldValue!,
-		value: null,
-		isDynamic: false,
-		comesFrom: null,
-	});
-
-	return map;
-};
-
 const updateObjectValue = (
 	map: Map<string, BlockProps[string]>,
 	key: string,
 	{
+		label,
 		value,
 		isDynamic,
 		comesFrom,
 		isPassedDown,
 	}: {
+		label: string;
 		value: string | null;
 		isDynamic: boolean;
 		comesFrom: BlockProps[string]["comesFrom"];
 		isPassedDown: boolean;
 	},
 ) => {
-	const path = value;
-	if (!path) {
-		return clearObjectValue(map, key);
+	if (!value) {
+		value = null;
+		isDynamic = false;
+		comesFrom = null;
+	} else {
+		value = !isDynamic && typeof value !== "string" ? JSON.stringify(value) : value;
 	}
 
-	const oldPath = map.get(key)?.value;
+	const oldValue = map.get(key)?.value;
+	const oldLabel = map.get(key)?.label;
 	const wasDynamic = map.get(key)?.isDynamic;
 	const cameFrom = map.get(key)?.comesFrom;
 	const wasPassedDown = map.get(key)?.isPassedDown;
 
 	if (
-		path === oldPath &&
+		value === oldValue &&
+		label === oldLabel &&
 		isDynamic === wasDynamic &&
 		comesFrom === cameFrom &&
 		isPassedDown === wasPassedDown
@@ -259,7 +253,8 @@ const updateObjectValue = (
 
 	map.set(key, {
 		...map.get(key)!,
-		value: !isDynamic && typeof path !== "string" ? JSON.stringify(path) : path,
+		label,
+		value,
 		isDynamic,
 		comesFrom,
 		isPassedDown,
@@ -301,12 +296,14 @@ const updateProp = async ({
 	newValue: BlockProps[string];
 }) => {
 	let map = new Map(Object.entries(props.obj));
+	console.log({ oldPropName, newName, newValue });
 
 	if (oldPropName !== newName) {
 		map = new Map(Object.entries(replaceKey(map, oldPropName, newName)));
 	}
 
 	map = updateObjectValue(map, newName, {
+		label: newValue.label,
 		value: newValue.value,
 		isDynamic: newValue.isDynamic,
 		comesFrom: newValue.comesFrom,

From 8d39ec4e7680ed7e9e9401918dcb0a01eb885df5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 13:14:30 +0530
Subject: [PATCH 311/547] fix: Filter selection

---
 frontend/src/components/Settings/PageAnalytics.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Settings/PageAnalytics.vue b/frontend/src/components/Settings/PageAnalytics.vue
index ef539db59..6d99b55b4 100644
--- a/frontend/src/components/Settings/PageAnalytics.vue
+++ b/frontend/src/components/Settings/PageAnalytics.vue
@@ -10,7 +10,7 @@
 					:route="route"
 					:customDateRange="customDateRange"
 					@update:range="(val) => (range = val)"
-					@update:route="(val) => (route = val?.value)"
+					@update:route="(val) => (route = val)"
 					@update:customDateRange="(val) => (customDateRange = val)" />
 			</template>
 		</AnalyticsOverview>

From deefdd8d9836b16af2f50a6a6d483dc6772c4928 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 22 Jan 2026 14:41:41 +0530
Subject: [PATCH 312/547] refactor(builder_page): update type hints for
 data_key

---
 .../doctype/builder_page/builder_page.py      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 9be2c32db..0a66ec11b 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -554,7 +554,7 @@ def get_block_html(blocks: str | list) -> tuple[str, str, dict, bool]:
 	return "".join(html_parts), str(style_tag), font_map, shared_state["has_block_script"]
 
 
-def build_tag(block: dict, state: dict, data_key: Optional[dict] = None) -> bs.Tag:
+def build_tag(block: dict, state: dict, data_key: dict | None = None) -> bs.Tag:
 	"""
 	Transforms a single block to an HTML tag.
 
@@ -608,7 +608,7 @@ def cleanup_props_stack(props: dict, props_stack: dict):
 			props_stack[name].pop()
 
 
-def process_block_props(block: dict, data_key: Optional[dict], props_stack: dict) -> dict:
+def process_block_props(block: dict, data_key: dict | None, props_stack: dict) -> dict:
 	"""
 	Process all properties of a block. Also adds standard props info to the props stack if applicable.
 
@@ -632,7 +632,7 @@ def process_block_props(block: dict, data_key: Optional[dict], props_stack: dict
 	return props
 
 
-def interpret_prop_value(prop_config: dict, data_key: Optional[dict]) -> Any:
+def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 	"""Interpret prop value based on its configuration (static or dynamic)."""
 	is_dynamic = prop_config.get("isDynamic", False)
 	comes_from = prop_config.get("comesFrom", "props")
@@ -657,7 +657,7 @@ def interpret_prop_value(prop_config: dict, data_key: Optional[dict]) -> Any:
 
 
 def get_dynamic_props_template(
-	prop_value: str, comes_from: str, data_key: Optional[dict], default_value: Any
+	prop_value: str, comes_from: str, data_key: dict | None, default_value: Any
 ) -> str:
 	"""Get a Jinja template reference for dynamic properties."""
 	if comes_from == "blockDataScript":
@@ -769,7 +769,7 @@ def is_repeater_block(block: dict) -> bool:
 	return bool(block.get("isRepeaterBlock") and block.get("children") and block.get("dataKey"))
 
 
-def render_children(tag: bs.Tag, block: dict, data_key: Optional[dict], state: dict):
+def render_children(tag: bs.Tag, block: dict, data_key: dict | None, state: dict):
 	"""Render (non-repeater) children."""
 	for child in block.get("children", []) or []:
 		child = extend_block_with_component(child)
@@ -784,7 +784,7 @@ def render_children(tag: bs.Tag, block: dict, data_key: Optional[dict], state: d
 		append_child_with_context(tag, child_tag, child_context)
 
 
-def render_repeater_children(tag: bs.Tag, block: dict, data_key: Optional[dict], state: dict):
+def render_repeater_children(tag: bs.Tag, block: dict, data_key: dict | None, state: dict):
 	"""Render children for repeater blocks (with for loops)."""
 	loop_info = get_loop_info(block, data_key, state["standard_props_stack"])
 
@@ -809,7 +809,7 @@ def render_repeater_children(tag: bs.Tag, block: dict, data_key: Optional[dict],
 	tag.append("{% endfor %}")
 
 
-def get_loop_info(block: dict, data_key: Optional[dict], props_stack: dict) -> dict:
+def get_loop_info(block: dict, data_key: dict | None, props_stack: dict) -> dict:
 	"""
 	Get loop information (variable name, iterator, data_key).
 
@@ -870,7 +870,7 @@ def extract_loop_variables(key: str, props_stack: dict) -> list[str]:
 	return []
 
 
-def get_visibility_condition_key(block: dict, data_key: Optional[dict]) -> Optional[str]:
+def get_visibility_condition_key(block: dict, data_key: dict | None) -> str | None:
 	"""Get the Jinja key for visibility condition."""
 	visibility_condition = block.get("visibilityCondition")
 	if not visibility_condition:
@@ -966,7 +966,7 @@ def append_child_with_context(parent: bs.Tag, child: bs.Tag, context: dict):
 	parent.append("{% endwith %}")
 
 
-def set_dynamic_content_placeholders(block: dict, data_key: Optional[dict] = None):
+def set_dynamic_content_placeholders(block: dict, data_key: dict | None = None):
 	"""Apply dynamic content placeholders to block attributes and styles."""
 	block_data_key = block.get("dataKey", {}) or {}
 	dynamic_values = [block_data_key] if block_data_key else []
@@ -1007,7 +1007,7 @@ def set_dynamic_content_placeholders(block: dict, data_key: Optional[dict] = Non
 			)
 
 
-def get_dynamic_value_key(dynamic_value_doc: dict, original_key: str, data_key: Optional[dict]) -> str:
+def get_dynamic_value_key(dynamic_value_doc: dict, original_key: str, data_key: dict | None) -> str:
 	"""Get the Jinja key for a dynamic value."""
 	comes_from = dynamic_value_doc.get("comesFrom", "dataScript")
 

From 82a751eb57126d9f1674ad2761de2bc3ae87f3d0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 22 Jan 2026 14:59:13 +0530
Subject: [PATCH 313/547] feat: added image and color std. props

---
 frontend/components.d.ts                      |  2 +
 frontend/src/builder.d.ts                     |  4 +-
 .../StandardPropsInputSection.ts              | 47 ++++++++++++++---
 .../src/components/Controls/Autocomplete.vue  | 29 +++++++----
 .../src/components/Controls/ColorInput.vue    |  5 ++
 frontend/src/components/PropsEditor.vue       | 10 +++-
 .../components/PropsOptions/ColorOptions.vue  | 42 +++++++++++++++
 .../components/PropsOptions/ImageOptions.vue  | 52 +++++++++++++++++++
 .../src/components/PropsPopoverContent.vue    | 17 +++++-
 frontend/src/utils/helpers.ts                 |  6 ++-
 10 files changed, 191 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/PropsOptions/ColorOptions.vue
 create mode 100644 frontend/src/components/PropsOptions/ImageOptions.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c55157042..1d6dcd731 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -46,6 +46,7 @@ declare module 'vue' {
     CodeMirrorEditor: typeof import('./src/components/Controls/CodeMirror/CodeMirrorEditor.vue')['default']
     CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
     ColorInput: typeof import('./src/components/Controls/ColorInput.vue')['default']
+    ColorOptions: typeof import('./src/components/PropsOptions/ColorOptions.vue')['default']
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
@@ -75,6 +76,7 @@ declare module 'vue' {
     GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
     Globe: typeof import('./src/components/Icons/Globe.vue')['default']
     GripVertical: typeof import('./src/components/Icons/GripVertical.vue')['default']
+    ImageOptions: typeof import('./src/components/PropsOptions/ImageOptions.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
     ImageUploadInput: typeof import('./src/components/ImageUploadInput.vue')['default']
     InlineInput: typeof import('./src/components/Controls/InlineInput.vue')['default']
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 4dd1df6e6..11a1b01bd 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -7,7 +7,7 @@ declare interface BlockStyleMap {
 }
 
 type BlockPropsStandardOptions = {
-	type: "number" | "string" | "boolean" | "select" | "array" | "object";
+	type: "number" | "string" | "boolean" | "select" | "array" | "object" | "image" | "color";
 	isRequired?: boolean;
 	// defaultValue?: any;
 	options?: Record<string, any>;
@@ -17,7 +17,7 @@ type BlockPropsStandardOptions = {
 declare type BlockProps = Record<
 	string,
 	{
-		label: string;
+		label?: string;
 		isDynamic: boolean;
 		isPassedDown: boolean;
 		comesFrom: "props" | "dataScript" | "blockDataScript" | null;
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 68d52de89..58f625559 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -3,12 +3,10 @@ import OptionToggle from "../Controls/OptionToggle.vue";
 import GenericControl from "../Controls/GenericControl.vue";
 import ArrayInput from "../ArrayInput.vue";
 import ObjectInput from "../ObjectInput.vue";
+import ImageUploadInput from "../ImageUploadInput.vue";
+import ColorInput from "../Controls/ColorInput.vue";
 
 const componentMap = {
-	string: GenericControl,
-	number: GenericControl,
-	boolean: GenericControl,
-	select: GenericControl,
 	array: ArrayInput,
 	object: ObjectInput,
 };
@@ -46,6 +44,22 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 					})) || [],
 			};
 			break;
+		case "image":
+			map = {
+				component: ImageUploadInput,
+				enableStates: false,
+				allowDynamicValue: true,
+				imageURL: blockController.getBlockProps()[propName].value as string,
+				imageFit:
+					propDetails.standardOptions?.options?.imageFit ||
+					(propDetails.standardOptions?.options?.defaultImageFit as StyleValue),
+			};
+			break;
+		case "color":
+			map = {
+				component: ColorInput,
+			};
+			break;
 	}
 	map = {
 		label: propDetails.label || propName,
@@ -83,6 +97,23 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 	return map;
 };
 
+const getEventsMap = (propName: string, propDetails: BlockProps[string]) => {
+	let events: Record<string, Function> = {};
+	const type = propDetails.standardOptions?.type || "string";
+	switch (type) {
+		case "image":
+			events = {
+				"update:imageURL": (val: string) => blockController.setBlockProp(propName, { value: val }),
+				"update:imageFit": (val: StyleValue) =>
+					blockController.setBlockProp(propName, {
+						standardOptions: { options: { ...propDetails.standardOptions?.options, imageFit: val } },
+					}),
+			};
+			break;
+	}
+	return events;
+};
+
 const getStandardProps = (allProps: BlockProps) => {
 	const standardProps: BlockProps = {};
 	for (const [propKey, propDetails] of Object.entries(allProps || {})) {
@@ -97,15 +128,19 @@ const getStandardPropsInputSection = () => {
 	const standardProps = getStandardProps(blockController.getBlockProps());
 	const sections = [];
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
-		const component = componentMap[propDetails.standardOptions?.type || "string"] || GenericControl;
+		const propType = propDetails.standardOptions?.type;
+		const component =
+			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) || GenericControl;
 		const getProps = () => {
 			const props = getPropsMap(propKey, propDetails);
 			return props;
 		};
+		const events = getEventsMap(propKey, propDetails);
 		sections.push({
 			component,
 			getProps,
-			searchKeyWords: propKey,
+			events,
+			searchKeyWords: [propKey, propDetails.label].join(", "),
 		});
 	}
 	return sections;
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index c15604362..d5619d2ea 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -17,7 +17,6 @@
 					autocomplete="off"
 					@focus="
 						() => {
-							fixedStyles = getFixedStyles();
 							emit('focus');
 							return false;
 						}
@@ -37,8 +36,14 @@
 			</div>
 
 			<ComboboxContent
+				@after-enter="
+					() => {
+						fixedStyles = getFixedStyles();
+					}
+				"
 				:class="makeFixed ? 'fixed' : 'absolute'"
 				:style="fixedStyles"
+				ref="contentRef"
 				class="z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
 				<div class="overflow-y-auto p-1">
 					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
@@ -93,7 +98,7 @@ import {
 	ComboboxRoot,
 	ComboboxSeparator,
 } from "reka-ui";
-import type { Component } from "vue";
+import type { Component, ComponentPublicInstance } from "vue";
 import { computed, onMounted, ref, watch } from "vue";
 
 interface Option {
@@ -142,7 +147,8 @@ const isOpen = ref(false);
 const searchQuery = ref("");
 const asyncOptions = ref<Option[]>([]);
 const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
-const comboboxInput = ref<HTMLElement | null>(null);
+const comboboxInput = ref<ComponentPublicInstance | null>(null);
+const contentRef = ref<ComponentPublicInstance | null>(null);
 const fixedStyles = ref({});
 const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
@@ -217,6 +223,7 @@ const handleBlur = (event: FocusEvent) => {
 		return;
 	}
 	if (props.allowArbitraryValue) submitArbitraryValue(getInputValue(event));
+	fixedStyles.value = {};
 	emit("blur");
 };
 
@@ -236,11 +243,19 @@ const getFixedStyles = () => {
 			comboboxInput.value?.$el.closest(props.fixTo) as HTMLElement
 		)?.getBoundingClientRect();
 		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
+		const contentRect = contentRef.value?.$el?.getBoundingClientRect
+			? contentRef.value.$el.getBoundingClientRect()
+			: null;
 		if (!fixedToElRect || !comboboxInputRect) {
 			return {};
 		}
+		// Calculate top position based on available space: if there's not enough space below, position it above
+		const top =
+			contentRect && contentRect.top + contentRect?.height > window.innerHeight
+				? (fixedToElRect.bottom - comboboxInputRect.top + comboboxInputRect.height + 12) * -1
+				: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height;
 		return {
-			top: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height + "px",
+			top: top + "px",
 			left: comboboxInputRect.left - fixedToElRect.left + "px",
 			width: comboboxInputRect.width + "px",
 			minWidth: "fit-content",
@@ -250,12 +265,6 @@ const getFixedStyles = () => {
 	return {};
 };
 
-onMounted(() => {
-	if (props.makeFixed) {
-		fixedStyles.value = getFixedStyles();
-	}
-});
-
 defineExpose({
 	refreshOptions,
 	clearSelection,
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 8579f40b6..278cb2c38 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -25,6 +25,8 @@
 								}"
 								v-bind="events"
 								ref="colorInput"
+								:makeFixed
+								:fixTo
 								@keydown.enter="handleEnter"
 								@focus="togglePopover"
 								:placeholder="placeholder"
@@ -167,6 +169,8 @@ const props = withDefaults(
 		showColorVariableOptions?: boolean;
 		showPickerOnMount?: boolean;
 		popoverOffset?: number;
+		makeFixed?: boolean;
+		fixTo?: string;
 	}>(),
 	{
 		modelValue: null,
@@ -174,6 +178,7 @@ const props = withDefaults(
 		placement: "left",
 		showColorVariableOptions: true,
 		showPickerOnMount: false,
+		makeFixed: false,
 	},
 );
 const lastValidValue = ref<string | null>(props.modelValue ?? null);
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index addb4d270..51a23b496 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -6,7 +6,7 @@
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded bg-surface-gray-1 p-2 text-ink-gray-6"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!ml-[30px] !min-w-fit" placement="right-start">
+					<Popover popoverClass="!ml-[34px] !min-w-fit" placement="right">
 						<template #target="{ open }">
 							<div
 								class="flex w-full cursor-pointer items-center justify-between"
@@ -44,6 +44,8 @@
 													select: LucideSelect,
 													object: LucideObject,
 													array: LucideArray,
+													color: LucideColor,
+													image: LucideImage,
 												}[value.standardOptions?.type] || LucideZap
 											"
 											class="h-4 w-4 text-ink-gray-4" />
@@ -94,7 +96,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!ml-[22px] !min-w-fit" placement="right-start">
+		<Popover ref="popOverRef" popoverClass="!ml-[24px] !min-w-fit" placement="right-start">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"
@@ -158,6 +160,10 @@ import LucideSelect from "~icons/lucide/chevrons-up-down";
 import LucideArray from "~icons/lucide/brackets";
 // @ts-ignore
 import LucideObject from "~icons/lucide/braces";
+// @ts-ignore
+import LucideColor from "~icons/lucide/palette";
+// @ts-ignore
+import LucideImage from "~icons/lucide/image";
 
 import { Popover } from "frappe-ui";
 import PropsPopoverContent from "./PropsPopoverContent.vue";
diff --git a/frontend/src/components/PropsOptions/ColorOptions.vue b/frontend/src/components/PropsOptions/ColorOptions.vue
new file mode 100644
index 000000000..5d1de1ba4
--- /dev/null
+++ b/frontend/src/components/PropsOptions/ColorOptions.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="flex items-center justify-between">
+		<InputLabel>Default Value</InputLabel>
+		<ColorInput
+			class="w-full"
+			fix-to=".props-popover-content"
+			placement="right"
+			:make-fixed="true"
+			:model-value="options.defaultValue"
+			@update:model-value="handleDefaultValueChange"
+			placeholder="Select default color"></ColorInput>
+	</div>
+</template>
+
+<script setup lang="ts">
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import { ref } from "vue";
+import ColorInput from "../Controls/ColorInput.vue";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+const defaultValue = ref(props.options?.defaultValue);
+
+const handleDefaultValueChange = (value: string) => {
+	defaultValue.value = value;
+	emit("update:options", {
+		defaultValue: value,
+	});
+};
+
+const reset = (toProps: boolean = false) => {
+	defaultValue.value = toProps ? props.options?.defaultValue : "";
+};
+
+defineExpose({ reset });
+</script>
diff --git a/frontend/src/components/PropsOptions/ImageOptions.vue b/frontend/src/components/PropsOptions/ImageOptions.vue
new file mode 100644
index 000000000..4a7eab7c9
--- /dev/null
+++ b/frontend/src/components/PropsOptions/ImageOptions.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="flex items-center justify-between">
+		<ImageUploadInput
+			label="Default Value"
+			label-position="left"
+			placeholder="Enter image URL or upload one"
+			class="w-full"
+			:imageURL="defaultImageURL"
+			:image-fit="defaultImageFit"
+			@update:image-fit="handleDefaultFitChange"
+			@update:imageURL="handleDefaultImgURLChange"></ImageUploadInput>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ImageUploadInput from "../ImageUploadInput.vue";
+
+const props = defineProps<{
+	options: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+	(update: "update:options", value: Record<string, any>): void;
+}>();
+
+const defaultImageURL = ref(props.options?.defaultValue || props.options?.defaultImageURL);
+const defaultImageFit = ref(props.options?.defaultImageFit);
+const handleDefaultImgURLChange = (value: string) => {
+	defaultImageURL.value = value;
+	handleDefaultValueChange({ imageURL: value });
+};
+const handleDefaultFitChange = (value: string) => {
+	defaultImageFit.value = value;
+	handleDefaultValueChange({ imageFit: value });
+};
+
+const handleDefaultValueChange = ({ imageURL, imageFit }: { imageURL?: string; imageFit?: string }) => {
+	emit("update:options", {
+		defaultValue: imageURL || defaultImageURL.value,
+		defaultImageURL: imageURL || defaultImageURL.value,
+		defaultImageFit: imageFit || defaultImageFit.value,
+	});
+};
+
+const reset = (toProps: boolean = false) => {
+	defaultImageURL.value = toProps ? props.options?.defaultValue || props.options?.defaultImageURL : "";
+	defaultImageFit.value = toProps ? props.options?.defaultImageFit : "";
+};
+
+defineExpose({ reset });
+</script>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 18e1b33f7..4aa3f7e70 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -117,6 +117,8 @@ import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import { getDataArray, toKebabCase } from "@/utils/helpers";
 import useBlockDataStore from "@/stores/blockDataStore";
+import ColorOptions from "./PropsOptions/ColorOptions.vue";
+import ImageOptions from "./PropsOptions/ImageOptions.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -133,7 +135,16 @@ const props = withDefaults(
 const canvasStore = useCanvasStore();
 const blockDataStore = useBlockDataStore();
 
-const STANDARD_PROP_TYPES = ["string", "number", "boolean", "select", "array", "object"] as const;
+const STANDARD_PROP_TYPES = [
+	"string",
+	"number",
+	"boolean",
+	"select",
+	"array",
+	"object",
+	"image",
+	"color",
+] as const;
 const COMPONENT_MAPPING = {
 	string: StringOptions,
 	number: NumberOptions,
@@ -141,6 +152,8 @@ const COMPONENT_MAPPING = {
 	select: SelectOptions,
 	array: ArrayOptions,
 	object: ObjectOptions,
+	image: ImageOptions,
+	color: ColorOptions,
 } as const;
 
 const TOGGLE_OPTIONS: { label: string; value: string }[] = [
@@ -256,6 +269,8 @@ function getStandardPropTypes() {
 		{ label: "Select", value: "select" },
 		{ label: "Array", value: "array" },
 		{ label: "Object", value: "object" },
+		{ label: "Image", value: "image" },
+		{ label: "Color", value: "color" },
 	];
 }
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 1dab80a86..2389eedb7 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1162,6 +1162,8 @@ const getDefaultPropsList = (block: Block, blockController: any): BlockProps =>
 	return {};
 };
 
+const PARSEABLE_STANDARD_TYPES = ["number", "boolean", "object", "array"];
+
 const getPropValue = (
 	propName: string,
 	block: Block,
@@ -1205,7 +1207,7 @@ const getPropValue = (
 		const { type, options } = matchingProp.standardOptions;
 		const defaultValue = options?.defaultValue ?? null;
 
-		if (type !== "string" && type !== "select") {
+		if (PARSEABLE_STANDARD_TYPES.includes(type)) {
 			return matchingProp.value ? JSON.parse(matchingProp.value) : defaultValue;
 		}
 
@@ -1223,7 +1225,7 @@ const getStandardPropValue = (
 	if (propsOfComponentRoot) {
 		for (const [name, value] of Object.entries(propsOfComponentRoot)) {
 			if (propName === name && value.isStandard) {
-				if (value.standardOptions?.type !== "string" && value.standardOptions?.type !== "select") {
+				if (PARSEABLE_STANDARD_TYPES.includes(value.standardOptions?.type || 'string')) {
 					const parsedValue = value.value
 						? JSON.parse(value.value)
 						: value.standardOptions?.options?.defaultValue || null;

From 3d4131e966273ef57109fda76cd3bbae747e769a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 15:52:58 +0530
Subject: [PATCH 314/547] feat: Refactor PropertyControl component

- Added support for variant. Using this we can upload dark mode of an image
- Split PropertyControl into BasePropertyControl, StylePropertyControl, AttributePropertyControl for focused usage
- Replace usages of PropertyControl with appropriate new controls
---
 frontend/components.d.ts                      |   8 +-
 frontend/src/components/BackgroundHandler.vue |   8 +-
 .../src/components/BlockFlexLayoutHandler.vue |  24 +-
 .../src/components/BlockGridLayoutHandler.vue |   4 +-
 .../src/components/BlockPositionHandler.vue   |   6 +-
 .../HTMLOptionsSection.ts                     |   4 +-
 .../ImageOptionsSection.ts                    |  69 +--
 .../BlockPropertySections/LayoutSection.ts    |   5 +-
 .../BlockPropertySections/LinkSection.ts      |   9 +-
 .../BlockPropertySections/OptionsSection.ts   |   3 -
 .../BlockPropertySections/SpacingSection.ts   |   6 +-
 .../BlockPropertySections/StyleSection.ts     |  28 +-
 .../TransitionSection.ts                      |   8 +-
 .../TypographySection.ts                      |  20 +-
 .../VideoOptionsSection.ts                    |   9 +-
 .../Controls/AttributePropertyControl.vue     |  62 +++
 .../Controls/BasePropertyControl.vue          | 290 ++++++++++++
 .../components/Controls/PropertyControl.vue   | 445 ------------------
 .../Controls/PropertyControlInput.vue         |  60 +++
 .../src/components/Controls/PropertyLabel.vue |  41 ++
 .../Controls/StylePropertyControl.vue         | 107 +++++
 .../components/Controls/VariantControl.vue    |  88 ++++
 frontend/src/components/DimensionInput.vue    |   6 +-
 frontend/src/components/ImageUploadInput.vue  |  21 +-
 frontend/src/components/Settings/PageMeta.vue |   4 +-
 25 files changed, 737 insertions(+), 598 deletions(-)
 create mode 100644 frontend/src/components/Controls/AttributePropertyControl.vue
 create mode 100644 frontend/src/components/Controls/BasePropertyControl.vue
 delete mode 100644 frontend/src/components/Controls/PropertyControl.vue
 create mode 100644 frontend/src/components/Controls/PropertyControlInput.vue
 create mode 100644 frontend/src/components/Controls/PropertyLabel.vue
 create mode 100644 frontend/src/components/Controls/StylePropertyControl.vue
 create mode 100644 frontend/src/components/Controls/VariantControl.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ee45d2c4a..83c52c2bd 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,9 +11,11 @@ declare module 'vue' {
     AlertDialog: typeof import('./src/components/AlertDialog.vue')['default']
     AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
+    AttributePropertyControl: typeof import('./src/components/Controls/AttributePropertyControl.vue')['default']
     AuthenticatedUser: typeof import('./src/components/Icons/AuthenticatedUser.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
     BackgroundHandler: typeof import('./src/components/BackgroundHandler.vue')['default']
+    BasePropertyControl: typeof import('./src/components/Controls/BasePropertyControl.vue')['default']
     BlockContextMenu: typeof import('./src/components/BlockContextMenu.vue')['default']
     BlockEditor: typeof import('./src/components/BlockEditor.vue')['default']
     BlockFlexLayoutHandler: typeof import('./src/components/BlockFlexLayoutHandler.vue')['default']
@@ -56,6 +58,7 @@ declare module 'vue' {
     DimensionInput: typeof import('./src/components/DimensionInput.vue')['default']
     DraggablePopup: typeof import('./src/components/Controls/DraggablePopup.vue')['default']
     DynamicValueHandler: typeof import('./src/components/Controls/DynamicValueHandler.vue')['default']
+    DynamicValueOverlay: typeof import('./src/components/Controls/DynamicValueOverlay.vue')['default']
     EditableSpan: typeof import('./src/components/EditableSpan.vue')['default']
     EyeDropper: typeof import('./src/components/Icons/EyeDropper.vue')['default']
     Files: typeof import('./src/components/Icons/Files.vue')['default']
@@ -103,7 +106,8 @@ declare module 'vue' {
     PlacementControl: typeof import('./src/components/PlacementControl.vue')['default']
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     Plus: typeof import('./src/components/Icons/Plus.vue')['default']
-    PropertyControl: typeof import('./src/components/Controls/PropertyControl.vue')['default']
+    PropertyControlInput: typeof import('./src/components/Controls/PropertyControlInput.vue')['default']
+    PropertyLabel: typeof import('./src/components/Controls/PropertyLabel.vue')['default']
     PublishButton: typeof import('./src/components/PublishButton.vue')['default']
     RangeInput: typeof import('./src/components/Controls/RangeInput.vue')['default']
     Redirect: typeof import('./src/components/Icons/Redirect.vue')['default']
@@ -115,6 +119,7 @@ declare module 'vue' {
     Settings: typeof import('./src/components/Icons/Settings.vue')['default']
     SettingsGear: typeof import('./src/components/Icons/SettingsGear.vue')['default']
     StrikeThrough: typeof import('./src/components/Icons/StrikeThrough.vue')['default']
+    StylePropertyControl: typeof import('./src/components/Controls/StylePropertyControl.vue')['default']
     Switch: typeof import('./src/components/Controls/Switch.vue')['default']
     TabButtons: typeof import('./src/components/Controls/TabButtons.vue')['default']
     TemplatePagePreview: typeof import('./src/components/TemplatePagePreview.vue')['default']
@@ -122,5 +127,6 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
+    VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
   }
 }
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 5200953e7..695c0ef1c 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -2,7 +2,7 @@
 	<Popover placement="left" class="!block w-full" :offset="25">
 		<template #target="{ togglePopover }">
 			<div class="flex w-full items-center justify-between">
-				<PropertyControl
+				<StylePropertyControl
 					styleProperty="backgroundImage"
 					:component="Input"
 					label="BG Image"
@@ -19,7 +19,7 @@
 							:class="{ 'bg-surface-gray-4': !Boolean(backgroundImage) }"
 							:style="previewStyle" />
 					</template>
-				</PropertyControl>
+				</StylePropertyControl>
 			</div>
 		</template>
 		<template #body>
@@ -76,7 +76,7 @@
 			</div>
 		</template>
 	</Popover>
-	<PropertyControl
+	<StylePropertyControl
 		label="BG Color"
 		styleProperty="backgroundColor"
 		:component="ColorInput"
@@ -87,7 +87,7 @@
 import ColorInput from "@/components/Controls/ColorInput.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import Input from "@/components/Controls/Input.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import { getOptimizeButtonText, optimizeImage, shouldShowOptimizeButton } from "@/utils/imageUtils";
 import { FileUploader, Popover } from "frappe-ui";
diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 2e8f41937..6ec459704 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -1,5 +1,5 @@
 <template>
-	<PropertyControl
+	<StylePropertyControl
 		styleProperty="flexDirection"
 		defaultValue="row"
 		:component="OptionToggle"
@@ -8,14 +8,14 @@
 		:options="[
 			{ label: 'Horizontal', value: 'row', icon: 'arrow-right', hideLabel: true },
 			{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
-		]"></PropertyControl>
-	<PropertyControl
+		]"></StylePropertyControl>
+	<StylePropertyControl
 		styleProperty="alignItems"
 		label="Placement"
 		:enableStates="false"
 		v-if="blockController.isFlex()"
-		:component="PlacementControl"></PropertyControl>
-	<PropertyControl
+		:component="PlacementControl"></StylePropertyControl>
+	<StylePropertyControl
 		v-if="blockController.isFlex()"
 		styleProperty="justifyContent"
 		type="select"
@@ -25,13 +25,13 @@
 			{ label: 'Space Around', value: 'space-around' },
 			{ label: 'Space Evenly', value: 'space-evenly' },
 		]" />
-	<PropertyControl
+	<StylePropertyControl
 		v-if="blockController.isFlex()"
 		label="Gap"
 		styleProperty="gap"
 		:enableSlider="true"
 		:unitOptions="['px', 'em', 'rem']" />
-	<PropertyControl
+	<StylePropertyControl
 		styleProperty="flexWrap"
 		:component="OptionToggle"
 		label="Wrap"
@@ -40,9 +40,9 @@
 			{ label: 'No Wrap', value: 'nowrap' },
 			{ label: 'Wrap', value: 'wrap' },
 		]"
-		defaultValue="nowrap"></PropertyControl>
+		defaultValue="nowrap"></StylePropertyControl>
 	<div class="flex flex-col gap-3" v-if="blockController.getParentBlock()?.isFlex()">
-		<PropertyControl
+		<StylePropertyControl
 			label="Order"
 			styleProperty="order"
 			:enableSlider="true"
@@ -50,7 +50,7 @@
 			:max="99"
 			:step="1"
 			:defaultValue="0" />
-		<PropertyControl
+		<StylePropertyControl
 			label="Grow"
 			styleProperty="flexGrow"
 			:component="OptionToggle"
@@ -59,7 +59,7 @@
 				{ label: 'No', value: 0 },
 			]"
 			:defaultValue="0" />
-		<PropertyControl
+		<StylePropertyControl
 			label="Shrink"
 			styleProperty="flexShrink"
 			:component="OptionToggle"
@@ -72,7 +72,7 @@
 </template>
 <script lang="ts" setup>
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import PlacementControl from "./PlacementControl.vue";
 </script>
diff --git a/frontend/src/components/BlockGridLayoutHandler.vue b/frontend/src/components/BlockGridLayoutHandler.vue
index cc0ba028e..9d90942bd 100644
--- a/frontend/src/components/BlockGridLayoutHandler.vue
+++ b/frontend/src/components/BlockGridLayoutHandler.vue
@@ -45,7 +45,7 @@
 		type="text"
 		:modelValue="height"
 		@update:modelValue="setHeight" />
-	<PropertyControl
+	<StylePropertyControl
 		styleProperty="gap"
 		label="Gap"
 		v-if="blockController.isGrid()"
@@ -212,7 +212,7 @@
 <script lang="ts" setup>
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
 
diff --git a/frontend/src/components/BlockPositionHandler.vue b/frontend/src/components/BlockPositionHandler.vue
index eba26622e..8c533487c 100644
--- a/frontend/src/components/BlockPositionHandler.vue
+++ b/frontend/src/components/BlockPositionHandler.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex w-full flex-col items-center gap-5">
-		<PropertyControl
+		<StylePropertyControl
 			styleProperty="position"
 			:component="OptionToggle"
 			:getModelValue="() => position"
@@ -15,7 +15,7 @@
 					value: 'fixed',
 				},
 				{ label: 'Sticky', value: 'sticky' },
-			]"></PropertyControl>
+			]"></StylePropertyControl>
 		<div class="grid-rows grid grid-cols-3 gap-4" v-if="showHandler">
 			<div class="col-span-1 col-start-2 w-16 self-center">
 				<InlineInput
@@ -69,7 +69,7 @@
 <script setup lang="ts">
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import { computed, watch } from "vue";
 
diff --git a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
index efbcc9786..507bd65ba 100644
--- a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
@@ -1,11 +1,11 @@
 import CodeEditor from "@/components/Controls/CodeEditor.vue";
 import blockController from "@/utils/blockController";
 import useCanvasStore from "../../stores/canvasStore";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import BasePropertyControl from "../Controls/BasePropertyControl.vue";
 
 const HTMLOptionsSectionProperties = [
 	{
-		component: PropertyControl,
+		component: BasePropertyControl,
 		getProps: () => {
 			return {
 				component: CodeEditor,
diff --git a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
index 39c9f9f1c..5fd59708d 100644
--- a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
@@ -1,4 +1,4 @@
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
 import ImageUploadInput from "@/components/ImageUploadInput.vue";
 import blockController from "@/utils/blockController";
 import { getOptimizeButtonText, optimizeImage, shouldShowOptimizeButton } from "@/utils/imageUtils";
@@ -7,45 +7,24 @@ import { computed } from "vue";
 
 const imageOptionsSectionProperties = [
 	{
-		component: PropertyControl,
+		component: AttributePropertyControl,
 		getProps: () => {
 			return {
 				component: ImageUploadInput,
-				controlType: "attribute",
 				styleProperty: "src",
 				label: "Image URL",
 				allowDynamicValue: true,
 				popoverOffset: 120,
-				imageURL: blockController.getAttribute("src"),
 				imageFit: blockController.getStyle("objectFit"),
+				variants: [{ name: "dark", property: "darkSrc", label: "Dark Mode" }],
 			};
 		},
 		events: {
 			"update:imageURL": (val: string) => blockController.setAttribute("src", val),
 			"update:imageFit": (val: StyleValue) => blockController.setStyle("objectFit", val),
 		},
-		searchKeyWords: "Image, URL, Src, Fit, ObjectFit, Object Fit, Fill, Contain, Cover",
-	},
-	{
-		component: PropertyControl,
-		getProps: () => {
-			return {
-				component: ImageUploadInput,
-				controlType: "attribute",
-				styleProperty: "darkSrc",
-				label: "Dark Image",
-				allowDynamicValue: true,
-				popoverOffset: 120,
-				imageURL: blockController.getAttribute("darkSrc"),
-				imageFit: blockController.getStyle("objectFit"),
-			};
-		},
-		events: {
-			"update:imageURL": (val: string) => blockController.setAttribute("darkSrc", val),
-			"update:imageFit": (val: StyleValue) => blockController.setStyle("objectFit", val),
-		},
-		searchKeyWords: "Dark, Mode, Image, URL, Src, Dark Mode, Theme",
-		condition: () => blockController.isImage(),
+		searchKeyWords:
+			"Image, URL, Src, Fit, ObjectFit, Object Fit, Fill, Contain, Cover, Dark, Mode, Dark Mode, Theme",
 	},
 	{
 		component: Button,
@@ -83,45 +62,9 @@ const imageOptionsSectionProperties = [
 		},
 	},
 	{
-		component: Button,
-		getProps: () => {
-			return {
-				class: "text-base self-end",
-			};
-		},
-		innerText: computed(() => {
-			const block = blockController.getSelectedBlocks()[0];
-			const imageUrl = (block?.getAttribute("darkSrc") as string) || "";
-			return getOptimizeButtonText(imageUrl);
-		}),
-		searchKeyWords:
-			"Dark, Mode, Image, Local, Copy, Server, Download, Host, Store, Convert, webp, Convert to webp, image, darkSrc, url",
-		events: {
-			click: () => {
-				const block = blockController.getSelectedBlocks()[0];
-				const imageUrl = block.getAttribute("darkSrc") as string;
-
-				return optimizeImage({
-					imageUrl,
-					onSuccess: (newUrl: string) => {
-						block.setAttribute("darkSrc", newUrl);
-					},
-				});
-			},
-		},
-		condition: () => {
-			if (!blockController.isImage()) {
-				return false;
-			}
-			const imageUrl = blockController.getAttribute("darkSrc") as string;
-			return shouldShowOptimizeButton(imageUrl);
-		},
-	},
-	{
-		component: PropertyControl,
+		component: AttributePropertyControl,
 		getProps: () => {
 			return {
-				controlType: "attribute",
 				styleProperty: "alt",
 				label: "Alt Text",
 				allowDynamicValue: true,
diff --git a/frontend/src/components/BlockPropertySections/LayoutSection.ts b/frontend/src/components/BlockPropertySections/LayoutSection.ts
index e5a4d3f5c..c30975774 100644
--- a/frontend/src/components/BlockPropertySections/LayoutSection.ts
+++ b/frontend/src/components/BlockPropertySections/LayoutSection.ts
@@ -2,18 +2,17 @@ import BlockFlexLayoutHandler from "@/components/BlockFlexLayoutHandler.vue";
 import BlockGridLayoutHandler from "@/components/BlockGridLayoutHandler.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
+import StylePropertyControl from "../Controls/StylePropertyControl.vue";
 
 const layoutSectionProperties = [
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		condition: () => !blockController.isText(),
 		getProps: () => {
 			return {
 				styleProperty: "display",
 				component: OptionToggle,
 				label: "Type",
-				enableStates: false,
 				options: [
 					{
 						label: "Stack",
diff --git a/frontend/src/components/BlockPropertySections/LinkSection.ts b/frontend/src/components/BlockPropertySections/LinkSection.ts
index f3ac208dd..0f705ad3d 100644
--- a/frontend/src/components/BlockPropertySections/LinkSection.ts
+++ b/frontend/src/components/BlockPropertySections/LinkSection.ts
@@ -1,17 +1,15 @@
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import { computed } from "vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
 
 const linkSectionProperties = [
 	{
-		component: PropertyControl,
+		component: AttributePropertyControl,
 		getProps: () => {
 			return {
 				label: "Link To",
 				styleProperty: "href",
-				enableStates: false,
 				allowDynamicValue: true,
-				controlType: "attribute",
 				getModelValue: () => blockController.getAttribute("href"),
 				setModelValue: async (val: string) => {
 					if (val && !blockController.isLink()) {
@@ -40,11 +38,10 @@ const linkSectionProperties = [
 		},
 	},
 	{
-		component: PropertyControl,
+		component: AttributePropertyControl,
 		getProps: () => {
 			return {
 				label: "Opens in",
-				controlType: "attribute",
 				type: "select",
 				styleProperty: "target",
 				allowDynamicValue: false,
diff --git a/frontend/src/components/BlockPropertySections/OptionsSection.ts b/frontend/src/components/BlockPropertySections/OptionsSection.ts
index fe5720327..64d89b4a5 100644
--- a/frontend/src/components/BlockPropertySections/OptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/OptionsSection.ts
@@ -1,7 +1,5 @@
-import CodeEditor from "@/components/Controls/CodeEditor.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
 
 const setClasses = (val: string) => {
 	const classes = val.split(",").map((c) => c.trim());
@@ -9,7 +7,6 @@ const setClasses = (val: string) => {
 };
 
 const optionsSectionProperties = [
-
 	{
 		component: InlineInput,
 		getProps: () => {
diff --git a/frontend/src/components/BlockPropertySections/SpacingSection.ts b/frontend/src/components/BlockPropertySections/SpacingSection.ts
index 789160417..2233a010c 100644
--- a/frontend/src/components/BlockPropertySections/SpacingSection.ts
+++ b/frontend/src/components/BlockPropertySections/SpacingSection.ts
@@ -1,9 +1,9 @@
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
 
 const spacingSectionProperties = [
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		searchKeyWords: "Margin, Top, MarginTop, Margin Top",
 		getProps: () => {
 			return {
@@ -22,7 +22,7 @@ const spacingSectionProperties = [
 		condition: () => !blockController.isRoot(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		searchKeyWords: "Padding, Top, PaddingTop, Padding Top",
 		getProps: () => {
 			return {
diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 1174d5b91..671b46d15 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -1,8 +1,7 @@
 import BackgroundHandler from "@/components/BackgroundHandler.vue";
 import ColorInput from "@/components/Controls/ColorInput.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { computed } from "vue";
-import PropertyControl from "../Controls/PropertyControl.vue";
 import RangeInput from "../Controls/RangeInput.vue";
 
 const overflowOptions = [
@@ -30,7 +29,7 @@ const overflowOptions = [
 
 const styleSectionProperties = [
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Opacity",
@@ -55,22 +54,19 @@ const styleSectionProperties = [
 			"Background, BackgroundImage, Background Image, Background Position, Background Repeat, Background Size, BG, BGImage, BG Image, BGPosition, BG Position, BGRepeat, BG Repeat, BGSize, BG Size",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				styleProperty: "color",
 				component: ColorInput,
 				label: "Text Color",
 				popoverOffset: 120,
-				enableState: computed(() => {
-					return !blockController.getFirstSelectedBlock()?.getEditor();
-				}),
 			};
 		},
 		searchKeyWords: "Text, Color, TextColor, Text Color",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				component: ColorInput,
@@ -95,7 +91,7 @@ const styleSectionProperties = [
 		},
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Border Width",
@@ -109,7 +105,7 @@ const styleSectionProperties = [
 		condition: () => blockController.getStyle("borderColor") || blockController.getStyle("borderWidth"),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Border Style",
@@ -126,7 +122,7 @@ const styleSectionProperties = [
 		condition: () => blockController.getStyle("borderColor"),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Shadow",
@@ -152,7 +148,7 @@ const styleSectionProperties = [
 		searchKeyWords: "Shadow, BoxShadow, Box Shadow",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Radius",
@@ -178,7 +174,7 @@ const styleSectionProperties = [
 		},
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Z-Index",
@@ -192,7 +188,7 @@ const styleSectionProperties = [
 			blockController.getStyle("position") !== "static",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Overflow X",
@@ -211,7 +207,7 @@ const styleSectionProperties = [
 			"Overflow, X, OverflowX, Overflow X, Auto, Visible, Hide, Scroll, horizontal scroll, horizontalScroll",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Overflow Y",
@@ -231,7 +227,7 @@ const styleSectionProperties = [
 			"Overflow, Y, OverflowY, Overflow Y, Auto, Visible, Hide, Scroll, vertical scroll, verticalScroll",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Cursor",
diff --git a/frontend/src/components/BlockPropertySections/TransitionSection.ts b/frontend/src/components/BlockPropertySections/TransitionSection.ts
index 12e220477..ad53067f1 100644
--- a/frontend/src/components/BlockPropertySections/TransitionSection.ts
+++ b/frontend/src/components/BlockPropertySections/TransitionSection.ts
@@ -1,9 +1,9 @@
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
-import PropertyControl from "../Controls/PropertyControl.vue";
 
 const transitionSectionProperties = [
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Speed",
@@ -39,7 +39,7 @@ const transitionSectionProperties = [
 		searchKeyWords: "Transition, Duration, Speed, Animation Time",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Timing",
@@ -59,7 +59,7 @@ const transitionSectionProperties = [
 		condition: () => blockController.getStyle("transitionDuration"),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Properties",
diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index d3f43b04d..f4944dc63 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -1,7 +1,8 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import BasePropertyControl from "@/components/Controls/BasePropertyControl.vue";
 import FontUploader from "@/components/Controls/FontUploader.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import userFonts from "@/data/userFonts";
 import { UserFont } from "@/types/Builder/UserFont";
 import blockController from "@/utils/blockController";
@@ -15,11 +16,10 @@ const setFont = (font: string) => {
 
 const typographySectionProperties = [
 	{
-		component: PropertyControl,
+		component: BasePropertyControl,
 		getProps: () => {
 			return {
 				label: "Content",
-				controlType: "key",
 				styleProperty: "innerHTML",
 				// @ts-ignore
 				allowDynamicValue: true,
@@ -34,7 +34,7 @@ const typographySectionProperties = [
 			(blockController.isText() || blockController.isButton()) && !blockController.multipleBlocksSelected(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Family",
@@ -88,7 +88,7 @@ const typographySectionProperties = [
 		condition: () => blockController.isText() || blockController.isContainer(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Weight",
@@ -100,7 +100,7 @@ const typographySectionProperties = [
 		searchKeyWords: "Font, Weight, FontWeight",
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Size",
@@ -114,7 +114,7 @@ const typographySectionProperties = [
 		condition: () => blockController.isText() || blockController.isInput(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Height",
@@ -125,7 +125,7 @@ const typographySectionProperties = [
 		condition: () => blockController.isText(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Letter",
@@ -136,7 +136,7 @@ const typographySectionProperties = [
 		condition: () => blockController.isText(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Transform",
@@ -166,7 +166,7 @@ const typographySectionProperties = [
 		condition: () => blockController.isText(),
 	},
 	{
-		component: PropertyControl,
+		component: StylePropertyControl,
 		getProps: () => {
 			return {
 				label: "Align",
diff --git a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
index 32562637c..67a08f1a4 100644
--- a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
@@ -1,6 +1,6 @@
+import AttributePropertyControl from "@/components/Controls/AttributePropertyControl.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
 import ImageUploadInput from "@/components/ImageUploadInput.vue";
 import blockController from "@/utils/blockController";
 
@@ -19,19 +19,14 @@ const videoOptionsSectionProperties = [
 		},
 	},
 	{
-		component: PropertyControl,
+		component: AttributePropertyControl,
 		getProps: () => {
 			return {
 				component: ImageUploadInput,
-				controlType: "attribute",
 				styleProperty: "poster",
 				label: "Poster",
-				imageURL: blockController.getAttribute("poster"),
 			};
 		},
-		events: {
-			"update:imageURL": (val: string) => blockController.setAttribute("poster", val),
-		},
 		searchKeyWords: "Poster, Image, Thumbnail, Preview",
 	},
 	{
diff --git a/frontend/src/components/Controls/AttributePropertyControl.vue b/frontend/src/components/Controls/AttributePropertyControl.vue
new file mode 100644
index 000000000..d50837cdc
--- /dev/null
+++ b/frontend/src/components/Controls/AttributePropertyControl.vue
@@ -0,0 +1,62 @@
+d
+<template>
+	<BasePropertyControl
+		v-bind="baseProps"
+		:getVariantValue="getVariantValue"
+		:setVariantValue="setVariantValue">
+		<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+			<slot :name="name" v-bind="slotData || {}" />
+		</template>
+	</BasePropertyControl>
+</template>
+
+<script lang="ts" setup>
+import BasePropertyControl from "@/components/Controls/BasePropertyControl.vue";
+import blockController from "@/utils/blockController";
+import type { Component } from "vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		styleProperty: string;
+		label?: string;
+		placeholder?: string;
+		getModelValue?: () => string;
+		getPlaceholder?: () => string;
+		setModelValue?: (value: string) => void;
+		enableSlider?: boolean;
+		unitOptions?: string[];
+		changeFactor?: number;
+		minValue?: number;
+		maxValue?: number | null;
+		component?: Component;
+		events?: Record<string, unknown>;
+		defaultValue?: string | number;
+		allowDynamicValue?: boolean;
+		labelPlacement?: "left" | "top";
+		variants?: Array<{ name: string; property: string; label: string }>;
+	}>(),
+	{
+		variants: () => [],
+	},
+);
+
+const baseProps = computed(() => ({
+	...props,
+	controlType: "attribute" as const,
+	getModelValue:
+		props.getModelValue || (() => (blockController.getAttribute(props.styleProperty) as string) || ""),
+	setModelValue:
+		props.setModelValue || ((value: string) => blockController.setAttribute(props.styleProperty, value)),
+}));
+
+const getVariantValue = (variantName: string) => {
+	const property = props.variants?.find((v) => v.name === variantName)?.property;
+	return property ? (blockController.getAttribute(property) as string) || "" : "";
+};
+
+const setVariantValue = (variantName: string, value: string | null) => {
+	const property = props.variants?.find((v) => v.name === variantName)?.property;
+	if (property) blockController.setAttribute(property, value || "");
+};
+</script>
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
new file mode 100644
index 000000000..252db70a9
--- /dev/null
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -0,0 +1,290 @@
+<template>
+	<div class="flex w-full flex-col gap-2">
+		<PropertyLabel
+			v-if="labelPlacement === 'top' && label"
+			ref="propertyLabelRef"
+			:label="label"
+			:showDropdown="showDropdown"
+			:dropdownOptions="dropdownOptions"
+			:enableSlider="enableSlider"
+			@mousedown="handleMouseDown" />
+
+		<div
+			class="relative flex w-full gap-2"
+			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
+			<PropertyLabel
+				v-if="labelPlacement === 'left' && label"
+				ref="propertyLabelRef"
+				:label="label"
+				:showDropdown="showDropdown"
+				:dropdownOptions="dropdownOptions"
+				:enableSlider="enableSlider"
+				containerClass="w-[88px] shrink-0"
+				@mousedown="handleMouseDown" />
+
+			<DraggablePopup
+				v-model="showDynamicValueModal"
+				:container="propertyLabelRef?.dropdownTrigger?.$el"
+				placement="middle-right"
+				:clickOutsideToClose="false"
+				:placementOffset="20"
+				v-if="showDynamicValueModal">
+				<template #header>Set Dynamic Value</template>
+				<template #content>
+					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
+				</template>
+			</DraggablePopup>
+
+			<PropertyControlInput
+				:component="props.component"
+				:controlAttrs="controlAttrs"
+				:events="props.events"
+				:modelValue="modelValue"
+				:defaultValue="defaultValue"
+				:placeholder="placeholderValue"
+				:dynamicValue="dynamicValue"
+				componentClass="w-full"
+				@update:modelValue="updateValue"
+				@keydown="handleKeyDown"
+				@openDynamicModal="showDynamicValueModal = true"
+				@clearDynamic="clearDynamicValue">
+				<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+					<slot :name="name" v-bind="slotData || {}" />
+				</template>
+			</PropertyControlInput>
+		</div>
+
+		<!-- Variant controls -->
+		<VariantControl
+			v-for="variant in visibleVariants"
+			:key="variant.name"
+			:label="variant.label"
+			:labelPlacement="labelPlacement"
+			:component="props.component"
+			:controlAttrs="controlAttrs"
+			:events="props.events"
+			:modelValue="getVariantValue(variant.name)"
+			:defaultValue="defaultValue"
+			:placeholder="placeholderValue"
+			:enableSlider="enableSlider"
+			@update:modelValue="(v: any) => updateVariantValue(variant.name, v)"
+			@keydown="(e: KeyboardEvent) => handleKeyDown(e, variant.name)"
+			@labelMousedown="(e: MouseEvent) => handleSliderMouseDown(e, variant.name)"
+			@clear="clearVariant(variant.name)">
+			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+				<slot :name="name" v-bind="slotData || {}" />
+			</template>
+		</VariantControl>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import DynamicValueHandler from "@/components/Controls/DynamicValueHandler.vue";
+import Input from "@/components/Controls/Input.vue";
+import PropertyControlInput from "@/components/Controls/PropertyControlInput.vue";
+import PropertyLabel from "@/components/Controls/PropertyLabel.vue";
+import VariantControl from "@/components/Controls/VariantControl.vue";
+import blockController from "@/utils/blockController";
+import { extractNumberAndUnit, normalizeValueWithUnits } from "@/utils/helpers";
+import type { Component } from "vue";
+import { computed, ref, useAttrs } from "vue";
+
+const propertyLabelRef = ref<InstanceType<typeof PropertyLabel> | null>(null);
+const emit = defineEmits<{
+	(setDynamicValue: string): void;
+	(clearDynamicValue: void): void;
+}>();
+
+const props = withDefaults(
+	defineProps<{
+		styleProperty: string;
+		label?: string;
+		placeholder?: string;
+		controlType?: "style" | "attribute" | "key";
+		getModelValue?: () => string;
+		getPlaceholder?: () => string;
+		setModelValue?: (value: string) => void;
+		enableSlider?: boolean;
+		unitOptions?: string[];
+		changeFactor?: number;
+		minValue?: number;
+		maxValue?: number | null;
+		hideClearButton?: boolean;
+		component?: Component;
+		events?: Record<string, unknown>;
+		defaultValue?: string | number;
+		allowDynamicValue?: boolean;
+		labelPlacement?: "left" | "top";
+		variants?: Array<{ name: string; property: string; label: string }>;
+		getVariantValue?: (variant: string) => string;
+		setVariantValue?: (variant: string, value: string | null) => void;
+	}>(),
+	{
+		placeholder: "unset",
+		type: "text",
+		controlType: "style",
+		enableSlider: false,
+		unitOptions: () => [],
+		changeFactor: 1,
+		minValue: 0,
+		maxValue: null,
+		hideClearButton: false,
+		component: Input,
+		allowDynamicValue: false,
+		labelPlacement: "left",
+		variants: () => [],
+	},
+);
+
+const showDropdown = computed(() => {
+	return props.allowDynamicValue || (props.variants && props.variants.length > 0);
+});
+
+const controlAttrs = computed(() => {
+	const attrs = useAttrs();
+	const propKeys = Object.keys(props);
+	propKeys.push("style");
+	return Object.fromEntries(Object.entries(attrs).filter(([key]) => !propKeys.includes(key)));
+});
+
+const defaultValue = computed(() => {
+	return blockController.getCascadingStyle(props.styleProperty) ?? props.defaultValue;
+});
+
+const modelValue = computed(() => props.getModelValue?.() ?? "");
+
+const placeholderValue = computed(() => props.getPlaceholder?.() ?? props.placeholder);
+
+// Normalize and extract value from various input formats
+const normalizeInputValue = (value: string | number | null | { label: string; value: string }) => {
+	if (typeof value === "object" && value !== null && "value" in value) {
+		value = value.value;
+	}
+	if (value && typeof value === "string") {
+		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
+	}
+	return value as string;
+};
+
+const updateValue = (value: string | number | null | { label: string; value: string }) => {
+	props.setModelValue?.(normalizeInputValue(value));
+};
+
+// Generic slider handler for both main control and variants
+const handleSliderMouseDown = (e: MouseEvent, variantName?: string) => {
+	if (!props.enableSlider) return;
+	const currentValue = variantName ? getVariantValue(variantName) : modelValue.value;
+	const { number } = extractNumberAndUnit(String(currentValue || ""));
+	const startY = e.clientY;
+	const startValue = Number(number);
+
+	const handleMouseMove = (e: MouseEvent) => {
+		const diff = Math.round((startY - e.clientY) * props.changeFactor);
+		adjustNumericValue(diff, startValue, variantName);
+	};
+
+	const handleMouseUp = () => window.removeEventListener("mousemove", handleMouseMove);
+
+	window.addEventListener("mousemove", handleMouseMove);
+	window.addEventListener("mouseup", handleMouseUp, { once: true });
+};
+
+const handleMouseDown = (e: MouseEvent) => handleSliderMouseDown(e);
+
+const getVariantValue = (variantName: string) => {
+	if (props.getVariantValue) {
+		return props.getVariantValue(variantName);
+	}
+	return "";
+};
+
+const updateVariantValue = (
+	variantName: string,
+	value: string | number | null | { label: string; value: string },
+) => {
+	props.setVariantValue?.(variantName, normalizeInputValue(value));
+};
+
+const clearVariant = (variantName: string) => props.setVariantValue?.(variantName, null);
+
+const showDynamicValueModal = ref(false);
+
+const dropdownOptions = computed(() => {
+	const options = [];
+	if (props.variants?.length) {
+		options.push(
+			...props.variants
+				.filter((variant) => !getVariantValue(variant.name))
+				.map((variant) => ({
+					label: variant.label,
+					onClick: () => {
+						if (props.setVariantValue) {
+							props.setVariantValue(variant.name, modelValue.value as string);
+						}
+					},
+				})),
+		);
+	}
+
+	if (props.allowDynamicValue) {
+		options.unshift({
+			label: "Set Dynamic Value",
+			onClick: () => {
+				showDynamicValueModal.value = true;
+			},
+		});
+	}
+	return options;
+});
+
+const visibleVariants = computed(() => {
+	if (!props.variants?.length) return [];
+	return props.variants.filter((variant) => getVariantValue(variant.name));
+});
+
+const adjustNumericValue = (step: number, initialValue: number | null = null, variantName?: string) => {
+	const currentValue = variantName ? getVariantValue(variantName) : String(modelValue.value || "");
+	const { number, unit: existingUnit } = extractNumberAndUnit(String(currentValue));
+	const unit =
+		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
+
+	let newValue = (initialValue != null ? initialValue : Number(number)) + step;
+	newValue = Math.max(props.minValue, Math.min(props.maxValue ?? Infinity, newValue));
+
+	const result = newValue + unit;
+	variantName ? updateVariantValue(variantName, result) : updateValue(result);
+};
+
+const handleKeyDown = (e: KeyboardEvent, variantName?: string) => {
+	if (!props.enableSlider || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
+
+	const step = e.key === "ArrowUp" ? 1 : -1;
+	adjustNumericValue(step, null, variantName);
+	e.preventDefault();
+};
+
+function setDynamicValue(value: string) {
+	blockController.getSelectedBlocks().forEach((block) => {
+		block.setDynamicValue(props.styleProperty, props.controlType, value);
+	});
+	showDynamicValueModal.value = false;
+	emit("setDynamicValue");
+}
+
+const dynamicValue = computed(() => {
+	const blocks = blockController.getSelectedBlocks();
+	if (!blocks?.length) return "";
+
+	const dataKeyObj = blocks[0]
+		.getDynamicValues()
+		.find((obj) => obj.type === props.controlType && obj.property === props.styleProperty);
+	return dataKeyObj?.key || "";
+});
+
+const clearDynamicValue = () => {
+	blockController.getSelectedBlocks().forEach((block) => {
+		block.removeDynamicValue(props.styleProperty, props.controlType);
+	});
+	emit("clearDynamicValue");
+};
+</script>
diff --git a/frontend/src/components/Controls/PropertyControl.vue b/frontend/src/components/Controls/PropertyControl.vue
deleted file mode 100644
index 760a9c020..000000000
--- a/frontend/src/components/Controls/PropertyControl.vue
+++ /dev/null
@@ -1,445 +0,0 @@
-<template>
-	<div class="flex w-full flex-col gap-2">
-		<!-- Top label placement -->
-		<div v-if="labelPlacement === 'top' && label" class="flex items-center gap-2">
-			<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="stateOptions">
-				<template v-slot="{ open }">
-					<FeatherIcon
-						ref="dropdownTrigger"
-						name="plus-circle"
-						class="h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
-						@click="open" />
-				</template>
-			</Dropdown>
-			<InputLabel class="truncate" :class="{ 'cursor-ns-resize': enableSlider }" @mousedown="handleMouseDown">
-				{{ label }}
-			</InputLabel>
-		</div>
-
-		<!-- Control container with conditional layout -->
-		<div
-			class="relative flex w-full gap-2"
-			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
-			<!-- Left label placement (original layout) -->
-			<div
-				class="flex w-[88px] shrink-0 items-center"
-				v-if="labelPlacement === 'left' && (enableStateControls || label)">
-				<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="stateOptions">
-					<template v-slot="{ open }">
-						<FeatherIcon
-							ref="dropdownTrigger"
-							name="plus-circle"
-							class="mr-1.5 h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
-							@click="open" />
-					</template>
-				</Dropdown>
-				<InputLabel
-					class="truncate"
-					:class="{ 'cursor-ns-resize': enableSlider }"
-					v-if="label"
-					@mousedown="handleMouseDown">
-					{{ label }}
-				</InputLabel>
-			</div>
-
-			<!-- Hidden popup for dynamic values -->
-			<DraggablePopup
-				v-model="showDynamicValueModal"
-				:container="dropdownTrigger?.$el"
-				placement="middle-right"
-				:clickOutsideToClose="false"
-				:placementOffset="20"
-				v-if="showDynamicValueModal">
-				<template #header>Set Dynamic Value</template>
-				<template #content>
-					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
-				</template>
-			</DraggablePopup>
-
-			<div class="relative w-full">
-				<component
-					:is="props.component"
-					v-bind="controlAttrs"
-					v-on="props.events || {}"
-					:modelValue="modelValue"
-					:defaultValue="defaultValue"
-					:placeholder="placeholderValue"
-					@update:modelValue="updateValue"
-					@keydown.stop="handleKeyDown"
-					class="w-full">
-					<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-						<slot :name="name" v-bind="slotData || {}" />
-					</template>
-				</component>
-
-				<div
-					class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
-					@click.stop="showDynamicValueModal = true"
-					v-if="dynamicValue">
-					<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-					<span class="truncate">{{ dynamicValue }}</span>
-				</div>
-				<button
-					class="absolute right-1 top-1 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
-					tabindex="-1"
-					v-show="dynamicValue"
-					@click="clearDynamicValue">
-					<CrossIcon />
-				</button>
-			</div>
-		</div>
-		<template v-if="enableStateControls" v-for="state in statesToShow" :key="String(state)">
-			<div v-if="labelPlacement === 'top'" class="flex flex-col gap-1">
-				<InputLabel
-					class="text-sm"
-					:class="{ 'cursor-ns-resize': enableSlider }"
-					@mousedown="(ev: MouseEvent) => handleStateMouseDown(ev, state)">
-					{{ stateLabels[String(state)] }}
-				</InputLabel>
-				<div class="relative">
-					<component
-						:is="props.component"
-						v-bind="controlAttrs"
-						v-on="props.events || {}"
-						:modelValue="getStateValue(state)"
-						:defaultValue="defaultValue"
-						:placeholder="placeholderValue"
-						@focus="() => enableStyle(state)"
-						@blur="() => disableStyle(state)"
-						@update:modelValue="(v: any) => updateStateValue(state, v)"
-						@keydown.stop="(e: KeyboardEvent) => handleKeyDown(e, state)"
-						class="w-full">
-						<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-							<slot :name="name" v-bind="slotData || {}" />
-						</template>
-					</component>
-					<button
-						type="button"
-						class="absolute right-1 top-1 text-ink-gray-7 hover:text-ink-gray-9"
-						@click="clearState(state)">
-						<FeatherIcon name="x" class="h-3 w-3" />
-					</button>
-				</div>
-			</div>
-
-			<div
-				v-else
-				class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
-				<button
-					type="button"
-					class="absolute left-[11px] hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
-					@click="clearState(state)">
-					<FeatherIcon name="x" class="h-3 w-3" />
-				</button>
-				<InputLabel
-					class="ml-3 w-[80px] shrink-0"
-					:class="{ 'cursor-ns-resize': enableSlider }"
-					@mousedown="(ev: MouseEvent) => handleStateMouseDown(ev, state)">
-					{{ stateLabels[String(state)] }}
-				</InputLabel>
-				<component
-					:is="props.component"
-					v-bind="controlAttrs"
-					v-on="props.events || {}"
-					:modelValue="getStateValue(state)"
-					:defaultValue="defaultValue"
-					:placeholder="placeholderValue"
-					@focus="() => enableStyle(state)"
-					@blur="() => disableStyle(state)"
-					@update:modelValue="(v: any) => updateStateValue(state, v)"
-					@keydown.stop="(e: KeyboardEvent) => handleKeyDown(e, state)"
-					class="shrink-1 w-full">
-					<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-						<slot :name="name" v-bind="slotData || {}" />
-					</template>
-				</component>
-			</div>
-		</template>
-	</div>
-</template>
-<script lang="ts" setup>
-import DynamicValueHandler from "@/components/Controls/DynamicValueHandler.vue";
-import Input from "@/components/Controls/Input.vue";
-import InputLabel from "@/components/Controls/InputLabel.vue";
-import CrossIcon from "@/components/Icons/Cross.vue";
-import blockController from "@/utils/blockController";
-import { extractNumberAndUnit, normalizeValueWithUnits } from "@/utils/helpers";
-import { Dropdown, FeatherIcon } from "frappe-ui";
-import type { Component } from "vue";
-import { computed, ref, useAttrs } from "vue";
-
-const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
-const emit = defineEmits<{
-	(setDynamicValue: string): void;
-	(clearDynamicValue: void): void;
-}>();
-
-const props = withDefaults(
-	defineProps<{
-		styleProperty: string;
-		label?: string;
-		placeholder?: string;
-		controlType?: "style" | "attribute" | "key";
-		getModelValue?: () => string;
-		getPlaceholder?: () => string;
-		setModelValue?: (value: string) => void;
-		enableSlider?: boolean;
-		unitOptions?: string[];
-		changeFactor?: number;
-		minValue?: number;
-		maxValue?: number | null;
-		hideClearButton?: boolean;
-		component?: Component;
-		events?: Record<string, unknown>;
-		defaultValue?: string | number;
-		enableStates?: boolean;
-		allowDynamicValue?: boolean;
-		enabledStates?: string[];
-		labelPlacement?: "left" | "top";
-	}>(),
-	{
-		placeholder: "unset",
-		type: "text",
-		controlType: "style",
-		enableSlider: false,
-		unitOptions: () => [],
-		changeFactor: 1,
-		minValue: 0,
-		maxValue: null,
-		hideClearButton: false,
-		component: Input,
-		allowDynamicValue: false,
-		enabledStates: () => ["hover", "active", "focus"],
-		enableStates: undefined,
-		labelPlacement: "left",
-	},
-);
-
-const enableStateControls = computed(() => {
-	return props.enableStates ?? props.controlType === "style";
-});
-
-const stateLabels: Record<string, string> = {
-	hover: "On Hover",
-	active: "On Active",
-	focus: "On Focus",
-};
-
-const controlAttrs = computed(() => {
-	const attrs = useAttrs();
-	const propKeys = Object.keys(props);
-	propKeys.push("style");
-	return Object.fromEntries(Object.entries(attrs).filter(([key]) => !propKeys.includes(key)));
-});
-
-const defaultValue = computed(() => {
-	return blockController.getCascadingStyle(props.styleProperty) ?? props.defaultValue;
-});
-
-const modelValue = computed(
-	() => props.getModelValue?.() ?? blockController.getNativeStyle(props.styleProperty) ?? "",
-);
-
-const placeholderValue = computed(
-	() =>
-		props.getPlaceholder?.() ??
-		String(blockController.getCascadingStyle(props.styleProperty) ?? props.placeholder),
-);
-
-const updateValue = (value: string | number | null | { label: string; value: string }) => {
-	if (typeof value === "object" && value !== null && "value" in value) {
-		value = value.value;
-	}
-	if (value && typeof value === "string") {
-		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
-	}
-	if (props.setModelValue) {
-		props.setModelValue(value as string);
-	} else {
-		blockController.setStyle(props.styleProperty, value as string);
-	}
-};
-
-const handleMouseDown = (e: MouseEvent) => {
-	if (!props.enableSlider) return;
-	const { number } = extractNumberAndUnit(String(modelValue.value || ""));
-	const startY = e.clientY;
-	const startValue = Number(number);
-	const handleMouseMove = (e: MouseEvent) => {
-		let diff = (startY - e.clientY) * props.changeFactor;
-		diff = Math.round(diff);
-		incrementOrDecrement(diff, startValue);
-	};
-	const handleMouseUp = () => {
-		window.removeEventListener("mousemove", handleMouseMove);
-	};
-	window.addEventListener("mousemove", handleMouseMove);
-	window.addEventListener("mouseup", handleMouseUp, { once: true });
-};
-
-const getStateValue = (state: string) => {
-	return blockController.getNativeStyle(`${state}:${props.styleProperty}`);
-};
-
-const updateStateValue = (
-	state: string,
-	value: string | number | null | { label: string; value: string },
-) => {
-	if (typeof value === "object" && value !== null && "value" in value) {
-		value = value.value;
-	}
-	if (value && typeof value === "string") {
-		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
-	}
-	blockController.setStyle(`${state}:${props.styleProperty}`, value as string);
-};
-
-const clearState = (state: string) => {
-	blockController.setStyle(`${state}:${props.styleProperty}`, null);
-};
-
-const showDynamicValueModal = ref(false);
-
-const stateOptions = computed(() => {
-	const options = [];
-	if (enableStateControls.value) {
-		options.push(
-			...props.enabledStates
-				.filter((state: string) => !getStateValue(state))
-				.map((state: string) => ({
-					label: stateLabels[state] || state,
-					onClick: () => {
-						blockController.getSelectedBlocks().forEach((block) => {
-							if (!block.getStyle("transitionDuration")) {
-								block.setStyle("transitionDuration", "300ms");
-								block.setStyle("transitionTimingFunction", "ease");
-								block.setStyle("transitionProperty", "all");
-							}
-						});
-						blockController.setStyle(`${state}:${props.styleProperty}`, modelValue.value);
-					},
-				})),
-		);
-	}
-
-	if (props.allowDynamicValue) {
-		options.unshift({
-			label: "Set Dynamic Value",
-			onClick: () => {
-				showDynamicValueModal.value = true;
-			},
-		});
-	}
-	return options;
-});
-
-const statesToShow = computed(() => {
-	if (!enableStateControls.value) return [];
-	return props.enabledStates.filter((state: string) => {
-		return blockController.getNativeStyle(`${state}:${props.styleProperty}`) !== undefined;
-	});
-});
-
-const handleKeyDown = (e: KeyboardEvent, state?: string) => {
-	if (!props.enableSlider) return;
-	if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-		const step = e.key === "ArrowUp" ? 1 : -1;
-		if (state) {
-			incrementOrDecrementState(state, step);
-		} else {
-			incrementOrDecrement(step);
-		}
-		e.preventDefault();
-	}
-};
-
-const handleStateMouseDown = (e: MouseEvent, state: string) => {
-	if (!props.enableSlider) return;
-	const { number } = extractNumberAndUnit(String(getStateValue(state) || ""));
-	const startY = e.clientY;
-	const startValue = Number(number);
-	const handleMouseMove = (e: MouseEvent) => {
-		let diff = (startY - e.clientY) * props.changeFactor;
-		diff = Math.round(diff);
-		incrementOrDecrementState(state, diff, startValue);
-	};
-	const handleMouseUp = () => {
-		window.removeEventListener("mousemove", handleMouseMove);
-	};
-	window.addEventListener("mousemove", handleMouseMove);
-	window.addEventListener("mouseup", handleMouseUp, { once: true });
-};
-
-const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
-	const value = String(modelValue.value || "");
-	const { number, unit: existingUnit } = extractNumberAndUnit(value);
-	const unit =
-		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
-	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
-	if (typeof props.minValue === "number" && newValue <= props.minValue) {
-		newValue = props.minValue;
-	}
-	if (typeof props.maxValue === "number" && props.maxValue !== null && newValue >= props.maxValue) {
-		newValue = props.maxValue;
-	}
-	updateValue(newValue + "" + unit);
-};
-
-const incrementOrDecrementState = (state: string, step: number, initialValue: null | number = null) => {
-	const value = String(getStateValue(state) || "");
-	const { number, unit: existingUnit } = extractNumberAndUnit(value);
-	const unit =
-		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
-	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
-	if (typeof props.minValue === "number" && newValue <= props.minValue) {
-		newValue = props.minValue;
-	}
-	if (typeof props.maxValue === "number" && props.maxValue !== null && newValue >= props.maxValue) {
-		newValue = props.maxValue;
-	}
-	updateStateValue(state, newValue + "" + unit);
-};
-
-const enableStyle = (state: string) => {
-	blockController.getSelectedBlocks().forEach((block) => {
-		block.activeState = `${state}:${props.styleProperty}`;
-	});
-};
-
-const disableStyle = (state: string) => {
-	blockController.getSelectedBlocks().forEach((block) => {
-		if (block.activeState === `${state}:${props.styleProperty}`) {
-			block.activeState = null;
-		}
-	});
-};
-
-function setDynamicValue(value: string) {
-	blockController.getSelectedBlocks().forEach((block) => {
-		block.setDynamicValue(props.styleProperty, props.controlType, value);
-	});
-	showDynamicValueModal.value = false;
-	emit("setDynamicValue");
-}
-
-const dynamicValue = computed(() => {
-	const blocks = blockController.getSelectedBlocks();
-	if (!blocks?.length) return;
-	const dataKeyObj = blocks[0].getDynamicValues().find((obj) => {
-		return obj.type === props.controlType && obj.property === props.styleProperty;
-	});
-	if (dataKeyObj) {
-		return dataKeyObj.key;
-	} else {
-		return "";
-	}
-});
-
-const clearDynamicValue = () => {
-	const blocks = blockController.getSelectedBlocks();
-	blocks.forEach((block) => {
-		block.removeDynamicValue(props.styleProperty, props.controlType);
-	});
-	emit("clearDynamicValue");
-};
-</script>
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
new file mode 100644
index 000000000..0b889124c
--- /dev/null
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="relative w-full">
+		<component
+			:is="component"
+			v-bind="controlAttrs"
+			v-on="events || {}"
+			:modelValue="modelValue"
+			:defaultValue="defaultValue"
+			:placeholder="placeholder"
+			@update:modelValue="$emit('update:modelValue', $event)"
+			@keydown.stop="$emit('keydown', $event)"
+			:class="componentClass">
+			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+				<slot :name="name" v-bind="slotData || {}" />
+			</template>
+		</component>
+
+		<!-- Dynamic value overlay -->
+		<div
+			v-if="dynamicValue"
+			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
+			@click.stop="$emit('openDynamicModal')">
+			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
+			<span class="truncate">{{ dynamicValue }}</span>
+		</div>
+
+		<!-- Clear button -->
+		<button
+			v-show="dynamicValue"
+			class="absolute right-1 top-1 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
+			tabindex="-1"
+			@click="$emit('clearDynamic')">
+			<CrossIcon />
+		</button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import CrossIcon from "@/components/Icons/Cross.vue";
+import { FeatherIcon } from "frappe-ui";
+import type { Component } from "vue";
+
+defineProps<{
+	component: Component;
+	controlAttrs?: Record<string, unknown>;
+	events?: Record<string, unknown>;
+	modelValue: string;
+	defaultValue?: string | number;
+	placeholder?: string;
+	dynamicValue?: string;
+	componentClass?: string;
+}>();
+
+defineEmits<{
+	(e: "update:modelValue", value: any): void;
+	(e: "keydown", event: KeyboardEvent): void;
+	(e: "openDynamicModal"): void;
+	(e: "clearDynamic"): void;
+}>();
+</script>
diff --git a/frontend/src/components/Controls/PropertyLabel.vue b/frontend/src/components/Controls/PropertyLabel.vue
new file mode 100644
index 000000000..e03b0df9d
--- /dev/null
+++ b/frontend/src/components/Controls/PropertyLabel.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="flex items-center gap-2" :class="containerClass">
+		<Dropdown v-if="showDropdown" size="sm" :options="dropdownOptions">
+			<template v-slot="{ open }">
+				<FeatherIcon
+					ref="dropdownTrigger"
+					name="plus-circle"
+					class="h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
+					@click="open" />
+			</template>
+		</Dropdown>
+		<InputLabel
+			class="truncate"
+			:class="{ 'cursor-ns-resize': enableSlider }"
+			@mousedown="$emit('mousedown', $event)">
+			{{ label }}
+		</InputLabel>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import { Dropdown, FeatherIcon } from "frappe-ui";
+import { ref } from "vue";
+
+const props = defineProps<{
+	label: string;
+	showDropdown?: boolean;
+	dropdownOptions?: Array<{ label: string; onClick: () => void }>;
+	enableSlider?: boolean;
+	containerClass?: string;
+}>();
+
+defineEmits<{
+	(e: "mousedown", event: MouseEvent): void;
+}>();
+
+const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
+
+defineExpose({ dropdownTrigger });
+</script>
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
new file mode 100644
index 000000000..c5f6e0417
--- /dev/null
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -0,0 +1,107 @@
+<template>
+	<BasePropertyControl
+		v-bind="baseProps"
+		:variants="allVariants"
+		:getVariantValue="getVariantValue"
+		:setVariantValue="setVariantValue">
+		<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+			<slot :name="name" v-bind="slotData || {}" />
+		</template>
+	</BasePropertyControl>
+</template>
+
+<script lang="ts" setup>
+import BasePropertyControl from "@/components/Controls/BasePropertyControl.vue";
+import blockController from "@/utils/blockController";
+import type { Component } from "vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		styleProperty: string;
+		label?: string;
+		placeholder?: string;
+		getModelValue?: () => string;
+		getPlaceholder?: () => string;
+		setModelValue?: (value: string) => void;
+		enableSlider?: boolean;
+		unitOptions?: string[];
+		changeFactor?: number;
+		minValue?: number;
+		maxValue?: number | null;
+		component?: Component;
+		events?: Record<string, unknown>;
+		defaultValue?: string | number;
+		allowDynamicValue?: boolean;
+		labelPlacement?: "left" | "top";
+		enableStates?: boolean;
+		enabledStates?: string[];
+		variants?: Array<{ name: string; property: string; label: string }>;
+	}>(),
+	{
+		enableStates: true,
+		enabledStates: () => ["hover", "active", "focus"],
+		variants: () => [],
+	},
+);
+
+const stateLabels: Record<string, string> = {
+	hover: "On Hover",
+	active: "On Active",
+	focus: "On Focus",
+};
+
+const stateVariants = computed(() =>
+	props.enabledStates.map((state) => ({
+		name: state,
+		property: `${state}:${props.styleProperty}`,
+		label: stateLabels[state] || state,
+	})),
+);
+
+const allVariants = computed(() => [
+	...(props.enableStates ? stateVariants.value : []),
+	...(props.variants || []),
+]);
+
+const getVariantValue = (variantName: string): string => {
+	if (stateVariants.value.find((v) => v.name === variantName)) {
+		return String(blockController.getNativeStyle(`${variantName}:${props.styleProperty}`) || "");
+	}
+	const property = props.variants?.find((v) => v.name === variantName)?.property;
+	return property ? String(blockController.getAttribute(property) || "") : "";
+};
+
+const setVariantValue = (variantName: string, value: string | null) => {
+	if (stateVariants.value.find((v) => v.name === variantName)) {
+		if (value !== null) {
+			blockController.getSelectedBlocks().forEach((block) => {
+				if (!block.getStyle("transitionDuration")) {
+					block.setStyle("transitionDuration", "300ms");
+					block.setStyle("transitionTimingFunction", "ease");
+					block.setStyle("transitionProperty", "all");
+				}
+			});
+		}
+		blockController.setStyle(`${variantName}:${props.styleProperty}`, value);
+		return;
+	}
+	const property = props.variants?.find((v) => v.name === variantName)?.property;
+	if (property) blockController.setAttribute(property, value || "");
+};
+
+const baseProps = computed(() => {
+	const { enableStates, enabledStates, variants, ...rest } = props;
+	return {
+		...rest,
+		controlType: "style" as const,
+		getModelValue:
+			props.getModelValue || (() => String(blockController.getNativeStyle(props.styleProperty) ?? "")),
+		setModelValue:
+			props.setModelValue || ((value: string) => blockController.setStyle(props.styleProperty, value)),
+		getPlaceholder:
+			props.getPlaceholder ||
+			(() => String(blockController.getCascadingStyle(props.styleProperty) ?? "unset")),
+	};
+});
+</script>
diff --git a/frontend/src/components/Controls/VariantControl.vue b/frontend/src/components/Controls/VariantControl.vue
new file mode 100644
index 000000000..6a5ec3b67
--- /dev/null
+++ b/frontend/src/components/Controls/VariantControl.vue
@@ -0,0 +1,88 @@
+<template>
+	<div v-if="labelPlacement === 'top'" class="flex flex-col gap-1">
+		<InputLabel
+			class="text-sm"
+			:class="{ 'cursor-ns-resize': enableSlider }"
+			@mousedown="$emit('labelMousedown', $event)">
+			{{ label }}
+		</InputLabel>
+		<div class="relative">
+			<component
+				:is="component"
+				v-bind="controlAttrs"
+				v-on="events || {}"
+				:modelValue="modelValue"
+				:defaultValue="defaultValue"
+				:placeholder="placeholder"
+				@update:modelValue="$emit('update:modelValue', $event)"
+				@keydown.stop="$emit('keydown', $event)"
+				class="w-full">
+				<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+					<slot :name="name" v-bind="slotData || {}" />
+				</template>
+			</component>
+			<button
+				type="button"
+				class="absolute right-1 top-1 text-ink-gray-7 hover:text-ink-gray-9"
+				@click="$emit('clear')">
+				<FeatherIcon name="x" class="h-3 w-3" />
+			</button>
+		</div>
+	</div>
+
+	<div
+		v-else
+		class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
+		<button
+			type="button"
+			class="absolute left-[11px] hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
+			@click="$emit('clear')">
+			<FeatherIcon name="x" class="h-3 w-3" />
+		</button>
+		<InputLabel
+			class="ml-3 w-[80px] shrink-0"
+			:class="{ 'cursor-ns-resize': enableSlider }"
+			@mousedown="$emit('labelMousedown', $event)">
+			{{ label }}
+		</InputLabel>
+		<component
+			:is="component"
+			v-bind="controlAttrs"
+			v-on="events || {}"
+			:modelValue="modelValue"
+			:defaultValue="defaultValue"
+			:placeholder="placeholder"
+			@update:modelValue="$emit('update:modelValue', $event)"
+			@keydown.stop="$emit('keydown', $event)"
+			class="shrink-1 w-full">
+			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+				<slot :name="name" v-bind="slotData || {}" />
+			</template>
+		</component>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import InputLabel from "@/components/Controls/InputLabel.vue";
+import { FeatherIcon } from "frappe-ui";
+import type { Component } from "vue";
+
+defineProps<{
+	label: string;
+	labelPlacement: "left" | "top";
+	component: Component;
+	controlAttrs?: Record<string, unknown>;
+	events?: Record<string, unknown>;
+	modelValue: string;
+	defaultValue?: string | number;
+	placeholder?: string;
+	enableSlider?: boolean;
+}>();
+
+defineEmits<{
+	(e: "update:modelValue", value: any): void;
+	(e: "keydown", event: KeyboardEvent): void;
+	(e: "labelMousedown", event: MouseEvent): void;
+	(e: "clear"): void;
+}>();
+</script>
diff --git a/frontend/src/components/DimensionInput.vue b/frontend/src/components/DimensionInput.vue
index 4dec415be..d3c094f27 100644
--- a/frontend/src/components/DimensionInput.vue
+++ b/frontend/src/components/DimensionInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<PropertyControl
+	<StylePropertyControl
 		:component="Autocomplete"
 		:styleProperty="property"
 		:label="label"
@@ -18,11 +18,11 @@
 				value: '100%',
 			},
 		]"
-		:unitOptions="['px', '%', 'vw', 'vh']"></PropertyControl>
+		:unitOptions="['px', '%', 'vw', 'vh']"></StylePropertyControl>
 </template>
 <script setup lang="ts">
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import PropertyControl from "@/components/Controls/PropertyControl.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 
 defineProps<{
 	property: styleProperty;
diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index 0ae3ebe3d..2a286a6d1 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -14,10 +14,10 @@
 						:description="description"
 						:hideClearButton="labelPosition === 'top'"
 						@update:modelValue="setImageURL"
-						:modelValue="imageURL" />
+						:modelValue="currentImageURL" />
 					<img
 						v-if="labelPosition === 'left'"
-						:src="imageURL || '/assets/builder/images/fallback.png'"
+						:src="currentImageURL || '/assets/builder/images/fallback.png'"
 						alt=""
 						@click="togglePopover"
 						class="absolute bottom-[6px] left-2 h-4 w-4 rounded border border-outline-gray-3 shadow-sm"
@@ -28,7 +28,7 @@
 						v-if="labelPosition === 'top'"
 						@upload="setImageURL"
 						@remove="setImageURL('')"
-						:image_url="imageURL"
+						:image_url="currentImageURL"
 						class="absolute right-0 top-5 rounded-r-md bg-surface-gray-2 pl-2 dark:bg-transparent"
 						:file_types="['image/*']" />
 				</div>
@@ -46,7 +46,7 @@
 					<template v-slot="{ openFileSelector }">
 						<div class="group relative overflow-hidden rounded">
 							<img
-								:src="imageURL || '/assets/builder/images/fallback.png'"
+								:src="currentImageURL || '/assets/builder/images/fallback.png'"
 								alt=""
 								class="image-preview relative h-24 w-48 cursor-pointer bg-surface-gray-2"
 								:style="{
@@ -55,8 +55,8 @@
 							<div
 								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-surface-gray-4 bg-opacity-20"
 								:class="{
-									'!grid': !imageURL,
-									'group-hover:grid': imageURL,
+									'!grid': !currentImageURL,
+									'group-hover:grid': currentImageURL,
 								}">
 								<BuilderButton variant="subtle" @click="openFileSelector">Upload</BuilderButton>
 							</div>
@@ -79,10 +79,12 @@ import ImageUploader from "@/components/Controls/ImageUploader.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import InputLabel from "@/components/Controls/InputLabel.vue";
 import { FileUploader, Popover } from "frappe-ui";
+import { computed } from "vue";
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		imageURL?: string;
+		modelValue?: string;
 		label?: string;
 		labelPosition?: "top" | "left";
 		placeholder?: string;
@@ -98,10 +100,11 @@ withDefaults(
 	},
 );
 
-const emit = defineEmits(["update:imageURL", "update:imageFit"]);
+const currentImageURL = computed(() => props.modelValue || "");
+const emit = defineEmits(["update:imageFit", "update:modelValue"]);
 
 const setImageURL = (fileURL: string) => {
-	emit("update:imageURL", fileURL);
+	emit("update:modelValue", fileURL);
 };
 
 const setImageFit = (fit: string) => {
diff --git a/frontend/src/components/Settings/PageMeta.vue b/frontend/src/components/Settings/PageMeta.vue
index 67941b8ff..8bbabd4e8 100644
--- a/frontend/src/components/Settings/PageMeta.vue
+++ b/frontend/src/components/Settings/PageMeta.vue
@@ -19,12 +19,12 @@
 				</div>
 				<div class="flex flex-1 flex-col justify-between gap-2">
 					<ImageUploadInput
-						:imageURL="pageStore.activePage?.meta_image"
+						:modelValue="pageStore.activePage?.meta_image"
 						label="Meta Image"
 						placeholder="Upload Meta Image"
 						labelPosition="top"
 						description="Recommended size: 1200 x 630 px; Page preview image is used as a fallback if Meta Image is not set"
-						@update:imageURL="
+						@update:modelValue="
 							(url: string) => pageStore.updateActivePage('meta_image', url)
 						"></ImageUploadInput>
 				</div>

From 902286b293bca6e8ad16576b120dca63d29108bf Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 16:09:37 +0530
Subject: [PATCH 315/547] fix: Adjust opacity of overlay for better visibility

---
 frontend/src/components/ImageUploadInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index 2a286a6d1..34b31e279 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -53,7 +53,7 @@
 									'object-fit': imageFit || 'contain',
 								}" />
 							<div
-								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-surface-gray-4 bg-opacity-20"
+								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-surface-gray-4 opacity-90"
 								:class="{
 									'!grid': !currentImageURL,
 									'group-hover:grid': currentImageURL,

From 614550d6d5be2aaaa141ab890cbfe95f5a470e83 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 16:32:19 +0530
Subject: [PATCH 316/547] fix: Update modelValue type to support both string
 and number

- Remove unnecessary props from BasePropertyControl
---
 frontend/src/components/Controls/BasePropertyControl.vue  | 3 ---
 frontend/src/components/Controls/PropertyControlInput.vue | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 252db70a9..f863d6d94 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -109,7 +109,6 @@ const props = withDefaults(
 		changeFactor?: number;
 		minValue?: number;
 		maxValue?: number | null;
-		hideClearButton?: boolean;
 		component?: Component;
 		events?: Record<string, unknown>;
 		defaultValue?: string | number;
@@ -121,14 +120,12 @@ const props = withDefaults(
 	}>(),
 	{
 		placeholder: "unset",
-		type: "text",
 		controlType: "style",
 		enableSlider: false,
 		unitOptions: () => [],
 		changeFactor: 1,
 		minValue: 0,
 		maxValue: null,
-		hideClearButton: false,
 		component: Input,
 		allowDynamicValue: false,
 		labelPlacement: "left",
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 0b889124c..0fd2a0633 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -44,7 +44,7 @@ defineProps<{
 	component: Component;
 	controlAttrs?: Record<string, unknown>;
 	events?: Record<string, unknown>;
-	modelValue: string;
+	modelValue: string | number;
 	defaultValue?: string | number;
 	placeholder?: string;
 	dynamicValue?: string;

From d561fa0a3c425df546dabdfb786fcbf2fbde5cc0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 17:04:08 +0530
Subject: [PATCH 317/547] feat: Copy variables as well while copying block

---
 frontend/src/block.ts                       | 29 ++++++++++
 frontend/src/utils/builderBlockCopyPaste.ts | 60 +++++++++++++++++++--
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index a2dd626ef..432a4b7f7 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -819,6 +819,35 @@ class Block implements BlockOptions {
 
 		return new Set(componentNames);
 	}
+	getUsedVariableNames() {
+		const variableNames = [] as string[];
+		const varPattern = /var\(--([a-zA-Z0-9_-]+)/g;
+
+		const extractVarsFromValue = (value: any) => {
+			if (!value || typeof value !== "string") return;
+			const matches = value.matchAll(varPattern);
+			for (const match of matches) {
+				variableNames.push(match[1]);
+			}
+		};
+
+		const styleObjects = [this.baseStyles, this.mobileStyles, this.tabletStyles, this.rawStyles];
+		styleObjects.forEach((styleObj) => {
+			if (styleObj) {
+				Object.values(styleObj).forEach(extractVarsFromValue);
+			}
+		});
+
+		if (this.innerHTML) {
+			extractVarsFromValue(this.innerHTML);
+		}
+
+		this.children.forEach((child) => {
+			variableNames.push(...child.getUsedVariableNames());
+		});
+
+		return new Set(variableNames);
+	}
 	isFlex() {
 		return this.getStyle("display") === "flex";
 	}
diff --git a/frontend/src/utils/builderBlockCopyPaste.ts b/frontend/src/utils/builderBlockCopyPaste.ts
index 1a85bbb4c..cb3369021 100644
--- a/frontend/src/utils/builderBlockCopyPaste.ts
+++ b/frontend/src/utils/builderBlockCopyPaste.ts
@@ -4,7 +4,9 @@ import useComponentStore from "@/stores/componentStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { BuilderVariable } from "@/types/Builder/BuilderVariable";
 
+import builderVariables from "@/data/builderVariable";
 import {
 	copyToClipboard,
 	detachBlockFromComponent,
@@ -27,8 +29,6 @@ type BuilderPageSettings = Pick<
 	| "page_name"
 	| "route"
 	| "dynamic_route"
-	| "is_template"
-	| "template_name"
 	| "page_data_script"
 	| "head_html"
 	| "body_html"
@@ -47,6 +47,7 @@ type BuilderPageSettings = Pick<
 interface BuilderClipboardData {
 	blocks: (Block | BlockOptions)[];
 	components: BuilderComponent[];
+	variables?: BuilderVariable[];
 	sourceURL?: string;
 	pageDoc?: BuilderPageSettings;
 	pageScripts?: BuilderClientScript[];
@@ -72,6 +73,7 @@ export function copyBuilderBlocks(
 	) as Block[];
 
 	const componentDocuments: BuilderComponent[] = [];
+	const variableNames = new Set<string>();
 	const blocksToCopy = blocks.map((block) => {
 		// Collect all used components
 		const components = block.getUsedComponentNames();
@@ -82,6 +84,11 @@ export function copyBuilderBlocks(
 			}
 		}
 
+		const variables = block.getUsedVariableNames();
+		for (const variableName of variables) {
+			variableNames.add(variableName);
+		}
+
 		// Handle component children and create copy
 		let blockCopy = null;
 		if (!Boolean(block.extendedFromComponent) && block.isChildOfComponent) {
@@ -93,9 +100,21 @@ export function copyBuilderBlocks(
 		return blockCopy;
 	});
 
+	const variableDocuments: BuilderVariable[] = [];
+	for (const variableName of variableNames) {
+		const variable = builderVariables.data?.find(
+			(v: BuilderVariable) =>
+				v.variable_name?.replace(/[\s_]/g, "-").toLowerCase() === variableName.toLowerCase(),
+		);
+		if (variable) {
+			variableDocuments.push(variable);
+		}
+	}
+
 	const dataToCopy: BuilderClipboardData = {
 		blocks: blocksToCopy,
 		components: componentDocuments,
+		variables: variableDocuments,
 		sourceURL: currentSiteURL,
 	};
 
@@ -138,14 +157,17 @@ export async function pasteBuilderBlocks(e: ClipboardEvent, currentSiteURL: stri
 	if (clipboardData.pageDoc) {
 		await handlePagePaste(clipboardData, crossSitePaste, currentSiteURL);
 	} else {
-		if (clipboardData.components.length) {
+		if (clipboardData.components.length || clipboardData.variables?.length) {
 			toast.loading("Pasting...", {
 				id: "paste-blocks",
 			});
 			await handleComponents(clipboardData, crossSitePaste);
+			if (clipboardData.variables?.length) {
+				await handleVariables(clipboardData, crossSitePaste);
+			}
 		}
 		await insertBlocks(clipboardData.blocks);
-		clipboardData.components.length &&
+		(clipboardData.components.length || clipboardData.variables?.length) &&
 			toast.success("Done", {
 				id: "paste-blocks",
 			});
@@ -206,6 +228,36 @@ async function handlePagePaste(
 	});
 }
 
+async function handleVariables(clipboardData: BuilderClipboardData, crossSitePaste: boolean) {
+	for (const variable of clipboardData.variables || []) {
+		if (crossSitePaste) {
+			const originalName = variable.name;
+			const newName = generateHash(originalName, clipboardData.sourceURL || "");
+			variable.name = newName;
+			try {
+				await builderVariables.insert.submit(variable);
+			} catch (error: any) {
+				if (error?.response?.status === 409) {
+					await builderVariables.setValue.submit(variable);
+				}
+			}
+		} else {
+			const existingVariable = builderVariables.data?.find(
+				(v: BuilderVariable) => v.variable_name === variable.variable_name,
+			);
+			if (!existingVariable) {
+				try {
+					await builderVariables.insert.submit(variable);
+				} catch (error: any) {
+					if (error?.response?.status !== 409) {
+						console.error("Error inserting variable:", error);
+					}
+				}
+			}
+		}
+	}
+}
+
 async function handleComponents(clipboardData: BuilderClipboardData, crossSitePaste: boolean) {
 	const componentStore = useComponentStore();
 	const componentIdMap = new Map<string, string>();

From 6e816be35c7e021dc5556ae0fc779e743d0a4097 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 22 Jan 2026 20:15:24 +0530
Subject: [PATCH 318/547] fix: Set "display: contents" to picture - so that img
 tag does not treat picture as parent

---
 builder/builder/doctype/builder_page/builder_page.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c569d0a66..85124abc4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -543,6 +543,7 @@ def get_tag(block, soup, data_key=None):
 					dark_source["srcset"] = dark_src
 					dark_source["media"] = "(prefers-color-scheme: dark)"
 					picture_tag.append(dark_source)
+					picture_tag.attrs["style"] = "display: contents;"
 
 					tag = soup.new_tag("img")
 					tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}

From f0a260132d8eee6a39869be6b25b83ad1e6b7c1c Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 22 Jan 2026 21:31:18 +0530
Subject: [PATCH 319/547] tests: covering repeaters and block client scripts
 and visibility conditions

---
 .../doctype/builder_page/test_builder_page.py | 213 ++++++++++++++++++
 builder/utils.py                              |  13 +-
 2 files changed, 223 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 2b61e19b0..f600af58e 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -264,6 +264,64 @@ def test_component_dynamic_values(self):
 			page_with_component_having_bad_overrides.delete()
 			component.delete()
 
+	def test_visibility_key_page_data(self):
+		body = Block(element="body")
+		header = Block(element="h1", innerHTML="Visible Header")
+		hidden_header = Block(element="h2", innerHTML="Hidden Header")
+
+		header.attach_visibility_condition({"key": "is_header_visible", "comesFrom": "dataScript"})
+		hidden_header.attach_visibility_condition("is_hidden_header_visible")
+
+		body.attach_children(header, hidden_header)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Visibility Key Test",
+				"published": 1,
+				"route": "/visibility-key-test",
+				"page_data_script": 'data.update({"is_header_visible": True,"is_hidden_header_visible": False})',
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+		try:
+			content = get_response_content("/visibility-key-test")
+			self.assertTrue("Visible Header" in get_html_for(content, "tag", "h1"))
+			self.assertFalse("Hidden Header" in get_html_for(content, "tag", "h2"))
+		finally:
+			page.delete()
+
+	def test_visibility_key_block_data(self):
+		body = Block(
+			element="body",
+			blockDataScript='block.update({"is_header_visible": True,"is_hidden_header_visible": False})',
+		)
+		header = Block(element="h1", innerHTML="Visible Header")
+		hidden_header = Block(element="h2", innerHTML="Hidden Header")
+
+		header.attach_visibility_condition({"key": "is_header_visible", "comesFrom": "blockDataScript"})
+		hidden_header.attach_visibility_condition(
+			{"key": "is_hidden_header_visible", "comesFrom": "blockDataScript"}
+		)
+
+		body.attach_children(header, hidden_header)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Visibility Key Test",
+				"published": 1,
+				"route": "/visibility-key-test-block-data",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+		try:
+			content = get_response_content("/visibility-key-test-block-data")
+			self.assertTrue("Visible Header" in get_html_for(content, "tag", "h1"))
+			self.assertFalse("Hidden Header" in get_html_for(content, "tag", "h2"))
+		finally:
+			page.delete()
+
 	def test_block_data(self):
 		body = Block(element="body")
 		wrapper = Block(element="div", blockDataScript=block_data_script)
@@ -297,6 +355,74 @@ def test_block_data(self):
 		finally:
 			page.delete()
 
+	def test_block_data_repeater(self):
+		body = Block(element="body")
+		repeater_block = Block(element="div", isRepeaterBlock=True, blockDataScript=block_data_script)
+		wrapper_div = Block(element="div")
+		item_name = Block(element="h2")
+		item_price = Block(element="span")
+
+		repeater_block.attach_data_key("items", "dataKey", comesFrom="blockDataScript")
+		item_name.attach_dynamic_values(
+			{"key": "name", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"}
+		)
+		item_price.attach_dynamic_values(
+			{"key": "price", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"}
+		)
+
+		wrapper_div.attach_children(item_name, item_price)
+		repeater_block.attach_children(wrapper_div)
+		body.attach_children(repeater_block)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Block Data Repeater Test",
+				"published": 1,
+				"route": "/block-data-repeater-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/block-data-repeater-test")
+			self.assertTrue("Item 1" in get_html_for(content, "tag", "h2"))
+			self.assertTrue("$10" in get_html_for(content, "tag", "span"))
+			self.assertTrue("Item 2" in get_html_for(content, "tag", "h2", index=1))
+			self.assertTrue("$20" in get_html_for(content, "tag", "span", index=1))
+
+		finally:
+			page.delete()
+
+	def test_block_client_script(self):
+		body = Block(element="body")
+		div_wrapper = Block(
+			element="div",
+			blockClientScript='console.log("Block Client Script Executed");\n',
+		)
+		content = Block(element="h4", innerHTML="Block Content")
+
+		div_wrapper.attach_children(content)
+		body.attach_children(div_wrapper)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Block Client Script Test",
+				"published": 1,
+				"route": "/block-client-script-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/block-client-script-test")
+			self.assertTrue(
+				'console.log("Block Client Script Executed");' in get_html_for(content, "tag", "script")
+			)
+		finally:
+			page.delete()
+
 	def test_block_props(self):
 		body = Block(element="body")
 		div_wrapper = Block(
@@ -368,6 +494,93 @@ def test_block_props(self):
 		finally:
 			page.delete()
 
+	def test_std_props_repeater(self):
+		comp_root = Block(
+			blockId="navbar-wrapper-block",
+			element="header",
+			blockName="navbar",
+			props={
+				"links": {
+					"label": "Links",
+					"isStandard": True,
+					"isDynamic": False,
+					"isPassedDown": True,
+					"comesFrom": None,
+					"value": None,
+					"standardOptions": {
+						"isRequired": False,
+						"type": "object",
+						"options": {
+							"minItems": None,
+							"maxItems": None,
+							"defaultValue": {
+								"1. Home": "/",
+								"2. Products": "/products",
+								"3. About Us": "/about",
+							},
+						},
+					},
+				}
+			},
+		)
+		comp_repeater_block = Block(
+			blockId="repeater-block",
+			element="nav",
+			blockName="nav",
+			isRepeaterBlock=True,
+		)
+		comp_repeater_block.attach_data_key("links", "innerHTML", type="key", comesFrom="props")
+		comp_link_block = Block(
+			blockId="link-block", element="a", innerHTML="Home", attributes={"href": "/home"}
+		)
+		comp_link_block.attach_dynamic_values(
+			{"property": "innerHTML", "type": "key", "key": "key", "comesFrom": "props"},
+			{"property": "href", "type": "attribute", "key": "value", "comesFrom": "props"},
+		)
+
+		comp_repeater_block.attach_children(comp_link_block)
+		comp_root.attach_children(comp_repeater_block)
+
+		component = frappe.get_doc(
+			{
+				"doctype": "Builder Component",
+				"block": comp_root.as_json(),
+			}
+		).insert()
+
+		body = Block(element="body")
+		comp_root_copy = Block(extendedFromComponent=component.name)
+		comp_repeater_block_copy = Block(
+			isChildOfComponent=component.name, referenceBlockId="repeater-block", isReapeaterBlock=True
+		)
+		comp_link_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="link-block")
+		comp_repeater_block_copy.attach_children(comp_link_block_copy)
+		comp_root_copy.attach_children(comp_repeater_block_copy)
+		body.attach_children(comp_root_copy)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Std Props Repeater Test",
+				"published": 1,
+				"route": "/block-std-props-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+		try:
+			content = get_response_content("/block-std-props-test")
+			self.assertEqual("1. Home", get_html_for(content, "tag", "a", only_content=True))
+			self.assertTrue('href="/"' in get_html_for(content, "tag", "a", only_content=False))
+			self.assertEqual("2. Products", get_html_for(content, "tag", "a", index=1, only_content=True))
+			self.assertTrue(
+				'href="/products"' in get_html_for(content, "tag", "a", index=1, only_content=False)
+			)
+			self.assertEqual("3. About Us", get_html_for(content, "tag", "a", index=2, only_content=True))
+			self.assertTrue('href="/about"' in get_html_for(content, "tag", "a", index=2, only_content=False))
+		finally:
+			page.delete()
+			component.delete()
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()
diff --git a/builder/utils.py b/builder/utils.py
index 6eb3931a9..2e168c178 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -29,7 +29,11 @@ class BlockDataKey:
 	key: str
 	property: str
 	type: str
+	comesFrom: str
 
+class VisibilityCondition:
+	key: str
+	comesFrom: str
 
 class Block:
 	blockId: str = ""
@@ -53,7 +57,7 @@ class Block:
 	isChildOfComponent: str | None = None
 	referenceBlockId: str | None = None
 	isRepeaterBlock: bool = False
-	visibilityCondition: str | None = None
+	visibilityCondition: str | VisibilityCondition | None = None
 	elementBeforeConversion: str | None = None
 	customAttributes: ClassVar[dict] = {}
 	dynamicValues: ClassVar[list[BlockDataKey]] = []
@@ -83,8 +87,8 @@ def attach_dynamic_values(self, *dynamic_values: BlockDataKey):
 	def clear_dynamic_values(self):
 		self.dynamicValues = []
 
-	def attach_data_key(self, key: str, property: str, type: str = "key"):
-		self.dataKey = {"key": key, "property": property, "type": type}
+	def attach_data_key(self, key: str, property: str, type: str = "key", comesFrom: str = "dataScript"):
+		self.dataKey = {"key": key, "property": property, "type": type, "comesFrom": comesFrom}
 
 	def clear_data_key(self):
 		self.dataKey = None
@@ -94,6 +98,9 @@ def attach_children(self, *children: "Block"):
 			self.children = []
 		self.children.extend(children)
 
+	def attach_visibility_condition(self, condition: VisibilityCondition | str):
+		self.visibilityCondition = condition
+
 	def as_dict(self):
 		return {
 			"blockId": self.blockId,

From 8715e03ae4e48b9ddbe0b71c71e3c566b953a9d8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 23 Jan 2026 11:38:15 +0530
Subject: [PATCH 320/547] perf: Move isDark to builderCanvas - to avoid force
 rerender each time isDark is initiated inside block

---
 frontend/src/App.vue                      | 7 ++-----
 frontend/src/components/BuilderBlock.vue  | 9 +++------
 frontend/src/components/BuilderCanvas.vue | 6 +-----
 frontend/src/stores/builderStore.ts       | 5 ++++-
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e682ca090..8730ef7ad 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,7 @@
 			</keep-alive>
 		</router-view>
 		<UseDark attribute="data-theme"></UseDark>
-		<Toaster :theme="isDark ? 'dark' : 'light'" richColors class="mr-10" />
+		<Toaster :theme="builderStore.isDark ? 'dark' : 'light'" richColors class="mr-10" />
 		<Dialogs></Dialogs>
 		<component v-for="dialog in builderStore.appDialogs" :is="dialog"></component>
 	</div>
@@ -15,7 +15,7 @@
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { UseDark } from "@vueuse/components";
-import { useDark, useTitle } from "@vueuse/core";
+import { useTitle } from "@vueuse/core";
 import { Dialogs } from "frappe-ui";
 import { computed, provide } from "vue";
 import { useRoute } from "vue-router";
@@ -26,9 +26,6 @@ import { sessionUser } from "./router";
 const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 const route = useRoute();
-const isDark = useDark({
-	attribute: "data-theme",
-});
 
 provide("sessionUser", sessionUser);
 
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 337ce5cc7..3bcb40aec 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -36,21 +36,18 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
+import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
 import { getDataForKey } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
-import { useDark } from "@vueuse/core";
 import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch, watchEffect } from "vue";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
 
-const isDark = useDark({
-	attribute: "data-theme",
-});
-
+const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
@@ -114,7 +111,7 @@ const attributes = computed(() => {
 	const attribs = { ...props.block.getAttributes(), ...attrs } as { [key: string]: any };
 
 	if (props.block.isImage() && !props.preview) {
-		if (isDark.value && attribs.darkSrc) {
+		if (builderStore.isDark && attribs.darkSrc) {
 			attribs.src = attribs.darkSrc;
 		}
 		delete attribs.darkSrc;
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index db5c65df2..87b49e1bc 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -106,7 +106,6 @@ import { useBuilderVariable } from "@/utils/useBuilderVariable";
 import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
 import { useCanvasEvents } from "@/utils/useCanvasEvents";
 import { useCanvasUtils } from "@/utils/useCanvasUtils";
-import { useDark } from "@vueuse/core";
 import { FeatherIcon } from "frappe-ui";
 import { Ref, computed, onMounted, provide, reactive, ref, watch } from "vue";
 import setPanAndZoom from "../utils/panAndZoom";
@@ -118,14 +117,11 @@ const builderStore = useBuilderStore();
 const pageStore = usePageStore();
 
 const { cssVariables, darkCssVariables } = useBuilderVariable();
-const isDark = useDark({
-	attribute: "data-theme",
-});
 
 const variables = computed(() => {
 	return {
 		...cssVariables.value,
-		...(isDark.value ? darkCssVariables.value : {}),
+		...(builderStore.isDark ? darkCssVariables.value : {}),
 	};
 });
 
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index 37cdc649c..c468a3791 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -2,7 +2,7 @@ import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import { builderSettings } from "@/data/builderSettings";
 import { BuilderSettings } from "@/types/Builder/BuilderSettings";
 import RealTimeHandler from "@/utils/realtimeHandler";
-import { useStorage } from "@vueuse/core";
+import { useDark, useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { toast } from "vue-sonner";
 import type Dialog from "../components/Controls/Dialog.vue";
@@ -41,6 +41,9 @@ const useBuilderStore = defineStore("builderStore", {
 		viewers: <UserInfo[]>[],
 		isFCSite: window.is_fc_site === "True" ? true : false,
 		activeFolder: useStorage("activeFolder", ""),
+		isDark: useDark({
+			attribute: "data-theme",
+		}),
 	}),
 	actions: {
 		toggleReadOnlyMode(readonly: boolean | null = null) {

From 9ec5deb0757663fdbba06ccb9ef971a0508312d0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 18:04:56 +0530
Subject: [PATCH 321/547] refactor(tests): better names and function calls

---
 .../doctype/builder_page/test_builder_page.py | 146 ++++++++----------
 builder/utils.py                              |  19 ++-
 2 files changed, 75 insertions(+), 90 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index f600af58e..3061c7dab 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -51,26 +51,22 @@ def setUpClass(cls):
 				"page_title": "Test Page",
 				"published": 1,
 				"route": "/test-page",
-				"blocks": json.dumps(
-					[
+				"blocks": Block(
+					element="body",
+					baseStyles={"background": "red", "fontFamily": "Inter"},
+					customAttributes={"dir": "ltr"},
+					children=[
 						Block(
-							element="body",
-							baseStyles={"background": "red", "fontFamily": "Inter"},
-							customAttributes={"dir": "ltr"},
-							children=[
-								Block(
-									element="h1",
-									innerHTML="Hello World!",
-									baseStyles={
-										"color": "blue",
-										"fontFamily": "Comic Sans MS",
-										"fontWeight": "500",
-									},
-								)
-							],
-						).as_dict()
-					]
-				),
+							element="h1",
+							innerHTML="Hello World!",
+							baseStyles={
+								"color": "blue",
+								"fontFamily": "Comic Sans MS",
+								"fontWeight": "500",
+							},
+						)
+					],
+				).as_json(wrap_in_array=True),
 			}
 		).insert(ignore_if_duplicate=True)
 		cls.page_with_dynamic_route = frappe.get_doc(
@@ -80,13 +76,9 @@ def setUpClass(cls):
 				"published": 1,
 				"route": "/test-page-dynamic-route/<name>",
 				"dynamic_route": 1,
-				"blocks": json.dumps(
-					[
-						Block(
-							element="body", children=[Block(element="h1", innerHTML="Dynamic Content!")]
-						).as_dict()
-					]
-				),
+				"blocks": Block(
+					element="body", children=[Block(element="h1", innerHTML="Dynamic Content!")]
+				).as_json(wrap_in_array=True),
 			}
 		).insert(ignore_if_duplicate=True)
 
@@ -121,13 +113,12 @@ def test_dynamic_values(self):
 		sub_header = Block(element="h2", innerHTML="Content")
 		link = Block(element="a", innerHTML="Link")
 
-		header.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
-		sub_header.attach_dynamic_values(
-			{"key": "color", "type": "style", "property": "color"},
-			{"key": "padding", "type": "style", "property": "padding"},
-		)
-		link.attach_dynamic_values({"key": "link", "type": "attribute", "property": "href"})
+		header.set_dynamic_value("name", "key", "innerHTML")
 
+		sub_header.set_dynamic_value("color", "style", "color")
+		sub_header.set_dynamic_value("padding", "style", "padding")
+
+		link.set_dynamic_value("link", "attribute", "href")
 		body.attach_children(header, sub_header, link)
 
 		page = frappe.get_doc(
@@ -157,8 +148,8 @@ def test_repeater_block_dynamic_values(self):
 		item_price = Block(element="span")
 
 		repeater_block.attach_data_key("items", "dataKey")
-		item_name.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
-		item_price.attach_dynamic_values({"key": "price", "type": "key", "property": "innerHTML"})
+		item_name.set_dynamic_value("name", "key", "innerHTML")
+		item_price.set_dynamic_value("price", "key", "innerHTML")
 
 		wrapper_div.attach_children(item_name, item_price)
 		repeater_block.attach_children(wrapper_div)
@@ -186,25 +177,27 @@ def test_repeater_block_dynamic_values(self):
 			page.delete()
 
 	def test_component_dynamic_values(self):
-		comp_root = Block(element="div", blockId="comp-block-1")
-		comp_name = Block(element="h1", blockId="comp-block-1-1", innerHTML="Hello")
+		"Test if dynamic values in component are overridden correctly by the page using it"
+		component_root = Block(element="div", blockId="comp-block-1")
+		component_header = Block(element="h1", blockId="comp-block-1-1", innerHTML="Fallback Content")
 
-		comp_name.attach_dynamic_values({"key": "name", "type": "key", "property": "innerHTML"})
-		comp_root.attach_children(comp_name)
+		component_header.set_dynamic_value("name", "key", "innerHTML")
+		component_root.attach_children(component_header)
 		component = frappe.get_doc(
 			{
 				"doctype": "Builder Component",
-				"block": comp_root.as_json(),
+				"block": component_root.as_json(),
 			}
 		).insert()
 
 		body = Block(element="body")
-		comp_root_copy = Block(extendedFromComponent=component.name)
-		comp_name_copy = Block(isChildOfComponent=component.name, referenceBlockId="comp-block-1-1")
+		component_root_copy = Block(extendedFromComponent=component.name)
+		component_header_copy = Block(isChildOfComponent=component.name, referenceBlockId="comp-block-1-1")
 
-		comp_root_copy.attach_children(comp_name_copy)
-		body.attach_children(comp_root_copy)
+		component_root_copy.attach_children(component_header_copy)
+		body.attach_children(component_root_copy)
 
+		# Using a component with dynamic values without any overrides
 		page_with_component_no_overrides = frappe.get_doc(
 			{
 				"doctype": "Builder Page",
@@ -216,7 +209,8 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		comp_name_copy.attach_dynamic_values({"key": "name_new", "type": "key", "property": "innerHTML"})
+		# Using a component with dynamic values with valid overrides to the dynamic values
+		component_header_copy.set_dynamic_value("name_new", "key", "innerHTML")
 
 		page_with_component_having_overrides = frappe.get_doc(
 			{
@@ -229,10 +223,9 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		comp_name_copy.clear_dynamic_values()
-		comp_name_copy.attach_dynamic_values(
-			{"key": "non_existent_key", "type": "key", "property": "innerHTML"}
-		)
+		# Using a component with dynamic values with invalid overrides to the dynamic values
+		component_header_copy.clear_dynamic_values()
+		component_header_copy.set_dynamic_value("non_existent_key", "key", "innerHTML")
 
 		page_with_component_having_bad_overrides = frappe.get_doc(
 			{
@@ -256,7 +249,7 @@ def test_component_dynamic_values(self):
 			)
 			self.assertEqual("Jane Doe", get_html_for(content_with_overrides, "tag", "h1", only_content=True))
 			self.assertEqual(
-				"Hello", get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True)
+				"Fallback Content", get_html_for(content_with_bad_overrides, "tag", "h1", only_content=True)
 			)
 		finally:
 			page_with_component_no_overrides.delete()
@@ -264,13 +257,13 @@ def test_component_dynamic_values(self):
 			page_with_component_having_bad_overrides.delete()
 			component.delete()
 
-	def test_visibility_key_page_data(self):
+	def test_visibility_condition_from_page_data(self):
 		body = Block(element="body")
 		header = Block(element="h1", innerHTML="Visible Header")
 		hidden_header = Block(element="h2", innerHTML="Hidden Header")
 
-		header.attach_visibility_condition({"key": "is_header_visible", "comesFrom": "dataScript"})
-		hidden_header.attach_visibility_condition("is_hidden_header_visible")
+		header.visibilityCondition = {"key": "is_header_visible", "comesFrom": "dataScript"}
+		hidden_header.visibilityCondition = {"key": "is_hidden_header_visible", "comesFrom": "dataScript"}
 
 		body.attach_children(header, hidden_header)
 
@@ -291,7 +284,7 @@ def test_visibility_key_page_data(self):
 		finally:
 			page.delete()
 
-	def test_visibility_key_block_data(self):
+	def test_visibility_condition_from_block_data(self):
 		body = Block(
 			element="body",
 			blockDataScript='block.update({"is_header_visible": True,"is_hidden_header_visible": False})',
@@ -299,10 +292,11 @@ def test_visibility_key_block_data(self):
 		header = Block(element="h1", innerHTML="Visible Header")
 		hidden_header = Block(element="h2", innerHTML="Hidden Header")
 
-		header.attach_visibility_condition({"key": "is_header_visible", "comesFrom": "blockDataScript"})
-		hidden_header.attach_visibility_condition(
-			{"key": "is_hidden_header_visible", "comesFrom": "blockDataScript"}
-		)
+		header.visibilityCondition = {"key": "is_header_visible", "comesFrom": "blockDataScript"}
+		hidden_header.visibilityCondition = {
+			"key": "is_hidden_header_visible",
+			"comesFrom": "blockDataScript",
+		}
 
 		body.attach_children(header, hidden_header)
 
@@ -328,12 +322,8 @@ def test_block_data(self):
 		content_dynamic = Block(element="h4", innerHTML="Block Content")
 		content_fallback = Block(element="h4", innerHTML="Block Content")
 
-		content_dynamic.attach_dynamic_values(
-			{"key": "content", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"},
-		)
-		content_fallback.attach_dynamic_values(
-			{"key": "no_key", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"},
-		)
+		content_dynamic.set_dynamic_value("content", "key", "innerHTML", "blockDataScript")
+		content_fallback.set_dynamic_value("no_key", "key", "innerHTML", "blockDataScript")
 
 		wrapper.attach_children(content_dynamic, content_fallback)
 		body.attach_children(wrapper)
@@ -355,7 +345,7 @@ def test_block_data(self):
 		finally:
 			page.delete()
 
-	def test_block_data_repeater(self):
+	def test_repeater_from_block_data(self):
 		body = Block(element="body")
 		repeater_block = Block(element="div", isRepeaterBlock=True, blockDataScript=block_data_script)
 		wrapper_div = Block(element="div")
@@ -363,12 +353,8 @@ def test_block_data_repeater(self):
 		item_price = Block(element="span")
 
 		repeater_block.attach_data_key("items", "dataKey", comesFrom="blockDataScript")
-		item_name.attach_dynamic_values(
-			{"key": "name", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"}
-		)
-		item_price.attach_dynamic_values(
-			{"key": "price", "type": "key", "property": "innerHTML", "comesFrom": "blockDataScript"}
-		)
+		item_name.set_dynamic_value("name", "key", "innerHTML", "blockDataScript")
+		item_price.set_dynamic_value("price", "key", "innerHTML", "blockDataScript")
 
 		wrapper_div.attach_children(item_name, item_price)
 		repeater_block.attach_children(wrapper_div)
@@ -459,15 +445,9 @@ def test_block_props(self):
 		)
 		content_fallback = Block(element="h4", innerHTML="Block Props Content")
 
-		content_static_prop.attach_dynamic_values(
-			{"key": "first_name", "type": "key", "property": "innerHTML", "comesFrom": "props"},
-		)
-		content_dynamic_prop.attach_dynamic_values(
-			{"key": "content", "type": "key", "property": "innerHTML", "comesFrom": "props"},
-		)
-		content_fallback.attach_dynamic_values(
-			{"key": "last_name", "type": "key", "property": "innerHTML", "comesFrom": "props"},
-		)
+		content_static_prop.set_dynamic_value("first_name", "key", "innerHTML", "props")
+		content_dynamic_prop.set_dynamic_value("content", "key", "innerHTML", "props")
+		content_fallback.set_dynamic_value("last_name", "key", "innerHTML", "props")
 
 		div_wrapper.attach_children(content_static_prop, content_dynamic_prop, content_fallback)
 		body.attach_children(div_wrapper)
@@ -494,7 +474,7 @@ def test_block_props(self):
 		finally:
 			page.delete()
 
-	def test_std_props_repeater(self):
+	def test_repeater_from_std_props(self):
 		comp_root = Block(
 			blockId="navbar-wrapper-block",
 			element="header",
@@ -533,10 +513,8 @@ def test_std_props_repeater(self):
 		comp_link_block = Block(
 			blockId="link-block", element="a", innerHTML="Home", attributes={"href": "/home"}
 		)
-		comp_link_block.attach_dynamic_values(
-			{"property": "innerHTML", "type": "key", "key": "key", "comesFrom": "props"},
-			{"property": "href", "type": "attribute", "key": "value", "comesFrom": "props"},
-		)
+		comp_link_block.set_dynamic_value("key", "key", "innerHTML")
+		comp_link_block.set_dynamic_value("value", "attribute", "href")
 
 		comp_repeater_block.attach_children(comp_link_block)
 		comp_root.attach_children(comp_repeater_block)
diff --git a/builder/utils.py b/builder/utils.py
index 2e168c178..1042bbbd5 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -31,10 +31,12 @@ class BlockDataKey:
 	type: str
 	comesFrom: str
 
+
 class VisibilityCondition:
 	key: str
 	comesFrom: str
 
+
 class Block:
 	blockId: str = ""
 	from typing import ClassVar
@@ -75,14 +77,19 @@ def __init__(self, **kwargs) -> None:
 
 			setattr(self, key, value)
 
-	@classmethod
-	def from_block(cls, block: "Block") -> "Block":
-		return cls(**block.as_dict())
-
-	def attach_dynamic_values(self, *dynamic_values: BlockDataKey):
+	def set_dynamic_value(self, key: str, type: str, property: str, comesFrom: str = "dataScript"):
 		if not self.dynamicValues:
 			self.dynamicValues = []
-		self.dynamicValues.extend(dynamic_values)
+		for i, dv in enumerate(self.dynamicValues):
+			if dv["property"] == property and dv["type"] == type:
+				self.dynamicValues[i] = {
+					"key": key,
+					"type": type,
+					"property": property,
+					"comesFrom": comesFrom,
+				}
+				return
+		self.dynamicValues.append({"key": key, "type": type, "property": property, "comesFrom": comesFrom})
 
 	def clear_dynamic_values(self):
 		self.dynamicValues = []

From 8225934fce78d0954affd47b57641e169a1967ca Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 18:24:51 +0530
Subject: [PATCH 322/547] fix: default value parsing in interpret_prop_value
 function

---
 builder/builder/doctype/builder_page/builder_page.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 0a66ec11b..48b98aec5 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -641,7 +641,10 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 
 	default_value = None
 	if is_standard:
-		default_value = prop_config.get("standardOptions", {}).get("options", {}).get("defaultValue")
+		prop_type = prop_config.get("standardOptions", {}).get("type")
+		default_value = parse_static_value(
+			prop_config.get("standardOptions", {}).get("options", {}).get("defaultValue"), prop_type
+		)
 
 	if value is None:
 		return default_value if is_standard else "undefined"
@@ -651,7 +654,7 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 
 	if is_standard:
 		prop_type = prop_config.get("standardOptions", {}).get("type")
-		value = parse_static_value(value or default_value, prop_type)
+		value = parse_static_value(value, prop_type)
 
 	return value if value is not None else "undefined"
 

From 310548bbb64d44b284251e9b593310d8576f59a1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 18:52:42 +0530
Subject: [PATCH 323/547] tests: covering parsing static values for std. props

---
 .../doctype/builder_page/test_builder_page.py | 200 ++++++++++++++++--
 1 file changed, 184 insertions(+), 16 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 3061c7dab..0af02ce18 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -474,8 +474,176 @@ def test_block_props(self):
 		finally:
 			page.delete()
 
+	def test_std_props(self):
+		component_root = Block(
+			blockId="header-block",
+			element="header",
+			blockName="header",
+			props={
+				"title": {
+					"label": "Title",
+					"isStandard": True,
+					"isDynamic": False,
+					"isPassedDown": True,
+					"comesFrom": None,
+					"value": None,
+					"standardOptions": {
+						"isRequired": False,
+						"type": "string",
+						"options": {"defaultValue": "Default Header Title"},
+					},
+				},
+				"age": {
+					"label": "Age",
+					"isStandard": True,
+					"isDynamic": False,
+					"isPassedDown": True,
+					"comesFrom": None,
+					"value": None,
+					"standardOptions": {
+						"isRequired": False,
+						"type": "number",
+						"options": {"defaultValue": 25},
+					},
+				},
+				"show_badge": {
+					"label": "Show Badge",
+					"isStandard": True,
+					"isDynamic": False,
+					"isPassedDown": True,
+					"comesFrom": None,
+					"value": None,
+					"standardOptions": {
+						"isRequired": False,
+						"type": "boolean",
+						"options": {"defaultValue": False},
+					},
+				},
+			},
+		)
+
+		component_title_block = Block(blockId="title-block", element="h1", innerHTML="Header Title")
+		component_title_block.set_dynamic_value("title", "key", "innerHTML", "props")
+
+		component_age_block = Block(blockId="age-block", element="h4", innerHTML="Age")
+		component_age_block.set_dynamic_value("age", "key", "innerHTML", "props")
+
+		component_badge_block = Block(blockId="badge-block", element="h6", innerHTML="Badge")
+		component_badge_block.visibilityCondition = {
+			"key": "show_badge",
+			"comesFrom": "props",
+		}
+
+		component_root.attach_children(component_title_block, component_age_block, component_badge_block)
+		component = frappe.get_doc(
+			{
+				"doctype": "Builder Component",
+				"block": component_root.as_json(),
+			}
+		).insert()
+
+		body = Block(element="body")
+
+		component_root_copy = Block(extendedFromComponent=component.name)
+		component_title_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="title-block")
+		component_age_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="age-block")
+		component_badge_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="badge-block")
+
+		component_root_copy.attach_children(
+			component_title_block_copy, component_age_block_copy, component_badge_block_copy
+		)
+		body.attach_children(component_root_copy)
+
+		page_with_default_values = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Std Props Test",
+				"published": 1,
+				"route": "/block-std-props-test-no-overrides",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		component_root_copy.props = {
+			"title": {
+				"label": "Title",
+				"isStandard": True,
+				"isDynamic": False,
+				"isPassedDown": True,
+				"comesFrom": None,
+				"value": "Overridden Header Title",
+				"standardOptions": {
+					"isRequired": False,
+					"type": "string",
+					"options": {"defaultValue": "Default Header Title"},
+				},
+			},
+			"age": {
+				"label": "Age",
+				"isStandard": True,
+				"isDynamic": False,
+				"isPassedDown": True,
+				"comesFrom": None,
+				"value": 29,
+				"standardOptions": {
+					"isRequired": False,
+					"type": "number",
+					"options": {"defaultValue": 25},
+				},
+			},
+			"show_badge": {
+				"label": "Show Badge",
+				"isStandard": True,
+				"isDynamic": False,
+				"isPassedDown": True,
+				"comesFrom": None,
+				"value": True,
+				"standardOptions": {
+					"isRequired": False,
+					"type": "boolean",
+					"options": {"defaultValue": False},
+				},
+			},
+		}
+
+		page_with_overridden_values = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Std Props Test With Overrides",
+				"published": 1,
+				"route": "/block-std-props-test-overrides",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content_with_default_values = get_response_content("/block-std-props-test-no-overrides")
+			content_with_overridden_values = get_response_content("/block-std-props-test-overrides")
+
+			self.assertEqual(
+				"Default Header Title",
+				get_html_for(content_with_default_values, "tag", "h1", only_content=True),
+			)
+			self.assertEqual(
+				"25.0", get_html_for(content_with_default_values, "tag", "h4", only_content=True)
+			)
+			self.assertFalse("Badge" in get_html_for(content_with_default_values, "tag", "h6"))
+
+			self.assertEqual(
+				"Overridden Header Title",
+				get_html_for(content_with_overridden_values, "tag", "h1", only_content=True),
+			)
+			self.assertEqual(
+				"29.0", get_html_for(content_with_overridden_values, "tag", "h4", only_content=True)
+			)
+			self.assertTrue("Badge" in get_html_for(content_with_overridden_values, "tag", "h6"))
+		finally:
+			page_with_default_values.delete()
+			page_with_overridden_values.delete()
+			component.delete()
+
 	def test_repeater_from_std_props(self):
-		comp_root = Block(
+		component_root = Block(
 			blockId="navbar-wrapper-block",
 			element="header",
 			blockName="navbar",
@@ -503,38 +671,38 @@ def test_repeater_from_std_props(self):
 				}
 			},
 		)
-		comp_repeater_block = Block(
+		component_repeater_block = Block(
 			blockId="repeater-block",
 			element="nav",
 			blockName="nav",
 			isRepeaterBlock=True,
 		)
-		comp_repeater_block.attach_data_key("links", "innerHTML", type="key", comesFrom="props")
-		comp_link_block = Block(
+		component_repeater_block.attach_data_key("links", "innerHTML", type="key", comesFrom="props")
+		component_link_block = Block(
 			blockId="link-block", element="a", innerHTML="Home", attributes={"href": "/home"}
 		)
-		comp_link_block.set_dynamic_value("key", "key", "innerHTML")
-		comp_link_block.set_dynamic_value("value", "attribute", "href")
+		component_link_block.set_dynamic_value("key", "key", "innerHTML")
+		component_link_block.set_dynamic_value("value", "attribute", "href")
 
-		comp_repeater_block.attach_children(comp_link_block)
-		comp_root.attach_children(comp_repeater_block)
+		component_repeater_block.attach_children(component_link_block)
+		component_root.attach_children(component_repeater_block)
 
 		component = frappe.get_doc(
 			{
 				"doctype": "Builder Component",
-				"block": comp_root.as_json(),
+				"block": component_root.as_json(),
 			}
 		).insert()
 
 		body = Block(element="body")
-		comp_root_copy = Block(extendedFromComponent=component.name)
-		comp_repeater_block_copy = Block(
-			isChildOfComponent=component.name, referenceBlockId="repeater-block", isReapeaterBlock=True
+		component_root_copy = Block(extendedFromComponent=component.name)
+		component_repeater_block_copy = Block(
+			isChildOfComponent=component.name, referenceBlockId="repeater-block", isRepeaterBlock=True
 		)
-		comp_link_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="link-block")
-		comp_repeater_block_copy.attach_children(comp_link_block_copy)
-		comp_root_copy.attach_children(comp_repeater_block_copy)
-		body.attach_children(comp_root_copy)
+		component_link_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="link-block")
+		component_repeater_block_copy.attach_children(component_link_block_copy)
+		component_root_copy.attach_children(component_repeater_block_copy)
+		body.attach_children(component_root_copy)
 
 		page = frappe.get_doc(
 			{

From 66e66bb3318c827444ac283ce8b959bc89a0c32b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 18:53:17 +0530
Subject: [PATCH 324/547] fix: rename block_click_handlers to
 restrict_click_handlers in builder_settings.json

---
 .../builder/doctype/builder_settings/builder_settings.json    | 4 ++--
 builder/builder/doctype/builder_settings/builder_settings.py  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index ca16683d5..060e5a8f2 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -18,7 +18,7 @@
   "home_page",
   "developer_options_section",
   "execute_block_scripts_in_editor",
-  "block_click_handlers"
+  "restrict_click_handlers"
  ],
  "fields": [
   {
@@ -102,7 +102,7 @@
   },
   {
    "default": "1",
-   "fieldname": "block_click_handlers",
+   "fieldname": "restrict_click_handlers",
    "fieldtype": "Check",
    "label": "Restrict Click Handlers"
   }
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index 9111efb8c..6b056fdff 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -17,13 +17,13 @@ class BuilderSettings(Document):
 		from frappe.types import DF
 
 		auto_convert_images_to_webp: DF.Check
-		block_click_handlers: DF.Check
 		body_html: DF.Code | None
 		default_language: DF.Data | None
 		execute_block_scripts_in_editor: DF.Check
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		home_page: DF.Data | None
+		restrict_click_handlers: DF.Check
 		script: DF.Code | None
 		script_public_url: DF.ReadOnly | None
 		style: DF.Code | None

From 5f55a566aa343e01a9d421027f1538ae6993a693 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 18:57:10 +0530
Subject: [PATCH 325/547] refactor: removing unused code

---
 builder/hooks.py | 1 -
 builder/utils.py | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/builder/hooks.py b/builder/hooks.py
index 070ea50e1..fb902b05a 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -54,7 +54,6 @@
 # Jinja
 # ----------
 
-# add methods and filters to jinja environment
 # add methods and filters to jinja environment
 jinja = {
     "filters": [
diff --git a/builder/utils.py b/builder/utils.py
index 1042bbbd5..99e7b2b27 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -105,9 +105,6 @@ def attach_children(self, *children: "Block"):
 			self.children = []
 		self.children.extend(children)
 
-	def attach_visibility_condition(self, condition: VisibilityCondition | str):
-		self.visibilityCondition = condition
-
 	def as_dict(self):
 		return {
 			"blockId": self.blockId,

From b97fcb96f7d910023f5f129dcade7614e18ecf0a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 23 Jan 2026 21:32:26 +0530
Subject: [PATCH 326/547] refactor: Autocomplete makeFixed and fixTo merged
 into one prop

---
 .../src/components/Controls/Autocomplete.vue  | 37 +++++++++++--------
 .../src/components/Controls/ColorInput.vue    |  7 +---
 .../components/PropsOptions/ColorOptions.vue  |  6 +--
 .../src/components/PropsPopoverContent.vue    |  3 +-
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index d5619d2ea..38930e49c 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -38,11 +38,16 @@
 			<ComboboxContent
 				@after-enter="
 					() => {
-						fixedStyles = getFixedStyles();
+						fixedPositionStyles = getFixedPositionStyles();
 					}
 				"
-				:class="makeFixed ? 'fixed' : 'absolute'"
-				:style="fixedStyles"
+				@after-leave="
+					() => {
+						fixedPositionStyles = {};
+					}
+				"
+				:class="anchorSelector ? 'fixed' : 'absolute'"
+				:style="fixedPositionStyles"
 				ref="contentRef"
 				class="z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
 				<div class="overflow-y-auto p-1">
@@ -123,8 +128,7 @@ interface Props {
 	placeholder?: string;
 	showInputAsOption?: boolean;
 	actionButton?: ActionButton;
-	makeFixed?: boolean;
-	fixTo?: string;
+	anchorSelector?: string;
 	allowArbitraryValue?: boolean;
 }
 
@@ -132,7 +136,6 @@ const props = withDefaults(defineProps<Props>(), {
 	options: () => [],
 	placeholder: "Search",
 	showInputAsOption: false,
-	makeFixed: false,
 	allowArbitraryValue: true,
 });
 
@@ -149,7 +152,7 @@ const asyncOptions = ref<Option[]>([]);
 const hasValue = computed(() => props.modelValue != null && props.modelValue !== "");
 const comboboxInput = ref<ComponentPublicInstance | null>(null);
 const contentRef = ref<ComponentPublicInstance | null>(null);
-const fixedStyles = ref({});
+const fixedPositionStyles = ref({});
 const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
 const displayOptions = computed(() => {
@@ -223,7 +226,6 @@ const handleBlur = (event: FocusEvent) => {
 		return;
 	}
 	if (props.allowArbitraryValue) submitArbitraryValue(getInputValue(event));
-	fixedStyles.value = {};
 	emit("blur");
 };
 
@@ -237,10 +239,10 @@ if (props.getOptions) refreshOptions();
 
 // in Popover, absolute positioning keeps all options within the Popover taking extra space
 // making it fixed makes it float above Popover container
-const getFixedStyles = () => {
-	if (props.makeFixed && props.fixTo) {
+const getFixedPositionStyles = () => {
+	if (props.anchorSelector) {
 		const fixedToElRect = (
-			comboboxInput.value?.$el.closest(props.fixTo) as HTMLElement
+			comboboxInput.value?.$el.closest(props.anchorSelector) as HTMLElement
 		)?.getBoundingClientRect();
 		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
 		const contentRect = contentRef.value?.$el?.getBoundingClientRect
@@ -252,13 +254,16 @@ const getFixedStyles = () => {
 		// Calculate top position based on available space: if there's not enough space below, position it above
 		const top =
 			contentRect && contentRect.top + contentRect?.height > window.innerHeight
-				? (fixedToElRect.bottom - comboboxInputRect.top + comboboxInputRect.height + 12) * -1
-				: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height;
+				? "unset"
+				: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height + "px";
+		const bottom =
+			contentRect && contentRect.top + contentRect?.height > window.innerHeight
+				? fixedToElRect.bottom - comboboxInputRect.top + 8 + "px"
+				: "unset";
 		return {
-			top: top + "px",
-			left: comboboxInputRect.left - fixedToElRect.left + "px",
+			top,
+			bottom,
 			width: comboboxInputRect.width + "px",
-			minWidth: "fit-content",
 			zIndex: "10",
 		};
 	}
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 278cb2c38..5d43f2fc3 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -25,8 +25,7 @@
 								}"
 								v-bind="events"
 								ref="colorInput"
-								:makeFixed
-								:fixTo
+								:anchorSelector
 								@keydown.enter="handleEnter"
 								@focus="togglePopover"
 								:placeholder="placeholder"
@@ -169,8 +168,7 @@ const props = withDefaults(
 		showColorVariableOptions?: boolean;
 		showPickerOnMount?: boolean;
 		popoverOffset?: number;
-		makeFixed?: boolean;
-		fixTo?: string;
+		anchorSelector?: string;
 	}>(),
 	{
 		modelValue: null,
@@ -178,7 +176,6 @@ const props = withDefaults(
 		placement: "left",
 		showColorVariableOptions: true,
 		showPickerOnMount: false,
-		makeFixed: false,
 	},
 );
 const lastValidValue = ref<string | null>(props.modelValue ?? null);
diff --git a/frontend/src/components/PropsOptions/ColorOptions.vue b/frontend/src/components/PropsOptions/ColorOptions.vue
index 5d1de1ba4..8cbe432d5 100644
--- a/frontend/src/components/PropsOptions/ColorOptions.vue
+++ b/frontend/src/components/PropsOptions/ColorOptions.vue
@@ -1,11 +1,10 @@
 <template>
 	<div class="flex items-center justify-between">
-		<InputLabel>Default Value</InputLabel>
 		<ColorInput
 			class="w-full"
-			fix-to=".props-popover-content"
+			label="Default Value"
+			anchorSelector=".props-popover-content"
 			placement="right"
-			:make-fixed="true"
 			:model-value="options.defaultValue"
 			@update:model-value="handleDefaultValueChange"
 			placeholder="Select default color"></ColorInput>
@@ -13,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import InputLabel from "@/components/Controls/InputLabel.vue";
 import { ref } from "vue";
 import ColorInput from "../Controls/ColorInput.vue";
 
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 4aa3f7e70..da79dbc17 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -45,8 +45,7 @@
 				@input="(val) => (value = val)"></Input>
 			<Autocomplete
 				v-else
-				:make-fixed="true"
-				fix-to=".props-popover-content"
+				anchorSelector=".props-popover-content"
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none"
 				ref="autoCompleteRef"
 				placeholder="Choose prop value"

From e74961aa7d1c51caa6ff2c3fafedcf1ab6993c05 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 24 Jan 2026 00:03:30 +0530
Subject: [PATCH 327/547] fix: unique_ids starting with numbers caused errors

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 48b98aec5..501279c72 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -911,7 +911,7 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 
 	# Add global function definition (only once)
 	if script_unique_id not in state["used_block_scripts"]:
-		state["global_script_tag"].append(f"function {script_unique_id}(props) {{{script}}}\n")
+		state["global_script_tag"].append(f"function client_script_{script_unique_id}(props) {{{script}}}\n")
 		state["used_block_scripts"].add(script_unique_id)
 
 	# Add data attribute for selecting this specific block
@@ -920,7 +920,7 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 	# Add local script to call the function
 	local_script = state["soup"].new_tag("script")
 	local_script.string = (
-		f"({script_unique_id}).call("
+		f"(client_script_{script_unique_id}).call("
 		f"document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), "
 		f"{{{{ props | to_safe_json }}}}"
 		f");"

From 55f8267abd5b5ab8b0c7498c04de435a0dd75d49 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 24 Jan 2026 22:34:49 +0530
Subject: [PATCH 328/547] fix: include passed down props while exec. block data
 scripts

---
 frontend/src/components/BuilderBlock.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 60f97250b..2f64f0876 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -354,18 +354,20 @@ const allResolvedProps = computed(() => {
 			}),
 		),
 		...Object.fromEntries(
-			Object.entries(props.block.getBlockProps()).map(([key, prop]) => {
-				return [
-					key,
-					getPropValue(
+			Object.entries({ ...props.block.getBlockProps(), ...getParentProps(props.block) }).map(
+				([key, prop]) => {
+					return [
 						key,
-						props.block,
-						getDataScriptValue,
-						(path: string) => getDataForKey({ ...props.blockData }, path), // block props can not refer to own block data items
-						props.defaultProps,
-					),
-				];
-			}),
+						getPropValue(
+							key,
+							props.block,
+							getDataScriptValue,
+							(path: string) => getDataForKey({ ...props.blockData }, path), // block props can not refer to own block data items
+							props.defaultProps,
+						),
+					];
+				},
+			),
 		),
 	};
 });

From ea3cb4e100ca27d5b4677b0e82680c7282d2d30a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 24 Jan 2026 22:36:32 +0530
Subject: [PATCH 329/547] feat: update execute_block_scripts_in_editor to use
 select options and implement restricted/unrestricted execution

---
 .../builder_settings/builder_settings.json    |  9 ++--
 .../builder_settings/builder_settings.py      |  2 +-
 frontend/src/components/BuilderBlock.vue      | 26 +++++++---
 .../components/Settings/GlobalDeveloper.vue   | 30 ++++++-----
 frontend/src/types/Builder/BuilderSettings.ts |  2 +-
 frontend/src/utils/helpers.ts                 | 52 +++++++++++++++++--
 6 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index 060e5a8f2..d65c28cdf 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -95,10 +95,11 @@
    "label": "Developer Options"
   },
   {
-   "default": "0",
+   "default": "Restricted",
    "fieldname": "execute_block_scripts_in_editor",
-   "fieldtype": "Check",
-   "label": "Execute Block Scripts in Editor"
+   "fieldtype": "Select",
+   "label": "Execute Block Scripts in Editor",
+   "options": "Don't Execute\nRestricted\nUnrestricted"
   },
   {
    "default": "1",
@@ -111,7 +112,7 @@
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2026-01-19 22:13:08.784598",
+ "modified": "2026-01-24 12:49:59.610151",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Settings",
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index 6b056fdff..6aac855b3 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -19,7 +19,7 @@ class BuilderSettings(Document):
 		auto_convert_images_to_webp: DF.Check
 		body_html: DF.Code | None
 		default_language: DF.Data | None
-		execute_block_scripts_in_editor: DF.Check
+		execute_block_scripts_in_editor: DF.Literal["Don't Execute", "Restricted", "Unrestricted"]
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		home_page: DF.Data | None
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 2f64f0876..3af56c9cc 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -41,7 +41,13 @@
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import { setFont } from "@/utils/fontManager";
-import { getDataForKey, getPropValue, saferExecuteBlockClientScript } from "@/utils/helpers";
+import {
+	executeBlockClientScriptRestricted,
+	executeBlockClientScriptUnrestricted,
+	getDataForKey,
+	getParentProps,
+	getPropValue,
+} from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import {
 	computed,
@@ -187,7 +193,8 @@ const attributes = computed(() => {
 			attribs[props.block.getDataKey("property") as string] =
 				value ?? attribs[props.block.getDataKey("property") as string];
 		}
-		props.block.getDynamicValues()
+		props.block
+			.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "attribute";
 			})
@@ -250,7 +257,8 @@ const styles = computed(() => {
 				[props.block.getDataKey("property") as string]: value,
 			};
 		}
-		props.block.getDynamicValues()
+		props.block
+			.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.type === "style";
 			})
@@ -377,13 +385,16 @@ watch(
 		component,
 		allResolvedProps,
 		() => props.block.getBlockClientScript(),
-		() => Boolean(builderSettings.doc?.execute_block_scripts_in_editor),
+		() => builderSettings.doc?.execute_block_scripts_in_editor,
 		() => pageStore.settingPage,
 	],
 	() => {
-		if (pageStore.settingPage) return;
-		if (builderSettings.doc?.execute_block_scripts_in_editor) {
-			saferExecuteBlockClientScript(uid, props.block.getBlockClientScript(), allResolvedProps.value);
+		if (pageStore.settingPage || !props.block.getBlockClientScript().trim()) return;
+		if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
+			if (builderSettings.doc?.execute_block_scripts_in_editor === "Restricted")
+				executeBlockClientScriptRestricted(uid, props.block.getBlockClientScript(), allResolvedProps.value);
+			else
+				executeBlockClientScriptUnrestricted(uid, props.block.getBlockClientScript(), allResolvedProps.value);
 		}
 	},
 	{ deep: true },
@@ -413,7 +424,6 @@ watch(
 			blockDataStore.setBlockData(props.block.blockId, {}, "own");
 			return;
 		}
-		console.log("Fetching block data for", allResolvedProps.value, props.blockData);
 		fetchBlockData
 			.fetch({
 				block_id: uid,
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 7a93453c6..5ace7394e 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -1,15 +1,19 @@
 <template>
 	<div class="flex flex-col gap-5">
-		<Switch
-			size="sm"
-			label="Execute Block Client Scripts in Editor"
-			description="Tries to best emulate how blocks will look like on the live site."
-			:modelValue="Boolean(builderSettings.doc?.execute_block_scripts_in_editor)"
-			@update:modelValue="
-				(val: Boolean) => {
-					builderStore.updateBuilderSettings('execute_block_scripts_in_editor', val);
-				}
-			" />
+		<div class="flex justify-between">
+			<label class="w-fit text-p-base shrink-0 font-medium text-ink-gray-8">Execute Block Client Scripts in Editor</label>
+			<Select
+				class="w-[200px]"
+				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
+				@update:modelValue="
+					(value) => builderStore.updateBuilderSettings('execute_block_scripts_in_editor', value)
+				"
+				:options="[
+					{ label: 'Don\'t Execute', value: 'Don\'t Execute' },
+					{ label: 'Restricted', value: 'Restricted' },
+					{ label: 'Unrestricted', value: 'Unrestricted' },
+				]" />
+		</div>
 		<Switch
 			size="sm"
 			label="Prevent Click Emulation"
@@ -22,8 +26,8 @@
 			" />
 		<div class="flex flex-col gap-2">
 			<p class="text-sm font-medium text-ink-gray-9">
-				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not perfectly replicate live site behavior. Executing
-				untrusted scripts could be unsafe.
+				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not
+				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
 			</p>
 		</div>
 	</div>
@@ -32,6 +36,8 @@
 import Switch from "@/components/Controls/Switch.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
+import { Select } from "frappe-ui";
+import InlineInput from "../Controls/InlineInput.vue";
 
 const builderStore = useBuilderStore();
 </script>
diff --git a/frontend/src/types/Builder/BuilderSettings.ts b/frontend/src/types/Builder/BuilderSettings.ts
index d0ac86483..70e4de663 100644
--- a/frontend/src/types/Builder/BuilderSettings.ts
+++ b/frontend/src/types/Builder/BuilderSettings.ts
@@ -31,7 +31,7 @@ export interface BuilderSettings{
 	/**	Home Page : Data	*/
 	home_page?: string,
 	/**	Execute Block Scripts in Editor : Check - Tries to best emulate how blocks will look like on the live site by executing Block Scripts.	*/
-	execute_block_scripts_in_editor?: 0 | 1
+	execute_block_scripts_in_editor?: "Don't Execute" | "Restricted" | "Unrestricted"
 	/**	Prevent Click Emulation : Check - Prevents click events from being emulated in the editor for blocks with Block Client Scripts.	*/
 	block_click_handlers?: 0 | 1
 }
\ No newline at end of file
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 2389eedb7..a6356489f 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1100,7 +1100,7 @@ const getValueForInheritedProp = (
 	return undefined;
 };
 
-const getParentProps = (baseBlock: Block, baseProps: BlockProps): BlockProps => {
+const getParentProps = (baseBlock: Block, baseProps: BlockProps = {}): BlockProps => {
 	const parentBlock = baseBlock.getParentBlock();
 	if (parentBlock) {
 		const parentProps: BlockProps = {};
@@ -1225,7 +1225,7 @@ const getStandardPropValue = (
 	if (propsOfComponentRoot) {
 		for (const [name, value] of Object.entries(propsOfComponentRoot)) {
 			if (propName === name && value.isStandard) {
-				if (PARSEABLE_STANDARD_TYPES.includes(value.standardOptions?.type || 'string')) {
+				if (PARSEABLE_STANDARD_TYPES.includes(value.standardOptions?.type || "string")) {
 					const parsedValue = value.value
 						? JSON.parse(value.value)
 						: value.standardOptions?.options?.defaultValue || null;
@@ -1267,6 +1267,49 @@ const getDataArray = (collectionObject: Record<string, any>) => {
 	return result;
 };
 
+function executeBlockClientScriptUnrestricted(
+	blockUid: string,
+	userScript: string,
+	props: Record<string, any> = {},
+) {
+	const thisElement = document.querySelector(`[data-block-uid='${blockUid}']`) as HTMLElement;
+	const safeCreateElement = (tagName: string): HTMLElement => {
+		// Restrict to only allow creating elements within the thisElement
+		const el = document.createElement(tagName);
+		el.dataset.createdBy = blockUid;
+		return el;
+	};
+	const documentProxy = new Proxy(document, {
+		get(target, prop: string) {
+			if (prop === "createElement") {
+				return safeCreateElement;
+			}
+			return Reflect.get(target, prop);
+		},
+	});
+	const context = {
+		document: documentProxy,
+		thisRef: thisElement,
+		props,
+	};
+
+	const fn = new Function(
+		"context",
+		`with (context) {
+			return (function() { ${userScript} }).call(thisRef);
+		}`,
+	);
+
+	try {
+		document.querySelectorAll(`[data-created-by='${blockUid}']`).forEach(el => el.remove());
+		fn.call(thisElement, context);
+		console.log("Executed unrestricted user script");
+	} catch (e) {
+		console.error("Error in user script 2:", e);
+		// toast.warning("An error occurred while executing block script: " + (e instanceof Error ? e.message : ""));
+	}
+}
+
 /**
  * Tries to execute user-provided script in a safer environment, (but not guarantee) restricting access to certain DOM properties and methods.
  * It makes the editor canvas as the root (document), and thus limits the script's ability to manipulate the broader document.
@@ -1279,7 +1322,7 @@ const getDataArray = (collectionObject: Record<string, any>) => {
  * @param props - An optional object containing properties to be made available in the script's context.
  */
 
-function saferExecuteBlockClientScript(
+function executeBlockClientScriptRestricted(
 	blockUid: string,
 	userScript: string,
 	props: Record<string, any> = {},
@@ -1466,5 +1509,6 @@ export {
 	getPropValue,
 	getStandardPropValue,
 	getDataArray,
-	saferExecuteBlockClientScript,
+	executeBlockClientScriptUnrestricted,
+	executeBlockClientScriptRestricted,
 };

From 8dae976c86831f30ff17d4511a32204401d59ce3 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 25 Jan 2026 00:56:31 +0530
Subject: [PATCH 330/547] feat: add repeaterIndex prop to BuilderBlock and bind
 it in DataLoaderBlock

used to conditionally clearing blockDataMapping, else reducing repeater elems would unmount a block with the same blockId
---
 frontend/src/components/BuilderBlock.vue    | 11 ++++++++---
 frontend/src/components/DataLoaderBlock.vue |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3af56c9cc..388f5a8b1 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -88,6 +88,7 @@ const props = withDefaults(
 		data?: Record<string, any> | null;
 		blockData?: Record<string, any> | null;
 		defaultProps?: Record<string, any> | null;
+		repeaterIndex?: string | number | null;
 	}>(),
 	{
 		isChildOfComponent: false,
@@ -97,6 +98,7 @@ const props = withDefaults(
 		data: null,
 		blockData: null,
 		defaultProps: null,
+		repeaterIndex: null,
 	},
 );
 
@@ -403,6 +405,7 @@ watch(
 watch(
 	[component, () => props.blockData, () => props.data],
 	() => {
+		if (props.repeaterIndex) return;
 		blockDataStore.setPageData(props.block.blockId, props.data || {});
 		blockDataStore.setBlockData(props.block.blockId, props.blockData || {}, "passedDown");
 	},
@@ -418,7 +421,7 @@ watch(
 		() => pageStore.settingPage,
 	],
 	() => {
-		if (pageStore.settingPage) return;
+		if (pageStore.settingPage || props.repeaterIndex) return;
 		if (props.block.getBlockDataScript().trim() === "") {
 			ownBlockData.value = {};
 			blockDataStore.setBlockData(props.block.blockId, {}, "own");
@@ -503,8 +506,10 @@ if (!props.preview) {
 }
 
 onUnmounted(() => {
-	blockDataStore.clearBlockData(props.block.blockId);
-	blockDataStore.clearPageData(props.block.blockId);
+	if (props.repeaterIndex) {
+		blockDataStore.clearBlockData(props.block.blockId);
+		blockDataStore.clearPageData(props.block.blockId);
+	}
 });
 
 // Note: All the block event listeners are delegated to parent for better scalability
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index aaf591e90..e95cd9330 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -15,6 +15,7 @@
 			:readonly="readonly"
 			:breakpoint="breakpoint"
 			:isChildOfComponent="block.isExtendedFromComponent()"
+			:repeater-index="index"
 			v-for="(_data, index) in blockRepeaterData" />
 	</div>
 </template>

From 4755772b6d6c34916b394ce4fc9b4db746e209fb Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 25 Jan 2026 01:01:41 +0530
Subject: [PATCH 331/547] refactor: remove console.log statements

---
 frontend/src/components/ArrayEditor.vue     | 1 -
 frontend/src/components/DataLoaderBlock.vue | 1 -
 frontend/src/components/PropsEditor.vue     | 1 -
 3 files changed, 3 deletions(-)

diff --git a/frontend/src/components/ArrayEditor.vue b/frontend/src/components/ArrayEditor.vue
index 4b212c766..75aafaff5 100644
--- a/frontend/src/components/ArrayEditor.vue
+++ b/frontend/src/components/ArrayEditor.vue
@@ -65,7 +65,6 @@ const pasteArray = (e: ClipboardEvent) => {
 			if (Array.isArray(parsed)) {
 				const stringArray = parsed.map(item => String(item));
 				emit("update:arr", [...passedArr, ...stringArray]);
-				console.log("Pasted JSON array:", [...passedArr, ...stringArray]);
 				return;
 			}
 		} catch (e) {
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index e95cd9330..817560394 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -51,7 +51,6 @@ const props = withDefaults(
 const component = ref(null) as Ref<HTMLElement | null>;
 
 const repeatingFrom = computed(() => {
-	console.log("Repeating from:", props.block.getDataKey("comesFrom"));
 	return props.block.getDataKey("comesFrom") || "dataScript";
 });
 
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 51a23b496..83e998ce4 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -302,7 +302,6 @@ const updateProp = async ({
 	newValue: BlockProps[string];
 }) => {
 	let map = new Map(Object.entries(props.obj));
-	console.log({ oldPropName, newName, newValue });
 
 	if (oldPropName !== newName) {
 		map = new Map(Object.entries(replaceKey(map, oldPropName, newName)));

From bacc0fe43a2351d418680fa8382e66badc682e4a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 25 Jan 2026 11:40:01 +0530
Subject: [PATCH 332/547] fix: updated name of click handler setting

---
 frontend/src/components/Settings/GlobalDeveloper.vue | 6 +++---
 frontend/src/types/Builder/BuilderSettings.ts        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 5ace7394e..6ee042a60 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -3,7 +3,7 @@
 		<div class="flex justify-between">
 			<label class="w-fit text-p-base shrink-0 font-medium text-ink-gray-8">Execute Block Client Scripts in Editor</label>
 			<Select
-				class="w-[200px]"
+				class="!w-[200px]"
 				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
 				@update:modelValue="
 					(value) => builderStore.updateBuilderSettings('execute_block_scripts_in_editor', value)
@@ -18,10 +18,10 @@
 			size="sm"
 			label="Prevent Click Emulation"
 			description="Prevents click events from being emulated in the editor for blocks with Block Client Scripts."
-			:modelValue="Boolean(builderSettings.doc?.block_click_handlers)"
+			:modelValue="Boolean(builderSettings.doc?.restrict_click_handlers)"
 			@update:modelValue="
 				(val: Boolean) => {
-					builderStore.updateBuilderSettings('block_click_handlers', val);
+					builderStore.updateBuilderSettings('restrict_click_handlers', val);
 				}
 			" />
 		<div class="flex flex-col gap-2">
diff --git a/frontend/src/types/Builder/BuilderSettings.ts b/frontend/src/types/Builder/BuilderSettings.ts
index 70e4de663..d692dbafd 100644
--- a/frontend/src/types/Builder/BuilderSettings.ts
+++ b/frontend/src/types/Builder/BuilderSettings.ts
@@ -33,5 +33,5 @@ export interface BuilderSettings{
 	/**	Execute Block Scripts in Editor : Check - Tries to best emulate how blocks will look like on the live site by executing Block Scripts.	*/
 	execute_block_scripts_in_editor?: "Don't Execute" | "Restricted" | "Unrestricted"
 	/**	Prevent Click Emulation : Check - Prevents click events from being emulated in the editor for blocks with Block Client Scripts.	*/
-	block_click_handlers?: 0 | 1
+	restrict_click_handlers?: 0 | 1
 }
\ No newline at end of file

From b39e617f4f2464c921bc30d1533083bd55a9d045 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 25 Jan 2026 12:26:56 +0530
Subject: [PATCH 333/547] fix: update default isStandard logic to use
 showIsStandardInput

---
 frontend/src/components/PropsPopoverContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index da79dbc17..c0e0a033b 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -351,7 +351,7 @@ interface ResetParams {
 }
 
 function getDefaultIsStandard(keepProps: boolean): string {
-	const isStandardByDefault = isInFragmentMode.value && props.mode === "add";
+	const isStandardByDefault = showIsStandardInput.value && isInFragmentMode.value && props.mode === "add";
 	const propDetailsStandard = keepProps ? props.propDetails?.isStandard : undefined;
 	return propDetailsStandard !== undefined
 		? String(propDetailsStandard)

From aaeed4c5a9a6dee5f6bd89f31cfdbfefa1e1ced6 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 25 Jan 2026 14:57:45 +0530
Subject: [PATCH 334/547] fix: unescape HTML in block data script before
 execution

---
 builder/utils.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/builder/utils.py b/builder/utils.py
index 99e7b2b27..158b2044c 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -10,6 +10,7 @@
 import frappe
 from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_url
+from frappe.utils.html_utils import unescape_html
 from frappe.utils.safe_exec import (
 	SERVER_SCRIPT_FILE_PREFIX,
 	FrappeTransformer,
@@ -658,6 +659,6 @@ def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()
 	_locals = dict(block=frappe._dict(), props=props)
-	execute_script(block_data_script, _locals, "sample")
+	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
 	return combine(prev_block_data, block_data)

From 1dbfd716bc808ee30f8c40cdd01c7a628d17094a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 26 Jan 2026 00:14:29 +0530
Subject: [PATCH 335/547] feat(BlockLayers): Enhance drag-and-drop
 functionality with drop indicators

---
 frontend/src/components/BlockLayers.vue | 162 +++++++++++++++++++++++-
 frontend/src/stores/canvasStore.ts      |   1 +
 2 files changed, 158 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 2b83e0ae7..86992445a 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -1,17 +1,29 @@
 <template>
-	<div>
+	<div ref="rootContainer" class="relative">
 		<draggable
-			class="block-tree"
+			class="block-tree relative"
 			:list="blocks"
-			:group="{ name: 'block-tree' }"
+			:group="{ name: 'block-tree', pull: 'clone', put: true }"
 			item-key="blockId"
 			@add="updateParent"
-			:disabled="disableDraggable || readonly">
+			:disabled="disableDraggable || readonly"
+			:force-fallback="true"
+			:fallback-class="'!hidden'"
+			:fallback-on-body="false"
+			:sort="false"
+			:move="checkMove"
+			@start="onDragStart"
+			@end="onDragEnd">
 			<template #item="{ element }">
 				<div
 					:data-block-layer-id="element.blockId"
+					:data-indent="indent"
 					:title="element.blockId"
-					class="min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
+					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
+					:class="{
+						'border-blue-500 !bg-blue-100 bg-opacity-30 dark:!bg-blue-900':
+							canvasStore.layerDraggingOverBlockId === element.blockId,
+					}"
 					@click.stop="selectBlock(element, $event)"
 					@mouseover.stop="canvasStore.activeCanvas?.setHoveredBlock(element.blockId)"
 					@mouseleave.stop="canvasStore.activeCanvas?.setHoveredBlock(null)">
@@ -90,6 +102,15 @@
 				</div>
 			</template>
 		</draggable>
+		<!-- Drop indicator line -->
+		<div
+			v-if="showDropIndicator"
+			class="pointer-events-none absolute h-0.5 bg-blue-500 transition-none"
+			:style="{
+				top: dropIndicatorTop + 'px',
+				left: dropIndicatorLeft + 'px',
+				width: 'calc(100% - ' + dropIndicatorLeft + 'px)',
+			}"></div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -105,6 +126,7 @@ type LayerInstance = InstanceType<typeof BlockLayers>;
 
 const canvasStore = useCanvasStore();
 
+const rootContainer = ref<HTMLElement | null>(null);
 const childLayers = ref<LayerInstance[]>([]);
 const childLayer = (el: LayerInstance) => {
 	if (el) {
@@ -232,6 +254,136 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
+// Drag and drop state
+interface DragState {
+	draggedElement: HTMLElement | null;
+	hoverTarget: HTMLElement | null;
+	hoverPosition: "before" | "after" | "inside" | null;
+}
+
+const showDropIndicator = ref(false);
+const dropIndicatorTop = ref(0);
+const dropIndicatorLeft = ref(0);
+const dragState: DragState = { draggedElement: null, hoverTarget: null, hoverPosition: null };
+
+const resetDropIndicators = () => {
+	showDropIndicator.value = false;
+	canvasStore.layerDraggingOverBlockId = null;
+};
+
+const checkMove = () => false; // Prevent automatic reordering
+
+const onDragStart = (event: any) => {
+	resetDropIndicators();
+	dragState.draggedElement = event.item;
+	document.addEventListener("mousemove", onMouseMove);
+};
+
+const updateDropIndicator = (blockLayerItem: HTMLElement, relativeY: number, elementHeight: number) => {
+	if (!rootContainer.value) return;
+
+	const rect = blockLayerItem.getBoundingClientRect();
+	const containerRect = rootContainer.value.getBoundingClientRect();
+	const indent = parseInt(blockLayerItem.dataset.indent || "0", 10);
+	const showAbove = relativeY < elementHeight / 2;
+
+	dropIndicatorTop.value = showAbove ? rect.top - containerRect.top : rect.bottom - containerRect.top;
+	dropIndicatorLeft.value = indent;
+	dragState.hoverPosition = showAbove ? "before" : "after";
+	showDropIndicator.value = true;
+};
+
+const onMouseMove = (event: MouseEvent) => {
+	if (!dragState.draggedElement) return;
+
+	const target = document.elementFromPoint(event.clientX, event.clientY);
+	const blockLayerItem = target?.closest(".block-layer-item") as HTMLElement | null;
+
+	if (!blockLayerItem || blockLayerItem === dragState.draggedElement) {
+		resetDropIndicators();
+		return;
+	}
+
+	const blockId = blockLayerItem.dataset.blockLayerId;
+	const block = canvasStore.activeCanvas?.findBlock(blockId!);
+
+	if (!block) {
+		resetDropIndicators();
+		return;
+	}
+
+	const rect = blockLayerItem.getBoundingClientRect();
+	const relativeY = event.clientY - rect.top;
+	const elementHeight = rect.height;
+	const isInCenterZone = relativeY > elementHeight * 0.25 && relativeY < elementHeight * 0.75;
+
+	dragState.hoverTarget = blockLayerItem;
+
+	if (block.canHaveChildren() && isInCenterZone) {
+		// Highlight parent block for nested drop
+		canvasStore.layerDraggingOverBlockId = blockId!;
+		showDropIndicator.value = false;
+		dragState.hoverPosition = "inside";
+	} else {
+		// Show line indicator for sibling drop
+		canvasStore.layerDraggingOverBlockId = null;
+		updateDropIndicator(blockLayerItem, relativeY, elementHeight);
+	}
+};
+
+const removeFromParent = (block: Block) => {
+	const parent = block.getParentBlock();
+	if (parent?.children) {
+		const index = parent.children.indexOf(block);
+		if (index > -1) parent.children.splice(index, 1);
+	}
+};
+
+const moveBlockInside = (draggedBlock: Block, targetBlock: Block) => {
+	removeFromParent(draggedBlock);
+	if (!targetBlock.children) targetBlock.children = [];
+	targetBlock.children.push(draggedBlock);
+	draggedBlock.parentBlock = targetBlock;
+};
+
+const moveBlockAdjacent = (draggedBlock: Block, targetBlock: Block, position: "before" | "after") => {
+	const targetParent = targetBlock.getParentBlock();
+	if (!targetParent?.children) return;
+
+	removeFromParent(draggedBlock);
+	const targetIndex = targetParent.children.indexOf(targetBlock);
+	const insertIndex = position === "before" ? targetIndex : targetIndex + 1;
+	targetParent.children.splice(insertIndex, 0, draggedBlock);
+	draggedBlock.parentBlock = targetParent;
+};
+
+const onDragEnd = () => {
+	resetDropIndicators();
+	document.removeEventListener("mousemove", onMouseMove);
+
+	const { draggedElement, hoverTarget, hoverPosition } = dragState;
+	if (!draggedElement || !hoverTarget || !hoverPosition) {
+		Object.assign(dragState, { draggedElement: null, hoverTarget: null, hoverPosition: null });
+		return;
+	}
+
+	const draggedBlock = canvasStore.activeCanvas?.findBlock(draggedElement.dataset.blockLayerId!);
+	const targetBlock = canvasStore.activeCanvas?.findBlock(hoverTarget.dataset.blockLayerId!);
+
+	if (draggedBlock && targetBlock && draggedBlock !== targetBlock) {
+		if (hoverPosition === "inside") {
+			moveBlockInside(draggedBlock, targetBlock);
+		} else {
+			moveBlockAdjacent(draggedBlock, targetBlock, hoverPosition);
+		}
+
+		// Select the moved block
+		canvasStore.activeCanvas?.selectBlock(draggedBlock);
+	}
+
+	Object.assign(dragState, { draggedElement: null, hoverTarget: null, hoverPosition: null });
+};
+
 defineExpose({
 	toggleExpanded,
 	isExpandedInTree,
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index b17df009b..f63c9ad26 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -9,6 +9,7 @@ const useCanvasStore = defineStore("canvasStore", {
 		activeCanvas: <InstanceType<typeof BuilderCanvas> | null>null,
 		requiresConfirmationForCopyingEntirePage: <boolean>true,
 		copyEntirePage: <boolean>false,
+		layerDraggingOverBlockId: <string | null>null,
 		preventClick: false,
 		guides: {
 			showX: false,

From d2423d7b437a200f2f848066ad7b33bf5cca2469 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 26 Jan 2026 00:42:50 +0530
Subject: [PATCH 336/547] fix(BlockLayers): Prevent hover state changes during
 drag

---
 frontend/src/components/BlockLayers.vue | 19 +++++++++++--------
 frontend/src/stores/canvasStore.ts      |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 86992445a..afdc54058 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -21,12 +21,14 @@
 					:title="element.blockId"
 					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
 					:class="{
-						'border-blue-500 !bg-blue-100 bg-opacity-30 dark:!bg-blue-900':
-							canvasStore.layerDraggingOverBlockId === element.blockId,
+						'border-blue-500 !bg-blue-100 dark:!bg-blue-900':
+							canvasStore.layerDraggingOverBlock === element.blockId,
 					}"
 					@click.stop="selectBlock(element, $event)"
-					@mouseover.stop="canvasStore.activeCanvas?.setHoveredBlock(element.blockId)"
-					@mouseleave.stop="canvasStore.activeCanvas?.setHoveredBlock(null)">
+					@mouseover.stop="
+						!canvasStore.isDragging && canvasStore.activeCanvas?.setHoveredBlock(element.blockId)
+					"
+					@mouseleave.stop="!canvasStore.isDragging && canvasStore.activeCanvas?.setHoveredBlock(null)">
 					<span
 						class="group my-[7px] flex items-center gap-1.5 pr-[2px] font-medium"
 						:style="{ paddingLeft: `${indent}px` }"
@@ -254,7 +256,6 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
-// Drag and drop state
 interface DragState {
 	draggedElement: HTMLElement | null;
 	hoverTarget: HTMLElement | null;
@@ -268,12 +269,13 @@ const dragState: DragState = { draggedElement: null, hoverTarget: null, hoverPos
 
 const resetDropIndicators = () => {
 	showDropIndicator.value = false;
-	canvasStore.layerDraggingOverBlockId = null;
+	canvasStore.layerDraggingOverBlock = null;
 };
 
 const checkMove = () => false; // Prevent automatic reordering
 
 const onDragStart = (event: any) => {
+	canvasStore.isDragging = true;
 	resetDropIndicators();
 	dragState.draggedElement = event.item;
 	document.addEventListener("mousemove", onMouseMove);
@@ -321,12 +323,12 @@ const onMouseMove = (event: MouseEvent) => {
 
 	if (block.canHaveChildren() && isInCenterZone) {
 		// Highlight parent block for nested drop
-		canvasStore.layerDraggingOverBlockId = blockId!;
+		canvasStore.layerDraggingOverBlock = blockId!;
 		showDropIndicator.value = false;
 		dragState.hoverPosition = "inside";
 	} else {
 		// Show line indicator for sibling drop
-		canvasStore.layerDraggingOverBlockId = null;
+		canvasStore.layerDraggingOverBlock = null;
 		updateDropIndicator(blockLayerItem, relativeY, elementHeight);
 	}
 };
@@ -358,6 +360,7 @@ const moveBlockAdjacent = (draggedBlock: Block, targetBlock: Block, position: "b
 };
 
 const onDragEnd = () => {
+	canvasStore.isDragging = false;
 	resetDropIndicators();
 	document.removeEventListener("mousemove", onMouseMove);
 
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index f63c9ad26..e387169e7 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -9,7 +9,7 @@ const useCanvasStore = defineStore("canvasStore", {
 		activeCanvas: <InstanceType<typeof BuilderCanvas> | null>null,
 		requiresConfirmationForCopyingEntirePage: <boolean>true,
 		copyEntirePage: <boolean>false,
-		layerDraggingOverBlockId: <string | null>null,
+		layerDraggingOverBlock: <string | null>null,
 		preventClick: false,
 		guides: {
 			showX: false,

From 10d9e860c793dc0e74412a2e80b6c25ebe69441e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 10:11:57 +0530
Subject: [PATCH 337/547] fix: rename showExpandedEditorDialog to
 showEditorDialog

---
 frontend/src/pages/PageBuilder.vue | 6 +++---
 frontend/src/stores/canvasStore.ts | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 9bb577347..6ef4621ef 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -80,7 +80,7 @@
 	</div>
 	<PageListModal v-model="pageListDialog" :pages="componentUsedInPages"></PageListModal>
 	<Dialog
-		v-model="canvasStore.showExpandedEditorDialog"
+		v-model="canvasStore.showEditorDialog"
 		class="overscroll-none"
 		:isDirty="expandedEditor?.isDirty"
 		:options="{
@@ -239,7 +239,7 @@ async function saveExpandedEditorContent(val: string) {
 	} else if (canvasStore.editingContentType === "python") {
 		canvasStore.editableBlock?.setBlockDataScript(val);
 	}
-	canvasStore.showExpandedEditorDialog = false;
+	canvasStore.showEditorDialog = false;
 }
 
 onActivated(async () => {
@@ -330,7 +330,7 @@ watch(
 );
 
 watch(
-	() => canvasStore.showExpandedEditorDialog,
+	() => canvasStore.showEditorDialog,
 	(value) => {
 		if (!value) {
 			canvasStore.editableBlock = null;
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 1ff83aad4..be948962b 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -29,7 +29,7 @@ const useCanvasStore = defineStore("canvasStore", {
 		editingContentType: <"html" | "css" | "js" | "python">"html",
 		editingMode: <EditingMode>"page",
 		settingPage: false,
-		showExpandedEditorDialog: false,
+		showEditorDialog: false,
 		fragmentData: {
 			block: <Block | null>null,
 			saveAction: <Function | null>null,
@@ -101,7 +101,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			this.editableBlock = block;
 			this.editingContentType = "html";
 			nextTick(() => {
-				this.showExpandedEditorDialog = true;
+				this.showEditorDialog = true;
 			});
 		},
 
@@ -109,7 +109,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			this.editableBlock = block;
 			this.editingContentType = "js";
 			nextTick(() => {
-				this.showExpandedEditorDialog = true;
+				this.showEditorDialog = true;
 			});
 		},
 
@@ -117,7 +117,7 @@ const useCanvasStore = defineStore("canvasStore", {
 			this.editableBlock = block;
 			this.editingContentType = "python";
 			nextTick(() => {
-				this.showExpandedEditorDialog = true;
+				this.showEditorDialog = true;
 			});
 		},
 

From eed57ef0ef1c32f79800adafbb5f5eec5c87418d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 10:35:59 +0530
Subject: [PATCH 338/547] fix: rename anchorSelector to
 referenceElementSelector in Autocomplete and related components

---
 frontend/src/components/Controls/Autocomplete.vue | 8 ++++----
 frontend/src/components/Controls/ColorInput.vue   | 4 ++--
 frontend/src/components/PropsPopoverContent.vue   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 38930e49c..7dc638a3a 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -46,7 +46,7 @@
 						fixedPositionStyles = {};
 					}
 				"
-				:class="anchorSelector ? 'fixed' : 'absolute'"
+				:class="referenceElementSelector ? 'fixed' : 'absolute'"
 				:style="fixedPositionStyles"
 				ref="contentRef"
 				class="z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
@@ -128,7 +128,7 @@ interface Props {
 	placeholder?: string;
 	showInputAsOption?: boolean;
 	actionButton?: ActionButton;
-	anchorSelector?: string;
+	referenceElementSelector?: string;
 	allowArbitraryValue?: boolean;
 }
 
@@ -240,9 +240,9 @@ if (props.getOptions) refreshOptions();
 // in Popover, absolute positioning keeps all options within the Popover taking extra space
 // making it fixed makes it float above Popover container
 const getFixedPositionStyles = () => {
-	if (props.anchorSelector) {
+	if (props.referenceElementSelector) {
 		const fixedToElRect = (
-			comboboxInput.value?.$el.closest(props.anchorSelector) as HTMLElement
+			comboboxInput.value?.$el.closest(props.referenceElementSelector) as HTMLElement
 		)?.getBoundingClientRect();
 		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
 		const contentRect = contentRef.value?.$el?.getBoundingClientRect
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 5d43f2fc3..98e1900c9 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -25,7 +25,7 @@
 								}"
 								v-bind="events"
 								ref="colorInput"
-								:anchorSelector
+								:referenceElementSelector="autocompleteReferenceElementSelector"
 								@keydown.enter="handleEnter"
 								@focus="togglePopover"
 								:placeholder="placeholder"
@@ -168,7 +168,7 @@ const props = withDefaults(
 		showColorVariableOptions?: boolean;
 		showPickerOnMount?: boolean;
 		popoverOffset?: number;
-		anchorSelector?: string;
+		autocompleteReferenceElementSelector?: string;
 	}>(),
 	{
 		modelValue: null,
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index c0e0a033b..870e639f8 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -45,7 +45,7 @@
 				@input="(val) => (value = val)"></Input>
 			<Autocomplete
 				v-else
-				anchorSelector=".props-popover-content"
+				referenceElementSelector=".props-popover-content"
 				class="w-full [&>.form-input]:border-none [&>.form-input]:hover:border-none"
 				ref="autoCompleteRef"
 				placeholder="Choose prop value"

From a6a19fcfced3de1df9c016e13f1066df565b6f0b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 10:36:58 +0530
Subject: [PATCH 339/547] fix: better placeholder text in ArrayEditor

---
 frontend/src/components/ArrayEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ArrayEditor.vue b/frontend/src/components/ArrayEditor.vue
index 75aafaff5..8f5e429dd 100644
--- a/frontend/src/components/ArrayEditor.vue
+++ b/frontend/src/components/ArrayEditor.vue
@@ -2,7 +2,7 @@
 	<div ref="arrayEditor" class="flex flex-col gap-2" @paste="pasteArray">
 		<div v-for="(item, index) in arr" :key="index" class="flex gap-2">
 			<BuilderInput
-				placeholder="empty string"
+				placeholder="Enter value"
 				:modelValue="item"
 				@input="(val: string) => updateItem(index, val)" />
 			<BuilderButton

From b2f1d3ca3c4a22538e40b696ffde29d48b36e963 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 10:46:01 +0530
Subject: [PATCH 340/547] fix: using offset prop instead of css classes in
 Popover

---
 frontend/src/components/ArrayInput.vue  | 2 +-
 frontend/src/components/ObjectInput.vue | 2 +-
 frontend/src/components/PropsEditor.vue | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
index f397f0307..9fc339493 100644
--- a/frontend/src/components/ArrayInput.vue
+++ b/frontend/src/components/ArrayInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover popoverClass="!mr-[20px] !min-w-fit" placement="left">
+	<Popover :offset="20" placement="left">
 		<template #target="{ open }">
 			<div class="relative flex w-full gap-2">
 				<div class="flex w-[88px] shrink-0 items-center">
diff --git a/frontend/src/components/ObjectInput.vue b/frontend/src/components/ObjectInput.vue
index e27016862..07bd31494 100644
--- a/frontend/src/components/ObjectInput.vue
+++ b/frontend/src/components/ObjectInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<Popover popoverClass="!mr-[20px] !min-w-fit" placement="left">
+	<Popover :offset="20" placement="left">
 		<template #target="{ open }">
 			<div class="relative flex w-full gap-2">
 				<div class="flex w-[88px] shrink-0 items-center">
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 83e998ce4..8b3b295ba 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -6,7 +6,7 @@
 					:key="index"
 					class="prop-list-item relative flex w-full flex-col rounded bg-surface-gray-1 p-2 text-ink-gray-6"
 					v-if="value.isStandard !== true || shouldDisplayStandardProps">
-					<Popover popoverClass="!ml-[34px] !min-w-fit" placement="right">
+					<Popover :offset="32" placement="right">
 						<template #target="{ open }">
 							<div
 								class="flex w-full cursor-pointer items-center justify-between"
@@ -96,7 +96,7 @@
 				</div>
 			</template>
 		</div>
-		<Popover ref="popOverRef" popoverClass="!ml-[24px] !min-w-fit" placement="right-start">
+		<Popover ref="popOverRef" :offset="24" placement="right">
 			<template #target="{ open }">
 				<BuilderButton
 					class="w-full"

From d9a363d94b2ba60a30a2fa6296d439b09556229a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 20:34:49 +0530
Subject: [PATCH 341/547] fix: true unrestricted exectution

---
 frontend/src/utils/helpers.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index a6356489f..28c7cf8cf 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1279,16 +1279,8 @@ function executeBlockClientScriptUnrestricted(
 		el.dataset.createdBy = blockUid;
 		return el;
 	};
-	const documentProxy = new Proxy(document, {
-		get(target, prop: string) {
-			if (prop === "createElement") {
-				return safeCreateElement;
-			}
-			return Reflect.get(target, prop);
-		},
-	});
+
 	const context = {
-		document: documentProxy,
 		thisRef: thisElement,
 		props,
 	};

From f779130ae075c045b44bf5461b804338d9385d97 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 20:35:08 +0530
Subject: [PATCH 342/547] fix: rename data-block-id to data-block-uid in
 attach_client_script

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 501279c72..34aaa7b6f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -915,13 +915,13 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 		state["used_block_scripts"].add(script_unique_id)
 
 	# Add data attribute for selecting this specific block
-	tag.attrs["data-block-id"] = "{{ unique_hash }}"
+	tag.attrs["data-block-uid"] = "{{ unique_hash }}"
 
 	# Add local script to call the function
 	local_script = state["soup"].new_tag("script")
 	local_script.string = (
 		f"(client_script_{script_unique_id}).call("
-		f"document.querySelector('[data-block-id=\"{{{{ unique_hash }}}}\"]'), "
+		f"document.querySelector('[data-block-uid=\"{{{{ unique_hash }}}}\"]'), "
 		f"{{{{ props | to_safe_json }}}}"
 		f");"
 	)

From 5b15a6ee69b6a30b35313dd59963dbbba46e4787 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 22:59:59 +0530
Subject: [PATCH 343/547] fix: consider empty string as "no value" for props

---
 builder/builder/doctype/builder_page/builder_page.py       | 7 ++++---
 .../BlockPropertySections/StandardPropsInputSection.ts     | 1 +
 frontend/src/components/PropsEditor.vue                    | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 34aaa7b6f..b6fdc91d0 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -635,9 +635,10 @@ def process_block_props(block: dict, data_key: dict | None, props_stack: dict) -
 def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 	"""Interpret prop value based on its configuration (static or dynamic)."""
 	is_dynamic = prop_config.get("isDynamic", False)
-	comes_from = prop_config.get("comesFrom", "props")
 	is_standard = prop_config.get("isStandard", False)
+	comes_from = prop_config.get("comesFrom", "props")
 	value = prop_config.get("value")
+	is_empty = value is None or value == ""
 
 	default_value = None
 	if is_standard:
@@ -646,7 +647,7 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 			prop_config.get("standardOptions", {}).get("options", {}).get("defaultValue"), prop_type
 		)
 
-	if value is None:
+	if is_empty:
 		return default_value if is_standard else "undefined"
 
 	if is_dynamic:
@@ -656,7 +657,7 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 		prop_type = prop_config.get("standardOptions", {}).get("type")
 		value = parse_static_value(value, prop_type)
 
-	return value if value is not None else "undefined"
+	return value if not is_empty else "undefined"
 
 
 def get_dynamic_props_template(
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 58f625559..da94e8554 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -79,6 +79,7 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 			blockController.setBlockProp(propName, { value: key || "", isDynamic: key !== null, comesFrom });
 		},
 		setModelValue: (value: any) => {
+			if (value == "") value = null;
 			blockController.setBlockProp(propName, { value });
 		},
 		getModelValue: () => {
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 8b3b295ba..73d297e8d 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -66,7 +66,7 @@
 											}}
 										</p>
 										<p v-else class="max-w-full truncate text-ellipsis text-xs text-ink-gray-4">
-											{{ value.value }}
+											{{ value.value || "No Value" }}
 										</p>
 									</div>
 								</div>
@@ -226,7 +226,7 @@ const updateObjectValue = (
 		comesFrom,
 		isPassedDown,
 	}: {
-		label: string;
+		label?: string;
 		value: string | null;
 		isDynamic: boolean;
 		comesFrom: BlockProps[string]["comesFrom"];

From 7f4408be523c087949a50499ffb39c1a11ac77b3 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 23:00:45 +0530
Subject: [PATCH 344/547] fix: correct order of combinedProps for proper
 overriding

---
 frontend/src/utils/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 28c7cf8cf..9330c1120 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1111,7 +1111,7 @@ const getParentProps = (baseBlock: Block, baseProps: BlockProps = {}): BlockProp
 			.map(([propName, propDetails]) => {
 				parentProps[propName] = propDetails;
 			});
-		const combinedProps = { ...baseProps, ...parentProps };
+		const combinedProps = { ...parentProps, ...baseProps };
 		return getParentProps(parentBlock, combinedProps);
 	} else {
 		return baseProps;

From 566d8c6dc4f3d82fd84759825201faee2b4e171f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 26 Jan 2026 23:07:29 +0530
Subject: [PATCH 345/547] fix: removed unused code

---
 frontend/src/utils/helpers.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 9330c1120..01fdea940 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1273,12 +1273,6 @@ function executeBlockClientScriptUnrestricted(
 	props: Record<string, any> = {},
 ) {
 	const thisElement = document.querySelector(`[data-block-uid='${blockUid}']`) as HTMLElement;
-	const safeCreateElement = (tagName: string): HTMLElement => {
-		// Restrict to only allow creating elements within the thisElement
-		const el = document.createElement(tagName);
-		el.dataset.createdBy = blockUid;
-		return el;
-	};
 
 	const context = {
 		thisRef: thisElement,

From 14565a6e5ee79543d2eaa0ef99b17076c16fbfe0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 27 Jan 2026 12:47:26 +0530
Subject: [PATCH 346/547] feat(usersInfo): Optimize user info fetching

- Implements caching and batching
---
 frontend/src/usersInfo.ts | 93 +++++++++++++++++++++++++++++++--------
 1 file changed, 74 insertions(+), 19 deletions(-)

diff --git a/frontend/src/usersInfo.ts b/frontend/src/usersInfo.ts
index 4d74194a5..ff75aebe9 100644
--- a/frontend/src/usersInfo.ts
+++ b/frontend/src/usersInfo.ts
@@ -1,32 +1,87 @@
+/**
+ *
+ * This utility provides a optimized way to fetch and display user information
+ * (like full name and avatar) in the UI.
+ *
+ * Why is it complex?
+ * 1. Synchronous & Reactive: UI components can call `getUserInfo(email)` and immediately
+ *    get a reactive object. They don't need to handle promises or loading states manually.
+ *    The object starts with placeholder data and updates automatically when real data arrives.
+ *
+ * 2. Global Caching: fetched user data is stored in `usersByName` to ensure we never
+ *    fetch the same user twice in the same session.
+ *
+ * 3. Batched Requests: If a page renders a list of 50 items, we don't want 50 API calls.
+ *    This utility queues requests and sends them in a single batch (debounced by 50ms).
+ *
+ * 4. Request Deduplication: If multiple components request the same user simultaneously
+ *    (during the debounce window), they subscribe to the same pending request.
+ */
 import { createResource } from "frappe-ui";
 import { reactive } from "vue";
 
 let usersByName = reactive({}) as { [key: string]: UserInfo };
+const activeRequests = new Set<string>();
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+const queue = new Set<string>();
+
+export function getUserInfo(email: string) {
+	return getUsersInfo([email])[0];
+}
+
+export function getUsersInfo(emails: string[]) {
+	const resultIs = [] as UserInfo[];
 
-export async function getUsersInfo(emails: string[]) {
-	const usersToFetch = [] as string[];
-	const usersInfo = [] as UserInfo[];
 	emails.forEach((email) => {
 		if (!usersByName[email]) {
-			usersToFetch.push(email);
-		} else {
-			usersInfo.push(usersByName[email]);
+			usersByName[email] = {
+				user: email,
+				fullname: email,
+				image: "",
+			};
 		}
+
+		if (!usersByName[email].image && !activeRequests.has(email)) {
+			queue.add(email);
+			triggerDebouncedFetch();
+		}
+		resultIs.push(usersByName[email]);
 	});
-	if (usersToFetch.length) {
-		await createResource({
+
+	return resultIs;
+}
+
+function triggerDebouncedFetch() {
+	if (debounceTimer) clearTimeout(debounceTimer);
+	debounceTimer = setTimeout(processBatch, 50);
+}
+
+async function processBatch() {
+	const emailsToFetch = Array.from(queue);
+	if (emailsToFetch.length === 0) return;
+
+	queue.clear();
+	emailsToFetch.forEach((email) => activeRequests.add(email));
+	debounceTimer = null;
+
+	try {
+		const res = (await createResource({
 			method: "POST",
 			url: `/api/method/frappe.desk.form.load.get_user_info_for_viewers`,
-		})
-			.submit({
-				users: JSON.stringify(usersToFetch),
-			})
-			.then((res: { [key: string]: UserInfo }) => {
-				usersToFetch.forEach((email) => {
-					usersByName[email] = res[email];
-					usersInfo.push(usersByName[email]);
-				});
-			});
+		}).submit({
+			users: JSON.stringify(emailsToFetch),
+		})) as { [key: string]: UserInfo };
+
+		emailsToFetch.forEach((email) => {
+			if (res && res[email]) {
+				Object.assign(usersByName[email], res[email]);
+			}
+		});
+	} catch (error) {
+		console.error("Failed to fetch users info", error);
+	} finally {
+		emailsToFetch.forEach((email) => {
+			activeRequests.delete(email);
+		});
 	}
-	return usersInfo as UserInfo[];
 }

From f6e43688866e42783d7b8a745f9a663362dc03ee Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 27 Jan 2026 12:52:22 +0530
Subject: [PATCH 347/547] feat: Display full names of users who modified and
 created pages

---
 frontend/src/components/PageCard.vue     |  9 +++++++--
 frontend/src/components/PageListItem.vue | 13 +++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PageCard.vue b/frontend/src/components/PageCard.vue
index 26ab23c34..2e44fabd2 100644
--- a/frontend/src/components/PageCard.vue
+++ b/frontend/src/components/PageCard.vue
@@ -19,7 +19,9 @@
 						</p>
 					</div>
 					<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">Edited {{ timeAgo }}</p>
+						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">
+							Edited {{ timeAgo }} by {{ user.fullname }}
+						</p>
 					</UseTimeAgo>
 				</span>
 				<PageActionsDropdown :page="page" size="xs" placement="right">
@@ -39,10 +41,13 @@
 <script setup lang="ts">
 import PageActionsDropdown from "@/components/PageActionsDropdown.vue";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { getUserInfo } from "@/usersInfo";
 import { UseTimeAgo } from "@vueuse/components";
 
-defineProps<{
+const props = defineProps<{
 	page: BuilderPage;
 	selected: boolean;
 }>();
+
+const user = getUserInfo(props.page.modified_by);
 </script>
diff --git a/frontend/src/components/PageListItem.vue b/frontend/src/components/PageListItem.vue
index e1468cdae..2cfdf601f 100644
--- a/frontend/src/components/PageListItem.vue
+++ b/frontend/src/components/PageListItem.vue
@@ -37,7 +37,7 @@
 						</div>
 						<div class="flex items-baseline gap-2 text-ink-gray-6">
 							<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-								<p class="mt-1 block text-sm">Last updated {{ timeAgo }} by {{ page.modified_by }}</p>
+								<p class="mt-1 block text-sm">Last updated {{ timeAgo }} by {{ modifiedBy.fullname }}</p>
 							</UseTimeAgo>
 						</div>
 					</span>
@@ -49,10 +49,11 @@
 				</Badge>
 				<Avatar
 					:shape="'circle'"
-					:label="page.owner"
+					:image="owner.image"
+					:label="owner.fullname"
 					class="[&>div]:bg-surface-gray-2 [&>div]:text-ink-gray-4 [&>div]:group-hover:bg-surface-gray-4 [&>div]:group-hover:text-ink-gray-6"
 					size="sm"
-					:title="`Created by ${page.owner}`" />
+					:title="`Created by ${owner.fullname}`" />
 				<PageActionsDropdown :page="page" size="sm" placement="right">
 					<template v-slot="{ open }">
 						<FeatherIcon
@@ -71,13 +72,17 @@ import GlobeIcon from "@/components/Icons/Globe.vue";
 import PageActionsDropdown from "@/components/PageActionsDropdown.vue";
 import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { getUserInfo } from "@/usersInfo";
 import { UseTimeAgo } from "@vueuse/components";
 import { Avatar, Badge } from "frappe-ui";
 
 const pageStore = usePageStore();
 
-defineProps<{
+const props = defineProps<{
 	page: BuilderPage;
 	selected: boolean;
 }>();
+
+const modifiedBy = getUserInfo(props.page.modified_by);
+const owner = getUserInfo(props.page.owner);
 </script>

From fe884e3457fcfb05980ea99f56b0a1b70963a999 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 13:39:45 +0530
Subject: [PATCH 348/547] fix: rename standardOptions to propOptions

---
 .../doctype/builder_page/builder_page.py      |  8 +--
 .../patches/update_prop_options.py            | 53 +++++++++++++++++++
 .../doctype/builder_page/test_builder_page.py | 14 ++---
 builder/patches.txt                           |  1 +
 frontend/src/builder.d.ts                     |  4 +-
 .../CollectionOptionsSection.ts               |  2 +-
 .../StandardPropsInputSection.ts              | 24 ++++-----
 frontend/src/components/PropsEditor.vue       | 18 +++----
 .../src/components/PropsPopoverContent.vue    | 22 ++++----
 frontend/src/utils/helpers.ts                 | 30 +++++------
 10 files changed, 115 insertions(+), 61 deletions(-)
 create mode 100644 builder/builder/doctype/builder_page/patches/update_prop_options.py

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index b6fdc91d0..92c716eb5 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -642,9 +642,9 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 
 	default_value = None
 	if is_standard:
-		prop_type = prop_config.get("standardOptions", {}).get("type")
+		prop_type = prop_config.get("propOptions", {}).get("type")
 		default_value = parse_static_value(
-			prop_config.get("standardOptions", {}).get("options", {}).get("defaultValue"), prop_type
+			prop_config.get("propOptions", {}).get("options", {}).get("defaultValue"), prop_type
 		)
 
 	if is_empty:
@@ -654,7 +654,7 @@ def interpret_prop_value(prop_config: dict, data_key: dict | None) -> Any:
 		return get_dynamic_props_template(value, comes_from, data_key, default_value)
 
 	if is_standard:
-		prop_type = prop_config.get("standardOptions", {}).get("type")
+		prop_type = prop_config.get("propOptions", {}).get("type")
 		value = parse_static_value(value, prop_type)
 
 	return value if not is_empty else "undefined"
@@ -863,7 +863,7 @@ def extract_loop_variables(key: str, props_stack: dict) -> list[str]:
 		return []
 
 	prop_info = props_stack[key][-1]
-	standard_options = prop_info.get("standardOptions", {})
+	standard_options = prop_info.get("propOptions", {})
 	prop_type = standard_options.get("type")
 
 	if prop_type == "array":
diff --git a/builder/builder/doctype/builder_page/patches/update_prop_options.py b/builder/builder/doctype/builder_page/patches/update_prop_options.py
new file mode 100644
index 000000000..b6e02be8d
--- /dev/null
+++ b/builder/builder/doctype/builder_page/patches/update_prop_options.py
@@ -0,0 +1,53 @@
+
+import frappe
+
+
+def update_prop_options(blocks):
+	for block in blocks:
+		if block.get("props"):
+			for prop in block["props"].keys():
+				if("standardOptions" in block["props"][prop]):
+					block["props"][prop]["propOptions"] = block["props"][prop]["standardOptions"]
+					del block["props"][prop]["standardOptions"]
+		if "children" in block and block.get("children"):
+			update_prop_options(block["children"])
+
+def execute():
+	pages = frappe.get_all(
+		"Builder Page", fields=["name", "route", "blocks", "draft_blocks"]
+	)
+	for page in pages:
+		blocks = frappe.parse_json(page.get("blocks"))
+		if blocks:
+			update_prop_options(blocks)
+			frappe.db.set_value(
+				"Builder Page",
+				page.name,
+				"blocks",
+				frappe.as_json(blocks, indent=None),
+				update_modified=False,
+			)
+
+		draft_blocks = frappe.parse_json(page.get("draft_blocks"))
+		if draft_blocks:
+			update_prop_options(draft_blocks)
+			frappe.db.set_value(
+				"Builder Page",
+				page.name,
+				"draft_blocks",
+				frappe.as_json(draft_blocks, indent=None),
+				update_modified=False,
+			)
+
+	components = frappe.get_all("Builder Component", fields=["name", "block"])
+	for component in components:
+		component_block = frappe.parse_json(component.get("block"))
+		if component_block:
+			update_prop_options([component_block])
+			frappe.db.set_value(
+				"Builder Component",
+				component.name,
+				"block",
+				frappe.as_json(component_block, indent=None),
+				update_modified=False,
+			)
diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 0af02ce18..d7873db97 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -487,7 +487,7 @@ def test_std_props(self):
 					"isPassedDown": True,
 					"comesFrom": None,
 					"value": None,
-					"standardOptions": {
+					"propOptions": {
 						"isRequired": False,
 						"type": "string",
 						"options": {"defaultValue": "Default Header Title"},
@@ -500,7 +500,7 @@ def test_std_props(self):
 					"isPassedDown": True,
 					"comesFrom": None,
 					"value": None,
-					"standardOptions": {
+					"propOptions": {
 						"isRequired": False,
 						"type": "number",
 						"options": {"defaultValue": 25},
@@ -513,7 +513,7 @@ def test_std_props(self):
 					"isPassedDown": True,
 					"comesFrom": None,
 					"value": None,
-					"standardOptions": {
+					"propOptions": {
 						"isRequired": False,
 						"type": "boolean",
 						"options": {"defaultValue": False},
@@ -572,7 +572,7 @@ def test_std_props(self):
 				"isPassedDown": True,
 				"comesFrom": None,
 				"value": "Overridden Header Title",
-				"standardOptions": {
+				"propOptions": {
 					"isRequired": False,
 					"type": "string",
 					"options": {"defaultValue": "Default Header Title"},
@@ -585,7 +585,7 @@ def test_std_props(self):
 				"isPassedDown": True,
 				"comesFrom": None,
 				"value": 29,
-				"standardOptions": {
+				"propOptions": {
 					"isRequired": False,
 					"type": "number",
 					"options": {"defaultValue": 25},
@@ -598,7 +598,7 @@ def test_std_props(self):
 				"isPassedDown": True,
 				"comesFrom": None,
 				"value": True,
-				"standardOptions": {
+				"propOptions": {
 					"isRequired": False,
 					"type": "boolean",
 					"options": {"defaultValue": False},
@@ -655,7 +655,7 @@ def test_repeater_from_std_props(self):
 					"isPassedDown": True,
 					"comesFrom": None,
 					"value": None,
-					"standardOptions": {
+					"propOptions": {
 						"isRequired": False,
 						"type": "object",
 						"options": {
diff --git a/builder/patches.txt b/builder/patches.txt
index 16e7c56fe..2400be25d 100644
--- a/builder/patches.txt
+++ b/builder/patches.txt
@@ -9,6 +9,7 @@ builder.builder.doctype.builder_component.patches.set_component_id
 builder.builder.doctype.builder_page.patches.properly_extend_blocks_from_component
 builder.builder.doctype.builder_page.patches.attach_client_script_to_builder_page
 builder.builder.doctype.builder_page.patches.enable_auto_convert_to_webp_by_default
+builder.builder.doctype.builder_page.patches.update_prop_options
 builder.builder.doctype.builder_client_script.patches.trigger_asset_compression
 builder.builder.patches.add_composite_index_to_web_page_view
 execute:frappe.call("builder.builder_analytics.enqueue_web_page_view_ingesion")
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 11a1b01bd..b7ea33828 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -6,7 +6,7 @@ declare interface BlockStyleMap {
 	[key: styleProperty]: StyleValue;
 }
 
-type BlockPropsStandardOptions = {
+type BlockPropOptions = {
 	type: "number" | "string" | "boolean" | "select" | "array" | "object" | "image" | "color";
 	isRequired?: boolean;
 	// defaultValue?: any;
@@ -23,7 +23,7 @@ declare type BlockProps = Record<
 		comesFrom: "props" | "dataScript" | "blockDataScript" | null;
 		value: string?;
 		isStandard?: boolean;
-		standardOptions?: BlockPropsStandardOptions;
+		propOptions?: BlockPropOptions;
 	}
 >;
 
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 38027fb5a..cf066a124 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -52,7 +52,7 @@ const keyOptions = computed(() => {
 		Object.entries(propsOfComponentRoot).forEach(([key, value]) => {
 			if (
 				value.isStandard &&
-				(value.standardOptions?.type == "array" || value.standardOptions?.type == "object")
+				(value.propOptions?.type == "array" || value.propOptions?.type == "object")
 			) {
 				repeatableProps.push(key);
 			}
diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index da94e8554..12b45d9bd 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -12,7 +12,7 @@ const componentMap = {
 };
 
 const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
-	const type = propDetails.standardOptions?.type || "string";
+	const type = propDetails.propOptions?.type || "string";
 	let map = {};
 	switch (type) {
 		case "string":
@@ -28,8 +28,8 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 				enableStates: false,
 				allowDynamicValue: true,
 				options: [
-					{ label: propDetails.standardOptions?.options?.trueLabel || "True", value: true },
-					{ label: propDetails.standardOptions?.options?.falseLabel || "False", value: false },
+					{ label: propDetails.propOptions?.options?.trueLabel || "True", value: true },
+					{ label: propDetails.propOptions?.options?.falseLabel || "False", value: false },
 				],
 			};
 			break;
@@ -38,7 +38,7 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 				type: "select",
 				enableStates: false,
 				options:
-					propDetails.standardOptions?.options?.options?.map((item: any) => ({
+					propDetails.propOptions?.options?.options?.map((item: any) => ({
 						label: item,
 						value: item,
 					})) || [],
@@ -51,8 +51,8 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 				allowDynamicValue: true,
 				imageURL: blockController.getBlockProps()[propName].value as string,
 				imageFit:
-					propDetails.standardOptions?.options?.imageFit ||
-					(propDetails.standardOptions?.options?.defaultImageFit as StyleValue),
+					propDetails.propOptions?.options?.imageFit ||
+					(propDetails.propOptions?.options?.defaultImageFit as StyleValue),
 			};
 			break;
 		case "color":
@@ -87,12 +87,12 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 			return value;
 		},
 		getPlaceholder: () => {
-			return propDetails.standardOptions?.options?.defaultValue || null;
+			return propDetails.propOptions?.options?.defaultValue || null;
 		},
 		defaultValue:
 			type == "boolean"
-				? propDetails.standardOptions?.options?.defaultValue == "true"
-				: propDetails.standardOptions?.options?.defaultValue,
+				? propDetails.propOptions?.options?.defaultValue == "true"
+				: propDetails.propOptions?.options?.defaultValue,
 		...map,
 	};
 	return map;
@@ -100,14 +100,14 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 
 const getEventsMap = (propName: string, propDetails: BlockProps[string]) => {
 	let events: Record<string, Function> = {};
-	const type = propDetails.standardOptions?.type || "string";
+	const type = propDetails.propOptions?.type || "string";
 	switch (type) {
 		case "image":
 			events = {
 				"update:imageURL": (val: string) => blockController.setBlockProp(propName, { value: val }),
 				"update:imageFit": (val: StyleValue) =>
 					blockController.setBlockProp(propName, {
-						standardOptions: { options: { ...propDetails.standardOptions?.options, imageFit: val } },
+						propOptions: { options: { ...propDetails.propOptions?.options, imageFit: val } },
 					}),
 			};
 			break;
@@ -129,7 +129,7 @@ const getStandardPropsInputSection = () => {
 	const standardProps = getStandardProps(blockController.getBlockProps());
 	const sections = [];
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
-		const propType = propDetails.standardOptions?.type;
+		const propType = propDetails.propOptions?.type;
 		const component =
 			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) || GenericControl;
 		const getProps = () => {
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 73d297e8d..05dd85c82 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -35,7 +35,7 @@
 											"
 											class="h-4 w-4 text-ink-gray-4" />
 										<component
-											v-if="value.isStandard && value.standardOptions?.type"
+											v-if="value.isStandard && value.propOptions?.type"
 											:is="
 												{
 													number: LucideNumber,
@@ -46,7 +46,7 @@
 													array: LucideArray,
 													color: LucideColor,
 													image: LucideImage,
-												}[value.standardOptions?.type] || LucideZap
+												}[value.propOptions?.type] || LucideZap
 											"
 											class="h-4 w-4 text-ink-gray-4" />
 									</div>
@@ -58,10 +58,10 @@
 											v-if="value.isStandard"
 											class="max-w-24 truncate text-ellipsis text-xs text-ink-gray-4">
 											{{
-												value.standardOptions?.options?.defaultValue
-													? ["array", "object"].includes(value.standardOptions.options.type)
-														? JSON.stringify(value.standardOptions?.options?.defaultValue)
-														: value.standardOptions?.options?.defaultValue
+												value.propOptions?.options?.defaultValue
+													? ["array", "object"].includes(value.propOptions.options.type)
+														? JSON.stringify(value.propOptions?.options?.defaultValue)
+														: value.propOptions?.options?.defaultValue
 													: "No Default Value"
 											}}
 										</p>
@@ -283,11 +283,11 @@ const updateIsStandard = (map: Map<string, BlockProps[string]>, key: string, isS
 	return map;
 };
 
-const updateStandardOptions = (map: Map<string, BlockProps[string]>, key: string, standardOptions: any) => {
+const updatePropOptions = (map: Map<string, BlockProps[string]>, key: string, propOptions: any) => {
 	const value = map.get(key);
 	map.set(key, {
 		...value!,
-		standardOptions,
+		propOptions,
 	});
 	return map;
 };
@@ -315,7 +315,7 @@ const updateProp = async ({
 		isPassedDown: newValue.isPassedDown || false,
 	});
 	map = updateIsStandard(map, newName, newValue.isStandard || false);
-	map = updateStandardOptions(map, newName, newValue.standardOptions || {});
+	map = updatePropOptions(map, newName, newValue.propOptions || {});
 	emit("update:obj", mapToObject(map));
 
 	return map;
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 870e639f8..5d6e84a01 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -168,7 +168,7 @@ const key = ref(props.propName ?? "");
 const value = ref(props.propDetails?.value ?? "");
 const comesFrom = ref<BlockProps[string]["comesFrom"]>(props.propDetails?.comesFrom ?? null);
 const selectedNonStandardPropType = ref(getInitialNonStandardPropType());
-const standardPropOptions = reactive<BlockPropsStandardOptions>(getInitialStandardPropOptions());
+const standardPropOptions = reactive<BlockPropOptions>(getInitialStandardPropOptions());
 const standardPropDependencyMap = reactive<{ [key: string]: any }>(getInitialDependencies());
 const autoCompleteRef = ref<typeof Autocomplete | null>(null);
 const optionsComponentRef = ref<any>(null);
@@ -239,12 +239,12 @@ function getInitialNonStandardPropType() {
 		: "static";
 }
 
-function getInitialStandardPropOptions(): BlockPropsStandardOptions {
+function getInitialStandardPropOptions(): BlockPropOptions {
 	if (props.propDetails?.isStandard) {
 		return {
-			...props.propDetails.standardOptions,
-			isRequired: Boolean(props.propDetails.standardOptions?.isRequired),
-			type: props.propDetails.standardOptions?.type || "string",
+			...props.propDetails.propOptions,
+			isRequired: Boolean(props.propDetails.propOptions?.isRequired),
+			type: props.propDetails.propOptions?.type || "string",
 		};
 	}
 
@@ -257,7 +257,7 @@ function getInitialStandardPropOptions(): BlockPropsStandardOptions {
 }
 
 function getInitialDependencies() {
-	return props.propDetails?.isStandard ? props.propDetails.standardOptions?.dependencies || {} : {};
+	return props.propDetails?.isStandard ? props.propDetails.propOptions?.dependencies || {} : {};
 }
 
 function getStandardPropTypes() {
@@ -371,15 +371,15 @@ function resetStandardState(keepProps: boolean, keepType: boolean) {
 	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : details.standardOptions?.type ?? "string";
+		const nextType = keepType ? standardPropOptions.type : details.propOptions?.type ?? "string";
 
 		Object.assign(standardPropOptions, {
-			...details.standardOptions,
-			isRequired: Boolean(details.standardOptions?.isRequired),
+			...details.propOptions,
+			isRequired: Boolean(details.propOptions?.isRequired),
 			type: nextType,
 		});
 
-		updateDependencyMap(details.standardOptions?.dependencies || {});
+		updateDependencyMap(details.propOptions?.dependencies || {});
 	} else if (isStandardBool.value) {
 		if (!keepType) {
 			standardPropOptions.type = "string";
@@ -433,7 +433,7 @@ function buildPropValue(): BlockProps[string] {
 		isPassedDown: isStandardBool.value || isPassedDown.value === "true",
 		comesFrom: comesFrom.value,
 		value: isStandardBool.value ? null : value.value,
-		standardOptions: isStandardBool.value
+		propOptions: isStandardBool.value
 			? {
 					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 01fdea940..00a39c7cf 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -366,14 +366,14 @@ const detachBlockFromComponent = (block: Block, componentId: null | string) => {
 		Object.entries(block.getBlockProps()).map(([key, prop]) => {
 			const propCopy = { ...prop }; // creating copy to avoid mutating original prop
 			if (propCopy.isStandard) {
-				let value = propCopy.value || propCopy.standardOptions?.options?.defaultValue;
-				if (!["string", "select"].includes(propCopy.standardOptions?.type!)) {
+				let value = propCopy.value || propCopy.propOptions?.options?.defaultValue;
+				if (!["string", "select"].includes(propCopy.propOptions?.type!)) {
 					propCopy.value = JSON.stringify(value);
 				} else {
 					propCopy.value = value;
 				}
 				propCopy.isStandard = false;
-				propCopy.standardOptions = undefined;
+				propCopy.propOptions = undefined;
 			}
 			return [key, propCopy];
 		}),
@@ -1080,16 +1080,16 @@ const getValueForInheritedProp = (
 					return getValueForInheritedProp(propName, parent, getDataScriptValue, getBlockScriptValue);
 				}
 			} else {
-				if (matchingProp.isStandard && matchingProp.standardOptions) {
+				if (matchingProp.isStandard && matchingProp.propOptions) {
 					if (
-						matchingProp.standardOptions.type !== "string" &&
-						matchingProp.standardOptions.type !== "select"
+						matchingProp.propOptions.type !== "string" &&
+						matchingProp.propOptions.type !== "select"
 					) {
 						return matchingProp.value
 							? JSON.parse(matchingProp.value)
-							: matchingProp.standardOptions?.options?.defaultValue || null;
+							: matchingProp.propOptions?.options?.defaultValue || null;
 					} else {
-						return matchingProp.value || matchingProp.standardOptions?.options?.defaultValue || null;
+						return matchingProp.value || matchingProp.propOptions?.options?.defaultValue || null;
 					}
 				}
 				return matchingProp.value;
@@ -1203,8 +1203,8 @@ const getPropValue = (
 	}
 
 	// Handle standard props
-	if (matchingProp.isStandard && matchingProp.standardOptions) {
-		const { type, options } = matchingProp.standardOptions;
+	if (matchingProp.isStandard && matchingProp.propOptions) {
+		const { type, options } = matchingProp.propOptions;
 		const defaultValue = options?.defaultValue ?? null;
 
 		if (PARSEABLE_STANDARD_TYPES.includes(type)) {
@@ -1225,18 +1225,18 @@ const getStandardPropValue = (
 	if (propsOfComponentRoot) {
 		for (const [name, value] of Object.entries(propsOfComponentRoot)) {
 			if (propName === name && value.isStandard) {
-				if (PARSEABLE_STANDARD_TYPES.includes(value.standardOptions?.type || "string")) {
+				if (PARSEABLE_STANDARD_TYPES.includes(value.propOptions?.type || "string")) {
 					const parsedValue = value.value
 						? JSON.parse(value.value)
-						: value.standardOptions?.options?.defaultValue || null;
+						: value.propOptions?.options?.defaultValue || null;
 					return {
 						value: parsedValue,
-						options: value.standardOptions?.options || {},
+						options: value.propOptions?.options || {},
 					};
 				} else {
 					return {
-						value: value.value || value.standardOptions?.options?.defaultValue || null,
-						options: value.standardOptions?.options || {},
+						value: value.value || value.propOptions?.options?.defaultValue || null,
+						options: value.propOptions?.options || {},
 					};
 				}
 			}

From fed7c068ea7a1cf273e9789f86d82087ecf74cc9 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 13:42:22 +0530
Subject: [PATCH 349/547] fix: change to Layers tab only if not in Code tab

---
 frontend/src/utils/useBlockEventHandlers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index 4771b4043..257eb3492 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -93,6 +93,6 @@ const selectBlock = (e: MouseEvent) => {
 	canvasStore.selectBlock(block, e);
 	canvasStore.activeCanvas?.setActiveBreakpoint(breakpoint);
 
-	// builderStore.leftPanelActiveTab = "Layers";
+	if (builderStore.leftPanelActiveTab !== "Code") builderStore.leftPanelActiveTab = "Layers";
 	builderStore.rightPanelActiveTab = "Properties";
 };

From 49264dc518c0d4da9c76ad2553f6d834a2fad947 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 27 Jan 2026 14:01:18 +0530
Subject: [PATCH 350/547] fix(PageCard): Remove user fullname

---
 frontend/src/components/PageCard.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/PageCard.vue b/frontend/src/components/PageCard.vue
index 2e44fabd2..84b57bb36 100644
--- a/frontend/src/components/PageCard.vue
+++ b/frontend/src/components/PageCard.vue
@@ -19,9 +19,7 @@
 						</p>
 					</div>
 					<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
-						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">
-							Edited {{ timeAgo }} by {{ user.fullname }}
-						</p>
+						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">Edited {{ timeAgo }}</p>
 					</UseTimeAgo>
 				</span>
 				<PageActionsDropdown :page="page" size="xs" placement="right">

From 37a043e6221b215d45bde95b9042d99e985026f5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 14:10:15 +0530
Subject: [PATCH 351/547] fix: remove update_prop_options patch

---
 .../patches/update_prop_options.py            | 53 -------------------
 builder/patches.txt                           |  1 -
 2 files changed, 54 deletions(-)
 delete mode 100644 builder/builder/doctype/builder_page/patches/update_prop_options.py

diff --git a/builder/builder/doctype/builder_page/patches/update_prop_options.py b/builder/builder/doctype/builder_page/patches/update_prop_options.py
deleted file mode 100644
index b6e02be8d..000000000
--- a/builder/builder/doctype/builder_page/patches/update_prop_options.py
+++ /dev/null
@@ -1,53 +0,0 @@
-
-import frappe
-
-
-def update_prop_options(blocks):
-	for block in blocks:
-		if block.get("props"):
-			for prop in block["props"].keys():
-				if("standardOptions" in block["props"][prop]):
-					block["props"][prop]["propOptions"] = block["props"][prop]["standardOptions"]
-					del block["props"][prop]["standardOptions"]
-		if "children" in block and block.get("children"):
-			update_prop_options(block["children"])
-
-def execute():
-	pages = frappe.get_all(
-		"Builder Page", fields=["name", "route", "blocks", "draft_blocks"]
-	)
-	for page in pages:
-		blocks = frappe.parse_json(page.get("blocks"))
-		if blocks:
-			update_prop_options(blocks)
-			frappe.db.set_value(
-				"Builder Page",
-				page.name,
-				"blocks",
-				frappe.as_json(blocks, indent=None),
-				update_modified=False,
-			)
-
-		draft_blocks = frappe.parse_json(page.get("draft_blocks"))
-		if draft_blocks:
-			update_prop_options(draft_blocks)
-			frappe.db.set_value(
-				"Builder Page",
-				page.name,
-				"draft_blocks",
-				frappe.as_json(draft_blocks, indent=None),
-				update_modified=False,
-			)
-
-	components = frappe.get_all("Builder Component", fields=["name", "block"])
-	for component in components:
-		component_block = frappe.parse_json(component.get("block"))
-		if component_block:
-			update_prop_options([component_block])
-			frappe.db.set_value(
-				"Builder Component",
-				component.name,
-				"block",
-				frappe.as_json(component_block, indent=None),
-				update_modified=False,
-			)
diff --git a/builder/patches.txt b/builder/patches.txt
index 2400be25d..16e7c56fe 100644
--- a/builder/patches.txt
+++ b/builder/patches.txt
@@ -9,7 +9,6 @@ builder.builder.doctype.builder_component.patches.set_component_id
 builder.builder.doctype.builder_page.patches.properly_extend_blocks_from_component
 builder.builder.doctype.builder_page.patches.attach_client_script_to_builder_page
 builder.builder.doctype.builder_page.patches.enable_auto_convert_to_webp_by_default
-builder.builder.doctype.builder_page.patches.update_prop_options
 builder.builder.doctype.builder_client_script.patches.trigger_asset_compression
 builder.builder.patches.add_composite_index_to_web_page_view
 execute:frappe.call("builder.builder_analytics.enqueue_web_page_view_ingesion")

From 9edb31b47e7e255bb74da8b9957892bf44787400 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 27 Jan 2026 15:01:44 +0530
Subject: [PATCH 352/547] refactor: Rename prop 'styleProperty' with
 'propertyKey' for correctness

---
 frontend/components.d.ts                      |  3 +--
 frontend/src/components/BackgroundHandler.vue |  4 ++--
 .../src/components/BlockFlexLayoutHandler.vue | 16 +++++++-------
 .../src/components/BlockGridLayoutHandler.vue |  2 +-
 .../src/components/BlockPositionHandler.vue   |  2 +-
 .../HTMLOptionsSection.ts                     |  2 +-
 .../ImageOptionsSection.ts                    |  4 ++--
 .../BlockPropertySections/LayoutSection.ts    |  3 ++-
 .../BlockPropertySections/LinkSection.ts      |  4 ++--
 .../BlockPropertySections/SpacingSection.ts   |  4 ++--
 .../BlockPropertySections/StyleSection.ts     | 22 +++++++++----------
 .../TransitionSection.ts                      |  6 ++---
 .../TypographySection.ts                      | 16 +++++++-------
 .../VideoOptionsSection.ts                    |  2 +-
 .../Controls/AttributePropertyControl.vue     |  6 ++---
 .../Controls/BasePropertyControl.vue          | 12 +++++-----
 .../Controls/StylePropertyControl.vue         | 15 ++++++-------
 frontend/src/components/DimensionInput.vue    |  2 +-
 frontend/src/utils/blockController.ts         |  3 +--
 frontend/src/utils/helpers.ts                 |  6 ++---
 20 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 83c52c2bd..159c3da61 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -58,7 +58,6 @@ declare module 'vue' {
     DimensionInput: typeof import('./src/components/DimensionInput.vue')['default']
     DraggablePopup: typeof import('./src/components/Controls/DraggablePopup.vue')['default']
     DynamicValueHandler: typeof import('./src/components/Controls/DynamicValueHandler.vue')['default']
-    DynamicValueOverlay: typeof import('./src/components/Controls/DynamicValueOverlay.vue')['default']
     EditableSpan: typeof import('./src/components/EditableSpan.vue')['default']
     EyeDropper: typeof import('./src/components/Icons/EyeDropper.vue')['default']
     Files: typeof import('./src/components/Icons/Files.vue')['default']
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 695c0ef1c..07ec054b4 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<div class="flex w-full items-center justify-between">
 				<StylePropertyControl
-					styleProperty="backgroundImage"
+					propertyKey="backgroundImage"
 					:component="Input"
 					label="BG Image"
 					:enableStates="false"
@@ -78,7 +78,7 @@
 	</Popover>
 	<StylePropertyControl
 		label="BG Color"
-		styleProperty="backgroundColor"
+		propertyKey="backgroundColor"
 		:component="ColorInput"
 		:popoverOffset="120" />
 </template>
diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 6ec459704..43da7faf8 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -1,6 +1,6 @@
 <template>
 	<StylePropertyControl
-		styleProperty="flexDirection"
+		propertyKey="flexDirection"
 		defaultValue="row"
 		:component="OptionToggle"
 		label="Direction"
@@ -10,14 +10,14 @@
 			{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
 		]"></StylePropertyControl>
 	<StylePropertyControl
-		styleProperty="alignItems"
+		propertyKey="alignItems"
 		label="Placement"
 		:enableStates="false"
 		v-if="blockController.isFlex()"
 		:component="PlacementControl"></StylePropertyControl>
 	<StylePropertyControl
 		v-if="blockController.isFlex()"
-		styleProperty="justifyContent"
+		propertyKey="justifyContent"
 		type="select"
 		label="Distribution"
 		:options="[
@@ -28,11 +28,11 @@
 	<StylePropertyControl
 		v-if="blockController.isFlex()"
 		label="Gap"
-		styleProperty="gap"
+		propertyKey="gap"
 		:enableSlider="true"
 		:unitOptions="['px', 'em', 'rem']" />
 	<StylePropertyControl
-		styleProperty="flexWrap"
+		propertyKey="flexWrap"
 		:component="OptionToggle"
 		label="Wrap"
 		v-if="blockController.isFlex()"
@@ -44,7 +44,7 @@
 	<div class="flex flex-col gap-3" v-if="blockController.getParentBlock()?.isFlex()">
 		<StylePropertyControl
 			label="Order"
-			styleProperty="order"
+			propertyKey="order"
 			:enableSlider="true"
 			:min="-99"
 			:max="99"
@@ -52,7 +52,7 @@
 			:defaultValue="0" />
 		<StylePropertyControl
 			label="Grow"
-			styleProperty="flexGrow"
+			propertyKey="flexGrow"
 			:component="OptionToggle"
 			:options="[
 				{ label: 'Yes', value: 1 },
@@ -61,7 +61,7 @@
 			:defaultValue="0" />
 		<StylePropertyControl
 			label="Shrink"
-			styleProperty="flexShrink"
+			propertyKey="flexShrink"
 			:component="OptionToggle"
 			:options="[
 				{ label: 'Yes', value: 1 },
diff --git a/frontend/src/components/BlockGridLayoutHandler.vue b/frontend/src/components/BlockGridLayoutHandler.vue
index 9d90942bd..bee8edda8 100644
--- a/frontend/src/components/BlockGridLayoutHandler.vue
+++ b/frontend/src/components/BlockGridLayoutHandler.vue
@@ -46,7 +46,7 @@
 		:modelValue="height"
 		@update:modelValue="setHeight" />
 	<StylePropertyControl
-		styleProperty="gap"
+		propertyKey="gap"
 		label="Gap"
 		v-if="blockController.isGrid()"
 		:enableSlider="true"
diff --git a/frontend/src/components/BlockPositionHandler.vue b/frontend/src/components/BlockPositionHandler.vue
index 8c533487c..3550f6c5f 100644
--- a/frontend/src/components/BlockPositionHandler.vue
+++ b/frontend/src/components/BlockPositionHandler.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex w-full flex-col items-center gap-5">
 		<StylePropertyControl
-			styleProperty="position"
+			propertyKey="position"
 			:component="OptionToggle"
 			:getModelValue="() => position"
 			:setModelValue="(val) => (position = val)"
diff --git a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
index 507bd65ba..caab425ff 100644
--- a/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/HTMLOptionsSection.ts
@@ -14,7 +14,7 @@ const HTMLOptionsSectionProperties = [
 				autofocus: false,
 				height: "60px",
 				controlType: "key",
-				styleProperty: "innerHTML",
+				propertyKey: "innerHTML",
 				labelPlacement: "top",
 				getModelValue: () => blockController.getInnerHTML() || "",
 				setModelValue: (val: string) => blockController.setInnerHTML(val),
diff --git a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
index 5fd59708d..616b8f69c 100644
--- a/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/ImageOptionsSection.ts
@@ -11,7 +11,7 @@ const imageOptionsSectionProperties = [
 		getProps: () => {
 			return {
 				component: ImageUploadInput,
-				styleProperty: "src",
+				propertyKey: "src",
 				label: "Image URL",
 				allowDynamicValue: true,
 				popoverOffset: 120,
@@ -65,7 +65,7 @@ const imageOptionsSectionProperties = [
 		component: AttributePropertyControl,
 		getProps: () => {
 			return {
-				styleProperty: "alt",
+				propertyKey: "alt",
 				label: "Alt Text",
 				allowDynamicValue: true,
 				getModelValue: () => blockController.getAttribute("alt") || "",
diff --git a/frontend/src/components/BlockPropertySections/LayoutSection.ts b/frontend/src/components/BlockPropertySections/LayoutSection.ts
index c30975774..1bdd97496 100644
--- a/frontend/src/components/BlockPropertySections/LayoutSection.ts
+++ b/frontend/src/components/BlockPropertySections/LayoutSection.ts
@@ -10,9 +10,10 @@ const layoutSectionProperties = [
 		condition: () => !blockController.isText(),
 		getProps: () => {
 			return {
-				styleProperty: "display",
+				propertyKey: "display",
 				component: OptionToggle,
 				label: "Type",
+				enableStates: false,
 				options: [
 					{
 						label: "Stack",
diff --git a/frontend/src/components/BlockPropertySections/LinkSection.ts b/frontend/src/components/BlockPropertySections/LinkSection.ts
index 0f705ad3d..c8cfbfd0f 100644
--- a/frontend/src/components/BlockPropertySections/LinkSection.ts
+++ b/frontend/src/components/BlockPropertySections/LinkSection.ts
@@ -8,7 +8,7 @@ const linkSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Link To",
-				styleProperty: "href",
+				propertyKey: "href",
 				allowDynamicValue: true,
 				getModelValue: () => blockController.getAttribute("href"),
 				setModelValue: async (val: string) => {
@@ -43,7 +43,7 @@ const linkSectionProperties = [
 			return {
 				label: "Opens in",
 				type: "select",
-				styleProperty: "target",
+				propertyKey: "target",
 				allowDynamicValue: false,
 				getModelValue: () => blockController.getAttribute("target") || "_self",
 				setModelValue: (val: string) => {
diff --git a/frontend/src/components/BlockPropertySections/SpacingSection.ts b/frontend/src/components/BlockPropertySections/SpacingSection.ts
index 2233a010c..b2201c443 100644
--- a/frontend/src/components/BlockPropertySections/SpacingSection.ts
+++ b/frontend/src/components/BlockPropertySections/SpacingSection.ts
@@ -11,7 +11,7 @@ const spacingSectionProperties = [
 				getModelValue: () => blockController.getMargin({ nativeOnly: true }),
 				getPlaceholder: () => blockController.getMargin({ cascading: true }),
 				setModelValue: (val: string) => blockController.setMargin(val),
-				styleProperty: "margin",
+				propertyKey: "margin",
 				enableSlider: true,
 				unitOptions: ["px", "em", "rem"],
 			};
@@ -32,7 +32,7 @@ const spacingSectionProperties = [
 				getModelValue: () => blockController.getPadding({ nativeOnly: true }),
 				getPlaceholder: () => blockController.getPadding({ cascading: true }),
 				setModelValue: (val: string) => blockController.setPadding(val),
-				styleProperty: "padding",
+				propertyKey: "padding",
 			};
 		},
 	},
diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 671b46d15..1f1fbe3ac 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -33,7 +33,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Opacity",
-				styleProperty: "opacity",
+				propertyKey: "opacity",
 				enableSlider: false,
 				component: RangeInput,
 				getModelValue: () => {
@@ -57,7 +57,7 @@ const styleSectionProperties = [
 		component: StylePropertyControl,
 		getProps: () => {
 			return {
-				styleProperty: "color",
+				propertyKey: "color",
 				component: ColorInput,
 				label: "Text Color",
 				popoverOffset: 120,
@@ -70,7 +70,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				component: ColorInput,
-				styleProperty: "borderColor",
+				propertyKey: "borderColor",
 				popoverOffset: 120,
 				label: "Border Color",
 			};
@@ -95,7 +95,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Border Width",
-				styleProperty: "borderWidth",
+				propertyKey: "borderWidth",
 				enableSlider: true,
 				unitOptions: ["px", "%", "em", "rem"],
 				minValue: 0,
@@ -109,7 +109,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Border Style",
-				styleProperty: "borderStyle",
+				propertyKey: "borderStyle",
 				type: "select",
 				options: [
 					{ value: "solid", label: "Solid" },
@@ -126,7 +126,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Shadow",
-				styleProperty: "boxShadow",
+				propertyKey: "boxShadow",
 				type: "select",
 				options: [
 					{ value: null, label: "None" },
@@ -152,7 +152,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Radius",
-				styleProperty: "borderRadius",
+				propertyKey: "borderRadius",
 				enableSlider: true,
 				unitOptions: ["px", "%"],
 				minValue: 0,
@@ -178,7 +178,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Z-Index",
-				styleProperty: "zIndex",
+				propertyKey: "zIndex",
 			};
 		},
 		searchKeyWords: "Z, Index, ZIndex, Z Index, Z-index, Z-Index",
@@ -193,7 +193,7 @@ const styleSectionProperties = [
 			return {
 				label: "Overflow X",
 				type: "select",
-				styleProperty: "overflowX",
+				propertyKey: "overflowX",
 				options: overflowOptions,
 				setModelValue: (val: StyleValue) => {
 					if (val === "unset") {
@@ -211,7 +211,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Overflow Y",
-				styleProperty: "overflowY",
+				propertyKey: "overflowY",
 				type: "select",
 				options: overflowOptions,
 				setModelValue: (val: StyleValue) => {
@@ -231,7 +231,7 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Cursor",
-				styleProperty: "cursor",
+				propertyKey: "cursor",
 				type: "select",
 				options: [
 					{ value: null, label: "Default" },
diff --git a/frontend/src/components/BlockPropertySections/TransitionSection.ts b/frontend/src/components/BlockPropertySections/TransitionSection.ts
index ad53067f1..86834321b 100644
--- a/frontend/src/components/BlockPropertySections/TransitionSection.ts
+++ b/frontend/src/components/BlockPropertySections/TransitionSection.ts
@@ -7,7 +7,7 @@ const transitionSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Speed",
-				styleProperty: "transitionDuration",
+				propertyKey: "transitionDuration",
 				type: "select",
 				enableStates: false,
 				options: [
@@ -43,7 +43,7 @@ const transitionSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Timing",
-				styleProperty: "transitionTimingFunction",
+				propertyKey: "transitionTimingFunction",
 				type: "select",
 				enableStates: false,
 				options: [
@@ -63,7 +63,7 @@ const transitionSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Properties",
-				styleProperty: "transitionProperty",
+				propertyKey: "transitionProperty",
 				type: "select",
 				enableStates: false,
 				options: [
diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index f4944dc63..5b527d46a 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -20,7 +20,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Content",
-				styleProperty: "innerHTML",
+				propertyKey: "innerHTML",
 				// @ts-ignore
 				allowDynamicValue: true,
 				getModelValue: () => blockController.getText(),
@@ -39,7 +39,7 @@ const typographySectionProperties = [
 			return {
 				label: "Family",
 				component: Autocomplete,
-				styleProperty: "fontFamily",
+				propertyKey: "fontFamily",
 				getOptions: (filterString: string) => {
 					const fontOptions = [] as { label: string; value: string }[];
 					userFonts.data.forEach((font: UserFont) => {
@@ -92,7 +92,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Weight",
-				styleProperty: "fontWeight",
+				propertyKey: "fontWeight",
 				component: Autocomplete,
 				options: getFontWeightOptions((blockController.getStyle("fontFamily") || "Inter") as string),
 			};
@@ -104,7 +104,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Size",
-				styleProperty: "fontSize",
+				propertyKey: "fontSize",
 				enableSlider: true,
 				minValue: 1,
 				unitOptions: ["px", "em", "rem"],
@@ -118,7 +118,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Height",
-				styleProperty: "lineHeight",
+				propertyKey: "lineHeight",
 			};
 		},
 		searchKeyWords: "Font, Height, LineHeight, Line Height",
@@ -129,7 +129,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Letter",
-				styleProperty: "letterSpacing",
+				propertyKey: "letterSpacing",
 			};
 		},
 		searchKeyWords: "Font, Letter, LetterSpacing, Letter Spacing",
@@ -140,7 +140,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Transform",
-				styleProperty: "textTransform",
+				propertyKey: "textTransform",
 				type: "select",
 				options: [
 					{
@@ -170,7 +170,7 @@ const typographySectionProperties = [
 		getProps: () => {
 			return {
 				label: "Align",
-				styleProperty: "textAlign",
+				propertyKey: "textAlign",
 				component: OptionToggle,
 				options: [
 					{
diff --git a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
index 67a08f1a4..945ef148f 100644
--- a/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/VideoOptionsSection.ts
@@ -23,7 +23,7 @@ const videoOptionsSectionProperties = [
 		getProps: () => {
 			return {
 				component: ImageUploadInput,
-				styleProperty: "poster",
+				propertyKey: "poster",
 				label: "Poster",
 			};
 		},
diff --git a/frontend/src/components/Controls/AttributePropertyControl.vue b/frontend/src/components/Controls/AttributePropertyControl.vue
index d50837cdc..e47638cc4 100644
--- a/frontend/src/components/Controls/AttributePropertyControl.vue
+++ b/frontend/src/components/Controls/AttributePropertyControl.vue
@@ -18,7 +18,7 @@ import { computed } from "vue";
 
 const props = withDefaults(
 	defineProps<{
-		styleProperty: string;
+		propertyKey: string;
 		label?: string;
 		placeholder?: string;
 		getModelValue?: () => string;
@@ -45,9 +45,9 @@ const baseProps = computed(() => ({
 	...props,
 	controlType: "attribute" as const,
 	getModelValue:
-		props.getModelValue || (() => (blockController.getAttribute(props.styleProperty) as string) || ""),
+		props.getModelValue || (() => (blockController.getAttribute(props.propertyKey) as string) || ""),
 	setModelValue:
-		props.setModelValue || ((value: string) => blockController.setAttribute(props.styleProperty, value)),
+		props.setModelValue || ((value: string) => blockController.setAttribute(props.propertyKey, value)),
 }));
 
 const getVariantValue = (variantName: string) => {
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index f863d6d94..8bc8ec7d6 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -97,7 +97,7 @@ const emit = defineEmits<{
 
 const props = withDefaults(
 	defineProps<{
-		styleProperty: string;
+		propertyKey: string;
 		label?: string;
 		placeholder?: string;
 		controlType?: "style" | "attribute" | "key";
@@ -145,7 +145,7 @@ const controlAttrs = computed(() => {
 });
 
 const defaultValue = computed(() => {
-	return blockController.getCascadingStyle(props.styleProperty) ?? props.defaultValue;
+	return blockController.getCascadingStyle(props.propertyKey) ?? props.defaultValue;
 });
 
 const modelValue = computed(() => props.getModelValue?.() ?? "");
@@ -158,7 +158,7 @@ const normalizeInputValue = (value: string | number | null | { label: string; va
 		value = value.value;
 	}
 	if (value && typeof value === "string") {
-		value = normalizeValueWithUnits(value, props.unitOptions, props.styleProperty);
+		value = normalizeValueWithUnits(value, props.unitOptions, props.propertyKey);
 	}
 	return value as string;
 };
@@ -262,7 +262,7 @@ const handleKeyDown = (e: KeyboardEvent, variantName?: string) => {
 
 function setDynamicValue(value: string) {
 	blockController.getSelectedBlocks().forEach((block) => {
-		block.setDynamicValue(props.styleProperty, props.controlType, value);
+		block.setDynamicValue(props.propertyKey, props.controlType, value);
 	});
 	showDynamicValueModal.value = false;
 	emit("setDynamicValue");
@@ -274,13 +274,13 @@ const dynamicValue = computed(() => {
 
 	const dataKeyObj = blocks[0]
 		.getDynamicValues()
-		.find((obj) => obj.type === props.controlType && obj.property === props.styleProperty);
+		.find((obj) => obj.type === props.controlType && obj.property === props.propertyKey);
 	return dataKeyObj?.key || "";
 });
 
 const clearDynamicValue = () => {
 	blockController.getSelectedBlocks().forEach((block) => {
-		block.removeDynamicValue(props.styleProperty, props.controlType);
+		block.removeDynamicValue(props.propertyKey, props.controlType);
 	});
 	emit("clearDynamicValue");
 };
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index c5f6e0417..eb46646e3 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -18,7 +18,7 @@ import { computed } from "vue";
 
 const props = withDefaults(
 	defineProps<{
-		styleProperty: string;
+		propertyKey: string;
 		label?: string;
 		placeholder?: string;
 		getModelValue?: () => string;
@@ -54,7 +54,7 @@ const stateLabels: Record<string, string> = {
 const stateVariants = computed(() =>
 	props.enabledStates.map((state) => ({
 		name: state,
-		property: `${state}:${props.styleProperty}`,
+		property: `${state}:${props.propertyKey}`,
 		label: stateLabels[state] || state,
 	})),
 );
@@ -66,7 +66,7 @@ const allVariants = computed(() => [
 
 const getVariantValue = (variantName: string): string => {
 	if (stateVariants.value.find((v) => v.name === variantName)) {
-		return String(blockController.getNativeStyle(`${variantName}:${props.styleProperty}`) || "");
+		return String(blockController.getNativeStyle(`${variantName}:${props.propertyKey}`) || "");
 	}
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
 	return property ? String(blockController.getAttribute(property) || "") : "";
@@ -83,7 +83,7 @@ const setVariantValue = (variantName: string, value: string | null) => {
 				}
 			});
 		}
-		blockController.setStyle(`${variantName}:${props.styleProperty}`, value);
+		blockController.setStyle(`${variantName}:${props.propertyKey}`, value);
 		return;
 	}
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
@@ -96,12 +96,11 @@ const baseProps = computed(() => {
 		...rest,
 		controlType: "style" as const,
 		getModelValue:
-			props.getModelValue || (() => String(blockController.getNativeStyle(props.styleProperty) ?? "")),
+			props.getModelValue || (() => String(blockController.getNativeStyle(props.propertyKey) ?? "")),
 		setModelValue:
-			props.setModelValue || ((value: string) => blockController.setStyle(props.styleProperty, value)),
+			props.setModelValue || ((value: string) => blockController.setStyle(props.propertyKey, value)),
 		getPlaceholder:
-			props.getPlaceholder ||
-			(() => String(blockController.getCascadingStyle(props.styleProperty) ?? "unset")),
+			props.getPlaceholder || (() => String(blockController.getCascadingStyle(props.propertyKey) ?? "unset")),
 	};
 });
 </script>
diff --git a/frontend/src/components/DimensionInput.vue b/frontend/src/components/DimensionInput.vue
index d3c094f27..c27198a27 100644
--- a/frontend/src/components/DimensionInput.vue
+++ b/frontend/src/components/DimensionInput.vue
@@ -1,7 +1,7 @@
 <template>
 	<StylePropertyControl
 		:component="Autocomplete"
-		:styleProperty="property"
+		:propertyKey="property"
 		:label="label"
 		:enableSlider="true"
 		:options="[
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 36ca987ab..47bd4325e 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -1,5 +1,4 @@
-import type Block from "@/block";
-import type BlockDataKey from "@/block";
+import type { default as Block, default as BlockDataKey } from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "./blockTemplate";
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 5d03ae57a..8913f2f98 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -940,14 +940,14 @@ function addUnitToNumber(numberStr: string, unit: string): string {
  * Handles both single values and spacing properties with multiple values
  * @param value - CSS value string
  * @param unitOptions - Array of possible units, first is used as default
- * @param styleProperty - CSS property name (used to detect spacing properties)
+ * @param propertyKey - CSS property name (used to detect spacing properties)
  * @returns Normalized value string with units added
  */
-function normalizeValueWithUnits(value: string, unitOptions: string[], styleProperty: string): string {
+function normalizeValueWithUnits(value: string, unitOptions: string[], propertyKey: string): string {
 	if (!unitOptions.length) return value;
 
 	const defaultUnit = unitOptions[0];
-	const isSpacingProperty = styleProperty === "margin" || styleProperty === "padding";
+	const isSpacingProperty = propertyKey === "margin" || propertyKey === "padding";
 
 	if (isSpacingProperty) {
 		const parts = value.trim().split(/\s+/);

From 4010b2285f780fe80a145924e1653a10df5de007 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 16:04:37 +0530
Subject: [PATCH 353/547] chore: reset yarn.lock

---
 yarn.lock | 1697 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 1608 insertions(+), 89 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2443ffbfc..0bcf6511a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@akryum/tinypool@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@akryum/tinypool/-/tinypool-0.3.1.tgz#a14b3d51a400e7c0ab4c7e2b1c2e2fa0386aea87"
+  integrity sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -30,6 +35,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
   integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
 
+"@babel/helper-validator-identifier@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
+  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
+
 "@babel/parser@^7.27.2", "@babel/parser@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.4.tgz#da25d4643532890932cc03f7705fe19637e03fa8"
@@ -37,6 +47,13 @@
   dependencies:
     "@babel/types" "^7.28.4"
 
+"@babel/parser@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.28.5.tgz#0b0225ee90362f030efd644e8034c99468893b08"
+  integrity sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==
+  dependencies:
+    "@babel/types" "^7.28.5"
+
 "@babel/types@^7.28.4":
   version "7.28.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.4.tgz#0a4e618f4c60a7cd6c11cb2d48060e4dbe38ac3a"
@@ -45,6 +62,14 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
+"@babel/types@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
+  integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
 "@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.18.6", "@codemirror/autocomplete@^6.3.2":
   version "6.19.0"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.19.0.tgz#4e6d6ddc9329ed387b2f7efd38febd3f6e2f63d8"
@@ -65,6 +90,16 @@
     "@codemirror/view" "^6.27.0"
     "@lezer/common" "^1.1.0"
 
+"@codemirror/commands@^6.3.0":
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.10.0.tgz#b3206984fec8443c4d910565eb2e9d591c7d80b2"
+  integrity sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
 "@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.3.1":
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz#763ca41aee81bb2431be55e3cfcc7cc8e91421a3"
@@ -104,7 +139,7 @@
     "@lezer/common" "^1.0.0"
     "@lezer/javascript" "^1.0.0"
 
-"@codemirror/lang-json@^6.0.2":
+"@codemirror/lang-json@^6.0.1", "@codemirror/lang-json@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.2.tgz#054b160671306667e25d80385286049841836179"
   integrity sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==
@@ -123,7 +158,7 @@
     "@lezer/common" "^1.2.1"
     "@lezer/python" "^1.1.4"
 
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0":
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.11.3", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0", "@codemirror/language@^6.9.2":
   version "6.11.3"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.3.tgz#8e6632df566a7ed13a1bd307f9837765bb1abfdd"
   integrity sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==
@@ -144,6 +179,15 @@
     "@codemirror/view" "^6.35.0"
     crelt "^1.0.5"
 
+"@codemirror/lint@^6.4.2":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.9.2.tgz#09ed0aedec13381c9e36e1ac5d126027740c3ef4"
+  integrity sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
 "@codemirror/search@^6.0.0", "@codemirror/search@^6.5.11":
   version "6.5.11"
   resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.11.tgz#a324ffee36e032b7f67aa31c4fb9f3e6f9f3ed63"
@@ -153,14 +197,14 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.3.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@^6.5.2":
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
   integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
   dependencies:
     "@marijn/find-cluster-break" "^1.0.0"
 
-"@codemirror/theme-one-dark@^6.1.3":
+"@codemirror/theme-one-dark@^6.1.2", "@codemirror/theme-one-dark@^6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz#1dbb73f6e73c53c12ad2aed9f48c263c4e63ea37"
   integrity sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==
@@ -180,6 +224,16 @@
     style-mod "^4.1.0"
     w3c-keyname "^2.2.4"
 
+"@codemirror/view@^6.22.0":
+  version "6.39.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.39.4.tgz#b76c73ab48c749cc9ab9e5e0a5d9e47df9f31cb5"
+  integrity sha512-xMF6OfEAUVY5Waega4juo1QGACfNkNF+aJLqpd8oUJz96ms2zbfQ9Gh35/tI3y8akEV31FruKfj7hBnIU/nkqA==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    crelt "^1.0.6"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -400,6 +454,63 @@
   dependencies:
     "@tanstack/vue-virtual" "^3.0.0-beta.60"
 
+"@histoire/app@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/app/-/app-0.17.17.tgz#3aa6fbb7be516c865480b5a2cf2cfad07e230af0"
+  integrity sha512-2i1V38o08V+eaR0d3L0/EA6AYG14xyQBJbyYv0Hz3r4sH3Elj1FoJiwolbCfTDmkOnSgwWTc7+JoCqkLIbxfhA==
+  dependencies:
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    "@types/flexsearch" "^0.7.6"
+    flexsearch "0.7.21"
+    shiki-es "^0.2.0"
+
+"@histoire/controls@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/controls/-/controls-0.17.17.tgz#25ab3d3c3500f783244c3f7ca6c5b7e88c8ddb0a"
+  integrity sha512-W22HZ/X078IZmE09XEKj4Fq7LxQPP/w/aMYAzm94V2NIGhI0fkiSaBDvyTUl7NYrGT66Wq5+9Po1IWPMllk3cQ==
+  dependencies:
+    "@codemirror/commands" "^6.3.0"
+    "@codemirror/lang-json" "^6.0.1"
+    "@codemirror/language" "^6.9.2"
+    "@codemirror/lint" "^6.4.2"
+    "@codemirror/state" "^6.3.1"
+    "@codemirror/theme-one-dark" "^6.1.2"
+    "@codemirror/view" "^6.22.0"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+
+"@histoire/plugin-vue@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/plugin-vue/-/plugin-vue-0.17.17.tgz#65cde4685738c06edf0f36b23b93f966a1f642c3"
+  integrity sha512-O5h/Ww6IT2CygVVT4onN27IZt11Z2qE8XeHeXJCEese3dxnnVWRhjMpsaWAU5XqgfjKNAiALJk86b49/6NQaRg==
+  dependencies:
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    change-case "^4.1.2"
+    globby "^13.2.2"
+    launch-editor "^2.6.1"
+    pathe "^1.1.1"
+
+"@histoire/shared@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/shared/-/shared-0.17.17.tgz#b72660f0ced7930a895aea82d567b59bb19c55c9"
+  integrity sha512-ueGtURysonT0MujCObPCR57+mgZluMEXCrbc2FBgKAD/DoAt38tNwSGsmLldk2O6nTr7lr6ClbVSgWrLwgY6Xw==
+  dependencies:
+    "@histoire/vendors" "^0.17.17"
+    "@types/fs-extra" "^9.0.13"
+    "@types/markdown-it" "^12.2.3"
+    chokidar "^3.5.3"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+
+"@histoire/vendors@^0.17.17":
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/@histoire/vendors/-/vendors-0.17.17.tgz#d90c6c1324b5a694673ae98731b6c85a8bd5aa01"
+  integrity sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==
+
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
@@ -438,6 +549,43 @@
     local-pkg "^1.1.1"
     mlly "^1.7.4"
 
+"@inquirer/ansi@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-1.0.2.tgz#674a4c4d81ad460695cb2a1fc69d78cd187f337e"
+  integrity sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==
+
+"@inquirer/confirm@^5.0.0":
+  version "5.1.21"
+  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-5.1.21.tgz#610c4acd7797d94890a6e2dde2c98eb1e891dd12"
+  integrity sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==
+  dependencies:
+    "@inquirer/core" "^10.3.2"
+    "@inquirer/type" "^3.0.10"
+
+"@inquirer/core@^10.3.2":
+  version "10.3.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-10.3.2.tgz#535979ff3ff4fe1e7cc4f83e2320504c743b7e20"
+  integrity sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==
+  dependencies:
+    "@inquirer/ansi" "^1.0.2"
+    "@inquirer/figures" "^1.0.15"
+    "@inquirer/type" "^3.0.10"
+    cli-width "^4.1.0"
+    mute-stream "^2.0.0"
+    signal-exit "^4.1.0"
+    wrap-ansi "^6.2.0"
+    yoctocolors-cjs "^2.1.3"
+
+"@inquirer/figures@^1.0.15":
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.15.tgz#dbb49ed80df11df74268023b496ac5d9acd22b3a"
+  integrity sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==
+
+"@inquirer/type@^3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-3.0.10.tgz#11ed564ec78432a200ea2601a212d24af8150d50"
+  integrity sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==
+
 "@interactjs/types@1.10.27":
   version "1.10.27"
   resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
@@ -577,6 +725,18 @@
   resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"
   integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
 
+"@mswjs/interceptors@^0.40.0":
+  version "0.40.0"
+  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.40.0.tgz#1b45f215ba8c2983ed133763ca03af92896083d6"
+  integrity sha512-EFd6cVbHsgLa6wa4RljGj6Wk75qoHxUSyc5asLyyPSyuhIcdS2Q3Phw6ImS1q+CkALthJRShiYfKANcQMuMqsQ==
+  dependencies:
+    "@open-draft/deferred-promise" "^2.2.0"
+    "@open-draft/logger" "^0.3.0"
+    "@open-draft/until" "^2.0.0"
+    is-node-process "^1.2.0"
+    outvariant "^1.4.3"
+    strict-event-emitter "^0.5.1"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -598,11 +758,34 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@open-draft/deferred-promise@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz#4a822d10f6f0e316be4d67b4d4f8c9a124b073bd"
+  integrity sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==
+
+"@open-draft/logger@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/logger/-/logger-0.3.0.tgz#2b3ab1242b360aa0adb28b85f5d7da1c133a0954"
+  integrity sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==
+  dependencies:
+    is-node-process "^1.2.0"
+    outvariant "^1.4.0"
+
+"@open-draft/until@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-2.1.0.tgz#0acf32f470af2ceaf47f095cdecd40d68666efda"
+  integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@polka/url@^1.0.0-next.24":
+  version "1.0.0-next.29"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
+  integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
+
 "@popperjs/core@^2.11.2", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1231,11 +1414,30 @@
     "@tiptap/extension-bubble-menu" "^2.27.1"
     "@tiptap/extension-floating-menu" "^2.27.1"
 
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
+
 "@types/estree@1.0.8", "@types/estree@^1.0.0":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
+"@types/flexsearch@^0.7.6":
+  version "0.7.42"
+  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.42.tgz#4c3a551f4c78db330a9a1d9e419eb8f100f80bbb"
+  integrity sha512-FdKaw3dPgcCvqU9w8SGgqx8PrxFF2EKySRhEj1nc45HNe/2cBLff3pF52C67hzeUbNhq49t7XRIIibBd41vcIg==
+  dependencies:
+    flexsearch "*"
+
+"@types/fs-extra@^9.0.13":
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
+  integrity sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/hast@^3.0.0":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
@@ -1248,11 +1450,19 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/linkify-it@^5":
+"@types/linkify-it@*", "@types/linkify-it@^5":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
+"@types/markdown-it@^12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
+  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+
 "@types/markdown-it@^14.0.0":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
@@ -1261,7 +1471,7 @@
     "@types/linkify-it" "^5"
     "@types/mdurl" "^2"
 
-"@types/mdurl@^2":
+"@types/mdurl@*", "@types/mdurl@^2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
@@ -1288,6 +1498,11 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.10.tgz#277a542aff6776d8a9b15f2ac682a663e3e94bbd"
   integrity sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==
 
+"@types/statuses@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/statuses/-/statuses-2.0.6.tgz#66748315cc9a96d63403baa8671b2c124f8633aa"
+  integrity sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==
+
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -1339,6 +1554,70 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
   integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
 
+"@vitejs/plugin-vue@^4.0.0":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
+
+"@vitest/expect@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.9.tgz#b566ea20d58ea6578d8dc37040d6c1a47ebe5ff8"
+  integrity sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==
+  dependencies:
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
+    chai "^5.1.2"
+    tinyrainbow "^1.2.0"
+
+"@vitest/mocker@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.9.tgz#36243b27351ca8f4d0bbc4ef91594ffd2dc25ef5"
+  integrity sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==
+  dependencies:
+    "@vitest/spy" "2.1.9"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.12"
+
+"@vitest/pretty-format@2.1.9", "@vitest/pretty-format@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.9.tgz#434ff2f7611689f9ce70cd7d567eceb883653fdf"
+  integrity sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==
+  dependencies:
+    tinyrainbow "^1.2.0"
+
+"@vitest/runner@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.9.tgz#cc18148d2d797fd1fd5908d1f1851d01459be2f6"
+  integrity sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==
+  dependencies:
+    "@vitest/utils" "2.1.9"
+    pathe "^1.1.2"
+
+"@vitest/snapshot@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.9.tgz#24260b93f798afb102e2dcbd7e61c6dfa118df91"
+  integrity sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==
+  dependencies:
+    "@vitest/pretty-format" "2.1.9"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+
+"@vitest/spy@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.9.tgz#cb28538c5039d09818b8bfa8edb4043c94727c60"
+  integrity sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==
+  dependencies:
+    tinyspy "^3.0.2"
+
+"@vitest/utils@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.9.tgz#4f2486de8a54acf7ecbf2c5c24ad7994a680a6c1"
+  integrity sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==
+  dependencies:
+    "@vitest/pretty-format" "2.1.9"
+    loupe "^3.1.2"
+    tinyrainbow "^1.2.0"
+
 "@vue/compiler-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.15.tgz#7cbda69429490f4ec0f68126dd0d6eae050dd01c"
@@ -1361,6 +1640,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.1"
 
+"@vue/compiler-core@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.25.tgz#7ffb658d7919348baad8c491eb5b948ee8e44108"
+  integrity sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==
+  dependencies:
+    "@babel/parser" "^7.28.5"
+    "@vue/shared" "3.5.25"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.15.tgz#2de7fec1a685c236585a4a1fb12cc586d7f0ffef"
@@ -1377,6 +1667,14 @@
     "@vue/compiler-core" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/compiler-dom@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.25.tgz#dd799ac2474cda54303039310b8994f0cfb40957"
+  integrity sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==
+  dependencies:
+    "@vue/compiler-core" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/compiler-sfc@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.15.tgz#d45a5c5171d8823c59725d31af406693c8816195"
@@ -1407,6 +1705,21 @@
     postcss "^8.5.6"
     source-map-js "^1.2.1"
 
+"@vue/compiler-sfc@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.25.tgz#30377920c3869c3bb32111aa4aefad53921831ad"
+  integrity sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==
+  dependencies:
+    "@babel/parser" "^7.28.5"
+    "@vue/compiler-core" "3.5.25"
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/compiler-ssr" "3.5.25"
+    "@vue/shared" "3.5.25"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.21"
+    postcss "^8.5.6"
+    source-map-js "^1.2.1"
+
 "@vue/compiler-ssr@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.15.tgz#b6ffbb19ff7126fc0e60cbf9c4ca34d9a9ce9fb2"
@@ -1423,6 +1736,14 @@
     "@vue/compiler-dom" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/compiler-ssr@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.25.tgz#51dd89b88a1e044d1beab158c91a29963d28eb96"
+  integrity sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==
+  dependencies:
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
@@ -1442,6 +1763,13 @@
   dependencies:
     "@vue/shared" "3.5.22"
 
+"@vue/reactivity@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.25.tgz#2420fa02022dab3373033c955802b9cdab5435ad"
+  integrity sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==
+  dependencies:
+    "@vue/shared" "3.5.25"
+
 "@vue/runtime-core@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.15.tgz#0accac4b441bb4aa00f58ba353b6f61e83f45202"
@@ -1458,6 +1786,14 @@
     "@vue/reactivity" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/runtime-core@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.25.tgz#5e524db201b419db6f091db440452fe4e49efdee"
+  integrity sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==
+  dependencies:
+    "@vue/reactivity" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/runtime-dom@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.15.tgz#048b725069f6d3fe5002e53eba118466d1fbec84"
@@ -1478,6 +1814,16 @@
     "@vue/shared" "3.5.22"
     csstype "^3.1.3"
 
+"@vue/runtime-dom@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.25.tgz#ebd9815f39ee70fe32698c615cc09bda604e4e06"
+  integrity sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==
+  dependencies:
+    "@vue/reactivity" "3.5.25"
+    "@vue/runtime-core" "3.5.25"
+    "@vue/shared" "3.5.25"
+    csstype "^3.1.3"
+
 "@vue/server-renderer@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.15.tgz#c1e8597e4bec8ea0b323c32dc032aa5c1f2983f4"
@@ -1494,6 +1840,14 @@
     "@vue/compiler-ssr" "3.5.22"
     "@vue/shared" "3.5.22"
 
+"@vue/server-renderer@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.25.tgz#ca67ac93cb84dd3c3bc2f89c046a18ab04f7cc96"
+  integrity sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 "@vue/shared@3.5.15":
   version "3.5.15"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.15.tgz#4c633a0e66f38119e38eecf340b4a65b0bad7192"
@@ -1504,6 +1858,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.22.tgz#9d56a1644a3becb8af1e34655928b0e288d827f8"
   integrity sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==
 
+"@vue/shared@3.5.25":
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.25.tgz#21edcff133a5a04f72c4e4c6142260963fe5afbe"
+  integrity sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==
+
 "@vueuse/components@^10.2.1":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
@@ -1557,16 +1916,43 @@
   dependencies:
     vue "^3.5.13"
 
+abab@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
+acorn-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
+  integrity sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==
+  dependencies:
+    acorn "^8.1.0"
+    acorn-walk "^8.0.2"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.14.1, acorn@^8.15.0, acorn@^8.9.0:
+acorn-walk@^8.0.2:
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
+  integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
+  dependencies:
+    acorn "^8.11.0"
+
+acorn@^8.1.0, acorn@^8.11.0, acorn@^8.14.1, acorn@^8.15.0, acorn@^8.8.1, acorn@^8.9.0:
   version "8.15.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -1649,6 +2035,13 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -1741,6 +2134,11 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
+assertion-error@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
+  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
+
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -1766,6 +2164,17 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+autoprefixer@^10.4.13:
+  version "10.4.23"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.23.tgz#c6aa6db8e7376fcd900f9fd79d143ceebad8c4e6"
+  integrity sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==
+  dependencies:
+    browserslist "^4.28.1"
+    caniuse-lite "^1.0.30001760"
+    fraction.js "^5.3.4"
+    picocolors "^1.1.1"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^10.4.2:
   version "10.4.21"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.21.tgz#77189468e7a8ad1d9a37fbc08efc9f480cf0a95d"
@@ -1810,6 +2219,11 @@ baseline-browser-mapping@^2.8.3:
   resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz#4d3606fdb1738fd902da40c5fcc0595e87cec044"
   integrity sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==
 
+baseline-browser-mapping@^2.9.0:
+  version "2.9.7"
+  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.9.7.tgz#d36ce64f2a2c468f6f743c8db495d319120007db"
+  integrity sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -1822,6 +2236,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+birpc@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.1.1.tgz#10b243ffe5a21ccaf4cbaf5a09a6f0cc035c4312"
+  integrity sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==
+
 bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -1879,6 +2298,17 @@ browserslist@^4.24.4:
     node-releases "^2.0.21"
     update-browserslist-db "^1.1.3"
 
+browserslist@^4.28.1:
+  version "4.28.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.1.tgz#7f534594628c53c63101079e27e40de490456a95"
+  integrity sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==
+  dependencies:
+    baseline-browser-mapping "^2.9.0"
+    caniuse-lite "^1.0.30001759"
+    electron-to-chromium "^1.5.263"
+    node-releases "^2.0.27"
+    update-browserslist-db "^1.2.0"
+
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -1892,6 +2322,11 @@ buffer@^5.5.0, buffer@^5.7.1:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+cac@^6.7.14:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
 cachedir@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.4.0.tgz#7fef9cf7367233d7c88068fe6e34ed0d355a610d"
@@ -1928,6 +2363,14 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
@@ -1938,11 +2381,36 @@ caniuse-lite@^1.0.30001702, caniuse-lite@^1.0.30001741:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz#ab2a36e3b6ed5bfb268adc002c476aab6513f859"
   integrity sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==
 
+caniuse-lite@^1.0.30001759, caniuse-lite@^1.0.30001760:
+  version "1.0.30001760"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz#bdd1960fafedf8d5f04ff16e81460506ff9b798f"
+  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
+
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
+chai@^5.1.2:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-5.3.3.tgz#dd3da955e270916a4bd3f625f4b919996ada7e06"
+  integrity sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==
+  dependencies:
+    assertion-error "^2.0.1"
+    check-error "^2.1.1"
+    deep-eql "^5.0.1"
+    loupe "^3.1.0"
+    pathval "^2.0.0"
+
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -1956,12 +2424,35 @@ chalk@^5.4.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.6.2.tgz#b1238b6e23ea337af71c7f8a295db5af0c158aea"
   integrity sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
 
+change-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
+  dependencies:
+    camel-case "^4.1.2"
+    capital-case "^1.0.4"
+    constant-case "^3.0.4"
+    dot-case "^3.0.4"
+    header-case "^2.0.4"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.2"
+    path-case "^3.0.4"
+    sentence-case "^3.0.4"
+    snake-case "^3.0.4"
+    tslib "^2.0.3"
+
+check-error@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
+  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-chokidar@^3.6.0:
+chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -2035,6 +2526,20 @@ cli-truncate@^4.0.0:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
+cli-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
+  integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
+
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -2112,6 +2617,30 @@ confbox@^0.2.2:
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.2.tgz#8652f53961c74d9e081784beed78555974a9c110"
   integrity sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==
 
+connect@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
+  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
+  dependencies:
+    debug "2.6.9"
+    finalhandler "1.1.2"
+    parseurl "~1.3.3"
+    utils-merge "1.0.1"
+
+constant-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case "^2.0.2"
+
+cookie@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.1.1.tgz#3bb9bdfc82369db9c2f69c93c9c3ceb310c88b3c"
+  integrity sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==
+
 core-js@^3.1.3:
   version "3.45.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.45.1.tgz#5810e04a1b4e9bc5ddaa4dd12e702ff67300634d"
@@ -2141,6 +2670,23 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -2202,6 +2748,15 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-urls@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
+  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+
 data-view-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
@@ -2234,20 +2789,27 @@ dayjs@^1.10.4, dayjs@^1.11.13:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.18.tgz#835fa712aac52ab9dec8b1494098774ed7070a11"
   integrity sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
 
-debug@^3.1.0, debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
-    ms "^2.1.1"
+    ms "2.0.0"
 
-debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0, debug@^4.4.1:
+debug@4, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.7, debug@^4.4.0, debug@^4.4.1:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
   integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
   dependencies:
     ms "^2.1.3"
 
+debug@^3.1.0, debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
 debug@~4.3.1, debug@~4.3.2:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
@@ -2255,6 +2817,16 @@ debug@~4.3.1, debug@~4.3.2:
   dependencies:
     ms "^2.1.3"
 
+decimal.js@^10.4.2:
+  version "10.6.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
+  integrity sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==
+
+deep-eql@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
+  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -2285,7 +2857,7 @@ define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.1.4:
+defu@^6.1.3, defu@^6.1.4:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
   integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
@@ -2307,11 +2879,23 @@ devlop@^1.0.0:
   dependencies:
     dequal "^2.0.0"
 
+diacritics@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1"
+  integrity sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 dlv@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
@@ -2331,6 +2915,13 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+domexception@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
+  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
+  dependencies:
+    webidl-conversions "^7.0.0"
+
 dompurify@^3.2.6:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.3.1.tgz#c7e1ddebfe3301eacd6c0c12a4af284936dbbb86"
@@ -2338,6 +2929,14 @@ dompurify@^3.2.6:
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -2368,11 +2967,21 @@ echarts@^5.6.0:
     tslib "2.3.0"
     zrender "5.6.1"
 
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
 electron-to-chromium@^1.5.218:
   version "1.5.224"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.224.tgz#dbc6827cb3d41d7293811d6d8af53114804e0ed1"
   integrity sha512-kWAoUu/bwzvnhpdZSIc6KUyvkI1rbRXMT0Eq8pKReyOyaPZcctMli+EgvcN1PAvwVc7Tdo4Fxi2PsLNDU05mdg==
 
+electron-to-chromium@^1.5.263:
+  version "1.5.267"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz#5d84f2df8cdb6bfe7e873706bb21bd4bfb574dc7"
+  integrity sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==
+
 emoji-regex@^10.3.0:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
@@ -2388,6 +2997,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
 end-of-stream@^1.1.0:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c"
@@ -2424,6 +3038,16 @@ entities@^4.4.0, entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+entities@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
+  integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
+
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+
 environment@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
@@ -2499,6 +3123,11 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
+es-module-lexer@^1.5.4:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.7.0.tgz#9159601561880a85f2734560a9099b2c31e5372a"
+  integrity sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
+
 es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
@@ -2561,11 +3190,16 @@ esbuild@^0.21.3:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-escalade@^3.2.0:
+escalade@^3.1.1, escalade@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -2581,6 +3215,17 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
+escodegen@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -2702,6 +3347,11 @@ espree@^9.3.1, espree@^9.6.0, espree@^9.6.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.1"
 
+esprima@^4.0.0, esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esquery@^1.4.0, esquery@^1.4.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
@@ -2785,11 +3435,23 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
+expect-type@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-1.3.0.tgz#0d58ed361877a31bbc4dd6cf71bbfef7faf6bd68"
+  integrity sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==
+
 exsolve@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.7.tgz#3b74e4c7ca5c5f9a19c3626ca857309fa99f9e9e"
   integrity sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
 
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+  dependencies:
+    is-extendable "^0.1.0"
+
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2821,7 +3483,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.2:
+fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -2890,6 +3552,19 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+finalhandler@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -2912,6 +3587,16 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
+flexsearch@*:
+  version "0.8.212"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.8.212.tgz#b9509af778a991b938292e36fe0809a4ece4b940"
+  integrity sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==
+
+flexsearch@0.7.21:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.21.tgz#0f5ede3f2aae67ddc351efbe3b24b69d29e9d48b"
+  integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
+
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
@@ -2932,6 +3617,17 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
+form-data@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"
+  integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    hasown "^2.0.2"
+    mime-types "^2.1.12"
+
 form-data@~4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.4.tgz#784cdcce0669a9d68e94d11ac4eea98088edd2c4"
@@ -2948,62 +3644,19 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@0.1.243:
-  version "0.1.243"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.243.tgz#12c3d1f6e73459a909e93b2ff20fe9ad86eb4a1a"
-  integrity sha512-X4vLXKA0NxomdRuj5bUGFp3g4iVqs+XugPrmCKdzHnN/dP0ImcgscGY4zmioMAEQU8F5BcbBzr0WR9vnqunfng==
+fraction.js@^5.3.4:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
+  integrity sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==
+
+fs-extra@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
   dependencies:
-    "@floating-ui/vue" "^1.1.6"
-    "@headlessui/vue" "^1.7.14"
-    "@popperjs/core" "^2.11.2"
-    "@tailwindcss/forms" "^0.5.3"
-    "@tailwindcss/line-clamp" "^0.4.4"
-    "@tailwindcss/typography" "^0.5.16"
-    "@tiptap/core" "^2.26.1"
-    "@tiptap/extension-code" "^2.26.1"
-    "@tiptap/extension-code-block" "^2.26.1"
-    "@tiptap/extension-code-block-lowlight" "^2.26.1"
-    "@tiptap/extension-color" "^2.26.1"
-    "@tiptap/extension-heading" "^2.26.1"
-    "@tiptap/extension-highlight" "^2.26.1"
-    "@tiptap/extension-image" "^2.26.1"
-    "@tiptap/extension-link" "^2.26.1"
-    "@tiptap/extension-mention" "^2.26.1"
-    "@tiptap/extension-placeholder" "^2.26.1"
-    "@tiptap/extension-table" "^2.26.1"
-    "@tiptap/extension-table-cell" "^2.26.1"
-    "@tiptap/extension-table-header" "^2.26.1"
-    "@tiptap/extension-table-row" "^2.26.1"
-    "@tiptap/extension-task-item" "^2.26.1"
-    "@tiptap/extension-task-list" "^2.26.1"
-    "@tiptap/extension-text-align" "^2.26.1"
-    "@tiptap/extension-text-style" "^2.26.1"
-    "@tiptap/extension-typography" "^2.26.1"
-    "@tiptap/pm" "^2.26.1"
-    "@tiptap/starter-kit" "^2.26.1"
-    "@tiptap/suggestion" "^2.26.1"
-    "@tiptap/vue-3" "^2.26.1"
-    "@vueuse/core" "^10.4.1"
-    dayjs "^1.11.13"
-    dompurify "^3.2.6"
-    echarts "^5.6.0"
-    feather-icons "^4.28.0"
-    grid-layout-plus "^1.1.0"
-    highlight.js "^11.11.1"
-    idb-keyval "^6.2.0"
-    lowlight "^3.3.0"
-    lucide-static "^0.535.0"
-    marked "^15.0.12"
-    ora "5.4.1"
-    prettier "^3.3.2"
-    radix-vue "^1.5.3"
-    reka-ui "^2.5.0"
-    socket.io-client "^4.5.1"
-    tippy.js "^6.3.7"
-    typescript "^5.0.2"
-    unplugin-auto-import "^19.3.0"
-    unplugin-icons "^22.1.0"
-    unplugin-vue-components "^28.4.1"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
 
 fs-extra@^9.1.0:
   version "9.1.0"
@@ -3047,6 +3700,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
@@ -3176,6 +3834,17 @@ globalthis@^1.0.4:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
+globby@^13.2.2:
+  version "13.2.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
+  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.3.0"
+    ignore "^5.2.4"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 gopd@^1.0.1, gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
@@ -3191,6 +3860,21 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+graphql@^16.12.0:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.12.0.tgz#28cc2462435b1ac3fdc6976d030cef83a0c13ac7"
+  integrity sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==
+
+gray-matter@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+  dependencies:
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
 grid-layout-plus@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/grid-layout-plus/-/grid-layout-plus-1.1.1.tgz#129f1dd6ba555a1d319d73e415821ae4fb6c35c8"
@@ -3243,11 +3927,77 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+header-case@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
+headers-polyfill@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-4.0.3.tgz#922a0155de30ecc1f785bcf04be77844ca95ad07"
+  integrity sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==
+
 highlight.js@^11.11.1, highlight.js@~11.11.0:
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
   integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
 
+histoire@^0.17.17:
+  version "0.17.17"
+  resolved "https://registry.yarnpkg.com/histoire/-/histoire-0.17.17.tgz#3325344d0e3342938de38175ad82d91dec4fd235"
+  integrity sha512-DAwY4sgIoP7NGE5ldaws2d3RWz4OOQcwhS8elRMiA2euqzLvDU2IXm+ZjeDDFVtGkvmQNQyfZBDKLCLHfRkSUg==
+  dependencies:
+    "@akryum/tinypool" "^0.3.1"
+    "@histoire/app" "^0.17.17"
+    "@histoire/controls" "^0.17.17"
+    "@histoire/shared" "^0.17.17"
+    "@histoire/vendors" "^0.17.17"
+    "@types/flexsearch" "^0.7.6"
+    "@types/markdown-it" "^12.2.3"
+    birpc "^0.1.1"
+    change-case "^4.1.2"
+    chokidar "^3.5.3"
+    connect "^3.7.0"
+    defu "^6.1.3"
+    diacritics "^1.3.0"
+    flexsearch "0.7.21"
+    fs-extra "^10.1.0"
+    globby "^13.2.2"
+    gray-matter "^4.0.3"
+    jiti "^1.21.0"
+    jsdom "^20.0.3"
+    markdown-it "^12.3.2"
+    markdown-it-anchor "^8.6.7"
+    markdown-it-attrs "^4.1.6"
+    markdown-it-emoji "^2.0.2"
+    micromatch "^4.0.5"
+    mrmime "^1.0.1"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    sade "^1.8.1"
+    shiki-es "^0.2.0"
+    sirv "^2.0.3"
+    vite-node "^0.34.6"
+
+html-encoding-sniffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
+  dependencies:
+    whatwg-encoding "^2.0.0"
+
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
+  dependencies:
+    "@tootallnate/once" "2"
+    agent-base "6"
+    debug "4"
+
 http-signature@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
@@ -3257,6 +4007,14 @@ http-signature@~1.4.0:
     jsprim "^2.0.2"
     sshpk "^1.18.0"
 
+https-proxy-agent@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -3267,6 +4025,13 @@ human-signals@^5.0.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 idb-keyval@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.2.tgz#b0171b5f73944854a3291a5cdba8e12768c4854a"
@@ -3277,7 +4042,7 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
@@ -3405,6 +4170,11 @@ is-date-object@^1.0.5, is-date-object@^1.1.0:
     call-bound "^1.0.2"
     has-tostringtag "^1.0.2"
 
+is-extendable@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3474,6 +4244,11 @@ is-negative-zero@^2.0.3:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
+is-node-process@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-node-process/-/is-node-process-1.2.0.tgz#ea02a1b90ddb3934a19aea414e88edef7e11d134"
+  integrity sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==
+
 is-number-object@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
@@ -3492,7 +4267,12 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-regex@^1.2.1:
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-regex@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
   integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
@@ -3602,7 +4382,7 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.6:
+jiti@^1.21.0, jiti@^1.21.6, jiti@^1.21.7:
   version "1.21.7"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
   integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
@@ -3612,6 +4392,14 @@ js-tokens@^9.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
   integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
 
+js-yaml@^3.13.1:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.2.tgz#77485ce1dd7f33c061fd1b16ecea23b55fcb04b0"
+  integrity sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -3624,6 +4412,38 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+jsdom@^20.0.3:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
+  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
+  dependencies:
+    abab "^2.0.6"
+    acorn "^8.8.1"
+    acorn-globals "^7.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.4.2"
+    domexception "^4.0.0"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.2"
+    parse5 "^7.1.1"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.11.0"
+    xml-name-validator "^4.0.0"
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -3682,11 +4502,24 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
 kolorist@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 
+launch-editor@^2.6.1:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.12.0.tgz#cc740f4e0263a6b62ead2485f9896e545321f817"
+  integrity sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==
+  dependencies:
+    picocolors "^1.1.1"
+    shell-quote "^1.8.3"
+
 lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -3700,7 +4533,7 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^3.0.0, lilconfig@^3.1.3:
+lilconfig@^3.0.0, lilconfig@^3.1.1, lilconfig@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
@@ -3710,6 +4543,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
+  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 linkify-it@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
@@ -3722,7 +4562,7 @@ linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
-lint-staged@^15.2.10:
+lint-staged@>=10, lint-staged@^15.2.10:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
   integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==
@@ -3824,6 +4664,18 @@ log-update@^6.1.0:
     strip-ansi "^7.1.0"
     wrap-ansi "^9.0.0"
 
+loupe@^3.1.0, loupe@^3.1.2:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.2.1.tgz#0095cf56dc5b7a9a7c08ff5b1a8796ec8ad17e76"
+  integrity sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==
+
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lowlight@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.3.0.tgz#007b8a5bfcfd27cc65b96246d2de3e9dd4e23c6c"
@@ -3843,6 +4695,13 @@ lucide-static@^0.535.0:
   resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.535.0.tgz#3d8ad25360d166a4f584d97f2c08fd9b24be30d7"
   integrity sha512-wlYTSPpeyMjLjQ5jgSAENQwVfURVf2XHV5TDp8YPCJBEyWz+FJGuGB5LYBgOFvWIDOMW+AIoiA8sNd8My/nxlw==
 
+magic-string@^0.30.12, magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
 magic-string@^0.30.17, magic-string@^0.30.19:
   version "0.30.19"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.19.tgz#cebe9f104e565602e5d2098c5f2e79a77cc86da9"
@@ -3850,6 +4709,32 @@ magic-string@^0.30.17, magic-string@^0.30.19:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.5"
 
+markdown-it-anchor@^8.6.7:
+  version "8.6.7"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz#ee6926daf3ad1ed5e4e3968b1740eef1c6399634"
+  integrity sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==
+
+markdown-it-attrs@^4.1.6:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz#1e1f9bd2c87276d8f4ed74ad4268df428b7deee6"
+  integrity sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==
+
+markdown-it-emoji@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.2.tgz#cd42421c2fda1537d9cc12b9923f5c8aeb9029c8"
+  integrity sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
+
+markdown-it@^12.3.2:
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
+  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdown-it@^14.0.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
@@ -3872,6 +4757,11 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -3882,12 +4772,12 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.8:
+micromatch@^4.0.5, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -3951,7 +4841,7 @@ minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-mlly@^1.7.4:
+mlly@^1.4.0, mlly@^1.7.4:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.0.tgz#e074612b938af8eba1eaf43299cbc89cb72d824e"
   integrity sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==
@@ -3961,11 +4851,60 @@ mlly@^1.7.4:
     pkg-types "^1.3.1"
     ufo "^1.6.1"
 
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+mrmime@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
+mrmime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
+  integrity sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+msw@^2.7.0:
+  version "2.12.4"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-2.12.4.tgz#9a7045a6ef831826f57f4050552ca41dd21fe0d4"
+  integrity sha512-rHNiVfTyKhzc0EjoXUBVGteNKBevdjOlVC6GlIRXpy+/3LHEIGRovnB5WPjcvmNODVQ1TNFnoa7wsGbd0V3epg==
+  dependencies:
+    "@inquirer/confirm" "^5.0.0"
+    "@mswjs/interceptors" "^0.40.0"
+    "@open-draft/deferred-promise" "^2.2.0"
+    "@types/statuses" "^2.0.6"
+    cookie "^1.0.2"
+    graphql "^16.12.0"
+    headers-polyfill "^4.0.2"
+    is-node-process "^1.2.0"
+    outvariant "^1.4.3"
+    path-to-regexp "^6.3.0"
+    picocolors "^1.1.1"
+    rettime "^0.7.0"
+    statuses "^2.0.2"
+    strict-event-emitter "^0.5.1"
+    tough-cookie "^6.0.0"
+    type-fest "^5.2.0"
+    until-async "^3.0.2"
+    yargs "^17.7.2"
+
+mute-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-2.0.0.tgz#a5446fc0c512b71c83c44d908d5c7b7b4c493b2b"
+  integrity sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==
+
 mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -3990,11 +4929,24 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-releases@^2.0.21:
   version "2.0.21"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.21.tgz#f59b018bc0048044be2d4c4c04e4c8b18160894c"
   integrity sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==
 
+node-releases@^2.0.27:
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.27.tgz#eedca519205cf20f650f61d56b070db111231e4e"
+  integrity sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -4026,6 +4978,11 @@ nth-check@^2.1.1:
   dependencies:
     boolbase "^1.0.0"
 
+nwsapi@^2.2.2:
+  version "2.2.23"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.23.tgz#59712c3a88e6de2bb0b6ccc1070397267019cf6c"
+  integrity sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==
+
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -4092,6 +5049,13 @@ ohash@^2.0.11:
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-2.0.11.tgz#60b11e8cff62ca9dee88d13747a5baa145f5900b"
   integrity sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==
 
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
+  dependencies:
+    ee-first "1.1.1"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -4165,6 +5129,11 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
 
+outvariant@^1.4.0, outvariant@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
+  integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
+
 own-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
@@ -4205,6 +5174,14 @@ package-manager-detector@^1.3.0:
   resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-1.3.0.tgz#b42d641c448826e03c2b354272456a771ce453c0"
   integrity sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==
 
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -4212,6 +5189,34 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse5@^7.1.1:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.3.0.tgz#d7e224fa72399c7a175099f45fc2ad024b05ec05"
+  integrity sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==
+  dependencies:
+    entities "^6.0.0"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+path-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -4245,11 +5250,31 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
+path-to-regexp@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.3.0.tgz#2b6a26a337737a8e1416f9272ed0766b1c0389f4"
+  integrity sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+pathe@^1.1.1, pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 pathe@^2.0.1, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
   integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
 
+pathval@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.1.tgz#8855c5a2899af072d6ac05d11e46045ad0dc605d"
+  integrity sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -4260,7 +5285,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^1.1.1:
+picocolors@^1.0.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -4345,6 +5370,13 @@ postcss-load-config@^4.0.2:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
+"postcss-load-config@^4.0.2 || ^5.0 || ^6.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-6.0.1.tgz#6fd7dcd8ae89badcf1b2d644489cbabf83aa8096"
+  integrity sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==
+  dependencies:
+    lilconfig "^3.1.1"
+
 postcss-nested@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
@@ -4373,7 +5405,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
+postcss@^8.4.21, postcss@^8.4.43, postcss@^8.4.47, postcss@^8.4.5, postcss@^8.5.3, postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
   integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -4387,6 +5419,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
+  integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
+
 prettier-plugin-tailwindcss@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.8.tgz#e9c0356680331f909a86fefe8fc2b247c21e23a2"
@@ -4571,6 +5608,13 @@ proxy-from-env@1.0.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
   integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==
 
+psl@^1.1.33:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
+  integrity sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==
+  dependencies:
+    punycode "^2.3.1"
+
 pump@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.3.tgz#151d979f1a29668dc0025ec589a455b53282268d"
@@ -4584,7 +5628,7 @@ punycode.js@^2.3.1:
   resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
   integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
@@ -4601,6 +5645,11 @@ quansync@^0.2.11:
   resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.11.tgz#f9c3adda2e1272e4f8cf3f1457b04cbdb4ee692a"
   integrity sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -4695,6 +5744,16 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -4725,6 +5784,11 @@ restore-cursor@^5.0.0:
     onetime "^7.0.0"
     signal-exit "^4.1.0"
 
+rettime@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rettime/-/rettime-0.7.0.tgz#c040f1a65e396eaa4b8346dd96ed937edc79d96f"
+  integrity sha512-LPRKoHnLKd/r3dVxcwO7vhCW+orkOGj9ViueosEBK6ie89CijnfRlhaDhHq/3Hxu4CkWQtxwlBG0mzTQY6uQjw==
+
 reusify@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.1.0.tgz#0fe13b9522e1473f51b558ee796e08f11f9b489f"
@@ -4792,6 +5856,13 @@ rxjs@^7.5.1:
   dependencies:
     tslib "^2.1.0"
 
+sade@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-array-concat@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
@@ -4825,16 +5896,31 @@ safe-regex-test@^1.1.0:
     es-errors "^1.3.0"
     is-regex "^1.2.1"
 
-safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
 scule@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/scule/-/scule-1.3.0.tgz#6efbd22fd0bb801bdcc585c89266a7d2daa8fbd3"
   integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
 
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -4845,6 +5931,15 @@ semver@^7.3.6, semver@^7.5.3, semver@^7.6.3:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
   integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
 
+sentence-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -4888,6 +5983,16 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shell-quote@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
+  integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
+
+shiki-es@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/shiki-es/-/shiki-es-0.2.0.tgz#ae5bced62dca0ba46ee81149e68d428565a3e6fb"
+  integrity sha512-RbRMD+IuJJseSZljDdne9ThrUYrwBwJR04FvN4VXpfsU3MNID5VJGHLAD5je/HGThCyEKNgH+nEkSFEWKD7C3Q==
+
 side-channel-list@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
@@ -4928,6 +6033,11 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
+siginfo@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
+  integrity sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==
+
 signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -4938,6 +6048,20 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+sirv@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
+  integrity sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
 slice-ansi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
@@ -4972,6 +6096,14 @@ slice-ansi@^7.1.0:
     ansi-styles "^6.2.1"
     is-fullwidth-code-point "^5.0.0"
 
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 socket.io-client@^4.5.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"
@@ -5000,6 +6132,16 @@ source-map-js@^1.2.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
+source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
 sshpk@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
@@ -5015,6 +6157,26 @@ sshpk@^1.18.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+stackback@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
+  integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==
+
+statuses@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.2.tgz#8f75eecef765b5e1cfcdc080da59409ed424e382"
+  integrity sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==
+
+statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
+std-env@^3.8.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.10.0.tgz#d810b27e3a073047b2b5e40034881f5ea6f9c83b"
+  integrity sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==
+
 stop-iteration-iterator@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz#f481ff70a548f6124d0312c3aa14cbfa7aa542ad"
@@ -5023,12 +6185,26 @@ stop-iteration-iterator@^1.1.0:
     es-errors "^1.3.0"
     internal-slot "^1.1.0"
 
+strict-event-emitter@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz#1602ece81c51574ca39c6815e09f1a3e8550bd93"
+  integrity sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==
+
 string-argv@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5099,7 +6275,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5113,6 +6296,11 @@ strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   dependencies:
     ansi-regex "^6.0.1"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -5177,6 +6365,44 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
+tagged-tag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tagged-tag/-/tagged-tag-1.0.0.tgz#a0b5917c2864cba54841495abfa3f6b13edcf4d6"
+  integrity sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==
+
+tailwindcss@^3.2.7:
+  version "3.4.19"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.19.tgz#af2a0a4ae302d52ebe078b6775e799e132500ee2"
+  integrity sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.7"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2 || ^5.0 || ^6.0"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
 tailwindcss@^3.3.2:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
@@ -5244,6 +6470,16 @@ tiny-inflate@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
+tinybench@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.9.0.tgz#103c9f8ba6d7237a47ab6dd1dcff77251863426b"
+  integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
+
+tinyexec@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
 tinyexec@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.0.1.tgz#70c31ab7abbb4aea0a24f55d120e5990bfa1e0b1"
@@ -5257,6 +6493,21 @@ tinyglobby@^0.2.12, tinyglobby@^0.2.14:
     fdir "^6.5.0"
     picomatch "^4.0.3"
 
+tinypool@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.1.1.tgz#059f2d042bd37567fbc017d3d426bdd2a2612591"
+  integrity sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==
+
+tinyrainbow@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
+  integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==
+
+tinyspy@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
+  integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
+
 tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
@@ -5269,6 +6520,11 @@ tldts-core@^6.1.86:
   resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.86.tgz#a93e6ed9d505cb54c542ce43feb14c73913265d8"
   integrity sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==
 
+tldts-core@^7.0.19:
+  version "7.0.19"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-7.0.19.tgz#9dd8a457a09b4e65c8266c029f1847fa78dead20"
+  integrity sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==
+
 tldts@^6.1.32:
   version "6.1.86"
   resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.86.tgz#087e0555b31b9725ee48ca7e77edc56115cd82f7"
@@ -5276,6 +6532,13 @@ tldts@^6.1.32:
   dependencies:
     tldts-core "^6.1.86"
 
+tldts@^7.0.5:
+  version "7.0.19"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-7.0.19.tgz#84cd7a7f04e68ec93b93b106fac038c527b99368"
+  integrity sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==
+  dependencies:
+    tldts-core "^7.0.19"
+
 tmp@~0.2.3:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.5.tgz#b06bcd23f0f3c8357b426891726d16015abfd8f8"
@@ -5288,6 +6551,21 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+totalist@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+  integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
+
+tough-cookie@^4.1.2:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
 tough-cookie@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.1.2.tgz#66d774b4a1d9e12dc75089725af3ac75ec31bed7"
@@ -5295,6 +6573,20 @@ tough-cookie@^5.0.0:
   dependencies:
     tldts "^6.1.32"
 
+tough-cookie@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-6.0.0.tgz#11e418b7864a2c0d874702bc8ce0f011261940e5"
+  integrity sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==
+  dependencies:
+    tldts "^7.0.5"
+
+tr46@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
+  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
+  dependencies:
+    punycode "^2.1.1"
+
 tree-kill@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -5320,7 +6612,7 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tslib@^2.0.0, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.5.0, tslib@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -5354,6 +6646,13 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-5.3.1.tgz#251b8d0a813c1dbccf1f9450ba5adcdf7072adc2"
+  integrity sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==
+  dependencies:
+    tagged-tag "^1.0.0"
+
 typed-array-buffer@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
@@ -5404,6 +6703,11 @@ typescript@^5.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.2.tgz#d93450cddec5154a2d5cabe3b8102b83316fb2a6"
   integrity sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
@@ -5449,11 +6753,21 @@ unimport@^4.2.0:
     unplugin "^2.2.2"
     unplugin-utils "^0.2.4"
 
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
+unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
 unplugin-auto-import@^19.3.0:
   version "19.3.0"
   resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-19.3.0.tgz#4fbfef17c87919889f5ba2167afac50f50a015f4"
@@ -5519,6 +6833,11 @@ unplugin@^2.3.10, unplugin@^2.3.5:
     picomatch "^4.0.3"
     webpack-virtual-modules "^0.6.2"
 
+until-async@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/until-async/-/until-async-3.0.2.tgz#447f1531fdd7bb2b4c7a98869bdb1a4c2a23865f"
+  integrity sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==
+
 untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@@ -5532,6 +6851,28 @@ update-browserslist-db@^1.1.3:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
+update-browserslist-db@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz#cfb4358afa08b3d5731a2ecd95eebf4ddef8033e"
+  integrity sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
+  dependencies:
+    tslib "^2.0.3"
+
+upper-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
+  dependencies:
+    tslib "^2.0.3"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -5539,11 +6880,24 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -5558,6 +6912,40 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vite-node@2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.9.tgz#549710f76a643f1c39ef34bdb5493a944e4f895f"
+  integrity sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.7"
+    es-module-lexer "^1.5.4"
+    pathe "^1.1.2"
+    vite "^5.0.0"
+
+vite-node@^0.34.6:
+  version "0.34.7"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.7.tgz#9fbcaf5597826d224e6301a486027faa22c2b09c"
+  integrity sha512-0Yzb96QzHmqIKIs/x2q/sqG750V/EF6yDkS2p1WjJc1W2bgRSuQjf5vB9HY8h2nVb5j4pO5paS5Npcv3s69YUg==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.4"
+    mlly "^1.4.0"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+
+"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", vite@^5.0.0, vite@^5.1.8:
+  version "5.4.21"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.21.tgz#84a4f7c5d860b071676d39ba513c0d598fdc7027"
+  integrity sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==
+  dependencies:
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
 vite@^5.2.6:
   version "5.4.20"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.20.tgz#3267a5e03f21212f44edfd72758138e8fcecd76a"
@@ -5569,6 +6957,32 @@ vite@^5.2.6:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vitest@^2.1.8:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.9.tgz#7d01ffd07a553a51c87170b5e80fea3da7fb41e7"
+  integrity sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==
+  dependencies:
+    "@vitest/expect" "2.1.9"
+    "@vitest/mocker" "2.1.9"
+    "@vitest/pretty-format" "^2.1.9"
+    "@vitest/runner" "2.1.9"
+    "@vitest/snapshot" "2.1.9"
+    "@vitest/spy" "2.1.9"
+    "@vitest/utils" "2.1.9"
+    chai "^5.1.2"
+    debug "^4.3.7"
+    expect-type "^1.1.0"
+    magic-string "^0.30.12"
+    pathe "^1.1.2"
+    std-env "^3.8.0"
+    tinybench "^2.9.0"
+    tinyexec "^0.3.1"
+    tinypool "^1.0.1"
+    tinyrainbow "^1.2.0"
+    vite "^5.0.0"
+    vite-node "2.1.9"
+    why-is-node-running "^2.3.0"
+
 vue-demi@>=0.13.0, vue-demi@>=0.14.8, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
@@ -5594,6 +7008,13 @@ vue-router@^4.0.12:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
+vue-router@^4.1.6:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.6.4.tgz#a0a9cb9ef811a106d249e4bb9313d286718020d8"
+  integrity sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-sonner@^1.0.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/vue-sonner/-/vue-sonner-1.3.2.tgz#3349d548218e074499fc6d1ba394603ba477156a"
@@ -5610,6 +7031,17 @@ vue@3.5.15:
     "@vue/server-renderer" "3.5.15"
     "@vue/shared" "3.5.15"
 
+vue@^3.3.0:
+  version "3.5.25"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.25.tgz#b68b5092b617c57a0a36e8e640fd2c09aa2a374d"
+  integrity sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==
+  dependencies:
+    "@vue/compiler-dom" "3.5.25"
+    "@vue/compiler-sfc" "3.5.25"
+    "@vue/runtime-dom" "3.5.25"
+    "@vue/server-renderer" "3.5.25"
+    "@vue/shared" "3.5.25"
+
 vue@^3.5.13:
   version "3.5.22"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.22.tgz#2b8ddb94ee4b640ef12fe7f6efe1cf16f3b582e7"
@@ -5633,6 +7065,13 @@ w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
+w3c-xmlserializer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
+  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -5645,11 +7084,36 @@ webfontloader@^1.6.28:
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
   integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
+whatwg-encoding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
+whatwg-url@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
+  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
+  dependencies:
+    tr46 "^3.0.0"
+    webidl-conversions "^7.0.0"
+
 which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
@@ -5710,12 +7174,20 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+why-is-node-running@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"
+  integrity sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==
+  dependencies:
+    siginfo "^2.0.0"
+    stackback "0.0.2"
+
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -5733,6 +7205,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -5756,6 +7237,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@^8.11.0:
+  version "8.18.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.3.tgz#b56b88abffde62791c639170400c93dcb0c95472"
+  integrity sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==
+
 ws@~8.17.1:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
@@ -5766,11 +7252,21 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xmlhttprequest-ssl@~2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
   integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yaml@^2.3.4:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
@@ -5781,6 +7277,24 @@ yaml@^2.7.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"
   integrity sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==
 
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
+yargs@^17.7.2:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
@@ -5794,9 +7308,14 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yoctocolors-cjs@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz#7e4964ea8ec422b7a40ac917d3a344cfd2304baa"
+  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
+
 zrender@5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
   integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==
   dependencies:
-    tslib "2.3.0"
+    tslib "2.3.0"
\ No newline at end of file

From 8253f67b9dc542e60d0ab35a57d26e0304c78962 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 20:30:30 +0530
Subject: [PATCH 354/547] fix: indentation of image tag creation logic in
 create_html_tag

---
 .../doctype/builder_page/builder_page.py      | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c51485ebe..3409fed5a 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -689,33 +689,32 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 	if element in ["p", "__raw_html__"]:
 		element = "div"
 
-			if element == "img":
-				attributes = block.get("attributes", {})
-				dark_src = (
-					frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
-				)
-				light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
-				if dark_src and light_src:
-					picture_tag = soup.new_tag("picture")
-
-					# Add source for dark mode
-					dark_source = soup.new_tag("source")
-					dark_source["srcset"] = dark_src
-					dark_source["media"] = "(prefers-color-scheme: dark)"
-					picture_tag.append(dark_source)
-					picture_tag.attrs["style"] = "display: contents;"
-
-					tag = soup.new_tag("img")
-					tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
-				else:
+	if element == "img":
+		attributes = block.get("attributes", {})
+		dark_src = (
+			frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
+		)
+		light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
+		if dark_src and light_src:
+			picture_tag = soup.new_tag("picture")
+
+			# Add source for dark mode
+			dark_source = soup.new_tag("source")
+			dark_source["srcset"] = dark_src
+			dark_source["media"] = "(prefers-color-scheme: dark)"
+			picture_tag.append(dark_source)
+			picture_tag.attrs["style"] = "display: contents;"
+
+			tag = soup.new_tag("img")
+			tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
+		else:
 			tag = soup.new_tag(element)
-		
-	tag.attrs = block.get("attributes", {}).copy()
-					picture_tag = None
-			else:
-				tag = soup.new_tag(element)
-				tag.attrs = block.get("attributes", {})
-				picture_tag = None
+			tag.attrs = block.get("attributes", {}).copy()
+			picture_tag = None
+	else:
+		tag = soup.new_tag(element)
+		tag.attrs = block.get("attributes", {})
+		picture_tag = None
 
 	for key, value in block.get("customAttributes", {}).items():
 		tag[key] = value

From 249e86952bdb8049f91108596e14ca2523618147 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 21:19:23 +0530
Subject: [PATCH 355/547] fix: replaces GenericControl with BasePropertyControl

---
 .../StandardPropsInputSection.ts              |   4 +-
 .../Controls/BasePropertyControl.vue          |  25 +-
 .../components/Controls/GenericControl.vue    | 297 ------------------
 .../Controls/PropertyControlInput.vue         |   8 +-
 4 files changed, 23 insertions(+), 311 deletions(-)
 delete mode 100644 frontend/src/components/Controls/GenericControl.vue

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 12b45d9bd..489ed65d7 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -1,10 +1,10 @@
 import blockController from "@/utils/blockController";
 import OptionToggle from "../Controls/OptionToggle.vue";
-import GenericControl from "../Controls/GenericControl.vue";
 import ArrayInput from "../ArrayInput.vue";
 import ObjectInput from "../ObjectInput.vue";
 import ImageUploadInput from "../ImageUploadInput.vue";
 import ColorInput from "../Controls/ColorInput.vue";
+import BasePropertyControl from "../Controls/BasePropertyControl.vue";
 
 const componentMap = {
 	array: ArrayInput,
@@ -131,7 +131,7 @@ const getStandardPropsInputSection = () => {
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
 		const propType = propDetails.propOptions?.type;
 		const component =
-			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) || GenericControl;
+			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) || BasePropertyControl;
 		const getProps = () => {
 			const props = getPropsMap(propKey, propDetails);
 			return props;
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 8bc8ec7d6..03ffd4beb 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -31,7 +31,7 @@
 				v-if="showDynamicValueModal">
 				<template #header>Set Dynamic Value</template>
 				<template #content>
-					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" />
+					<DynamicValueHandler @setDynamicValue="updateDynamicValue" :selectedValue="dynamicValue" />
 				</template>
 			</DraggablePopup>
 
@@ -42,7 +42,7 @@
 				:modelValue="modelValue"
 				:defaultValue="defaultValue"
 				:placeholder="placeholderValue"
-				:dynamicValue="dynamicValue"
+				:dynamicValueKey="dynamicValue?.key"
 				componentClass="w-full"
 				@update:modelValue="updateValue"
 				@keydown="handleKeyDown"
@@ -104,6 +104,8 @@ const props = withDefaults(
 		getModelValue?: () => string;
 		getPlaceholder?: () => string;
 		setModelValue?: (value: string) => void;
+		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
+		setDynamicValue?: (key: string, comesFrom: BlockDataKey["comesFrom"]) => void;
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
@@ -260,22 +262,29 @@ const handleKeyDown = (e: KeyboardEvent, variantName?: string) => {
 	e.preventDefault();
 };
 
-function setDynamicValue(value: string) {
-	blockController.getSelectedBlocks().forEach((block) => {
-		block.setDynamicValue(props.propertyKey, props.controlType, value);
-	});
+function updateDynamicValue(value: { key: string; comesFrom: BlockDataKey["comesFrom"] }) {
+	if (props.setDynamicValue) {
+		props.setDynamicValue(value.key, value.comesFrom);
+	} else {
+		blockController.getSelectedBlocks().forEach((block) => {
+			block.setDynamicValue(props.propertyKey, props.controlType, value.key, value.comesFrom);
+		});
+	}
 	showDynamicValueModal.value = false;
 	emit("setDynamicValue");
 }
 
 const dynamicValue = computed(() => {
+	if (props.getDynamicValue) {
+		return props.getDynamicValue();
+	}
 	const blocks = blockController.getSelectedBlocks();
-	if (!blocks?.length) return "";
+	if (!blocks?.length) return { key: "", comesFrom: "dataScript" as BlockDataKey["comesFrom"] };
 
 	const dataKeyObj = blocks[0]
 		.getDynamicValues()
 		.find((obj) => obj.type === props.controlType && obj.property === props.propertyKey);
-	return dataKeyObj?.key || "";
+	return { key: dataKeyObj?.key || "", comesFrom: dataKeyObj?.comesFrom || "dataScript" };
 });
 
 const clearDynamicValue = () => {
diff --git a/frontend/src/components/Controls/GenericControl.vue b/frontend/src/components/Controls/GenericControl.vue
deleted file mode 100644
index 4510b6da8..000000000
--- a/frontend/src/components/Controls/GenericControl.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-	<div class="flex w-full flex-col gap-2">
-		<!-- Top label placement -->
-		<div v-if="labelPlacement === 'top' && label" class="flex items-center gap-2">
-			<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="options">
-				<template v-slot="{ open }">
-					<FeatherIcon
-						ref="dropdownTrigger"
-						name="plus-circle"
-						class="h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
-						@click="open" />
-				</template>
-			</Dropdown>
-			<InputLabel class="truncate" :class="{ 'cursor-ns-resize': enableSlider }" @mousedown="handleMouseDown">
-				{{ label }}
-			</InputLabel>
-		</div>
-
-		<!-- Control container with conditional layout -->
-		<div
-			class="relative flex w-full gap-2"
-			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
-			<!-- Left label placement (original layout) -->
-			<div
-				class="flex w-fit max-w-[88px] shrink-0 items-center"
-				v-if="labelPlacement === 'left' && (enableStateControls || label)">
-				<Dropdown v-if="enableStateControls || allowDynamicValue" size="sm" :options="options">
-					<template v-slot="{ open }">
-						<FeatherIcon
-							ref="dropdownTrigger"
-							name="plus-circle"
-							class="mr-1.5 h-3 w-3 cursor-pointer text-ink-gray-7 hover:text-ink-gray-9"
-							@click="open" />
-					</template>
-				</Dropdown>
-				<InputLabel
-					class="pr-2"
-					:class="{ 'cursor-ns-resize': enableSlider }"
-					v-if="label"
-					@mousedown="handleMouseDown">
-					{{ label }}
-				</InputLabel>
-			</div>
-
-			<!-- Hidden popup for dynamic values -->
-			<DraggablePopup
-				v-model="showDynamicValueModal"
-				:container="dropdownTrigger?.$el"
-				placement="middle-right"
-				:clickOutsideToClose="false"
-				:placementOffset="20"
-				v-if="showDynamicValueModal">
-				<template #header>Set Dynamic Value</template>
-				<template #content>
-					<DynamicValueHandler @setDynamicValue="setDynamicValue" :selectedValue="dynamicValue" :options="dynamicValueFilterOptions" />
-				</template>
-			</DraggablePopup>
-
-			<div class="relative w-full">
-				<component
-					:is="props.component"
-					v-bind="controlAttrs"
-					v-on="props.events || {}"
-					:modelValue="modelValue"
-					:defaultValue="defaultValue"
-					:placeholder="placeholderValue"
-					@update:modelValue="updateValue"
-					@keydown.stop="handleKeyDown"
-					class="w-full">
-					<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-						<slot :name="name" v-bind="slotData || {}" />
-					</template>
-				</component>
-
-				<div
-					class="absolute bottom-0 left-0 right-0 top-0 z-20 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
-					@click.stop="showDynamicValueModal = true"
-					v-if="dynamicValue?.key">
-					<FeatherIcon
-						v-if="dynamicValue?.comesFrom == 'props'"
-						name="git-commit"
-						class="size-3"></FeatherIcon>
-					<FeatherIcon v-else name="zap" class="size-3"></FeatherIcon>
-					<span class="truncate">{{ dynamicValue.key }}</span>
-				</div>
-				<button
-					class="absolute right-1 top-1 z-20 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
-					tabindex="-1"
-					v-show="dynamicValue?.key"
-					@click="clearDynamicValue">
-					<CrossIcon />
-				</button>
-			</div>
-		</div>
-	</div>
-</template>
-<script lang="ts" setup>
-import DynamicValueHandler from "@/components/Controls/DynamicValueHandler.vue";
-import Input from "@/components/Controls/Input.vue";
-import InputLabel from "@/components/Controls/InputLabel.vue";
-import CrossIcon from "@/components/Icons/Cross.vue";
-import blockController from "@/utils/blockController";
-import { extractNumberAndUnit, normalizeValueWithUnits } from "@/utils/helpers";
-import { Dropdown, FeatherIcon } from "frappe-ui";
-import type { Component } from "vue";
-import { computed, ref, useAttrs } from "vue";
-
-const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
-const emit = defineEmits<{
-	(setDynamicValue: string): void;
-	(clearDynamicValue: void): void;
-}>();
-
-const props = withDefaults(
-	defineProps<{
-		property?: string;
-		label?: string;
-		placeholder?: string;
-		controlType?: "style" | "attribute" | "key";
-		getModelValue?: () => string;
-		getPlaceholder?: () => string;
-		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
-		setModelValue?: (value: string) => void;
-		setDynamicValue?: (key: string | null, comesFrom: BlockDataKey["comesFrom"] | null) => void;
-		enableSlider?: boolean;
-		unitOptions?: string[];
-		changeFactor?: number;
-		minValue?: number;
-		maxValue?: number | null;
-		hideClearButton?: boolean;
-		component?: Component;
-		events?: Record<string, unknown>;
-		defaultValue?: string | number;
-		enableStates?: boolean;
-		allowDynamicValue?: boolean;
-		enabledStates?: string[];
-		labelPlacement?: "left" | "top";
-		dynamicValueFilterOptions?: {
-			excludePassedDownProps?: boolean;
-			excludePassedDownBlockData?: boolean;
-			excludeOwnProps?: boolean;
-			excludeOwnBlockData?: boolean;
-		};
-	}>(),
-	{
-		placeholder: "unset",
-		type: "text",
-		controlType: "key",
-		enableSlider: false,
-		unitOptions: () => [],
-		changeFactor: 1,
-		minValue: 0,
-		maxValue: null,
-		hideClearButton: false,
-		component: Input,
-		allowDynamicValue: false,
-		enabledStates: () => ["hover", "active", "focus"],
-		enableStates: undefined,
-		labelPlacement: "left",
-	},
-);
-
-const enableStateControls = computed(() => {
-	return props.enableStates ?? props.controlType === "style";
-});
-
-const stateLabels: Record<string, string> = {
-	hover: "On Hover",
-	active: "On Active",
-	focus: "On Focus",
-};
-
-const controlAttrs = computed(() => {
-	const attrs = useAttrs();
-	const propKeys = Object.keys(props);
-	propKeys.push("style");
-	return Object.fromEntries(Object.entries(attrs).filter(([key]) => !propKeys.includes(key)));
-});
-
-const defaultValue = computed(() => {
-	return props.defaultValue;
-});
-
-const modelValue = computed(() => props.getModelValue?.() ?? "");
-
-const placeholderValue = computed(() => props.getPlaceholder?.() ?? String(props.placeholder));
-
-const updateValue = (value: string | number | null | { label: string; value: string }) => {
-	if (typeof value === "object" && value !== null && "value" in value) {
-		value = value.value;
-	}
-	if (props.setModelValue) {
-		props.setModelValue(value as string);
-	}
-};
-
-const handleMouseDown = (e: MouseEvent) => {
-	if (!props.enableSlider) return;
-	const { number } = extractNumberAndUnit(String(modelValue.value || ""));
-	const startY = e.clientY;
-	const startValue = Number(number);
-	const handleMouseMove = (e: MouseEvent) => {
-		let diff = (startY - e.clientY) * props.changeFactor;
-		diff = Math.round(diff);
-		incrementOrDecrement(diff, startValue);
-	};
-	const handleMouseUp = () => {
-		window.removeEventListener("mousemove", handleMouseMove);
-	};
-	window.addEventListener("mousemove", handleMouseMove);
-	window.addEventListener("mouseup", handleMouseUp, { once: true });
-};
-
-const showDynamicValueModal = ref(false);
-
-const handleKeyDown = (e: KeyboardEvent, state?: string) => {
-	if (!props.enableSlider) return;
-	if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-		const step = e.key === "ArrowUp" ? 1 : -1;
-		incrementOrDecrement(step);
-		e.preventDefault();
-	}
-};
-
-const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
-	const value = String(modelValue.value || "");
-	const { number, unit: existingUnit } = extractNumberAndUnit(value);
-	const unit =
-		existingUnit || (props.unitOptions.length && !isNaN(Number(number)) ? props.unitOptions[0] : "");
-	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
-	if (typeof props.minValue === "number" && newValue <= props.minValue) {
-		newValue = props.minValue;
-	}
-	if (typeof props.maxValue === "number" && props.maxValue !== null && newValue >= props.maxValue) {
-		newValue = props.maxValue;
-	}
-	updateValue(newValue + "" + unit);
-};
-
-const options = computed(() => {
-	const opts = [];
-	if (props.allowDynamicValue) {
-		opts.unshift({
-			label: "Set Dynamic Value",
-			onClick: () => {
-				showDynamicValueModal.value = true;
-			},
-		});
-	}
-	return opts;
-});
-
-function setDynamicValue({ key, comesFrom }: { key: string; comesFrom?: BlockDataKey["comesFrom"] }) {
-	if (!comesFrom) comesFrom = "dataScript";
-	if (props.setDynamicValue) {
-		props.setDynamicValue(key, comesFrom);
-	} else {
-		blockController.getSelectedBlocks().forEach((block) => {
-			block.setDynamicValue(props.property, props.controlType, key, comesFrom);
-		});
-	}
-	showDynamicValueModal.value = false;
-	emit("setDynamicValue");
-}
-
-const dynamicValue = computed(() => {
-	if (props.getDynamicValue) {
-		return props.getDynamicValue();
-	}
-	const blocks = blockController.getSelectedBlocks();
-	if (!blocks?.length) return undefined;
-	const dataKeyObj = blocks[0].dynamicValues.find((obj) => {
-		return obj.type === props.controlType && obj.property === props.property;
-	});
-
-	if (dataKeyObj) {
-		return {
-			key: dataKeyObj.key || "",
-			comesFrom: dataKeyObj.comesFrom || ("dataScript" as BlockDataKey["comesFrom"]),
-		};
-	} else {
-		return { key: "", comesFrom: "dataScript" as BlockDataKey["comesFrom"] };
-	}
-});
-
-const clearDynamicValue = () => {
-	if (props.setDynamicValue) {
-		props.setDynamicValue(null, null);
-	} else {
-		const blocks = blockController.getSelectedBlocks();
-		blocks.forEach((block) => {
-			block.removeDynamicValue(props.property, props.controlType);
-		});
-	}
-	emit("clearDynamicValue");
-};
-</script>
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 0fd2a0633..1b00fc127 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -17,16 +17,16 @@
 
 		<!-- Dynamic value overlay -->
 		<div
-			v-if="dynamicValue"
+			v-if="dynamicValueKey"
 			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 			@click.stop="$emit('openDynamicModal')">
 			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-			<span class="truncate">{{ dynamicValue }}</span>
+			<span class="truncate">{{ dynamicValueKey }}</span>
 		</div>
 
 		<!-- Clear button -->
 		<button
-			v-show="dynamicValue"
+			v-show="dynamicValueKey"
 			class="absolute right-1 top-1 cursor-pointer p-1 text-ink-gray-4 hover:text-ink-gray-5"
 			tabindex="-1"
 			@click="$emit('clearDynamic')">
@@ -47,7 +47,7 @@ defineProps<{
 	modelValue: string | number;
 	defaultValue?: string | number;
 	placeholder?: string;
-	dynamicValue?: string;
+	dynamicValueKey?: string;
 	componentClass?: string;
 }>();
 

From dda3ac8e792a1b9c3435731131a84f4cb3315014 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 21:46:09 +0530
Subject: [PATCH 356/547] fix: handle case where only darkMode image is set

---
 builder/builder/doctype/builder_page/builder_page.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 3409fed5a..47b82498b 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -695,7 +695,7 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 			frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
 		)
 		light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
-		if dark_src and light_src:
+		if dark_src:
 			picture_tag = soup.new_tag("picture")
 
 			# Add source for dark mode
@@ -707,6 +707,8 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 			tag = soup.new_tag("img")
 			tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
+			if not light_src:
+				tag.attrs["src"] = ""
 		else:
 			tag = soup.new_tag(element)
 			tag.attrs = block.get("attributes", {}).copy()
@@ -724,6 +726,10 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 	add_inner_html_content(tag, block, state)
 
+	if picture_tag is not None:
+		picture_tag.append(tag)
+		return picture_tag
+
 	return tag
 
 

From 1def30e8265c0c1c9871ca45ff962af168c17d82 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 27 Jan 2026 21:46:55 +0530
Subject: [PATCH 357/547] tests: added test for dark mode img

---
 .../doctype/builder_page/test_builder_page.py | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index d7873db97..0b8bc5f8e 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -727,6 +727,51 @@ def test_repeater_from_std_props(self):
 			page.delete()
 			component.delete()
 
+	def test_dark_mode_img(self):
+		body = Block(element="body")
+		image_block = Block(
+			element="img",
+			attributes={
+				"src": "/files/light-mode-image.png",
+				"darkSrc": "/files/dark-mode-image.png",
+				"alt": "Test Image",
+			},
+		)
+		image_block_only_dark_mode = Block(
+			element="img",
+			attributes={
+				"darkSrc": "/files/another-dark-mode-image.png",
+				"alt": "Test Image",
+			},
+		)
+		body.attach_children(image_block, image_block_only_dark_mode)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Dark Mode Image Test",
+				"published": 1,
+				"route": "/dark-mode-image-test",
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/dark-mode-image-test")
+			self.assertTrue(
+				'src="/files/light-mode-image.png"' in get_html_for(content, "tag", "img", only_content=False)
+			)
+			self.assertTrue(
+				'srcset="/files/dark-mode-image.png"'
+				in get_html_for(content, "tag", "source", only_content=False)
+			)
+			self.assertTrue(
+				'srcset="/files/another-dark-mode-image.png"'
+				in get_html_for(content, "tag", "source", index=1, only_content=False)
+			)
+		finally:
+			page.delete()
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()

From 8ed6f39f3e5142835e355cb2e2d0da890b23d1b1 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 28 Jan 2026 12:00:31 +0530
Subject: [PATCH 358/547] fix: fallback to darkSrc if no src given

---
 builder/builder/doctype/builder_page/builder_page.py     | 9 +++++----
 .../builder/doctype/builder_page/test_builder_page.py    | 4 ++--
 frontend/src/components/BuilderBlock.vue                 | 3 +++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 47b82498b..0cf2e8693 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -695,7 +695,7 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 			frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
 		)
 		light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
-		if dark_src:
+		if dark_src and light_src:
 			picture_tag = soup.new_tag("picture")
 
 			# Add source for dark mode
@@ -707,11 +707,12 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 			tag = soup.new_tag("img")
 			tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
-			if not light_src:
-				tag.attrs["src"] = ""
 		else:
+			if dark_src: # use as src if no light src
+				attributes["src"] = dark_src
+				del attributes["darkSrc"]
 			tag = soup.new_tag(element)
-			tag.attrs = block.get("attributes", {}).copy()
+			tag.attrs = attributes.copy()
 			picture_tag = None
 	else:
 		tag = soup.new_tag(element)
diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 0b8bc5f8e..487382553 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -766,8 +766,8 @@ def test_dark_mode_img(self):
 				in get_html_for(content, "tag", "source", only_content=False)
 			)
 			self.assertTrue(
-				'srcset="/files/another-dark-mode-image.png"'
-				in get_html_for(content, "tag", "source", index=1, only_content=False)
+				'src="/files/another-dark-mode-image.png"'
+				in get_html_for(content, "tag", "img", index=1, only_content=False)
 			)
 		finally:
 			page.delete()
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3ca1e45c4..9dab13625 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -168,6 +168,9 @@ const attributes = computed(() => {
 		if (builderStore.isDark && attribs.darkSrc) {
 			attribs.src = attribs.darkSrc;
 		}
+		if (attribs.darkSrc && !attribs.src) {
+			attribs.src = attribs.darkSrc;
+		}
 		delete attribs.darkSrc;
 	}
 

From 8426ace337b09a42b9959b5670b8a1a292c0518d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 28 Jan 2026 12:32:53 +0530
Subject: [PATCH 359/547] fix(BlockProperties): Adjust sticky div position for
 better layout

---
 frontend/src/components/BlockProperties.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 446576228..7f0248968 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -14,7 +14,7 @@
 				</template>
 			</CollapsibleSection>
 		</div>
-		<div class="sticky top-0 mt-[-16px] flex w-full bg-surface-white py-3">
+		<div class="sticky top-[1px] z-[1] mt-[-16px] flex w-full bg-surface-white py-3">
 			<BuilderInput
 				ref="searchInput"
 				type="text"

From 8dc0177ec297d8a4f6b66099e55e146b7dbbdf97 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 28 Jan 2026 18:04:10 +0530
Subject: [PATCH 360/547] fix(DashboardSidebar): Add overflow handling to
 folder name display

- and fix EditableSpan to enhance styling for better focus and truncation
---
 frontend/src/components/DashboardSidebar.vue | 2 +-
 frontend/src/components/EditableSpan.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index 54df59d4e..e1af75617 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -116,7 +116,7 @@
 					),
 				}"
 				@click="setFolderActive(project.folder_name)">
-				<span class="flex flex-1 gap-2">
+				<span class="flex flex-1 gap-2 overflow-hidden">
 					<FolderIcon class="size-4"></FolderIcon>
 					<EditableSpan
 						v-model="project.folder_name"
diff --git a/frontend/src/components/EditableSpan.vue b/frontend/src/components/EditableSpan.vue
index c540da425..15e33fa7b 100644
--- a/frontend/src/components/EditableSpan.vue
+++ b/frontend/src/components/EditableSpan.vue
@@ -1,6 +1,7 @@
 <template>
 	<div
 		ref="editableRef"
+		class="overflow-hidden truncate rounded-sm px-1 focus-within:border focus-within:border-outline-gray-2 focus-visible:outline-none"
 		:contenteditable="editMode"
 		@dblclick="handleDoubleClick"
 		@blur="handleBlur"

From f4c7e31ebe26c0f03f6b130a65ecb1c79391210e Mon Sep 17 00:00:00 2001
From: Hemant-dbit <guptahemant350@gmail.com>
Date: Thu, 29 Jan 2026 12:31:06 +0530
Subject: [PATCH 361/547] fix: Left panel default width

* fix: left panel resize behavior

* fix: left panel resize behavior
---
 frontend/src/components/BuilderLeftPanel.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 55a1f8521..5fba91394 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -3,6 +3,7 @@
 		<PanelResizer
 			:dimension="builderStore.builderLayout.leftPanelWidth"
 			side="right"
+			:minDimension="200"
 			:maxDimension="500"
 			@resize="(width) => (builderStore.builderLayout.leftPanelWidth = width)" />
 		<div

From ff1da136eeef1aa72be043a95af6108a347eab52 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 30 Jan 2026 12:34:23 +0530
Subject: [PATCH 362/547] fix(PageOptions): Refactor input handling to use
 debounced updates for page title and route

Update only used to trigger on input blur
---
 frontend/src/components/PageOptions.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/PageOptions.vue b/frontend/src/components/PageOptions.vue
index 70328c007..b7bd85f3c 100644
--- a/frontend/src/components/PageOptions.vue
+++ b/frontend/src/components/PageOptions.vue
@@ -7,17 +7,18 @@
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px]"
 				:modelValue="page.page_title"
 				:disabled="builderStore.readOnlyMode"
-				@update:modelValue="(val: string) => pageStore.updateActivePage('page_title', val)" />
+				@input="(val: string) => updateActivePage('page_title', val)"
+				@update:modelValue="(val: string) => updateActivePage('page_title', val)" />
 			<BuilderInput
 				type="text"
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px] [&>p]:text-p-xs"
 				label="Route"
 				description="The URL path for this page. For variables, use colon (e.g. /users/:id)"
-				@input="(val: string) => (page.route = val)"
 				:modelValue="page.route"
 				:disabled="builderStore.readOnlyMode"
 				:hideClearButton="true"
-				@update:modelValue="(val: string) => pageStore.updateActivePage('route', val)" />
+				@input="(val: string) => updateActivePage('route', val)"
+				@update:modelValue="(val: string) => updateActivePage('route', val)" />
 			<!-- Dynamic Route Variables -->
 			<CollapsibleSection
 				sectionName="URL Variables"
@@ -40,6 +41,7 @@ import useBuilderStore from "@/stores/builderStore";
 import usepageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getRouteVariables } from "@/utils/helpers";
+import { useDebounceFn } from "@vueuse/core";
 import { computed } from "vue";
 import CollapsibleSection from "./CollapsibleSection.vue";
 
@@ -52,4 +54,13 @@ const props = defineProps<{
 const dynamicVariables = computed(() => {
 	return getRouteVariables(props.page.route || "");
 });
+
+const debouncedUpdateActivePage = useDebounceFn((key: keyof BuilderPage, val: any) => {
+	pageStore.updateActivePage(key, val);
+}, 300);
+
+const updateActivePage = (key: keyof BuilderPage, val: string) => {
+	props.page[key] = val;
+	debouncedUpdateActivePage(key, val);
+};
 </script>

From 4d3baf56a0789962613b8d48cc855411abf78d1d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 31 Jan 2026 22:09:35 +0530
Subject: [PATCH 363/547] fix: Add min-width to container to avoid input
 overflow

---
 frontend/src/components/Controls/PropertyControlInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 0fd2a0633..a0b57a158 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="relative w-full">
+	<div class="relative w-full min-w-0">
 		<component
 			:is="component"
 			v-bind="controlAttrs"

From 0525676889af82c2052f95b38e29b1e021660960 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 31 Jan 2026 23:06:06 +0530
Subject: [PATCH 364/547] fix: Remove z-index and order to fix stacking and
 order

and revert: https://github.com/frappe/builder/commit/8426ace337b09a42b9959b5670b8a1a292c0518d
---
 frontend/src/components/BlockProperties.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index 7f0248968..204eed657 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-if="blockController.isBlockSelected()" class="flex select-none flex-col pb-16">
-		<div class="order-1 mt-1 flex flex-col gap-3">
+	<div v-if="blockController.isBlockSelected()" class="flex select-none flex-col-reverse pb-16">
+		<div class="mt-1 flex flex-col gap-3">
 			<CollapsibleSection
 				:sectionName="section.name"
 				v-for="section in sections"
@@ -14,7 +14,7 @@
 				</template>
 			</CollapsibleSection>
 		</div>
-		<div class="sticky top-[1px] z-[1] mt-[-16px] flex w-full bg-surface-white py-3">
+		<div class="sticky top-0 mt-[-16px] flex w-full bg-surface-white py-3">
 			<BuilderInput
 				ref="searchInput"
 				type="text"

From be025c8548c97fb3c303c07dfb8d0cc572ff7969 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 1 Feb 2026 12:36:44 +0530
Subject: [PATCH 365/547] fix: Misc style tweaks

---
 frontend/src/components/BackgroundHandler.vue        | 2 +-
 frontend/src/components/Controls/ColorInput.vue      | 2 +-
 frontend/src/components/DashboardSidebar.vue         | 2 +-
 frontend/src/components/Settings/GlobalRedirects.vue | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 07ec054b4..816c0691d 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -14,7 +14,7 @@
 					@update:modelValue="setBGImageURL">
 					<template #prefix>
 						<div
-							class="absolute left-2 top-[6px] h-4 w-4 cursor-pointer rounded shadow-sm"
+							class="absolute left-2 top-[6px] size-4 cursor-pointer rounded shadow-md"
 							@click="togglePopover"
 							:class="{ 'bg-surface-gray-4': !Boolean(backgroundImage) }"
 							:style="previewStyle" />
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 8579f40b6..96201d727 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -42,7 +42,7 @@
 								@update:modelValue="handleColorUpdate">
 								<template #prefix>
 									<div
-										class="h-4 w-4 rounded shadow-sm"
+										class="size-4 rounded shadow-md"
 										@click="togglePopover"
 										:style="{
 											background: modelValue
diff --git a/frontend/src/components/DashboardSidebar.vue b/frontend/src/components/DashboardSidebar.vue
index e1af75617..c9a8c7eae 100644
--- a/frontend/src/components/DashboardSidebar.vue
+++ b/frontend/src/components/DashboardSidebar.vue
@@ -108,7 +108,7 @@
 				<p class="text-sm text-ink-gray-5">No folders yet</p>
 			</div>
 			<span
-				class="flex h-8 w-full cursor-pointer items-center justify-between gap-2 rounded p-2 py-1 text-base text-ink-gray-6"
+				class="flex h-8 w-full cursor-pointer items-center justify-between gap-2 rounded p-2 py-1 pr-1 text-base text-ink-gray-6"
 				v-for="project in builderProjectFolder.data"
 				:class="{
 					'bg-surface-modal text-ink-gray-8 shadow-sm dark:bg-surface-gray-2': isFolderActive(
diff --git a/frontend/src/components/Settings/GlobalRedirects.vue b/frontend/src/components/Settings/GlobalRedirects.vue
index 7bc953846..19bee9274 100644
--- a/frontend/src/components/Settings/GlobalRedirects.vue
+++ b/frontend/src/components/Settings/GlobalRedirects.vue
@@ -5,7 +5,7 @@
 				<BuilderInput v-model="redirectMap.from" placeholder="From" :hideClearButton="true" required />
 				<BuilderInput v-model="redirectMap.to" placeholder="To" :hideClearButton="true" required />
 			</div>
-			<div class="justify-self-end py-1">
+			<div class="mr-1 justify-self-end py-1">
 				<Button type="submit" label="Add Redirect" variant="ghost" iconLeft="plus" />
 			</div>
 		</form>

From 149ec6fce7562892ea7fbc1abda3c53b79634897 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Sun, 1 Feb 2026 07:23:21 +0000
Subject: [PATCH 366/547] fix:toggle Variable Manager

---
 frontend/src/components/BuilderLeftPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 5fba91394..4cb4c9b2f 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -139,7 +139,7 @@ const leftPanelOptions = [
 
 const setActiveTab = (tab: LeftSidebarTabOption) => {
 	if (tab === "variables") {
-		showVariableManager.value = true;
+		showVariableManager.value = !showVariableManager.value;
 	} else {
 		builderStore.leftPanelActiveTab = tab;
 	}

From 290fa8616da5e829a25f3f915f5a6fecbcf05798 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Sun, 1 Feb 2026 08:09:37 +0000
Subject: [PATCH 367/547] fix:constrain Variable Manager drag within viewport

---
 .../components/Controls/DraggablePopup.vue    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index 9fa193cfa..7c75461c5 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -12,6 +12,7 @@
 						top: popupTop + 'px',
 					}">
 					<div
+						ref="headerRef"
 						class="flex cursor-grab select-none items-center justify-between px-4 py-2 pr-3 text-sm text-ink-gray-9"
 						:class="{ 'cursor-grabbing': isDragging }"
 						@mousedown="startDrag">
@@ -75,6 +76,7 @@ const props = withDefaults(
 const emit = defineEmits(["update:modelValue"]);
 
 const popoverContent = ref(null) as Ref<HTMLElement | null>;
+const headerRef = ref<HTMLElement | null>(null);
 const popupLeft = ref(1500);
 const popupTop = ref(100);
 let isDragging = ref(false);
@@ -105,13 +107,29 @@ const startDrag = (event: MouseEvent) => {
 };
 
 const drag = (event: MouseEvent) => {
-	if (!isDragging.value) return;
+	if (!isDragging.value || !popoverContent.value || !headerRef.value) return;
+
 	const dx = event.clientX - startX;
 	const dy = event.clientY - startY;
-	popupLeft.value = startLeft + dx;
-	popupTop.value = startTop + dy;
+
+	let newLeft = startLeft + dx;
+	let newTop = startTop + dy;
+
+	const headerHeight = headerRef.value.offsetHeight;
+	const popupWidth = popoverContent.value.offsetWidth;
+
+	const minTop = 0;
+	const maxTop = window.innerHeight - headerHeight;
+
+	const minLeft = 0;
+	const maxLeft = window.innerWidth - popupWidth;
+
+	popupTop.value = Math.min(Math.max(newTop, minTop), maxTop);
+	popupLeft.value = Math.min(Math.max(newLeft, minLeft), maxLeft);
 };
 
+
+
 const stopDrag = () => {
 	isDragging.value = false;
 	document.removeEventListener("mousemove", drag);

From 2f069bb6e7edfc6fa8be19a663283598d73f84d7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 1 Feb 2026 15:37:53 +0530
Subject: [PATCH 368/547] refactor(api): Remove unused method

---
 builder/api.py | 32 +++-----------------------------
 1 file changed, 3 insertions(+), 29 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index 970c05b77..602621d06 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -1,4 +1,3 @@
-import json
 import os
 from io import BytesIO
 from types import FunctionType, MethodType, ModuleType
@@ -11,7 +10,6 @@
 from frappe.apps import get_apps as get_permitted_apps
 from frappe.core.doctype.file.file import get_local_image
 from frappe.core.doctype.file.utils import delete_file
-from frappe.integrations.utils import make_post_request
 from frappe.model.document import Document
 from frappe.utils.caching import redis_cache
 from frappe.utils.safe_exec import NamespaceDict, get_safe_globals
@@ -23,33 +21,6 @@
 from builder.builder.doctype.builder_page.builder_page import BuilderPageRenderer
 
 
-@frappe.whitelist()
-def get_blocks(prompt):
-	API_KEY = frappe.conf.openai_api_key
-	if not API_KEY:
-		frappe.throw("OpenAI API Key not set in site config.")
-
-	messages = [
-		{
-			"role": "system",
-			"content": "You are a website developer. You respond only with HTML code WITHOUT any EXPLANATION. You use any publicly available images in the webpage. You can use any font from fonts.google.com. Do not use any external css file or font files. DO NOT ADD <style> TAG AT ALL! You should use tailwindcss for styling the page. Use images from pixabay.com or unsplash.com",
-		},
-		{"role": "user", "content": prompt},
-	]
-
-	response = make_post_request(
-		"https://api.openai.com/v1/chat/completions",
-		headers={"Content-Type": "application/json", "Authorization": f"Bearer {API_KEY}"},
-		data=json.dumps(
-			{
-				"model": "gpt-3.5-turbo",
-				"messages": messages,
-			}
-		),
-	)
-	return response["choices"][0]["message"]["content"]
-
-
 @frappe.whitelist()
 def get_posthog_settings():
 	can_record_session = False
@@ -72,6 +43,9 @@ def get_posthog_settings():
 
 @frappe.whitelist()
 def get_page_preview_html(page: str, **kwarg) -> Response:
+	if not frappe.has_permission("Builder Page", "read", page):
+		frappe.throw("No permission to preview this page")
+
 	# to load preview without publishing
 	frappe.form_dict.update(kwarg)
 	frappe.local.request.for_preview = True

From 9f7d17f613b5d194ad552e128f8cc3e11ed145c6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 1 Feb 2026 15:51:52 +0530
Subject: [PATCH 369/547] fix: Make popup drag experience smoother

---
 .../components/Controls/DraggablePopup.vue    | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Controls/DraggablePopup.vue b/frontend/src/components/Controls/DraggablePopup.vue
index 7c75461c5..588f42288 100644
--- a/frontend/src/components/Controls/DraggablePopup.vue
+++ b/frontend/src/components/Controls/DraggablePopup.vue
@@ -5,6 +5,7 @@
 				<div
 					ref="popoverContent"
 					class="fixed flex flex-col gap-1 overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-2xl"
+					:class="{ 'transition-all duration-300 ease-in-out': isTransitioning }"
 					:style="{
 						width: width + 'px',
 						minHeight: height + 'px',
@@ -79,7 +80,8 @@ const popoverContent = ref(null) as Ref<HTMLElement | null>;
 const headerRef = ref<HTMLElement | null>(null);
 const popupLeft = ref(1500);
 const popupTop = ref(100);
-let isDragging = ref(false);
+const isDragging = ref(false);
+const isTransitioning = ref(false);
 
 let startX = 0;
 let startY = 0;
@@ -112,27 +114,39 @@ const drag = (event: MouseEvent) => {
 	const dx = event.clientX - startX;
 	const dy = event.clientY - startY;
 
-	let newLeft = startLeft + dx;
-	let newTop = startTop + dy;
+	popupTop.value = startTop + dy;
+	popupLeft.value = startLeft + dx;
+};
 
-	const headerHeight = headerRef.value.offsetHeight;
-	const popupWidth = popoverContent.value.offsetWidth;
+const stopDrag = () => {
+	isDragging.value = false;
+	document.removeEventListener("mousemove", drag);
 
-	const minTop = 0;
-	const maxTop = window.innerHeight - headerHeight;
+	if (popoverContent.value && headerRef.value) {
+		const headerHeight = headerRef.value.offsetHeight;
+		const popupWidth = popoverContent.value.offsetWidth;
 
-	const minLeft = 0;
-	const maxLeft = window.innerWidth - popupWidth;
+		const padding = 10;
 
-	popupTop.value = Math.min(Math.max(newTop, minTop), maxTop);
-	popupLeft.value = Math.min(Math.max(newLeft, minLeft), maxLeft);
-};
+		const minTop = 0 + padding;
+		const maxTop = window.innerHeight - headerHeight - padding;
+		const minLeft = 0 + padding;
+		const maxLeft = window.innerWidth - popupWidth - padding;
 
+		const clampedTop = Math.min(Math.max(popupTop.value, minTop), maxTop);
+		const clampedLeft = Math.min(Math.max(popupLeft.value, minLeft), maxLeft);
 
+		// transition if position needs adjustment
+		if (clampedTop !== popupTop.value || clampedLeft !== popupLeft.value) {
+			isTransitioning.value = true;
+			popupTop.value = clampedTop;
+			popupLeft.value = clampedLeft;
 
-const stopDrag = () => {
-	isDragging.value = false;
-	document.removeEventListener("mousemove", drag);
+			setTimeout(() => {
+				isTransitioning.value = false;
+			}, 300);
+		}
+	}
 };
 
 const handleClickOutside = (event: Event) => {

From bf10ca283902108f29e042c540390399fbab400b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 1 Feb 2026 20:12:53 +0530
Subject: [PATCH 370/547] fix: Place "Order" property below "Grow" and "Shrink"
 property

based on importance
---
 .../src/components/BlockFlexLayoutHandler.vue    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 43da7faf8..dd90603f1 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -42,14 +42,6 @@
 		]"
 		defaultValue="nowrap"></StylePropertyControl>
 	<div class="flex flex-col gap-3" v-if="blockController.getParentBlock()?.isFlex()">
-		<StylePropertyControl
-			label="Order"
-			propertyKey="order"
-			:enableSlider="true"
-			:min="-99"
-			:max="99"
-			:step="1"
-			:defaultValue="0" />
 		<StylePropertyControl
 			label="Grow"
 			propertyKey="flexGrow"
@@ -68,6 +60,14 @@
 				{ label: 'No', value: 0 },
 			]"
 			:defaultValue="1" />
+		<StylePropertyControl
+			label="Order"
+			propertyKey="order"
+			:enableSlider="true"
+			:min="-99"
+			:max="99"
+			:step="1"
+			:defaultValue="0" />
 	</div>
 </template>
 <script lang="ts" setup>

From 27fb5b4ff6cc44d616defcd22d8a3a3dd5469a80 Mon Sep 17 00:00:00 2001
From: Nikhil Kothari <nik.kothari22@live.com>
Date: Wed, 4 Feb 2026 23:43:35 +0530
Subject: [PATCH 371/547] feat: add option for justify in text alignment

---
 .../components/BlockPropertySections/TypographySection.ts   | 6 ++++++
 frontend/src/components/Controls/TabButtons.vue             | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 5b527d46a..0745c014c 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -191,6 +191,12 @@ const typographySectionProperties = [
 						icon: "align-right",
 						hideLabel: true,
 					},
+					{
+						label: "Justify",
+						value: "justify",
+						icon: "align-justify",
+						hideLabel: true,
+					},
 				],
 				defaultValue: "left",
 			};
diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index cd042079c..fa7deabb7 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -13,7 +13,7 @@
 							active ? 'ring-outline-gray-2 focus-visible:ring' : '',
 							!modelValue && checked ? 'border border-dashed border-outline-gray-3' : '',
 							modelValue && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
-							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
+							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-2 py-[5px] leading-none transition-colors focus:outline-none',
 						]">
 						<FeatherIcon
 							class="size-4"

From 68cc83c89cfc8a860cef74218a29e829e8a06009 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Thu, 5 Feb 2026 16:13:32 +0530
Subject: [PATCH 372/547] fix: avoid build from source due to python 3.14

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 3f3fa90ef..66e563ed8 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -11,7 +11,7 @@ dependencies = [
     "jsmin>=3.0.1",
     "csscompressor>=0.9.5",
     "pandas (>=2.3.2,<3.0.0)",
-    "duckdb~=1.3.0",
+    "duckdb==1.4.3",
 ]
 
 [project.urls]

From c312c4f5f39ff186f552fa2b019937cb91d24ab2 Mon Sep 17 00:00:00 2001
From: Vibhuti410 <157696107+Vibhuti410@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:05:58 +0530
Subject: [PATCH 373/547] fix: auto-add # for valid hex color input (#480)

* fix: auto-add # for valid hex color input

* style: Fix formatting

---------

Co-authored-by: Frappe <frappe@Vibhutis-MacBook-Air.local>
---
 frontend/src/components/Controls/ColorInput.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index fda042838..970b131e3 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -141,9 +141,16 @@ const normalizeColorInput = (val: string) => {
 	if (/^#+/.test(val)) {
 		return "#" + val.replace(/^#+/, "");
 	}
+	if (isValidHexChar(val)) {
+		return "#" + val;
+	}
 	return val;
 };
 
+const isValidHexChar = (val: string) => {
+	return /^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val);
+};
+
 const isValidColorInput = (val: string | null) => {
 	if (!val) return true;
 

From 704eb132e3761478d5e2cb1adfed02b256640eff Mon Sep 17 00:00:00 2001
From: Vibhuti410 <157696107+Vibhuti410@users.noreply.github.com>
Date: Fri, 6 Feb 2026 09:34:28 +0530
Subject: [PATCH 374/547] fix: selected option highlight in toggle (#476)

* Fix selected state for Yes/No option toggle

* fix: removed unwanted code line

* refactor: Simplify

* refactor: simplify OptionToggle value handling

---------

Co-authored-by: Frappe <frappe@Vibhutis-MacBook-Air.local>
Co-authored-by: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
---
 frontend/components.d.ts                        |  4 ++--
 frontend/src/components/Controls/TabButtons.vue | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6560a3865..80276f733 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -141,7 +141,7 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
-    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
     VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
+    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
   }
 }
diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index fa7deabb7..5230446a2 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -5,7 +5,7 @@
 				class="contents"
 				v-for="button in buttons"
 				:key="button.label"
-				:value="button.value ?? button.label"
+				:value="String(button.value ?? button.label)"
 				v-slot="{ active, checked }">
 				<Tooltip :disabled="!button.showTooltip" :text="button.label" placement="top">
 					<button
@@ -21,10 +21,7 @@
 							:name="button.icon"
 							:label="button.label"
 							:aria-label="button.label" />
-						<RadioGroupLabel
-							as="span"
-							class="flex items-center"
-							v-show="button.label && !button.hideLabel">
+						<RadioGroupLabel as="span" class="flex items-center" v-show="button.label && !button.hideLabel">
 							{{ button.label }}
 						</RadioGroupLabel>
 					</button>
@@ -54,7 +51,8 @@ const props = defineProps<{
 }>();
 
 const value = computed(() => {
-	return props.modelValue || props.defaultValue;
+	const v = props.modelValue ?? props.defaultValue;
+	return v == null ? v : String(v);
 });
 
 const emit = defineEmits<{

From fb83b1720c93a12c80005b251d83c5551426893c Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Fri, 6 Feb 2026 12:33:11 +0000
Subject: [PATCH 375/547] fix(dashboard): show confirm dialog and delete pages
 and folder

---
 frontend/src/utils/helpers.ts | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 56f6fa246..ecd13b90a 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -122,17 +122,26 @@ function toTitleCase(str: string): string {
 
 async function confirm(message: string, title: string = "Confirm"): Promise<boolean> {
 	return new Promise((resolve) => {
-		confirmDialog({
-			title: title,
-			message: message,
-			onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
-				resolve(true);
-				hideDialog();
-			},
-			onCancel: () => {
-				resolve(false);
+		showDialog({
+			title,
+			message,
+			icon: {
+				name:'alert-circele',
+				appearance:"warning"
 			},
-		});
+			actions:[
+				{
+					label:"Cancel",
+					variant: "subtle",
+					onClick: () => resolve(false),
+				},
+				{
+					label:"Confirm",
+					theme: "red",
+					onClick: () => resolve(true)
+				}
+			]
+		})
 	});
 }
 

From f4f51e32f2fb13bb2b6b91213b8cd6b290d5b8a9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Sat, 7 Feb 2026 18:12:16 +0530
Subject: [PATCH 376/547] Revert "fix: selected option highlight in toggle
 (#476)"

This reverts commit 704eb132e3761478d5e2cb1adfed02b256640eff.
---
 frontend/components.d.ts                        |  4 ++--
 frontend/src/components/Controls/TabButtons.vue | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 80276f733..6560a3865 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -141,7 +141,7 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
-    VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
     VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
+    VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
   }
 }
diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index 5230446a2..fa7deabb7 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -5,7 +5,7 @@
 				class="contents"
 				v-for="button in buttons"
 				:key="button.label"
-				:value="String(button.value ?? button.label)"
+				:value="button.value ?? button.label"
 				v-slot="{ active, checked }">
 				<Tooltip :disabled="!button.showTooltip" :text="button.label" placement="top">
 					<button
@@ -21,7 +21,10 @@
 							:name="button.icon"
 							:label="button.label"
 							:aria-label="button.label" />
-						<RadioGroupLabel as="span" class="flex items-center" v-show="button.label && !button.hideLabel">
+						<RadioGroupLabel
+							as="span"
+							class="flex items-center"
+							v-show="button.label && !button.hideLabel">
 							{{ button.label }}
 						</RadioGroupLabel>
 					</button>
@@ -51,8 +54,7 @@ const props = defineProps<{
 }>();
 
 const value = computed(() => {
-	const v = props.modelValue ?? props.defaultValue;
-	return v == null ? v : String(v);
+	return props.modelValue || props.defaultValue;
 });
 
 const emit = defineEmits<{

From 4f735d314963c49e9a6064cc0438ccec3015a8cb Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:09:02 +0530
Subject: [PATCH 377/547] fix(PropertyControl): Allow modelValue as boolean and
 number as well

After https://github.com/frappe/builder/pull/464, property controls stopped accepting values as boolean and number and used to auto convert all values to string, which is why components like TabButton stopped working as expected.

(cherry picked from commit 37a92c21911f0ab899e9d9f6b2a32892cd67fa23)

# Conflicts:
#	frontend/src/components/Controls/BasePropertyControl.vue
#	frontend/src/components/Controls/PropertyControlInput.vue
#	frontend/src/components/Controls/TabButtons.vue
---
 frontend/components.d.ts                      |  2 +-
 frontend/src/builder.d.ts                     |  2 +-
 .../Controls/AttributePropertyControl.vue     | 20 +++++++-------
 .../Controls/BasePropertyControl.vue          | 10 +++++--
 .../Controls/PropertyControlInput.vue         |  7 +++++
 .../Controls/StylePropertyControl.vue         | 24 ++++++++---------
 .../src/components/Controls/TabButtons.vue    | 26 ++++++++++++++++++-
 7 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6560a3865..ceed0d645 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index b7ea33828..9f9da6007 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -1,4 +1,4 @@
-declare type StyleValue = string | number | null | undefined;
+declare type StyleValue = string | number | boolean | null | undefined;
 
 declare type styleProperty = keyof CSSProperties | `__${string}`;
 
diff --git a/frontend/src/components/Controls/AttributePropertyControl.vue b/frontend/src/components/Controls/AttributePropertyControl.vue
index e47638cc4..dbe42d73b 100644
--- a/frontend/src/components/Controls/AttributePropertyControl.vue
+++ b/frontend/src/components/Controls/AttributePropertyControl.vue
@@ -21,9 +21,9 @@ const props = withDefaults(
 		propertyKey: string;
 		label?: string;
 		placeholder?: string;
-		getModelValue?: () => string;
-		getPlaceholder?: () => string;
-		setModelValue?: (value: string) => void;
+		getModelValue?: () => string | number | boolean;
+		getPlaceholder?: () => string | number | boolean;
+		setModelValue?: (value: string | number | boolean) => void;
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
@@ -44,19 +44,19 @@ const props = withDefaults(
 const baseProps = computed(() => ({
 	...props,
 	controlType: "attribute" as const,
-	getModelValue:
-		props.getModelValue || (() => (blockController.getAttribute(props.propertyKey) as string) || ""),
+	getModelValue: props.getModelValue || (() => blockController.getAttribute(props.propertyKey) ?? ""),
 	setModelValue:
-		props.setModelValue || ((value: string) => blockController.setAttribute(props.propertyKey, value)),
+		props.setModelValue ||
+		((value: string | number | boolean) => blockController.setAttribute(props.propertyKey, String(value))),
 }));
 
-const getVariantValue = (variantName: string) => {
+const getVariantValue = (variantName: string): string | number | boolean => {
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
-	return property ? (blockController.getAttribute(property) as string) || "" : "";
+	return property ? (blockController.getAttribute(property) ?? "") : "";
 };
 
-const setVariantValue = (variantName: string, value: string | null) => {
+const setVariantValue = (variantName: string, value: string | number | boolean | null) => {
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
-	if (property) blockController.setAttribute(property, value || "");
+	if (property) blockController.setAttribute(property, value !== null ? String(value) : "");
 };
 </script>
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 03ffd4beb..5d4dda881 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -101,11 +101,17 @@ const props = withDefaults(
 		label?: string;
 		placeholder?: string;
 		controlType?: "style" | "attribute" | "key";
+<<<<<<< HEAD
 		getModelValue?: () => string;
 		getPlaceholder?: () => string;
 		setModelValue?: (value: string) => void;
 		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
 		setDynamicValue?: (key: string, comesFrom: BlockDataKey["comesFrom"]) => void;
+=======
+		getModelValue?: () => string | number | boolean;
+		getPlaceholder?: () => string | number | boolean;
+		setModelValue?: (value: string | number | boolean) => void;
+>>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
@@ -117,8 +123,8 @@ const props = withDefaults(
 		allowDynamicValue?: boolean;
 		labelPlacement?: "left" | "top";
 		variants?: Array<{ name: string; property: string; label: string }>;
-		getVariantValue?: (variant: string) => string;
-		setVariantValue?: (variant: string, value: string | null) => void;
+		getVariantValue?: (variant: string) => string | number | boolean;
+		setVariantValue?: (variant: string, value: string | number | boolean | null) => void;
 	}>(),
 	{
 		placeholder: "unset",
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 54ccd8276..3f271fefe 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -44,10 +44,17 @@ defineProps<{
 	component: Component;
 	controlAttrs?: Record<string, unknown>;
 	events?: Record<string, unknown>;
+<<<<<<< HEAD
 	modelValue: string | number;
 	defaultValue?: string | number;
 	placeholder?: string;
 	dynamicValueKey?: string;
+=======
+	modelValue: string | number | boolean;
+	defaultValue?: string | number | boolean;
+	placeholder?: string | number | boolean;
+	dynamicValue?: string;
+>>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
 	componentClass?: string;
 }>();
 
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index eb46646e3..22d61d15c 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -21,9 +21,9 @@ const props = withDefaults(
 		propertyKey: string;
 		label?: string;
 		placeholder?: string;
-		getModelValue?: () => string;
-		getPlaceholder?: () => string;
-		setModelValue?: (value: string) => void;
+		getModelValue?: () => string | number | boolean;
+		getPlaceholder?: () => string | number | boolean;
+		setModelValue?: (value: string | number | boolean) => void;
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
@@ -64,15 +64,15 @@ const allVariants = computed(() => [
 	...(props.variants || []),
 ]);
 
-const getVariantValue = (variantName: string): string => {
+const getVariantValue = (variantName: string): string | number | boolean => {
 	if (stateVariants.value.find((v) => v.name === variantName)) {
-		return String(blockController.getNativeStyle(`${variantName}:${props.propertyKey}`) || "");
+		return blockController.getNativeStyle(`${variantName}:${props.propertyKey}`) ?? "";
 	}
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
-	return property ? String(blockController.getAttribute(property) || "") : "";
+	return property ? (blockController.getNativeStyle(property) ?? "") : "";
 };
 
-const setVariantValue = (variantName: string, value: string | null) => {
+const setVariantValue = (variantName: string, value: string | number | boolean | null) => {
 	if (stateVariants.value.find((v) => v.name === variantName)) {
 		if (value !== null) {
 			blockController.getSelectedBlocks().forEach((block) => {
@@ -87,7 +87,7 @@ const setVariantValue = (variantName: string, value: string | null) => {
 		return;
 	}
 	const property = props.variants?.find((v) => v.name === variantName)?.property;
-	if (property) blockController.setAttribute(property, value || "");
+	if (property) blockController.setStyle(property, value);
 };
 
 const baseProps = computed(() => {
@@ -95,12 +95,12 @@ const baseProps = computed(() => {
 	return {
 		...rest,
 		controlType: "style" as const,
-		getModelValue:
-			props.getModelValue || (() => String(blockController.getNativeStyle(props.propertyKey) ?? "")),
+		getModelValue: props.getModelValue || (() => blockController.getNativeStyle(props.propertyKey) ?? ""),
 		setModelValue:
-			props.setModelValue || ((value: string) => blockController.setStyle(props.propertyKey, value)),
+			props.setModelValue ||
+			((value: string | number | boolean) => blockController.setStyle(props.propertyKey, value)),
 		getPlaceholder:
-			props.getPlaceholder || (() => String(blockController.getCascadingStyle(props.propertyKey) ?? "unset")),
+			props.getPlaceholder || (() => blockController.getCascadingStyle(props.propertyKey) ?? "unset"),
 	};
 });
 </script>
diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index fa7deabb7..08bd6cc8c 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -7,6 +7,7 @@
 				:key="button.label"
 				:value="button.value ?? button.label"
 				v-slot="{ active, checked }">
+<<<<<<< HEAD
 				<Tooltip :disabled="!button.showTooltip" :text="button.label" placement="top">
 					<button
 						:class="[
@@ -29,6 +30,25 @@
 						</RadioGroupLabel>
 					</button>
 				</Tooltip>
+=======
+				<button
+					:class="[
+						active ? 'ring-outline-gray-2 focus-visible:ring' : '',
+						!isValueSet() && checked ? 'border border-dashed border-outline-gray-3' : '',
+						isValueSet() && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
+						'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
+					]">
+					<FeatherIcon
+						class="h-4 w-4"
+						v-if="button.icon"
+						:name="button.icon"
+						:label="button.label"
+						:aria-label="button.label" />
+					<RadioGroupLabel as="span" class="flex h-4 items-center" v-show="button.label && !button.hideLabel">
+						{{ button.label }}
+					</RadioGroupLabel>
+				</button>
+>>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
 			</RadioGroupOption>
 		</div>
 	</RadioGroup>
@@ -54,10 +74,14 @@ const props = defineProps<{
 }>();
 
 const value = computed(() => {
-	return props.modelValue || props.defaultValue;
+	return isValueSet() ? props.modelValue : props.defaultValue;
 });
 
 const emit = defineEmits<{
 	(e: "update:modelValue", value: string | number | boolean): void;
 }>();
+
+const isValueSet = (): boolean => {
+	return props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== "";
+};
 </script>

From 02587f05539ae07087d832bea05f2b44c1109684 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:09:22 +0530
Subject: [PATCH 378/547] fix(ImageUploadInput): Add fileTypes prop to
 FileUploader for image uploads

(cherry picked from commit d4e5d2c5d099bfd4fc79fa1a3700f9c6fd5d180a)
---
 frontend/src/components/ImageUploadInput.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/ImageUploadInput.vue b/frontend/src/components/ImageUploadInput.vue
index 34b31e279..df75354ff 100644
--- a/frontend/src/components/ImageUploadInput.vue
+++ b/frontend/src/components/ImageUploadInput.vue
@@ -38,6 +38,7 @@
 			<div class="rounded-lg bg-surface-white p-3 shadow-lg">
 				<FileUploader
 					@success="(file: FileDoc) => setImageURL(file.file_url)"
+					fileTypes="image/*"
 					:uploadArgs="{
 						private: false,
 						folder: 'Home/Builder Uploads',

From dfffc2a6f0b3b913e63904243416f1a904516d0e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:22:04 +0530
Subject: [PATCH 379/547] fix: Resolve conflicts

---
 frontend/components.d.ts                      |  2 +-
 .../Controls/BasePropertyControl.vue          | 10 ++----
 .../Controls/PropertyControlInput.vue         | 11 ++-----
 .../src/components/Controls/TabButtons.vue    | 31 +++----------------
 4 files changed, 9 insertions(+), 45 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ceed0d645..80276f733 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -141,7 +141,7 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
-    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
     VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
+    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
   }
 }
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 5d4dda881..70409a7ab 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -101,17 +101,11 @@ const props = withDefaults(
 		label?: string;
 		placeholder?: string;
 		controlType?: "style" | "attribute" | "key";
-<<<<<<< HEAD
-		getModelValue?: () => string;
-		getPlaceholder?: () => string;
-		setModelValue?: (value: string) => void;
-		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
-		setDynamicValue?: (key: string, comesFrom: BlockDataKey["comesFrom"]) => void;
-=======
 		getModelValue?: () => string | number | boolean;
 		getPlaceholder?: () => string | number | boolean;
 		setModelValue?: (value: string | number | boolean) => void;
->>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
+		getDynamicValue?: () => { key: string; comesFrom: BlockDataKey["comesFrom"] } | undefined;
+		setDynamicValue?: (key: string, comesFrom: BlockDataKey["comesFrom"]) => void;
 		enableSlider?: boolean;
 		unitOptions?: string[];
 		changeFactor?: number;
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 3f271fefe..153d69394 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -44,22 +44,15 @@ defineProps<{
 	component: Component;
 	controlAttrs?: Record<string, unknown>;
 	events?: Record<string, unknown>;
-<<<<<<< HEAD
-	modelValue: string | number;
-	defaultValue?: string | number;
-	placeholder?: string;
-	dynamicValueKey?: string;
-=======
 	modelValue: string | number | boolean;
 	defaultValue?: string | number | boolean;
 	placeholder?: string | number | boolean;
-	dynamicValue?: string;
->>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
+	dynamicValueKey?: string;
 	componentClass?: string;
 }>();
 
 defineEmits<{
-	(e: "update:modelValue", value: any): void;
+	(e: "update:modelValue", value: string | number | boolean): void;
 	(e: "keydown", event: KeyboardEvent): void;
 	(e: "openDynamicModal"): void;
 	(e: "clearDynamic"): void;
diff --git a/frontend/src/components/Controls/TabButtons.vue b/frontend/src/components/Controls/TabButtons.vue
index 08bd6cc8c..7f55bc9df 100644
--- a/frontend/src/components/Controls/TabButtons.vue
+++ b/frontend/src/components/Controls/TabButtons.vue
@@ -7,14 +7,13 @@
 				:key="button.label"
 				:value="button.value ?? button.label"
 				v-slot="{ active, checked }">
-<<<<<<< HEAD
 				<Tooltip :disabled="!button.showTooltip" :text="button.label" placement="top">
 					<button
 						:class="[
 							active ? 'ring-outline-gray-2 focus-visible:ring' : '',
-							!modelValue && checked ? 'border border-dashed border-outline-gray-3' : '',
-							modelValue && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
-							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-2 py-[5px] leading-none transition-colors focus:outline-none',
+							!isValueSet() && checked ? 'border border-dashed border-outline-gray-3' : '',
+							isValueSet() && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
+							'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
 						]">
 						<FeatherIcon
 							class="size-4"
@@ -22,33 +21,11 @@
 							:name="button.icon"
 							:label="button.label"
 							:aria-label="button.label" />
-						<RadioGroupLabel
-							as="span"
-							class="flex items-center"
-							v-show="button.label && !button.hideLabel">
+						<RadioGroupLabel as="span" class="flex items-center" v-show="button.label && !button.hideLabel">
 							{{ button.label }}
 						</RadioGroupLabel>
 					</button>
 				</Tooltip>
-=======
-				<button
-					:class="[
-						active ? 'ring-outline-gray-2 focus-visible:ring' : '',
-						!isValueSet() && checked ? 'border border-dashed border-outline-gray-3' : '',
-						isValueSet() && checked ? 'bg-surface-white text-ink-gray-9 shadow' : 'text-ink-gray-7',
-						'flex flex-1 justify-center gap-2 whitespace-nowrap rounded-[7px] px-3 py-[5px] leading-none transition-colors focus:outline-none',
-					]">
-					<FeatherIcon
-						class="h-4 w-4"
-						v-if="button.icon"
-						:name="button.icon"
-						:label="button.label"
-						:aria-label="button.label" />
-					<RadioGroupLabel as="span" class="flex h-4 items-center" v-show="button.label && !button.hideLabel">
-						{{ button.label }}
-					</RadioGroupLabel>
-				</button>
->>>>>>> 37a92c2 (fix(PropertyControl): Allow modelValue as boolean and number as well)
 			</RadioGroupOption>
 		</div>
 	</RadioGroup>

From 1038d5b8b60975936ff805d5d3f5142b906d2a8c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:30:41 +0530
Subject: [PATCH 380/547] style: Fix formatting issues

- and fix typo
---
 frontend/src/utils/helpers.ts | 43 ++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index ecd13b90a..214475be0 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1,14 +1,14 @@
 import Block from "@/block";
 import AlertDialog from "@/components/AlertDialog.vue";
+import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import getBlockTemplate from "@/utils/blockTemplate";
-import { confirmDialog, FileUploadHandler } from "frappe-ui";
+import { FileUploadHandler } from "frappe-ui";
 import { defineComponent, h, markRaw, reactive, ref, toRaw } from "vue";
 import { toast } from "vue-sonner";
 import Dialog from "../components/Controls/Dialog.vue";
-import { builderSettings } from "@/data/builderSettings";
 
 function getNumberFromPx(px: string | number | null | undefined): number {
 	if (!px) {
@@ -126,22 +126,22 @@ async function confirm(message: string, title: string = "Confirm"): Promise<bool
 			title,
 			message,
 			icon: {
-				name:'alert-circele',
-				appearance:"warning"
+				name: "alert-circle",
+				appearance: "warning",
 			},
-			actions:[
+			actions: [
 				{
-					label:"Cancel",
+					label: "Cancel",
 					variant: "subtle",
 					onClick: () => resolve(false),
 				},
 				{
-					label:"Confirm",
+					label: "Confirm",
 					theme: "red",
-					onClick: () => resolve(true)
-				}
-			]
-		})
+					onClick: () => resolve(true),
+				},
+			],
+		});
 	});
 }
 
@@ -1103,10 +1103,7 @@ const getValueForInheritedProp = (
 				}
 			} else {
 				if (matchingProp.isStandard && matchingProp.propOptions) {
-					if (
-						matchingProp.propOptions.type !== "string" &&
-						matchingProp.propOptions.type !== "select"
-					) {
+					if (matchingProp.propOptions.type !== "string" && matchingProp.propOptions.type !== "select") {
 						return matchingProp.value
 							? JSON.parse(matchingProp.value)
 							: matchingProp.propOptions?.options?.defaultValue || null;
@@ -1309,7 +1306,7 @@ function executeBlockClientScriptUnrestricted(
 	);
 
 	try {
-		document.querySelectorAll(`[data-created-by='${blockUid}']`).forEach(el => el.remove());
+		document.querySelectorAll(`[data-created-by='${blockUid}']`).forEach((el) => el.remove());
 		fn.call(thisElement, context);
 		console.log("Executed unrestricted user script");
 	} catch (e) {
@@ -1464,6 +1461,8 @@ export {
 	copyToClipboard,
 	dataURLtoFile,
 	detachBlockFromComponent,
+	executeBlockClientScriptRestricted,
+	executeBlockClientScriptUnrestricted,
 	extractNumberAndUnit,
 	findNearestSiblingIndex,
 	generateId,
@@ -1476,14 +1475,19 @@ export {
 	getBoxSpacing,
 	getCollectionKeys,
 	getCopyWithoutParent,
+	getDataArray,
 	getDataForKey,
+	getDefaultPropsList,
 	getFontName,
 	getImageBlock,
 	getNumberFromPx,
+	getParentProps,
+	getPropValue,
 	getRandomColor,
 	getRGB,
 	getRootBlockTemplate,
 	getRouteVariables,
+	getStandardPropValue,
 	getTextContent,
 	getVideoBlock,
 	handleBase64Attribute,
@@ -1513,11 +1517,4 @@ export {
 	triggerCopyEvent,
 	uploadBuilderAsset,
 	uploadUserFont,
-	getParentProps,
-	getDefaultPropsList,
-	getPropValue,
-	getStandardPropValue,
-	getDataArray,
-	executeBlockClientScriptUnrestricted,
-	executeBlockClientScriptRestricted,
 };

From 53bb0ba158b8736970a683ffbdf9dbe1d50ade29 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:34:08 +0530
Subject: [PATCH 381/547] style: Fix formatting issues

---
 .../doctype/builder_page/builder_page.py      |  6 ++---
 builder/hooks.py                              | 12 +++++-----
 frontend/src/components/ArrayEditor.vue       | 20 ++++++++++------
 frontend/src/components/ArrayInput.vue        | 16 +++----------
 frontend/src/components/BlockHTML.vue         |  3 ++-
 frontend/src/components/BlockProperties.vue   |  1 -
 frontend/src/components/BuilderSettings.vue   |  2 +-
 .../Controls/DynamicValueHandler.vue          | 14 +++++------
 frontend/src/components/PageScript.vue        |  2 +-
 frontend/src/components/PropsEditor.vue       | 23 ++++++++++---------
 .../components/PropsOptions/ArrayOptions.vue  | 18 ++++++++++++---
 .../PropsOptions/BooleanOptions.vue           | 18 ++++++++++++---
 .../components/PropsOptions/NumberOptions.vue | 19 +++++++++++----
 .../components/PropsOptions/ObjectOptions.vue | 19 +++++++++++----
 .../components/PropsOptions/SelectOptions.vue | 12 ++++++++--
 .../src/components/PropsPopoverContent.vue    |  8 +++----
 .../components/Settings/GlobalDeveloper.vue   |  4 +++-
 frontend/src/components/TextBlock.vue         |  3 ++-
 frontend/vite.config.mjs                      |  8 ++++++-
 19 files changed, 133 insertions(+), 75 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 0cf2e8693..c3cec09b4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -691,9 +691,7 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 	if element == "img":
 		attributes = block.get("attributes", {})
-		dark_src = (
-			frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
-		)
+		dark_src = frappe.utils.quote(attributes.get("darkSrc")) if attributes.get("darkSrc") else None
 		light_src = frappe.utils.quote(attributes.get("src")) if attributes.get("src") else None
 		if dark_src and light_src:
 			picture_tag = soup.new_tag("picture")
@@ -708,7 +706,7 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 			tag = soup.new_tag("img")
 			tag.attrs = {k: v for k, v in attributes.items() if k != "darkSrc"}
 		else:
-			if dark_src: # use as src if no light src
+			if dark_src:  # use as src if no light src
 				attributes["src"] = dark_src
 				del attributes["darkSrc"]
 			tag = soup.new_tag(element)
diff --git a/builder/hooks.py b/builder/hooks.py
index fb902b05a..3d76ff90b 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -56,12 +56,12 @@
 
 # add methods and filters to jinja environment
 jinja = {
-    "filters": [
-        "builder.utils.combine",
-        "builder.utils.execute_script_and_combine",
-        "builder.utils.hash",
-        "builder.utils.to_safe_json",
-    ],
+	"filters": [
+		"builder.utils.combine",
+		"builder.utils.execute_script_and_combine",
+		"builder.utils.hash",
+		"builder.utils.to_safe_json",
+	],
 }
 
 # Installation
diff --git a/frontend/src/components/ArrayEditor.vue b/frontend/src/components/ArrayEditor.vue
index 8f5e429dd..1a43eb9ff 100644
--- a/frontend/src/components/ArrayEditor.vue
+++ b/frontend/src/components/ArrayEditor.vue
@@ -55,7 +55,7 @@ const deleteItem = (index: number) => {
 const arrayEditor = ref<HTMLElement | null>(null);
 
 const pasteArray = (e: ClipboardEvent) => {
-	const passedArr = props.arr.filter(item => item.trim() !== "");
+	const passedArr = props.arr.filter((item) => item.trim() !== "");
 	const text = e.clipboardData?.getData("text/plain");
 	if (text) {
 		e.preventDefault();
@@ -63,28 +63,34 @@ const pasteArray = (e: ClipboardEvent) => {
 			// Try to parse as JSON array first
 			const parsed = JSON.parse(text);
 			if (Array.isArray(parsed)) {
-				const stringArray = parsed.map(item => String(item));
+				const stringArray = parsed.map((item) => String(item));
 				emit("update:arr", [...passedArr, ...stringArray]);
 				return;
 			}
 		} catch (e) {
 			// If JSON parsing fails, try other formats
 		}
-		
+
 		// Try to parse as comma-separated values
 		if (text.includes(",")) {
-			const items = text.split(",").map(item => item.trim()).filter(item => item);
+			const items = text
+				.split(",")
+				.map((item) => item.trim())
+				.filter((item) => item);
 			emit("update:arr", [...passedArr, ...items]);
 			return;
 		}
-		
+
 		// Try to parse as line-separated values
 		if (text.includes("\n")) {
-			const items = text.split("\n").map(item => item.trim()).filter(item => item);
+			const items = text
+				.split("\n")
+				.map((item) => item.trim())
+				.filter((item) => item);
 			emit("update:arr", [...passedArr, ...items]);
 			return;
 		}
-		
+
 		// Single item
 		emit("update:arr", [...passedArr, text.trim()]);
 	}
diff --git a/frontend/src/components/ArrayInput.vue b/frontend/src/components/ArrayInput.vue
index 9fc339493..a90a6f523 100644
--- a/frontend/src/components/ArrayInput.vue
+++ b/frontend/src/components/ArrayInput.vue
@@ -8,11 +8,7 @@
 					</InputLabel>
 				</div>
 				<div class="relative w-full">
-					<BuilderButton
-						class="w-full"
-						variant="subtle"
-						icon="edit-2"
-						@click.stop="open()" />
+					<BuilderButton class="w-full" variant="subtle" icon="edit-2" @click.stop="open()" />
 				</div>
 			</div>
 		</template>
@@ -21,12 +17,8 @@
 				@click.stop
 				@mousedown.stop
 				class="flex max-h-60 w-60 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
-				<div class="text-sm text-ink-gray-8">
-                    Array Items:
-                </div>
-				<ArrayEditor
-					:arr
-					@update:arr="updateModelValue" />
+				<div class="text-sm text-ink-gray-8">Array Items:</div>
+				<ArrayEditor :arr @update:arr="updateModelValue" />
 			</div>
 		</template>
 	</Popover>
@@ -69,6 +61,4 @@ const updateModelValue = (value: string[]) => {
 	props.setModelValue(JSON.stringify(value));
 	emit("update:modelValue", JSON.stringify(value));
 };
-
-
 </script>
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 22d64a57f..7c22e5e12 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -46,7 +46,8 @@ const getDynamicContent = () => {
 			}
 			innerHTML = value ?? innerHTML;
 		}
-		props.block.getDynamicValues()
+		props.block
+			.getDynamicValues()
 			?.filter((dataKeyObj: BlockDataKey) => {
 				return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 			})
diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
index bfb84c4bb..f4c8280ed 100644
--- a/frontend/src/components/BlockProperties.vue
+++ b/frontend/src/components/BlockProperties.vue
@@ -106,7 +106,6 @@ const getFilteredProperties = (section: PropertySection) => {
 	});
 };
 
-
 const sections = [
 	standardPropsInputSection,
 	collectionOptionsSection,
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index a37322384..3de585460 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -152,7 +152,7 @@ const globalSettings = {
 			component: GlobalDeveloper,
 			title: "Developer Settings",
 			icon: TerminalIcon,
-		}
+		},
 	],
 };
 
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 59d3c1aed..bcebef560 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -10,7 +10,12 @@
 			<div class="max-h-[60vh] overflow-y-auto">
 				<ul class="m-0 list-none p-0">
 					<li
-						v-if="selectedItem?.key && !filteredItems.some(i => i.key === selectedItem!.key && i.comesFrom === selectedItem!.comesFrom)">
+						v-if="
+							selectedItem?.key &&
+							!filteredItems.some(
+								(i) => i.key === selectedItem!.key && i.comesFrom === selectedItem!.comesFrom,
+							)
+						">
 						<div
 							class="w-full cursor-pointer truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
 							@click.stop="selectAndSetItem(selectedItem)">
@@ -73,12 +78,7 @@ import useBlockDataStore from "@/stores/blockDataStore";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
-import {
-	getDataArray,
-	getDefaultPropsList,
-	getParentProps,
-	getPropValue,
-} from "@/utils/helpers";
+import { getDataArray, getDefaultPropsList, getParentProps, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
 
 const pageStore = usePageStore();
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 4d796a707..769097ebc 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -204,7 +204,7 @@ const blockData = computed(() => {
 		? blockDataStore.getBlockData(
 				blockController.getFirstSelectedBlock().blockId,
 				showCumulativeBlockData.value ? "all" : "own",
-		  ) || {}
+			) || {}
 		: {};
 });
 
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index 05dd85c82..4715a6cdd 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -11,17 +11,18 @@
 							<div
 								class="flex w-full cursor-pointer items-center justify-between"
 								@click.stop="
-											() => {
-												popupMode = 'edit';
-												popoverContentItemsRef[index]?.reset({
-													keepName: false,
-													keepIsStandard: false,
-													keepProps: true,
-													keepType: false,
-												});
-												keyBeingEdited = name as string;
-												open();
-											}">
+									() => {
+										popupMode = 'edit';
+										popoverContentItemsRef[index]?.reset({
+											keepName: false,
+											keepIsStandard: false,
+											keepProps: true,
+											keepType: false,
+										});
+										keyBeingEdited = name as string;
+										open();
+									}
+								">
 								<div class="flex w-fit max-w-[60%] items-center gap-2 pl-2">
 									<div class="icon">
 										<component
diff --git a/frontend/src/components/PropsOptions/ArrayOptions.vue b/frontend/src/components/PropsOptions/ArrayOptions.vue
index f8373e0a4..123c24cd2 100644
--- a/frontend/src/components/PropsOptions/ArrayOptions.vue
+++ b/frontend/src/components/PropsOptions/ArrayOptions.vue
@@ -130,9 +130,21 @@ function useArrayOption(key: string, isNumeric: boolean = false) {
 		: { value: arrayValue, handleChange: handleArrayChange, reset: resetArray };
 }
 
-const { value: minItems, handleChange: handleMinItemsChange, reset: resetMin } = useArrayOption("minItems", true) as NumberRef;
-const { value: maxItems, handleChange: handleMaxItemsChange, reset: resetMax } = useArrayOption("maxItems", true) as NumberRef;
-const { value: arr, handleChange: handleArrChange, reset: resetArr } = useArrayOption("defaultValue") as StringArrayRef;
+const {
+	value: minItems,
+	handleChange: handleMinItemsChange,
+	reset: resetMin,
+} = useArrayOption("minItems", true) as NumberRef;
+const {
+	value: maxItems,
+	handleChange: handleMaxItemsChange,
+	reset: resetMax,
+} = useArrayOption("maxItems", true) as NumberRef;
+const {
+	value: arr,
+	handleChange: handleArrChange,
+	reset: resetArr,
+} = useArrayOption("defaultValue") as StringArrayRef;
 
 const reset = (toProps: boolean = false) => {
 	resetMin(toProps);
diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
index e575d87a5..fa19ec057 100644
--- a/frontend/src/components/PropsOptions/BooleanOptions.vue
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -75,9 +75,21 @@ function useBooleanOption(key: string) {
 	return { value, reset, handleChange };
 }
 
-const { value: trueLabel, reset: resetTrueLabel, handleChange: handleTrueLabelChange } = useBooleanOption("trueLabel");
-const { value: falseLabel, reset: resetFalseLabel, handleChange: handleFalseLabelChange } = useBooleanOption("falseLabel");
-const { value: defaultValue, reset: resetDefaultValue, handleChange: handleDefaultValueChange } = useBooleanOption("defaultValue");
+const {
+	value: trueLabel,
+	reset: resetTrueLabel,
+	handleChange: handleTrueLabelChange,
+} = useBooleanOption("trueLabel");
+const {
+	value: falseLabel,
+	reset: resetFalseLabel,
+	handleChange: handleFalseLabelChange,
+} = useBooleanOption("falseLabel");
+const {
+	value: defaultValue,
+	reset: resetDefaultValue,
+	handleChange: handleDefaultValueChange,
+} = useBooleanOption("defaultValue");
 
 const reset = (toProps: boolean = false) => {
 	resetTrueLabel(toProps);
diff --git a/frontend/src/components/PropsOptions/NumberOptions.vue b/frontend/src/components/PropsOptions/NumberOptions.vue
index 7660cac3d..99c12a287 100644
--- a/frontend/src/components/PropsOptions/NumberOptions.vue
+++ b/frontend/src/components/PropsOptions/NumberOptions.vue
@@ -102,9 +102,21 @@ function useNumericOption(key: string) {
 	return { value, reset, handleChange };
 }
 
-const { value: minValue, reset: resetMinValue, handleChange: handleMinValueChange } = useNumericOption("minValue");
-const { value: maxValue, reset: resetMaxValue, handleChange: handleMaxValueChange } = useNumericOption("maxValue");
-const { value: defaultValue, reset: resetDefaultValue, handleChange: handleDefaultValueChange } = useNumericOption("defaultValue");
+const {
+	value: minValue,
+	reset: resetMinValue,
+	handleChange: handleMinValueChange,
+} = useNumericOption("minValue");
+const {
+	value: maxValue,
+	reset: resetMaxValue,
+	handleChange: handleMaxValueChange,
+} = useNumericOption("maxValue");
+const {
+	value: defaultValue,
+	reset: resetDefaultValue,
+	handleChange: handleDefaultValueChange,
+} = useNumericOption("defaultValue");
 
 const reset = (toProps = false) => {
 	resetMinValue(toProps);
@@ -113,5 +125,4 @@ const reset = (toProps = false) => {
 };
 
 defineExpose({ reset });
-
 </script>
diff --git a/frontend/src/components/PropsOptions/ObjectOptions.vue b/frontend/src/components/PropsOptions/ObjectOptions.vue
index d40f5fa4a..6dcde5993 100644
--- a/frontend/src/components/PropsOptions/ObjectOptions.vue
+++ b/frontend/src/components/PropsOptions/ObjectOptions.vue
@@ -142,10 +142,21 @@ function useObjectOption(key: string, isNumeric: boolean = false) {
 		: { value: objectValue, handleChange: handleObjectChange, reset: resetObject };
 }
 
-const { value: minItems, handleChange: handleMinItemsChange, reset: resetMin } = useObjectOption("minItems", true) as NumberRef;
-const { value: maxItems, handleChange: handleMaxItemsChange, reset: resetMax } = useObjectOption("maxItems", true) as NumberRef;
-const { value: obj, handleChange: handleObjChange, reset: resetObj } = useObjectOption("defaultValue") as StringObjectRef;
-
+const {
+	value: minItems,
+	handleChange: handleMinItemsChange,
+	reset: resetMin,
+} = useObjectOption("minItems", true) as NumberRef;
+const {
+	value: maxItems,
+	handleChange: handleMaxItemsChange,
+	reset: resetMax,
+} = useObjectOption("maxItems", true) as NumberRef;
+const {
+	value: obj,
+	handleChange: handleObjChange,
+	reset: resetObj,
+} = useObjectOption("defaultValue") as StringObjectRef;
 
 const reset = (toProps: boolean = false) => {
 	resetMin(toProps);
diff --git a/frontend/src/components/PropsOptions/SelectOptions.vue b/frontend/src/components/PropsOptions/SelectOptions.vue
index bdfb66ef7..9256bf68c 100644
--- a/frontend/src/components/PropsOptions/SelectOptions.vue
+++ b/frontend/src/components/PropsOptions/SelectOptions.vue
@@ -84,8 +84,16 @@ function useSelectOption(key: string, isString: boolean = false) {
 		: { value: arrayValue, handleChange: handleArrayChange, reset: resetArray };
 }
 
-const { value: options, handleChange: handleOptionsChange, reset: resetOptions } = useSelectOption("options") as StringArrayRef;
-const { value: defaultValue, handleChange: handleDefaultValueChange, reset: resetDefaultValue } = useSelectOption("defaultValue", true) as StringRef;
+const {
+	value: options,
+	handleChange: handleOptionsChange,
+	reset: resetOptions,
+} = useSelectOption("options") as StringArrayRef;
+const {
+	value: defaultValue,
+	handleChange: handleDefaultValueChange,
+	reset: resetDefaultValue,
+} = useSelectOption("defaultValue", true) as StringRef;
 
 const optionsAvailable = computed(() => {
 	return options.value.map((opt) => ({ label: opt, value: opt }));
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 5d6e84a01..5071c0b42 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -356,8 +356,8 @@ function getDefaultIsStandard(keepProps: boolean): string {
 	return propDetailsStandard !== undefined
 		? String(propDetailsStandard)
 		: isStandardByDefault
-		? "true"
-		: "false";
+			? "true"
+			: "false";
 }
 
 function resetNonStandardState(keepProps: boolean, keepType: boolean) {
@@ -371,7 +371,7 @@ function resetStandardState(keepProps: boolean, keepType: boolean) {
 	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : details.propOptions?.type ?? "string";
+		const nextType = keepType ? standardPropOptions.type : (details.propOptions?.type ?? "string");
 
 		Object.assign(standardPropOptions, {
 			...details.propOptions,
@@ -437,7 +437,7 @@ function buildPropValue(): BlockProps[string] {
 			? {
 					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
-			  }
+				}
 			: undefined,
 	};
 }
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 6ee042a60..bd031b846 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -1,7 +1,9 @@
 <template>
 	<div class="flex flex-col gap-5">
 		<div class="flex justify-between">
-			<label class="w-fit text-p-base shrink-0 font-medium text-ink-gray-8">Execute Block Client Scripts in Editor</label>
+			<label class="w-fit shrink-0 text-p-base font-medium text-ink-gray-8">
+				Execute Block Client Scripts in Editor
+			</label>
 			<Select
 				class="!w-[200px]"
 				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index bf41a5045..c2bb4fa46 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -143,7 +143,8 @@ const getDynamicContent = () => {
 		}
 		innerHTML = value ?? innerHTML;
 	}
-	props.block.getDynamicValues()
+	props.block
+		.getDynamicValues()
 		?.filter((dataKeyObj: BlockDataKey) => {
 			return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 		})
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index 00980774d..3498d2027 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -35,6 +35,12 @@ export default defineConfig({
 		allowedHosts: true,
 	},
 	optimizeDeps: {
-		include: ["frappe-ui > feather-icons", "showdown", "engine.io-client", "interactjs", "highlight.js/lib/core"],
+		include: [
+			"frappe-ui > feather-icons",
+			"showdown",
+			"engine.io-client",
+			"interactjs",
+			"highlight.js/lib/core",
+		],
 	},
 });

From ed40db2491907bd37a686a35879353c2f65c50d3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 7 Feb 2026 18:34:55 +0530
Subject: [PATCH 382/547] chore: Add refactor commit to .git-blame-ignore-revs

---
 .git-blame-ignore-revs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 71d3588f2..39075cff7 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1 +1,2 @@
 b3ddeda50bf11d04ee3b82f38af7355aad006fe0
+fad996a6275cd1fab5e62e930219fc2d9ccbc75c

From ae33cfd7836df3483018584fe24d67bdcbcfbc43 Mon Sep 17 00:00:00 2001
From: Frappe <frappe@Vibhutis-MacBook-Air.local>
Date: Sat, 7 Feb 2026 23:10:11 +0530
Subject: [PATCH 383/547] fix: inline color value doesn't get unset until text
 is unselected

---
 frontend/components.d.ts                        | 4 ++--
 frontend/src/components/TextBlockBubbleMenu.vue | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6560a3865..80276f733 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -141,7 +141,7 @@ declare module 'vue' {
     TextBlock: typeof import('./src/components/TextBlock.vue')['default']
     TextBlockBubbleMenu: typeof import('./src/components/TextBlockBubbleMenu.vue')['default']
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
-    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
     VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
+    VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
   }
 }
diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index 3e555daf7..df44b032c 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -160,8 +160,9 @@ const isEditableRef = computed(() => props.isEditable);
 
 const selectedColor = computed(() => {
 	if (props.editor?.isActive("textStyle")) {
-		return props.editor.getAttributes("textStyle").color || "#000000";
+		return props.editor.getAttributes("textStyle").color || null;
 	}
+	return null;
 });
 
 const enableLinkInput = () => {

From fd6c58d9a5511a8ad7a56e486368ff9c874c321e Mon Sep 17 00:00:00 2001
From: Hemant <guptahemant350@gmail.com>
Date: Tue, 10 Feb 2026 02:31:50 +0530
Subject: [PATCH 384/547] fix: preserve styling when editing text from content
 field

---
 frontend/src/components/TextBlock.vue | 47 ++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index c2bb4fa46..cb1b3acf6 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -205,12 +205,33 @@ watch(
 watch(
 	() => textContent.value,
 	(newValue: string) => {
+		if (!editor.value) return;
+		
 		const innerHTML = getInnerHTML(editor.value);
-		const isSame = newValue === innerHTML;
-		if (isSame) {
+		if (newValue === innerHTML) return;
+		
+		// If plain text is entered but current content has HTML styling, preserve it
+		const isPlainText = !/<[^>]+>/.test(newValue);
+		const hasStyles = /<[^>]+style=/.test(innerHTML) || /<(em|strong|i|b|u)/.test(innerHTML);
+		
+		if (isPlainText && hasStyles && newValue.trim()) {
+			const tempDiv = document.createElement('div');
+			tempDiv.innerHTML = innerHTML;
+			
+			if (tempDiv.textContent !== newValue) {
+				// Update only the text content, preserving all HTML tags
+				const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT);
+				const textNode = walker.nextNode();
+				if (textNode) {
+					textNode.textContent = newValue;
+					editor.value.commands.setContent(tempDiv.innerHTML, false);
+					return;
+				}
+			}
 			return;
 		}
-		editor.value?.commands.setContent(newValue || "", false);
+		
+		editor.value.commands.setContent(newValue || "", false);
 	},
 );
 
@@ -242,8 +263,24 @@ if (!props.preview) {
 					content: textContent.value,
 					extensions: [
 						StarterKit,
-						TextStyle,
-						Color,
+						TextStyle.extend({
+							addGlobalAttributes() {
+								return [
+									{
+										types: ['textStyle'],
+										attributes: {
+											style: {
+												parseHTML: element => element.getAttribute('style'),
+												renderHTML: attributes => attributes.style ? { style: attributes.style } : {},
+											},
+										},
+									},
+								];
+							},
+						}),
+						Color.configure({
+							types: ['textStyle'],
+						}),
 						FontFamily,
 						Link.configure({
 							openOnClick: false,

From 68120b68b6bfe7ab77fdfb27ed0dbcbfffe52d4d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 11 Feb 2026 00:09:08 +0530
Subject: [PATCH 385/547] fix: added frappe dependency version in
 pyproject.toml for FC

---
 pyproject.toml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pyproject.toml b/pyproject.toml
index 66e563ed8..6b9c6ceb1 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -23,6 +23,9 @@ Repository = "https://github.com/frappe/builder.git"
 requires = ["flit_core >=3.4,<4"]
 build-backend = "flit_core.buildapi"
 
+[tool.bench.frappe-dependencies]
+frappe = ">=15.0.0"
+
 [tool.black]
 line-length = 99
 

From 907614357255da15cdd0d50828e96d17f2295912 Mon Sep 17 00:00:00 2001
From: Frappe <frappe@Vibhutis-MacBook-Air.local>
Date: Wed, 11 Feb 2026 18:53:31 +0530
Subject: [PATCH 386/547] fix: text cursor editing across multiple views

---
 frontend/src/components/TextBlock.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index bf41a5045..58b65e4e8 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -143,7 +143,8 @@ const getDynamicContent = () => {
 		}
 		innerHTML = value ?? innerHTML;
 	}
-	props.block.getDynamicValues()
+	props.block
+		.getDynamicValues()
 		?.filter((dataKeyObj: BlockDataKey) => {
 			return dataKeyObj.property === "innerHTML" && dataKeyObj.type === "key";
 		})
@@ -233,10 +234,18 @@ const getInnerHTML = (editor: Editor | null) => {
 
 if (!props.preview) {
 	watch(
-		() => canvasStore.activeCanvas?.isSelected(props.block),
+		() => [
+			canvasStore.activeCanvas?.isSelected(props.block),
+			props.breakpoint,
+			canvasStore.activeCanvas?.activeBreakpoint,
+		],
 		() => {
-			// only load editor if block is selected for performance reasons
-			if (canvasStore.activeCanvas?.isSelected(props.block) && !blockController.multipleBlocksSelected()) {
+			if (
+				canvasStore.activeCanvas?.isSelected(props.block) &&
+				canvasStore.activeCanvas?.activeBreakpoint === props.breakpoint &&
+				!blockController.multipleBlocksSelected() &&
+				!editor.value
+			) {
 				editor.value = new Editor({
 					content: textContent.value,
 					extensions: [
@@ -300,7 +309,7 @@ const handleEscKey = () => {
 };
 
 const handleClickOutside = (e: MouseEvent) => {
-	if ((e.target as HTMLElement).closest(".canvas-container")) {
+	if ((e.target as HTMLElement).closest(".__text_block__")) {
 		canvasStore.editableBlock = null;
 	}
 };

From e66a64319d6e75b2d097f77555b9831b920a82f7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Feb 2026 12:34:13 +0530
Subject: [PATCH 387/547] fix: Enforce type checks on endpoint parameters and
 update hooks for type annotations

---
 builder/api.py                                  | 17 +++++++++++------
 .../builder_settings/builder_settings.py        |  4 ++--
 builder/hooks.py                                |  3 +--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index 602621d06..2f3765484 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -253,7 +253,11 @@ def sync_component(component_id: str):
 
 @frappe.whitelist()
 def get_page_analytics(
-	route=None, interval: str = "daily", from_date=None, to_date=None, route_filter_type: str = "wildcard"
+	route: str,
+	interval: str = "daily",
+	from_date: str | None = None,
+	to_date: str | None = None,
+	route_filter_type: str = "wildcard",
 ):
 	return builder_analytics.get_page_analytics(
 		route=route,
@@ -266,7 +270,11 @@ def get_page_analytics(
 
 @frappe.whitelist()
 def get_overall_analytics(
-	interval: str = "daily", route=None, from_date=None, to_date=None, route_filter_type: str = "wildcard"
+	interval: str = "daily",
+	route: str | None = None,
+	from_date: str | None = None,
+	to_date: str | None = None,
+	route_filter_type: str = "wildcard",
 ):
 	return builder_analytics.get_overall_analytics(
 		interval=interval,
@@ -328,12 +336,9 @@ def get_codemirror_completions():
 
 
 @frappe.whitelist()
-def reorder_client_scripts(script_order):
+def reorder_client_scripts(script_order: list[str]):
 	if not frappe.has_permission("Builder Page", ptype="write"):
 		frappe.throw("You do not have permission to reorder client scripts")
 
-	if isinstance(script_order, str):
-		script_order = frappe.parse_json(script_order)
-
 	for idx, script_name in enumerate(script_order, start=1):
 		frappe.db.set_value("Builder Page Client Script", script_name, "idx", idx)
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index 6aac855b3..172868aec 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -80,7 +80,7 @@ def get_components():
 
 
 @frappe.whitelist()
-def replace_component(target_component: str, replace_with: str, filters=None):
+def replace_component(target_component: str, replace_with: str, filters: dict | None = None):
 	if not target_component or not replace_with:
 		return
 	# check permissions
@@ -108,7 +108,7 @@ def replace_component(target_component: str, replace_with: str, filters=None):
 
 @frappe.whitelist()
 @redis_cache()
-def get_component_usage_count(component_id: str, filters=None):
+def get_component_usage_count(component_id: str, filters: dict | None = None):
 	pages = frappe.get_all(
 		"Builder Page",
 		filters=filters,
diff --git a/builder/hooks.py b/builder/hooks.py
index 3d76ff90b..49c80bdce 100644
--- a/builder/hooks.py
+++ b/builder/hooks.py
@@ -1,7 +1,5 @@
 import frappe
 
-from . import __version__ as app_version
-
 app_name = "builder"
 app_title = "Frappe Builder"
 app_publisher = "Frappe Technologies Pvt Ltd"
@@ -16,6 +14,7 @@
 app_include_js = "/assets/builder/js/builder.js"
 
 export_python_type_annotations = True
+require_type_annotated_api_methods = True
 
 # include js, css files in header of web template
 # web_include_css = "/assets/builder/css/builder.css"

From b026f115a60983cf3caaba005e2e4dcd610328f9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Feb 2026 14:42:46 +0530
Subject: [PATCH 388/547] fix: Update unpublish method signature

---
 builder/builder/doctype/builder_page/builder_page.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c3cec09b4..56dfb4ccb 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -5,7 +5,7 @@
 import os
 import re
 import shutil
-from typing import Any, Optional
+from typing import Any
 
 import bs4 as bs
 import frappe
@@ -239,7 +239,7 @@ def publish(self, route_variables=None):
 		return self.route
 
 	@frappe.whitelist()
-	def unpublish(self, **kwargs):
+	def unpublish(self):
 		self.published = 0
 		self.save()
 

From bec85bfeb2cde852941085fab4c1db23d3606036 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Feb 2026 15:08:20 +0530
Subject: [PATCH 389/547] fix: Simplify method signatures and enforce type
 hints for publish and get_page_data functions

- Also check for write permission before executing scripts
---
 builder/api.py                                |  2 +-
 .../doctype/builder_page/builder_page.py      | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index 2f3765484..a297d7ce1 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -80,7 +80,7 @@ def upload_builder_asset():
 
 @frappe.whitelist()
 def convert_to_webp(image_url: str | None = None, file_doc: Document | None = None) -> str:
-	"""BETA: Convert image to webp format"""
+	"""Convert image to webp format"""
 
 	CONVERTIBLE_IMAGE_EXTENSIONS = ["png", "jpeg", "jpg"]
 
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 56dfb4ccb..3a1066aa4 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -219,10 +219,7 @@ def add_comment(self, comment_type="Comment", text=None, comment_email=None, com
 		)
 
 	@frappe.whitelist()
-	def publish(self, route_variables=None):
-		if route_variables:
-			for k, v in frappe.parse_json(route_variables or "{}").items():
-				frappe.form_dict[k] = v
+	def publish(self):
 		self.published = 1
 		if self.draft_blocks:
 			self.blocks = self.draft_blocks
@@ -362,9 +359,9 @@ def set_style_and_script(self, context):
 		context["_body_html"] = render_template(context._body_html, context)
 
 	@frappe.whitelist()
-	def get_page_data(self, route_variables=None):
+	def get_page_data(self, route_variables: dict | None = None) -> dict:
 		if route_variables:
-			frappe.form_dict.update(dict(frappe.parse_json(route_variables or "{}").items()))
+			frappe.form_dict.update({k: v for k, v in route_variables.items()})
 		page_data = frappe._dict()
 		if self.page_data_script:
 			_locals = dict(data=frappe._dict(), page=frappe._dict())
@@ -494,12 +491,14 @@ def get_component(block):
 
 
 @frappe.whitelist()
-def get_block_data(block_id, block_data_script, props):
-	props = frappe._dict(frappe.parse_json(props or "{}"))
+def get_block_data(block_id, block_data_script: str, props: str):
+	frappe.has_permission("Builder Page", "write", throw=True)
+	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()
 	_locals = dict(block=frappe._dict(), props=props)
 	execute_script(block_data_script, _locals, block_id)
-	block_data.update(_locals["block"])
+	if isinstance(_locals["block"], dict):
+		block_data.update(_locals["block"])
 	return block_data
 
 
@@ -1241,7 +1240,7 @@ def find_page_with_path(route):
 
 
 @redis_cache(ttl=60 * 60)
-def get_web_pages_with_dynamic_routes() -> list[BuilderPage]:
+def get_web_pages_with_dynamic_routes() -> list[dict]:
 	return frappe.get_all(
 		"Builder Page",
 		fields=["name", "route", "modified"],

From 146b44ac5519f7638e50bc2234bd57188bd80f3a Mon Sep 17 00:00:00 2001
From: Frappe <frappe@Vibhutis-MacBook-Air.local>
Date: Mon, 16 Feb 2026 17:03:58 +0530
Subject: [PATCH 390/547] fx: cursor editing in multiple views

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

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 58b65e4e8..260c5af8b 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -243,8 +243,7 @@ if (!props.preview) {
 			if (
 				canvasStore.activeCanvas?.isSelected(props.block) &&
 				canvasStore.activeCanvas?.activeBreakpoint === props.breakpoint &&
-				!blockController.multipleBlocksSelected() &&
-				!editor.value
+				!blockController.multipleBlocksSelected()
 			) {
 				editor.value = new Editor({
 					content: textContent.value,
@@ -309,7 +308,7 @@ const handleEscKey = () => {
 };
 
 const handleClickOutside = (e: MouseEvent) => {
-	if ((e.target as HTMLElement).closest(".__text_block__")) {
+	if ((e.target as HTMLElement).closest(".canvas-container")) {
 		canvasStore.editableBlock = null;
 	}
 };

From 3cf4d54ea6c9fc0baca5ee8b28b70b1f63132965 Mon Sep 17 00:00:00 2001
From: Juan Antonio Madrid Valera <jmadridvalera@gmail.com>
Date: Fri, 20 Feb 2026 13:12:10 +0000
Subject: [PATCH 391/547] fix(builder_page): use originalElement for body
 scripts check

In build_tag(), the condition to inject page scripts was using
block.get('element') == 'body', but create_html_tag() uses
block.get('originalElement') or block.get('element') to determine
the actual HTML element.

Pages created in the Builder UI store the root block with
originalElement='body' and element='div'. Because of this mismatch,
the body check in build_tag() always evaluated to False and
webpage_scripts.html was never included in the final HTML, causing
all page-level client scripts (Builder Client Scripts) to not load.

Fixed by using the same originalElement-first logic as create_html_tag().

Regression introduced in eb9776cb (refactor: broke get_tag into
smaller readable functions).
---
 builder/builder/doctype/builder_page/builder_page.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index c3cec09b4..6a4303235 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -576,7 +576,8 @@ def build_tag(block: dict, state: dict, data_key: dict | None = None) -> bs.Tag:
 	attach_client_script(tag, block, state)
 
 	# Add body scripts for body element
-	if block.get("element") == "body":
+	effective_element = block.get("originalElement") or block.get("element")
+	if effective_element == "body":
 		tag.append("{% include 'templates/generators/webpage_scripts.html' %}")
 
 	cleanup_props_stack(props, state["standard_props_stack"])

From 9b3ced9f9500969788adb32388d212202854ea1e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 22 Feb 2026 00:27:53 +0530
Subject: [PATCH 392/547] fix(test_builder_page): update all `body` Blocks to
 mimic frontend struct

updating test cases in response to #497
---
 .../doctype/builder_page/test_builder_page.py | 65 +++++++++++++++----
 1 file changed, 51 insertions(+), 14 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 487382553..e3612cde2 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -52,7 +52,8 @@ def setUpClass(cls):
 				"published": 1,
 				"route": "/test-page",
 				"blocks": Block(
-					element="body",
+					element="div",
+					originalElement="body",
 					baseStyles={"background": "red", "fontFamily": "Inter"},
 					customAttributes={"dir": "ltr"},
 					children=[
@@ -77,7 +78,9 @@ def setUpClass(cls):
 				"route": "/test-page-dynamic-route/<name>",
 				"dynamic_route": 1,
 				"blocks": Block(
-					element="body", children=[Block(element="h1", innerHTML="Dynamic Content!")]
+					element="div",
+					originalElement="body",
+					children=[Block(element="h1", innerHTML="Dynamic Content!")],
 				).as_json(wrap_in_array=True),
 			}
 		).insert(ignore_if_duplicate=True)
@@ -108,7 +111,10 @@ def test_publish_unpublish(self):
 		self.assertTrue("Hello World!" in content)
 
 	def test_dynamic_values(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		header = Block(element="h1", innerHTML="Hello")
 		sub_header = Block(element="h2", innerHTML="Content")
 		link = Block(element="a", innerHTML="Link")
@@ -141,7 +147,10 @@ def test_dynamic_values(self):
 			page.delete()
 
 	def test_repeater_block_dynamic_values(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		repeater_block = Block(element="div", isRepeaterBlock=True)
 		wrapper_div = Block(element="div")
 		item_name = Block(element="h2")
@@ -190,7 +199,10 @@ def test_component_dynamic_values(self):
 			}
 		).insert()
 
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		component_root_copy = Block(extendedFromComponent=component.name)
 		component_header_copy = Block(isChildOfComponent=component.name, referenceBlockId="comp-block-1-1")
 
@@ -258,7 +270,10 @@ def test_component_dynamic_values(self):
 			component.delete()
 
 	def test_visibility_condition_from_page_data(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		header = Block(element="h1", innerHTML="Visible Header")
 		hidden_header = Block(element="h2", innerHTML="Hidden Header")
 
@@ -286,7 +301,8 @@ def test_visibility_condition_from_page_data(self):
 
 	def test_visibility_condition_from_block_data(self):
 		body = Block(
-			element="body",
+			element="div",
+			originalElement="body",
 			blockDataScript='block.update({"is_header_visible": True,"is_hidden_header_visible": False})',
 		)
 		header = Block(element="h1", innerHTML="Visible Header")
@@ -317,7 +333,10 @@ def test_visibility_condition_from_block_data(self):
 			page.delete()
 
 	def test_block_data(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		wrapper = Block(element="div", blockDataScript=block_data_script)
 		content_dynamic = Block(element="h4", innerHTML="Block Content")
 		content_fallback = Block(element="h4", innerHTML="Block Content")
@@ -346,7 +365,10 @@ def test_block_data(self):
 			page.delete()
 
 	def test_repeater_from_block_data(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		repeater_block = Block(element="div", isRepeaterBlock=True, blockDataScript=block_data_script)
 		wrapper_div = Block(element="div")
 		item_name = Block(element="h2")
@@ -381,7 +403,10 @@ def test_repeater_from_block_data(self):
 			page.delete()
 
 	def test_block_client_script(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		div_wrapper = Block(
 			element="div",
 			blockClientScript='console.log("Block Client Script Executed");\n',
@@ -410,7 +435,10 @@ def test_block_client_script(self):
 			page.delete()
 
 	def test_block_props(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		div_wrapper = Block(
 			element="div",
 			props={
@@ -542,7 +570,10 @@ def test_std_props(self):
 			}
 		).insert()
 
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 
 		component_root_copy = Block(extendedFromComponent=component.name)
 		component_title_block_copy = Block(isChildOfComponent=component.name, referenceBlockId="title-block")
@@ -694,7 +725,10 @@ def test_repeater_from_std_props(self):
 			}
 		).insert()
 
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		component_root_copy = Block(extendedFromComponent=component.name)
 		component_repeater_block_copy = Block(
 			isChildOfComponent=component.name, referenceBlockId="repeater-block", isRepeaterBlock=True
@@ -728,7 +762,10 @@ def test_repeater_from_std_props(self):
 			component.delete()
 
 	def test_dark_mode_img(self):
-		body = Block(element="body")
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
 		image_block = Block(
 			element="img",
 			attributes={

From 2ef5cac2ee9e120a90778fcaab35a2119c8ecc24 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 22 Feb 2026 00:31:26 +0530
Subject: [PATCH 393/547] tests(builder_page): added tests for client scripts

---
 .../doctype/builder_page/test_builder_page.py | 75 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index e3612cde2..91d75ffa7 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -110,6 +110,71 @@ def test_publish_unpublish(self):
 		content = get_response_content("/test-page")
 		self.assertTrue("Hello World!" in content)
 
+	def test_client_script(self):
+		client_script_js = frappe.get_doc(
+			{
+				"doctype": "Builder Client Script",
+				"script_type": "JavaScript",
+				"script": 'console.log("Test");',
+			}
+		).insert()
+
+		client_script_css = frappe.get_doc(
+			{
+				"doctype": "Builder Client Script",
+				"script_type": "CSS",
+				"script": "body { background-color: red; }",
+			}
+		).insert()
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Client Script Test",
+				"published": 1,
+				"route": "/client-script-test",
+				"blocks": Block(
+					element="div",
+					originalElement="body",
+				).as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		client_script_js_row = frappe.get_doc(
+			{
+				"doctype": "Builder Page Client Script",
+				"parent": page.name,
+				"builder_script": client_script_js.name,
+				"parenttype": "Builder Page",
+				"parentfield": "client_scripts",
+			}
+		).insert()
+
+		client_script_css_row = frappe.get_doc(
+			{
+				"doctype": "Builder Page Client Script",
+				"parent": page.name,
+				"builder_script": client_script_css.name,
+				"parenttype": "Builder Page",
+				"parentfield": "client_scripts",
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/client-script-test")
+			self.assertTrue(
+				client_script_js.public_url in get_html_for(content, "attribute", "src", list_all=True)
+			)
+			self.assertTrue(
+				client_script_css.public_url in get_html_for(content, "attribute", "href", list_all=True)
+			)
+		finally:
+			client_script_js_row.delete()
+			client_script_css_row.delete()
+			page.delete()
+			client_script_js.delete()
+			client_script_css.delete()
+
 	def test_dynamic_values(self):
 		body = Block(
 			element="div",
@@ -815,12 +880,14 @@ def tearDownClass(cls):
 		cls.page_with_dynamic_route.delete()
 
 
-def get_html_for(html, type, value, index=None, only_content=False):
+def get_html_for(html, type, value, index=None, only_content=False, list_all=False):
 	from bs4 import BeautifulSoup
 
 	soup = BeautifulSoup(html, "html.parser")
 	if type == "tag":
 		results = soup.find_all(value)
+		if list_all:
+			return [result.decode_contents() if only_content else str(result) for result in results]
 		result = (
 			results[index] if index is not None and index < len(results) else results[0] if results else None
 		)
@@ -828,8 +895,10 @@ def get_html_for(html, type, value, index=None, only_content=False):
 			return result.decode_contents()
 		return str(result) if result else ""
 	if type == "attribute":
-		results = soup.find_all(attrs=value)
+		results = soup.find_all(attrs={value: True})
+		if list_all:
+			return [result.get(value) for result in results if result.get(value)]
 		result = (
 			results[index] if index is not None and index < len(results) else results[0] if results else None
 		)
-		return str(result) if result else ""
+		return result.get(value) if result and result.get(value) else ""

From a0d49bd7897f4fd34be2ffceab93d76055e69567 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 22 Feb 2026 22:34:53 +0530
Subject: [PATCH 394/547] fix: increase width to properly register clicks

---
 frontend/src/components/PlacementControl.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PlacementControl.vue b/frontend/src/components/PlacementControl.vue
index e3d90b092..fc8b5ea01 100644
--- a/frontend/src/components/PlacementControl.vue
+++ b/frontend/src/components/PlacementControl.vue
@@ -19,7 +19,7 @@
 					<div
 						@click="setAlignment(option)"
 						@dblclick="setAlignment(option, true)"
-						class="hidden gap-[2px] hover:opacity-100 group-hover/option:flex"
+						class="hidden w-5 gap-[2px] hover:opacity-100 group-hover/option:flex"
 						:class="{
 							'flex-row': direction === 'row',
 							'flex-col': direction === 'column',

From 8d8ba99a2e1e736a417f2ff6e6903b9e90409ec0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Mon, 2 Mar 2026 12:46:31 +0530
Subject: [PATCH 395/547] chore: Update issue templates

---
 .github/ISSUE_TEMPLATE/bug_report.md      | 27 +++++++++++++++++++++++
 .github/ISSUE_TEMPLATE/feature_request.md | 20 +++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 000000000..160740ee5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 000000000..e301d68ce
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

From e35e08b1e7ad86d38d37b7540ba28e559a890b24 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 3 Mar 2026 11:55:29 +0530
Subject: [PATCH 396/547] fix(PageListItem): Adjust layout for better spacing
 and text truncation

---
 frontend/src/components/PageListItem.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PageListItem.vue b/frontend/src/components/PageListItem.vue
index 2cfdf601f..dec09f25e 100644
--- a/frontend/src/components/PageListItem.vue
+++ b/frontend/src/components/PageListItem.vue
@@ -5,7 +5,7 @@
 			:class="{
 				'bg-surface-gray-2': selected,
 			}">
-			<div class="flex w-[90%] gap-3">
+			<div class="flex w-[85%] gap-3">
 				<img
 					width="140"
 					height="82"
@@ -16,9 +16,7 @@
 					<span class="flex h-full w-full flex-col justify-between text-base">
 						<div>
 							<div class="flex items-center gap-1">
-								<p
-									class="max-w-[90%] truncate font-medium text-ink-gray-9"
-									:title="page.page_title || page.page_name">
+								<p class="truncate font-medium text-ink-gray-9" :title="page.page_title || page.page_name">
 									{{ page.page_title || page.page_name }}
 								</p>
 							</div>

From 6e8b9df556af32da97d54c8b18760b611f4fd2d4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 3 Mar 2026 15:51:35 +0530
Subject: [PATCH 397/547] fix(blockData): Make a POST to get block data

since passed script size could be too long for GET request causing 417 error
---
 frontend/src/data/blockData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/data/blockData.ts b/frontend/src/data/blockData.ts
index 7699f12d0..5420953e8 100644
--- a/frontend/src/data/blockData.ts
+++ b/frontend/src/data/blockData.ts
@@ -2,7 +2,7 @@ import { createResource } from "frappe-ui";
 
 let fetchBlockData = createResource({
 	url: "builder.builder.doctype.builder_page.builder_page.get_block_data",
-	method: "GET",
+	method: "POST",
 	auto: false,
 });
 

From 7cc8eb3ec9de4c4634aab7a9d93eeef86faced40 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 3 Mar 2026 15:53:25 +0530
Subject: [PATCH 398/547] fix: Add type hint for block_id parameter in
 get_block_data function

---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index d78f96fee..6c03aa569 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -491,7 +491,7 @@ def get_component(block):
 
 
 @frappe.whitelist()
-def get_block_data(block_id, block_data_script: str, props: str):
+def get_block_data(block_id: str, block_data_script: str, props: str):
 	frappe.has_permission("Builder Page", "write", throw=True)
 	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()

From 95baac726b6860c195cd80b64e944fa6f0f55238 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 3 Mar 2026 16:17:06 +0530
Subject: [PATCH 399/547] fix(TypographySection): Add `controlType: "key"` for
 Content

by default `controlType` is `style`, this caused dynamic values being assigned as `type: style`. this resulted in a bug where the dynamic value would not actually render as it depends on the `type` to be `key`.
---
 .../src/components/BlockPropertySections/TypographySection.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 0745c014c..3ccb6be3f 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -21,6 +21,7 @@ const typographySectionProperties = [
 			return {
 				label: "Content",
 				propertyKey: "innerHTML",
+				controlType: "key",
 				// @ts-ignore
 				allowDynamicValue: true,
 				getModelValue: () => blockController.getText(),

From 3833700f33dfc1b291570df94baab195a7c88915 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 3 Mar 2026 16:26:36 +0530
Subject: [PATCH 400/547] fix(CollectionOptionsSection): handle empty selection
 in update:modelValue event

---
 .../BlockPropertySections/CollectionOptionsSection.ts         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index cf066a124..82b973c70 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -107,6 +107,10 @@ const collectionOptions = [
 		searchKeyWords: "Collection, Repeater, Dynamic Collection, Dynamic Repeater",
 		events: {
 			"update:modelValue": (selectedOption: string) => {
+				if (!selectedOption) {
+					blockController.setDataKey("key", null);
+					return;
+				}
 				let value = selectedOption.split("--").slice(0, -1).join("--");
 				let comesFrom = selectedOption.split("--").slice(-1)[0] as BlockDataKey["comesFrom"];
 				blockController.setDataKey("key", value);

From f1368313d52e7804e3126522e4a3fc65206547d6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 4 Mar 2026 15:13:44 +0530
Subject: [PATCH 401/547] fix: Do not fail if visibility condition has empty
 key set

issue introduced after https://github.com/frappe/builder/pull/459
---
 builder/builder/doctype/builder_page/builder_page.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 6c03aa569..4767dc999 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -916,6 +916,9 @@ def get_visibility_condition_key(block: dict, data_key: dict | None) -> str | No
 		key = visibility_condition.get("key")
 		comes_from = visibility_condition.get("comesFrom", "dataScript")
 
+	if not key:
+		return None
+
 	# Get key based on source
 	if comes_from == "props":
 		return jinja_safe_key(f"props.{key}")

From ed4854305de0ef984173f61cff1c73916ff01f89 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 4 Mar 2026 19:50:35 +0530
Subject: [PATCH 402/547] tests(builder_page): added tests

nested repeater blocks
visibilityCondition edge cases
---
 .../doctype/builder_page/test_builder_page.py | 80 +++++++++++++++++--
 1 file changed, 75 insertions(+), 5 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 91d75ffa7..a4fecffee 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -15,6 +15,20 @@
 	"items": [
 		{"name": "Item 1", "price": "$10"},
 		{"name": "Item 2", "price": "$20"}
+	],
+	"item_group": [
+		{
+			"group": [
+				{"name": "Item A1", "price": "$10"},
+				{"name": "Item A2", "price": "$20"}
+			],
+		},
+		{
+			"group": [
+				{"name": "Item B1", "price": "$15"},
+				{"name": "Item B2", "price": "$25"}
+			],
+		}
 	]
 })
 """
@@ -339,13 +353,19 @@ def test_visibility_condition_from_page_data(self):
 			element="div",
 			originalElement="body",
 		)
-		header = Block(element="h1", innerHTML="Visible Header")
-		hidden_header = Block(element="h2", innerHTML="Hidden Header")
+		header = Block(element="h1", innerHTML="Visible Header H1")
+		hidden_header = Block(element="h2", innerHTML="Hidden Header H2")
+		hidden_header_h3 = Block(element="h3", innerHTML="Hidden Header H3")
+		header_h4 = Block(element="h4", innerHTML="Header H4")
+		header_h5 = Block(element="h5", innerHTML="Header H5")
 
 		header.visibilityCondition = {"key": "is_header_visible", "comesFrom": "dataScript"}
 		hidden_header.visibilityCondition = {"key": "is_hidden_header_visible", "comesFrom": "dataScript"}
+		hidden_header_h3.visibilityCondition = "is_hidden_header_visible" # legacy
+		header_h4.visibilityCondition = ""
+		header_h5.visibilityCondition = {"key": "", "comesFrom": "dataScript"}
 
-		body.attach_children(header, hidden_header)
+		body.attach_children(header, hidden_header, hidden_header_h3, header_h4, header_h5)
 
 		page = frappe.get_doc(
 			{
@@ -359,8 +379,11 @@ def test_visibility_condition_from_page_data(self):
 		).insert()
 		try:
 			content = get_response_content("/visibility-key-test")
-			self.assertTrue("Visible Header" in get_html_for(content, "tag", "h1"))
-			self.assertFalse("Hidden Header" in get_html_for(content, "tag", "h2"))
+			self.assertTrue("Visible Header H1" in get_html_for(content, "tag", "h1"))
+			self.assertFalse("Hidden Header H2" in get_html_for(content, "tag", "h2"))
+			self.assertFalse("Hidden Header H3" in get_html_for(content, "tag", "h3"))
+			self.assertTrue("Header H4" in get_html_for(content, "tag", "h4"))
+			self.assertTrue("Header H5" in get_html_for(content, "tag", "h5"))
 		finally:
 			page.delete()
 
@@ -874,6 +897,53 @@ def test_dark_mode_img(self):
 		finally:
 			page.delete()
 
+	def test_nested_repeater_from_page_data(self):
+		body = Block(
+			element="div",
+			originalElement="body",
+		)
+		parent_repeater = Block(element="div", isRepeaterBlock=True)
+		child_repeater = Block(element="div", isRepeaterBlock=True)
+		wrapper_div = Block(element="div")
+
+		parent_repeater.attach_data_key("item_group", "dataKey")
+		child_repeater.attach_data_key("group", "dataKey")
+
+		item_name = Block(element="h2")
+		item_price = Block(element="span")
+
+		item_name.set_dynamic_value("name", "key", "innerHTML")
+		item_price.set_dynamic_value("price", "key", "innerHTML")
+
+		wrapper_div.attach_children(item_name, item_price)
+		child_repeater.attach_children(wrapper_div)
+		parent_repeater.attach_children(child_repeater)
+		body.attach_children(parent_repeater)
+
+		page = frappe.get_doc(
+			{
+				"doctype": "Builder Page",
+				"page_title": "Nested Repeater Blocks Test",
+				"published": 1,
+				"route": "/nested-repeater-blocks-test",
+				"page_data_script": repeater_page_data_script,
+				"blocks": body.as_json(wrap_in_array=True),
+			}
+		).insert()
+
+		try:
+			content = get_response_content("/nested-repeater-blocks-test")
+			self.assertTrue("Item A1" in get_html_for(content, "tag", "h2"))
+			self.assertTrue("$10" in get_html_for(content, "tag", "span"))
+			self.assertTrue("Item A2" in get_html_for(content, "tag", "h2", index=1))
+			self.assertTrue("$20" in get_html_for(content, "tag", "span", index=1))
+			self.assertFalse("Item B1" in get_html_for(content, "tag", "h2"))
+			self.assertFalse("$15" in get_html_for(content, "tag", "span"))
+			self.assertFalse("Item B2" in get_html_for(content, "tag", "h2", index=1))
+			self.assertFalse("$25" in get_html_for(content, "tag", "span", index=1))
+		finally:
+			page.delete()
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()

From 91eee89d2f19274ee7a26a22c9e0dc7a0a9757eb Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 11:49:18 +0530
Subject: [PATCH 403/547] ci: add linter workflow for semantic commits and
 vulnerability checks

Similar to Frappe Framework
---
 .github/workflows/linter.yml | 92 ++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 .github/workflows/linter.yml

diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
new file mode 100644
index 000000000..09e465eca
--- /dev/null
+++ b/.github/workflows/linter.yml
@@ -0,0 +1,92 @@
+# When updating this file, please also update the linter_workflow_template in frappe/utils/boilerplate.py
+name: Linters
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: commitcheck-frappe-${{ github.event_name }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  commit-lint:
+    name: 'Semantic Commits'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          fetch-depth: 200
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          check-latest: true
+
+      - name: Check commit titles
+        run: |
+          npm install @commitlint/cli @commitlint/config-conventional
+          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
+
+  linter:
+    name: 'Semgrep Rules'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-python@v6
+        with:
+          python-version: '3.14'
+          cache: pip
+
+      - name: Download Semgrep rules
+        run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules
+
+      - name: Run Semgrep rules
+        run: |
+          pip install semgrep
+          semgrep ci --config ./frappe-semgrep-rules/rules --config r/python.lang.correctness
+
+  deps-vulnerable-check:
+    name: 'Vulnerable Dependency Check'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/setup-python@v6
+        with:
+          python-version: '3.14'
+
+      - uses: actions/checkout@v6
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
+      - name: Install and run pip-audit
+        run: |
+          pip install pip-audit
+          cd ${GITHUB_WORKSPACE}
+          pip-audit --desc on --ignore-vuln PYSEC-2023-312 .
+
+  precommit:
+    name: 'Pre-Commit'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-python@v6
+        with:
+          python-version: '3.14'
+          cache: pip
+      - uses: pre-commit/action@v3.0.1
\ No newline at end of file

From fdaa2636fed146dc0fc6704f288f94475d33035b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 11:54:41 +0530
Subject: [PATCH 404/547] ci: update linter configuration

---
 .github/workflows/linter.yml | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
index 09e465eca..07569927b 100644
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -9,7 +9,7 @@ permissions:
   contents: read
 
 concurrency:
-  group: commitcheck-frappe-${{ github.event_name }}-${{ github.event.number }}
+  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.event.number }}
   cancel-in-progress: true
 
 jobs:
@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v6
         with:
-          fetch-depth: 200
+          fetch-depth: 0
       - uses: actions/setup-node@v6
         with:
           node-version: 24
@@ -29,7 +29,7 @@ jobs:
 
       - name: Check commit titles
         run: |
-          npm install @commitlint/cli @commitlint/config-conventional
+          npm install @commitlint/cli@19 @commitlint/config-conventional@19
           npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
 
   linter:
@@ -57,25 +57,15 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - uses: actions/checkout@v6
       - uses: actions/setup-python@v6
         with:
           python-version: '3.14'
-
-      - uses: actions/checkout@v6
-
-      - name: Cache pip
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-            ${{ runner.os }}-
+          cache: pip
 
       - name: Install and run pip-audit
         run: |
           pip install pip-audit
-          cd ${GITHUB_WORKSPACE}
           pip-audit --desc on --ignore-vuln PYSEC-2023-312 .
 
   precommit:

From b2606f3d1893f97e1dee9311e374e9c76dbac5fd Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 11:56:20 +0530
Subject: [PATCH 405/547] style: Fix formatting

---
 .../doctype/builder_page/test_builder_page.py |  2 +-
 frontend/src/components/TextBlock.vue         | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index a4fecffee..5693beb68 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -361,7 +361,7 @@ def test_visibility_condition_from_page_data(self):
 
 		header.visibilityCondition = {"key": "is_header_visible", "comesFrom": "dataScript"}
 		hidden_header.visibilityCondition = {"key": "is_hidden_header_visible", "comesFrom": "dataScript"}
-		hidden_header_h3.visibilityCondition = "is_hidden_header_visible" # legacy
+		hidden_header_h3.visibilityCondition = "is_hidden_header_visible"  # legacy
 		header_h4.visibilityCondition = ""
 		header_h5.visibilityCondition = {"key": "", "comesFrom": "dataScript"}
 
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 8419ae295..6cbec60b3 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -206,18 +206,18 @@ watch(
 	() => textContent.value,
 	(newValue: string) => {
 		if (!editor.value) return;
-		
+
 		const innerHTML = getInnerHTML(editor.value);
 		if (newValue === innerHTML) return;
-		
+
 		// If plain text is entered but current content has HTML styling, preserve it
 		const isPlainText = !/<[^>]+>/.test(newValue);
 		const hasStyles = /<[^>]+style=/.test(innerHTML) || /<(em|strong|i|b|u)/.test(innerHTML);
-		
+
 		if (isPlainText && hasStyles && newValue.trim()) {
-			const tempDiv = document.createElement('div');
+			const tempDiv = document.createElement("div");
 			tempDiv.innerHTML = innerHTML;
-			
+
 			if (tempDiv.textContent !== newValue) {
 				// Update only the text content, preserving all HTML tags
 				const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT);
@@ -230,7 +230,7 @@ watch(
 			}
 			return;
 		}
-		
+
 		editor.value.commands.setContent(newValue || "", false);
 	},
 );
@@ -274,11 +274,11 @@ if (!props.preview) {
 							addGlobalAttributes() {
 								return [
 									{
-										types: ['textStyle'],
+										types: ["textStyle"],
 										attributes: {
 											style: {
-												parseHTML: element => element.getAttribute('style'),
-												renderHTML: attributes => attributes.style ? { style: attributes.style } : {},
+												parseHTML: (element) => element.getAttribute("style"),
+												renderHTML: (attributes) => (attributes.style ? { style: attributes.style } : {}),
 											},
 										},
 									},
@@ -286,7 +286,7 @@ if (!props.preview) {
 							},
 						}),
 						Color.configure({
-							types: ['textStyle'],
+							types: ["textStyle"],
 						}),
 						FontFamily,
 						Link.configure({

From 5b5b319243d206642269980801ac00f946966531 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 11:58:35 +0530
Subject: [PATCH 406/547] ci: add commitlint configuration for conventional
 commits

---
 commitlint.config.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 commitlint.config.js

diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 000000000..004cd46d2
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,26 @@
+module.exports = {
+  parserPreset: "conventional-changelog-conventionalcommits",
+  rules: {
+    "subject-empty": [2, "never"],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "chore",
+        "ci",
+        "docs",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+        "deprecate",
+      ],
+    ],
+  },
+};

From bb706421dc357c71bdb9f6c9700aa0ac864420f4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 12:05:08 +0530
Subject: [PATCH 407/547] ci: Pin prettier-plugin-tailwindcss plugin

---
 .pre-commit-config.yaml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index e6f590e2c..21c267e5c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -26,9 +26,7 @@ repos:
           - vue
         additional_dependencies:
           - prettier@3.3.3
-          - prettier-plugin-tailwindcss
-        args:
-          - --plugin=prettier-plugin-tailwindcss
+          - prettier-plugin-tailwindcss@0.6.11
         exclude: |
             (?x)^(
                 frappe/public/dist/.*|

From aae9d424bb767e03db285250545537399bd3d670 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 12:07:48 +0530
Subject: [PATCH 408/547] ci: change module.exports to export default to make
 it compatible with ES6 module

---
 commitlint.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/commitlint.config.js b/commitlint.config.js
index 004cd46d2..c95e42df7 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   parserPreset: "conventional-changelog-conventionalcommits",
   rules: {
     "subject-empty": [2, "never"],

From c6ec39c342c032b48fb377f9e542d306cb714078 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 12:12:14 +0530
Subject: [PATCH 409/547] ci: skip prettier in pre-commit configuration

---
 .github/workflows/linter.yml | 4 +++-
 .pre-commit-config.yaml      | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
index 07569927b..a573c162a 100644
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -79,4 +79,6 @@ jobs:
         with:
           python-version: '3.14'
           cache: pip
-      - uses: pre-commit/action@v3.0.1
\ No newline at end of file
+      - uses: pre-commit/action@v3.0.1
+        env:
+          SKIP: prettier
\ No newline at end of file
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 21c267e5c..95a5bf1ca 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -39,5 +39,5 @@ repos:
 
 ci:
     autoupdate_schedule: weekly
-    skip: []
+    skip: [prettier]
     submodules: false

From 82a53bc28ab593cb7b45b9f4aae00ad31254d1e8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Thu, 5 Mar 2026 12:40:56 +0530
Subject: [PATCH 410/547] ci: Refactor (#511)

---
 .github/workflows/linter.yml | 19 -------------------
 .pre-commit-config.yaml      | 13 ++++++++++---
 builder/api.py               |  4 ++--
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
index a573c162a..7f55962c6 100644
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -13,25 +13,6 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  commit-lint:
-    name: 'Semantic Commits'
-    runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
-
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          check-latest: true
-
-      - name: Check commit titles
-        run: |
-          npm install @commitlint/cli@19 @commitlint/config-conventional@19
-          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
-
   linter:
     name: 'Semgrep Rules'
     runs-on: ubuntu-latest
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 95a5bf1ca..967382669 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,11 +1,12 @@
 exclude: 'node_modules|.git'
 default_stages: [pre-commit]
+default_install_hook_types: [pre-commit, commit-msg]
 fail_fast: false
 
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.11.13
+    rev: v0.14.10
     hooks:
       - id: ruff
         name: "Run ruff import sorter"
@@ -29,7 +30,7 @@ repos:
           - prettier-plugin-tailwindcss@0.6.11
         exclude: |
             (?x)^(
-                frappe/public/dist/.*|
+                builder/public/dist/.*|
                 .*node_modules.*|
                 .*boilerplate.*|
                 .*src.*.js|
@@ -37,7 +38,13 @@ repos:
                 builder/public/js/posthog.js|
             )$
 
+  - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
+    rev: v9.23.0
+    hooks:
+      - id: commitlint
+        stages: [commit-msg]
+        additional_dependencies: ['conventional-changelog-conventionalcommits']
+
 ci:
     autoupdate_schedule: weekly
-    skip: [prettier]
     submodules: false
diff --git a/builder/api.py b/builder/api.py
index a297d7ce1..1abf2385a 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -143,14 +143,14 @@ def handle_image_from_url(image_url):
 
 	if file_doc:
 		if file_doc.file_url.startswith("/files"):
-			image, filename, extn = get_local_image(file_doc.file_url)
+			image, _, extn = get_local_image(file_doc.file_url)
 			if can_convert_image(extn):
 				return update_file_doc_with_webp(file_doc, image, extn)
 		return file_doc.file_url
 
 	image_url = image_url or ""
 	if image_url.startswith("/files"):
-		image, filename, extn = get_local_image(image_url)
+		image, _, extn = get_local_image(image_url)
 		if can_convert_image(extn):
 			return create_new_webp_file_doc(image_url, image, extn)
 		return image_url

From c90591db993617e7ec37c8df82ca8400daed7346 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 5 Mar 2026 16:39:17 +0530
Subject: [PATCH 411/547] fix: update filters parameter type to string in
 replace_component and get_component_usage_count functions

---
 .../doctype/builder_settings/builder_settings.py       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index 172868aec..101ad6119 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -80,7 +80,7 @@ def get_components():
 
 
 @frappe.whitelist()
-def replace_component(target_component: str, replace_with: str, filters: dict | None = None):
+def replace_component(target_component: str, replace_with: str, filters: str | None = None):
 	if not target_component or not replace_with:
 		return
 	# check permissions
@@ -95,7 +95,7 @@ def replace_component(target_component: str, replace_with: str, filters: dict |
 	pages = frappe.get_all(
 		"Builder Page",
 		fields=["name"],
-		filters=filters,
+		filters=frappe.parse_json(filters) if filters else {},
 		or_filters={
 			"blocks": ["like", f"%{target_component}%"],
 			"draft_blocks": ["like", f"%{target_component}%"],
@@ -108,10 +108,12 @@ def replace_component(target_component: str, replace_with: str, filters: dict |
 
 @frappe.whitelist()
 @redis_cache()
-def get_component_usage_count(component_id: str, filters: dict | None = None):
+def get_component_usage_count(component_id: str, filters: str | None = None):
+	if not frappe.has_permission("Builder Page", ptype="read"):
+		return {"count": 0, "pages": []}
 	pages = frappe.get_all(
 		"Builder Page",
-		filters=filters,
+		filters=frappe.parse_json(filters) if filters else {},
 		fields=["name", "page_title", "route", "preview"],
 		or_filters={
 			"blocks": ["like", f"%{component_id}%"],

From 0700385c8cc5872417c1762df7d49df76f4bf547 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Fri, 6 Mar 2026 11:30:38 +0530
Subject: [PATCH 412/547] fix(BuilderBlock): include custom attributes in
 canvas (#508)

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

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 9dab13625..77e4b4b8c 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -162,7 +162,22 @@ const getBlockDataScriptValue = (path: string): any => {
 };
 
 const attributes = computed(() => {
-	const attribs = { ...props.block.getAttributes(), ...attrs } as { [key: string]: any };
+	const RESTRICTED_ATTRIBS = ["data-block-id", "data-block-uid", "data-breakpoint"];
+	let additionalAttributes: Record<string, any> = {};
+
+	if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
+		additionalAttributes = props.block.getCustomAttributes();
+	}
+
+	Object.keys(additionalAttributes).forEach((key) => {
+		if (!RESTRICTED_ATTRIBS.includes(key)) {
+			delete additionalAttributes[key];
+		}
+	});
+
+	const attribs = { ...additionalAttributes, ...props.block.getAttributes(), ...attrs } as {
+		[key: string]: any;
+	};
 
 	if (props.block.isImage() && !props.preview) {
 		if (builderStore.isDark && attribs.darkSrc) {
@@ -236,6 +251,7 @@ const attributes = computed(() => {
 	if (props.block.isInput()) {
 		attribs.readonly = true;
 	}
+
 	return attribs;
 });
 

From 8746f0478ec53e11cb4ff9524dba62230810bad9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 6 Mar 2026 14:52:39 +0530
Subject: [PATCH 413/547] fix: Allow safe_globals

---
 builder/utils.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/builder/utils.py b/builder/utils.py
index 158b2044c..76453b67b 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -22,6 +22,7 @@
 	safe_exec_flags,
 )
 from RestrictedPython import compile_restricted
+from RestrictedPython import safe_globals as restricted_safe_globals
 from werkzeug.routing import Rule
 
 
@@ -225,6 +226,7 @@ def get_safer_globals():
 	out._iter_unpack_sequence_ = safe_globals["_iter_unpack_sequence_"]
 
 	# add common python builtins
+	out.update(restricted_safe_globals)
 	out.update(get_python_builtins())
 
 	return out

From 1c46aef8dfe35e5f2b994fee5f2091188b2e505a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 8 Mar 2026 01:09:16 +0530
Subject: [PATCH 414/547] fix: proper truncation and expansion of input labels

shows tooltip on hover for truncated text.
---
 .../Controls/BasePropertyControl.vue          |  2 +-
 .../src/components/Controls/InlineInput.vue   | 46 +++++++++++++++----
 .../src/components/Controls/InputLabel.vue    |  4 +-
 .../src/components/Controls/PropertyLabel.vue | 39 ++++++++++++----
 4 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 70409a7ab..d2622ad11 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -19,7 +19,7 @@
 				:showDropdown="showDropdown"
 				:dropdownOptions="dropdownOptions"
 				:enableSlider="enableSlider"
-				containerClass="w-[88px] shrink-0"
+				containerClass="min-w-[88px] w-1/3 shrink-0"
 				@mousedown="handleMouseDown" />
 
 			<DraggablePopup
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index f57fb053a..54ec01d8d 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -1,15 +1,18 @@
 <template>
 	<div class="flex items-center justify-between [&>div>input]:!bg-red-600 [&>div>input]:pr-6">
-		<InputLabel
-			v-if="label"
-			:class="{
-				'cursor-ns-resize': enableSlider,
-			}"
-			class="w-[88px] shrink-0"
-			:description="description"
-			@mousedown="handleMouseDown">
-			{{ label }}
-		</InputLabel>
+		<Tooltip :disabled="!label" :text="label" placement="bottom">
+			<InputLabel
+				v-if="label"
+				:class="{
+					'cursor-ns-resize': enableSlider,
+				}"
+				ref="labelRef"
+				class="w-[88px] shrink-0 truncate"
+				:description="description"
+				@mousedown="handleMouseDown">
+				{{ label }}
+			</InputLabel>
+		</Tooltip>
 		<BuilderInput
 			class="w-full"
 			:type="type"
@@ -39,6 +42,9 @@ import { isNumber } from "@tiptap/vue-3";
 import { computed } from "vue";
 import Autocomplete from "./Autocomplete.vue";
 import InputLabel from "./InputLabel.vue";
+import { ref, onMounted, nextTick } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { Tooltip } from "frappe-ui";
 
 type Action = {
 	label: string;
@@ -81,6 +87,9 @@ const props = withDefaults(
 	},
 );
 
+const labelRef = ref<InstanceType<typeof InputLabel> | null>(null);
+const isTruncated = ref(false);
+
 const emit = defineEmits(["update:modelValue"]);
 
 type Option = {
@@ -156,4 +165,21 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 	}
 	handleChange(newValue + "" + unit);
 };
+
+onMounted(async () => {
+	await nextTick();
+	checkTruncation();
+});
+
+useResizeObserver(labelRef, () => {
+	checkTruncation();
+});
+
+function checkTruncation() {
+	if (!labelRef.value) return;
+	const el = labelRef.value.$el as HTMLElement;
+	if (!el) return;
+
+	isTruncated.value = el.scrollWidth > el.clientWidth;
+}
 </script>
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index c301e84a9..4ae5756f4 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,5 +1,7 @@
 <template>
-	<span class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
+	<span
+		:class="{ 'inline-flex': description }"
+		class="min-w-16 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
 		<slot />
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
diff --git a/frontend/src/components/Controls/PropertyLabel.vue b/frontend/src/components/Controls/PropertyLabel.vue
index e03b0df9d..dd5542f41 100644
--- a/frontend/src/components/Controls/PropertyLabel.vue
+++ b/frontend/src/components/Controls/PropertyLabel.vue
@@ -9,19 +9,23 @@
 					@click="open" />
 			</template>
 		</Dropdown>
-		<InputLabel
-			class="truncate"
-			:class="{ 'cursor-ns-resize': enableSlider }"
-			@mousedown="$emit('mousedown', $event)">
-			{{ label }}
-		</InputLabel>
+		<Tooltip :disabled="!isTruncated" :text="label" placement="bottom">
+			<InputLabel
+				ref="labelRef"
+				class="truncate"
+				:class="{ 'cursor-ns-resize': enableSlider }"
+				@mousedown="$emit('mousedown', $event)">
+				{{ label }}
+			</InputLabel>
+		</Tooltip>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import InputLabel from "@/components/Controls/InputLabel.vue";
-import { Dropdown, FeatherIcon } from "frappe-ui";
-import { ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { Dropdown, FeatherIcon, Tooltip } from "frappe-ui";
+import { ref, onMounted, nextTick } from "vue";
 
 const props = defineProps<{
 	label: string;
@@ -36,6 +40,25 @@ defineEmits<{
 }>();
 
 const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
+const labelRef = ref<InstanceType<typeof InputLabel> | null>(null);
+const isTruncated = ref(false);
+
+function checkTruncation() {
+	if (!labelRef.value) return;
+	const el = labelRef.value.$el as HTMLElement;
+	if (!el) return;
+
+	isTruncated.value = el.scrollWidth > el.clientWidth;
+}
+
+onMounted(async () => {
+	await nextTick();
+	checkTruncation();
+});
+
+useResizeObserver(labelRef, () => {
+	checkTruncation();
+});
 
 defineExpose({ dropdownTrigger });
 </script>

From 985eff8c2d9b0ce242dbba08041e997d13f371b0 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Mon, 9 Mar 2026 14:47:34 +0530
Subject: [PATCH 415/547] feat: implement last used mode persistence for script
 editor (#513)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 frontend/src/components/PageScript.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 769097ebc..d76e29a4a 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -164,13 +164,14 @@ import TabButtons from "./Controls/TabButtons.vue";
 import Switch from "./Controls/Switch.vue";
 import PropsEditor from "./PropsEditor.vue";
 import useBlockDataStore from "@/stores/blockDataStore";
+import { useStorage } from "@vueuse/core";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
 const blockDataStore = useBlockDataStore();
 
 const showDialog = ref(false);
-const mode = ref<"page" | "block">("block");
+const mode = useStorage("builder_last_used_script_editor_mode", "page");
 const showCumulativeBlockData = ref(false);
 
 const props = defineProps<{

From 384bbd7d3306d85043551a3fcce663d60d3184d3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 11 Mar 2026 08:18:59 +0530
Subject: [PATCH 416/547] fix: add leading hyphen for vendor-prefixed CSS
 properties in camel_case_to_kebab_case function

---
 builder/utils.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/builder/utils.py b/builder/utils.py
index 76453b67b..425d6a4bf 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -406,9 +406,14 @@ def escape_single_quotes(text):
 
 
 def camel_case_to_kebab_case(text, remove_spaces=False):
+	# Used to convert camelCase css properties to kebab-case, e.g. backgroundColor → background-color
 	if not text:
 		return ""
 	text = re.sub(r"(?<!^)(?=[A-Z])", "-", text).lower()
+	# Add leading hyphen for vendor-prefixed CSS properties
+	# e.g. WebkitBackgroundClip → -webkit-background-clip
+	if re.match(r"^(webkit|moz|ms|o)-", text):
+		text = f"-{text}"
 	if remove_spaces:
 		text = text.replace(" ", "")
 	return text

From 38247fd5c564ccbbd65391d9b9d16bfc184ea73d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 11 Mar 2026 08:20:31 +0530
Subject: [PATCH 417/547] test: Remove duplicate test_utils.py

- Update camel_case_to_kebab_case test
---
 builder/builder/test_utils.py       | 81 -----------------------------
 builder/builder/tests/test_utils.py | 27 ++++++++++
 2 files changed, 27 insertions(+), 81 deletions(-)
 delete mode 100644 builder/builder/test_utils.py

diff --git a/builder/builder/test_utils.py b/builder/builder/test_utils.py
deleted file mode 100644
index aa917d716..000000000
--- a/builder/builder/test_utils.py
+++ /dev/null
@@ -1,81 +0,0 @@
-from unittest.mock import patch
-
-import frappe
-from frappe.tests.utils import FrappeTestCase
-
-from builder.utils import (
-	camel_case_to_kebab_case,
-	escape_single_quotes,
-	execute_script,
-	get_builder_page_preview_file_paths,
-	get_dummy_blocks,
-	get_template_assets_folder_path,
-	is_component_used,
-	remove_unsafe_fields,
-)
-
-
-class TestBuilderPage(FrappeTestCase):
-	def test_camel_case_to_kebab_case(self):
-		self.assertEqual(camel_case_to_kebab_case("backgroundColor"), "background-color")
-		self.assertEqual(camel_case_to_kebab_case("Color"), "color")
-		self.assertEqual(camel_case_to_kebab_case("color"), "color")
-		self.assertEqual(camel_case_to_kebab_case("NewPage"), "new-page")
-		self.assertEqual(camel_case_to_kebab_case("new page", remove_spaces=True), "newpage")
-
-	def test_escape_single_quotes(self):
-		self.assertEqual(escape_single_quotes("Hello 'World'"), "Hello \\'World\\'")
-		self.assertEqual(escape_single_quotes("Hello World"), "Hello World")
-
-	def test_is_component_used(self):
-		dummy_blocks = get_dummy_blocks()
-		self.assertTrue(is_component_used(dummy_blocks, "component-1"))
-		self.assertTrue(is_component_used(dummy_blocks, "component-2"))
-		self.assertFalse(is_component_used(dummy_blocks, "component-3"))
-
-	def test_get_builder_page_preview_file_paths(self):
-		page_doc = frappe._dict(
-			{
-				"name": "test-page",
-				"is_template": False,
-			}
-		)
-		public_path, local_path = get_builder_page_preview_file_paths(page_doc)
-		self.assertRegex(public_path, r"/files/test-page-preview.webp\?v=\w{5}")
-		self.assertEqual(local_path, f"{frappe.local.site_path}/public/files/test-page-preview.webp")
-
-		page_doc.is_template = True
-		public_path, local_path = get_builder_page_preview_file_paths(page_doc)
-		self.assertEqual(public_path, "/builder_assets/test-page/preview.webp")
-		self.assertEqual(
-			local_path, f"{frappe.get_app_path('builder')}/www/builder_assets/test-page/preview.webp"
-		)
-
-	def test_get_template_assets_folder_path(self):
-		page_doc = frappe._dict({"name": "mypage"})
-		path = get_template_assets_folder_path(page_doc)
-		self.assertEqual(path, f"{frappe.get_app_path('builder')}/www/builder_assets/mypage")
-
-	@patch("builder.utils.is_safe_exec_enabled", return_value=False)
-	@patch("frappe.utils.safe_exec.is_safe_exec_enabled", return_value=False)
-	def test_execute_script_with_enabled_server_script(self, *args):
-		script = "data.test = frappe.get_doc('User', 'Administrator').email"
-		_locals = dict(data=frappe._dict())
-		execute_script(script, _locals, "test.py")
-		self.assertEqual(_locals["data"]["test"], "admin@example.com")
-
-	@patch("builder.utils.is_safe_exec_enabled", return_value=True)
-	@patch("frappe.utils.safe_exec.is_safe_exec_enabled", return_value=True)
-	def test_execute_script_with_disabled_server_script(self, *args):
-		script = "data.test = frappe.get_doc('User', 'Administrator').email"
-		_locals = dict(data=frappe._dict())
-		execute_script(script, _locals, "test.py")
-		self.assertEqual(_locals["data"]["test"], "admin@example.com")
-
-		script = "data.users = frappe.db.get_all('User')"
-		execute_script(script, _locals, "test.py")
-		self.assertTrue(_locals["data"]["users"])
-
-		script = "data.users = frappe.db.get_all('User')"
-		execute_script(script, _locals, "test.py")
-		self.assertTrue(_locals["data"]["users"])
diff --git a/builder/builder/tests/test_utils.py b/builder/builder/tests/test_utils.py
index 7f0dda194..6396a87d7 100644
--- a/builder/builder/tests/test_utils.py
+++ b/builder/builder/tests/test_utils.py
@@ -32,11 +32,18 @@ def test_camel_case_to_kebab_case(self):
 			"marginTop": "margin-top",
 			"WebsiteHeader": "website-header",
 			"simple": "simple",
+			"Color": "color",
+			"color": "color",
+			"WebkitBackgroundClip": "-webkit-background-clip",
+			"WebkitTextFillColor": "-webkit-text-fill-color",
+			"MozTransform": "-moz-transform",
 		}
 
 		for input_str, expected in test_cases.items():
 			self.assertEqual(camel_case_to_kebab_case(input_str), expected)
 
+		self.assertEqual(camel_case_to_kebab_case("new page", remove_spaces=True), "newpage")
+
 	def test_escape_single_quotes(self):
 		test_cases = {
 			"It's working": "It\\'s working",
@@ -130,6 +137,26 @@ def test_execute_script(self):
 		execute_script("data.sum = a + b", {"data": data, "a": 2, "b": 2}, "test.py")
 		self.assertEqual(data.sum, 4)
 
+	@patch("builder.utils.is_safe_exec_enabled", return_value=False)
+	@patch("frappe.utils.safe_exec.is_safe_exec_enabled", return_value=False)
+	def test_execute_script_with_enabled_server_script(self, *args):
+		script = "data.test = frappe.get_doc('User', 'Administrator').email"
+		_locals = dict(data=frappe._dict())
+		execute_script(script, _locals, "test.py")
+		self.assertEqual(_locals["data"]["test"], "admin@example.com")
+
+	@patch("builder.utils.is_safe_exec_enabled", return_value=True)
+	@patch("frappe.utils.safe_exec.is_safe_exec_enabled", return_value=True)
+	def test_execute_script_with_disabled_server_script(self, *args):
+		script = "data.test = frappe.get_doc('User', 'Administrator').email"
+		_locals = dict(data=frappe._dict())
+		execute_script(script, _locals, "test.py")
+		self.assertEqual(_locals["data"]["test"], "admin@example.com")
+
+		script = "data.users = frappe.db.get_all('User')"
+		execute_script(script, _locals, "test.py")
+		self.assertTrue(_locals["data"]["users"])
+
 	def test_colon_rule(self):
 		rule = ColonRule("/test/<name>", endpoint="test_endpoint")
 		self.assertEqual(rule.rule, "/test/<name>")

From a7f78da9ecc166d693897e92fc904615e893b803 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 11 Mar 2026 16:40:37 +0530
Subject: [PATCH 418/547] refactor: replace inline element checks with sets for
 better readability and performance

---
 frontend/src/block.ts | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index a6be6d2b7..9a759361b 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -18,6 +18,29 @@ import { Editor } from "@tiptap/vue-3";
 import { clamp } from "@vueuse/core";
 import { computed, nextTick, reactive, toRaw } from "vue";
 
+const TEXT_ELEMENTS = new Set([
+	"span",
+	"h1",
+	"p",
+	"b",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"label",
+	"a",
+	"cite",
+	"li",
+	"strong",
+	"em",
+	"i",
+]);
+
+const CONTAINER_ELEMENTS = new Set(["section", "div"]);
+
+const HEADER_ELEMENTS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+
 class Block implements BlockOptions {
 	blockId: string;
 	children: Array<Block>;
@@ -297,15 +320,13 @@ class Block implements BlockOptions {
 		return this.getElement() === "svg" || this.getInnerHTML()?.startsWith("<svg");
 	}
 	isText() {
-		return ["span", "h1", "p", "b", "h2", "h3", "h4", "h5", "h6", "label", "a", "cite"].includes(
-			this.getElement() as string,
-		);
+		return TEXT_ELEMENTS.has(this.getElement() as string);
 	}
 	isContainer() {
-		return ["section", "div"].includes(this.getElement() as string);
+		return CONTAINER_ELEMENTS.has(this.getElement() as string);
 	}
 	isHeader() {
-		return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(this.getElement() as string);
+		return HEADER_ELEMENTS.has(this.getElement() as string);
 	}
 	isInput() {
 		return (

From 8fa5c4dff265476b13b670b70881a7f9183d8fe9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 10:03:56 +0530
Subject: [PATCH 419/547] feat: useShortcut composable for managing keyboard
 shortcuts

With this the goal is to maintain a single source of truth for all shortcuts and get the list of all registered and active shortcuts in the current view
---
 frontend/src/utils/useShortcut.ts | 200 ++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 frontend/src/utils/useShortcut.ts

diff --git a/frontend/src/utils/useShortcut.ts b/frontend/src/utils/useShortcut.ts
new file mode 100644
index 000000000..94ebf33d0
--- /dev/null
+++ b/frontend/src/utils/useShortcut.ts
@@ -0,0 +1,200 @@
+import { isCtrlOrCmd, isTargetEditable } from "@/utils/helpers";
+import { onActivated, onBeforeUnmount, onDeactivated, reactive, readonly } from "vue";
+
+export interface ShortcutConfig {
+	/** Shortcut key(s) to listen for (e.g. "s", "Escape", "ArrowUp") */
+	key: string;
+	/** Whether Ctrl (or Cmd on Mac) must be held */
+	ctrl?: boolean;
+	/** Whether Shift must be held */
+	shift?: boolean;
+	/** Human-readable label for the shortcut */
+	description: string;
+	/** Group name for categorizing in the shortcuts modal */
+	group?: string;
+	/** Handler to execute when the shortcut is triggered */
+	handler: (e: KeyboardEvent) => void;
+	/** Whether to prevent default browser behavior (default: true) */
+	preventDefault?: boolean;
+	/** Whether the shortcut should work when an input/textarea is focused (default: false) */
+	allowInInput?: boolean;
+	/**
+	 * Condition function - shortcut only fires when this returns true.
+	 * If not provided, the shortcut is always active.
+	 */
+	condition?: () => boolean;
+}
+
+export interface RegisteredShortcut {
+	key: string;
+	ctrl: boolean;
+	shift: boolean;
+	description: string;
+	group: string;
+	id: symbol;
+}
+
+const activeShortcuts = reactive<RegisteredShortcut[]>([]);
+const shortcutHandlers = new Map<symbol, ShortcutConfig>();
+
+let listenerAttached = false;
+
+function attachGlobalListener() {
+	if (listenerAttached) return;
+	listenerAttached = true;
+
+	document.addEventListener("keydown", globalKeydownHandler);
+}
+
+function globalKeydownHandler(e: KeyboardEvent) {
+	// Iterate through all registered shortcuts and find matching ones
+	for (const [id, config] of shortcutHandlers) {
+		if (!matchesShortcut(e, config)) continue;
+
+		// Check condition
+		if (config.condition && !config.condition()) continue;
+
+		// Check if target is an editable field
+		if (!config.allowInInput && isTargetEditable(e)) continue;
+
+		if (config.preventDefault !== false) {
+			e.preventDefault();
+		}
+
+		config.handler(e);
+		return; // Only fire the first match
+	}
+}
+
+function matchesShortcut(e: KeyboardEvent, config: ShortcutConfig): boolean {
+	if (e.key.toLowerCase() !== config.key.toLowerCase() && e.key !== config.key) {
+		return false;
+	}
+
+	const wantsCtrl = config.ctrl ?? false;
+	const wantsShift = config.shift ?? false;
+
+	if (wantsCtrl && !isCtrlOrCmd(e)) return false;
+	if (!wantsCtrl && isCtrlOrCmd(e)) return false;
+
+	// For keys that are themselves produced by Shift (like ? = Shift+/),
+	// only enforce the shift check when shift is explicitly specified in the config
+	const isShiftProducedKey =
+		config.key !== config.key.toLowerCase() || /^[?!@#$%^&*()_+{}|:"<>~]$/.test(config.key);
+	if (wantsShift && !e.shiftKey) return false;
+	if (!wantsShift && e.shiftKey && !isShiftProducedKey) return false;
+
+	return true;
+}
+
+function formatShortcutLabel(config: { key: string; ctrl?: boolean; shift?: boolean }): string {
+	const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+	const parts: string[] = [];
+
+	if (config.ctrl) {
+		parts.push(isMac ? "⌘" : "Ctrl");
+	}
+	if (config.shift) {
+		parts.push(isMac ? "⇧" : "Shift");
+	}
+
+	// Friendly key names
+	const keyMap: Record<string, string> = {
+		arrowup: "↑",
+		arrowdown: "↓",
+		arrowleft: "←",
+		arrowright: "→",
+		escape: "Esc",
+		backspace: "⌫",
+		delete: "Del",
+		enter: "↵",
+		" ": "Space",
+		"\\": "\\",
+		"=": "+",
+		"-": "−",
+	};
+
+	const displayKey = keyMap[config.key.toLowerCase()] ?? config.key.toUpperCase();
+	parts.push(displayKey);
+
+	return parts.join(isMac ? " " : " + ");
+}
+
+/**
+ * Register keyboard shortcuts that are automatically cleaned up when the component unmounts.
+ * Returns the list of all active shortcuts across the app.
+ *
+ * @example
+ * const { activeShortcuts } = useShortcut([
+ *   { key: "s", ctrl: true, description: "Save", group: "General", handler: () => save() },
+ *   { key: "z", ctrl: true, description: "Undo", group: "Edit", handler: () => undo() },
+ * ]);
+ */
+export function useShortcut(shortcuts: ShortcutConfig | ShortcutConfig[]) {
+	attachGlobalListener();
+
+	const configs = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
+	const registeredIds: symbol[] = [];
+
+	for (const config of configs) {
+		const id = Symbol(config.description);
+		const registered: RegisteredShortcut = {
+			key: config.key,
+			ctrl: config.ctrl ?? false,
+			shift: config.shift ?? false,
+			description: config.description,
+			group: config.group ?? "General",
+			id,
+		};
+
+		shortcutHandlers.set(id, config);
+		activeShortcuts.push(registered);
+		registeredIds.push(id);
+	}
+
+	const removeShortcuts = () => {
+		for (const id of registeredIds) {
+			shortcutHandlers.delete(id);
+			const idx = activeShortcuts.findIndex((s) => s.id === id);
+			if (idx !== -1) activeShortcuts.splice(idx, 1);
+		}
+	};
+
+	const addShortcuts = () => {
+		for (let i = 0; i < configs.length; i++) {
+			const id = registeredIds[i];
+			if (!shortcutHandlers.has(id)) {
+				shortcutHandlers.set(id, configs[i]);
+				activeShortcuts.push({
+					key: configs[i].key,
+					ctrl: configs[i].ctrl ?? false,
+					shift: configs[i].shift ?? false,
+					description: configs[i].description,
+					group: configs[i].group ?? "General",
+					id,
+				});
+			}
+		}
+	};
+
+	// Clean up on component unmount
+	onBeforeUnmount(removeShortcuts);
+
+	// Handle keep-alive: remove shortcuts when deactivated, re-add when activated
+	onDeactivated(removeShortcuts);
+	onActivated(addShortcuts);
+
+	return {
+		activeShortcuts: readonly(activeShortcuts),
+		formatShortcutLabel,
+	};
+}
+
+/**
+ * Get all currently registered shortcuts (read-only). Useful outside of component setup.
+ */
+export function getActiveShortcuts() {
+	return readonly(activeShortcuts);
+}
+
+export { formatShortcutLabel };

From f1030fdd6b8b9170561fc85bdd1f119175a47ea0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 10:13:30 +0530
Subject: [PATCH 420/547] refactor: Use "useShortcut" composable with group and
 description

- and add keyboadShortcutsModal to show all active shortcuts in Editor on hitting "?"
---
 frontend/components.d.ts                      |   1 +
 frontend/src/components/DashboardContent.vue  |  12 +-
 .../src/components/KeyboardShortcutsModal.vue |  94 ++++
 frontend/src/pages/PageBuilder.vue            |  54 +-
 frontend/src/pages/PagePreview.vue            |  17 +-
 frontend/src/utils/useBuilderEvents.ts        | 491 +++++++++++-------
 6 files changed, 438 insertions(+), 231 deletions(-)
 create mode 100644 frontend/src/components/KeyboardShortcutsModal.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 80276f733..cae2e12f5 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -85,6 +85,7 @@ declare module 'vue' {
     Input: typeof import('./src/components/Controls/Input.vue')['default']
     InputLabel: typeof import('./src/components/Controls/InputLabel.vue')['default']
     JavaScript: typeof import('./src/components/Icons/JavaScript.vue')['default']
+    KeyboardShortcutsModal: typeof import('./src/components/KeyboardShortcutsModal.vue')['default']
     Layers: typeof import('./src/components/Icons/Layers.vue')['default']
     Loading: typeof import('./src/components/Icons/Loading.vue')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
diff --git a/frontend/src/components/DashboardContent.vue b/frontend/src/components/DashboardContent.vue
index dc987b6e2..6874bc7a3 100644
--- a/frontend/src/components/DashboardContent.vue
+++ b/frontend/src/components/DashboardContent.vue
@@ -139,7 +139,8 @@ import vOnClickAndHold from "@/directives/vOnClickAndHold";
 import useBuilderStore from "@/stores/builderStore";
 import { posthog } from "@/telemetry";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { useEventListener, useStorage, watchDebounced } from "@vueuse/core";
+import { useShortcut } from "@/utils/useShortcut";
+import { useStorage, watchDebounced } from "@vueuse/core";
 import { Button, createResource, Select } from "frappe-ui";
 import { onActivated, Ref, ref, watch } from "vue";
 
@@ -173,11 +174,14 @@ watch(
 );
 
 // remove selection mode when the escape key is pressed
-useEventListener(document, "keydown", (ev) => {
-	if (ev.key === "Escape") {
+useShortcut({
+	key: "Escape",
+	description: "Deselect pages",
+	group: "Dashboard",
+	handler: () => {
 		selectedPages.value.clear();
 		selectionMode.value = false;
-	}
+	},
 });
 
 const fetchPages = () => {
diff --git a/frontend/src/components/KeyboardShortcutsModal.vue b/frontend/src/components/KeyboardShortcutsModal.vue
new file mode 100644
index 000000000..f03a42ce3
--- /dev/null
+++ b/frontend/src/components/KeyboardShortcutsModal.vue
@@ -0,0 +1,94 @@
+<template>
+	<Dialog
+		v-model="showDialog"
+		:options="{
+			title: 'Keyboard Shortcuts',
+			size: '4xl',
+		}">
+		<template #body-content>
+			<div class="max-h-[70vh] columns-2 gap-8 overflow-y-auto">
+				<div
+					v-for="(shortcuts, group) in groupedShortcuts"
+					:key="group"
+					class="mb-4 break-inside-avoid last:mb-0">
+					<h3 class="mb-1 text-xs font-semibold uppercase tracking-wider text-ink-gray-9">
+						{{ group }}
+					</h3>
+					<div class="flex flex-col">
+						<div
+							v-for="shortcut in shortcuts"
+							:key="shortcut.description"
+							class="flex items-center justify-between rounded py-1.5">
+							<span class="text-sm text-ink-gray-6">{{ shortcut.description }}</span>
+							<div class="flex items-center gap-0.5">
+								<kbd
+									v-for="(part, i) in formatShortcutParts(shortcut)"
+									:key="i"
+									class="inline-flex min-w-[22px] items-center justify-center rounded border border-outline-gray-2 bg-surface-gray-1 px-1.5 py-0.5 font-medium text-ink-gray-7"
+									:class="part.isSymbol ? 'text-base' : 'text-[11px]'">
+									{{ part.label }}
+								</kbd>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div v-if="!activeShortcuts.length" class="py-8 text-center text-sm text-ink-gray-5">
+					No keyboard shortcuts available on this page.
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from "@/components/Controls/Dialog.vue";
+import { getActiveShortcuts, type RegisteredShortcut } from "@/utils/useShortcut";
+import { computed, ref } from "vue";
+
+const showDialog = ref(false);
+const activeShortcuts = getActiveShortcuts();
+
+const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+
+const keyMap: Record<string, string> = {
+	arrowup: "↑",
+	arrowdown: "↓",
+	arrowleft: "←",
+	arrowright: "→",
+	escape: "Esc",
+	backspace: "⌫",
+	delete: "Del",
+	enter: "↵",
+	" ": "Space",
+	"\\": "\\",
+	"=": "+",
+	"-": "−",
+};
+
+function formatShortcutParts(config: {
+	key: string;
+	ctrl?: boolean;
+	shift?: boolean;
+}): { label: string; isSymbol: boolean }[] {
+	const parts: { label: string; isSymbol: boolean }[] = [];
+	if (config.ctrl) parts.push({ label: isMac ? "⌘" : "Ctrl", isSymbol: isMac });
+	if (config.shift) parts.push({ label: isMac ? "⇧" : "Shift", isSymbol: isMac });
+	const displayKey = keyMap[config.key.toLowerCase()] ?? config.key.toUpperCase();
+	const isSymbolKey = /^[↑↓←→⌫↵−]$/.test(displayKey);
+	parts.push({ label: displayKey, isSymbol: isSymbolKey });
+	return parts;
+}
+
+const groupedShortcuts = computed(() => {
+	const groups: Record<string, RegisteredShortcut[]> = {};
+	for (const shortcut of activeShortcuts) {
+		if (!groups[shortcut.group]) {
+			groups[shortcut.group] = [];
+		}
+		groups[shortcut.group].push(shortcut);
+	}
+	return groups;
+});
+
+defineExpose({ showDialog });
+</script>
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 6ef4621ef..16b1b123d 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -101,6 +101,7 @@
 		</template>
 	</Dialog>
 	<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
+	<KeyboardShortcutsModal ref="shortcutsModal" />
 </template>
 
 <script setup lang="ts">
@@ -110,6 +111,7 @@ import BuilderLeftPanel from "@/components/BuilderLeftPanel.vue";
 import BuilderRightPanel from "@/components/BuilderRightPanel.vue";
 import BuilderToolbar from "@/components/BuilderToolbar.vue";
 import Dialog from "@/components/Controls/Dialog.vue";
+import KeyboardShortcutsModal from "@/components/KeyboardShortcutsModal.vue";
 import PageListModal from "@/components/Modals/PageListModal.vue";
 import { webPages } from "@/data/webPage";
 import { sessionUser } from "@/router";
@@ -119,15 +121,10 @@ import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getUsersInfo } from "@/usersInfo";
 import blockController from "@/utils/blockController";
-import { getRootBlockTemplate, isTargetEditable } from "@/utils/helpers";
+import { getRootBlockTemplate } from "@/utils/helpers";
 import { useBuilderEvents } from "@/utils/useBuilderEvents";
-import {
-	breakpointsTailwind,
-	useActiveElement,
-	useBreakpoints,
-	useDebounceFn,
-	useMagicKeys,
-} from "@vueuse/core";
+import { useShortcut } from "@/utils/useShortcut";
+import { breakpointsTailwind, useBreakpoints, useDebounceFn, useEventListener } from "@vueuse/core";
 import { createResource } from "frappe-ui";
 import { computed, onActivated, onDeactivated, onMounted, provide, ref, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -171,24 +168,35 @@ provide("pageCanvas", pageCanvas);
 provide("fragmentCanvas", fragmentCanvas);
 useBuilderEvents(pageCanvas, fragmentCanvas, saveAndExitFragmentMode, route, router);
 
-const activeElement = useActiveElement();
-const notUsingInput = computed(
-	() => activeElement.value?.tagName !== "INPUT" && activeElement.value?.tagName !== "TEXTAREA",
-);
+const shortcutsModal = ref<InstanceType<typeof KeyboardShortcutsModal> | null>(null);
 
-const { space } = useMagicKeys({
-	passive: false,
-	onEventFired(e) {
-		if (e.key === " " && notUsingInput.value && !isTargetEditable(e)) {
-			e.preventDefault();
-		}
+useShortcut([
+	{
+		key: " ",
+		description: "Hold for move mode",
+		group: "Tools",
+		handler: () => {
+			if (!canvasStore.editableBlock) {
+				builderStore.mode = "move";
+			}
+		},
+		preventDefault: true,
 	},
-});
+	{
+		key: "?",
+		description: "Show keyboard shortcuts",
+		group: "General",
+		handler: () => {
+			if (shortcutsModal.value) {
+				shortcutsModal.value.showDialog = true;
+			}
+		},
+	},
+]);
 
-watch(space, (value) => {
-	if (value && !canvasStore.editableBlock) {
-		builderStore.mode = "move";
-	} else if (builderStore.mode === "move") {
+// When space is released, revert back to last mode
+useEventListener(document, "keyup", (e) => {
+	if (e.key === " " && builderStore.mode === "move") {
 		builderStore.mode = builderStore.lastMode !== "move" ? builderStore.lastMode : "select";
 	}
 });
diff --git a/frontend/src/pages/PagePreview.vue b/frontend/src/pages/PagePreview.vue
index 5f1b8264e..52a3c727d 100644
--- a/frontend/src/pages/PagePreview.vue
+++ b/frontend/src/pages/PagePreview.vue
@@ -78,7 +78,8 @@ import PublishButton from "@/components/PublishButton.vue";
 import router from "@/router";
 import usePageStore from "@/stores/pageStore";
 import { posthog } from "@/telemetry";
-import { useDark, useEventListener, useToggle } from "@vueuse/core";
+import { useShortcut } from "@/utils/useShortcut";
+import { useDark, useToggle } from "@vueuse/core";
 import { Tooltip } from "frappe-ui";
 import { Ref, computed, onActivated, ref, watch, watchEffect } from "vue";
 import { useRoute } from "vue-router";
@@ -144,10 +145,16 @@ const transitionTheme = (toggle: () => void) => {
 	}
 };
 
-useEventListener(document, "keydown", (ev) => {
-	if (ev.key === "Escape" && router.currentRoute.value.name === "preview") {
-		history.back();
-	}
+useShortcut({
+	key: "Escape",
+	description: "Back to builder",
+	group: "Navigation",
+	handler: () => {
+		if (router.currentRoute.value.name === "preview") {
+			history.back();
+		}
+	},
+	condition: () => router.currentRoute.value.name === "preview",
 });
 
 const applyColorSchemeToIframe = (scheme: "dark" | "light") => {
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 5b903a336..2e7c18dac 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -13,13 +13,13 @@ import { copyBuilderBlocks, pasteBuilderBlocks } from "@/utils/builderBlockCopyP
 import {
 	addPxToNumber,
 	getBlockCopy,
-	isCtrlOrCmd,
 	isHTMLString,
 	isTargetEditable,
 	showDialog,
 	triggerCopyEvent,
 	uploadBuilderAsset,
 } from "@/utils/helpers";
+import { useShortcut } from "@/utils/useShortcut";
 import { useEventListener, useStorage } from "@vueuse/core";
 import { Ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -211,209 +211,302 @@ export function useBuilderEvents(
 		}
 	});
 
-	useEventListener(document, "keydown", (e) => {
-		if (e.key === "\\" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			if (e.shiftKey) {
-				builderStore.showLeftPanel = !builderStore.showLeftPanel;
-			} else {
+	useShortcut([
+		{
+			key: "\\",
+			ctrl: true,
+			description: "Toggle panels",
+			group: "View",
+			handler: (e) => {
 				builderStore.showRightPanel = !builderStore.showRightPanel;
 				builderStore.showLeftPanel = builderStore.showRightPanel;
-			}
-		}
-		// save page or component
-		if (e.key === "s" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			if (canvasStore.editingMode === "fragment") {
-				saveAndExitFragmentMode(e);
+			},
+		},
+		{
+			key: "\\",
+			ctrl: true,
+			shift: true,
+			description: "Toggle left panel",
+			group: "View",
+			handler: () => {
+				builderStore.showLeftPanel = !builderStore.showLeftPanel;
+			},
+		},
+		{
+			key: "s",
+			ctrl: true,
+			description: "Save page / component",
+			group: "General",
+			allowInInput: true,
+			handler: (e) => {
+				if (canvasStore.editingMode === "fragment") {
+					saveAndExitFragmentMode(e);
+					e.stopPropagation();
+				}
+			},
+		},
+		{
+			key: "p",
+			ctrl: true,
+			description: "Save & preview",
+			group: "General",
+			handler: () => {
+				pageStore.savePage();
+				router.push({
+					name: "preview",
+					params: {
+						pageId: pageStore.selectedPage as string,
+					},
+				});
+			},
+		},
+		{
+			key: "f",
+			ctrl: true,
+			shift: true,
+			description: "Search blocks",
+			group: "General",
+			handler: () => {
+				builderStore.showSearchBlock = true;
+			},
+		},
+		{
+			key: "f",
+			ctrl: true,
+			description: "Focus property search",
+			group: "General",
+			handler: () => {
+				document.querySelector(".properties-search-input")?.querySelector("input")?.focus();
+			},
+		},
+		{
+			key: "c",
+			ctrl: true,
+			shift: true,
+			description: "Copy block styles",
+			group: "Edit",
+			handler: () => {
+				if (blockController.isBlockSelected() && !blockController.multipleBlocksSelected()) {
+					const block = blockController.getSelectedBlocks()[0];
+					const copiedStyle = useStorage(
+						"copiedStyle",
+						{ blockId: "", style: {} },
+						sessionStorage,
+					) as Ref<StyleCopy>;
+					copiedStyle.value = {
+						blockId: block.blockId,
+						style: block.getStylesCopy(),
+					};
+				}
+			},
+		},
+		{
+			key: "d",
+			ctrl: true,
+			description: "Duplicate block",
+			group: "Edit",
+			handler: () => {
+				if (builderStore.readOnlyMode) return;
+				if (blockController.isBlockSelected() && !blockController.multipleBlocksSelected()) {
+					const block = blockController.getSelectedBlocks()[0];
+					block.duplicateBlock();
+				}
+			},
+		},
+		{
+			key: "Backspace",
+			description: "Delete selected blocks",
+			group: "Edit",
+			handler: (e) => {
+				if (builderStore.readOnlyMode) return;
+				if (!blockController.isBlockSelected()) return;
+				for (const block of blockController.getSelectedBlocks()) {
+					canvasStore.activeCanvas?.removeBlock(block, e.shiftKey);
+				}
+				clearSelection();
 				e.stopPropagation();
-			}
-			return;
-		}
-
-		if (e.key === "p" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			pageStore.savePage();
-			router.push({
-				name: "preview",
-				params: {
-					pageId: pageStore.selectedPage as string,
-				},
-			});
-		}
-
-		// command + f should focus on search input
-		if (e.key === "f" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			document.querySelector(".properties-search-input")?.querySelector("input")?.focus();
-		}
-
-		if (e.key === "f" && isCtrlOrCmd(e) && e.shiftKey) {
-			e.preventDefault();
-			builderStore.showSearchBlock = true;
-		}
-
-		if (e.key === "c" && isCtrlOrCmd(e) && e.shiftKey) {
-			if (blockController.isBlockSelected() && !blockController.multipleBlocksSelected()) {
-				e.preventDefault();
-				const block = blockController.getSelectedBlocks()[0];
-				const copiedStyle = useStorage(
-					"copiedStyle",
-					{ blockId: "", style: {} },
-					sessionStorage,
-				) as Ref<StyleCopy>;
-				copiedStyle.value = {
-					blockId: block.blockId,
-					style: block.getStylesCopy(),
-				};
-			}
-		}
-
-		if (e.key === "d" && isCtrlOrCmd(e)) {
-			if (builderStore.readOnlyMode) return;
-			if (blockController.isBlockSelected() && !blockController.multipleBlocksSelected()) {
-				e.preventDefault();
-				const block = blockController.getSelectedBlocks()[0];
-				block.duplicateBlock();
-			}
-		}
-
-		if (isTargetEditable(e)) return;
-
-		if ((e.key === "Backspace" || e.key === "Delete") && blockController.isBlockSelected()) {
-			if (builderStore.readOnlyMode) return;
-			for (const block of blockController.getSelectedBlocks()) {
-				canvasStore.activeCanvas?.removeBlock(block, e.shiftKey);
-			}
-			clearSelection();
-			e.stopPropagation();
-			return;
-		}
-
-		if (e.key === "Escape") {
-			canvasStore.exitFragmentMode(e);
-		}
-
-		// handle arrow keys
-		// if (
-		// 	e.key.startsWith("Arrow") &&
-		// 	blockController.isBlockSelected() &&
-		// 	blockController.getFirstSelectedBlock().isMovable()
-		// ) {
-		// 	e.stopImmediatePropagation();
-		// 	const key = e.key.replace("Arrow", "").toLowerCase() as "up" | "down" | "left" | "right";
-		// 	for (const block of blockController.getSelectedBlocks()) {
-		// 		block.move(key);
-		// 	}
-		// }
-	});
-
-	// TODO: Refactor with useMagicKeys
-	useEventListener(document, "keydown", (e) => {
-		if (isTargetEditable(e)) return;
-		if (e.key === "z" && isCtrlOrCmd(e) && !e.shiftKey && canvasStore.activeCanvas?.history?.canUndo) {
-			canvasStore.activeCanvas?.history.undo();
-			e.preventDefault();
-			return;
-		}
-		if (e.key === "z" && e.shiftKey && isCtrlOrCmd(e) && canvasStore.activeCanvas?.history?.canRedo) {
-			canvasStore.activeCanvas?.history.redo();
-			e.preventDefault();
-			return;
-		}
-
-		if (e.key === "0" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				if (e.shiftKey) {
-					pageCanvas.value.setScaleAndTranslate();
-				} else {
+			},
+		},
+		{
+			key: "Delete",
+			description: "Delete selected blocks",
+			group: "Edit",
+			handler: (e) => {
+				if (builderStore.readOnlyMode) return;
+				if (!blockController.isBlockSelected()) return;
+				for (const block of blockController.getSelectedBlocks()) {
+					canvasStore.activeCanvas?.removeBlock(block, e.shiftKey);
+				}
+				clearSelection();
+				e.stopPropagation();
+			},
+		},
+		{
+			key: "Escape",
+			description: "Exit current mode",
+			group: "General",
+			condition: () => canvasStore.editingMode !== "page",
+			handler: (e) => {
+				canvasStore.exitFragmentMode(e);
+			},
+			preventDefault: false,
+		},
+		{
+			key: "z",
+			ctrl: true,
+			description: "Undo",
+			group: "Edit",
+			handler: () => {
+				if (canvasStore.activeCanvas?.history?.canUndo) {
+					canvasStore.activeCanvas?.history.undo();
+				}
+			},
+		},
+		{
+			key: "z",
+			ctrl: true,
+			shift: true,
+			description: "Redo",
+			group: "Edit",
+			handler: () => {
+				if (canvasStore.activeCanvas?.history?.canRedo) {
+					canvasStore.activeCanvas?.history.redo();
+				}
+			},
+		},
+		{
+			key: "0",
+			ctrl: true,
+			description: "Reset canvas zoom",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
 					pageCanvas.value.setCanvasZoom?.(1, "center");
 				}
-			}
-			return;
-		}
-
-		if (e.key === "ArrowRight" && !blockController.isBlockSelected()) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.moveCanvas("right");
-			}
-			return;
-		}
-
-		if (e.key === "ArrowLeft" && !blockController.isBlockSelected()) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.moveCanvas("left");
-			}
-			return;
-		}
-
-		if (e.key === "ArrowUp" && !blockController.isBlockSelected()) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.moveCanvas("up");
-			}
-			return;
-		}
-
-		if (e.key === "ArrowDown" && !blockController.isBlockSelected()) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.moveCanvas("down");
-			}
-			return;
-		}
-
-		if (e.key === "=" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.zoomIn();
-			}
-			return;
-		}
-
-		if (e.key === "-" && isCtrlOrCmd(e)) {
-			e.preventDefault();
-			if (pageCanvas.value) {
-				pageCanvas.value.zoomOut();
-			}
-			return;
-		}
-
-		if (isCtrlOrCmd(e) || e.shiftKey) {
-			return;
-		}
-
-		if (e.key === "c") {
-			if (builderStore.readOnlyMode) return;
-			builderStore.mode = "container";
-			return;
-		}
-
-		if (e.key === "i") {
-			if (builderStore.readOnlyMode) return;
-			builderStore.mode = "image";
-			return;
-		}
-
-		if (e.key === "t") {
-			if (builderStore.readOnlyMode) return;
-			builderStore.mode = "text";
-			return;
-		}
-
-		if (e.key === "v") {
-			builderStore.mode = "select";
-			return;
-		}
-
-		if (e.key === "h") {
-			builderStore.mode = "move";
-			return;
-		}
-	});
+			},
+		},
+		{
+			key: "0",
+			ctrl: true,
+			shift: true,
+			description: "Fit canvas to screen",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.setScaleAndTranslate();
+				}
+			},
+		},
+		{
+			key: "ArrowRight",
+			description: "Pan canvas right",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.moveCanvas("right");
+				}
+			},
+			condition: () => !blockController.isBlockSelected(),
+		},
+		{
+			key: "ArrowLeft",
+			description: "Pan canvas left",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.moveCanvas("left");
+				}
+			},
+			condition: () => !blockController.isBlockSelected(),
+		},
+		{
+			key: "ArrowUp",
+			description: "Pan canvas up",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.moveCanvas("up");
+				}
+			},
+			condition: () => !blockController.isBlockSelected(),
+		},
+		{
+			key: "ArrowDown",
+			description: "Pan canvas down",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.moveCanvas("down");
+				}
+			},
+			condition: () => !blockController.isBlockSelected(),
+		},
+		{
+			key: "=",
+			ctrl: true,
+			description: "Zoom in",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.zoomIn();
+				}
+			},
+		},
+		{
+			key: "-",
+			ctrl: true,
+			description: "Zoom out",
+			group: "Canvas",
+			handler: () => {
+				if (pageCanvas.value) {
+					pageCanvas.value.zoomOut();
+				}
+			},
+		},
+		{
+			key: "c",
+			description: "Container mode",
+			group: "Tools",
+			handler: () => {
+				if (builderStore.readOnlyMode) return;
+				builderStore.mode = "container";
+			},
+		},
+		{
+			key: "i",
+			description: "Image mode",
+			group: "Tools",
+			handler: () => {
+				if (builderStore.readOnlyMode) return;
+				builderStore.mode = "image";
+			},
+		},
+		{
+			key: "t",
+			description: "Text mode",
+			group: "Tools",
+			handler: () => {
+				if (builderStore.readOnlyMode) return;
+				builderStore.mode = "text";
+			},
+		},
+		{
+			key: "v",
+			description: "Select mode",
+			group: "Tools",
+			handler: () => {
+				builderStore.mode = "select";
+			},
+		},
+		{
+			key: "h",
+			description: "Move / hand mode",
+			group: "Tools",
+			handler: () => {
+				builderStore.mode = "move";
+			},
+		},
+	]);
 
 	// on tab activation, reload for latest data
 	useEventListener(document, "visibilitychange", () => {

From eeedfdbb128118f8f9bab1acd6b6dd9e4402928a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 10:14:01 +0530
Subject: [PATCH 421/547] fix: Only show shortcuts as active if it passes
 condition

---
 frontend/src/components/KeyboardShortcutsModal.vue | 2 +-
 frontend/src/utils/useShortcut.ts                  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/KeyboardShortcutsModal.vue b/frontend/src/components/KeyboardShortcutsModal.vue
index f03a42ce3..dc36708c5 100644
--- a/frontend/src/components/KeyboardShortcutsModal.vue
+++ b/frontend/src/components/KeyboardShortcutsModal.vue
@@ -81,7 +81,7 @@ function formatShortcutParts(config: {
 
 const groupedShortcuts = computed(() => {
 	const groups: Record<string, RegisteredShortcut[]> = {};
-	for (const shortcut of activeShortcuts) {
+	for (const shortcut of activeShortcuts.value) {
 		if (!groups[shortcut.group]) {
 			groups[shortcut.group] = [];
 		}
diff --git a/frontend/src/utils/useShortcut.ts b/frontend/src/utils/useShortcut.ts
index 94ebf33d0..8cc4a8a7c 100644
--- a/frontend/src/utils/useShortcut.ts
+++ b/frontend/src/utils/useShortcut.ts
@@ -1,5 +1,5 @@
 import { isCtrlOrCmd, isTargetEditable } from "@/utils/helpers";
-import { onActivated, onBeforeUnmount, onDeactivated, reactive, readonly } from "vue";
+import { computed, onActivated, onBeforeUnmount, onDeactivated, reactive, readonly } from "vue";
 
 export interface ShortcutConfig {
 	/** Shortcut key(s) to listen for (e.g. "s", "Escape", "ArrowUp") */
@@ -32,6 +32,7 @@ export interface RegisteredShortcut {
 	description: string;
 	group: string;
 	id: symbol;
+	condition?: () => boolean;
 }
 
 const activeShortcuts = reactive<RegisteredShortcut[]>([]);
@@ -145,6 +146,7 @@ export function useShortcut(shortcuts: ShortcutConfig | ShortcutConfig[]) {
 			description: config.description,
 			group: config.group ?? "General",
 			id,
+			condition: config.condition,
 		};
 
 		shortcutHandlers.set(id, config);
@@ -172,6 +174,7 @@ export function useShortcut(shortcuts: ShortcutConfig | ShortcutConfig[]) {
 					description: configs[i].description,
 					group: configs[i].group ?? "General",
 					id,
+					condition: configs[i].condition,
 				});
 			}
 		}
@@ -191,10 +194,10 @@ export function useShortcut(shortcuts: ShortcutConfig | ShortcutConfig[]) {
 }
 
 /**
- * Get all currently registered shortcuts (read-only). Useful outside of component setup.
+ * Get all currently registered shortcuts whose conditions are met (read-only).
  */
 export function getActiveShortcuts() {
-	return readonly(activeShortcuts);
+	return computed(() => activeShortcuts.filter((s) => !s.condition || s.condition()));
 }
 
 export { formatShortcutLabel };

From 64d072f65646d6c25390ac6856af0ac48b82f328 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 11:11:19 +0530
Subject: [PATCH 422/547] fix: add route_variables to get_block_data

---
 builder/builder/doctype/builder_page/builder_page.py | 4 +++-
 frontend/src/components/BuilderBlock.vue             | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 4767dc999..916d10ffa 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -491,7 +491,9 @@ def get_component(block):
 
 
 @frappe.whitelist()
-def get_block_data(block_id: str, block_data_script: str, props: str):
+def get_block_data(block_id: str, block_data_script: str, props: str, route_variables: dict | None = None):
+	if route_variables:
+			frappe.form_dict.update({k: v for k, v in route_variables.items()})
 	frappe.has_permission("Builder Page", "write", throw=True)
 	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 77e4b4b8c..0686e1cc0 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -461,6 +461,7 @@ watch(
 				block_id: uid,
 				block_data_script: props.block.getBlockDataScript(),
 				props: JSON.stringify(allResolvedProps.value),
+				route_variables: pageStore.routeVariables,
 			})
 			.then((res: any) => {
 				ownBlockData.value = res || {};

From 558ab0875f4997b97bbd18ea3fdf5a67ddbf71d7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 11:12:53 +0530
Subject: [PATCH 423/547] fix: Ignore view shortcuts if dialog is open

---
 frontend/src/utils/useShortcut.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/utils/useShortcut.ts b/frontend/src/utils/useShortcut.ts
index 8cc4a8a7c..c3a61e633 100644
--- a/frontend/src/utils/useShortcut.ts
+++ b/frontend/src/utils/useShortcut.ts
@@ -40,6 +40,10 @@ const shortcutHandlers = new Map<symbol, ShortcutConfig>();
 
 let listenerAttached = false;
 
+function isDialogOpen() {
+	return !!document.querySelector("[role='dialog']");
+}
+
 function attachGlobalListener() {
 	if (listenerAttached) return;
 	listenerAttached = true;
@@ -48,6 +52,8 @@ function attachGlobalListener() {
 }
 
 function globalKeydownHandler(e: KeyboardEvent) {
+	if (isDialogOpen()) return;
+
 	// Iterate through all registered shortcuts and find matching ones
 	for (const [id, config] of shortcutHandlers) {
 		if (!matchesShortcut(e, config)) continue;

From 07e1f0a97ef92368b726f40bef1a288f9e140d6a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 11:38:50 +0530
Subject: [PATCH 424/547] fix: add dependency for route vars for fetching block
 data

---
 frontend/src/components/BuilderBlock.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 0686e1cc0..3f3612498 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -448,6 +448,7 @@ watch(
 		() => props.blockData,
 		() => props.block.getBlockDataScript(),
 		() => pageStore.settingPage,
+		() => pageStore.routeVariables,
 	],
 	() => {
 		if (pageStore.settingPage || props.repeaterIndex) return;

From bca1885a12dfbe2855dfa2fb559bfc72f20ff551 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 11:39:20 +0530
Subject: [PATCH 425/547] fix: formatting for builder_page.py

---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 916d10ffa..489b58f7e 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -493,7 +493,7 @@ def get_component(block):
 @frappe.whitelist()
 def get_block_data(block_id: str, block_data_script: str, props: str, route_variables: dict | None = None):
 	if route_variables:
-			frappe.form_dict.update({k: v for k, v in route_variables.items()})
+		frappe.form_dict.update({k: v for k, v in route_variables.items()})
 	frappe.has_permission("Builder Page", "write", throw=True)
 	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()

From deb50676cab53b22b3d8763363f82ebdf15e8d9f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 12:10:51 +0530
Subject: [PATCH 426/547] fix: Improve styling of keyboard shortcuts display

---
 .../src/components/KeyboardShortcutsModal.vue    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/KeyboardShortcutsModal.vue b/frontend/src/components/KeyboardShortcutsModal.vue
index dc36708c5..e82bf7542 100644
--- a/frontend/src/components/KeyboardShortcutsModal.vue
+++ b/frontend/src/components/KeyboardShortcutsModal.vue
@@ -10,22 +10,24 @@
 				<div
 					v-for="(shortcuts, group) in groupedShortcuts"
 					:key="group"
-					class="mb-4 break-inside-avoid last:mb-0">
-					<h3 class="mb-1 text-xs font-semibold uppercase tracking-wider text-ink-gray-9">
+					class="mb-7 break-inside-avoid last:mb-0">
+					<h3 class="mb-2 text-base font-medium tracking-wider text-ink-gray-8">
 						{{ group }}
 					</h3>
 					<div class="flex flex-col">
 						<div
 							v-for="shortcut in shortcuts"
 							:key="shortcut.description"
-							class="flex items-center justify-between rounded py-1.5">
-							<span class="text-sm text-ink-gray-6">{{ shortcut.description }}</span>
-							<div class="flex items-center gap-0.5">
+							class="flex items-center justify-between rounded py-1">
+							<span class="text-base text-ink-gray-6">{{ shortcut.description }}</span>
+							<div class="flex items-center gap-1">
 								<kbd
 									v-for="(part, i) in formatShortcutParts(shortcut)"
 									:key="i"
-									class="inline-flex min-w-[22px] items-center justify-center rounded border border-outline-gray-2 bg-surface-gray-1 px-1.5 py-0.5 font-medium text-ink-gray-7"
-									:class="part.isSymbol ? 'text-base' : 'text-[11px]'">
+									class="inline-flex h-6 min-w-6 items-center justify-center rounded border bg-surface-gray-2 px-1.5 py-0.5 font-medium text-ink-gray-7"
+									:class="{
+										'text-xs': !part.isSymbol,
+									}">
 									{{ part.label }}
 								</kbd>
 							</div>

From 5a5205f7675f24abab489e1b66bb93dc34d66b2b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 12:18:17 +0530
Subject: [PATCH 427/547] fix: Add Shortcuts option to MainMenu

---
 frontend/src/components/BuilderToolbar.vue | 5 +++--
 frontend/src/components/MainMenu.vue       | 3 ++-
 frontend/src/pages/PageBuilder.vue         | 6 ++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 7e60c4821..7b30c6f07 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -3,7 +3,7 @@
 		class="toolbar border-outline border-outline flex items-center justify-center border-b-[1px] border-outline-gray-1 bg-surface-white px-2 py-1"
 		ref="toolbar">
 		<div class="absolute left-3 flex items-center gap-5">
-			<MainMenu @showSettings="() => (showSettingsDialog = true)"></MainMenu>
+			<MainMenu @showSettings="() => (showSettingsDialog = true)" @showShortcuts="showShortcuts"></MainMenu>
 			<div class="flex gap-2">
 				<Tooltip
 					:text="mode.description"
@@ -157,7 +157,7 @@ import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getTextContent } from "@/utils/helpers";
 import { useDark, useToggle } from "@vueuse/core";
 import { Badge, Popover, Tooltip } from "frappe-ui";
-import { computed, defineAsyncComponent, ref } from "vue";
+import { computed, defineAsyncComponent, inject, ref } from "vue";
 import { toast } from "vue-sonner";
 import MainMenu from "./MainMenu.vue";
 import PageOptions from "./PageOptions.vue";
@@ -174,6 +174,7 @@ const pageStore = usePageStore();
 
 const showInfoDialog = ref(false);
 const showSettingsDialog = ref(false);
+const showShortcuts = inject<() => void>("showShortcuts", () => {});
 
 const currentlyViewedByText = computed(() => {
 	const names = builderStore.viewers.map((viewer) => viewer.fullname).map((name) => name.split(" ")[0]);
diff --git a/frontend/src/components/MainMenu.vue b/frontend/src/components/MainMenu.vue
index 5b5ca14ef..0d87783c3 100644
--- a/frontend/src/components/MainMenu.vue
+++ b/frontend/src/components/MainMenu.vue
@@ -27,7 +27,7 @@ const router = useRouter();
 const toggleDark = useToggle(isDark);
 const canvasStore = useCanvasStore();
 
-const emit = defineEmits(["showSettings"]);
+const emit = defineEmits(["showSettings", "showShortcuts"]);
 
 const handleCopyPage = () => {
 	if (!pageStore.activePage) return;
@@ -85,6 +85,7 @@ const mainMenuOptions = [
 				icon: isDark ? "sun" : "moon",
 			},
 			{ label: "Settings", onClick: () => emit("showSettings"), icon: "settings" },
+			{ label: "Shortcuts", onClick: () => emit("showShortcuts"), icon: "command" },
 			{
 				label: "Help",
 				onClick: () => {
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index 16b1b123d..f30cd35bc 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -170,6 +170,12 @@ useBuilderEvents(pageCanvas, fragmentCanvas, saveAndExitFragmentMode, route, rou
 
 const shortcutsModal = ref<InstanceType<typeof KeyboardShortcutsModal> | null>(null);
 
+provide("showShortcuts", () => {
+	if (shortcutsModal.value) {
+		shortcutsModal.value.showDialog = true;
+	}
+});
+
 useShortcut([
 	{
 		key: " ",

From 65a186bff55f3e702c6136821180db15d6b5849f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 12:37:42 +0530
Subject: [PATCH 428/547] fix: Update shortcut description

---
 frontend/src/utils/useBuilderEvents.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 2e7c18dac..6147ac590 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -248,7 +248,7 @@ export function useBuilderEvents(
 		{
 			key: "p",
 			ctrl: true,
-			description: "Save & preview",
+			description: "Preview",
 			group: "General",
 			handler: () => {
 				pageStore.savePage();

From 90d458ac39d1d25d922cad4fe896cd917dc3d85b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 11:32:23 +0530
Subject: [PATCH 429/547] fix: update block data handling to use unique
 identifiers

---
 frontend/src/components/BuilderBlock.vue    | 43 ++++++++++++++-------
 frontend/src/components/DataLoaderBlock.vue | 13 ++++++-
 frontend/src/stores/blockDataStore.ts       | 30 +++++++-------
 3 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 77e4b4b8c..f8d1a5955 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -3,7 +3,7 @@
 		:is="getComponentName(block)"
 		:selected="isSelected"
 		:data-block-id="block.blockId"
-		:data-block-uid="uid"
+		:data-block-uid="uidToUse"
 		:data-breakpoint="breakpoint"
 		:draggable="draggable"
 		:class="classes"
@@ -21,6 +21,7 @@
 			:readonly="readonly"
 			:isChildOfComponent="block.isExtendedFromComponent() || isChildOfComponent"
 			:key="child.blockId"
+			:repeater-index="repeaterIndex"
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
 	</component>
 	<teleport to="#overlay" v-if="canvasProps?.overlayElement && !preview && Boolean(canvasProps)">
@@ -117,7 +118,12 @@ const isHovered = ref(false);
 const isSelected = ref(false);
 const ownBlockData = ref<Record<string, any>>({});
 
-const uid = `builder-block-${props.block.blockId}-${Math.random().toString(36).substr(2, 9)}`;
+// For repeater items the same Block object is used but Block Data can vary with each item
+// So we need unique identifier for block data store
+// Thus we use blockId for the first index and then generate new IDs for the next items
+const uidToUse = !!props.repeaterIndex
+	? `builder-block-${props.block.blockId}-${Math.random().toString(36).substr(2, 9)}}`
+	: props.block.blockId;
 
 const getComponentName = (block: Block) => {
 	if (block.isRepeater()) {
@@ -197,6 +203,8 @@ const attributes = computed(() => {
 		props.block.isRepeater()
 	) {
 		attribs.block = props.block;
+		attribs.uid = uidToUse;
+		attribs.repeaterIndex = props.repeaterIndex;
 		attribs.preview = props.preview;
 		attribs.breakpoint = props.breakpoint;
 		attribs.data = props.data;
@@ -423,9 +431,17 @@ watch(
 		if (pageStore.settingPage || !props.block.getBlockClientScript().trim()) return;
 		if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
 			if (builderSettings.doc?.execute_block_scripts_in_editor === "Restricted")
-				executeBlockClientScriptRestricted(uid, props.block.getBlockClientScript(), allResolvedProps.value);
+				executeBlockClientScriptRestricted(
+					uidToUse,
+					props.block.getBlockClientScript(),
+					allResolvedProps.value,
+				);
 			else
-				executeBlockClientScriptUnrestricted(uid, props.block.getBlockClientScript(), allResolvedProps.value);
+				executeBlockClientScriptUnrestricted(
+					uidToUse,
+					props.block.getBlockClientScript(),
+					allResolvedProps.value,
+				);
 		}
 	},
 	{ deep: true },
@@ -434,9 +450,8 @@ watch(
 watch(
 	[component, () => props.blockData, () => props.data],
 	() => {
-		if (props.repeaterIndex) return;
-		blockDataStore.setPageData(props.block.blockId, props.data || {});
-		blockDataStore.setBlockData(props.block.blockId, props.blockData || {}, "passedDown");
+		blockDataStore.setPageData(uidToUse, props.data || {});
+		blockDataStore.setBlockData(uidToUse, props.blockData || {}, "passedDown");
 	},
 	{ immediate: true, deep: true },
 );
@@ -450,21 +465,21 @@ watch(
 		() => pageStore.settingPage,
 	],
 	() => {
-		if (pageStore.settingPage || props.repeaterIndex) return;
+		if (pageStore.settingPage) return;
 		if (props.block.getBlockDataScript().trim() === "") {
 			ownBlockData.value = {};
-			blockDataStore.setBlockData(props.block.blockId, {}, "own");
+			blockDataStore.setBlockData(uidToUse, {}, "own");
 			return;
 		}
 		fetchBlockData
 			.fetch({
-				block_id: uid,
+				block_id: uidToUse,
 				block_data_script: props.block.getBlockDataScript(),
 				props: JSON.stringify(allResolvedProps.value),
 			})
 			.then((res: any) => {
 				ownBlockData.value = res || {};
-				blockDataStore.setBlockData(props.block.blockId, res || {}, "own");
+				blockDataStore.setBlockData(uidToUse, res || {}, "own");
 			})
 			.catch((e: { exc: string | null }) => {
 				const error_message = e.exc?.split("\n").slice(-2)[0];
@@ -535,10 +550,8 @@ if (!props.preview) {
 }
 
 onUnmounted(() => {
-	if (props.repeaterIndex) {
-		blockDataStore.clearBlockData(props.block.blockId);
-		blockDataStore.clearPageData(props.block.blockId);
-	}
+	blockDataStore.clearBlockData(uidToUse);
+	blockDataStore.clearPageData(uidToUse);
 });
 
 // Note: All the block event listeners are delegated to parent for better scalability
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index 817560394..acbe76123 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -15,7 +15,7 @@
 			:readonly="readonly"
 			:breakpoint="breakpoint"
 			:isChildOfComponent="block.isExtendedFromComponent()"
-			:repeater-index="index"
+			:repeater-index="getRepeaterIndex(index)"
 			v-for="(_data, index) in blockRepeaterData" />
 	</div>
 </template>
@@ -35,6 +35,8 @@ const blockDataStore = useBlockDataStore();
 const props = withDefaults(
 	defineProps<{
 		block: Block;
+		uid?: string;
+		repeaterIndex?: string | number | null;
 		preview?: boolean;
 		breakpoint?: string;
 		data?: Record<string, any> | null;
@@ -56,7 +58,7 @@ const repeatingFrom = computed(() => {
 
 const blockRepeaterData = computed(() => {
 	const pageData = props.data || pageStore.pageData;
-	const blockData = blockDataStore.getBlockData(props.block.blockId) || {};
+	const blockData = blockDataStore.getBlockData(props.uid || props.block.blockId) || {};
 	const key = props.block.getDataKey("key");
 	if (pageData && repeatingFrom.value === "dataScript" && key) {
 		const data = getDataForKey(pageData, key);
@@ -115,6 +117,13 @@ const blockRepeaterData = computed(() => {
 	}
 });
 
+const getRepeaterIndex = (index: number | string) => {
+	if (props.repeaterIndex !== undefined) {
+		return `${props.repeaterIndex}-${index}`;
+	}
+	return `${index}`;
+};
+
 defineExpose({
 	component,
 });
diff --git a/frontend/src/stores/blockDataStore.ts b/frontend/src/stores/blockDataStore.ts
index 5cf6fe955..2587823fe 100644
--- a/frontend/src/stores/blockDataStore.ts
+++ b/frontend/src/stores/blockDataStore.ts
@@ -8,27 +8,27 @@ const useBlockDataStore = defineStore("blockDataStore", {
 		pageDataMapping: <Record<string, any>>{},
 	}),
 	actions: {
-		setPageData(pageId: string, pageData: any) {
-			this.pageDataMapping[pageId] = pageData;
+		setPageData(blockUid: string, pageData: any) {
+			this.pageDataMapping[blockUid] = pageData;
 		},
-		getPageData(pageId: string): any {
-			return this.pageDataMapping[pageId];
+		getPageData(blockUid: string): any {
+			return this.pageDataMapping[blockUid];
 		},
-		clearPageData(pageId: string) {
-			delete this.pageDataMapping[pageId];
+		clearPageData(blockUid: string) {
+			delete this.pageDataMapping[blockUid];
 		},
-		setBlockData(blockId: string, blockData: BlockData, type: "own" | "passedDown" = "own") {
-			if(!this.blockDataMapping[blockId]) {
-                this.blockDataMapping[blockId] = { ownData: {}, passedDownData: {} };
+		setBlockData(blockUid: string, blockData: BlockData, type: "own" | "passedDown" = "own") {
+			if(!this.blockDataMapping[blockUid]) {
+                this.blockDataMapping[blockUid] = { ownData: {}, passedDownData: {} };
             }
 			if (type === "own") {
-				this.blockDataMapping[blockId].ownData = blockData;
+				this.blockDataMapping[blockUid].ownData = blockData;
 			} else {
-				this.blockDataMapping[blockId].passedDownData = blockData;
+				this.blockDataMapping[blockUid].passedDownData = blockData;
 			}
 		},
-		getBlockData(blockId: string, filter: "all" | "own" | "passedDown" = "all"): BlockData | null {
-			const blockData = this.blockDataMapping[blockId];
+		getBlockData(blockUid: string, filter: "all" | "own" | "passedDown" = "all"): BlockData | null {
+			const blockData = this.blockDataMapping[blockUid];
 			if (!blockData) {
 				return null;
 			}
@@ -39,8 +39,8 @@ const useBlockDataStore = defineStore("blockDataStore", {
 			}
 			return { ...blockData.ownData, ...blockData.passedDownData };
 		},
-		clearBlockData(blockId: string) {
-			delete this.blockDataMapping[blockId];
+		clearBlockData(blockUid: string) {
+			delete this.blockDataMapping[blockUid];
 		},
 	},
 });

From 83c9cdbb4477e150ea7e2646cdffc174d7330d40 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 13:02:18 +0530
Subject: [PATCH 430/547] fix: Prevent event propagation on mousedown for block
 movement

This used to conflict with canvas move
---
 frontend/src/components/BlockEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index be507cd05..14a1e0e4e 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -5,7 +5,7 @@
 		:selected="isBlockSelected"
 		@click.stop="handleClick"
 		@dblclick="handleDoubleClick"
-		@mousedown.prevent="handleMove"
+		@mousedown.prevent.stop="handleMove"
 		@drop.prevent.stop="handleDrop"
 		:data-block-id="block.blockId"
 		:class="getStyleClasses">

From bcc44b08b71d7da87c03fb26949fd14583b408a4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 13:21:12 +0530
Subject: [PATCH 431/547] fix: handle None case for dynamicValues in
 extend_block function

---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 4767dc999..78c1e6644 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -1169,7 +1169,7 @@ def extend_block(block, overridden_block):
 	block["tabletStyles"].update(overridden_block["tabletStyles"])
 	block["attributes"].update(overridden_block["attributes"])
 
-	dynamicValues = overridden_block.get("dynamicValues", [])
+	dynamicValues = overridden_block.get("dynamicValues") or []
 	dynamicValuesProperties = [dv.get("property") for dv in dynamicValues]
 	for dv in block.get("dynamicValues", []) or []:
 		if dv.get("property") in dynamicValuesProperties:

From d59164ab500805341eecf3f7121019e71a717855 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 12 Mar 2026 13:36:38 +0530
Subject: [PATCH 432/547] fix: Update paragraph styling in GlobalDeveloper
 component

---
 frontend/src/components/Settings/GlobalDeveloper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index bd031b846..96c3d68a9 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -27,7 +27,7 @@
 				}
 			" />
 		<div class="flex flex-col gap-2">
-			<p class="text-sm font-medium text-ink-gray-9">
+			<p class="text-p-sm text-ink-gray-7">
 				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not
 				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
 			</p>

From de203af99d8305f7cc582eabda3fb6bf4c17d60a Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 22:35:34 +0530
Subject: [PATCH 433/547] fix: proper repeater index calculation

this new method ensures all first items have 0 index and thus properly store block data using blockId.
---
 frontend/src/components/DataLoaderBlock.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index acbe76123..efaa17625 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -119,9 +119,12 @@ const blockRepeaterData = computed(() => {
 
 const getRepeaterIndex = (index: number | string) => {
 	if (props.repeaterIndex !== undefined) {
-		return `${props.repeaterIndex}-${index}`;
+		const parsedPropIndex =
+			typeof props.repeaterIndex === "string" ? parseInt(props.repeaterIndex, 10) : props.repeaterIndex;
+		const parsedIndex = typeof index === "string" ? parseInt(index, 10) : index;
+		return (parsedPropIndex || 0) * 10 + parsedIndex;
 	}
-	return `${index}`;
+	return index;
 };
 
 defineExpose({

From 70a3cdf6482b2d99d3b0073abb07243145b42d10 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 23:03:09 +0530
Subject: [PATCH 434/547] fix: remove Tooltip and use title attribute

---
 .../src/components/Controls/InlineInput.vue   | 47 +++++--------------
 .../src/components/Controls/PropertyLabel.vue | 41 ++++------------
 2 files changed, 22 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 54ec01d8d..a087d8924 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -1,18 +1,17 @@
 <template>
 	<div class="flex items-center justify-between [&>div>input]:!bg-red-600 [&>div>input]:pr-6">
-		<Tooltip :disabled="!label" :text="label" placement="bottom">
-			<InputLabel
-				v-if="label"
-				:class="{
-					'cursor-ns-resize': enableSlider,
-				}"
-				ref="labelRef"
-				class="w-[88px] shrink-0 truncate"
-				:description="description"
-				@mousedown="handleMouseDown">
-				{{ label }}
-			</InputLabel>
-		</Tooltip>
+		<InputLabel
+			v-if="label"
+			:class="{
+				'cursor-ns-resize': enableSlider,
+			}"
+			ref="labelRef"
+			class="w-[88px] shrink-0 truncate"
+			:title="label"
+			:description="description"
+			@mousedown="handleMouseDown">
+			{{ label }}
+		</InputLabel>
 		<BuilderInput
 			class="w-full"
 			:type="type"
@@ -42,9 +41,6 @@ import { isNumber } from "@tiptap/vue-3";
 import { computed } from "vue";
 import Autocomplete from "./Autocomplete.vue";
 import InputLabel from "./InputLabel.vue";
-import { ref, onMounted, nextTick } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-import { Tooltip } from "frappe-ui";
 
 type Action = {
 	label: string;
@@ -87,9 +83,6 @@ const props = withDefaults(
 	},
 );
 
-const labelRef = ref<InstanceType<typeof InputLabel> | null>(null);
-const isTruncated = ref(false);
-
 const emit = defineEmits(["update:modelValue"]);
 
 type Option = {
@@ -166,20 +159,4 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 	handleChange(newValue + "" + unit);
 };
 
-onMounted(async () => {
-	await nextTick();
-	checkTruncation();
-});
-
-useResizeObserver(labelRef, () => {
-	checkTruncation();
-});
-
-function checkTruncation() {
-	if (!labelRef.value) return;
-	const el = labelRef.value.$el as HTMLElement;
-	if (!el) return;
-
-	isTruncated.value = el.scrollWidth > el.clientWidth;
-}
 </script>
diff --git a/frontend/src/components/Controls/PropertyLabel.vue b/frontend/src/components/Controls/PropertyLabel.vue
index dd5542f41..3f84bf623 100644
--- a/frontend/src/components/Controls/PropertyLabel.vue
+++ b/frontend/src/components/Controls/PropertyLabel.vue
@@ -9,23 +9,21 @@
 					@click="open" />
 			</template>
 		</Dropdown>
-		<Tooltip :disabled="!isTruncated" :text="label" placement="bottom">
-			<InputLabel
-				ref="labelRef"
-				class="truncate"
-				:class="{ 'cursor-ns-resize': enableSlider }"
-				@mousedown="$emit('mousedown', $event)">
-				{{ label }}
-			</InputLabel>
-		</Tooltip>
+		<InputLabel
+			ref="labelRef"
+			class="truncate"
+			:title="label"
+			:class="{ 'cursor-ns-resize': enableSlider }"
+			@mousedown="$emit('mousedown', $event)">
+			{{ label }}
+		</InputLabel>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import InputLabel from "@/components/Controls/InputLabel.vue";
-import { useResizeObserver } from "@vueuse/core";
-import { Dropdown, FeatherIcon, Tooltip } from "frappe-ui";
-import { ref, onMounted, nextTick } from "vue";
+import { Dropdown, FeatherIcon } from "frappe-ui";
+import { ref } from "vue";
 
 const props = defineProps<{
 	label: string;
@@ -40,25 +38,6 @@ defineEmits<{
 }>();
 
 const dropdownTrigger = ref<typeof FeatherIcon | null>(null);
-const labelRef = ref<InstanceType<typeof InputLabel> | null>(null);
-const isTruncated = ref(false);
-
-function checkTruncation() {
-	if (!labelRef.value) return;
-	const el = labelRef.value.$el as HTMLElement;
-	if (!el) return;
-
-	isTruncated.value = el.scrollWidth > el.clientWidth;
-}
-
-onMounted(async () => {
-	await nextTick();
-	checkTruncation();
-});
-
-useResizeObserver(labelRef, () => {
-	checkTruncation();
-});
 
 defineExpose({ dropdownTrigger });
 </script>

From 0fbfe1cae20ad5d85d6b1a9d9905e49cdf14b38e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 12 Mar 2026 23:07:20 +0530
Subject: [PATCH 435/547] fix: remove unnecessary ref attribute

---
 frontend/src/components/Controls/InlineInput.vue   | 1 -
 frontend/src/components/Controls/PropertyLabel.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index a087d8924..166b78f26 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -5,7 +5,6 @@
 			:class="{
 				'cursor-ns-resize': enableSlider,
 			}"
-			ref="labelRef"
 			class="w-[88px] shrink-0 truncate"
 			:title="label"
 			:description="description"
diff --git a/frontend/src/components/Controls/PropertyLabel.vue b/frontend/src/components/Controls/PropertyLabel.vue
index 3f84bf623..21fe3a165 100644
--- a/frontend/src/components/Controls/PropertyLabel.vue
+++ b/frontend/src/components/Controls/PropertyLabel.vue
@@ -10,7 +10,6 @@
 			</template>
 		</Dropdown>
 		<InputLabel
-			ref="labelRef"
 			class="truncate"
 			:title="label"
 			:class="{ 'cursor-ns-resize': enableSlider }"

From 039d913fd2e4b9dd6e72e0c9946cfcc3d477bbf4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 05:49:05 +0530
Subject: [PATCH 436/547] fix: Handle case where classes is passed as string

---
 builder/builder/doctype/builder_page/builder_page.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 78c1e6644..41d1983f6 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -734,7 +734,11 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 def build_tag_classes(block: dict, state: dict) -> list[str]:
 	"""Build list of CSS classes for the tag."""
-	classes = block.get("classes", []).copy()
+	classes = block.get("classes", [])
+	if isinstance(classes, str):
+		classes = [c.strip() for c in classes.split(",") if c.strip()]
+	else:
+		classes = classes.copy()
 	element = block.get("originalElement") or block.get("element")
 
 	text_elements = {"span", "h1", "p", "b", "h2", "h3", "h4", "h5", "h6", "label", "a"}

From 6a08a11eb39959e07e091463fda1f4abe544ea22 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 05:53:10 +0530
Subject: [PATCH 437/547] feat: Interface to make granular adjustments in
 shadow

---
 frontend/components.d.ts                      |   1 +
 .../BlockPropertySections/OptionsSection.ts   |   3 +-
 .../BlockPropertySections/StyleSection.ts     |  26 +-
 .../src/components/Controls/InputLabel.vue    |   3 +-
 .../src/components/Controls/OptionToggle.vue  |   2 +-
 frontend/src/components/ShadowHandler.vue     | 278 ++++++++++++++++++
 6 files changed, 287 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/ShadowHandler.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 80276f733..2c6695280 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -131,6 +131,7 @@ declare module 'vue' {
     SelectOptions: typeof import('./src/components/PropsOptions/SelectOptions.vue')['default']
     Settings: typeof import('./src/components/Icons/Settings.vue')['default']
     SettingsGear: typeof import('./src/components/Icons/SettingsGear.vue')['default']
+    ShadowHandler: typeof import('./src/components/ShadowHandler.vue')['default']
     StrikeThrough: typeof import('./src/components/Icons/StrikeThrough.vue')['default']
     StringOptions: typeof import('./src/components/PropsOptions/StringOptions.vue')['default']
     StylePropertyControl: typeof import('./src/components/Controls/StylePropertyControl.vue')['default']
diff --git a/frontend/src/components/BlockPropertySections/OptionsSection.ts b/frontend/src/components/BlockPropertySections/OptionsSection.ts
index 62adc467d..b6b8fdbcc 100644
--- a/frontend/src/components/BlockPropertySections/OptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/OptionsSection.ts
@@ -1,6 +1,6 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
-import blockController from "@/utils/blockController";
 import VisibilityInput from "@/components/VisibilityInput.vue";
+import blockController from "@/utils/blockController";
 
 const setClasses = (val: string) => {
 	const classes = val.split(",").map((c) => c.trim());
@@ -27,6 +27,7 @@ const optionsSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Condition",
+				property: "visibilityCondition",
 				getModelValue: () => (blockController.getKeyValue("visibilityCondition") as BlockVisibilityCondition).key,
 				setModelValue: (val: BlockVisibilityCondition) => {
 					blockController.setKeyValue("visibilityCondition", val);
diff --git a/frontend/src/components/BlockPropertySections/StyleSection.ts b/frontend/src/components/BlockPropertySections/StyleSection.ts
index 1f1fbe3ac..8fe40487a 100644
--- a/frontend/src/components/BlockPropertySections/StyleSection.ts
+++ b/frontend/src/components/BlockPropertySections/StyleSection.ts
@@ -3,6 +3,7 @@ import ColorInput from "@/components/Controls/ColorInput.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import RangeInput from "../Controls/RangeInput.vue";
+import ShadowHandler from "@/components/ShadowHandler.vue";
 
 const overflowOptions = [
 	{
@@ -122,29 +123,8 @@ const styleSectionProperties = [
 		condition: () => blockController.getStyle("borderColor"),
 	},
 	{
-		component: StylePropertyControl,
-		getProps: () => {
-			return {
-				label: "Shadow",
-				propertyKey: "boxShadow",
-				type: "select",
-				options: [
-					{ value: null, label: "None" },
-					{
-						label: "Small",
-						value: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px",
-					},
-					{
-						label: "Medium",
-						value: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px",
-					},
-					{
-						label: "Large",
-						value: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px",
-					},
-				],
-			};
-		},
+		component: ShadowHandler,
+		getProps: () => {},
 		searchKeyWords: "Shadow, BoxShadow, Box Shadow",
 	},
 	{
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index c301e84a9..0eb14d124 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,5 +1,6 @@
 <template>
-	<span class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
+	<span
+		class="inline-flex w-[88px] min-w-20 max-w-40 shrink-0 items-center text-xs leading-5 text-ink-gray-6">
 		<slot />
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
diff --git a/frontend/src/components/Controls/OptionToggle.vue b/frontend/src/components/Controls/OptionToggle.vue
index c30a50179..30d7aab0a 100644
--- a/frontend/src/components/Controls/OptionToggle.vue
+++ b/frontend/src/components/Controls/OptionToggle.vue
@@ -16,7 +16,7 @@ import TabButtons from "@/components/Controls/TabButtons.vue";
 withDefaults(
 	defineProps<{
 		modelValue?: string | number | boolean;
-		options?: { label: string; value: string | number; icon?: string; hideLabel?: boolean }[];
+		options?: { label: string; value: string | number | boolean; icon?: string; hideLabel?: boolean }[];
 		label?: string;
 		defaultValue?: string | number;
 	}>(),
diff --git a/frontend/src/components/ShadowHandler.vue b/frontend/src/components/ShadowHandler.vue
new file mode 100644
index 000000000..b2655f3aa
--- /dev/null
+++ b/frontend/src/components/ShadowHandler.vue
@@ -0,0 +1,278 @@
+<template>
+	<Popover placement="left" class="!block w-full" :offset="25">
+		<template #target="{ togglePopover }">
+			<div class="flex w-full items-center justify-between">
+				<StylePropertyControl
+					propertyKey="boxShadow"
+					:component="Input"
+					label="Shadow"
+					:enableStates="true"
+					:allowDynamicValue="true"
+					placeholder="None"
+					@focus="togglePopover"
+					:modelValue="boxShadow"
+					@update:modelValue="setBoxShadow">
+					<template #prefix>
+						<div
+							class="absolute left-2 top-[6px] size-4 cursor-pointer rounded border border-outline-gray-1 shadow-sm"
+							@click="togglePopover"
+							:style="{
+								backgroundColor: shadowConfigs[0]?.color ?? 'transparent',
+							}" />
+					</template>
+				</StylePropertyControl>
+			</div>
+		</template>
+		<template #body>
+			<div
+				class="max-h-[80vh] w-72 select-none space-y-2 overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
+				<InlineInput
+					label="Preset"
+					type="select"
+					:modelValue="currentPreset"
+					:options="presetOptions"
+					@update:modelValue="applyPreset" />
+
+				<div class="bg-outline-gray-2 my-2 h-px w-full" />
+
+				<div
+					v-for="(shadow, index) in shadowConfigs"
+					:key="index"
+					class="mb-3 space-y-2 border-b border-outline-gray-2 pb-3 last:mb-0 last:border-b-0 last:pb-0">
+					<div class="flex items-center justify-between">
+						<span class="text-xs font-medium text-ink-gray-5">Layer {{ index + 1 }}</span>
+						<Button
+							icon="trash-2"
+							variant="ghost"
+							class="!h-6 !w-6 !p-1 text-ink-gray-5 hover:text-ink-red-3"
+							@click="removeShadow(index)"></Button>
+					</div>
+
+					<InlineInput
+						label="X Offset"
+						:modelValue="shadow.x"
+						:unitOptions="['px']"
+						:enableSlider="true"
+						@update:modelValue="(val: any) => updateShadow(index, 'x', val)" />
+					<InlineInput
+						label="Y Offset"
+						:modelValue="shadow.y"
+						:unitOptions="['px']"
+						:enableSlider="true"
+						@update:modelValue="(val: any) => updateShadow(index, 'y', val)" />
+					<InlineInput
+						label="Blur"
+						:modelValue="shadow.blur"
+						:unitOptions="['px']"
+						:minValue="0"
+						:enableSlider="true"
+						@update:modelValue="(val: any) => updateShadow(index, 'blur', val)" />
+					<InlineInput
+						label="Spread"
+						:modelValue="shadow.spread"
+						:unitOptions="['px']"
+						:enableSlider="true"
+						@update:modelValue="(val: any) => updateShadow(index, 'spread', val)" />
+
+					<ColorInput
+						label="Color"
+						:modelValue="shadow.color"
+						@update:modelValue="(val: any) => updateShadow(index, 'color', val)" />
+
+					<div class="flex items-center justify-between">
+						<InputLabel>Type</InputLabel>
+						<OptionToggle
+							class="[&>div]:min-w-[auto]"
+							:modelValue="shadow.inset"
+							:options="[
+								{ label: 'Inset', value: true },
+								{ label: 'Outset', value: false },
+							]"
+							@update:modelValue="(val: any) => updateShadow(index, 'inset', val)" />
+					</div>
+				</div>
+
+				<div v-if="shadowConfigs.length > 0" class="bg-outline-gray-2 my-2 h-px w-full" />
+
+				<Button class="w-full" variant="ghost" @click="addShadow">+ Add Shadow Layer</Button>
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script lang="ts" setup>
+import ColorInput from "@/components/Controls/ColorInput.vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
+import Input from "@/components/Controls/Input.vue";
+import OptionToggle from "@/components/Controls/OptionToggle.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import blockController from "@/utils/blockController";
+import { Popover } from "frappe-ui";
+import { computed, reactive, watch } from "vue";
+
+const boxShadow = computed(() => blockController.getStyle("boxShadow") as string);
+
+const presetOptions = [
+	{ label: "None", value: "none" },
+	{
+		label: "Small",
+		value: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px",
+	},
+	{
+		label: "Medium",
+		value: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px",
+	},
+	{
+		label: "Large",
+		value: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px",
+	},
+	{ label: "Custom", value: "custom" },
+];
+
+const currentPreset = computed(() => {
+	const val = boxShadow.value;
+	if (!val || val === "none") return "none";
+	const match = presetOptions.find((p) => p.value === val);
+	return match ? match.value : "custom";
+});
+
+const applyPreset = (val: string) => {
+	if (val === "custom") return;
+	if (val === "none") {
+		clearShadow();
+	} else {
+		setBoxShadow(val);
+	}
+};
+
+interface ShadowConfig {
+	x: string;
+	y: string;
+	blur: string;
+	spread: string;
+	color: any;
+	inset: boolean;
+}
+
+const shadowConfigs = reactive<ShadowConfig[]>([]);
+
+// Split shadows by comma but ignore commas inside parentheses (like in rgba)
+const splitShadows = (value: string): string[] => {
+	if (!value || value === "none") return [];
+	const result: string[] = [];
+	let current = "";
+	let inParens = 0;
+
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") inParens++;
+		if (char === ")") inParens--;
+		if (char === "," && inParens === 0) {
+			result.push(current.trim());
+			current = "";
+		} else {
+			current += char;
+		}
+	}
+	if (current.trim()) result.push(current.trim());
+
+	return result;
+};
+
+// Parser for multiple box-shadows
+const parseBoxShadows = (value: string): ShadowConfig[] => {
+	if (!value || value === "none") return [];
+
+	const shadows = splitShadows(value);
+	return shadows.map((shadow) => {
+		const config: ShadowConfig = {
+			x: "0px",
+			y: "0px",
+			blur: "0px",
+			spread: "0px",
+			color: "rgba(0,0,0,0.5)",
+			inset: false,
+		};
+
+		config.inset = shadow.includes("inset");
+		let cleaned = shadow.replace("inset", "").trim();
+
+		const parts = cleaned.split(/\s+(?![^(]*\))/);
+
+		// Find the color part (simplification: part that is not a numeric value with unit)
+		const colorPart = parts.find(
+			(p) => !/^[-+]?\d*\.?\d+(px|em|rem|%|vh|vw|pt|pc|in|cm|mm|ex|ch|vmin|vmax)$/.test(p) && p !== "0",
+		);
+
+		if (colorPart) {
+			config.color = colorPart;
+			cleaned = cleaned.replace(colorPart, "").trim();
+		}
+
+		const numericParts = cleaned.split(/\s+/).filter(Boolean);
+		config.x = numericParts[0] || "0px";
+		config.y = numericParts[1] || "0px";
+		config.blur = numericParts[2] || "0px";
+		config.spread = numericParts[3] || "0px";
+
+		return config;
+	});
+};
+
+watch(
+	boxShadow,
+	(newVal) => {
+		if (newVal) {
+			const parsed = parseBoxShadows(newVal);
+			shadowConfigs.splice(0, shadowConfigs.length, ...parsed);
+		} else {
+			shadowConfigs.splice(0, shadowConfigs.length);
+		}
+	},
+	{ immediate: true },
+);
+
+const updateShadow = <K extends keyof ShadowConfig>(index: number, key: K, value: ShadowConfig[K]) => {
+	shadowConfigs[index][key] = value;
+	applyShadow();
+};
+
+const addShadow = () => {
+	shadowConfigs.push({
+		x: "0px",
+		y: "4px",
+		blur: "6px",
+		spread: "-1px",
+		color: "rgba(0, 0, 0, 0.1)",
+		inset: false,
+	});
+	applyShadow();
+};
+
+const removeShadow = (index: number) => {
+	shadowConfigs.splice(index, 1);
+	applyShadow();
+};
+
+const applyShadow = () => {
+	if (shadowConfigs.length === 0) {
+		clearShadow();
+		return;
+	}
+	const shadowStr = shadowConfigs
+		.map((conf) => {
+			const { x, y, blur, spread, color, inset } = conf;
+			return `${inset ? "inset " : ""}${x} ${y} ${blur} ${spread} ${color}`.trim();
+		})
+		.join(", ");
+	blockController.setStyle("boxShadow", shadowStr);
+};
+
+const setBoxShadow = (val: string) => {
+	blockController.setStyle("boxShadow", val);
+};
+
+const clearShadow = () => {
+	blockController.setStyle("boxShadow", null);
+};
+</script>

From 6d917386dafe16299d47f3103c3f7761ddf7bcb6 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 14:10:50 +0530
Subject: [PATCH 438/547] feat: Gradient handler

---
 frontend/components.d.ts                      |   2 +
 frontend/src/components/BackgroundHandler.vue | 370 +++++++++++++-----
 .../src/components/Controls/AnglePicker.vue   |  62 +++
 .../Controls/BasePropertyControl.vue          |  16 +-
 .../src/components/Controls/ColorPicker.vue   |  14 +-
 .../components/Controls/GradientEditor.vue    | 277 +++++++++++++
 .../Controls/StylePropertyControl.vue         |  11 +-
 .../components/Controls/VariantControl.vue    |  11 +-
 frontend/src/utils/gradientUtils.ts           |  93 +++++
 9 files changed, 741 insertions(+), 115 deletions(-)
 create mode 100644 frontend/src/components/Controls/AnglePicker.vue
 create mode 100644 frontend/src/components/Controls/GradientEditor.vue
 create mode 100644 frontend/src/utils/gradientUtils.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 80276f733..823a3c8f0 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     AlertDialog: typeof import('./src/components/AlertDialog.vue')['default']
     AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
+    AnglePicker: typeof import('./src/components/Controls/AnglePicker.vue')['default']
     ArrayEditor: typeof import('./src/components/ArrayEditor.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArrayOptions: typeof import('./src/components/PropsOptions/ArrayOptions.vue')['default']
@@ -77,6 +78,7 @@ declare module 'vue' {
     GlobalMeta: typeof import('./src/components/Settings/GlobalMeta.vue')['default']
     GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
     Globe: typeof import('./src/components/Icons/Globe.vue')['default']
+    GradientEditor: typeof import('./src/components/Controls/GradientEditor.vue')['default']
     GripVertical: typeof import('./src/components/Icons/GripVertical.vue')['default']
     ImageOptions: typeof import('./src/components/PropsOptions/ImageOptions.vue')['default']
     ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 816c0691d..e8860d90d 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -1,112 +1,230 @@
 <template>
 	<Popover placement="left" class="!block w-full" :offset="25">
 		<template #target="{ togglePopover }">
-			<div class="flex w-full items-center justify-between">
+			<div class="flex w-full items-center justify-between" @focusin="updateActiveState">
 				<StylePropertyControl
 					propertyKey="backgroundImage"
 					:component="Input"
-					label="BG Image"
-					:enableStates="false"
+					label="Background"
+					:enableStates="true"
 					:allowDynamicValue="true"
 					placeholder="Set Background"
 					@focus="togglePopover"
-					:modelValue="backgroundImage"
+					:getModelValue="() => getDisplayValue(null)"
+					:getVariantValue="(v: string) => getDisplayValue(v)"
+					:setVariantValue="handleSetVariant"
 					@update:modelValue="setBGImageURL">
-					<template #prefix>
+					<template #prefix="{ variant }">
 						<div
 							class="absolute left-2 top-[6px] size-4 cursor-pointer rounded shadow-md"
-							@click="togglePopover"
-							:class="{ 'bg-surface-gray-4': !Boolean(backgroundImage) }"
-							:style="previewStyle" />
+							@click="
+								() => {
+									activeState = variant;
+									togglePopover();
+								}
+							"
+							:class="{ 'bg-surface-gray-4': !getHasBackground(variant) }"
+							:style="getPreviewStyle(variant)" />
 					</template>
 				</StylePropertyControl>
 			</div>
 		</template>
 		<template #body>
-			<div class="rounded-lg bg-surface-white p-3 shadow-lg">
-				<div
-					class="image-preview group relative h-24 w-48 cursor-pointer overflow-hidden rounded bg-surface-gray-3"
-					:style="previewStyle">
-					<FileUploader
-						@success="setBGImage"
-						:uploadArgs="{
-							private: false,
-							folder: 'Home/Builder Uploads',
-							optimize: true,
-							upload_endpoint: '/api/method/builder.api.upload_builder_asset',
-						}">
-						<template v-slot="{ openFileSelector }">
-							<div
-								class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-gray-500 bg-opacity-20"
-								:class="{
-									'!grid': !backgroundImage,
-									'group-hover:grid': backgroundImage,
-								}">
-								<BuilderButton @click="openFileSelector">Upload</BuilderButton>
-							</div>
-						</template>
-					</FileUploader>
+			<div
+				class="background-popover-body w-64 rounded-lg border border-outline-gray-2 bg-surface-white p-3 shadow-xl">
+				<TabButtons
+					:buttons="[
+						{ label: '', value: 'color', icon: 'droplet' },
+						{ label: '', value: 'image', icon: 'image' },
+						{ label: '', value: 'gradient', icon: 'aperture' },
+					]"
+					v-model="activeTab"
+					class="mb-3" />
+
+				<!-- Color Tab -->
+				<div v-if="activeTab === 'color'" class="w-full space-y-4">
+					<ColorPicker renderMode="inline" :modelValue="backgroundColor" @update:modelValue="setBGColor" />
+					<BuilderButton v-if="backgroundColor" class="w-full" variant="subtle" @click="setBGColor(null)">
+						Clear Color
+					</BuilderButton>
+				</div>
+
+				<!-- Image Tab -->
+				<div v-else-if="activeTab === 'image'" class="space-y-4">
+					<div
+						class="image-preview group relative h-24 w-full cursor-pointer overflow-hidden rounded bg-surface-gray-3"
+						:style="getPreviewStyle(activeState)">
+						<FileUploader
+							@success="setBGImage"
+							:uploadArgs="{
+								private: false,
+								folder: 'Home/Builder Uploads',
+								optimize: true,
+								upload_endpoint: '/api/method/builder.api.upload_builder_asset',
+							}">
+							<template v-slot="{ openFileSelector }">
+								<div
+									class="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center bg-gray-500 bg-opacity-20"
+									:class="{
+										'!grid': !backgroundImageURL,
+										'group-hover:grid': backgroundImageURL,
+									}">
+									<BuilderButton @click="openFileSelector">Upload</BuilderButton>
+								</div>
+							</template>
+						</FileUploader>
+					</div>
+					<div class="space-y-2">
+						<InlineInput
+							label="Size"
+							:modelValue="backgroundSize"
+							type="select"
+							:options="sizeOptions"
+							@update:modelValue="setBGSize" />
+						<InlineInput
+							label="Position"
+							:modelValue="backgroundPosition"
+							type="select"
+							:options="positionOptions"
+							@update:modelValue="setBGPosition" />
+						<InlineInput
+							label="Repeat"
+							:modelValue="backgroundRepeat"
+							type="select"
+							:options="repeatOptions"
+							@update:modelValue="setBGRepeat" />
+					</div>
+					<BuilderButton v-if="showServeLocallyButton" class="w-full" @click="serveBackgroundImageLocally">
+						{{ serveLocallyButtonText }}
+					</BuilderButton>
+					<BuilderButton v-if="backgroundImageURL" class="w-full" variant="subtle" @click="clearBGImage">
+						Clear Image
+					</BuilderButton>
 				</div>
-				<div class="mt-4 space-y-2">
-					<InlineInput
-						label="Size"
-						:modelValue="backgroundSize"
-						type="select"
-						:options="sizeOptions"
-						@update:modelValue="setBGSize" />
-					<InlineInput
-						label="Position"
-						:modelValue="backgroundPosition"
-						type="select"
-						:options="positionOptions"
-						@update:modelValue="setBGPosition" />
-					<InlineInput
-						label="Repeat"
-						:modelValue="backgroundRepeat"
-						type="select"
-						:options="repeatOptions"
-						@update:modelValue="setBGRepeat" />
+
+				<!-- Gradient Tab -->
+				<div v-else class="space-y-4">
+					<GradientEditor
+						:modelValue="isGradient ? rawBackgroundImage : null"
+						@update:modelValue="setGradient" />
+					<BuilderButton v-if="isGradient" class="w-full" variant="subtle" @click="clearBGImage">
+						Clear Gradient
+					</BuilderButton>
 				</div>
-				<BuilderButton v-if="showServeLocallyButton" class="mt-3 w-full" @click="serveBackgroundImageLocally">
-					{{ serveLocallyButtonText }}
-				</BuilderButton>
-				<BuilderButton v-if="backgroundImage" class="mt-3 w-full" variant="subtle" @click="clearBGImage">
-					Clear Image
-				</BuilderButton>
 			</div>
 		</template>
 	</Popover>
-	<StylePropertyControl
-		label="BG Color"
-		propertyKey="backgroundColor"
-		:component="ColorInput"
-		:popoverOffset="120" />
 </template>
 
 <script lang="ts" setup>
-import ColorInput from "@/components/Controls/ColorInput.vue";
+import ColorPicker from "@/components/Controls/ColorPicker.vue";
+import GradientEditor from "@/components/Controls/GradientEditor.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import Input from "@/components/Controls/Input.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import TabButtons from "@/components/Controls/TabButtons.vue";
 import blockController from "@/utils/blockController";
 import { getOptimizeButtonText, optimizeImage, shouldShowOptimizeButton } from "@/utils/imageUtils";
 import { FileUploader, Popover } from "frappe-ui";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
+
+const activeState = ref<string | null>(null);
+
+const updateActiveState = (e: FocusEvent) => {
+	const target = e.target as HTMLElement;
+
+	// If focusing popover controls, we preserve the current activeState
+	if (target.closest(".background-popover-body")) return;
+
+	const variantRow = target.closest("[data-variant]");
+	const mainPropRow = target.closest("[data-property]");
+
+	if (variantRow) {
+		activeState.value = variantRow.getAttribute("data-variant") as string;
+	} else if (mainPropRow) {
+		activeState.value = null;
+	}
+};
+
+const getStyleKey = (prop: string, state: string | null = activeState.value) => {
+	return state ? `${state}:${prop}` : prop;
+};
+
+const rawBackgroundImage = computed(() => blockController.getStyle(getStyleKey("backgroundImage")) as any);
+const backgroundColor = computed(() => blockController.getStyle(getStyleKey("backgroundColor")) as any);
+
+const isGradient = computed(() => rawBackgroundImage.value?.includes("gradient"));
+
+const activeTab = ref("color");
+watch(
+	[activeState, isGradient, rawBackgroundImage],
+	() => {
+		if (isGradient.value) activeTab.value = "gradient";
+		else if (rawBackgroundImage.value) activeTab.value = "image";
+		else activeTab.value = "color";
+	},
+	{ immediate: true },
+);
+
+const hasBackground = computed(() => Boolean(rawBackgroundImage.value || backgroundColor.value));
+
+const getDisplayValue = (state: string | null) => {
+	const bg = blockController.getStyle(getStyleKey("backgroundImage", state)) as string;
+	const color = blockController.getStyle(getStyleKey("backgroundColor", state)) as string;
+
+	if (bg?.includes("gradient")) return "Gradient";
+	if (bg) {
+		const url = bg.replace(/^url\(['"]?|['"]?\)$/g, "");
+		const parts = url.split("/");
+		return parts[parts.length - 1] || "Image";
+	}
+	if (color) return color;
+	return "";
+};
+
+const displayValue = computed(() => getDisplayValue(activeState.value));
 
-const backgroundImage = computed(() => {
-	const bgImage = blockController.getStyle("backgroundImage") as string;
-	return bgImage ? bgImage.replace(/^url\(['"]?|['"]?\)$/g, "") : null;
+const backgroundImageURL = computed(() => {
+	const bgImage = rawBackgroundImage.value;
+	return bgImage && !isGradient.value ? bgImage.replace(/^url\(['"]?|['"]?\)$/g, "") : null;
 });
-const backgroundSize = computed(() => blockController.getStyle("backgroundSize") as string);
-const backgroundPosition = computed(() => blockController.getStyle("backgroundPosition") as string);
-const backgroundRepeat = computed(() => blockController.getStyle("backgroundRepeat") as string);
 
-const previewStyle = computed(() => ({
-	backgroundImage: (backgroundImage.value ? `url(${backgroundImage.value})` : "") as string,
-	backgroundPosition: backgroundPosition.value,
-	backgroundSize: backgroundSize.value,
-	backgroundRepeat: backgroundRepeat.value,
-}));
+const backgroundSize = computed(() => blockController.getStyle(getStyleKey("backgroundSize")) as string);
+const backgroundPosition = computed(
+	() => blockController.getStyle(getStyleKey("backgroundPosition")) as string,
+);
+const backgroundRepeat = computed(() => blockController.getStyle(getStyleKey("backgroundRepeat")) as string);
+
+const getHasBackground = (state: string | null) => {
+	return Boolean(
+		blockController.getStyle(getStyleKey("backgroundImage", state)) ||
+			blockController.getStyle(getStyleKey("backgroundColor", state)),
+	);
+};
+
+const getPreviewStyle = (state: string | null) => {
+	const bgValue = blockController.getStyle(getStyleKey("backgroundImage", state)) as string;
+	const colorValue = blockController.getStyle(getStyleKey("backgroundColor", state)) as string;
+	const size = blockController.getStyle(getStyleKey("backgroundSize", state)) as string;
+	const pos = blockController.getStyle(getStyleKey("backgroundPosition", state)) as string;
+	const repeat = blockController.getStyle(getStyleKey("backgroundRepeat", state)) as string;
+
+	let bg = "";
+	if (bgValue?.includes("gradient")) {
+		bg = bgValue;
+	} else if (bgValue) {
+		const url = bgValue.replace(/^url\(['"]?|['"]?\)$/g, "");
+		bg = `url(${url})`;
+	}
+
+	return {
+		backgroundColor: colorValue,
+		backgroundImage: bg,
+		backgroundPosition: pos,
+		backgroundSize: size,
+		backgroundRepeat: repeat,
+	};
+};
 
 const sizeOptions = [
 	{ label: "Contain", value: "contain" },
@@ -130,53 +248,115 @@ const repeatOptions = [
 ];
 
 const setBGImage = (file: { file_url: string }) => {
-	blockController.setStyle("backgroundImage", `url(${file.file_url})`);
-	if (!blockController.getStyle("backgroundSize")) {
-		blockController.setStyle("backgroundSize", "cover");
+	blockController.setStyle(getStyleKey("backgroundImage"), `url(${file.file_url})`);
+	blockController.setStyle(getStyleKey("backgroundColor"), null);
+	if (!blockController.getStyle(getStyleKey("backgroundSize"))) {
+		blockController.setStyle(getStyleKey("backgroundSize"), "cover");
 	}
-	if (!blockController.getStyle("backgroundPosition")) {
-		blockController.setStyle("backgroundPosition", "center");
+	if (!blockController.getStyle(getStyleKey("backgroundPosition"))) {
+		blockController.setStyle(getStyleKey("backgroundPosition"), "center");
 	}
-	if (!blockController.getStyle("backgroundRepeat")) {
-		blockController.setStyle("backgroundRepeat", "no-repeat");
+	if (!blockController.getStyle(getStyleKey("backgroundRepeat"))) {
+		blockController.setStyle(getStyleKey("backgroundRepeat"), "no-repeat");
 	}
 };
 
 const setBGImageURL = (url: string) => {
-	blockController.setStyle("backgroundImage", url ? `url(${url})` : null);
+	const bgKey = getStyleKey("backgroundImage");
+	const colorKey = getStyleKey("backgroundColor");
+
+	// Clean up input if it's a URL wrapper
+	let cleanURL = url;
+	if (url?.startsWith("url(")) {
+		cleanURL = url.replace(/^url\(['"]?|['"]?\)$/g, "");
+	}
+
+	if (cleanURL?.startsWith("#") || cleanURL?.startsWith("rgb") || cleanURL?.startsWith("hsl")) {
+		blockController.setStyle(colorKey, cleanURL);
+		blockController.setStyle(bgKey, null);
+	} else {
+		blockController.setStyle(bgKey, cleanURL ? `url(${cleanURL})` : null);
+		if (cleanURL) {
+			blockController.setStyle(colorKey, null);
+		}
+	}
+};
+
+const setBGColor = (color: string | null) => {
+	blockController.setStyle(getStyleKey("backgroundColor"), color);
+	if (color) {
+		blockController.setStyle(getStyleKey("backgroundImage"), null);
+	}
+};
+
+const setGradient = (gradient: string) => {
+	blockController.setStyle(getStyleKey("backgroundImage"), gradient);
+	blockController.setStyle(getStyleKey("backgroundColor"), null);
 };
 
 const setBGSize = (value: string) => {
-	blockController.setStyle("backgroundSize", value);
+	blockController.setStyle(getStyleKey("backgroundSize"), value);
 };
 
 const setBGPosition = (value: string) => {
-	blockController.setStyle("backgroundPosition", value);
+	blockController.setStyle(getStyleKey("backgroundPosition"), value);
 };
 
 const setBGRepeat = (value: string) => {
-	blockController.setStyle("backgroundRepeat", value);
+	blockController.setStyle(getStyleKey("backgroundRepeat"), value);
 };
 
 const clearBGImage = () => {
-	blockController.setStyle("backgroundImage", null);
-	blockController.setStyle("backgroundSize", null);
-	blockController.setStyle("backgroundPosition", null);
-	blockController.setStyle("backgroundRepeat", null);
+	blockController.setStyle(getStyleKey("backgroundImage"), null);
+	blockController.setStyle(getStyleKey("backgroundSize"), null);
+	blockController.setStyle(getStyleKey("backgroundPosition"), null);
+	blockController.setStyle(getStyleKey("backgroundRepeat"), null);
+};
+
+const handleSetVariant = (variantName: string, value: string | number | boolean | null) => {
+	const bgKey = `${variantName}:backgroundImage`;
+	const colorKey = `${variantName}:backgroundColor`;
+
+	if (value === null) {
+		blockController.setStyle(bgKey, null);
+		blockController.setStyle(colorKey, null);
+	} else {
+		// Basic transition logic for states
+		blockController.getSelectedBlocks().forEach((block) => {
+			if (!block.getStyle("transitionDuration")) {
+				block.setStyle("transitionDuration", "300ms");
+				block.setStyle("transitionTimingFunction", "ease");
+				block.setStyle("transitionProperty", "all");
+			}
+		});
+
+		// Differentiate color vs image/gradient
+		const cleanValue = typeof value === "string" ? value.replace(/^url\(['"]?|['"]?\)$/g, "") : value;
+		if (
+			typeof cleanValue === "string" &&
+			(cleanValue.startsWith("#") || cleanValue.startsWith("rgb") || cleanValue.startsWith("hsl"))
+		) {
+			blockController.setStyle(colorKey, cleanValue);
+			blockController.setStyle(bgKey, null);
+		} else {
+			blockController.setStyle(bgKey, value);
+			blockController.setStyle(colorKey, null);
+		}
+	}
 };
 
-const showServeLocallyButton = computed(() => shouldShowOptimizeButton(backgroundImage.value));
-const serveLocallyButtonText = computed(() => getOptimizeButtonText(backgroundImage.value));
+const showServeLocallyButton = computed(() => shouldShowOptimizeButton(backgroundImageURL.value));
+const serveLocallyButtonText = computed(() => getOptimizeButtonText(backgroundImageURL.value));
 
 const serveBackgroundImageLocally = () => {
-	if (!backgroundImage.value) {
+	if (!backgroundImageURL.value) {
 		return;
 	}
 
 	return optimizeImage({
-		imageUrl: backgroundImage.value,
+		imageUrl: backgroundImageURL.value,
 		onSuccess: (newUrl: string) => {
-			blockController.setStyle("backgroundImage", `url(${newUrl})`);
+			blockController.setStyle(getStyleKey("backgroundImage"), `url(${newUrl})`);
 		},
 	});
 };
diff --git a/frontend/src/components/Controls/AnglePicker.vue b/frontend/src/components/Controls/AnglePicker.vue
new file mode 100644
index 000000000..12ca88019
--- /dev/null
+++ b/frontend/src/components/Controls/AnglePicker.vue
@@ -0,0 +1,62 @@
+<template>
+	<div
+		class="shadow-inner relative size-6 flex-shrink-0 cursor-pointer rounded-full border border-outline-gray-2 bg-surface-gray-2 transition-all hover:border-outline-gray-3"
+		ref="dialRef"
+		@mousedown="handleMouseDown">
+		<!-- Degrees indicator -->
+		<div
+			class="absolute left-1/2 top-1/2 h-1/2 w-0.5 origin-top -translate-x-1/2 bg-surface-gray-7 pt-1"
+			:style="{ transform: `translateX(-50%) rotate(${modelValue + 180}deg)` }">
+			<div
+				class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rounded-full border border-outline-gray-3 bg-surface-gray-7 shadow-sm" />
+		</div>
+		<!-- Center point -->
+		<div
+			class="bg-outline-gray-3 absolute left-1/2 top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+	modelValue: number;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const dialRef = ref<HTMLElement | null>(null);
+
+const handleMouseDown = (e: MouseEvent) => {
+	updateAngle(e);
+	document.body.style.userSelect = "none";
+	window.addEventListener("mousemove", updateAngle);
+	window.addEventListener(
+		"mouseup",
+		() => {
+			window.removeEventListener("mousemove", updateAngle);
+			document.body.style.userSelect = "";
+		},
+		{ once: true },
+	);
+};
+
+const updateAngle = (e: MouseEvent) => {
+	if (!dialRef.value) return;
+	const rect = dialRef.value.getBoundingClientRect();
+	const centerX = rect.left + rect.width / 2;
+	const centerY = rect.top + rect.height / 2;
+
+	const dx = e.clientX - centerX;
+	const dy = e.clientY - centerY;
+
+	// atan2 returns radians between -PI and PI
+	// We add 90 degrees (Math.PI / 2) because CSS 0deg is top (straight up)
+	let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+
+	// Normalize to 0-360
+	angle = (angle + 360) % 360;
+
+	emit("update:modelValue", Math.round(angle));
+};
+</script>
diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 70409a7ab..6fba90a74 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -11,7 +11,8 @@
 
 		<div
 			class="relative flex w-full gap-2"
-			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'">
+			:class="labelPlacement === 'top' ? 'items-start' : 'items-center'"
+			:data-property="propertyKey">
 			<PropertyLabel
 				v-if="labelPlacement === 'left' && label"
 				ref="propertyLabelRef"
@@ -49,7 +50,7 @@
 				@openDynamicModal="showDynamicValueModal = true"
 				@clearDynamic="clearDynamicValue">
 				<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-					<slot :name="name" v-bind="slotData || {}" />
+					<slot :name="name" v-bind="{ ...slotData, variant: null }" />
 				</template>
 			</PropertyControlInput>
 		</div>
@@ -58,6 +59,7 @@
 		<VariantControl
 			v-for="variant in visibleVariants"
 			:key="variant.name"
+			:data-variant="variant.name"
 			:label="variant.label"
 			:labelPlacement="labelPlacement"
 			:component="props.component"
@@ -72,7 +74,7 @@
 			@labelMousedown="(e: MouseEvent) => handleSliderMouseDown(e, variant.name)"
 			@clear="clearVariant(variant.name)">
 			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-				<slot :name="name" v-bind="slotData || {}" />
+				<slot :name="name" v-bind="{ ...slotData, variant: variant.name }" />
 			</template>
 		</VariantControl>
 	</div>
@@ -155,17 +157,17 @@ const modelValue = computed(() => props.getModelValue?.() ?? "");
 const placeholderValue = computed(() => props.getPlaceholder?.() ?? props.placeholder);
 
 // Normalize and extract value from various input formats
-const normalizeInputValue = (value: string | number | null | { label: string; value: string }) => {
+const normalizeInputValue = (value: string | number | boolean | null | { label: string; value: string }) => {
 	if (typeof value === "object" && value !== null && "value" in value) {
 		value = value.value;
 	}
 	if (value && typeof value === "string") {
 		value = normalizeValueWithUnits(value, props.unitOptions, props.propertyKey);
 	}
-	return value as string;
+	return value as string | number | boolean;
 };
 
-const updateValue = (value: string | number | null | { label: string; value: string }) => {
+const updateValue = (value: string | number | boolean | null | { label: string; value: string }) => {
 	props.setModelValue?.(normalizeInputValue(value));
 };
 
@@ -199,7 +201,7 @@ const getVariantValue = (variantName: string) => {
 
 const updateVariantValue = (
 	variantName: string,
-	value: string | number | null | { label: string; value: string },
+	value: string | number | boolean | null | { label: string; value: string },
 ) => {
 	props.setVariantValue?.(variantName, normalizeInputValue(value));
 };
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index 0f8397734..f0e217dc1 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -23,7 +23,7 @@
 					ref="colorMap"
 					:style="colorMapStyle"
 					@mousedown.prevent="handleSelectorMove"
-					class="relative m-auto h-24 w-44 rounded-md"
+					class="relative m-auto h-24 w-full rounded-md"
 					@click.prevent="setColor">
 					<div
 						ref="colorSelector"
@@ -33,7 +33,7 @@
 				</div>
 				<div
 					ref="hueMap"
-					class="relative m-auto h-3 w-44 rounded-md"
+					class="relative m-auto h-3 w-full rounded-md"
 					@click="setHue"
 					@mousedown.prevent="handleHueSelectorMove"
 					:style="hueMapStyle">
@@ -58,7 +58,7 @@
 					v-if="showInput"
 					type="text"
 					:modelValue="modelValue"
-					class="mt-2 w-44 text-sm"
+					class="mt-2 w-full text-sm"
 					placeholder="Set Color"
 					@update:modelValue="handleInputChange" />
 			</div>
@@ -69,14 +69,14 @@
 		ref="colorPicker"
 		:class="
 			renderMode === 'inline'
-				? 'flex flex-col gap-2'
+				? 'flex w-full flex-col gap-2'
 				: 'flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg'
 		">
 		<div
 			ref="colorMap"
 			:style="colorMapStyle"
 			@mousedown.prevent="handleSelectorMove"
-			class="relative m-auto h-24 w-44 rounded-md"
+			class="relative m-auto h-24 w-full rounded-md"
 			@click.prevent="setColor">
 			<div
 				ref="colorSelector"
@@ -86,7 +86,7 @@
 		</div>
 		<div
 			ref="hueMap"
-			class="relative m-auto h-3 w-44 rounded-md"
+			class="relative m-auto h-3 w-full rounded-md"
 			@click="setHue"
 			@mousedown.prevent="handleHueSelectorMove"
 			:style="hueMapStyle">
@@ -111,7 +111,7 @@
 			v-if="showInput"
 			type="text"
 			:modelValue="modelValue"
-			class="mt-2 w-44 text-sm"
+			class="mt-2 w-full text-sm"
 			placeholder="Set Color"
 			@update:modelValue="handleInputChange" />
 	</div>
diff --git a/frontend/src/components/Controls/GradientEditor.vue b/frontend/src/components/Controls/GradientEditor.vue
new file mode 100644
index 000000000..f78b8639d
--- /dev/null
+++ b/frontend/src/components/Controls/GradientEditor.vue
@@ -0,0 +1,277 @@
+<template>
+	<div class="select-none space-y-4">
+		<!-- Type & Angle -->
+		<div class="flex items-center gap-3">
+			<TabButtons
+				:buttons="[
+					{ label: 'Linear', value: 'linear-gradient' },
+					{ label: 'Radial', value: 'radial-gradient' },
+				]"
+				:modelValue="gradient.type"
+				@update:modelValue="updateType"
+				class="flex-1" />
+			<div v-if="gradient.type === 'linear-gradient'" class="flex items-center gap-2">
+				<AnglePicker :modelValue="parseInt(angleValue)" @update:modelValue="updateAngle" />
+				<Input
+					type="text"
+					:modelValue="angleValue"
+					@update:modelValue="updateAngle"
+					:hideClearButton="true"
+					class="w-13 [&>div>input]:pl-1.5 [&>div>input]:pr-4"
+					placeholder="0">
+					<template #suffix>
+						<span class="absolute right-2 top-1/2 -translate-y-1/2 text-[12px] text-ink-gray-4">°</span>
+					</template>
+				</Input>
+			</div>
+		</div>
+
+		<!-- Gradient Preview / Stop Bar -->
+		<div
+			class="shadow-inner relative h-5 w-full rounded border border-outline-gray-2"
+			:style="barPreviewStyle">
+			<div class="absolute inset-0 cursor-copy" @click="addStopAtX" ref="barRef"></div>
+			<!-- Stops -->
+			<div
+				v-for="(stop, index) in gradient.stops"
+				:key="index"
+				class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2"
+				:style="{ left: stop.position + '%' }">
+				<Popover placement="top" :offset="10">
+					<template #target="{ togglePopover }">
+						<div
+							class="size-3 cursor-pointer rounded-full border-2 border-white shadow-md transition-transform hover:scale-125 focus:outline-none"
+							:style="{ backgroundColor: stop.color }"
+							@mousedown="handleStopMouseDown(index, $event)"
+							@click="(e) => !hasMoved && togglePopover()" />
+					</template>
+					<template #body="{ close }">
+						<div class="rounded-lg border border-outline-gray-2 bg-surface-white p-3 shadow-xl">
+							<ColorPicker
+								renderMode="inline"
+								:showInput="true"
+								:modelValue="stop.color"
+								@update:modelValue="(val) => updateStopColor(index, val)" />
+							<div class="mt-2 flex items-center gap-2">
+								<BuilderButton
+									variant="subtle"
+									label="Remove Stop"
+									class="w-full"
+									:disabled="gradient.stops.length <= 2"
+									@click="
+										() => {
+											close();
+											removeStop(index);
+										}
+									" />
+							</div>
+						</div>
+					</template>
+				</Popover>
+			</div>
+		</div>
+
+		<!-- Presets -->
+		<div class="flex flex-wrap gap-2">
+			<div
+				v-for="preset in presets"
+				:key="preset.name"
+				class="size-6 cursor-pointer rounded-full border border-outline-gray-2 shadow-sm transition-colors hover:border-outline-gray-4"
+				:style="{ background: preset.gradient }"
+				@click="applyPreset(preset.gradient)"
+				:title="preset.name" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { parseGradient, stringifyGradient, type Gradient, type GradientStop } from "@/utils/gradientUtils";
+import { Popover } from "frappe-ui";
+import { computed, ref, watch } from "vue";
+import AnglePicker from "./AnglePicker.vue";
+import BuilderButton from "./BuilderButton.vue";
+import ColorPicker from "./ColorPicker.vue";
+import Input from "./Input.vue";
+import TabButtons from "./TabButtons.vue";
+
+const props = defineProps<{
+	modelValue: string | null;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const barRef = ref<HTMLElement | null>(null);
+const draggingIdx = ref<number | null>(null);
+const hasMoved = ref(false);
+
+const handleStopMouseDown = (index: number, e: MouseEvent) => {
+	e.stopPropagation();
+	draggingIdx.value = index;
+	hasMoved.value = false;
+	const startX = e.clientX;
+
+	const onMouseMove = (moveEvent: MouseEvent) => {
+		if (Math.abs(moveEvent.clientX - startX) > 3) {
+			hasMoved.value = true;
+		}
+		if (draggingIdx.value === null || !barRef.value) return;
+
+		const rect = barRef.value.getBoundingClientRect();
+		const x = moveEvent.clientX - rect.left;
+		const position = Math.round(Math.max(0, Math.min(100, (x / rect.width) * 100)));
+
+		updateStopPosition(draggingIdx.value, position);
+	};
+
+	const onMouseUp = () => {
+		draggingIdx.value = null;
+		window.removeEventListener("mousemove", onMouseMove);
+		window.removeEventListener("mouseup", onMouseUp);
+		document.body.style.userSelect = "";
+	};
+
+	window.addEventListener("mousemove", onMouseMove);
+	window.addEventListener("mouseup", onMouseUp);
+	document.body.style.userSelect = "none";
+};
+
+const presets = [
+	{ name: "Hyper", gradient: "linear-gradient(135deg, #0cebeb 0%, #20e3b2 50%, #29ffc6 100%)" },
+	{ name: "Ocean", gradient: "linear-gradient(135deg, #2b5876 0%, #4e4376 100%)" },
+	{ name: "Sunkist", gradient: "linear-gradient(135deg, #f2994a 0%, #f2c94c 100%)" },
+	{ name: "Skyline", gradient: "linear-gradient(135deg, #1488cc 0%, #2b32b2 100%)" },
+	{ name: "Lush", gradient: "linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%)" },
+	{ name: "Purple Bliss", gradient: "linear-gradient(135deg, #360033 0%, #0b8793 100%)" },
+	{ name: "Sunset", gradient: "linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)" },
+	{ name: "Dusk", gradient: "linear-gradient(135deg, #ffd89b 0%, #19033d 100%)" },
+	{ name: "Cosmic", gradient: "linear-gradient(135deg, #ff00cc 0%, #333399 100%)" },
+	{ name: "Clean Mirror", gradient: "linear-gradient(135deg, #e3e3e3 0%, #5d6d7e 100%)" },
+	{ name: "Neon Glow", gradient: "radial-gradient(circle at center, #00f260 0%, #0575e6 100%)" },
+	{ name: "Soft Radial", gradient: "radial-gradient(circle at center, #ff9a9e 0%, #fecfef 100%)" },
+	{ name: "Deep Ocean", gradient: "radial-gradient(circle at center, #2b5876 0%, #4e4376 100%)" },
+	{ name: "Royal", gradient: "linear-gradient(135deg, #141e30 0%, #243b55 100%)" },
+];
+
+const applyPreset = (presetGradient: string) => {
+	const parsed = parseGradient(presetGradient);
+	if (parsed) {
+		gradient.value = parsed;
+		emitUpdate();
+	}
+};
+
+const defaultGradient: Gradient = {
+	type: "linear-gradient",
+	angle: "180deg",
+	stops: [
+		{ color: "#ffffff", position: 0 },
+		{ color: "#000000", position: 100 },
+	],
+};
+
+const gradient = ref<Gradient>(parseGradient(props.modelValue || "") || { ...defaultGradient });
+
+const angleValue = computed(() => {
+	return gradient.value.angle.replace("deg", "");
+});
+
+const barPreviewStyle = computed(() => {
+	const stops = [...gradient.value.stops]
+		.sort((a, b) => a.position - b.position)
+		.map((s) => `${s.color} ${s.position}%`)
+		.join(", ");
+	return {
+		background: `linear-gradient(to right, ${stops})`,
+	};
+});
+
+const previewStyle = computed(() => {
+	return {
+		background: stringifyGradient(gradient.value),
+	};
+});
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		const parsed = parseGradient(newVal || "");
+		if (parsed && stringifyGradient(parsed) !== stringifyGradient(gradient.value)) {
+			gradient.value = parsed;
+		}
+	},
+);
+
+const emitUpdate = () => {
+	emit("update:modelValue", stringifyGradient(gradient.value));
+};
+
+const updateType = (type: any) => {
+	gradient.value.type = type;
+	if (type === "radial-gradient") {
+		// Reset to valid radial config if it was a linear angle
+		if (gradient.value.angle.includes("deg") || gradient.value.angle.includes("to ")) {
+			gradient.value.angle = "circle at center";
+		}
+	} else {
+		// Reset to valid linear angle if it was a radial config
+		if (!gradient.value.angle.includes("deg")) {
+			gradient.value.angle = "180deg";
+		}
+	}
+	emitUpdate();
+};
+
+const updateAngle = (val: string | number) => {
+	gradient.value.angle = (val + "").replace("deg", "") + "deg";
+	emitUpdate();
+};
+
+const updateStopColor = (index: number, color: any) => {
+	gradient.value.stops[index].color = color;
+	emitUpdate();
+};
+
+const updateStopPosition = (index: number, position: number) => {
+	const clampedPosition = Math.max(0, Math.min(100, Math.round(position)));
+	gradient.value.stops[index].position = clampedPosition;
+	emitUpdate();
+};
+
+const removeStop = (index: number) => {
+	if (gradient.value.stops.length > 2) {
+		gradient.value.stops.splice(index, 1);
+		emitUpdate();
+	}
+};
+
+const addStop = () => {
+	const lastStop = gradient.value.stops[gradient.value.stops.length - 1];
+	gradient.value.stops.push({
+		color: lastStop.color,
+		position: Math.min(100, lastStop.position + 10),
+	});
+	emitUpdate();
+};
+
+const addStopAtX = (e: MouseEvent) => {
+	if (!barRef.value) return;
+	const rect = barRef.value.getBoundingClientRect();
+	const x = e.clientX - rect.left;
+	const position = Math.round(Math.max(0, Math.min(100, (x / rect.width) * 100)));
+
+	// Find where to insert
+	const insertIdx = gradient.value.stops.findIndex((s) => s.position > position);
+	const newStop: GradientStop = {
+		color: "#ffffff",
+		position,
+	};
+
+	if (insertIdx === -1) {
+		gradient.value.stops.push(newStop);
+	} else {
+		gradient.value.stops.splice(insertIdx, 0, newStop);
+	}
+	gradient.value.stops.sort((a, b) => a.position - b.position);
+	emitUpdate();
+};
+</script>
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index 22d61d15c..e486e0be5 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -1,6 +1,6 @@
 <template>
 	<BasePropertyControl
-		v-bind="baseProps"
+		v-bind="{ ...baseProps, ...$attrs }"
 		:variants="allVariants"
 		:getVariantValue="getVariantValue"
 		:setVariantValue="setVariantValue">
@@ -37,6 +37,8 @@ const props = withDefaults(
 		enableStates?: boolean;
 		enabledStates?: string[];
 		variants?: Array<{ name: string; property: string; label: string }>;
+		getVariantValue?: (variantName: string) => string | number | boolean;
+		setVariantValue?: (variantName: string, value: string | number | boolean | null) => void;
 	}>(),
 	{
 		enableStates: true,
@@ -65,6 +67,9 @@ const allVariants = computed(() => [
 ]);
 
 const getVariantValue = (variantName: string): string | number | boolean => {
+	if (props.getVariantValue) {
+		return props.getVariantValue(variantName);
+	}
 	if (stateVariants.value.find((v) => v.name === variantName)) {
 		return blockController.getNativeStyle(`${variantName}:${props.propertyKey}`) ?? "";
 	}
@@ -73,6 +78,10 @@ const getVariantValue = (variantName: string): string | number | boolean => {
 };
 
 const setVariantValue = (variantName: string, value: string | number | boolean | null) => {
+	if (props.setVariantValue) {
+		props.setVariantValue(variantName, value);
+		return;
+	}
 	if (stateVariants.value.find((v) => v.name === variantName)) {
 		if (value !== null) {
 			blockController.getSelectedBlocks().forEach((block) => {
diff --git a/frontend/src/components/Controls/VariantControl.vue b/frontend/src/components/Controls/VariantControl.vue
index 6a5ec3b67..9700269dc 100644
--- a/frontend/src/components/Controls/VariantControl.vue
+++ b/frontend/src/components/Controls/VariantControl.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="labelPlacement === 'top'" class="flex flex-col gap-1">
+	<div v-if="labelPlacement === 'top'" class="flex flex-col gap-1" v-bind="$attrs">
 		<InputLabel
 			class="text-sm"
 			:class="{ 'cursor-ns-resize': enableSlider }"
@@ -32,7 +32,8 @@
 
 	<div
 		v-else
-		class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
+		class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden"
+		v-bind="$attrs">
 		<button
 			type="button"
 			class="absolute left-[11px] hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
@@ -73,9 +74,9 @@ defineProps<{
 	component: Component;
 	controlAttrs?: Record<string, unknown>;
 	events?: Record<string, unknown>;
-	modelValue: string;
-	defaultValue?: string | number;
-	placeholder?: string;
+	modelValue: string | number | boolean;
+	defaultValue?: string | number | boolean;
+	placeholder?: string | number | boolean;
 	enableSlider?: boolean;
 }>();
 
diff --git a/frontend/src/utils/gradientUtils.ts b/frontend/src/utils/gradientUtils.ts
new file mode 100644
index 000000000..2a1f58511
--- /dev/null
+++ b/frontend/src/utils/gradientUtils.ts
@@ -0,0 +1,93 @@
+export interface GradientStop {
+	color: any;
+	position: number;
+}
+
+export interface Gradient {
+	type: "linear-gradient" | "radial-gradient";
+	angle: string;
+	stops: GradientStop[];
+}
+
+export function parseGradient(gradientStr: string): Gradient | null {
+	if (!gradientStr || !gradientStr.includes("gradient")) return null;
+
+	const typeMatch = gradientStr.match(/^(linear|radial)-gradient/);
+	if (!typeMatch) return null;
+
+	const type = (typeMatch[0] + "") as Gradient["type"];
+	const content = gradientStr.substring(gradientStr.indexOf("(") + 1, gradientStr.lastIndexOf(")"));
+
+	const parts = tokenizeGradientContent(content);
+	let angle = type === "linear-gradient" ? "180deg" : "circle";
+	let stopsStartIdx = 0;
+
+	if (parts[0]) {
+		const firstPart = parts[0].trim();
+		const isAngle = firstPart.includes("deg") || firstPart.includes("to ");
+		const isRadialConfig = firstPart.includes("circle") || firstPart.includes("ellipse") || firstPart.includes("at ");
+		
+		if (isAngle || isRadialConfig) {
+			angle = firstPart;
+			stopsStartIdx = 1;
+		}
+	}
+
+	const stops: GradientStop[] = [];
+	for (let i = stopsStartIdx; i < parts.length; i++) {
+		const part = parts[i].trim();
+		if (!part) continue;
+
+		const stopMatch = part.match(/(.+?)\s+(-?[0-9.]+%|-?[0-9.]+px)?$/);
+		if (stopMatch && stopMatch[2]) {
+			const color = stopMatch[1].trim();
+			const posStr = stopMatch[2].trim();
+			let position = 0;
+			if (posStr.endsWith("%")) {
+				position = parseFloat(posStr);
+			} else {
+				// Fallback for px or other units - simple linear distribution for now
+				position = (i - stopsStartIdx) * (100 / (parts.length - stopsStartIdx - 1 || 1));
+			}
+			stops.push({ color, position });
+		} else {
+			// Just color or invalid match
+			stops.push({
+				color: part,
+				position: (i - stopsStartIdx) * (100 / (parts.length - stopsStartIdx - 1 || 1)),
+			});
+		}
+	}
+
+	return { type, angle, stops };
+}
+
+function tokenizeGradientContent(content: string): string[] {
+	const tokens: string[] = [];
+	let current = "";
+	let parenDepth = 0;
+
+	for (let i = 0; i < content.length; i++) {
+		const char = content[i];
+		if (char === "(") parenDepth++;
+		if (char === ")") parenDepth--;
+
+		if (char === "," && parenDepth === 0) {
+			tokens.push(current.trim());
+			current = "";
+		} else {
+			current += char;
+		}
+	}
+	if (current) tokens.push(current.trim());
+	return tokens;
+}
+
+export function stringifyGradient(gradient: Gradient): string {
+	const stopsStr = [...gradient.stops]
+		.sort((a, b) => a.position - b.position)
+		.map((s) => `${s.color} ${s.position}%`)
+		.join(", ");
+
+	return `${gradient.type}(${gradient.angle}, ${stopsStr})`;
+}

From 8f385a7fcb3d668738dabdce856af7661cdc0659 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 05:49:05 +0530
Subject: [PATCH 439/547] fix: Handle case where classes is passed as string

---
 builder/builder/doctype/builder_page/builder_page.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 8380eee86..bf56f81f9 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -736,7 +736,11 @@ def create_html_tag(block: dict, state: dict) -> bs.Tag:
 
 def build_tag_classes(block: dict, state: dict) -> list[str]:
 	"""Build list of CSS classes for the tag."""
-	classes = block.get("classes", []).copy()
+	classes = block.get("classes", [])
+	if isinstance(classes, str):
+		classes = [c.strip() for c in classes.split(",") if c.strip()]
+	else:
+		classes = classes.copy()
 	element = block.get("originalElement") or block.get("element")
 
 	text_elements = {"span", "h1", "p", "b", "h2", "h3", "h4", "h5", "h6", "label", "a"}

From 8938e34e107c1d3156c1d7dbd9af297ead557e06 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 14:11:31 +0530
Subject: [PATCH 440/547] fix: Misc type issues

---
 frontend/src/components/Controls/BuilderButton.vue | 2 +-
 frontend/src/components/VisibilityInput.vue        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/BuilderButton.vue b/frontend/src/components/Controls/BuilderButton.vue
index 846df681d..f8e0cf312 100644
--- a/frontend/src/components/Controls/BuilderButton.vue
+++ b/frontend/src/components/Controls/BuilderButton.vue
@@ -7,8 +7,8 @@ import { computed } from "vue";
 
 const props = withDefaults(
 	defineProps<{
-		variant?: string;
 		disabled?: boolean;
+		variant?: "solid" | "subtle" | "ghost";
 	}>(),
 	{
 		variant: "subtle",
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 2164876eb..12fdac412 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -26,7 +26,6 @@ import { getDataArray, getDefaultPropsList, getParentProps, getStandardPropValue
 import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
-	property: styleProperty;
 	label: string;
 	getModelValue: () => string;
 	setModelValue: (value: BlockVisibilityCondition) => void;

From 2813218505f77a2bd4bc3ad01ec763504217b58e Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Sun, 15 Mar 2026 14:13:34 +0530
Subject: [PATCH 441/547] fix: proper truncation and expansion of input labels
 (#514)

---
 frontend/src/components/Controls/BasePropertyControl.vue | 2 +-
 frontend/src/components/Controls/InlineInput.vue         | 4 +++-
 frontend/src/components/Controls/InputLabel.vue          | 4 +++-
 frontend/src/components/Controls/PropertyLabel.vue       | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 70409a7ab..d2622ad11 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -19,7 +19,7 @@
 				:showDropdown="showDropdown"
 				:dropdownOptions="dropdownOptions"
 				:enableSlider="enableSlider"
-				containerClass="w-[88px] shrink-0"
+				containerClass="min-w-[88px] w-1/3 shrink-0"
 				@mousedown="handleMouseDown" />
 
 			<DraggablePopup
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index f57fb053a..166b78f26 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -5,7 +5,8 @@
 			:class="{
 				'cursor-ns-resize': enableSlider,
 			}"
-			class="w-[88px] shrink-0"
+			class="w-[88px] shrink-0 truncate"
+			:title="label"
 			:description="description"
 			@mousedown="handleMouseDown">
 			{{ label }}
@@ -156,4 +157,5 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 	}
 	handleChange(newValue + "" + unit);
 };
+
 </script>
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index c301e84a9..4ae5756f4 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,5 +1,7 @@
 <template>
-	<span class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
+	<span
+		:class="{ 'inline-flex': description }"
+		class="min-w-16 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
 		<slot />
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
diff --git a/frontend/src/components/Controls/PropertyLabel.vue b/frontend/src/components/Controls/PropertyLabel.vue
index e03b0df9d..21fe3a165 100644
--- a/frontend/src/components/Controls/PropertyLabel.vue
+++ b/frontend/src/components/Controls/PropertyLabel.vue
@@ -11,6 +11,7 @@
 		</Dropdown>
 		<InputLabel
 			class="truncate"
+			:title="label"
 			:class="{ 'cursor-ns-resize': enableSlider }"
 			@mousedown="$emit('mousedown', $event)">
 			{{ label }}

From 39d10247fd5012ebaa38b5ba1288ce1f76276781 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 15:25:41 +0530
Subject: [PATCH 442/547] refactor: Simplify mouse event handling in
 AnglePicker and GradientEditor

---
 .../src/components/Controls/AnglePicker.vue   | 43 +++++----------
 .../components/Controls/GradientEditor.vue    | 52 +++++++++----------
 2 files changed, 36 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Controls/AnglePicker.vue b/frontend/src/components/Controls/AnglePicker.vue
index 12ca88019..9a10f6916 100644
--- a/frontend/src/components/Controls/AnglePicker.vue
+++ b/frontend/src/components/Controls/AnglePicker.vue
@@ -1,8 +1,7 @@
 <template>
 	<div
 		class="shadow-inner relative size-6 flex-shrink-0 cursor-pointer rounded-full border border-outline-gray-2 bg-surface-gray-2 transition-all hover:border-outline-gray-3"
-		ref="dialRef"
-		@mousedown="handleMouseDown">
+		ref="dialRef">
 		<!-- Degrees indicator -->
 		<div
 			class="absolute left-1/2 top-1/2 h-1/2 w-0.5 origin-top -translate-x-1/2 bg-surface-gray-7 pt-1"
@@ -17,7 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { useMouseInElement, useMousePressed } from "@vueuse/core";
+import { ref, watch } from "vue";
 
 const props = defineProps<{
 	modelValue: number;
@@ -26,37 +26,18 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"]);
 
 const dialRef = ref<HTMLElement | null>(null);
+const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(dialRef);
+const { pressed } = useMousePressed();
 
-const handleMouseDown = (e: MouseEvent) => {
-	updateAngle(e);
-	document.body.style.userSelect = "none";
-	window.addEventListener("mousemove", updateAngle);
-	window.addEventListener(
-		"mouseup",
-		() => {
-			window.removeEventListener("mousemove", updateAngle);
-			document.body.style.userSelect = "";
-		},
-		{ once: true },
-	);
-};
-
-const updateAngle = (e: MouseEvent) => {
-	if (!dialRef.value) return;
-	const rect = dialRef.value.getBoundingClientRect();
-	const centerX = rect.left + rect.width / 2;
-	const centerY = rect.top + rect.height / 2;
-
-	const dx = e.clientX - centerX;
-	const dy = e.clientY - centerY;
-
-	// atan2 returns radians between -PI and PI
-	// We add 90 degrees (Math.PI / 2) because CSS 0deg is top (straight up)
-	let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+watch([elementX, elementY, pressed], () => {
+	if (!pressed.value) return;
+
+	const dx = elementX.value - elementWidth.value / 2;
+	const dy = elementY.value - elementHeight.value / 2;
 
-	// Normalize to 0-360
+	let angle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
 	angle = (angle + 360) % 360;
 
 	emit("update:modelValue", Math.round(angle));
-};
+});
 </script>
diff --git a/frontend/src/components/Controls/GradientEditor.vue b/frontend/src/components/Controls/GradientEditor.vue
index f78b8639d..9767b5ca8 100644
--- a/frontend/src/components/Controls/GradientEditor.vue
+++ b/frontend/src/components/Controls/GradientEditor.vue
@@ -29,18 +29,18 @@
 		<!-- Gradient Preview / Stop Bar -->
 		<div
 			class="shadow-inner relative h-5 w-full rounded border border-outline-gray-2"
-			:style="barPreviewStyle">
-			<div class="absolute inset-0 cursor-copy" @click="addStopAtX" ref="barRef"></div>
-			<!-- Stops -->
+			:style="barPreviewStyle"
+			ref="barRef">
+			<div class="absolute inset-0 cursor-copy" @click.self="addStopAtX"></div>
 			<div
 				v-for="(stop, index) in gradient.stops"
 				:key="index"
-				class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2"
+				class="absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
 				:style="{ left: stop.position + '%' }">
 				<Popover placement="top" :offset="10">
 					<template #target="{ togglePopover }">
 						<div
-							class="size-3 cursor-pointer rounded-full border-2 border-white shadow-md transition-transform hover:scale-125 focus:outline-none"
+							class="size-4 cursor-pointer rounded-full border-2 border-white shadow-md ring-1 ring-black/20 transition-transform hover:scale-110 focus:outline-none"
 							:style="{ backgroundColor: stop.color }"
 							@mousedown="handleStopMouseDown(index, $event)"
 							@click="(e) => !hasMoved && togglePopover()" />
@@ -93,6 +93,7 @@ import BuilderButton from "./BuilderButton.vue";
 import ColorPicker from "./ColorPicker.vue";
 import Input from "./Input.vue";
 import TabButtons from "./TabButtons.vue";
+import { useMouseInElement, useMousePressed } from "@vueuse/core";
 
 const props = defineProps<{
 	modelValue: string | null;
@@ -104,36 +105,31 @@ const barRef = ref<HTMLElement | null>(null);
 const draggingIdx = ref<number | null>(null);
 const hasMoved = ref(false);
 
+const { elementX } = useMouseInElement(barRef);
+const { pressed } = useMousePressed();
+
+const startDraggingX = ref(0);
 const handleStopMouseDown = (index: number, e: MouseEvent) => {
-	e.stopPropagation();
 	draggingIdx.value = index;
 	hasMoved.value = false;
-	const startX = e.clientX;
-
-	const onMouseMove = (moveEvent: MouseEvent) => {
-		if (Math.abs(moveEvent.clientX - startX) > 3) {
-			hasMoved.value = true;
-		}
-		if (draggingIdx.value === null || !barRef.value) return;
+	startDraggingX.value = elementX.value;
+};
 
-		const rect = barRef.value.getBoundingClientRect();
-		const x = moveEvent.clientX - rect.left;
-		const position = Math.round(Math.max(0, Math.min(100, (x / rect.width) * 100)));
+watch([elementX, pressed], () => {
+	if (!pressed.value) {
+		draggingIdx.value = null;
+		return;
+	}
 
-		updateStopPosition(draggingIdx.value, position);
-	};
+	if (draggingIdx.value === null || !barRef.value) return;
 
-	const onMouseUp = () => {
-		draggingIdx.value = null;
-		window.removeEventListener("mousemove", onMouseMove);
-		window.removeEventListener("mouseup", onMouseUp);
-		document.body.style.userSelect = "";
-	};
+	if (Math.abs(elementX.value - startDraggingX.value) > 3) {
+		hasMoved.value = true;
+	}
 
-	window.addEventListener("mousemove", onMouseMove);
-	window.addEventListener("mouseup", onMouseUp);
-	document.body.style.userSelect = "none";
-};
+	const position = Math.round(Math.max(0, Math.min(100, (elementX.value / barRef.value.clientWidth) * 100)));
+	updateStopPosition(draggingIdx.value, position);
+});
 
 const presets = [
 	{ name: "Hyper", gradient: "linear-gradient(135deg, #0cebeb 0%, #20e3b2 50%, #29ffc6 100%)" },

From b96e6ca6d5ad3772eaeba06636e0f619038ce537 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 16:12:29 +0530
Subject: [PATCH 443/547] fix: Glitch while selecting gradient from preset

---
 frontend/src/components/BackgroundHandler.vue | 14 ++++++----
 .../src/components/Controls/AnglePicker.vue   |  2 +-
 .../components/Controls/GradientEditor.vue    | 27 ++++++++++++++-----
 frontend/src/utils/gradientUtils.ts           |  6 ++---
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index e8860d90d..57aa7626a 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -44,7 +44,11 @@
 				<!-- Color Tab -->
 				<div v-if="activeTab === 'color'" class="w-full space-y-4">
 					<ColorPicker renderMode="inline" :modelValue="backgroundColor" @update:modelValue="setBGColor" />
-					<BuilderButton v-if="backgroundColor" class="w-full" variant="subtle" @click="setBGColor(null)">
+					<BuilderButton
+						:disabled="!backgroundColor"
+						class="w-full"
+						variant="subtle"
+						@click="setBGColor(null)">
 						Clear Color
 					</BuilderButton>
 				</div>
@@ -104,9 +108,7 @@
 
 				<!-- Gradient Tab -->
 				<div v-else class="space-y-4">
-					<GradientEditor
-						:modelValue="isGradient ? rawBackgroundImage : null"
-						@update:modelValue="setGradient" />
+					<GradientEditor :modelValue="rawBackgroundImage" @update:modelValue="setGradient" />
 					<BuilderButton v-if="isGradient" class="w-full" variant="subtle" @click="clearBGImage">
 						Clear Gradient
 					</BuilderButton>
@@ -150,7 +152,9 @@ const getStyleKey = (prop: string, state: string | null = activeState.value) =>
 	return state ? `${state}:${prop}` : prop;
 };
 
-const rawBackgroundImage = computed(() => blockController.getStyle(getStyleKey("backgroundImage")) as any);
+const rawBackgroundImage = computed(
+	() => (blockController.getStyle(getStyleKey("backgroundImage")) || "") as string,
+);
 const backgroundColor = computed(() => blockController.getStyle(getStyleKey("backgroundColor")) as any);
 
 const isGradient = computed(() => rawBackgroundImage.value?.includes("gradient"));
diff --git a/frontend/src/components/Controls/AnglePicker.vue b/frontend/src/components/Controls/AnglePicker.vue
index 9a10f6916..6a6708f33 100644
--- a/frontend/src/components/Controls/AnglePicker.vue
+++ b/frontend/src/components/Controls/AnglePicker.vue
@@ -27,7 +27,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const dialRef = ref<HTMLElement | null>(null);
 const { elementX, elementY, elementWidth, elementHeight } = useMouseInElement(dialRef);
-const { pressed } = useMousePressed();
+const { pressed } = useMousePressed({ target: dialRef });
 
 watch([elementX, elementY, pressed], () => {
 	if (!pressed.value) return;
diff --git a/frontend/src/components/Controls/GradientEditor.vue b/frontend/src/components/Controls/GradientEditor.vue
index 9767b5ca8..6f54e8f20 100644
--- a/frontend/src/components/Controls/GradientEditor.vue
+++ b/frontend/src/components/Controls/GradientEditor.vue
@@ -86,6 +86,7 @@
 
 <script setup lang="ts">
 import { parseGradient, stringifyGradient, type Gradient, type GradientStop } from "@/utils/gradientUtils";
+import { useMouseInElement, useMousePressed } from "@vueuse/core";
 import { Popover } from "frappe-ui";
 import { computed, ref, watch } from "vue";
 import AnglePicker from "./AnglePicker.vue";
@@ -93,7 +94,6 @@ import BuilderButton from "./BuilderButton.vue";
 import ColorPicker from "./ColorPicker.vue";
 import Input from "./Input.vue";
 import TabButtons from "./TabButtons.vue";
-import { useMouseInElement, useMousePressed } from "@vueuse/core";
 
 const props = defineProps<{
 	modelValue: string | null;
@@ -152,20 +152,31 @@ const applyPreset = (presetGradient: string) => {
 	const parsed = parseGradient(presetGradient);
 	if (parsed) {
 		gradient.value = parsed;
-		emitUpdate();
+		emit("update:modelValue", stringifyGradient(parsed));
 	}
 };
 
-const defaultGradient: Gradient = {
+const getDefaultGradient = (): Gradient => ({
 	type: "linear-gradient",
 	angle: "180deg",
 	stops: [
 		{ color: "#ffffff", position: 0 },
 		{ color: "#000000", position: 100 },
 	],
+});
+
+const gradient = ref<Gradient>(getDefaultGradient());
+
+const initializeGradient = (value: string | null) => {
+	const parsed = parseGradient(value || "");
+	if (parsed) {
+		gradient.value = parsed;
+	} else if (!gradient.value.stops.length || !value) {
+		gradient.value = getDefaultGradient();
+	}
 };
 
-const gradient = ref<Gradient>(parseGradient(props.modelValue || "") || { ...defaultGradient });
+initializeGradient(props.modelValue);
 
 const angleValue = computed(() => {
 	return gradient.value.angle.replace("deg", "");
@@ -191,8 +202,12 @@ watch(
 	() => props.modelValue,
 	(newVal) => {
 		const parsed = parseGradient(newVal || "");
-		if (parsed && stringifyGradient(parsed) !== stringifyGradient(gradient.value)) {
-			gradient.value = parsed;
+		if (parsed) {
+			const currentString = stringifyGradient(gradient.value);
+			const newString = stringifyGradient(parsed);
+			if (currentString !== newString) {
+				gradient.value = parsed;
+			}
 		}
 	},
 );
diff --git a/frontend/src/utils/gradientUtils.ts b/frontend/src/utils/gradientUtils.ts
index 2a1f58511..117bfc531 100644
--- a/frontend/src/utils/gradientUtils.ts
+++ b/frontend/src/utils/gradientUtils.ts
@@ -24,9 +24,9 @@ export function parseGradient(gradientStr: string): Gradient | null {
 
 	if (parts[0]) {
 		const firstPart = parts[0].trim();
-		const isAngle = firstPart.includes("deg") || firstPart.includes("to ");
-		const isRadialConfig = firstPart.includes("circle") || firstPart.includes("ellipse") || firstPart.includes("at ");
-		
+		const isAngle = /^(-?\d+(\.\d+)?deg|to\s+(top|bottom|left|right)(\s+(top|bottom|left|right))?)/i.test(firstPart);
+		const isRadialConfig = /^(circle|ellipse|at\s+|closest-side|farthest-side|closest-corner|farthest-corner)/i.test(firstPart);
+
 		if (isAngle || isRadialConfig) {
 			angle = firstPart;
 			stopsStartIdx = 1;

From 8e1d3b58c04220f8ac542fe3e7d93cf0c76ee1a8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 16:54:58 +0530
Subject: [PATCH 444/547] fix: Use background as propertyKey

- so that users can set dynamicValue to entire background property
---
 frontend/src/components/BackgroundHandler.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 57aa7626a..7f662a1f9 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<div class="flex w-full items-center justify-between" @focusin="updateActiveState">
 				<StylePropertyControl
-					propertyKey="backgroundImage"
+					propertyKey="background"
 					:component="Input"
 					label="Background"
 					:enableStates="true"

From 2a4e8fb24ecc2bbb91b2862a3d11e1299728389e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 17:45:49 +0530
Subject: [PATCH 445/547] fix: State styles for boxShadow

---
 frontend/src/components/ShadowHandler.vue | 72 +++++++++++++++++++----
 1 file changed, 61 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ShadowHandler.vue b/frontend/src/components/ShadowHandler.vue
index b2655f3aa..79f5b1a37 100644
--- a/frontend/src/components/ShadowHandler.vue
+++ b/frontend/src/components/ShadowHandler.vue
@@ -1,7 +1,7 @@
 <template>
 	<Popover placement="left" class="!block w-full" :offset="25">
 		<template #target="{ togglePopover }">
-			<div class="flex w-full items-center justify-between">
+			<div class="flex w-full items-center justify-between" @focusin="updateActiveState">
 				<StylePropertyControl
 					propertyKey="boxShadow"
 					:component="Input"
@@ -10,12 +10,19 @@
 					:allowDynamicValue="true"
 					placeholder="None"
 					@focus="togglePopover"
-					:modelValue="boxShadow"
+					:getModelValue="() => getBoxShadowValue(null)"
+					:getVariantValue="(v: string) => getBoxShadowValue(v)"
+					:setVariantValue="handleSetVariant"
 					@update:modelValue="setBoxShadow">
-					<template #prefix>
+					<template #prefix="{ variant }">
 						<div
 							class="absolute left-2 top-[6px] size-4 cursor-pointer rounded border border-outline-gray-1 shadow-sm"
-							@click="togglePopover"
+							@click="
+								() => {
+									activeState = variant;
+									togglePopover();
+								}
+							"
 							:style="{
 								backgroundColor: shadowConfigs[0]?.color ?? 'transparent',
 							}" />
@@ -25,7 +32,7 @@
 		</template>
 		<template #body>
 			<div
-				class="max-h-[80vh] w-72 select-none space-y-2 overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
+				class="shadow-popover-body max-h-[80vh] w-72 select-none space-y-2 overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
 				<InlineInput
 					label="Preset"
 					type="select"
@@ -104,13 +111,39 @@
 import ColorInput from "@/components/Controls/ColorInput.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import Input from "@/components/Controls/Input.vue";
+import InputLabel from "@/components/Controls/InputLabel.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { Popover } from "frappe-ui";
-import { computed, reactive, watch } from "vue";
+import { Button, Popover } from "frappe-ui";
+import { computed, reactive, ref, watch } from "vue";
 
-const boxShadow = computed(() => blockController.getStyle("boxShadow") as string);
+const activeState = ref<string | null>(null);
+
+const updateActiveState = (e: FocusEvent) => {
+	const target = e.target as HTMLElement;
+
+	if (target.closest(".shadow-popover-body")) return;
+
+	const variantRow = target.closest("[data-variant]");
+	const mainPropRow = target.closest("[data-property]");
+
+	if (variantRow) {
+		activeState.value = variantRow.getAttribute("data-variant") as string;
+	} else if (mainPropRow) {
+		activeState.value = null;
+	}
+};
+
+const getStyleKey = (prop: string, state: string | null = activeState.value) => {
+	return state ? `${state}:${prop}` : prop;
+};
+
+const boxShadow = computed(() => blockController.getStyle(getStyleKey("boxShadow")) as string);
+
+const getBoxShadowValue = (state: string | null) => {
+	return (blockController.getStyle(getStyleKey("boxShadow", state)) || "") as string;
+};
 
 const presetOptions = [
 	{ label: "None", value: "none" },
@@ -265,14 +298,31 @@ const applyShadow = () => {
 			return `${inset ? "inset " : ""}${x} ${y} ${blur} ${spread} ${color}`.trim();
 		})
 		.join(", ");
-	blockController.setStyle("boxShadow", shadowStr);
+	blockController.setStyle(getStyleKey("boxShadow"), shadowStr);
 };
 
 const setBoxShadow = (val: string) => {
-	blockController.setStyle("boxShadow", val);
+	blockController.setStyle(getStyleKey("boxShadow"), val);
 };
 
 const clearShadow = () => {
-	blockController.setStyle("boxShadow", null);
+	blockController.setStyle(getStyleKey("boxShadow"), null);
+};
+
+const handleSetVariant = (variantName: string, value: string | number | boolean | null) => {
+	const shadowKey = `${variantName}:boxShadow`;
+
+	if (value === null) {
+		blockController.setStyle(shadowKey, null);
+	} else {
+		blockController.getSelectedBlocks().forEach((block) => {
+			if (!block.getStyle("transitionDuration")) {
+				block.setStyle("transitionDuration", "300ms");
+				block.setStyle("transitionTimingFunction", "ease");
+				block.setStyle("transitionProperty", "all");
+			}
+		});
+		blockController.setStyle(shadowKey, value as string);
+	}
 };
 </script>

From a4f4fae9fc6dc7100718d0444badd17c568b8f56 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 15 Mar 2026 19:39:05 +0530
Subject: [PATCH 446/547] feat: implemented UID store to keep track of block
 specific data

keeping track of all data which could be uniquely specific to a BuilderBlock - own block data, default props, parent uid chain, uid to block map

misc: cleaned up all block data related watchers
---
 frontend/src/components/BuilderBlock.vue | 79 +++++++++++--------
 frontend/src/stores/blockDataStore.ts    | 48 ------------
 frontend/src/stores/blockStore.ts        | 99 ++++++++++++++++++++++++
 3 files changed, 146 insertions(+), 80 deletions(-)
 delete mode 100644 frontend/src/stores/blockDataStore.ts
 create mode 100644 frontend/src/stores/blockStore.ts

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index f8d1a5955..eb70d5d9e 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -22,6 +22,7 @@
 			:isChildOfComponent="block.isExtendedFromComponent() || isChildOfComponent"
 			:key="child.blockId"
 			:repeater-index="repeaterIndex"
+			:parent-block-uid="uidToUse"
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
 	</component>
 	<teleport to="#overlay" v-if="canvasProps?.overlayElement && !preview && Boolean(canvasProps)">
@@ -71,7 +72,7 @@ import { builderSettings } from "@/data/builderSettings";
 import fetchBlockData from "@/data/blockData";
 import usePageStore from "@/stores/pageStore";
 import { toast } from "vue-sonner";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 
 const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
@@ -80,6 +81,7 @@ const attrs = useAttrs();
 const editor = ref<InstanceType<typeof BlockEditor> | null>(null);
 const pageStore = usePageStore();
 const blockDataStore = useBlockDataStore();
+const blockUidStore = useBlockUidStore();
 
 const props = withDefaults(
 	defineProps<{
@@ -91,6 +93,7 @@ const props = withDefaults(
 		data?: Record<string, any> | null;
 		blockData?: Record<string, any> | null;
 		defaultProps?: Record<string, any> | null;
+		parentBlockUid?: string | null;
 		repeaterIndex?: string | number | null;
 	}>(),
 	{
@@ -122,7 +125,7 @@ const ownBlockData = ref<Record<string, any>>({});
 // So we need unique identifier for block data store
 // Thus we use blockId for the first index and then generate new IDs for the next items
 const uidToUse = !!props.repeaterIndex
-	? `builder-block-${props.block.blockId}-${Math.random().toString(36).substr(2, 9)}}`
+	? `builder-block-${props.block.blockId}-${props.repeaterIndex}}`
 	: props.block.blockId;
 
 const getComponentName = (block: Block) => {
@@ -391,6 +394,8 @@ onMounted(async () => {
 			reactive({ ghostScale: canvasProps?.scale || 1 }),
 		);
 	}
+	blockUidStore.registerBlockUid(uidToUse, props.block);
+	blockUidStore.setParentUid(uidToUse, props.parentBlockUid || "root");
 });
 
 const allResolvedProps = computed(() => {
@@ -419,6 +424,7 @@ const allResolvedProps = computed(() => {
 	};
 });
 
+// Execute client script
 watch(
 	[
 		component,
@@ -428,32 +434,18 @@ watch(
 		() => pageStore.settingPage,
 	],
 	() => {
-		if (pageStore.settingPage || !props.block.getBlockClientScript().trim()) return;
-		if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
-			if (builderSettings.doc?.execute_block_scripts_in_editor === "Restricted")
-				executeBlockClientScriptRestricted(
-					uidToUse,
-					props.block.getBlockClientScript(),
-					allResolvedProps.value,
-				);
-			else
-				executeBlockClientScriptUnrestricted(
-					uidToUse,
-					props.block.getBlockClientScript(),
-					allResolvedProps.value,
-				);
-		}
-	},
-	{ deep: true },
-);
+		if (pageStore.settingPage) return;
 
-watch(
-	[component, () => props.blockData, () => props.data],
-	() => {
-		blockDataStore.setPageData(uidToUse, props.data || {});
-		blockDataStore.setBlockData(uidToUse, props.blockData || {}, "passedDown");
+		const script = props.block.getBlockClientScript().trim();
+		if (!script) return;
+
+		const mode = builderSettings.doc?.execute_block_scripts_in_editor;
+		if (mode === "Don't Execute") return;
+
+		if (mode === "Restricted") executeBlockClientScriptRestricted(uidToUse, script, allResolvedProps.value);
+		else executeBlockClientScriptUnrestricted(uidToUse, script, allResolvedProps.value);
 	},
-	{ immediate: true, deep: true },
+	{ immediate: true },
 );
 
 watch(
@@ -464,33 +456,53 @@ watch(
 		() => props.block.getBlockDataScript(),
 		() => pageStore.settingPage,
 	],
-	() => {
+	(_, __, onCleanup) => {
 		if (pageStore.settingPage) return;
-		if (props.block.getBlockDataScript().trim() === "") {
+
+		const script = props.block.getBlockDataScript().trim();
+
+		if (!script) {
 			ownBlockData.value = {};
 			blockDataStore.setBlockData(uidToUse, {}, "own");
 			return;
 		}
+
+		let cancelled = false;
+		onCleanup(() => {
+			cancelled = true;
+		});
+
 		fetchBlockData
 			.fetch({
 				block_id: uidToUse,
-				block_data_script: props.block.getBlockDataScript(),
+				block_data_script: script,
 				props: JSON.stringify(allResolvedProps.value),
 			})
 			.then((res: any) => {
-				ownBlockData.value = res || {};
-				blockDataStore.setBlockData(uidToUse, res || {}, "own");
+				if (cancelled) return;
+
+				const data = res || {};
+				ownBlockData.value = data;
+				blockDataStore.setBlockData(uidToUse, data, "own");
 			})
 			.catch((e: { exc: string | null }) => {
+				if (cancelled) return;
+
 				const error_message = e.exc?.split("\n").slice(-2)[0];
 				toast.error("There was an error while fetching page data", {
 					description: error_message,
 				});
 			});
 	},
-	{ deep: true, immediate: true },
+	{ immediate: true },
 );
 
+watchEffect(() => {
+	blockDataStore.setPageData(uidToUse, props.data || {});
+	blockDataStore.setBlockData(uidToUse, props.blockData || {}, "passedDown");
+	blockDataStore.setBlockDefaultProps(uidToUse, props.defaultProps || {});
+});
+
 const isEditable = computed(() => {
 	// to ensure it is right block and not on different breakpoint
 	return (
@@ -552,6 +564,9 @@ if (!props.preview) {
 onUnmounted(() => {
 	blockDataStore.clearBlockData(uidToUse);
 	blockDataStore.clearPageData(uidToUse);
+	blockDataStore.clearDefaultProps(uidToUse);
+	blockUidStore.unregisterBlockUid(uidToUse);
+	blockUidStore.clearParentUid(uidToUse);
 });
 
 // Note: All the block event listeners are delegated to parent for better scalability
diff --git a/frontend/src/stores/blockDataStore.ts b/frontend/src/stores/blockDataStore.ts
deleted file mode 100644
index 2587823fe..000000000
--- a/frontend/src/stores/blockDataStore.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { defineStore } from "pinia";
-
-type BlockData = Record<string, any>;
-
-const useBlockDataStore = defineStore("blockDataStore", {
-	state: () => ({
-		blockDataMapping: <Record<string, { ownData: BlockData; passedDownData: BlockData }>>{},
-		pageDataMapping: <Record<string, any>>{},
-	}),
-	actions: {
-		setPageData(blockUid: string, pageData: any) {
-			this.pageDataMapping[blockUid] = pageData;
-		},
-		getPageData(blockUid: string): any {
-			return this.pageDataMapping[blockUid];
-		},
-		clearPageData(blockUid: string) {
-			delete this.pageDataMapping[blockUid];
-		},
-		setBlockData(blockUid: string, blockData: BlockData, type: "own" | "passedDown" = "own") {
-			if(!this.blockDataMapping[blockUid]) {
-                this.blockDataMapping[blockUid] = { ownData: {}, passedDownData: {} };
-            }
-			if (type === "own") {
-				this.blockDataMapping[blockUid].ownData = blockData;
-			} else {
-				this.blockDataMapping[blockUid].passedDownData = blockData;
-			}
-		},
-		getBlockData(blockUid: string, filter: "all" | "own" | "passedDown" = "all"): BlockData | null {
-			const blockData = this.blockDataMapping[blockUid];
-			if (!blockData) {
-				return null;
-			}
-			if (filter === "own") {
-				return blockData.ownData;
-			} else if (filter === "passedDown") {
-				return blockData.passedDownData;
-			}
-			return { ...blockData.ownData, ...blockData.passedDownData };
-		},
-		clearBlockData(blockUid: string) {
-			delete this.blockDataMapping[blockUid];
-		},
-	},
-});
-
-export default useBlockDataStore;
diff --git a/frontend/src/stores/blockStore.ts b/frontend/src/stores/blockStore.ts
new file mode 100644
index 000000000..e6c26a80a
--- /dev/null
+++ b/frontend/src/stores/blockStore.ts
@@ -0,0 +1,99 @@
+import Block from "@/block";
+import { defineStore } from "pinia";
+
+type BlockData = Record<string, any>;
+
+const useBlockDataStore = defineStore("blockDataStore", {
+	state: () => ({
+		blockDataMap: <
+			Record<string, { ownData: BlockData; passedDownData: BlockData }>
+		>{},
+		pageDataMap: <Record<string, any>>{},
+		defaultPropsMap: <Record<string, BlockProps>>{},
+	}),
+	actions: {
+		setPageData(blockUid: string, pageData: any) {
+			this.pageDataMap[blockUid] = pageData;
+		},
+		getPageData(blockUid: string): any {
+			return this.pageDataMap[blockUid];
+		},
+		clearPageData(blockUid: string) {
+			delete this.pageDataMap[blockUid];
+		},
+		setBlockData(
+			blockUid: string,
+			blockData: BlockData,
+			type: "own" | "passedDown" = "own",
+		) {
+			if (!this.blockDataMap[blockUid]) {
+				this.blockDataMap[blockUid] = { ownData: {}, passedDownData: {} };
+			}
+			if (type === "own") {
+				this.blockDataMap[blockUid].ownData = blockData;
+			} else {
+				this.blockDataMap[blockUid].passedDownData = blockData;
+			}
+		},
+		getBlockData(
+			blockUid: string,
+			filter: "all" | "own" | "passedDown" = "all",
+		): BlockData | null {
+			const blockData = this.blockDataMap[blockUid];
+			if (!blockData) {
+				return null;
+			}
+			if (filter === "own") {
+				return blockData.ownData;
+			} else if (filter === "passedDown") {
+				return blockData.passedDownData;
+			}
+			return { ...blockData.ownData, ...blockData.passedDownData };
+		},
+		clearBlockData(blockUid: string) {
+			delete this.blockDataMap[blockUid];
+		},
+		setBlockDefaultProps(blockUid: string, props: BlockProps) {
+			this.defaultPropsMap[blockUid] = props;
+		},
+		getDefaultProps(blockUid: string): BlockProps | null {
+			const defaultProps = this.defaultPropsMap[blockUid];
+			if (!defaultProps) {
+				return null;
+			}
+			return defaultProps;
+		},
+		clearDefaultProps(blockUid: string) {
+			delete this.defaultPropsMap[blockUid];
+		},
+	},
+});
+
+const useBlockUidStore = defineStore("blockUidStore", {
+	state: () => ({
+		blockUidToBlockMap: <Record<string, Block>>{},
+		blockUidToParentUidMap: <Record<string, string>>{},
+	}),
+	actions: {
+		registerBlockUid(uid: string, block: Block) {
+			this.blockUidToBlockMap[uid] = block;
+		},
+		getBlockFromUid(uid: string): Block | null {
+			return this.blockUidToBlockMap[uid] || null;
+		},
+		unregisterBlockUid(uid: string) {
+			delete this.blockUidToBlockMap[uid];
+		},
+		setParentUid(uid: string, parentUid: string) {
+			this.blockUidToParentUidMap[uid] = parentUid;
+		},
+		getParentUid(uid: string): string | null {
+			return this.blockUidToParentUidMap[uid] || null;
+		},
+		clearParentUid(uid: string) {
+			delete this.blockUidToParentUidMap[uid];
+		},
+	},
+});
+
+export { useBlockDataStore, useBlockUidStore };

From 4aa4d85020e374457a8c42732de455bcf08d91a4 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 15 Mar 2026 19:44:02 +0530
Subject: [PATCH 447/547] fix: use updated imports for blockDataStore

---
 frontend/components.d.ts                                      | 1 -
 frontend/src/components/BlockHTML.vue                         | 1 +
 .../BlockPropertySections/CollectionOptionsSection.ts         | 2 +-
 frontend/src/components/Controls/DynamicValueHandler.vue      | 2 +-
 frontend/src/components/DataLoaderBlock.vue                   | 2 +-
 frontend/src/components/PageScript.vue                        | 2 +-
 frontend/src/components/PropsPopoverContent.vue               | 2 +-
 frontend/src/components/TextBlock.vue                         | 1 +
 frontend/src/components/VisibilityInput.vue                   | 4 ++--
 frontend/src/utils/helpers.ts                                 | 1 +
 10 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 80276f733..dbc89ce56 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -69,7 +69,6 @@ declare module 'vue' {
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     Folder: typeof import('./src/components/Icons/Folder.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
-    GenericControl: typeof import('./src/components/Controls/GenericControl.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
     GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 7c22e5e12..7122ae014 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -9,6 +9,7 @@ import { computed, ref } from "vue";
 const component = ref<HTMLElement | null>(null);
 const props = defineProps<{
 	block: Block;
+	uid: string;
 	data?: Record<string, unknown> | null;
 	blockData?: Record<string, unknown> | null;
 	defaultProps?: Record<string, unknown> | null;
diff --git a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
index 82b973c70..ad646ca56 100644
--- a/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
+++ b/frontend/src/components/BlockPropertySections/CollectionOptionsSection.ts
@@ -1,5 +1,5 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 import { FeatherIcon } from "frappe-ui";
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index bcebef560..b8e332a0a 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -74,7 +74,7 @@
 
 <script setup lang="ts">
 import Block from "@/block";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
diff --git a/frontend/src/components/DataLoaderBlock.vue b/frontend/src/components/DataLoaderBlock.vue
index efaa17625..dd5c114f1 100644
--- a/frontend/src/components/DataLoaderBlock.vue
+++ b/frontend/src/components/DataLoaderBlock.vue
@@ -27,7 +27,7 @@ import { getDataForKey, getStandardPropValue } from "@/utils/helpers";
 import { Ref, computed, ref } from "vue";
 import BuilderBlock from "./BuilderBlock.vue";
 import blockController from "@/utils/blockController";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 
 const pageStore = usePageStore();
 const blockDataStore = useBlockDataStore();
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index d76e29a4a..7ca3777c2 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -163,7 +163,7 @@ import blockController from "@/utils/blockController";
 import TabButtons from "./Controls/TabButtons.vue";
 import Switch from "./Controls/Switch.vue";
 import PropsEditor from "./PropsEditor.vue";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 import { useStorage } from "@vueuse/core";
 
 const pageStore = usePageStore();
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 5071c0b42..e20ec21fe 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -115,7 +115,7 @@ import BooleanOptions from "@/components/PropsOptions/BooleanOptions.vue";
 import SelectOptions from "@/components/PropsOptions/SelectOptions.vue";
 
 import { getDataArray, toKebabCase } from "@/utils/helpers";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 import ColorOptions from "./PropsOptions/ColorOptions.vue";
 import ImageOptions from "./PropsOptions/ImageOptions.vue";
 
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 6cbec60b3..1088839d0 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -56,6 +56,7 @@ let selectionTriggered = false as boolean;
 const props = withDefaults(
 	defineProps<{
 		block: Block;
+		uid: string;
 		preview?: boolean;
 		data?: Record<string, any>;
 		blockData?: Record<string, any> | null;
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 2164876eb..008b9a5ff 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -20,7 +20,7 @@
 </template>
 <script setup lang="ts">
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import useBlockDataStore from "@/stores/blockDataStore";
+import { useBlockDataStore } from "@/stores/blockStore";
 import blockController from "@/utils/blockController";
 import { getDataArray, getDefaultPropsList, getParentProps, getStandardPropValue } from "@/utils/helpers";
 import { computed, ref, watch } from "vue";
@@ -62,7 +62,7 @@ const parentProps = computed(() => {
 	if (!currentBlock) {
 		return [];
 	}
-	return Object.keys(getParentProps(currentBlock, {}));
+	return Object.keys(getParentProps(currentBlock));
 });
 const defaultProps = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 214475be0..9e70c5867 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -9,6 +9,7 @@ import { FileUploadHandler } from "frappe-ui";
 import { defineComponent, h, markRaw, reactive, ref, toRaw } from "vue";
 import { toast } from "vue-sonner";
 import Dialog from "../components/Controls/Dialog.vue";
+import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 
 function getNumberFromPx(px: string | number | null | undefined): number {
 	if (!px) {

From 1ddf2610597d4aa63be239af798bb58a1d6e3897 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 15 Mar 2026 19:59:40 +0530
Subject: [PATCH 448/547] fix: clearDynamicValue to prioritize and use
 setDynamicValue prop if available

---
 .../src/components/Controls/BasePropertyControl.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 7b2c28cd5..483802891 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -290,9 +290,13 @@ const dynamicValue = computed(() => {
 });
 
 const clearDynamicValue = () => {
-	blockController.getSelectedBlocks().forEach((block) => {
-		block.removeDynamicValue(props.propertyKey, props.controlType);
-	});
+	if (props.setDynamicValue) {
+		props.setDynamicValue("", "dataScript");
+	} else {
+		blockController.getSelectedBlocks().forEach((block) => {
+			block.removeDynamicValue(props.propertyKey, props.controlType);
+		});
+	}
 	emit("clearDynamicValue");
 };
 </script>

From 8ef4ef24f43ca0cb94a776ae9800ede3b88c9aa3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 15 Mar 2026 22:55:35 +0530
Subject: [PATCH 449/547] fix: Keep "Clear Gradient" button disabled

Keep "Clear Gradient" button disabled when no gradient is selected instead of hiding it to minimize layout shift on setting gradient
---
 frontend/src/components/BackgroundHandler.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 7f662a1f9..a0113702e 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -109,7 +109,7 @@
 				<!-- Gradient Tab -->
 				<div v-else class="space-y-4">
 					<GradientEditor :modelValue="rawBackgroundImage" @update:modelValue="setGradient" />
-					<BuilderButton v-if="isGradient" class="w-full" variant="subtle" @click="clearBGImage">
+					<BuilderButton :disabled="!isGradient" class="w-full" variant="subtle" @click="clearBGImage">
 						Clear Gradient
 					</BuilderButton>
 				</div>

From fcc5ba55af8c0fb8e1da82b4170b8e924533e352 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 16 Mar 2026 11:32:25 +0530
Subject: [PATCH 450/547] fix: simplify getPropValue with dynamic props
 handling

now props which are dynamic and comesFrom props are also handled
---
 frontend/src/components/BlockHTML.vue         | 16 +---
 frontend/src/components/BuilderBlock.vue      | 87 +++++++------------
 .../Controls/CodeMirror/CodeMirrorEditor.vue  |  2 +-
 .../Controls/DynamicValueHandler.vue          | 20 +----
 frontend/src/components/TextBlock.vue         | 16 +---
 frontend/src/utils/helpers.ts                 | 60 ++++++++++---
 6 files changed, 85 insertions(+), 116 deletions(-)

diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 7122ae014..2bd1f3940 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -33,13 +33,7 @@ const getDynamicContent = () => {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
 				// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-				value = getPropValue(
-					props.block.getDataKey("key"),
-					props.block,
-					getDataScriptValue,
-					getBlockDataScriptValue,
-					props.defaultProps,
-				);
+				value = getPropValue(props.block.getDataKey("key"), props.block);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
 				value = getBlockDataScriptValue(props.block.getDataKey("key"));
 			} else {
@@ -55,13 +49,7 @@ const getDynamicContent = () => {
 			?.forEach((dataKeyObj: BlockDataKey) => {
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(
-						dataKeyObj.key as string,
-						props.block,
-						getDataScriptValue,
-						getBlockDataScriptValue,
-						props.defaultProps,
-					);
+					value = getPropValue(dataKeyObj.key as string, props.block, props.uid);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index eb70d5d9e..537d3a9a8 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -79,6 +79,8 @@ const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
 const editor = ref<InstanceType<typeof BlockEditor> | null>(null);
+const isMounted = ref(false);
+
 const pageStore = usePageStore();
 const blockDataStore = useBlockDataStore();
 const blockUidStore = useBlockUidStore();
@@ -219,13 +221,7 @@ const attributes = computed(() => {
 		if (props.block.getDataKey("type") === "attribute") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(
-					props.block.getDataKey("key") as string,
-					props.block,
-					getDataScriptValue,
-					getBlockDataScriptValue,
-					props.defaultProps,
-				);
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, uidToUse);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
 				value = getBlockDataScriptValue(props.block.getDataKey("key") as string);
 			} else {
@@ -243,13 +239,7 @@ const attributes = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(
-						dataKeyObj.key as string,
-						props.block,
-						getDataScriptValue,
-						getBlockDataScriptValue,
-						props.defaultProps,
-					);
+					value = getPropValue(dataKeyObj.key as string, props.block, uidToUse);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
@@ -283,13 +273,7 @@ const styles = computed(() => {
 		if (props.block.getDataKey("type") === "style") {
 			let value;
 			if (props.block.getDataKey("comesFrom") === "props") {
-				value = getPropValue(
-					props.block.getDataKey("key") as string,
-					props.block,
-					getDataScriptValue,
-					getBlockDataScriptValue,
-					props.defaultProps,
-				);
+				value = getPropValue(props.block.getDataKey("key") as string, props.block, uidToUse);
 			} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
 				value = getBlockDataScriptValue(props.block.getDataKey("key") as string);
 			} else {
@@ -308,13 +292,7 @@ const styles = computed(() => {
 				const property = dataKeyObj.property as string;
 				let value;
 				if (dataKeyObj.comesFrom === "props") {
-					value = getPropValue(
-						dataKeyObj.key as string,
-						props.block,
-						getDataScriptValue,
-						getBlockDataScriptValue,
-						props.defaultProps,
-					);
+					value = getPropValue(dataKeyObj.key as string, props.block, uidToUse);
 				} else if (dataKeyObj.comesFrom === "blockDataScript") {
 					value = getBlockDataScriptValue(dataKeyObj.key as string);
 				} else {
@@ -396,31 +374,34 @@ onMounted(async () => {
 	}
 	blockUidStore.registerBlockUid(uidToUse, props.block);
 	blockUidStore.setParentUid(uidToUse, props.parentBlockUid || "root");
+	isMounted.value = true;
 });
 
 const allResolvedProps = computed(() => {
+	if (!isMounted.value) {
+		return {};
+	}
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
+		acc[key] = value.value;
+		return acc;
+	}, {} as Record<string, any>);
+
+	const blockProps = Object.entries({
+		...props.block.getBlockProps(),
+	}).reduce((acc, [key]) => {
+		acc[key] = getPropValue(key, props.block, uidToUse);
+		return acc;
+	}, {} as Record<string, any>);
+
+	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce((acc, [key, value]) => {
+		acc[key] = getPropValue(key, value.block!, value.blockUid);
+		return acc;
+	}, {} as Record<string, any>);
+
 	return {
-		...Object.fromEntries(
-			Object.entries(props.defaultProps || {}).map(([key, value]) => {
-				return [key, value.value];
-			}),
-		),
-		...Object.fromEntries(
-			Object.entries({ ...props.block.getBlockProps(), ...getParentProps(props.block) }).map(
-				([key, prop]) => {
-					return [
-						key,
-						getPropValue(
-							key,
-							props.block,
-							getDataScriptValue,
-							(path: string) => getDataForKey({ ...props.blockData }, path), // block props can not refer to own block data items
-							props.defaultProps,
-						),
-					];
-				},
-			),
-		),
+		...defaultProps,
+		...blockProps,
+		...parentProps,
 	};
 });
 
@@ -523,13 +504,7 @@ const hiddenDueToVisibilityCondition = computed(() => {
 		const value = getDataScriptValue(key as string);
 		return !Boolean(value);
 	} else {
-		const value = getPropValue(
-			key as string,
-			props.block,
-			getDataScriptValue,
-			getBlockDataScriptValue,
-			props.defaultProps,
-		);
+		const value = getPropValue(key as string, props.block, uidToUse);
 		return !Boolean(value);
 	}
 });
diff --git a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
index 4d0832ce8..f8f5a821f 100644
--- a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
+++ b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
@@ -110,7 +110,7 @@ const allBlockProps = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
 	if (currentBlock) {
 		const ownBlockProps = currentBlock.getBlockProps();
-		const inheritedBlockProps = getParentProps(currentBlock, {});
+		const inheritedBlockProps = getParentProps(currentBlock);
 		const defaultProps = getDefaultPropsList(currentBlock, blockController);
 		return {
 			...defaultProps,
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index b8e332a0a..3f2d33155 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -148,7 +148,7 @@ const filteredBlockProps = computed(() => {
 	} else {
 		const currentBlock = props.block || blockController.getFirstSelectedBlock();
 		if (currentBlock) {
-			parentProps = Object.keys(getParentProps(currentBlock, {}));
+			parentProps = Object.keys(getParentProps(currentBlock));
 		} else {
 			parentProps = [];
 		}
@@ -185,15 +185,7 @@ const filteredItems = computed(() => {
 		(item) =>
 			item.key.toLowerCase().includes(query) ||
 			String(getDataScriptValue(item.key)).toLowerCase().includes(query) ||
-			String(
-				getPropValue(
-					item.key,
-					props.block || blockController.getFirstSelectedBlock(),
-					getDataScriptValue,
-					getBlockDataScriptValue,
-					defaultProps.value,
-				),
-			)
+			String(getPropValue(item.key, props.block || blockController.getFirstSelectedBlock()))
 				.toLowerCase()
 				.includes(query),
 	);
@@ -203,13 +195,7 @@ const selectedItem = ref<DynamicValueItem | null>(props.selectedValue || null);
 
 const getValue = (item: DynamicValueItem): any => {
 	if (item.comesFrom == "props") {
-		return getPropValue(
-			item.key,
-			props.block || blockController.getFirstSelectedBlock(),
-			getDataScriptValue,
-			getBlockDataScriptValue,
-			defaultProps.value,
-		);
+		return getPropValue(item.key, props.block || blockController.getFirstSelectedBlock());
 	} else if (item.comesFrom == "blockDataScript") {
 		return getBlockDataScriptValue(item.key);
 	} else {
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 1088839d0..b57ffda8b 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -130,13 +130,7 @@ const getDynamicContent = () => {
 		let value;
 		if (props.block.getDataKey("comesFrom") === "props") {
 			// props are checked first as unavailablity of comesFrom means it comes from dataScript (legacy)
-			value = getPropValue(
-				props.block.getDataKey("key"),
-				props.block,
-				getDataScriptValue,
-				getBlockDataScriptValue,
-				props.defaultProps,
-			);
+			value = getPropValue(props.block.getDataKey("key"), props.block, props.uid);
 		} else if (props.block.getDataKey("comesFrom") === "blockDataScript") {
 			value = getBlockDataScriptValue(props.block.getDataKey("key"));
 		} else {
@@ -152,13 +146,7 @@ const getDynamicContent = () => {
 		?.forEach((dataKeyObj: BlockDataKey) => {
 			let value;
 			if (dataKeyObj.comesFrom === "props") {
-				value = getPropValue(
-					dataKeyObj.key as string,
-					props.block,
-					getDataScriptValue,
-					getBlockDataScriptValue,
-					props.defaultProps,
-				);
+				value = getPropValue(dataKeyObj.key as string, props.block, props.uid);
 			} else if (dataKeyObj.comesFrom === "blockDataScript") {
 				value = getBlockDataScriptValue(dataKeyObj.key as string);
 			} else {
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 9e70c5867..b13c49e7d 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1120,19 +1120,33 @@ const getValueForInheritedProp = (
 	return undefined;
 };
 
-const getParentProps = (baseBlock: Block, baseProps: BlockProps = {}): BlockProps => {
+type BlockPropsWithTraceback = Record<
+	string,
+	BlockProps[string] & { block?: Block; blockUid?: string | null }
+>;
+
+const getParentProps = (
+	baseBlock: Block,
+	blockUid?: string | null,
+	baseProps: BlockPropsWithTraceback = {},
+): BlockPropsWithTraceback => {
 	const parentBlock = baseBlock.getParentBlock();
+	const parentBlockUid = useBlockUidStore().getParentUid(blockUid || "");
 	if (parentBlock) {
-		const parentProps: BlockProps = {};
+		const parentProps: BlockPropsWithTraceback = {};
 		Object.entries(parentBlock.getBlockProps())
 			.filter(([_, propDetails]) => {
 				return propDetails.isPassedDown;
 			})
-			.map(([propName, propDetails]) => {
-				parentProps[propName] = propDetails;
+			.forEach(([propName, propDetails]) => {
+				parentProps[propName] = {
+					...propDetails,
+					block: parentBlock,
+					blockUid: parentBlockUid,
+				};
 			});
 		const combinedProps = { ...parentProps, ...baseProps };
-		return getParentProps(parentBlock, combinedProps);
+		return getParentProps(parentBlock, parentBlockUid, combinedProps);
 	} else {
 		return baseProps;
 	}
@@ -1184,21 +1198,23 @@ const getDefaultPropsList = (block: Block, blockController: any): BlockProps =>
 
 const PARSEABLE_STANDARD_TYPES = ["number", "boolean", "object", "array"];
 
-const getPropValue = (
-	propName: string,
-	block: Block,
-	getDataScriptValue: (path: string) => any,
-	getBlockScriptValue: (path: string) => any,
-	defaultProps?: Record<string, any> | null,
-): any => {
+const getPropValue = (propName: string, block: Block, blockUid?: string | null): any => {
+	const blockDataStore = useBlockDataStore();
+
+	const uidToUse = blockUid || block.blockId;
+
+	const defaultProps = blockDataStore.getDefaultProps(uidToUse);
 	// Check default props first
 	if (defaultProps?.[propName] !== undefined) {
 		return defaultProps[propName].value;
 	}
 
+	let parentProps: BlockPropsWithTraceback | null = null;
+
 	// Find matching prop from block or parent
 	const blockProps = block.getBlockProps();
-	const matchingProp = blockProps[propName] ?? getParentProps(block, {})[propName];
+	let matchingProp: BlockPropsWithTraceback[string] =
+		blockProps[propName] ?? (parentProps = getParentProps(block, blockUid))[propName];
 
 	if (!matchingProp) {
 		return undefined;
@@ -1206,6 +1222,23 @@ const getPropValue = (
 
 	// Handle dynamic props
 	if (matchingProp.isDynamic) {
+		if (matchingProp.comesFrom === "props" && matchingProp.value) {
+			if (parentProps === null) {
+				parentProps = getParentProps(block, blockUid);
+			}
+			const newMatchingProp = parentProps[matchingProp.value];
+			if (!newMatchingProp.block) return undefined;
+			console.log("here", newMatchingProp, matchingProp);
+			return getPropValue(matchingProp.value, newMatchingProp.block, newMatchingProp.blockUid);
+		}
+		const getDataScriptValue = (path: string) => {
+			const pageData = blockDataStore.getPageData(uidToUse) || {};
+			return getDataForKey(pageData, path);
+		};
+		const getBlockScriptValue = (path: string) => {
+			const blockData = blockDataStore.getBlockData(uidToUse, "passedDown") || {};
+			return getDataForKey(blockData, path);
+		};
 		if (matchingProp.comesFrom === "dataScript" && matchingProp.value) {
 			return getDataScriptValue(matchingProp.value);
 		}
@@ -1230,7 +1263,6 @@ const getPropValue = (
 		if (PARSEABLE_STANDARD_TYPES.includes(type)) {
 			return matchingProp.value ? JSON.parse(matchingProp.value) : defaultValue;
 		}
-
 		return matchingProp.value || defaultValue;
 	}
 

From 2d0d51d0968b197ad0736e3a917806bb67d276c8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 16 Mar 2026 22:50:49 +0530
Subject: [PATCH 451/547] fix: Skip copy handler if dialog is open

---
 frontend/src/utils/helpers.ts          | 5 +++++
 frontend/src/utils/useBuilderEvents.ts | 3 ++-
 frontend/src/utils/useShortcut.ts      | 6 +-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 214475be0..c8609ee5c 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1453,6 +1453,10 @@ function executeBlockClientScriptRestricted(
 	}
 }
 
+function isDialogOpen() {
+	return !!document.querySelector("[role='dialog']");
+}
+
 export {
 	addPxToNumber,
 	addUnitToNumber,
@@ -1495,6 +1499,7 @@ export {
 	HSVToHex,
 	isBlock,
 	isCtrlOrCmd,
+	isDialogOpen,
 	isHTMLString,
 	isJSONString,
 	isTargetEditable,
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 6147ac590..c6bedeebe 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -13,6 +13,7 @@ import { copyBuilderBlocks, pasteBuilderBlocks } from "@/utils/builderBlockCopyP
 import {
 	addPxToNumber,
 	getBlockCopy,
+	isDialogOpen,
 	isHTMLString,
 	isTargetEditable,
 	showDialog,
@@ -51,7 +52,7 @@ export function useBuilderEvents(
 	);
 
 	useEventListener(document, "copy", (e) => {
-		if (isTargetEditable(e) || canvasStore.editableBlock) return;
+		if (isTargetEditable(e) || canvasStore.editableBlock || isDialogOpen()) return;
 		copySelectedBlocksToClipboard(e);
 	});
 
diff --git a/frontend/src/utils/useShortcut.ts b/frontend/src/utils/useShortcut.ts
index c3a61e633..5c75c17e1 100644
--- a/frontend/src/utils/useShortcut.ts
+++ b/frontend/src/utils/useShortcut.ts
@@ -1,4 +1,4 @@
-import { isCtrlOrCmd, isTargetEditable } from "@/utils/helpers";
+import { isCtrlOrCmd, isDialogOpen, isTargetEditable } from "@/utils/helpers";
 import { computed, onActivated, onBeforeUnmount, onDeactivated, reactive, readonly } from "vue";
 
 export interface ShortcutConfig {
@@ -40,10 +40,6 @@ const shortcutHandlers = new Map<symbol, ShortcutConfig>();
 
 let listenerAttached = false;
 
-function isDialogOpen() {
-	return !!document.querySelector("[role='dialog']");
-}
-
 function attachGlobalListener() {
 	if (listenerAttached) return;
 	listenerAttached = true;

From 5b80f772c056c39b84932010d8cff253494d85db Mon Sep 17 00:00:00 2001
From: Aditya Pratap Singh <66251570+aditorito@users.noreply.github.com>
Date: Tue, 17 Mar 2026 00:46:13 +0530
Subject: [PATCH 452/547] fix: close Variable Manager on page navigation (#524)

Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 frontend/src/components/BuilderLeftPanel.vue     | 10 ++++++++++
 frontend/src/components/Controls/InlineInput.vue |  1 -
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index b8c353927..404ec1250 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -95,6 +95,7 @@ import BuilderAssets from "./BuilderAssets.vue";
 import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
+import { useRoute } from "vue-router";
 
 const showVariableManager = ref(false);
 const miniSidebar = ref(null) as Ref<HTMLElement | null>;
@@ -108,6 +109,8 @@ const pageStore = usePageStore();
 const pageCanvas = inject("pageCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 const fragmentCanvas = inject("fragmentCanvas") as Ref<InstanceType<typeof BuilderCanvas> | null>;
 
+const route = useRoute();
+
 const leftPanelOptions = [
 	{
 		label: "Insert",
@@ -152,6 +155,13 @@ watchEffect(() => {
 	}
 });
 
+watch(
+	() => route.fullPath,
+	() => {
+		showVariableManager.value = false;
+	},
+);
+
 // moved out of BlockLayers for performance
 // TODO: Find a better way to do this
 watch(
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 166b78f26..96661a851 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -157,5 +157,4 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 	}
 	handleChange(newValue + "" + unit);
 };
-
 </script>

From 8fcbb5bff46cdfd13be6cd16b2d71158b6b46132 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 17 Mar 2026 01:01:00 +0530
Subject: [PATCH 453/547] fix: Fix font handling in styles and webpage template

- Ignore system fonts
- Normalise weights to number so that it does not break while loading font
---
 .../doctype/builder_page/builder_page.py      | 64 +++++++++++++++++--
 builder/templates/generators/webpage.html     |  8 ++-
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index bf56f81f9..6aa3a4b7c 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -1145,17 +1145,69 @@ def append_state_style(style_obj, style_tag, style_class, device="desktop"):
 
 
 def set_fonts(styles, font_map):
+	weight_map = {
+		"thin": "100",
+		"extralight": "200",
+		"light": "300",
+		"normal": "400",
+		"medium": "500",
+		"semibold": "600",
+		"bold": "700",
+		"extrabold": "800",
+		"black": "900",
+	}
+	system_fonts = {
+		"arial",
+		"helvetica",
+		"times new roman",
+		"times",
+		"courier new",
+		"courier",
+		"verdana",
+		"georgia",
+		"palatino",
+		"garamond",
+		"bookman",
+		"comic sans ms",
+		"comic sans",
+		"trebuchet ms",
+		"arial black",
+		"impact",
+		"sans-serif",
+		"serif",
+		"monospace",
+		"cursive",
+		"fantasy",
+		"system-ui",
+	}
 	for style in styles:
 		font = style.get("fontFamily")
 		if font:
-			# escape spaces in font name
+			# Remove quotes if present
+			font = font.strip("'\"")
+
+			# Skip if it is a system font
+			if font.lower() in system_fonts:
+				continue
+
+			# escape spaces in font name for CSS
 			style["fontFamily"] = font.replace(" ", "\\ ")
+
+			weight = str(style.get("fontWeight") or "400").lower()
+			weight = weight_map.get(weight, weight)
+
+			# Ensure weight is a valid integer
+			try:
+				weight = int(weight)
+			except (ValueError, TypeError):
+				weight = 400
+
 			if font in font_map:
-				if style.get("fontWeight") and style.get("fontWeight") not in font_map[font]["weights"]:
-					font_map[font]["weights"].append(style.get("fontWeight"))
+				if weight not in font_map[font]["weights"]:
+					font_map[font]["weights"].append(weight)
 					font_map[font]["weights"].sort()
 			else:
-				font_map[font] = {"weights": [style.get("fontWeight") or "400"]}
+				font_map[font] = {"weights": [weight]}
 
 
 def set_fonts_from_html(soup, font_map):
@@ -1164,9 +1216,9 @@ def set_fonts_from_html(soup, font_map):
 		styles = tag.attrs.get("style").split(";")
 		for style in styles:
 			if "font-family" in style:
-				font = style.split(":")[1].strip()
+				font = style.split(":")[1].strip().strip("'\"")
 				if font:
-					font_map[font] = {"weights": ["400"]}
+					font_map[font] = {"weights": [400]}
 
 
 def extend_block(block, overridden_block):
diff --git a/builder/templates/generators/webpage.html b/builder/templates/generators/webpage.html
index ea9951f2d..a85f3361f 100644
--- a/builder/templates/generators/webpage.html
+++ b/builder/templates/generators/webpage.html
@@ -20,7 +20,13 @@
 	{% block meta_block %}{% include "templates/includes/meta_block.html" %}{% endblock %}
 	<link rel="stylesheet" href="/assets/builder/reset.css?v=1" media="screen">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
-	{% for (font, options) in fonts.items() %}<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font }}:wght@{{ ";".join(options.weights) }}&display=swap" media="screen">{% endfor %}
+	{% for (font, options) in fonts.items() %}
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font | replace(' ', '+') }}&display=swap" media="screen">
+	{% set other_weights = options.weights | reject('equalto', '400') | reject('equalto', 400) | list %}
+	{% if other_weights %}
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ font | replace(' ', '+') }}:wght@{{ other_weights | join(';') }}&display=swap" media="screen">
+	{% endif %}
+	{% endfor %}
 	{{ style }}
 	<link rel="stylesheet" href="/builder_assets/variables.css" media="screen">
 	{% if preview %}

From f90ac7e46255c05f9de393c44c7b1c9bb78d385d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 17 Mar 2026 01:01:27 +0530
Subject: [PATCH 454/547] test: Add unit test for font setting functionality

---
 .../doctype/builder_page/test_builder_page.py | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/builder/builder/doctype/builder_page/test_builder_page.py b/builder/builder/doctype/builder_page/test_builder_page.py
index 5693beb68..e979123b8 100644
--- a/builder/builder/doctype/builder_page/test_builder_page.py
+++ b/builder/builder/doctype/builder_page/test_builder_page.py
@@ -944,6 +944,28 @@ def test_nested_repeater_from_page_data(self):
 		finally:
 			page.delete()
 
+	def test_set_fonts(self):
+		from builder.builder.doctype.builder_page.builder_page import set_fonts
+
+		font_map = {}
+		styles = [
+			{"fontFamily": "Inter", "fontWeight": "bold"},
+			{"fontFamily": "Inter", "fontWeight": 400},
+			{"fontFamily": "'Open Sans'", "fontWeight": "600"},
+			{"fontFamily": "Impact", "fontWeight": "800"},  # System font, should be skipped
+			{"fontFamily": "Inter", "fontWeight": "bold"},  # Duplicate
+		]
+
+		set_fonts(styles, font_map)
+
+		self.assertIn("Inter", font_map)
+		self.assertIn("Open Sans", font_map)
+		self.assertNotIn("Impact", font_map)
+
+		# Weights should be normalized to integers and deduplicated
+		self.assertEqual(font_map["Inter"]["weights"], [400, 700])
+		self.assertEqual(font_map["Open Sans"]["weights"], [600])
+
 	@classmethod
 	def tearDownClass(cls):
 		cls.page.delete()

From c7cac7f32b802985b231d908373140489e9e0c8d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 17 Mar 2026 01:20:04 +0530
Subject: [PATCH 455/547] fix: Sanitise css value

Add test to validate changes
---
 .../doctype/builder_page/builder_page.py      |  3 ++-
 builder/builder/tests/test_utils.py           | 22 +++++++++++++++++++
 builder/utils.py                              |  8 +++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 6aa3a4b7c..1d0ea04db 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -37,6 +37,7 @@
 	get_builder_page_preview_file_paths,
 	get_template_assets_folder_path,
 	is_component_used,
+	sanitize_style_value,
 	split_styles,
 )
 
@@ -1118,7 +1119,7 @@ def wrap_with_media_query(style_string, device):
 def get_style(style_obj):
 	return (
 		"".join(
-			f"{camel_case_to_kebab_case(key)}: {value};"
+			f"{camel_case_to_kebab_case(key)}: {sanitize_style_value(value)};"
 			for key, value in style_obj.items()
 			if value is not None and value != "" and not key.startswith("__")
 		)
diff --git a/builder/builder/tests/test_utils.py b/builder/builder/tests/test_utils.py
index 6396a87d7..003e88381 100644
--- a/builder/builder/tests/test_utils.py
+++ b/builder/builder/tests/test_utils.py
@@ -21,6 +21,7 @@
 	make_safe_get_request,
 	process_block_assets,
 	remove_unsafe_fields,
+	sanitize_style_value,
 	split_styles,
 )
 
@@ -488,3 +489,24 @@ def test_copy_img_to_asset_folder(self):
 		block.attributes = frappe._dict()
 		block.children = None
 		copy_img_to_asset_folder(block, test_page)  # Should handle None children gracefully
+
+	def test_sanitize_style_value(self):
+		test_cases = {
+			'center"': "center",
+			'"center"': "center",
+			"'center'": "center",
+			"center": "center",
+			"  center  ": "center",
+			'align-items: center"': "align-items: center",
+			'10px"': "10px",
+			"'red'": "red",
+			'"blue"': "blue",
+			'  "quoted value"  ': "quoted value",
+			None: None,
+			123: 123,
+			'#fff"': "#fff",
+			'rgba(0,0,0,0.5)"': "rgba(0,0,0,0.5)",
+		}
+
+		for input_val, expected in test_cases.items():
+			self.assertEqual(sanitize_style_value(input_val), expected)
diff --git a/builder/utils.py b/builder/utils.py
index 425d6a4bf..d4c196b79 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -419,6 +419,14 @@ def camel_case_to_kebab_case(text, remove_spaces=False):
 	return text
 
 
+def sanitize_style_value(value):
+	if not isinstance(value, str):
+		return value
+	# Remove stray trailing/leading quotes
+	value = value.strip().strip('"').strip("'")
+	return value
+
+
 def execute_script(script, _locals, script_filename):
 	if is_safe_exec_enabled():
 		safe_exec(script, None, _locals, script_filename=script_filename)

From 488c9d58db85a1af0be74bedddda11adc6e3cd4e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 17 Mar 2026 15:10:04 +0530
Subject: [PATCH 456/547] fix: Handle unbalanced quotes and parentheses

---
 builder/builder/tests/test_utils.py | 21 ++++++++++-----------
 builder/utils.py                    |  8 ++++++--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/builder/builder/tests/test_utils.py b/builder/builder/tests/test_utils.py
index 003e88381..7705cbdfb 100644
--- a/builder/builder/tests/test_utils.py
+++ b/builder/builder/tests/test_utils.py
@@ -492,20 +492,19 @@ def test_copy_img_to_asset_folder(self):
 
 	def test_sanitize_style_value(self):
 		test_cases = {
-			'center"': "center",
-			'"center"': "center",
-			"'center'": "center",
+			# No escaping needed
 			"center": "center",
-			"  center  ": "center",
-			'align-items: center"': "align-items: center",
-			'10px"': "10px",
-			"'red'": "red",
-			'"blue"': "blue",
-			'  "quoted value"  ': "quoted value",
+			"'center'": "'center'",
+			'"center"': '"center"',
+			"rgba(0,0,0,0.5)": "rgba(0,0,0,0.5)",
 			None: None,
 			123: 123,
-			'#fff"': "#fff",
-			'rgba(0,0,0,0.5)"': "rgba(0,0,0,0.5)",
+			# Unbalanced parentheses
+			"rgba(0,0,0,0.5": r"rgba\(0,0,0,0.5",
+			"rgba(0,0,0,0.5))": r"rgba\(0,0,0,0.5\)\)",
+			# Unbalanced quotes
+			"'center": r"\'center",
+			'"center': r"\"center",
 		}
 
 		for input_val, expected in test_cases.items():
diff --git a/builder/utils.py b/builder/utils.py
index d4c196b79..2c0916a7b 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -422,8 +422,12 @@ def camel_case_to_kebab_case(text, remove_spaces=False):
 def sanitize_style_value(value):
 	if not isinstance(value, str):
 		return value
-	# Remove stray trailing/leading quotes
-	value = value.strip().strip('"').strip("'")
+	if value.count("(") != value.count(")"):
+		value = value.replace("(", "\\(").replace(")", "\\)")
+	if value.count("'") % 2 != 0:
+		value = value.replace("'", "\\'")
+	if value.count('"') % 2 != 0:
+		value = value.replace('"', '\\"')
 	return value
 
 

From e6950386bb2e77817d8dccdf19d736ce349cab05 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 17 Mar 2026 15:10:45 +0530
Subject: [PATCH 457/547] fix: Ensure innerHTML is a string

---
 builder/builder/doctype/builder_page/builder_page.py | 3 +++
 frontend/components.d.ts                             | 1 -
 frontend/src/block.ts                                | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 1d0ea04db..ae18e8030 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -798,6 +798,9 @@ def add_inner_html_content(tag: bs.Tag, block: dict, state: dict):
 	"""Add inner HTML content to the tag."""
 	inner_content = block.get("innerHTML")
 	if inner_content:
+		# Ensure inner_content is a string before passing to BeautifulSoup
+		if not isinstance(inner_content, (str, bytes)):
+			inner_content = str(inner_content)
 		inner_soup = bs.BeautifulSoup(inner_content, "html.parser")
 		set_fonts_from_html(inner_soup, state["font_map"])
 		tag.append(inner_soup)
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 54bd58926..4427c07db 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -70,7 +70,6 @@ declare module 'vue' {
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     Folder: typeof import('./src/components/Icons/Folder.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
-    GenericControl: typeof import('./src/components/Controls/GenericControl.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
     GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 9a759361b..7f20b89ea 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -757,7 +757,7 @@ class Block implements BlockOptions {
 		if (!innerHTML && this.isExtendedFromComponent()) {
 			innerHTML = this.referenceComponent?.getInnerHTML() || "";
 		}
-		return innerHTML;
+		return String(innerHTML);
 	}
 	getText(): string {
 		const editor = this.getEditor();

From 4dd12124bb28b3473990b1f70b607e33935c3ba2 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 18 Mar 2026 10:31:56 +0530
Subject: [PATCH 458/547] fix: resolve svg paste issue in Firefox

Firefox clears or restricts access to e.clipboardData after the synchronous
event handler completes. Because clipboard data was being accessed after an
await, it resulted in empty text during paste operations.

This change extracts clipboard text synchronously before invoking the async
paste handler, ensuring consistent behavior across browsers.
---
 frontend/src/utils/useBuilderEvents.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index c6bedeebe..7da71c2d7 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -104,9 +104,10 @@ export function useBuilderEvents(
 			return;
 		}
 
+		let text = e.clipboardData?.getData("text/plain") as string || "";
+
 		await pasteBuilderBlocks(e, window.location.origin);
 
-		let text = e.clipboardData?.getData("text/plain") as string;
 		if (!text) {
 			return;
 		}

From 01159117e5ffccba3569ef1524f16b55aaa45fc9 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 18 Mar 2026 11:36:54 +0530
Subject: [PATCH 459/547] fix: Show autocomplete for color in background
 handler

continuation of https://github.com/frappe/builder/pull/521
---
 frontend/src/components/BackgroundHandler.vue |  13 +-
 .../src/components/Controls/Autocomplete.vue  | 142 +++++++++---------
 .../src/components/Controls/ColorInput.vue    |  79 ++--------
 .../src/components/Controls/ColorPicker.vue   |  49 ++++--
 frontend/src/utils/colorOptions.ts            |  62 ++++++++
 5 files changed, 189 insertions(+), 156 deletions(-)
 create mode 100644 frontend/src/utils/colorOptions.ts

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index a0113702e..59b0d810d 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -43,14 +43,11 @@
 
 				<!-- Color Tab -->
 				<div v-if="activeTab === 'color'" class="w-full space-y-4">
-					<ColorPicker renderMode="inline" :modelValue="backgroundColor" @update:modelValue="setBGColor" />
-					<BuilderButton
-						:disabled="!backgroundColor"
-						class="w-full"
-						variant="subtle"
-						@click="setBGColor(null)">
-						Clear Color
-					</BuilderButton>
+					<ColorPicker
+						renderMode="inline"
+						:modelValue="backgroundColor"
+						:showInput="true"
+						@update:modelValue="setBGColor" />
 				</div>
 
 				<!-- Image Tab -->
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 7dc638a3a..eb4655fc6 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -35,59 +35,61 @@
 				</Button>
 			</div>
 
-			<ComboboxContent
-				@after-enter="
-					() => {
-						fixedPositionStyles = getFixedPositionStyles();
-					}
-				"
-				@after-leave="
-					() => {
-						fixedPositionStyles = {};
-					}
-				"
-				:class="referenceElementSelector ? 'fixed' : 'absolute'"
-				:style="fixedPositionStyles"
-				ref="contentRef"
-				class="z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
-				<div class="overflow-y-auto p-1">
-					<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
-						<ComboboxSeparator
-							v-if="option.value.startsWith('_separator_line')"
-							class="bg-outline-gray-2 mx-2 my-1 h-px" />
-						<ComboboxLabel
-							v-else-if="option.value.startsWith('_separator')"
-							class="px-2 py-1 text-xs font-semibold text-ink-gray-5">
-							{{ option.label }}
-						</ComboboxLabel>
-						<ComboboxItem
+			<Teleport to="body" :disabled="!referenceElementSelector">
+				<ComboboxContent
+					@after-enter="
+						() => {
+							fixedPositionStyles = getFixedPositionStyles();
+						}
+					"
+					@after-leave="
+						() => {
+							fixedPositionStyles = {};
+						}
+					"
+					:class="referenceElementSelector ? 'fixed' : 'absolute'"
+					:style="fixedPositionStyles"
+					ref="contentRef"
+					class="z-50 mt-1 max-h-80 w-full overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white shadow-xl">
+					<div class="overflow-y-auto p-1">
+						<template v-for="(option, index) in displayOptions" :key="`${option.value}-${index}`">
+							<ComboboxSeparator
+								v-if="option.value.startsWith('_separator_line')"
+								class="bg-outline-gray-2 mx-2 my-1 h-px" />
+							<ComboboxLabel
+								v-else-if="option.value.startsWith('_separator')"
+								class="px-2 py-1 text-xs font-semibold text-ink-gray-5">
+								{{ option.label }}
+							</ComboboxLabel>
+							<ComboboxItem
+								v-else
+								:value="option.value"
+								:disabled="option.disabled"
+								class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
+								<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
+								<span class="w-full flex-1 truncate">{{ option.label }}</span>
+								<component
+									v-if="option.suffix"
+									:is="option.suffix"
+									class="h-4 min-w-4 flex-shrink-0 opacity-60 group-hover:opacity-100"
+									@mousedown.stop.prevent
+									@click.stop.prevent />
+							</ComboboxItem>
+						</template>
+					</div>
+					<div v-if="actionButton" class="border-t border-outline-gray-2 bg-surface-gray-1">
+						<component v-if="actionButton.component" :is="actionButton.component" @change="refreshOptions" />
+						<BuilderButton
 							v-else
-							:value="option.value"
-							:disabled="option.disabled"
-							class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
-							<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
-							<span class="w-full flex-1 truncate">{{ option.label }}</span>
-							<component
-								v-if="option.suffix"
-								:is="option.suffix"
-								class="h-4 min-w-4 flex-shrink-0 opacity-60 group-hover:opacity-100"
-								@mousedown.stop.prevent
-								@click.stop.prevent />
-						</ComboboxItem>
-					</template>
-				</div>
-				<div v-if="actionButton" class="border-t border-outline-gray-2 bg-surface-gray-1">
-					<component v-if="actionButton.component" :is="actionButton.component" @change="refreshOptions" />
-					<BuilderButton
-						v-else
-						:icon-left="actionButton.icon"
-						variant="ghost"
-						class="w-full justify-start rounded-none text-sm"
-						@click="actionButton.handler">
-						{{ actionButton.label }}
-					</BuilderButton>
-				</div>
-			</ComboboxContent>
+							:icon-left="actionButton.icon"
+							variant="ghost"
+							class="w-full justify-start rounded-none text-sm"
+							@click="actionButton.handler">
+							{{ actionButton.label }}
+						</BuilderButton>
+					</div>
+				</ComboboxContent>
+			</Teleport>
 		</div>
 	</ComboboxRoot>
 </template>
@@ -104,7 +106,7 @@ import {
 	ComboboxSeparator,
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
 interface Option {
 	label: string;
@@ -235,36 +237,40 @@ watch(
 	(val) => (searchQuery.value = val ?? ""),
 	{ immediate: true },
 );
+
+watch(isOpen, (val) => {
+	if (val && props.referenceElementSelector) {
+		nextTick(() => {
+			fixedPositionStyles.value = getFixedPositionStyles();
+		});
+	}
+});
+
 if (props.getOptions) refreshOptions();
 
 // in Popover, absolute positioning keeps all options within the Popover taking extra space
 // making it fixed makes it float above Popover container
 const getFixedPositionStyles = () => {
 	if (props.referenceElementSelector) {
-		const fixedToElRect = (
-			comboboxInput.value?.$el.closest(props.referenceElementSelector) as HTMLElement
-		)?.getBoundingClientRect();
-		const comboboxInputRect = comboboxInput.value?.$el.getBoundingClientRect();
+		const comboboxInputRect = containerRef.value?.getBoundingClientRect();
 		const contentRect = contentRef.value?.$el?.getBoundingClientRect
 			? contentRef.value.$el.getBoundingClientRect()
 			: null;
-		if (!fixedToElRect || !comboboxInputRect) {
+		if (!comboboxInputRect) {
 			return {};
 		}
-		// Calculate top position based on available space: if there's not enough space below, position it above
-		const top =
-			contentRect && contentRect.top + contentRect?.height > window.innerHeight
-				? "unset"
-				: comboboxInputRect.top - fixedToElRect.top + comboboxInputRect.height + "px";
-		const bottom =
-			contentRect && contentRect.top + contentRect?.height > window.innerHeight
-				? fixedToElRect.bottom - comboboxInputRect.top + 8 + "px"
-				: "unset";
+		// Calculate positions relative to viewport and use with Teleport to body
+		const isAbove = contentRect && comboboxInputRect.bottom + (contentRect?.height || 0) > window.innerHeight;
+		const top = isAbove ? "unset" : comboboxInputRect.bottom + 4 + "px";
+		const bottom = isAbove ? window.innerHeight - comboboxInputRect.top + 4 + "px" : "unset";
+		const left = comboboxInputRect.left + "px";
+
 		return {
 			top,
 			bottom,
+			left,
 			width: comboboxInputRect.width + "px",
-			zIndex: "10",
+			zIndex: "999",
 		};
 	}
 	return {};
diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 970b131e3..29099ab21 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -64,22 +64,12 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import NewBuilderVariable from "@/components/Modals/NewBuilderVariable.vue";
 import { BuilderVariable } from "@/types/Builder/BuilderVariable";
+import { getColorVariableOptions } from "@/utils/colorOptions";
 import { getRGB, toKebabCase } from "@/utils/helpers";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
 import { useDark } from "@vueuse/core";
 import { Tooltip } from "frappe-ui";
-import {
-	computed,
-	ComputedRef,
-	defineComponent,
-	h,
-	nextTick,
-	onMounted,
-	ref,
-	shallowRef,
-	useAttrs,
-	watch,
-} from "vue";
+import { computed, ComputedRef, nextTick, onMounted, ref, useAttrs, watch } from "vue";
 import ColorPicker from "./ColorPicker.vue";
 import InputLabel from "./InputLabel.vue";
 
@@ -239,60 +229,17 @@ const getOptions = async (query: string) => {
 		return [];
 	}
 
-	let processedQuery = query.replace(/^(--|var|\s+)/, "");
-	processedQuery = processedQuery.replace(/^--|\(|\s+/g, "");
-	const options = variables.value
-		.filter((builderVariable: BuilderVariable) => {
-			const name = (builderVariable.variable_name || "").toLowerCase();
-			const queryLower = processedQuery.toLowerCase();
-			return queryLower === "" || name.includes(queryLower);
-		})
-		.map((builderVariable: BuilderVariable) => {
-			const varName = `var(--${toKebabCase(builderVariable?.variable_name || "")})`;
-			const resolvedLightColor = resolveVariableValue(varName);
-			const resolvedDarkColor = resolveVariableValue(varName, true);
-			return {
-				label: `${builderVariable?.variable_name || ""}`,
-				value: varName,
-				prefix: shallowRef(
-					defineComponent({
-						setup() {
-							return () =>
-								h("div", {
-									class: "h-4 w-4 rounded shadow-sm border border-outline-gray-1 flex-shrink-0",
-									style: { background: isDark.value ? resolvedDarkColor : resolvedLightColor },
-								});
-						},
-					}),
-				),
-				// edit
-				suffix: !builderVariable.is_standard
-					? shallowRef(
-							defineComponent({
-								setup() {
-									const openEdit = () => {
-										newVariable.value = { ...builderVariable };
-										showVariableDialog.value = true;
-									};
-									return () =>
-										h(
-											"Button",
-											{
-												class: "hidden group-hover:inline-block",
-												onClick: (e: Event) => {
-													colorPickerRef.value?.togglePopover(false);
-													openEdit();
-												},
-											},
-											"Edit",
-										);
-								},
-							}),
-						)
-					: undefined,
-			};
-		});
-	return options;
+	return getColorVariableOptions(
+		query,
+		variables.value,
+		resolveVariableValue,
+		isDark.value,
+		(builderVariable) => {
+			colorPickerRef.value?.togglePopover(false);
+			newVariable.value = { ...builderVariable };
+			showVariableDialog.value = true;
+		},
+	);
 };
 
 watch(variables, () => {
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index f0e217dc1..ebc83d144 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -18,7 +18,9 @@
 				:isOpen="isOpen"></slot>
 		</template>
 		<template #body="{ close }">
-			<div ref="colorPicker" class="flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg">
+			<div
+				ref="colorPicker"
+				class="color-picker-container flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg">
 				<div
 					ref="colorMap"
 					:style="colorMapStyle"
@@ -54,12 +56,13 @@
 						<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
 					</div>
 				</div>
-				<Input
+				<Autocomplete
 					v-if="showInput"
-					type="text"
 					:modelValue="modelValue"
-					class="mt-2 w-full text-sm"
+					class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
 					placeholder="Set Color"
+					:getOptions="getOptions"
+					referenceElementSelector=".color-picker-container"
 					@update:modelValue="handleInputChange" />
 			</div>
 		</template>
@@ -67,11 +70,12 @@
 	<div
 		v-else
 		ref="colorPicker"
-		:class="
+		:class="[
+			'color-picker-container',
 			renderMode === 'inline'
 				? 'flex w-full flex-col gap-2'
-				: 'flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg'
-		">
+				: 'flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg',
+		]">
 		<div
 			ref="colorMap"
 			:style="colorMapStyle"
@@ -107,27 +111,34 @@
 				<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
 			</div>
 		</div>
-		<Input
+		<Autocomplete
 			v-if="showInput"
-			type="text"
 			:modelValue="modelValue"
-			class="mt-2 w-full text-sm"
+			class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
 			placeholder="Set Color"
+			:getOptions="getOptions"
+			referenceElementSelector=".color-picker-container"
 			@update:modelValue="handleInputChange" />
 	</div>
 </template>
 <script setup lang="ts">
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import EyeDropperIcon from "@/components/Icons/EyeDropper.vue";
 import useCanvasStore from "@/stores/canvasStore";
+import { getColorVariableOptions } from "@/utils/colorOptions";
 import { HSVToHex, HexToHSV, getRGB } from "@/utils/helpers";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
-import { clamp, useEyeDropper } from "@vueuse/core";
+import { clamp, useDark, useEyeDropper } from "@vueuse/core";
 import { Popover } from "frappe-ui";
 import { Ref, StyleValue, computed, nextTick, ref, watch } from "vue";
 
 type CSSColorValue = HashString | RGBString | `var(--${string})`;
 
-const { resolveVariableValue } = useBuilderVariable();
+const { variables, resolveVariableValue } = useBuilderVariable();
+
+const isDark = useDark({
+	attribute: "data-theme",
+});
 
 const canvasStore = useCanvasStore();
 const hueMap = ref(null) as unknown as Ref<HTMLDivElement>;
@@ -177,6 +188,10 @@ const modelColor = computed(() => {
 	return getRGB(resolvedColor);
 });
 
+const getOptions = async (query: string) => {
+	return getColorVariableOptions(query, variables.value, resolveVariableValue, isDark.value);
+};
+
 const emit = defineEmits(["update:modelValue"]);
 
 const colors = [
@@ -242,12 +257,18 @@ const handleColorPaletteClick = (color: HashString) => {
 	updateColor();
 };
 
-const handleInputChange = (color: HashString) => {
+const handleInputChange = (color: string | null) => {
 	if (!color) {
 		emit("update:modelValue", null);
 		return;
 	}
-	setSelectorPosition(color);
+
+	if (color.startsWith("var(--") || color.startsWith("--")) {
+		emit("update:modelValue", color.startsWith("var(--") ? color : `var(${color})`);
+		return;
+	}
+
+	setSelectorPosition(color as HashString);
 	updateColor();
 };
 
diff --git a/frontend/src/utils/colorOptions.ts b/frontend/src/utils/colorOptions.ts
new file mode 100644
index 000000000..1213f50bb
--- /dev/null
+++ b/frontend/src/utils/colorOptions.ts
@@ -0,0 +1,62 @@
+import { BuilderVariable } from "@/types/Builder/BuilderVariable";
+import { toKebabCase } from "@/utils/helpers";
+import { defineComponent, h, shallowRef } from "vue";
+
+export function getColorVariableOptions(
+	query: string,
+	variables: BuilderVariable[],
+	resolveVariableValue: (val: string, dark?: boolean) => string,
+	isDark: boolean,
+	onEdit?: (variable: BuilderVariable) => void,
+) {
+	let processedQuery = query.replace(/^(--|var|\s+)/, "");
+	processedQuery = processedQuery.replace(/^--|\(|\s+/g, "");
+	
+	return variables
+		.filter((builderVariable: BuilderVariable) => {
+			const name = (builderVariable.variable_name || "").toLowerCase();
+			const queryLower = processedQuery.toLowerCase();
+			return queryLower === "" || name.includes(queryLower);
+		})
+		.map((builderVariable: BuilderVariable) => {
+			const varName = `var(--${toKebabCase(builderVariable?.variable_name || "")})`;
+			const resolvedLightColor = resolveVariableValue(varName);
+			const resolvedDarkColor = resolveVariableValue(varName, true);
+			
+			return {
+				label: `${builderVariable?.variable_name || ""}`,
+				value: varName,
+				prefix: shallowRef(
+					defineComponent({
+						setup() {
+							return () =>
+								h("div", {
+									class: "h-4 w-4 rounded shadow-sm border border-outline-gray-1 flex-shrink-0",
+									style: { background: isDark ? resolvedDarkColor : resolvedLightColor },
+								});
+						},
+					}),
+				),
+				suffix:
+					!builderVariable.is_standard && onEdit
+						? shallowRef(
+								defineComponent({
+									setup() {
+										return () =>
+											h(
+												"Button",
+												{
+													class: "hidden group-hover:inline-block",
+													onClick: (e: Event) => {
+														onEdit(builderVariable);
+													},
+												},
+												"Edit",
+											);
+									},
+								}),
+							)
+						: undefined,
+			};
+		});
+}

From 785ff99079192dae66c950dfa4fe2a30512df4eb Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 18 Mar 2026 11:56:44 +0530
Subject: [PATCH 460/547] fix: Move angle selector beside color stop selector

to avoid layout shift on toggling linear to radial
---
 .../components/Controls/GradientEditor.vue    | 94 ++++++++++---------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/Controls/GradientEditor.vue b/frontend/src/components/Controls/GradientEditor.vue
index 6f54e8f20..2ccbb4d5c 100644
--- a/frontend/src/components/Controls/GradientEditor.vue
+++ b/frontend/src/components/Controls/GradientEditor.vue
@@ -10,7 +10,54 @@
 				:modelValue="gradient.type"
 				@update:modelValue="updateType"
 				class="flex-1" />
-			<div v-if="gradient.type === 'linear-gradient'" class="flex items-center gap-2">
+		</div>
+
+		<div class="flex items-center gap-4">
+			<!-- Gradient Preview / Stop Bar -->
+			<div
+				class="shadow-inner relative h-5 w-full rounded border border-outline-gray-2"
+				:style="barPreviewStyle"
+				ref="barRef">
+				<div class="absolute inset-0 cursor-copy" @click.self="addStopAtX"></div>
+				<div
+					v-for="(stop, index) in gradient.stops"
+					:key="index"
+					class="absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
+					:style="{ left: stop.position + '%' }">
+					<Popover placement="top" :offset="10">
+						<template #target="{ togglePopover }">
+							<div
+								class="size-4 cursor-pointer rounded-full border-2 border-white shadow-md ring-1 ring-black/20 transition-transform hover:scale-110 focus:outline-none"
+								:style="{ backgroundColor: stop.color }"
+								@mousedown="handleStopMouseDown(index, $event)"
+								@click="(e) => !hasMoved && togglePopover()" />
+						</template>
+						<template #body="{ close }">
+							<div class="rounded-lg border border-outline-gray-2 bg-surface-white p-3 shadow-xl">
+								<ColorPicker
+									renderMode="inline"
+									:showInput="true"
+									:modelValue="stop.color"
+									@update:modelValue="(val) => updateStopColor(index, val)" />
+								<div class="mt-2 flex items-center gap-2">
+									<BuilderButton
+										variant="subtle"
+										label="Remove Stop"
+										class="w-full"
+										:disabled="gradient.stops.length <= 2"
+										@click="
+											() => {
+												close();
+												removeStop(index);
+											}
+										" />
+								</div>
+							</div>
+						</template>
+					</Popover>
+				</div>
+			</div>
+			<div v-if="gradient.type === 'linear-gradient'" class="flex items-center gap-1">
 				<AnglePicker :modelValue="parseInt(angleValue)" @update:modelValue="updateAngle" />
 				<Input
 					type="text"
@@ -26,51 +73,6 @@
 			</div>
 		</div>
 
-		<!-- Gradient Preview / Stop Bar -->
-		<div
-			class="shadow-inner relative h-5 w-full rounded border border-outline-gray-2"
-			:style="barPreviewStyle"
-			ref="barRef">
-			<div class="absolute inset-0 cursor-copy" @click.self="addStopAtX"></div>
-			<div
-				v-for="(stop, index) in gradient.stops"
-				:key="index"
-				class="absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
-				:style="{ left: stop.position + '%' }">
-				<Popover placement="top" :offset="10">
-					<template #target="{ togglePopover }">
-						<div
-							class="size-4 cursor-pointer rounded-full border-2 border-white shadow-md ring-1 ring-black/20 transition-transform hover:scale-110 focus:outline-none"
-							:style="{ backgroundColor: stop.color }"
-							@mousedown="handleStopMouseDown(index, $event)"
-							@click="(e) => !hasMoved && togglePopover()" />
-					</template>
-					<template #body="{ close }">
-						<div class="rounded-lg border border-outline-gray-2 bg-surface-white p-3 shadow-xl">
-							<ColorPicker
-								renderMode="inline"
-								:showInput="true"
-								:modelValue="stop.color"
-								@update:modelValue="(val) => updateStopColor(index, val)" />
-							<div class="mt-2 flex items-center gap-2">
-								<BuilderButton
-									variant="subtle"
-									label="Remove Stop"
-									class="w-full"
-									:disabled="gradient.stops.length <= 2"
-									@click="
-										() => {
-											close();
-											removeStop(index);
-										}
-									" />
-							</div>
-						</div>
-					</template>
-				</Popover>
-			</div>
-		</div>
-
 		<!-- Presets -->
 		<div class="flex flex-wrap gap-2">
 			<div

From 23fea23e0b2a0e57323b941b6c901ead893be223 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 19 Mar 2026 12:52:15 +0530
Subject: [PATCH 461/547] fix: reorder props merging in computed properties

---
 frontend/src/components/BuilderBlock.vue | 4 ++--
 frontend/src/utils/helpers.ts            | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 91c4b943a..f1cfbe312 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -399,9 +399,9 @@ const allResolvedProps = computed(() => {
 	}, {} as Record<string, any>);
 
 	return {
-		...defaultProps,
-		...blockProps,
 		...parentProps,
+		...blockProps,
+		...defaultProps,
 	};
 });
 
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index fa276149c..151f38c4c 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1228,7 +1228,6 @@ const getPropValue = (propName: string, block: Block, blockUid?: string | null):
 			}
 			const newMatchingProp = parentProps[matchingProp.value];
 			if (!newMatchingProp.block) return undefined;
-			console.log("here", newMatchingProp, matchingProp);
 			return getPropValue(matchingProp.value, newMatchingProp.block, newMatchingProp.blockUid);
 		}
 		const getDataScriptValue = (path: string) => {
@@ -1341,9 +1340,8 @@ function executeBlockClientScriptUnrestricted(
 	try {
 		document.querySelectorAll(`[data-created-by='${blockUid}']`).forEach((el) => el.remove());
 		fn.call(thisElement, context);
-		console.log("Executed unrestricted user script");
 	} catch (e) {
-		console.error("Error in user script 2:", e);
+		console.error("Error in user script (unrestricted):", e);
 		// toast.warning("An error occurred while executing block script: " + (e instanceof Error ? e.message : ""));
 	}
 }

From ad716a7c7929e22e03ea6f2c6c7792abeb647a07 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 19 Mar 2026 13:00:00 +0530
Subject: [PATCH 462/547] fix: correct attribute filtering and enhance data
 watching in BuilderBlock

---
 frontend/src/components/BuilderBlock.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index f1cfbe312..8d3bfb987 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -181,7 +181,7 @@ const attributes = computed(() => {
 	}
 
 	Object.keys(additionalAttributes).forEach((key) => {
-		if (!RESTRICTED_ATTRIBS.includes(key)) {
+		if (RESTRICTED_ATTRIBS.includes(key)) {
 			delete additionalAttributes[key];
 		}
 	});
@@ -477,12 +477,18 @@ watch(
 				});
 			});
 	},
-	{ immediate: true },
+	{ immediate: true, deep: true },
 );
 
 watchEffect(() => {
-	blockDataStore.setPageData(uidToUse, props.data || {});
 	blockDataStore.setBlockData(uidToUse, props.blockData || {}, "passedDown");
+});
+
+watchEffect(() => {
+	blockDataStore.setPageData(uidToUse, props.data || {});
+});
+
+watchEffect(() => {
 	blockDataStore.setBlockDefaultProps(uidToUse, props.defaultProps || {});
 });
 

From 60f937bbda2dd8e4425211268f86074998dc9d37 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 19 Mar 2026 13:12:00 +0530
Subject: [PATCH 463/547] feat: allow dynamic values for std. props

all std. props other than arrays and objects can now be assigned dynamic values.
---
 .../StandardPropsInputSection.ts              | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
index 489ed65d7..c4fc961cc 100644
--- a/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
+++ b/frontend/src/components/BlockPropertySections/StandardPropsInputSection.ts
@@ -15,18 +15,9 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 	const type = propDetails.propOptions?.type || "string";
 	let map = {};
 	switch (type) {
-		case "string":
-		case "number":
-			map = {
-				enableStates: false,
-				allowDynamicValue: true,
-			};
-			break;
 		case "boolean":
 			map = {
 				component: OptionToggle,
-				enableStates: false,
-				allowDynamicValue: true,
 				options: [
 					{ label: propDetails.propOptions?.options?.trueLabel || "True", value: true },
 					{ label: propDetails.propOptions?.options?.falseLabel || "False", value: false },
@@ -36,7 +27,6 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 		case "select":
 			map = {
 				type: "select",
-				enableStates: false,
 				options:
 					propDetails.propOptions?.options?.options?.map((item: any) => ({
 						label: item,
@@ -47,8 +37,6 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 		case "image":
 			map = {
 				component: ImageUploadInput,
-				enableStates: false,
-				allowDynamicValue: true,
 				imageURL: blockController.getBlockProps()[propName].value as string,
 				imageFit:
 					propDetails.propOptions?.options?.imageFit ||
@@ -63,6 +51,8 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 	}
 	map = {
 		label: propDetails.label || propName,
+		enableStates: false,
+		allowDynamicValue: true,
 		dynamicValueFilterOptions: {
 			excludeOwnProps: true,
 			excludeOwnBlockData: true,
@@ -76,7 +66,11 @@ const getPropsMap = (propName: string, propDetails: BlockProps[string]) => {
 			}
 		},
 		setDynamicValue: (key: string | null, comesFrom: BlockProps[string]["comesFrom"]) => {
-			blockController.setBlockProp(propName, { value: key || "", isDynamic: key !== null, comesFrom });
+			blockController.setBlockProp(propName, {
+				value: key || "",
+				isDynamic: !!key,
+				comesFrom: key ? comesFrom : null,
+			});
 		},
 		setModelValue: (value: any) => {
 			if (value == "") value = null;
@@ -131,7 +125,8 @@ const getStandardPropsInputSection = () => {
 	for (const [propKey, propDetails] of Object.entries(standardProps)) {
 		const propType = propDetails.propOptions?.type;
 		const component =
-			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) || BasePropertyControl;
+			(propType === "array" || propType === "object" ? componentMap[propType] : undefined) ||
+			BasePropertyControl;
 		const getProps = () => {
 			const props = getPropsMap(propKey, propDetails);
 			return props;

From e7d1260b6c3681018e293d601408722b1b2f2885 Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Thu, 19 Mar 2026 15:25:39 +0530
Subject: [PATCH 464/547] refactor: Use InlineInput for props options (#527)

---
 .../components/PropsOptions/ArrayOptions.vue  | 23 ++++----
 .../PropsOptions/BooleanOptions.vue           | 38 ++++++-------
 .../components/PropsOptions/NumberOptions.vue | 41 +++++++------
 .../components/PropsOptions/ObjectOptions.vue | 24 ++++----
 .../components/PropsOptions/SelectOptions.vue | 15 ++---
 .../components/PropsOptions/StringOptions.vue | 15 +++--
 .../src/components/PropsPopoverContent.vue    | 57 ++++++++++---------
 7 files changed, 111 insertions(+), 102 deletions(-)

diff --git a/frontend/src/components/PropsOptions/ArrayOptions.vue b/frontend/src/components/PropsOptions/ArrayOptions.vue
index 123c24cd2..e12b2d71f 100644
--- a/frontend/src/components/PropsOptions/ArrayOptions.vue
+++ b/frontend/src/components/PropsOptions/ArrayOptions.vue
@@ -1,22 +1,22 @@
 <template>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Min. Items</InputLabel>
-		<Input
-			:model-value="minItems"
-			@update:model-value="handleMinItemsChange"
+		<InlineInput
+			label="Min. Items"
+			:modelValue="minItems"
+			@update:modelValue="handleMinItemsChange"
 			@input="handleMinItemsChange"
-			placeholder="Enter min number of items"></Input>
+			placeholder="Enter min number of items"></InlineInput>
 	</div>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Max. Items</InputLabel>
-		<Input
-			:model-value="maxItems"
-			@update:model-value="handleMaxItemsChange"
+		<InlineInput
+			label="Max. Items"
+			:modelValue="maxItems"
+			@update:modelValue="handleMaxItemsChange"
 			@input="handleMaxItemsChange"
-			placeholder="Enter max number of items"></Input>
+			placeholder="Enter max number of items"></InlineInput>
 	</div>
 	<div class="flex flex-col gap-3">
-		<InputLabel>Default Items</InputLabel>
+		<InputLabel class="w-[88px] shrink-0">Default Items</InputLabel>
 		<ArrayEditor :arr @update:arr="handleArrChange" />
 	</div>
 </template>
@@ -28,6 +28,7 @@ import ArrayEditor from "@/components/ArrayEditor.vue";
 import { nextTick, ref, watch } from "vue";
 import { Ref } from "vue";
 import { toast } from "vue-sonner";
+import InlineInput from "../Controls/InlineInput.vue";
 
 const props = defineProps<{
 	options: Record<string, any>;
diff --git a/frontend/src/components/PropsOptions/BooleanOptions.vue b/frontend/src/components/PropsOptions/BooleanOptions.vue
index fa19ec057..6e36cab0c 100644
--- a/frontend/src/components/PropsOptions/BooleanOptions.vue
+++ b/frontend/src/components/PropsOptions/BooleanOptions.vue
@@ -1,23 +1,24 @@
 <template>
 	<div class="flex items-center justify-between">
-		<InputLabel>True Label</InputLabel>
-		<Input
-			:model-value="trueLabel"
-			@update:model-value="handleTrueLabelChange"
-			@input="handleTrueLabelChange"
-			placeholder="Enter true Label display"></Input>
+		<InlineInput
+			label="True Label"
+			class="w-full"
+			:modelValue="trueLabel"
+			@update:modelValue="handleTrueLabelChange"
+			placeholder="Enter true label display"></InlineInput>
 	</div>
 	<div class="flex items-center justify-between">
-		<InputLabel>False Label</InputLabel>
-		<Input
-			:model-value="falseLabel"
-			@update:model-value="handleFalseLabelChange"
-			@input="handleFalseLabelChange"
-			placeholder="Enter false Label display"></Input>
+		<InlineInput
+			label="False Label"
+			class="w-full"
+			:modelValue="falseLabel"
+			@update:modelValue="handleFalseLabelChange"
+			placeholder="Enter false label display"></InlineInput>
 	</div>
 	<div class="flex items-center justify-between">
-		<InputLabel>Default Value</InputLabel>
-		<Input
+		<InlineInput
+			label="Default Value"
+			class="w-full"
 			type="select"
 			:options="[
 				{
@@ -29,16 +30,15 @@
 					value: 'false',
 				},
 			]"
-			:model-value="defaultValue"
-			@update:model-value="handleDefaultValueChange"
-			placeholder="Enter default value"></Input>
+			:modelValue="defaultValue"
+			@update:modelValue="handleDefaultValueChange"
+			placeholder="Enter default value"></InlineInput>
 	</div>
 </template>
 
 <script setup lang="ts">
-import InputLabel from "@/components/Controls/InputLabel.vue";
-import Input from "@/components/Controls/Input.vue";
 import { nextTick, ref, watch } from "vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 
 const props = defineProps<{
 	options: Record<string, any>;
diff --git a/frontend/src/components/PropsOptions/NumberOptions.vue b/frontend/src/components/PropsOptions/NumberOptions.vue
index 99c12a287..a16cda73d 100644
--- a/frontend/src/components/PropsOptions/NumberOptions.vue
+++ b/frontend/src/components/PropsOptions/NumberOptions.vue
@@ -1,35 +1,42 @@
 <template>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Min. Value</InputLabel>
-		<Input
-			:model-value="minValue"
-			@update:model-value="handleMinValueChange"
+		<InlineInput
+			label="Min. Value"
+			:modelValue="minValue"
+			@update:modelValue="handleMinValueChange"
 			@input="handleMinValueChange"
-			placeholder="Enter min value"></Input>
+			placeholder="Enter min value"></InlineInput>
 	</div>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Max. Value</InputLabel>
-		<Input
-			:model-value="maxValue"
+		<InlineInput
+			label="Max. Value"
+			:modelValue="maxValue"
+			@update:modelValue="handleMaxValueChange"
+			placeholder="Enter max value"></InlineInput>
+	</div>
+	<div class="flex items-center justify-between">
+		<InlineInput
+			label="Default Value"
+			:modelValue="defaultValue"
+			@update:modelValue="handleDefaultValueChange"
+			@input="handleDefaultValueChange"
 			@update:model-value="handleMaxValueChange"
-			@input="handleMaxValueChange"
-			placeholder="Enter max value"></Input>
+			placeholder="Enter max value"></InlineInput>
 	</div>
 	<div class="flex items-center justify-between">
-		<InputLabel>Default Value</InputLabel>
-		<Input
-			:model-value="defaultValue"
-			@update:model-value="handleDefaultValueChange"
+		<InlineInput
+			label="Default Value"
+			:modelValue="defaultValue"
+			@update:modelValue="handleDefaultValueChange"
 			@input="handleDefaultValueChange"
-			placeholder="Enter default value"></Input>
+			placeholder="Enter default value"></InlineInput>
 	</div>
 </template>
 
 <script setup lang="ts">
-import InputLabel from "@/components/Controls/InputLabel.vue";
-import Input from "@/components/Controls/Input.vue";
 import { nextTick, ref, watch } from "vue";
 import { toast } from "vue-sonner";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 
 const props = defineProps<{
 	options: Record<string, any>;
diff --git a/frontend/src/components/PropsOptions/ObjectOptions.vue b/frontend/src/components/PropsOptions/ObjectOptions.vue
index 6dcde5993..33f4368f4 100644
--- a/frontend/src/components/PropsOptions/ObjectOptions.vue
+++ b/frontend/src/components/PropsOptions/ObjectOptions.vue
@@ -1,30 +1,30 @@
 <template>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Min. Items</InputLabel>
-		<Input
-			:model-value="minItems"
-			@update:model-value="handleMinItemsChange"
+		<InlineInput
+			label="Min. Items"
+			:modelValue="minItems"
+			@update:modelValue="handleMinItemsChange"
 			@input="handleMinItemsChange"
-			placeholder="Enter min number of items"></Input>
+			placeholder="Enter min number of items"></InlineInput>
 	</div>
 	<div v-if="false" class="flex items-center justify-between">
-		<InputLabel>Max. Items</InputLabel>
-		<Input
-			:model-value="maxItems"
-			@update:model-value="handleMaxItemsChange"
+		<InlineInput
+			label="Max. Items"
+			:modelValue="maxItems"
+			@update:modelValue="handleMaxItemsChange"
 			@input="handleMaxItemsChange"
-			placeholder="Enter max number of items"></Input>
+			placeholder="Enter max number of items"></InlineInput>
 	</div>
 	<div class="flex flex-col gap-3">
-		<InputLabel>Default Items</InputLabel>
+		<InputLabel class="w-[88px] shrink-0">Default Items</InputLabel>
 		<ObjectEditor :obj="obj" @update:obj="handleObjChange" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
-import Input from "@/components/Controls/Input.vue";
 import ObjectEditor from "../ObjectEditor.vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 
 import { nextTick, ref, watch } from "vue";
 import { Ref } from "vue";
diff --git a/frontend/src/components/PropsOptions/SelectOptions.vue b/frontend/src/components/PropsOptions/SelectOptions.vue
index 9256bf68c..59ec109be 100644
--- a/frontend/src/components/PropsOptions/SelectOptions.vue
+++ b/frontend/src/components/PropsOptions/SelectOptions.vue
@@ -1,24 +1,25 @@
 <template>
 	<div class="flex flex-col gap-3">
-		<InputLabel>Options</InputLabel>
+		<InputLabel class="w-[88px] shrink-0">Options</InputLabel>
 		<ArrayEditor :arr="options" @update:arr="handleOptionsChange" />
 	</div>
 	<div class="flex items-center justify-between">
-		<InputLabel>Default Value</InputLabel>
-		<Input
+		<InlineInput
+			label="Default Value"
+			class="w-full"
 			type="select"
 			:options="optionsAvailable"
-			:model-value="defaultValue"
-			@update:model-value="handleDefaultValueChange"
-			placeholder="Select default value"></Input>
+			:modelValue="defaultValue"
+			@update:modelValue="handleDefaultValueChange"
+			placeholder="Enter default value"></InlineInput>
 	</div>
 </template>
 
 <script setup lang="ts">
 import InputLabel from "@/components/Controls/InputLabel.vue";
-import Input from "@/components/Controls/Input.vue";
 import ArrayEditor from "@/components/ArrayEditor.vue";
 import { computed, nextTick, Ref, ref, watch } from "vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 
 const props = defineProps<{
 	options: Record<string, any>;
diff --git a/frontend/src/components/PropsOptions/StringOptions.vue b/frontend/src/components/PropsOptions/StringOptions.vue
index 91940b224..ff2b221b9 100644
--- a/frontend/src/components/PropsOptions/StringOptions.vue
+++ b/frontend/src/components/PropsOptions/StringOptions.vue
@@ -1,18 +1,17 @@
 <template>
 	<div class="flex items-center justify-between">
-		<InputLabel>Default Value</InputLabel>
-		<Input
-			:model-value="options.defaultValue"
-			@input="handleDefaultValueChange"
-			@update:model-value="handleDefaultValueChange"
-			placeholder="Enter default value"></Input>
+		<InlineInput
+			label="Default Value"
+			class="w-full"
+			:modelValue="defaultValue"
+			@update:modelValue="handleDefaultValueChange"
+			placeholder="Enter default value"></InlineInput>
 	</div>
 </template>
 
 <script setup lang="ts">
-import InputLabel from "@/components/Controls/InputLabel.vue";
-import Input from "@/components/Controls/Input.vue";
 import { ref } from "vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 
 const props = defineProps<{
 	options: Record<string, any>;
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index e20ec21fe..cae678c81 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -4,39 +4,39 @@
 		@mousedown.stop
 		class="props-popover-content flex max-h-80 w-80 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
 		<div v-if="showIsStandardInput" class="flex items-center justify-between">
-			<InputLabel>Is Standard</InputLabel>
+			<InputLabel class="w-[88px] shrink-0">Is Standard</InputLabel>
 			<OptionToggle
 				:options="toggleOptions"
 				:model-value="isStandard"
 				@update:model-value="handleIsStandardChange" />
 		</div>
 		<div v-if="isStandardBool" class="flex items-center justify-between">
-			<InputLabel>Label</InputLabel>
-			<Input
-				v-model="label"
-				placeholder="Enter prop label"
-				@update:model-value="(val) => (label = val)"
-				@input="(val) => (label = val)"></Input>
+			<InlineInput
+				label="Label"
+				class="w-full"
+				:modelValue="label"
+				@update:modelValue="(val) => (label = val)"
+				placeholder="Enter prop label" />
 		</div>
 		<div class="flex items-center justify-between">
-			<InputLabel>Key</InputLabel>
-			<Input
-				v-model="key"
-				:placeholder="computedKey || 'Enter prop key'"
-				@update:model-value="(val) => (key = val)"
-				@input="(val) => (key = val)"></Input>
+			<InlineInput
+				label="Key Lorem Ipsum Dolor"
+				class="w-full"
+				:modelValue="computedKey"
+				@update:modelValue="(val) => (computedKey = val)"
+				placeholder="Enter prop key" />
 		</div>
 		<div class="flex items-center justify-between">
-			<InputLabel>Type</InputLabel>
-			<Input
-				placeholder="Select prop type"
-				type="select"
-				:options="propTypes"
-				:model-value="selectedPropType"
-				@update:model-value="handleTypeChange"></Input>
+			<InlineInput
+				label="Type"
+				class="w-full"
+				:type="isStandardBool ? 'select' : 'autocomplete'"
+				:modelValue="selectedPropType"
+				@update:modelValue="handleTypeChange"
+				:options="propTypes" />
 		</div>
 		<div v-if="!isStandardBool" class="flex items-center justify-between">
-			<InputLabel v-model="value">Value</InputLabel>
+			<InputLabel class="w-[88px] shrink-0" v-model="value">Value</InputLabel>
 			<Input
 				v-if="isStaticProp"
 				v-model="value"
@@ -55,7 +55,7 @@
 				@update:modelValue="handleValueSelection" />
 		</div>
 		<div v-if="!isStandardBool" class="flex items-center justify-between">
-			<InputLabel>Pass Down</InputLabel>
+			<InputLabel class="w-[88px] shrink-0">Pass Down</InputLabel>
 			<OptionToggle
 				:options="toggleOptions"
 				:model-value="isPassedDown"
@@ -63,7 +63,7 @@
 		</div>
 		<!-- Disabled for now-->
 		<div v-if="false && !isStandardBool && isInFragmentMode" class="flex items-center justify-between">
-			<InputLabel>Is Editable</InputLabel>
+			<InputLabel class="w-[88px] shrink-0">Is Editable</InputLabel>
 			<OptionToggle
 				:options="toggleOptions"
 				:model-value="isEditable"
@@ -72,7 +72,7 @@
 		<template v-if="isStandardBool">
 			<!-- Disabled for now -->
 			<div v-if="false" class="flex items-center justify-between">
-				<InputLabel>Is Required</InputLabel>
+				<InputLabel class="w-[88px] shrink-0">Is Required</InputLabel>
 				<OptionToggle
 					:options="toggleOptions"
 					:model-value="String(standardPropOptions.isRequired)"
@@ -118,6 +118,7 @@ import { getDataArray, toKebabCase } from "@/utils/helpers";
 import { useBlockDataStore } from "@/stores/blockStore";
 import ColorOptions from "./PropsOptions/ColorOptions.vue";
 import ImageOptions from "./PropsOptions/ImageOptions.vue";
+import InlineInput from "./Controls/InlineInput.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -356,8 +357,8 @@ function getDefaultIsStandard(keepProps: boolean): string {
 	return propDetailsStandard !== undefined
 		? String(propDetailsStandard)
 		: isStandardByDefault
-			? "true"
-			: "false";
+		? "true"
+		: "false";
 }
 
 function resetNonStandardState(keepProps: boolean, keepType: boolean) {
@@ -371,7 +372,7 @@ function resetStandardState(keepProps: boolean, keepType: boolean) {
 	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : (details.propOptions?.type ?? "string");
+		const nextType = keepType ? standardPropOptions.type : details.propOptions?.type ?? "string";
 
 		Object.assign(standardPropOptions, {
 			...details.propOptions,
@@ -437,7 +438,7 @@ function buildPropValue(): BlockProps[string] {
 			? {
 					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
-				}
+			  }
 			: undefined,
 	};
 }

From e23bcc192df64dfa6718e89717c16a3ffe849e9c Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 19 Mar 2026 17:42:34 +0530
Subject: [PATCH 465/547] fix: Handle an edge case where inner html content
 could be empty like </>

---
 builder/builder/doctype/builder_page/builder_page.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ae18e8030..ddb559887 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -803,7 +803,8 @@ def add_inner_html_content(tag: bs.Tag, block: dict, state: dict):
 			inner_content = str(inner_content)
 		inner_soup = bs.BeautifulSoup(inner_content, "html.parser")
 		set_fonts_from_html(inner_soup, state["font_map"])
-		tag.append(inner_soup)
+		if inner_soup.contents:
+			tag.append(inner_soup)
 
 
 def is_repeater_block(block: dict) -> bool:

From e35024a3c97291f2c87ea6e2b2c6825d6d292f55 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 19 Mar 2026 22:16:47 +0530
Subject: [PATCH 466/547] refactor: Replace Autocomplete with InlineInput in
 VisibilityInput

and fix control styles to make them look consistent
---
 .../src/components/Controls/InlineInput.vue   | 11 +++++-
 .../components/Controls/VariantControl.vue    | 38 ++++++++++---------
 frontend/src/components/VisibilityInput.vue   | 31 +++++----------
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 96661a851..77da18e7f 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -5,7 +5,7 @@
 			:class="{
 				'cursor-ns-resize': enableSlider,
 			}"
-			class="w-[88px] shrink-0 truncate"
+			class="w-1/3 shrink-0 truncate"
 			:title="label"
 			:description="description"
 			@mousedown="handleMouseDown">
@@ -23,6 +23,7 @@
 			@keydown.stop="handleKeyDown" />
 		<Autocomplete
 			v-if="type == 'autocomplete'"
+			ref="autocompleteRef"
 			:placeholder="placeholder ? String(placeholder) : undefined"
 			:modelValue="String(modelValue || '')"
 			:options="inputOptions"
@@ -37,7 +38,7 @@
 <script setup lang="ts">
 import { extractNumberAndUnit } from "@/utils/helpers";
 import { isNumber } from "@tiptap/vue-3";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import Autocomplete from "./Autocomplete.vue";
 import InputLabel from "./InputLabel.vue";
 
@@ -157,4 +158,10 @@ const incrementOrDecrement = (step: number, initialValue: null | number = null)
 	}
 	handleChange(newValue + "" + unit);
 };
+
+const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null);
+
+defineExpose({
+	refreshOptions: () => autocompleteRef.value?.refreshOptions(),
+});
 </script>
diff --git a/frontend/src/components/Controls/VariantControl.vue b/frontend/src/components/Controls/VariantControl.vue
index 9700269dc..94fed1947 100644
--- a/frontend/src/components/Controls/VariantControl.vue
+++ b/frontend/src/components/Controls/VariantControl.vue
@@ -32,34 +32,36 @@
 
 	<div
 		v-else
-		class="group ml-[5px] flex items-center justify-between before:-mt-7 before:h-7 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-3.5 after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden"
+		class="group relative flex items-center gap-2 before:absolute before:left-[5px] before:-mt-9 before:h-7.5 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-[2.5px] after:size-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden"
 		v-bind="$attrs">
 		<button
 			type="button"
-			class="absolute left-[11px] hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
+			class="absolute hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
 			@click="$emit('clear')">
-			<FeatherIcon name="x" class="h-3 w-3" />
+			<FeatherIcon name="x" class="size-3" />
 		</button>
 		<InputLabel
-			class="ml-3 w-[80px] shrink-0"
+			class="flex w-1/3 min-w-[88px] max-w-none shrink-0 pl-5"
 			:class="{ 'cursor-ns-resize': enableSlider }"
 			@mousedown="$emit('labelMousedown', $event)">
 			{{ label }}
 		</InputLabel>
-		<component
-			:is="component"
-			v-bind="controlAttrs"
-			v-on="events || {}"
-			:modelValue="modelValue"
-			:defaultValue="defaultValue"
-			:placeholder="placeholder"
-			@update:modelValue="$emit('update:modelValue', $event)"
-			@keydown.stop="$emit('keydown', $event)"
-			class="shrink-1 w-full">
-			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
-				<slot :name="name" v-bind="slotData || {}" />
-			</template>
-		</component>
+		<div class="relative w-full min-w-0">
+			<component
+				:is="component"
+				v-bind="controlAttrs"
+				v-on="events || {}"
+				:modelValue="modelValue"
+				:defaultValue="defaultValue"
+				:placeholder="placeholder"
+				@update:modelValue="$emit('update:modelValue', $event)"
+				@keydown.stop="$emit('keydown', $event)"
+				class="w-full">
+				<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+					<slot :name="name" v-bind="slotData || {}" />
+				</template>
+			</component>
+		</div>
 	</div>
 </template>
 
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 29c90e5ef..22b54e323 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -1,28 +1,17 @@
 <template>
-	<div class="flex w-full flex-col gap-2">
-		<div class="relative flex w-full items-center gap-2">
-			<div class="flex w-fit max-w-[88px] shrink-0 items-center">
-				<InputLabel class="truncate" v-if="label">
-					{{ label }}
-				</InputLabel>
-			</div>
-
-			<div class="relative w-full">
-				<Autocomplete
-					placeholder="unset"
-					ref="autocompleteRef"
-					:modelValue="getModelValue()"
-					:getOptions="getOptions"
-					@update:modelValue="handleModelValueUpdate" />
-			</div>
-		</div>
-	</div>
+	<InlineInput
+		:label="label"
+		type="autocomplete"
+		ref="autocompleteRef"
+		:modelValue="getModelValue()"
+		:getOptions="getOptions"
+		@update:modelValue="handleModelValueUpdate" />
 </template>
 <script setup lang="ts">
-import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import InlineInput from "@/components/Controls/InlineInput.vue";
 import { useBlockDataStore } from "@/stores/blockStore";
 import blockController from "@/utils/blockController";
-import { getDataArray, getDefaultPropsList, getParentProps, getStandardPropValue } from "@/utils/helpers";
+import { getDataArray, getDefaultPropsList, getParentProps } from "@/utils/helpers";
 import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
@@ -33,7 +22,7 @@ const props = defineProps<{
 
 const blockDataStore = useBlockDataStore();
 
-const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null);
+const autocompleteRef = ref<InstanceType<typeof InlineInput> | null>(null);
 
 const pageDataArray = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();

From d95e7a13317b60969c4bfe96f3c22a566020d69b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:14:10 +0530
Subject: [PATCH 467/547] fix: Make layer selection more deterministic

- it used to sometimes miss clicks... assumption is that layer used to trigger drag as soon as user tries to select a layer. Added delay to drag to avoid this.
- Also, users can sometimes accidently click on expand layer icon to select a block. In that case user might feel that selection did not work. To avoid this random click miss, select a block even on clicking expand icon as there is no harm in doing that.
---
 frontend/src/components/BlockLayers.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index afdc54058..3d981ce0c 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -10,6 +10,8 @@
 			:force-fallback="true"
 			:fallback-class="'!hidden'"
 			:fallback-on-body="false"
+			:delay="100"
+			:delay-on-touch-only="false"
 			:sort="false"
 			:move="checkMove"
 			@start="onDragStart"
@@ -45,7 +47,7 @@
 								'ml-[-18px]': adjustForRoot,
 							}"
 							v-if="element.children && element.children.length && !element.isRoot()"
-							@click.stop="toggleExpanded(element)" />
+							@click="toggleExpanded(element)" />
 						<FeatherIcon
 							:name="element.getIcon()"
 							class="h-3 w-3"

From a2dd3204d6258eb053111ebaa2ae052f8b881636 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:17:44 +0530
Subject: [PATCH 468/547] fix: Set selection bg color with bit of transparency

- to prevent selected text from being obscured
---
 frontend/index.html                       | 2 +-
 frontend/src/components/BuilderCanvas.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2501115b1..d66744429 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,7 +8,7 @@
 		<!-- <script src="https://cdn.tailwindcss.com"></script> -->
 		<title>Frappe Builder</title>
 	</head>
-	<body class="overscroll-none bg-surface-white no-scrollbar dark:selection:bg-surface-gray-4" style="scrollbar-width: auto;">
+	<body class="overscroll-none bg-surface-white no-scrollbar selection:bg-gray-500/30" style="scrollbar-width: auto;">
 		<div id="app"></div>
 		<div id="popovers"></div>
 
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 87b49e1bc..d12910650 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -32,7 +32,7 @@
 				</div>
 			</div>
 			<div
-				class="canvas relative flex h-full bg-surface-white shadow-2xl contain-layout dark:selection:!bg-gray-200"
+				class="canvas relative flex h-full bg-surface-white shadow-2xl contain-layout"
 				:style="{
 					...canvasStyles,
 					background: canvasProps.background,

From e2997745a7f8946546ea4a9b4879b83c5bf74ec5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:19:30 +0530
Subject: [PATCH 469/547] fix: Change border styles for contenteditable on
 focus

- to avoid those tight blue borders
---
 frontend/src/index.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 442227591..3bcbe4c59 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -64,4 +64,10 @@ p:empty::before {
 
 [role='dialog'].bg-surface-modal, [role='dialog'] .bg-surface-modal {
 	background-color: var(--surface-white);
-}
\ No newline at end of file
+}
+
+[contenteditable=true]:focus-visible {
+	outline: 1px solid var(--outline-gray-4);
+	outline-offset: 3px;
+	border-radius: 2px;
+}

From c5d3cd87e5d5c230716c82922095d0a56b71f4a4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:23:43 +0530
Subject: [PATCH 470/547] fix: Inherit all text bg styles from parent block

- Previously, if a text had gradient bg with bg-clip set, the text block use to go blank or completely transparent on selection or editing the text. Inheriting for bg related styles prevents this from happening
---
 frontend/src/components/TextBlock.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 1088839d0..e441e6bd1 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -18,7 +18,7 @@
 			v-on-click-outside="handleClickOutside"
 			@mouseup="selectionTriggered = false"
 			v-if="editor && showEditor"
-			class="relative"
+			class="bg-clip-[inherit] relative bg-inherit [-webkit-background-clip:inherit] [background-image:inherit]"
 			:style="block.getRawStyles()"
 			@keydown="(e: KeyboardEvent) => bubbleMenu?.handleKeydown(e)" />
 		<slot />

From 4359ff4aa6a73fea3d89ac5242dfd59d5629f123 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:42:10 +0530
Subject: [PATCH 471/547] fix: Add option to clip background to text in
 BackgroundHandler

---
 frontend/src/components/BackgroundHandler.vue | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 59b0d810d..e7364128c 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -110,6 +110,14 @@
 						Clear Gradient
 					</BuilderButton>
 				</div>
+
+				<div v-if="isTextBlock" class="mt-4 border-t border-outline-gray-2 pt-3">
+					<InlineInput
+						label="Clip Background to Text"
+						type="checkbox"
+						:modelValue="backgroundClip === 'text'"
+						@update:modelValue="setBGClip" />
+				</div>
 			</div>
 		</template>
 	</Popover>
@@ -167,8 +175,6 @@ watch(
 	{ immediate: true },
 );
 
-const hasBackground = computed(() => Boolean(rawBackgroundImage.value || backgroundColor.value));
-
 const getDisplayValue = (state: string | null) => {
 	const bg = blockController.getStyle(getStyleKey("backgroundImage", state)) as string;
 	const color = blockController.getStyle(getStyleKey("backgroundColor", state)) as string;
@@ -195,6 +201,12 @@ const backgroundPosition = computed(
 	() => blockController.getStyle(getStyleKey("backgroundPosition")) as string,
 );
 const backgroundRepeat = computed(() => blockController.getStyle(getStyleKey("backgroundRepeat")) as string);
+const backgroundClip = computed(
+	() =>
+		blockController.getStyle(getStyleKey("backgroundClip")) ||
+		blockController.getStyle(getStyleKey("WebkitBackgroundClip")),
+);
+const isTextBlock = computed(() => blockController.isText());
 
 const getHasBackground = (state: string | null) => {
 	return Boolean(
@@ -312,6 +324,16 @@ const clearBGImage = () => {
 	blockController.setStyle(getStyleKey("backgroundSize"), null);
 	blockController.setStyle(getStyleKey("backgroundPosition"), null);
 	blockController.setStyle(getStyleKey("backgroundRepeat"), null);
+	blockController.setStyle(getStyleKey("backgroundColor"), null);
+};
+
+const setBGClip = (value: boolean) => {
+	const clipValue = value ? "text" : null;
+	const fillValue = value ? "transparent" : null;
+
+	blockController.setStyle(getStyleKey("background-clip"), clipValue);
+	blockController.setStyle(getStyleKey("-webkit-background-clip"), clipValue);
+	blockController.setStyle(getStyleKey("-webkit-text-fill-color"), fillValue);
 };
 
 const handleSetVariant = (variantName: string, value: string | number | boolean | null) => {

From 9bb8af48aca241d37c21ec018508131a6694afa7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 08:43:45 +0530
Subject: [PATCH 472/547] fix: Style for checkbox in inline input

previously, it used to stretch the checkbox to take full width
---
 frontend/src/components/Controls/InlineInput.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 77da18e7f..83fbb996a 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -1,18 +1,21 @@
 <template>
-	<div class="flex items-center justify-between [&>div>input]:!bg-red-600 [&>div>input]:pr-6">
+	<div class="flex items-center justify-between gap-2 [&>div>input]:!bg-red-600 [&>div>input]:pr-6">
 		<InputLabel
 			v-if="label"
 			:class="{
 				'cursor-ns-resize': enableSlider,
+				'w-1/3': type != 'checkbox',
 			}"
-			class="w-1/3 shrink-0 truncate"
+			class="shrink-0 truncate"
 			:title="label"
 			:description="description"
 			@mousedown="handleMouseDown">
 			{{ label }}
 		</InputLabel>
 		<BuilderInput
-			class="w-full"
+			:class="{
+				'w-full': type != 'checkbox',
+			}"
 			:type="type"
 			:placeholder="placeholder"
 			:modelValue="modelValue"

From a9ca1ae98956bd598139728c60fe170b13f5f5aa Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 09:29:40 +0530
Subject: [PATCH 473/547] fix: Update background clip style keys for
 consistency

---
 frontend/src/components/BackgroundHandler.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index e7364128c..229073119 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -331,9 +331,9 @@ const setBGClip = (value: boolean) => {
 	const clipValue = value ? "text" : null;
 	const fillValue = value ? "transparent" : null;
 
-	blockController.setStyle(getStyleKey("background-clip"), clipValue);
-	blockController.setStyle(getStyleKey("-webkit-background-clip"), clipValue);
-	blockController.setStyle(getStyleKey("-webkit-text-fill-color"), fillValue);
+	blockController.setStyle(getStyleKey("backgroundClip"), clipValue);
+	blockController.setStyle(getStyleKey("WebkitBackgroundClip"), clipValue);
+	blockController.setStyle(getStyleKey("WebkitTextFillColor"), fillValue);
 };
 
 const handleSetVariant = (variantName: string, value: string | number | boolean | null) => {

From b956aa99b3ef9dde837e5fde8f09a80d103bdbb0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 16:58:30 +0530
Subject: [PATCH 474/547] fix: Property input styles for consistency

---
 .../src/components/Controls/InlineInput.vue   |  3 +-
 .../src/components/Controls/InputLabel.vue    |  2 +-
 .../components/Controls/VariantControl.vue    | 31 +++++++++----------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 83fbb996a..528a94960 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -1,12 +1,11 @@
 <template>
-	<div class="flex items-center justify-between gap-2 [&>div>input]:!bg-red-600 [&>div>input]:pr-6">
+	<div class="flex items-center justify-between gap-2 [&>div>input]:pr-6">
 		<InputLabel
 			v-if="label"
 			:class="{
 				'cursor-ns-resize': enableSlider,
 				'w-1/3': type != 'checkbox',
 			}"
-			class="shrink-0 truncate"
 			:title="label"
 			:description="description"
 			@mousedown="handleMouseDown">
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index 4ae5756f4..d48e0a8c9 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,7 +1,7 @@
 <template>
 	<span
 		:class="{ 'inline-flex': description }"
-		class="min-w-16 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
+		class="min-w-16 max-w-40 shrink-0 items-center truncate text-xs leading-5 text-ink-gray-6">
 		<slot />
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
diff --git a/frontend/src/components/Controls/VariantControl.vue b/frontend/src/components/Controls/VariantControl.vue
index 94fed1947..8cb55ed53 100644
--- a/frontend/src/components/Controls/VariantControl.vue
+++ b/frontend/src/components/Controls/VariantControl.vue
@@ -30,22 +30,19 @@
 		</div>
 	</div>
 
-	<div
-		v-else
-		class="group relative flex items-center gap-2 before:absolute before:left-[5px] before:-mt-9 before:h-7.5 before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:left-[2.5px] after:size-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden"
-		v-bind="$attrs">
-		<button
-			type="button"
-			class="absolute hidden text-ink-gray-7 hover:text-ink-gray-9 group-hover:block"
-			@click="$emit('clear')">
-			<FeatherIcon name="x" class="size-3" />
-		</button>
-		<InputLabel
-			class="flex w-1/3 min-w-[88px] max-w-none shrink-0 pl-5"
-			:class="{ 'cursor-ns-resize': enableSlider }"
-			@mousedown="$emit('labelMousedown', $event)">
-			{{ label }}
-		</InputLabel>
+	<div v-else class="group flex items-center justify-between gap-2" v-bind="$attrs">
+		<div
+			class="relative flex w-1/3 min-w-[88px] shrink-0 items-center gap-2 before:absolute before:left-[5px] before:-mt-[33px] before:h-[22px] before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:ml-[3px] after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
+			<button
+				type="button"
+				class="invisible text-ink-gray-7 hover:text-ink-gray-9 group-hover:visible"
+				@click="$emit('clear')">
+				<FeatherIcon name="x" class="size-3" />
+			</button>
+			<InputLabel :class="{ 'cursor-ns-resize': enableSlider }" @mousedown="$emit('labelMousedown', $event)">
+				{{ label }}
+			</InputLabel>
+		</div>
 		<div class="relative w-full min-w-0">
 			<component
 				:is="component"
@@ -56,7 +53,7 @@
 				:placeholder="placeholder"
 				@update:modelValue="$emit('update:modelValue', $event)"
 				@keydown.stop="$emit('keydown', $event)"
-				class="w-full">
+				class="shrink-1 w-full">
 				<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
 					<slot :name="name" v-bind="slotData || {}" />
 				</template>

From ac0102fb411d5ffa943e4ab10241aa164facede4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 17:00:56 +0530
Subject: [PATCH 475/547] refactor: Improve shadow editor UI

- Preview check shadow user is trying to edit
- Visual editor for each shadow layer
---
 frontend/src/components/ShadowHandler.vue | 360 ++++++++++------------
 1 file changed, 171 insertions(+), 189 deletions(-)

diff --git a/frontend/src/components/ShadowHandler.vue b/frontend/src/components/ShadowHandler.vue
index 79f5b1a37..a8f520261 100644
--- a/frontend/src/components/ShadowHandler.vue
+++ b/frontend/src/components/ShadowHandler.vue
@@ -32,76 +32,107 @@
 		</template>
 		<template #body>
 			<div
-				class="shadow-popover-body max-h-[80vh] w-72 select-none space-y-2 overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
-				<InlineInput
-					label="Preset"
-					type="select"
-					:modelValue="currentPreset"
-					:options="presetOptions"
-					@update:modelValue="applyPreset" />
-
-				<div class="bg-outline-gray-2 my-2 h-px w-full" />
-
-				<div
-					v-for="(shadow, index) in shadowConfigs"
-					:key="index"
-					class="mb-3 space-y-2 border-b border-outline-gray-2 pb-3 last:mb-0 last:border-b-0 last:pb-0">
-					<div class="flex items-center justify-between">
-						<span class="text-xs font-medium text-ink-gray-5">Layer {{ index + 1 }}</span>
-						<Button
-							icon="trash-2"
-							variant="ghost"
-							class="!h-6 !w-6 !p-1 text-ink-gray-5 hover:text-ink-red-3"
-							@click="removeShadow(index)"></Button>
+				class="shadow-popover-body max-h-[80vh] w-64 select-none overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
+				<div class="mb-3 space-y-3">
+					<div
+						class="flex h-24 w-full items-center justify-center rounded-md border border-outline-gray-1 bg-surface-white"
+						style="
+							background-image: conic-gradient(
+								var(--surface-gray-1) 90deg,
+								var(--surface-gray-2) 90deg 180deg,
+								var(--surface-gray-1) 180deg 270deg,
+								var(--surface-gray-2) 270deg
+							);
+							background-size: 16px 16px;
+						">
+						<div
+							class="size-10 rounded bg-white shadow-sm transition-shadow duration-200"
+							:style="{ boxShadow: currentPreviewShadow }" />
 					</div>
+					<Input
+						type="select"
+						:modelValue="currentPreset"
+						:options="presetOptions"
+						@update:modelValue="applyPreset"
+						placeholder="Presets" />
+				</div>
 
-					<InlineInput
-						label="X Offset"
-						:modelValue="shadow.x"
-						:unitOptions="['px']"
-						:enableSlider="true"
-						@update:modelValue="(val: any) => updateShadow(index, 'x', val)" />
-					<InlineInput
-						label="Y Offset"
-						:modelValue="shadow.y"
-						:unitOptions="['px']"
-						:enableSlider="true"
-						@update:modelValue="(val: any) => updateShadow(index, 'y', val)" />
-					<InlineInput
-						label="Blur"
-						:modelValue="shadow.blur"
-						:unitOptions="['px']"
-						:minValue="0"
-						:enableSlider="true"
-						@update:modelValue="(val: any) => updateShadow(index, 'blur', val)" />
-					<InlineInput
-						label="Spread"
-						:modelValue="shadow.spread"
-						:unitOptions="['px']"
-						:enableSlider="true"
-						@update:modelValue="(val: any) => updateShadow(index, 'spread', val)" />
-
-					<ColorInput
-						label="Color"
-						:modelValue="shadow.color"
-						@update:modelValue="(val: any) => updateShadow(index, 'color', val)" />
-
-					<div class="flex items-center justify-between">
-						<InputLabel>Type</InputLabel>
-						<OptionToggle
-							class="[&>div]:min-w-[auto]"
-							:modelValue="shadow.inset"
-							:options="[
-								{ label: 'Inset', value: true },
-								{ label: 'Outset', value: false },
-							]"
-							@update:modelValue="(val: any) => updateShadow(index, 'inset', val)" />
+				<div class="space-y-4">
+					<div v-for="(shadow, index) in shadowConfigs" :key="index" class="space-y-2 rounded-md">
+						<div class="flex items-center justify-between">
+							<span class="text-[10px] font-bold uppercase tracking-wider text-ink-gray-4">
+								Layer {{ index + 1 }}
+							</span>
+							<Button
+								icon="x"
+								variant="ghost"
+								size="sm"
+								class="!size-5 !text-ink-gray-4"
+								@click="removeShadow(index)" />
+						</div>
+						<div class="flex gap-2">
+							<div
+								class="relative flex aspect-square w-[64px] cursor-crosshair items-center justify-center overflow-hidden rounded border border-outline-gray-2 bg-surface-white p-1"
+								style="
+									background-image: conic-gradient(
+										var(--surface-gray-1) 90deg,
+										var(--surface-gray-2) 90deg 180deg,
+										var(--surface-gray-1) 180deg 270deg,
+										var(--surface-gray-2) 270deg
+									);
+									background-size: 8px 8px;
+								"
+								@mousedown="handleVisualPickerMouseDown($event, index)">
+								<div
+									class="bg-outline-gray-2 pointer-events-none absolute inset-x-0 top-1/2 h-px opacity-50" />
+								<div
+									class="bg-outline-gray-2 pointer-events-none absolute inset-y-0 left-1/2 w-px opacity-50" />
+								<div
+									class="pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-outline-gray-1 bg-white shadow transition-shadow"
+									:style="{
+										left: getPickerPos(shadow.x),
+										top: getPickerPos(shadow.y),
+										boxShadow: formatShadow(shadow),
+									}" />
+							</div>
+							<div class="grid flex-1 grid-cols-2 gap-2">
+								<Tooltip v-for="control in SHADOW_CONTROLS" :key="control.key" :text="control.label">
+									<Input
+										:modelValue="shadow[control.key]"
+										:hideClearButton="true"
+										@update:modelValue="(val: any) => updateShadow(index, control.key, val)"
+										:placeholder="control.prefix">
+										<template #prefix>
+											<span class="w-3 text-[10px] font-medium text-ink-gray-4">{{ control.prefix }}</span>
+										</template>
+									</Input>
+								</Tooltip>
+							</div>
+						</div>
+						<div class="flex items-center gap-2">
+							<Tooltip :text="shadow.inset ? 'Inset Shadow' : 'Outset Shadow'">
+								<OptionToggle
+									class="!w-auto [&>div]:!h-7 [&>div]:min-w-[40px]"
+									:modelValue="shadow.inset"
+									:options="[
+										{ label: 'O', value: false },
+										{ label: 'I', value: true },
+									]"
+									@update:modelValue="(val: any) => updateShadow(index, 'inset', val)" />
+							</Tooltip>
+							<div class="flex-1">
+								<Tooltip text="Shadow Color">
+									<ColorInput
+										:modelValue="shadow.color"
+										@update:modelValue="(val: any) => updateShadow(index, 'color', val)" />
+								</Tooltip>
+							</div>
+						</div>
 					</div>
 				</div>
-
-				<div v-if="shadowConfigs.length > 0" class="bg-outline-gray-2 my-2 h-px w-full" />
-
-				<Button class="w-full" variant="ghost" @click="addShadow">+ Add Shadow Layer</Button>
+				<div class="mt-3">
+					<Button class="w-full" variant="subtle" @click="addShadow">+ Add Shadow Layer</Button>
+				</div>
 			</div>
 		</template>
 	</Popover>
@@ -109,74 +140,57 @@
 
 <script lang="ts" setup>
 import ColorInput from "@/components/Controls/ColorInput.vue";
-import InlineInput from "@/components/Controls/InlineInput.vue";
 import Input from "@/components/Controls/Input.vue";
-import InputLabel from "@/components/Controls/InputLabel.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { Button, Popover } from "frappe-ui";
+import { Button, Popover, Tooltip } from "frappe-ui";
 import { computed, reactive, ref, watch } from "vue";
 
+const SHADOW_CONTROLS = [
+	{ key: "x", label: "X Offset", prefix: "X" },
+	{ key: "y", label: "Y Offset", prefix: "Y" },
+	{ key: "blur", label: "Blur", prefix: "B" },
+	{ key: "spread", label: "Spread", prefix: "S" },
+] as const;
+
 const activeState = ref<string | null>(null);
 
 const updateActiveState = (e: FocusEvent) => {
 	const target = e.target as HTMLElement;
-
 	if (target.closest(".shadow-popover-body")) return;
-
 	const variantRow = target.closest("[data-variant]");
-	const mainPropRow = target.closest("[data-property]");
-
-	if (variantRow) {
-		activeState.value = variantRow.getAttribute("data-variant") as string;
-	} else if (mainPropRow) {
-		activeState.value = null;
-	}
-};
-
-const getStyleKey = (prop: string, state: string | null = activeState.value) => {
-	return state ? `${state}:${prop}` : prop;
+	activeState.value = variantRow ? (variantRow.getAttribute("data-variant") as string) : null;
 };
 
+const getStyleKey = (prop: string, state: string | null = activeState.value) =>
+	state ? `${state}:${prop}` : prop;
 const boxShadow = computed(() => blockController.getStyle(getStyleKey("boxShadow")) as string);
 
-const getBoxShadowValue = (state: string | null) => {
-	return (blockController.getStyle(getStyleKey("boxShadow", state)) || "") as string;
+const formatShadow = (conf: ShadowConfig) => {
+	const { x, y, blur, spread, color, inset } = conf;
+	return `${inset ? "inset " : ""}${x} ${y} ${blur} ${spread} ${color}`.trim();
 };
 
+const currentPreviewShadow = computed(() => shadowConfigs.map(formatShadow).join(", "));
+const getBoxShadowValue = (state: string | null) =>
+	(blockController.getStyle(getStyleKey("boxShadow", state)) || "") as string;
+
 const presetOptions = [
 	{ label: "None", value: "none" },
-	{
-		label: "Small",
-		value: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px 1px 3px 0px",
-	},
-	{
-		label: "Medium",
-		value: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px",
-	},
-	{
-		label: "Large",
-		value: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px",
-	},
+	{ label: "Small", value: "#0000000d 0px 1px 2px 0px, #0000000d 0px 1px 3px 0px" },
+	{ label: "Medium", value: "#0000001a 0px 10px 15px -3px, #0000001a 0px 4px 6px -4px" },
+	{ label: "Large", value: "#0000001a 0px 20px 25px -5px, #0000001a 0px 10px 10px -5px" },
 	{ label: "Custom", value: "custom" },
 ];
 
 const currentPreset = computed(() => {
 	const val = boxShadow.value;
 	if (!val || val === "none") return "none";
-	const match = presetOptions.find((p) => p.value === val);
-	return match ? match.value : "custom";
+	return presetOptions.find((p) => p.value === val)?.value || "custom";
 });
 
-const applyPreset = (val: string) => {
-	if (val === "custom") return;
-	if (val === "none") {
-		clearShadow();
-	} else {
-		setBoxShadow(val);
-	}
-};
+const applyPreset = (val: string) => (val === "none" ? clearShadow() : val !== "custom" && setBoxShadow(val));
 
 interface ShadowConfig {
 	x: string;
@@ -189,81 +203,51 @@ interface ShadowConfig {
 
 const shadowConfigs = reactive<ShadowConfig[]>([]);
 
-// Split shadows by comma but ignore commas inside parentheses (like in rgba)
-const splitShadows = (value: string): string[] => {
+const parseBoxShadows = (value: string): ShadowConfig[] => {
 	if (!value || value === "none") return [];
-	const result: string[] = [];
-	let current = "";
-	let inParens = 0;
-
-	for (let i = 0; i < value.length; i++) {
-		const char = value[i];
+	const shadows: string[] = [];
+	let current = "",
+		inParens = 0;
+	for (const char of value) {
 		if (char === "(") inParens++;
 		if (char === ")") inParens--;
 		if (char === "," && inParens === 0) {
-			result.push(current.trim());
+			shadows.push(current.trim());
 			current = "";
-		} else {
-			current += char;
-		}
+		} else current += char;
 	}
-	if (current.trim()) result.push(current.trim());
-
-	return result;
-};
-
-// Parser for multiple box-shadows
-const parseBoxShadows = (value: string): ShadowConfig[] => {
-	if (!value || value === "none") return [];
+	if (current.trim()) shadows.push(current.trim());
 
-	const shadows = splitShadows(value);
 	return shadows.map((shadow) => {
 		const config: ShadowConfig = {
 			x: "0px",
 			y: "0px",
 			blur: "0px",
 			spread: "0px",
-			color: "rgba(0,0,0,0.5)",
-			inset: false,
+			color: "#00000080",
+			inset: shadow.includes("inset"),
 		};
-
-		config.inset = shadow.includes("inset");
 		let cleaned = shadow.replace("inset", "").trim();
-
 		const parts = cleaned.split(/\s+(?![^(]*\))/);
-
-		// Find the color part (simplification: part that is not a numeric value with unit)
 		const colorPart = parts.find(
 			(p) => !/^[-+]?\d*\.?\d+(px|em|rem|%|vh|vw|pt|pc|in|cm|mm|ex|ch|vmin|vmax)$/.test(p) && p !== "0",
 		);
-
 		if (colorPart) {
 			config.color = colorPart;
 			cleaned = cleaned.replace(colorPart, "").trim();
 		}
-
 		const numericParts = cleaned.split(/\s+/).filter(Boolean);
 		config.x = numericParts[0] || "0px";
 		config.y = numericParts[1] || "0px";
 		config.blur = numericParts[2] || "0px";
 		config.spread = numericParts[3] || "0px";
-
 		return config;
 	});
 };
 
-watch(
-	boxShadow,
-	(newVal) => {
-		if (newVal) {
-			const parsed = parseBoxShadows(newVal);
-			shadowConfigs.splice(0, shadowConfigs.length, ...parsed);
-		} else {
-			shadowConfigs.splice(0, shadowConfigs.length);
-		}
-	},
-	{ immediate: true },
-);
+watch(boxShadow, (val) => shadowConfigs.splice(0, shadowConfigs.length, ...parseBoxShadows(val || "")), {
+	immediate: true,
+});
 
 const updateShadow = <K extends keyof ShadowConfig>(index: number, key: K, value: ShadowConfig[K]) => {
 	shadowConfigs[index][key] = value;
@@ -271,14 +255,7 @@ const updateShadow = <K extends keyof ShadowConfig>(index: number, key: K, value
 };
 
 const addShadow = () => {
-	shadowConfigs.push({
-		x: "0px",
-		y: "4px",
-		blur: "6px",
-		spread: "-1px",
-		color: "rgba(0, 0, 0, 0.1)",
-		inset: false,
-	});
+	shadowConfigs.push({ x: "0px", y: "4px", blur: "6px", spread: "-1px", color: "#0000001a", inset: false });
 	applyShadow();
 };
 
@@ -287,42 +264,47 @@ const removeShadow = (index: number) => {
 	applyShadow();
 };
 
-const applyShadow = () => {
-	if (shadowConfigs.length === 0) {
-		clearShadow();
-		return;
-	}
-	const shadowStr = shadowConfigs
-		.map((conf) => {
-			const { x, y, blur, spread, color, inset } = conf;
-			return `${inset ? "inset " : ""}${x} ${y} ${blur} ${spread} ${color}`.trim();
-		})
-		.join(", ");
-	blockController.setStyle(getStyleKey("boxShadow"), shadowStr);
-};
-
-const setBoxShadow = (val: string) => {
-	blockController.setStyle(getStyleKey("boxShadow"), val);
+const getPickerPos = (val: string) =>
+	`${Math.min(Math.max((((parseFloat(val) || 0) + 20) / 40) * 100, 0), 100)}%`;
+
+const handleVisualPickerMouseDown = (e: MouseEvent, index: number) => {
+	const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+	const update = (moveEvent: MouseEvent) => {
+		const valX = Math.round(((moveEvent.clientX - rect.left) / rect.width) * 40 - 20);
+		const valY = Math.round(((moveEvent.clientY - rect.top) / rect.height) * 40 - 20);
+		updateShadow(index, "x", `${valX}px`);
+		updateShadow(index, "y", `${valY}px`);
+	};
+	update(e);
+	const move = (me: MouseEvent) => update(me);
+	const stop = () => {
+		window.removeEventListener("mousemove", move);
+		window.removeEventListener("mouseup", stop);
+	};
+	window.addEventListener("mousemove", move);
+	window.addEventListener("mouseup", stop);
 };
 
-const clearShadow = () => {
-	blockController.setStyle(getStyleKey("boxShadow"), null);
-};
-
-const handleSetVariant = (variantName: string, value: string | number | boolean | null) => {
-	const shadowKey = `${variantName}:boxShadow`;
-
-	if (value === null) {
-		blockController.setStyle(shadowKey, null);
-	} else {
-		blockController.getSelectedBlocks().forEach((block) => {
-			if (!block.getStyle("transitionDuration")) {
-				block.setStyle("transitionDuration", "300ms");
-				block.setStyle("transitionTimingFunction", "ease");
-				block.setStyle("transitionProperty", "all");
+const applyShadow = () =>
+	blockController.setStyle(
+		getStyleKey("boxShadow"),
+		shadowConfigs.length ? shadowConfigs.map(formatShadow).join(", ") : null,
+	);
+const setBoxShadow = (val: string) => blockController.setStyle(getStyleKey("boxShadow"), val);
+const clearShadow = () => blockController.setStyle(getStyleKey("boxShadow"), null);
+
+const handleSetVariant = (variant: string, value: string | number | boolean | null) => {
+	const key = `${variant}:boxShadow`;
+	if (value === null) blockController.setStyle(key, null);
+	else {
+		blockController.getSelectedBlocks().forEach((b) => {
+			if (!b.getStyle("transitionDuration")) {
+				b.setStyle("transitionDuration", "300ms");
+				b.setStyle("transitionTimingFunction", "ease");
+				b.setStyle("transitionProperty", "all");
 			}
 		});
-		blockController.setStyle(shadowKey, value as string);
+		blockController.setStyle(key, value as string);
 	}
 };
 </script>

From 56fafe6f0e357a66d1195134fa27becf5fdd331b Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 20 Mar 2026 17:55:52 +0530
Subject: [PATCH 476/547] refactor: Replace manual event listeners with
 useEventListener

---
 frontend/src/components/ShadowHandler.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ShadowHandler.vue b/frontend/src/components/ShadowHandler.vue
index a8f520261..a236cffba 100644
--- a/frontend/src/components/ShadowHandler.vue
+++ b/frontend/src/components/ShadowHandler.vue
@@ -144,6 +144,7 @@ import Input from "@/components/Controls/Input.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
+import { useEventListener } from "@vueuse/core";
 import { Button, Popover, Tooltip } from "frappe-ui";
 import { computed, reactive, ref, watch } from "vue";
 
@@ -276,13 +277,11 @@ const handleVisualPickerMouseDown = (e: MouseEvent, index: number) => {
 		updateShadow(index, "y", `${valY}px`);
 	};
 	update(e);
-	const move = (me: MouseEvent) => update(me);
-	const stop = () => {
-		window.removeEventListener("mousemove", move);
-		window.removeEventListener("mouseup", stop);
-	};
-	window.addEventListener("mousemove", move);
-	window.addEventListener("mouseup", stop);
+	const stopMove = useEventListener(window, "mousemove", update);
+	const stopUp = useEventListener(window, "mouseup", () => {
+		stopMove();
+		stopUp();
+	});
 };
 
 const applyShadow = () =>

From 4c21c0add069b8415cab824942a4fdc7c4a124b5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Mar 2026 09:04:10 +0530
Subject: [PATCH 477/547] refactor: Handle external file name that does not
 have extension

---
 builder/api.py | 138 ++++++++++++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 70 deletions(-)

diff --git a/builder/api.py b/builder/api.py
index 1abf2385a..e42168a3a 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -80,97 +80,95 @@ def upload_builder_asset():
 
 @frappe.whitelist()
 def convert_to_webp(image_url: str | None = None, file_doc: Document | None = None) -> str:
-	"""Convert image to webp format"""
+	"""
+	Convert image to webp format.
+	Handles local files, builder assets, and external URLs.
+	Returns the new webp file URL or the original if conversion is not possible.
+	"""
+	import hashlib
 
 	CONVERTIBLE_IMAGE_EXTENSIONS = ["png", "jpeg", "jpg"]
 
-	def is_external_image(image_url):
-		return image_url.startswith("http") or image_url.startswith("https")
-
-	def can_convert_image(extn):
+	def can_convert_image(extn: str) -> bool:
 		return extn.lower() in CONVERTIBLE_IMAGE_EXTENSIONS
 
-	def get_extension(filename):
-		return filename.split(".")[-1].lower()
+	def get_extension(filename: str) -> str:
+		return filename.split(".")[-1].lower() if "." in filename else ""
 
-	def convert_and_save_image(image, path):
+	def save_as_webp(image, path: str) -> None:
 		image.save(path, "WEBP")
-		return path
 
-	def update_file_doc_with_webp(file_doc, image, extn):
-		webp_path = file_doc.get_full_path().replace(extn, "webp")
-		convert_and_save_image(image, webp_path)
+	def to_webp_url(url: str, extn: str) -> str:
+		return url.replace(extn, "webp")
+
+	def to_webp_path(path: str, extn: str) -> str:
+		return path.replace(extn, "webp")
+
+	def handle_file_doc(file_doc: Document) -> str:
+		if not file_doc.file_url.startswith("/files"):
+			return file_doc.file_url
+		image, _, extn = get_local_image(file_doc.file_url)
+		if not can_convert_image(extn):
+			return file_doc.file_url
+		save_as_webp(image, to_webp_path(file_doc.get_full_path(), extn))
 		delete_file(file_doc.get_full_path())
-		file_doc.file_url = f"{file_doc.file_url.replace(extn, 'webp')}"
+		file_doc.file_url = to_webp_url(file_doc.file_url, extn)
 		file_doc.save()
 		return file_doc.file_url
 
-	def create_new_webp_file_doc(file_url, image, extn):
-		files = frappe.get_all("File", filters={"file_url": file_url}, fields=["name"], limit=1)
-		if files:
-			_file = frappe.get_doc("File", files[0].name)
-			webp_path = _file.get_full_path().replace(extn, "webp")
-			convert_and_save_image(image, webp_path)
-			new_file = frappe.copy_doc(_file)
-			new_file.file_name = f"{_file.file_name.replace(extn, 'webp')}"
-			new_file.file_url = f"{_file.file_url.replace(extn, 'webp')}"
-			new_file.save()
-			return new_file.file_url
-		return file_url
-
-	def handle_image_from_url(image_url):
-		image_url = unquote(image_url)
-		response = requests.get(image_url)
-		image = Image.open(BytesIO(response.content))
-		filename = image_url.split("/")[-1]
-		extn = get_extension(filename)
-		if can_convert_image(extn) or is_external_image(image_url):
-			_file = frappe.get_doc(
-				{
-					"doctype": "File",
-					"file_name": f"{filename.replace(extn, 'webp')}",
-					"file_url": f"/files/{filename.replace(extn, 'webp')}",
-				}
-			)
-			webp_path = _file.get_full_path()
-			convert_and_save_image(image, webp_path)
-			_file.save()
-			return _file.file_url
-		return image_url
+	def handle_local_url(image_url: str) -> str:
+		image, _, extn = get_local_image(image_url)
+		if not can_convert_image(extn):
+			return image_url
+		files = frappe.get_all("File", filters={"file_url": image_url}, fields=["name"], limit=1)
+		if not files:
+			return image_url
+		file = frappe.get_doc("File", files[0].name)
+		save_as_webp(image, to_webp_path(file.get_full_path(), extn))
+		new_file = frappe.copy_doc(file)
+		new_file.file_name = to_webp_url(file.file_name, extn)
+		new_file.file_url = to_webp_url(file.file_url, extn)
+		new_file.save()
+		return new_file.file_url
+
+	def handle_builder_asset(image_url: str) -> str:
+		image_path = os.path.abspath(frappe.get_app_path("builder", "www", image_url.lstrip("/")))
+		image_path = image_path.replace("_", "-").replace("/builder-assets", "/builder_assets")
+		extn = get_extension(image_path)
+		if not can_convert_image(extn):
+			return image_url
+		image = Image.open(image_path)
+		save_as_webp(image, to_webp_path(image_path, extn))
+		return to_webp_url(image_url, extn)
+
+	def get_external_webp_filename(image_url: str) -> str:
+		filename = image_url.split("/")[-1].split("?")[0]
+		base = filename.rsplit(".", 1)[0] if "." in filename else ""
+		if not base or base.lower() == "webp" or filename.lower() == "webp":
+			return f"external-{hashlib.md5(image_url.encode()).hexdigest()[:8]}.webp"
+		return base + ".webp"
+
+	def handle_external_url(image_url: str) -> str:
+		url = unquote(image_url)
+		image = Image.open(BytesIO(requests.get(url).content))
+		filename = get_external_webp_filename(url)
+		file = frappe.get_doc({"doctype": "File", "file_name": filename, "file_url": f"/files/{filename}"})
+		save_as_webp(image, file.get_full_path())
+		file.save()
+		return file.file_url
 
 	if not image_url and not file_doc:
 		return ""
-
 	if file_doc:
-		if file_doc.file_url.startswith("/files"):
-			image, _, extn = get_local_image(file_doc.file_url)
-			if can_convert_image(extn):
-				return update_file_doc_with_webp(file_doc, image, extn)
-		return file_doc.file_url
+		return handle_file_doc(file_doc)
 
 	image_url = image_url or ""
 	if image_url.startswith("/files"):
-		image, _, extn = get_local_image(image_url)
-		if can_convert_image(extn):
-			return create_new_webp_file_doc(image_url, image, extn)
-		return image_url
-
+		return handle_local_url(image_url)
 	if image_url.startswith("/builder_assets"):
-		image_path = os.path.abspath(frappe.get_app_path("builder", "www", image_url.lstrip("/")))
-		image_path = image_path.replace("_", "-")
-		image_path = image_path.replace("/builder-assets", "/builder_assets")
-
-		image = Image.open(image_path)
-		extn = get_extension(image_path)
-		if can_convert_image(extn):
-			webp_path = image_path.replace(extn, "webp")
-			convert_and_save_image(image, webp_path)
-			return image_url.replace(extn, "webp")
-		return image_url
-
+		return handle_builder_asset(image_url)
 	if image_url.startswith("http"):
-		return handle_image_from_url(image_url)
-
+		return handle_external_url(image_url)
 	return image_url
 
 

From fb0d0461814a16bc999cabeca2be802076240cf5 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Mar 2026 13:14:26 +0530
Subject: [PATCH 478/547] fix: Add blockquote to text elements

---
 frontend/src/block.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 7f20b89ea..2914a0bf8 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -35,6 +35,7 @@ const TEXT_ELEMENTS = new Set([
 	"strong",
 	"em",
 	"i",
+	"blockquote",
 ]);
 
 const CONTAINER_ELEMENTS = new Set(["section", "div"]);

From 9124601979f4cd89d7e7a9801b01261feb7492cf Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 21 Mar 2026 13:16:01 +0530
Subject: [PATCH 479/547] fix(misc): Code editor load issue

- Also, allow scrolling over editor
- Remove page preview description
---
 .../src/components/Controls/CodeEditor.vue    |  2 +-
 .../Controls/CodeMirror/CodeMirrorEditor.vue  | 64 ++++++++++---------
 frontend/src/components/Settings/PageMeta.vue |  1 -
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Controls/CodeEditor.vue b/frontend/src/components/Controls/CodeEditor.vue
index 40fdfcea4..6ef989fe8 100644
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -8,7 +8,7 @@
 			:style="{
 				'min-height': height,
 			}"
-			class="flex h-[30vh] max-h-[80vh] resize-y overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2">
+			class="flex h-[30vh] max-h-[80vh] resize-y overflow-hidden !rounded border border-outline-gray-2 bg-surface-gray-2">
 			<CodeMirrorEditor
 				ref="editor"
 				:mode
diff --git a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
index 4d0832ce8..ce711c253 100644
--- a/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
+++ b/frontend/src/components/Controls/CodeMirror/CodeMirrorEditor.vue
@@ -8,15 +8,15 @@
 import { computed, onMounted, ref, watch } from "vue";
 
 import codeCompletions from "@/data/codeCompletions";
+import blockController from "@/utils/blockController";
 import { createStartingState } from "@/utils/createCodeMirrorState";
+import { getDefaultPropsList, getParentProps } from "@/utils/helpers";
 import { openSearchPanel } from "@codemirror/search";
 import { Compartment } from "@codemirror/state";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { useDark } from "@vueuse/core";
 import { EditorView } from "codemirror";
 import { tomorrow } from "thememirror";
-import blockController from "@/utils/blockController";
-import { getDefaultPropsList, getParentProps } from "@/utils/helpers";
 
 const props = defineProps<{
 	type: "Python" | "JavaScript" | "HTML" | "CSS" | "JSON";
@@ -108,37 +108,42 @@ watch(isDark, (newVal) => {
 
 const allBlockProps = computed(() => {
 	const currentBlock = blockController.getFirstSelectedBlock();
-	if (currentBlock) {
-		const ownBlockProps = currentBlock.getBlockProps();
-		const inheritedBlockProps = getParentProps(currentBlock, {});
-		const defaultProps = getDefaultPropsList(currentBlock, blockController);
-		return {
-			...defaultProps,
-			...inheritedBlockProps,
-			...ownBlockProps,
-		};
-	}
+
+	if (!currentBlock || typeof currentBlock.getBlockProps !== "function") return {};
+
+	const ownBlockProps = currentBlock.getBlockProps();
+	const inheritedBlockProps = getParentProps(currentBlock, {});
+	const defaultProps = getDefaultPropsList(currentBlock, blockController);
+
+	return {
+		...defaultProps,
+		...inheritedBlockProps,
+		...ownBlockProps,
+	};
 });
 
 onMounted(async () => {
-	if (editorContainer.value) {
-		const { startState } = await createStartingState({
-			props,
-			pythonCompletions: await getPythonCompletions(),
-			onSaveCallback: () => emit("save", getEditorValue()),
-			onChangeCallback: () => emit("change", getEditorValue()),
-			onBlurCallback: (value: string) => emit("blur", value),
-			extraExtensions: [theme.of(isDark.value ? oneDark : tomorrow)],
-			mode: props.mode,
-			blockProps: allBlockProps.value,
-		});
-		editor = new EditorView({
-			state: startState,
-			parent: editorContainer.value,
-		});
-	} else {
-		console.error("Editor container not found");
+	if (!editorContainer.value) {
+		console.warn("CodeMirror: editor container not found, skipping mount");
+		return;
 	}
+
+	const pythonCompletions = await getPythonCompletions();
+	const { startState } = await createStartingState({
+		props,
+		pythonCompletions,
+		onSaveCallback: () => emit("save", getEditorValue()),
+		onChangeCallback: () => emit("change", getEditorValue()),
+		onBlurCallback: (value: string) => emit("blur", value),
+		extraExtensions: [theme.of(isDark.value ? oneDark : tomorrow)],
+		mode: props.mode,
+		blockProps: allBlockProps.value,
+	});
+
+	editor = new EditorView({
+		state: startState,
+		parent: editorContainer.value,
+	});
 });
 
 defineExpose({
@@ -151,7 +156,6 @@ defineExpose({
 .code-mirror-editor {
 	width: 100%;
 	border-radius: 5px;
-	overscroll-behavior: none;
 	display: flex;
 	flex: 1;
 }
diff --git a/frontend/src/components/Settings/PageMeta.vue b/frontend/src/components/Settings/PageMeta.vue
index 8bbabd4e8..4f99b0bf6 100644
--- a/frontend/src/components/Settings/PageMeta.vue
+++ b/frontend/src/components/Settings/PageMeta.vue
@@ -23,7 +23,6 @@
 						label="Meta Image"
 						placeholder="Upload Meta Image"
 						labelPosition="top"
-						description="Recommended size: 1200 x 630 px; Page preview image is used as a fallback if Meta Image is not set"
 						@update:modelValue="
 							(url: string) => pageStore.updateActivePage('meta_image', url)
 						"></ImageUploadInput>

From b720cbae28b2ce3014379f75bcd1a4efacaaa28d Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 23 Mar 2026 15:18:47 +0530
Subject: [PATCH 480/547] refactor: Simplify the implemention of loading fonts

- Remove library that loads font... use native font loading api
- Do not check for weights while loading font, just load all of them, browsers are smart enough to handle this efficiently
---
 frontend/package.json             |   3 +-
 frontend/src/utils/fontManager.ts | 208 +++++++++++++-----------------
 yarn.lock                         |   7 +-
 3 files changed, 89 insertions(+), 129 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index a9e91482c..908bed664 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,8 +48,7 @@
     "vue": "3.5.15",
     "vue-router": "^4.0.12",
     "vue-sonner": "^1.0.2",
-    "vuedraggable": "^4.1.0",
-    "webfontloader": "^1.6.28"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
diff --git a/frontend/src/utils/fontManager.ts b/frontend/src/utils/fontManager.ts
index 2d03759fe..968fed6df 100644
--- a/frontend/src/utils/fontManager.ts
+++ b/frontend/src/utils/fontManager.ts
@@ -1,134 +1,100 @@
 import userFont from "@/data/userFonts";
 import fontList from "@/utils/fontList.json";
-import WebFont from "webfontloader";
 
-const requestedFonts = new Set<string>();
-const isFontRequested = (font: string) => {
-	return requestedFonts.has(font);
-};
+type FontWeight = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+interface WeightOption {
+	value: FontWeight;
+	label: string;
+}
 
-const setFontRequested = (font: string) => {
-	requestedFonts.add(font);
+const WEIGHT_LABELS: Record<FontWeight, string> = {
+	"100": "Thin",
+	"200": "Extra Light",
+	"300": "Light",
+	"400": "Regular",
+	"500": "Medium",
+	"600": "Semi Bold",
+	"700": "Bold",
+	"800": "Extra Bold",
+	"900": "Black",
 };
 
-const setFont = (font: string | null, weight: string | null) => {
-	let fontId = font || "";
-	return new Promise((resolve) => {
-		if (!font) {
-			return resolve(font);
-		}
-		if (typeof weight !== "string") {
-			weight = null;
-		}
-		weight = weight || "400";
-		if (weight && ["100", "200", "300", "400", "500", "600", "700", "800", "900"].includes(weight)) {
-			fontId = `${font}:${weight}`;
-		}
-		if (isFontRequested(fontId)) {
-			return resolve(fontId);
-		}
-		setFontRequested(fontId);
-		const customFont = userFont.data.find(
-			(f: { font_name: string; font_file: string }) => f.font_name === font,
+const GF_CSS = "https://fonts.googleapis.com/css2";
+const fontCache = new Map<string, Promise<string>>();
+
+function loadGoogleFont(font: string): Promise<string> {
+	if (fontCache.has(font)) return fontCache.get(font)!;
+
+	const linkId = `gf-${font.replace(/\s+/g, "-")}`;
+
+	if (!document.getElementById(linkId)) {
+		Object.assign(document.head.appendChild(document.createElement("link")), {
+			id: linkId,
+			rel: "stylesheet",
+			crossOrigin: "anonymous",
+			href: `${GF_CSS}?family=${encodeURIComponent(
+				font,
+			)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,
+		});
+	}
+
+	const promise = new Promise<string>((resolve) => {
+		const link = document.getElementById(linkId) as HTMLLinkElement;
+		link.addEventListener("load", () => resolve(font), { once: true });
+		link.addEventListener(
+			"error",
+			() => {
+				console.warn(`Failed to load font: ${font}`);
+				resolve(font);
+			},
+			{ once: true },
 		);
-		if (customFont) {
-			const fontFace = new FontFace(font, `url("${customFont.font_file}")`);
-			fontFace.load().then((loadedFont) => {
-				document.fonts.add(loadedFont);
-				resolve(fontId);
-			});
-		} else {
-			WebFont.load({
-				google: {
-					families: [fontId],
-					crossOrigin: "anonymous",
-				},
-				active: resolve(fontId),
-			});
-		}
 	});
-};
-const getFontWeightOptions = (font: string) => {
-	const defaultOptions = [{ value: "400", label: "Regular" }];
-	if (!font) {
-		return defaultOptions;
-	}
-	const fontObj = fontList.items.find((f) => f.family === font);
-	if (!fontObj) {
-		return defaultOptions;
+
+	fontCache.set(font, promise);
+	return promise;
+}
+
+export function setFont(font: string | null): Promise<string> {
+	if (!font) return Promise.resolve("");
+
+	const customFont = userFont.data.find(
+		(f: { font_name: string; font_file: string }) => f.font_name === font,
+	);
+	if (customFont) {
+		if (!fontCache.has(font)) {
+			fontCache.set(
+				font,
+				new FontFace(font, `url("${customFont.font_file}")`).load().then((face) => {
+					document.fonts.add(face);
+					return font;
+				}),
+			);
+		}
+		return fontCache.get(font)!;
 	}
-	return fontObj.variants
-		.filter((variant) => !variant.includes("italic"))
-		.map((variant) => {
-			switch (variant) {
-				case "regular":
-					return {
-						value: "400",
-						label: "Regular",
-					};
-				case "100":
-					return {
-						value: "100",
-						label: "Thin",
-					};
-				case "200":
-					return {
-						value: "200",
-						label: "Extra Light",
-					};
-				case "300":
-					return {
-						value: "300",
-						label: "Light",
-					};
-				case "400":
-					return {
-						value: "400",
-						label: "Regular",
-					};
-				case "500":
-					return {
-						value: "500",
-						label: "Medium",
-					};
-				case "600":
-					return {
-						value: "600",
-						label: "Semi Bold",
-					};
-				case "700":
-					return {
-						value: "700",
-						label: "Bold",
-					};
-				case "800":
-					return {
-						value: "800",
-						label: "Extra Bold",
-					};
-				case "900":
-					return {
-						value: "900",
-						label: "Black",
-					};
-				default:
-					return {
-						value: variant,
-						label: variant,
-					};
-			}
-		});
-};
 
-function setFontFromHTML(html: string) {
-	const fontFamilies = html.match(/font-family: ([^;"]+)["|;]/g)?.map((fontFamily) => {
-		return fontFamily.replace(/font-family: ([^;"]+)["|;]/, "$1");
-	});
-	if (fontFamilies) {
-		fontFamilies.forEach((fontFamily) => {
-			setFont(fontFamily, null);
+	return loadGoogleFont(font);
+}
+
+export function setFontFromHTML(html: string): void {
+	(html.match(/font-family:\s*([^;"]+)[";]/g) ?? [])
+		.map((m) => m.replace(/font-family:\s*([^;"]+)[";]/, "$1").trim())
+		.filter(Boolean)
+		.forEach((font) => setFont(font));
+}
+
+export function getFontWeightOptions(font: string): WeightOption[] {
+	const fallback = [{ value: "400" as FontWeight, label: "Regular" }];
+	const fontObj = font && fontList.items.find((f) => f.family === font);
+	if (!fontObj) return fallback;
+
+	return fontObj.variants
+		.filter((v) => !v.includes("italic"))
+		.map((v) => {
+			const value = (v === "regular" ? "400" : v) as FontWeight;
+			return { value, label: WEIGHT_LABELS[value] ?? v };
 		});
-	}
 }
 
-export { fontList, getFontWeightOptions, setFont, setFontFromHTML };
+export { fontList };
diff --git a/yarn.lock b/yarn.lock
index 0bcf6511a..5d001d9f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7079,11 +7079,6 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webfontloader@^1.6.28:
-  version "1.6.28"
-  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
-  integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
-
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
@@ -7318,4 +7313,4 @@ zrender@5.6.1:
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
   integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==
   dependencies:
-    tslib "2.3.0"
\ No newline at end of file
+    tslib "2.3.0"

From 476dbf1ec0c7d6e3ff45625d7a91cb8cb877de29 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 23 Mar 2026 15:33:19 +0530
Subject: [PATCH 481/547] refactor: Avoid requesting font again if it is
 already loaded

continuation of b720cbae28b2ce3014379f75bcd1a4efacaaa28d
---
 frontend/src/utils/fontManager.ts | 62 ++++++++++++++-----------------
 1 file changed, 27 insertions(+), 35 deletions(-)

diff --git a/frontend/src/utils/fontManager.ts b/frontend/src/utils/fontManager.ts
index 968fed6df..ed9ebf548 100644
--- a/frontend/src/utils/fontManager.ts
+++ b/frontend/src/utils/fontManager.ts
@@ -22,24 +22,26 @@ const WEIGHT_LABELS: Record<FontWeight, string> = {
 const GF_CSS = "https://fonts.googleapis.com/css2";
 const fontCache = new Map<string, Promise<string>>();
 
-function loadGoogleFont(font: string): Promise<string> {
-	if (fontCache.has(font)) return fontCache.get(font)!;
-
-	const linkId = `gf-${font.replace(/\s+/g, "-")}`;
-
-	if (!document.getElementById(linkId)) {
-		Object.assign(document.head.appendChild(document.createElement("link")), {
-			id: linkId,
-			rel: "stylesheet",
-			crossOrigin: "anonymous",
-			href: `${GF_CSS}?family=${encodeURIComponent(
-				font,
-			)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,
+function loadCustomFont(font: string, url: string): Promise<string> {
+	return new FontFace(font, `url("${url}")`)
+		.load()
+		.then((face) => {
+			document.fonts.add(face);
+			return font;
+		})
+		.catch(() => {
+			console.warn(`Failed to load custom font: ${font}`);
+			return font;
 		});
-	}
+}
 
-	const promise = new Promise<string>((resolve) => {
-		const link = document.getElementById(linkId) as HTMLLinkElement;
+function loadGoogleFont(font: string): Promise<string> {
+	return new Promise<string>((resolve) => {
+		const link = document.createElement("link");
+		link.id = `gf-${font.replace(/\s+/g, "-")}`;
+		link.rel = "stylesheet";
+		link.crossOrigin = "anonymous";
+		link.href = `${GF_CSS}?family=${encodeURIComponent(font)}&display=swap`;
 		link.addEventListener("load", () => resolve(font), { once: true });
 		link.addEventListener(
 			"error",
@@ -49,45 +51,35 @@ function loadGoogleFont(font: string): Promise<string> {
 			},
 			{ once: true },
 		);
+		document.head.appendChild(link);
 	});
-
-	fontCache.set(font, promise);
-	return promise;
 }
 
 export function setFont(font: string | null): Promise<string> {
 	if (!font) return Promise.resolve("");
+	if (fontCache.has(font)) return fontCache.get(font)!;
 
 	const customFont = userFont.data.find(
 		(f: { font_name: string; font_file: string }) => f.font_name === font,
 	);
-	if (customFont) {
-		if (!fontCache.has(font)) {
-			fontCache.set(
-				font,
-				new FontFace(font, `url("${customFont.font_file}")`).load().then((face) => {
-					document.fonts.add(face);
-					return font;
-				}),
-			);
-		}
-		return fontCache.get(font)!;
-	}
 
-	return loadGoogleFont(font);
+	const promise = customFont ? loadCustomFont(font, customFont.font_file) : loadGoogleFont(font);
+
+	fontCache.set(font, promise);
+	return promise;
 }
 
 export function setFontFromHTML(html: string): void {
-	(html.match(/font-family:\s*([^;"]+)[";]/g) ?? [])
+	const matches = html.match(/font-family:\s*([^;"]+)[";]/g) ?? [];
+	matches
 		.map((m) => m.replace(/font-family:\s*([^;"]+)[";]/, "$1").trim())
 		.filter(Boolean)
 		.forEach((font) => setFont(font));
 }
 
 export function getFontWeightOptions(font: string): WeightOption[] {
-	const fallback = [{ value: "400" as FontWeight, label: "Regular" }];
 	const fontObj = font && fontList.items.find((f) => f.family === font);
-	if (!fontObj) return fallback;
+	if (!fontObj) return [{ value: "400", label: "Regular" }];
 
 	return fontObj.variants
 		.filter((v) => !v.includes("italic"))

From 6a61186461f6d645b3415909a9d3583c8a53e277 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 24 Mar 2026 21:13:49 +0530
Subject: [PATCH 482/547] fix: shrink-0 did not work with truncate

---
 frontend/src/components/Controls/InlineInput.vue |  2 --
 frontend/src/components/Controls/InputLabel.vue  |  2 +-
 frontend/src/components/PropsPopoverContent.vue  | 10 +++++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 06c1834fd..528a94960 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -7,7 +7,6 @@
 				'w-1/3': type != 'checkbox',
 			}"
 			:title="label"
-			class="w-[88px] shrink-0 truncate"
 			:description="description"
 			@mousedown="handleMouseDown">
 			{{ label }}
@@ -167,5 +166,4 @@ const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null);
 defineExpose({
 	refreshOptions: () => autocompleteRef.value?.refreshOptions(),
 });
-
 </script>
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index 3977f2042..a7d36a5b8 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,7 +1,7 @@
 <template>
 	<span
 		:class="{ 'inline-flex': description }"
-		class="w-[88px] min-w-16 max-w-40 shrink-0 items-center truncate text-xs leading-5 text-ink-gray-6">
+		class="w-[88px] min-w-16 max-w-40 items-center truncate text-xs leading-5 text-ink-gray-6">
 		<slot />
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index cae678c81..03aec4237 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -20,7 +20,7 @@
 		</div>
 		<div class="flex items-center justify-between">
 			<InlineInput
-				label="Key Lorem Ipsum Dolor"
+				label="Key"
 				class="w-full"
 				:modelValue="computedKey"
 				@update:modelValue="(val) => (computedKey = val)"
@@ -35,8 +35,8 @@
 				@update:modelValue="handleTypeChange"
 				:options="propTypes" />
 		</div>
-		<div v-if="!isStandardBool" class="flex items-center justify-between">
-			<InputLabel class="w-[88px] shrink-0" v-model="value">Value</InputLabel>
+		<div v-if="!isStandardBool" class="flex items-center justify-between gap-2">
+			<InputLabel v-model="value">Value</InputLabel>
 			<Input
 				v-if="isStaticProp"
 				v-model="value"
@@ -54,8 +54,8 @@
 				:getOptions="getOptions"
 				@update:modelValue="handleValueSelection" />
 		</div>
-		<div v-if="!isStandardBool" class="flex items-center justify-between">
-			<InputLabel class="w-[88px] shrink-0">Pass Down</InputLabel>
+		<div v-if="!isStandardBool" class="flex items-center justify-between gap-2">
+			<InputLabel>Pass Down</InputLabel>
 			<OptionToggle
 				:options="toggleOptions"
 				:model-value="isPassedDown"

From 22a185530ca38a4972e253b228e7fb76e7d5ba7d Mon Sep 17 00:00:00 2001
From: Sayantan Ghosh <stravoone@gmail.com>
Date: Tue, 24 Mar 2026 23:15:53 +0530
Subject: [PATCH 483/547] fix: spacing in PropsPopoverContent component

---
 frontend/src/components/PropsPopoverContent.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 03aec4237..51cb17ce2 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -3,14 +3,14 @@
 		@click.stop
 		@mousedown.stop
 		class="props-popover-content flex max-h-80 w-80 flex-col gap-3 overflow-auto rounded-lg bg-surface-white p-4 shadow-lg">
-		<div v-if="showIsStandardInput" class="flex items-center justify-between">
-			<InputLabel class="w-[88px] shrink-0">Is Standard</InputLabel>
+		<div v-if="showIsStandardInput" class="flex items-center justify-between gap-2">
+			<InputLabel>Is Standard</InputLabel>
 			<OptionToggle
 				:options="toggleOptions"
 				:model-value="isStandard"
 				@update:model-value="handleIsStandardChange" />
 		</div>
-		<div v-if="isStandardBool" class="flex items-center justify-between">
+		<div v-if="isStandardBool" class="flex items-center justify-between gap-2">
 			<InlineInput
 				label="Label"
 				class="w-full"
@@ -18,7 +18,7 @@
 				@update:modelValue="(val) => (label = val)"
 				placeholder="Enter prop label" />
 		</div>
-		<div class="flex items-center justify-between">
+		<div class="flex items-center justify-between gap-2">
 			<InlineInput
 				label="Key"
 				class="w-full"
@@ -26,7 +26,7 @@
 				@update:modelValue="(val) => (computedKey = val)"
 				placeholder="Enter prop key" />
 		</div>
-		<div class="flex items-center justify-between">
+		<div class="flex items-center justify-between gap-2">
 			<InlineInput
 				label="Type"
 				class="w-full"

From 7891d52be087171c8503b314868031beecd65ed3 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 26 Mar 2026 00:33:03 +0530
Subject: [PATCH 484/547] feat: acess previous blocks' data in block script
 using `prev_blocks`

---
 .../doctype/builder_page/builder_page.py      | 10 ++++++++--
 builder/utils.py                              | 19 ++++++++++++++++---
 frontend/src/components/BuilderBlock.vue      |  1 +
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ddb559887..3ed78e45f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -492,13 +492,19 @@ def get_component(block):
 
 
 @frappe.whitelist()
-def get_block_data(block_id: str, block_data_script: str, props: str, route_variables: dict | None = None):
+def get_block_data(
+	block_id: str,
+	block_data_script: str,
+	props: str,
+	prev_block_data: dict | None = None,
+	route_variables: dict | None = None,
+):
 	if route_variables:
 		frappe.form_dict.update({k: v for k, v in route_variables.items()})
 	frappe.has_permission("Builder Page", "write", throw=True)
 	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()
-	_locals = dict(block=frappe._dict(), props=props)
+	_locals = dict(block=frappe._dict(), prev_blocks=frappe._dict(prev_block_data or {}), props=props)
 	execute_script(block_data_script, _locals, block_id)
 	if isinstance(_locals["block"], dict):
 		block_data.update(_locals["block"])
diff --git a/builder/utils.py b/builder/utils.py
index 2c0916a7b..e11134eaa 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -8,6 +8,7 @@
 from urllib.parse import unquote, urlparse
 
 import frappe
+from frappe.model.document import Document
 from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_url
 from frappe.utils.html_utils import unescape_html
@@ -661,8 +662,20 @@ def combine(a, b):
 		return b
 	if b is None:
 		return a
-	res = dict(a)
-	res.update(b)
+	try:
+		res = dict(a)
+	except TypeError as e:
+		if isinstance(a, Document):
+			res = a.as_dict()
+		else:
+			raise e
+	try:
+		res.update(b)
+	except TypeError as e:
+		if isinstance(b, Document):
+			res.update(b.as_dict())
+		else:
+			raise e
 	return res
 
 
@@ -677,7 +690,7 @@ def to_safe_json(data):
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()
-	_locals = dict(block=frappe._dict(), props=props)
+	_locals = dict(block=frappe._dict(), prev_blocks=frappe._dict(prev_block_data), props=props)
 	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
 	return combine(prev_block_data, block_data)
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index a63a9b95e..be0767960 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -478,6 +478,7 @@ watch(
 				block_id: uidToUse,
 				block_data_script: script,
 				props: JSON.stringify(allResolvedProps.value),
+				prev_block_data: props.blockData || {},
 				route_variables: pageStore.routeVariables,
 			})
 			.then((res: any) => {

From 741ab7eee8efa4c46a05e3e48bf6c56b315f0d94 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 26 Mar 2026 00:43:02 +0530
Subject: [PATCH 485/547] feat: add 'prev_blocks' completion option in
 customPythonCompletions

---
 frontend/src/utils/pythonCustomCompletion.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/utils/pythonCustomCompletion.ts b/frontend/src/utils/pythonCustomCompletion.ts
index 542446fcd..54ebd8f1f 100644
--- a/frontend/src/utils/pythonCustomCompletion.ts
+++ b/frontend/src/utils/pythonCustomCompletion.ts
@@ -93,6 +93,7 @@ export default function customPythonCompletions(
 				...(mode == "block"
 					? [
 							{ label: "block", type: "class", boost: BOOST_INDEX },
+							{ label: "prev_blocks", type: "class", boost: BOOST_INDEX },
 							{ label: "props", type: "class", boost: BOOST_INDEX },
 					  ]
 					: [

From bfc2177559679e503ac127fc118493759fb8d5c5 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 26 Mar 2026 15:20:49 +0530
Subject: [PATCH 486/547] feat: allow block.block_data similar to
 page.page_data

---
 builder/builder/doctype/builder_page/builder_page.py | 5 +++--
 builder/utils.py                                     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index ddb559887..72a61e424 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -954,7 +954,7 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 
 	# Add global function definition (only once)
 	if script_unique_id not in state["used_block_scripts"]:
-		state["global_script_tag"].append(f"function client_script_{script_unique_id}(props) {{{script}}}\n")
+		state["global_script_tag"].append(f"function client_script_{script_unique_id}(props, block_data) {{{script}}}\n")
 		state["used_block_scripts"].add(script_unique_id)
 
 	# Add data attribute for selecting this specific block
@@ -965,7 +965,8 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 	local_script.string = (
 		f"(client_script_{script_unique_id}).call("
 		f"document.querySelector('[data-block-uid=\"{{{{ unique_hash }}}}\"]'), "
-		f"{{{{ props | to_safe_json }}}}"
+		f"{{{{ props | to_safe_json }}}}, "
+		f"{{{{ block.block_data | to_safe_json }}}}"
 		f");"
 	)
 	tag.append(local_script)
diff --git a/builder/utils.py b/builder/utils.py
index 2c0916a7b..6059f84ed 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -671,7 +671,7 @@ def hash(s):
 
 
 def to_safe_json(data):
-	return frappe.as_json(data)
+	return frappe.as_json(data or {})
 
 
 def execute_script_and_combine(prev_block_data, block_data_script, props):

From b49bbcdaf6bd8a339be470897bc220103f8d061e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 26 Mar 2026 23:00:57 +0530
Subject: [PATCH 487/547] chore: ran pre-commit

---
 builder/builder/doctype/builder_page/builder_page.py | 4 +++-
 frontend/src/components/PropsPopoverContent.vue      | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 72a61e424..fd48873eb 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -954,7 +954,9 @@ def attach_client_script(tag: bs.Tag, block: dict, state: dict):
 
 	# Add global function definition (only once)
 	if script_unique_id not in state["used_block_scripts"]:
-		state["global_script_tag"].append(f"function client_script_{script_unique_id}(props, block_data) {{{script}}}\n")
+		state["global_script_tag"].append(
+			f"function client_script_{script_unique_id}(props, block_data) {{{script}}}\n"
+		)
 		state["used_block_scripts"].add(script_unique_id)
 
 	# Add data attribute for selecting this specific block
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index 51cb17ce2..ed8be29a5 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -357,8 +357,8 @@ function getDefaultIsStandard(keepProps: boolean): string {
 	return propDetailsStandard !== undefined
 		? String(propDetailsStandard)
 		: isStandardByDefault
-		? "true"
-		: "false";
+			? "true"
+			: "false";
 }
 
 function resetNonStandardState(keepProps: boolean, keepType: boolean) {
@@ -372,7 +372,7 @@ function resetStandardState(keepProps: boolean, keepType: boolean) {
 	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : details.propOptions?.type ?? "string";
+		const nextType = keepType ? standardPropOptions.type : (details.propOptions?.type ?? "string");
 
 		Object.assign(standardPropOptions, {
 			...details.propOptions,
@@ -438,7 +438,7 @@ function buildPropValue(): BlockProps[string] {
 			? {
 					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
-			  }
+				}
 			: undefined,
 	};
 }

From 19e82050dabf21594d8228eab0ff06334a149f33 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Fri, 27 Mar 2026 13:14:30 +0530
Subject: [PATCH 488/547] fix: fallback to `as_dict` when `dict()` fails

---
 builder/utils.py | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index e11134eaa..2a0731fc0 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -656,26 +656,22 @@ def get_export_paths(app_path, export_name):
 		"pages_path": pages_path,
 	}
 
+def to_dict_with_fallback(obj):
+	try:
+		return frappe._dict(obj)
+	except TypeError:
+		if isinstance(obj, Document):
+			return obj.as_dict()
+		else:
+			raise
 
 def combine(a, b):
 	if a is None:
 		return b
 	if b is None:
 		return a
-	try:
-		res = dict(a)
-	except TypeError as e:
-		if isinstance(a, Document):
-			res = a.as_dict()
-		else:
-			raise e
-	try:
-		res.update(b)
-	except TypeError as e:
-		if isinstance(b, Document):
-			res.update(b.as_dict())
-		else:
-			raise e
+	res = to_dict_with_fallback(a)
+	res.update(to_dict_with_fallback(b))
 	return res
 
 
@@ -690,7 +686,7 @@ def to_safe_json(data):
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()
-	_locals = dict(block=frappe._dict(), prev_blocks=frappe._dict(prev_block_data), props=props)
+	_locals = dict(block=frappe._dict(), prev_blocks=to_dict_with_fallback(prev_block_data), props=props)
 	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
 	return combine(prev_block_data, block_data)

From c18a28650e8b77e94803e686f79a3d80d6dc2d02 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 28 Mar 2026 05:41:26 +0530
Subject: [PATCH 489/547] chore: ran pre-commit

---
 builder/utils.py                                | 2 ++
 frontend/src/components/PropsPopoverContent.vue | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/builder/utils.py b/builder/utils.py
index 2a0731fc0..a6947583c 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -656,6 +656,7 @@ def get_export_paths(app_path, export_name):
 		"pages_path": pages_path,
 	}
 
+
 def to_dict_with_fallback(obj):
 	try:
 		return frappe._dict(obj)
@@ -665,6 +666,7 @@ def to_dict_with_fallback(obj):
 		else:
 			raise
 
+
 def combine(a, b):
 	if a is None:
 		return b
diff --git a/frontend/src/components/PropsPopoverContent.vue b/frontend/src/components/PropsPopoverContent.vue
index cae678c81..6c2ec5494 100644
--- a/frontend/src/components/PropsPopoverContent.vue
+++ b/frontend/src/components/PropsPopoverContent.vue
@@ -357,8 +357,8 @@ function getDefaultIsStandard(keepProps: boolean): string {
 	return propDetailsStandard !== undefined
 		? String(propDetailsStandard)
 		: isStandardByDefault
-		? "true"
-		: "false";
+			? "true"
+			: "false";
 }
 
 function resetNonStandardState(keepProps: boolean, keepType: boolean) {
@@ -372,7 +372,7 @@ function resetStandardState(keepProps: boolean, keepType: boolean) {
 	const details = keepProps ? props.propDetails : null;
 
 	if (details?.isStandard) {
-		const nextType = keepType ? standardPropOptions.type : details.propOptions?.type ?? "string";
+		const nextType = keepType ? standardPropOptions.type : (details.propOptions?.type ?? "string");
 
 		Object.assign(standardPropOptions, {
 			...details.propOptions,
@@ -438,7 +438,7 @@ function buildPropValue(): BlockProps[string] {
 			? {
 					...standardPropOptions,
 					dependencies: standardPropDependencyMap.value,
-			  }
+				}
 			: undefined,
 	};
 }

From 5d0c8dd66246d7c01d3af56c7c886d13b8afa247 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 28 Mar 2026 19:50:00 +0530
Subject: [PATCH 490/547] fix: Close VariableManager on selecting different
 option from side panel

---
 frontend/src/components/BuilderLeftPanel.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 404ec1250..994660bfb 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -90,12 +90,12 @@ import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
 import { Tooltip } from "frappe-ui";
 import { inject, nextTick, Ref, ref, watch, watchEffect } from "vue";
+import { useRoute } from "vue-router";
 import BlockLayers from "./BlockLayers.vue";
 import BuilderAssets from "./BuilderAssets.vue";
 import BuilderBlockTemplates from "./BuilderBlockTemplates.vue";
 import BuilderCanvas from "./BuilderCanvas.vue";
 import PanelResizer from "./PanelResizer.vue";
-import { useRoute } from "vue-router";
 
 const showVariableManager = ref(false);
 const miniSidebar = ref(null) as Ref<HTMLElement | null>;
@@ -144,6 +144,7 @@ const setActiveTab = (tab: LeftSidebarTabOption) => {
 		showVariableManager.value = !showVariableManager.value;
 	} else {
 		builderStore.leftPanelActiveTab = tab;
+		showVariableManager.value = false;
 	}
 };
 

From b3404b7a960e337d97d44ec26277c7ed8bfb0d0f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Mar 2026 19:43:58 +0530
Subject: [PATCH 491/547] refactor: rename order field to sort_order

---
 .../builder_block_template/blockquote/blockquote.json  |  2 +-
 .../builder/builder_block_template/button/button.json  |  2 +-
 .../builder/builder_block_template/embed/embed.json    |  3 ++-
 .../builder_block_template/footer_1/footer_1.json      |  2 +-
 .../builder/builder_block_template/form_1/form_1.json  |  2 +-
 .../builder/builder_block_template/form_2/form_2.json  |  2 +-
 .../builder/builder_block_template/form_3/form_3.json  |  2 +-
 .../builder_block_template/heading/heading.json        |  2 +-
 .../builder/builder_block_template/hero_1/hero_1.json  |  2 +-
 .../builder/builder_block_template/hero_2/hero_2.json  |  2 +-
 .../builder/builder_block_template/label/label.json    |  3 ++-
 .../builder_block_template/navbar_1/navbar_1.json      |  2 +-
 .../builder_block_template/navbar_2/navbar_2.json      |  2 +-
 .../builder_block_template/paragraph/paragraph.json    |  2 +-
 .../builder_block_template/quick_grid/quick_grid.json  |  2 +-
 .../quick_stack/quick_stack.json                       |  2 +-
 .../testimonial_1/testimonial_1.json                   |  2 +-
 .../builder_block_template/text_link/text_link.json    |  2 +-
 .../builder/builder_block_template/video/video.json    |  3 ++-
 .../builder/doctype/block_template/block_template.json | 10 +++++-----
 frontend/src/data/builderBlockTemplate.ts              |  3 ++-
 21 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/builder/builder/builder_block_template/blockquote/blockquote.json b/builder/builder/builder_block_template/blockquote/blockquote.json
index e58a3b1d7..bfc19ee4b 100644
--- a/builder/builder/builder_block_template/blockquote/blockquote.json
+++ b/builder/builder/builder_block_template/blockquote/blockquote.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:10:00.947270",
  "modified_by": "Administrator",
  "name": "Blockquote",
- "order": 13,
+ "sort_order": 13,
  "owner": "Administrator",
  "preview": "/builder_assets/Blockquote/blockquote.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/button/button.json b/builder/builder/builder_block_template/button/button.json
index ec9d662a7..f05eb5813 100644
--- a/builder/builder/builder_block_template/button/button.json
+++ b/builder/builder/builder_block_template/button/button.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:08:10.275886",
  "modified_by": "Administrator",
  "name": "Button",
- "order": 1,
+ "sort_order": 1,
  "owner": "Administrator",
  "preview": "/builder_assets/Button/button.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/embed/embed.json b/builder/builder/builder_block_template/embed/embed.json
index ea5a0b6ae..a543d4f5f 100644
--- a/builder/builder/builder_block_template/embed/embed.json
+++ b/builder/builder/builder_block_template/embed/embed.json
@@ -10,5 +10,6 @@
  "name": "Embed",
  "owner": "Administrator",
  "preview": "/builder_assets/Embed/embed.png",
- "template_name": "Embed"
+ "template_name": "Embed",
+ "sort_order": 17
 }
\ No newline at end of file
diff --git a/builder/builder/builder_block_template/footer_1/footer_1.json b/builder/builder/builder_block_template/footer_1/footer_1.json
index d906c4234..60bdb990e 100644
--- a/builder/builder/builder_block_template/footer_1/footer_1.json
+++ b/builder/builder/builder_block_template/footer_1/footer_1.json
@@ -8,7 +8,7 @@
  "modified": "2024-10-14 00:07:01.491709",
  "modified_by": "Administrator",
  "name": "Footer 1",
- "order": 7,
+ "sort_order": 7,
  "owner": "Administrator",
  "preview": "/builder_assets/Footer 1/footer_1.png",
  "preview_height": 2,
diff --git a/builder/builder/builder_block_template/form_1/form_1.json b/builder/builder/builder_block_template/form_1/form_1.json
index 9a0ece405..26a30751d 100644
--- a/builder/builder/builder_block_template/form_1/form_1.json
+++ b/builder/builder/builder_block_template/form_1/form_1.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:10:03.603174",
  "modified_by": "Administrator",
  "name": "Form 1",
- "order": 14,
+ "sort_order": 14,
  "owner": "Administrator",
  "preview": "/builder_assets/Form 1/form-1.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/form_2/form_2.json b/builder/builder/builder_block_template/form_2/form_2.json
index 7b83c52f7..3f1f3b991 100644
--- a/builder/builder/builder_block_template/form_2/form_2.json
+++ b/builder/builder/builder_block_template/form_2/form_2.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:10:05.562456",
  "modified_by": "Administrator",
  "name": "Form 2",
- "order": 15,
+ "sort_order": 15,
  "owner": "Administrator",
  "preview": "/builder_assets/Form 2/form-2.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/form_3/form_3.json b/builder/builder/builder_block_template/form_3/form_3.json
index e0455699c..552a8002d 100644
--- a/builder/builder/builder_block_template/form_3/form_3.json
+++ b/builder/builder/builder_block_template/form_3/form_3.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:12:17.932679",
  "modified_by": "Administrator",
  "name": "Form 3",
- "order": 16,
+ "sort_order": 16,
  "owner": "Administrator",
  "preview": "/builder_assets/Form 3/form-3.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/heading/heading.json b/builder/builder/builder_block_template/heading/heading.json
index 7bc24ce0f..c5c5d5f7f 100644
--- a/builder/builder/builder_block_template/heading/heading.json
+++ b/builder/builder/builder_block_template/heading/heading.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:09:29.235170",
  "modified_by": "Administrator",
  "name": "Heading",
- "order": 10,
+ "sort_order": 10,
  "owner": "Administrator",
  "preview": "/builder_assets/Heading/heading.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/hero_1/hero_1.json b/builder/builder/builder_block_template/hero_1/hero_1.json
index 3ab04ec98..bfddbba3f 100644
--- a/builder/builder/builder_block_template/hero_1/hero_1.json
+++ b/builder/builder/builder_block_template/hero_1/hero_1.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:08:25.812814",
  "modified_by": "Administrator",
  "name": "Hero 1",
- "order": 4,
+ "sort_order": 4,
  "owner": "Administrator",
  "preview": "/builder_assets/Hero 1/hero_1.png",
  "preview_height": 2,
diff --git a/builder/builder/builder_block_template/hero_2/hero_2.json b/builder/builder/builder_block_template/hero_2/hero_2.json
index 225f455b2..61c2fb8d9 100644
--- a/builder/builder/builder_block_template/hero_2/hero_2.json
+++ b/builder/builder/builder_block_template/hero_2/hero_2.json
@@ -8,7 +8,7 @@
  "modified": "2025-03-29 13:47:45.015311",
  "modified_by": "Administrator",
  "name": "Hero 2",
- "order": 5,
+ "sort_order": 5,
  "owner": "Administrator",
  "preview": "/builder_assets/Hero 2/hero_2.png",
  "preview_height": 2,
diff --git a/builder/builder/builder_block_template/label/label.json b/builder/builder/builder_block_template/label/label.json
index 0e3dbc1de..a2e273fd5 100644
--- a/builder/builder/builder_block_template/label/label.json
+++ b/builder/builder/builder_block_template/label/label.json
@@ -10,5 +10,6 @@
  "name": "Label",
  "owner": "Administrator",
  "preview": "/builder_assets/Label/label.png",
- "template_name": "Label"
+ "template_name": "Label",
+ "sort_order": 18
 }
\ No newline at end of file
diff --git a/builder/builder/builder_block_template/navbar_1/navbar_1.json b/builder/builder/builder_block_template/navbar_1/navbar_1.json
index 0dfcd882b..f72a02dfb 100644
--- a/builder/builder/builder_block_template/navbar_1/navbar_1.json
+++ b/builder/builder/builder_block_template/navbar_1/navbar_1.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:08:11.964111",
  "modified_by": "Administrator",
  "name": "Navbar 1",
- "order": 2,
+ "sort_order": 2,
  "owner": "Administrator",
  "preview": "/builder_assets/Navbar 1/navbar_1.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/navbar_2/navbar_2.json b/builder/builder/builder_block_template/navbar_2/navbar_2.json
index b9337b862..e94563060 100644
--- a/builder/builder/builder_block_template/navbar_2/navbar_2.json
+++ b/builder/builder/builder_block_template/navbar_2/navbar_2.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-29 21:08:20.795780",
  "modified_by": "Administrator",
  "name": "Navbar 2",
- "order": 3,
+ "sort_order": 3,
  "owner": "Administrator",
  "preview": "/builder_assets/Navbar 2/navbar_2.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/paragraph/paragraph.json b/builder/builder/builder_block_template/paragraph/paragraph.json
index 644d31194..c07ef061d 100644
--- a/builder/builder/builder_block_template/paragraph/paragraph.json
+++ b/builder/builder/builder_block_template/paragraph/paragraph.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:09:32.402504",
  "modified_by": "Administrator",
  "name": "Paragraph",
- "order": 11,
+ "sort_order": 11,
  "owner": "Administrator",
  "preview": "/builder_assets/Paragraph/paragraph.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/quick_grid/quick_grid.json b/builder/builder/builder_block_template/quick_grid/quick_grid.json
index 9bbabd852..dc8b6937a 100644
--- a/builder/builder/builder_block_template/quick_grid/quick_grid.json
+++ b/builder/builder/builder_block_template/quick_grid/quick_grid.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:09:25.446243",
  "modified_by": "Administrator",
  "name": "Quick Grid",
- "order": 9,
+ "sort_order": 9,
  "owner": "Administrator",
  "preview": "/builder_assets/Quick Grid/quick-grid.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/quick_stack/quick_stack.json b/builder/builder/builder_block_template/quick_stack/quick_stack.json
index 3f3216bcc..86dda01c9 100644
--- a/builder/builder/builder_block_template/quick_stack/quick_stack.json
+++ b/builder/builder/builder_block_template/quick_stack/quick_stack.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:35:31.530861",
  "modified_by": "Administrator",
  "name": "Quick Stack",
- "order": 8,
+ "sort_order": 8,
  "owner": "Administrator",
  "preview": "/builder_assets/Quick Stack/quick-stack.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/testimonial_1/testimonial_1.json b/builder/builder/builder_block_template/testimonial_1/testimonial_1.json
index 07ae9762b..61e97cc4d 100644
--- a/builder/builder/builder_block_template/testimonial_1/testimonial_1.json
+++ b/builder/builder/builder_block_template/testimonial_1/testimonial_1.json
@@ -8,7 +8,7 @@
  "modified": "2024-10-14 00:05:16.066806",
  "modified_by": "Administrator",
  "name": "Testimonial 1",
- "order": 6,
+ "sort_order": 6,
  "owner": "Administrator",
  "preview": "/builder_assets/Testimonial 1/testimonial_1.png",
  "preview_height": 2,
diff --git a/builder/builder/builder_block_template/text_link/text_link.json b/builder/builder/builder_block_template/text_link/text_link.json
index a6792431a..d92f10063 100644
--- a/builder/builder/builder_block_template/text_link/text_link.json
+++ b/builder/builder/builder_block_template/text_link/text_link.json
@@ -8,7 +8,7 @@
  "modified": "2024-09-19 13:09:34.940528",
  "modified_by": "Administrator",
  "name": "Text Link",
- "order": 12,
+ "sort_order": 12,
  "owner": "Administrator",
  "preview": "/builder_assets/Text Link/text-link.png",
  "preview_height": 1,
diff --git a/builder/builder/builder_block_template/video/video.json b/builder/builder/builder_block_template/video/video.json
index 721f49346..76f68ce0c 100644
--- a/builder/builder/builder_block_template/video/video.json
+++ b/builder/builder/builder_block_template/video/video.json
@@ -10,5 +10,6 @@
  "name": "Video",
  "owner": "Administrator",
  "preview": "/builder_assets/Video/video.png",
- "template_name": "Video"
+ "template_name": "Video",
+ "sort_order": 19
 }
\ No newline at end of file
diff --git a/builder/builder/doctype/block_template/block_template.json b/builder/builder/doctype/block_template/block_template.json
index e1b8e0067..5641d7e74 100644
--- a/builder/builder/doctype/block_template/block_template.json
+++ b/builder/builder/doctype/block_template/block_template.json
@@ -12,7 +12,7 @@
   "preview_width",
   "preview_height",
   "category",
-  "order"
+  "sort_order"
  ],
  "fields": [
   {
@@ -58,9 +58,9 @@
    "label": "Preview Height"
   },
   {
-   "fieldname": "order",
+   "fieldname": "sort_order",
    "fieldtype": "Int",
-   "label": "Order"
+   "label": "Sort Order"
   }
  ],
  "in_create": 1,
@@ -98,7 +98,7 @@
    "write": 1
   }
  ],
- "sort_field": "creation",
- "sort_order": "DESC",
+ "sort_field": "sort_order",
+ "sort_order": "ASC",
  "states": []
 }
\ No newline at end of file
diff --git a/frontend/src/data/builderBlockTemplate.ts b/frontend/src/data/builderBlockTemplate.ts
index 9586b93e3..f8947869d 100644
--- a/frontend/src/data/builderBlockTemplate.ts
+++ b/frontend/src/data/builderBlockTemplate.ts
@@ -3,7 +3,8 @@ import { createListResource } from "frappe-ui";
 const builderBlockTemplate = createListResource({
 	method: "GET",
 	doctype: "Block Template",
-	fields: ["template_name", "category", "preview", "name", "preview_width", "preview_height"],
+	fields: ["template_name", "category", "preview", "name", "preview_width", "preview_height", "sort_order"],
+	orderBy: "sort_order asc",
 	cache: "blockTemplates",
 	start: 0,
 	pageLength: 100,

From b039b8d5253d9c6d34d5b68403c016728ff44957 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Mon, 30 Mar 2026 00:13:24 +0530
Subject: [PATCH 492/547] added arrow key increment/decrement logic

---
 .../src/components/Controls/Autocomplete.vue  | 68 +++++++++++++-
 frontend/src/components/Controls/Input.vue    | 89 ++++++++++++++++++-
 .../src/components/Controls/RangeInput.vue    |  3 +-
 3 files changed, 156 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index eb4655fc6..70b5d1527 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -5,7 +5,7 @@
 		open-on-click
 		open-on-focus
 		:reset-search-term-on-blur="false">
-		<div class="relative" ref="containerRef">
+		<div class="group relative" ref="containerRef">
 			<div
 				class="group form-input flex h-7 flex-1 items-center gap-2 rounded bg-surface-gray-2 p-0 text-sm text-ink-gray-8 transition-colors focus-within:bg-surface-white focus-within:ring-2 focus-within:ring-outline-gray-3">
 				<div v-if="$slots.prefix" class="flex items-center pl-2">
@@ -35,6 +35,51 @@
 				</Button>
 			</div>
 
+			<div
+				v-if="hasNumber"
+				class="gap-0.1 pointer-events-none absolute right-6 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+				<button
+					type="button"
+					class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
+					@click.stop="incrementValue"
+					@mousedown.prevent
+					tabindex="-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="text-ink-gray-6">
+						<polyline points="18 15 12 9 6 15"></polyline>
+					</svg>
+				</button>
+				<button
+					type="button"
+					class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
+					@click.stop="decrementValue"
+					@mousedown.prevent
+					tabindex="-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="text-ink-gray-6">
+						<polyline points="6 9 12 15 18 9"></polyline>
+					</svg>
+				</button>
+			</div>
+
 			<Teleport to="body" :disabled="!referenceElementSelector">
 				<ComboboxContent
 					@after-enter="
@@ -107,6 +152,7 @@ import {
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
 import { computed, nextTick, ref, watch } from "vue";
+import { extractNumberAndUnit } from "@/utils/helpers";
 
 interface Option {
 	label: string;
@@ -157,6 +203,26 @@ const contentRef = ref<ComponentPublicInstance | null>(null);
 const fixedPositionStyles = ref({});
 const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
+const hasNumber = computed(() => {
+	if (!props.modelValue) return false;
+	const value = String(props.modelValue);
+	return /\d/.test(value);
+});
+
+const incrementValue = () => {
+	const { number, unit } = extractNumberAndUnit(String(props.modelValue || ""));
+	const currentNum = parseFloat(number) || 0;
+	const newNum = parseFloat((currentNum + 1).toFixed(10));
+	emit("update:modelValue", newNum + unit);
+};
+
+const decrementValue = () => {
+	const { number, unit } = extractNumberAndUnit(String(props.modelValue || ""));
+	const currentNum = parseFloat(number) || 0;
+	const newNum = parseFloat((currentNum - 1).toFixed(10));
+	emit("update:modelValue", newNum + unit);
+};
+
 const displayOptions = computed(() => {
 	let options = allOptions.value;
 	if (
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 63a0885db..f6b7fc72f 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="relative w-full">
+	<div class="group relative w-full">
 		<Select
 			v-if="type === 'select'"
 			:modelValue="data as string"
@@ -37,13 +37,59 @@
 				</button>
 			</template>
 		</FormControl>
+
+		<div
+			v-if="hasNumber && !disabled"
+			class="gap-0.1 pointer-events-none absolute right-6 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+			<button
+				type="button"
+				class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
+				@click.stop="incrementValue"
+				@mousedown.prevent
+				tabindex="-1">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="12"
+					height="12"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="text-ink-gray-6">
+					<polyline points="18 15 12 9 6 15"></polyline>
+				</svg>
+			</button>
+			<button
+				type="button"
+				class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
+				@click.stop="decrementValue"
+				@mousedown.prevent
+				tabindex="-1">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="12"
+					height="12"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="text-ink-gray-6">
+					<polyline points="6 9 12 15 18 9"></polyline>
+				</svg>
+			</button>
+		</div>
 	</div>
 </template>
 <script lang="ts" setup>
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { useDebounceFn, useVModel } from "@vueuse/core";
 import { Select } from "frappe-ui";
-import { useAttrs } from "vue";
+import { computed, useAttrs } from "vue";
+import { extractNumberAndUnit } from "@/utils/helpers";
 
 const props = withDefaults(
 	defineProps<{
@@ -63,6 +109,12 @@ const props = withDefaults(
 const emit = defineEmits(["update:modelValue", "input"]);
 const data = useVModel(props, "modelValue", emit);
 
+const hasNumber = computed(() => {
+	if (!data.value) return false;
+	const value = String(data.value);
+	return /\d/.test(value);
+});
+
 defineOptions({
 	inheritAttrs: false,
 });
@@ -89,4 +141,37 @@ const handleFocus = ($event: Event) => {
 		}, 0);
 	}
 };
+
+const incrementValue = () => {
+	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
+	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
+	const currentNum = parseFloat(number) || 0;
+	const newNum = parseFloat((currentNum + step).toFixed(10));
+	const newValue = newNum + unit;
+	data.value = newValue;
+	emit("update:modelValue", newValue);
+};
+
+const decrementValue = () => {
+	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
+	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
+	const currentNum = parseFloat(number) || 0;
+	const newNum = parseFloat((currentNum - step).toFixed(10));
+	const newValue = newNum + unit;
+	data.value = newValue;
+	emit("update:modelValue", newValue);
+};
 </script>
+
+<style>
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+	-webkit-appearance: none !important;
+	margin: 0 !important;
+}
+
+input[type="number"] {
+	-moz-appearance: textfield !important;
+	appearance: textfield !important;
+}
+</style>
diff --git a/frontend/src/components/Controls/RangeInput.vue b/frontend/src/components/Controls/RangeInput.vue
index cf8100946..41692fa53 100644
--- a/frontend/src/components/Controls/RangeInput.vue
+++ b/frontend/src/components/Controls/RangeInput.vue
@@ -10,7 +10,8 @@
 			:step="step"
 			@focus="$emit('focus')"
 			@blur="$emit('blur')"
-			@input="$emit('update:modelValue', $event)"></BuilderInput>
+			@input="$emit('update:modelValue', $event)"
+			@update:modelValue="$emit('update:modelValue', $event)"></BuilderInput>
 		<input
 			type="range"
 			:max="max"

From 4a2086ed4cce1cfee79b60614f636184f3b76545 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 31 Mar 2026 17:46:41 +0530
Subject: [PATCH 493/547] fix: replaced `prev_blocks` with `block` for
 inherited block data

now all blocks can access all prev blocks' data using the `block` keyword itself
---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 builder/utils.py                                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 1e41ed055..f352c5927 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -504,7 +504,7 @@ def get_block_data(
 	frappe.has_permission("Builder Page", "write", throw=True)
 	props = frappe.parse_json(props or "{}")
 	block_data = frappe._dict()
-	_locals = dict(block=frappe._dict(), prev_blocks=frappe._dict(prev_block_data or {}), props=props)
+	_locals = dict(block=frappe._dict(prev_block_data or {}), props=props)
 	execute_script(block_data_script, _locals, block_id)
 	if isinstance(_locals["block"], dict):
 		block_data.update(_locals["block"])
diff --git a/builder/utils.py b/builder/utils.py
index 3751cce6f..f16310994 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -688,7 +688,7 @@ def to_safe_json(data):
 def execute_script_and_combine(prev_block_data, block_data_script, props):
 	props = frappe._dict(frappe.parse_json(props or "{}"))
 	block_data = frappe._dict()
-	_locals = dict(block=frappe._dict(), prev_blocks=to_dict_with_fallback(prev_block_data), props=props)
+	_locals = dict(block=to_dict_with_fallback(prev_block_data or {}), props=props)
 	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
 	return combine(prev_block_data, block_data)

From 32c8494a5cabdf98d1a7e98369b2584d68653b62 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 31 Mar 2026 18:56:15 +0530
Subject: [PATCH 494/547] fix: combine is no more required

---
 builder/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/utils.py b/builder/utils.py
index f16310994..8d3ed8efd 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -691,4 +691,4 @@ def execute_script_and_combine(prev_block_data, block_data_script, props):
 	_locals = dict(block=to_dict_with_fallback(prev_block_data or {}), props=props)
 	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
-	return combine(prev_block_data, block_data)
+	return block_data

From 57d320853155520109e42c8351224233f5f1b7a0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 31 Mar 2026 18:57:41 +0530
Subject: [PATCH 495/547] fix: return only own block data

---
 builder/builder/doctype/builder_page/builder_page.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index f352c5927..15dbf539f 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -506,8 +506,12 @@ def get_block_data(
 	block_data = frappe._dict()
 	_locals = dict(block=frappe._dict(prev_block_data or {}), props=props)
 	execute_script(block_data_script, _locals, block_id)
+	
 	if isinstance(_locals["block"], dict):
-		block_data.update(_locals["block"])
+		block_data = frappe._dict({
+			k: v for k, v in _locals["block"].items()
+			if prev_block_data.get(k) != v
+		})
 	return block_data
 
 

From 8e3dd99a6c6cf95c00a8d88171e1ebbdd81cb7af Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 31 Mar 2026 19:01:31 +0530
Subject: [PATCH 496/547] fix: added toggle for inherited data in dialog

---
 frontend/src/components/PageScript.vue | 38 ++++++++++++++++----------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index 7ca3777c2..fe9168162 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -24,10 +24,10 @@
 						:autofocus="false"
 						:readonly="true"></CodeEditor>
 					<div class="flex w-full items-center justify-between py-4">
-						<div class="text-sm text-ink-gray-6">Show cumulative data</div>
+						<div class="text-sm text-ink-gray-6">Show inherited data</div>
 						<Switch
-							:model-value="showCumulativeBlockData"
-							@update:model-value="(val) => (showCumulativeBlockData = val)" />
+							:model-value="showInheritedBlockData"
+							@update:model-value="(val) => (showInheritedBlockData = val)" />
 					</div>
 					<div class="my-3 mt-4 text-sm text-ink-gray-8">Block Props</div>
 					<PropsEditor
@@ -129,18 +129,26 @@
 								@save="saveBlockDataScript"
 								:showSaveButton="true"
 								:show-line-numbers="true"></CodeEditor>
-							<CodeEditor
-								v-model="blockData"
-								type="JSON"
-								label="Data Preview"
-								:showLineNumbers="true"
-								class="-mt-5 w-1/3 [&>div>div]:bg-surface-white"
-								height="calc(100% - 110px)"
-								description='Use Block Data Script to provide dynamic data to your block.<br>
+							<div class="-mt-5 w-1/3 p-4" height="calc(100% - 110px)">
+								<CodeEditor
+									v-model="blockData"
+									type="JSON"
+									label="Data Preview"
+									:showLineNumbers="true"
+									height="calc(100% - 140px)"
+									class="h-full [&>div>div]:bg-surface-white"
+									description='Use Block Data Script to provide dynamic data to your block.<br>
 								<b>Example:</b> block.events = frappe.get_list("Event")<br><br>
 								For more details on how to write block data script, refer to <b><a class="underline" href="https://docs.frappe.io/builder/data-script" target="_blank">this documentation</a></b>.
 								'
-								:readonly="true"></CodeEditor>
+									:readonly="true"></CodeEditor>
+								<div class="flex items-center justify-between gap-4">
+									<div class="text-sm text-ink-gray-6">Show inherited data</div>
+									<Switch
+										:model-value="showInheritedBlockData"
+										@update:model-value="(val) => (showInheritedBlockData = val)" />
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -172,7 +180,7 @@ const blockDataStore = useBlockDataStore();
 
 const showDialog = ref(false);
 const mode = useStorage("builder_last_used_script_editor_mode", "page");
-const showCumulativeBlockData = ref(false);
+const showInheritedBlockData = ref(false);
 
 const props = defineProps<{
 	page: BuilderPage;
@@ -204,8 +212,8 @@ const blockData = computed(() => {
 	return isBlockSelected.value
 		? blockDataStore.getBlockData(
 				blockController.getFirstSelectedBlock().blockId,
-				showCumulativeBlockData.value ? "all" : "own",
-			) || {}
+				showInheritedBlockData.value ? "all" : "own",
+		  ) || {}
 		: {};
 });
 

From e947c40fae90a61941d0c09b4803f509235c56f2 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Tue, 31 Mar 2026 19:03:25 +0530
Subject: [PATCH 497/547] chore: ran pre-commit

---
 builder/builder/doctype/builder_page/builder_page.py | 7 ++-----
 frontend/src/components/PageScript.vue               | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index 15dbf539f..dc440073d 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -506,12 +506,9 @@ def get_block_data(
 	block_data = frappe._dict()
 	_locals = dict(block=frappe._dict(prev_block_data or {}), props=props)
 	execute_script(block_data_script, _locals, block_id)
-	
+
 	if isinstance(_locals["block"], dict):
-		block_data = frappe._dict({
-			k: v for k, v in _locals["block"].items()
-			if prev_block_data.get(k) != v
-		})
+		block_data = frappe._dict({k: v for k, v in _locals["block"].items() if prev_block_data.get(k) != v})
 	return block_data
 
 
diff --git a/frontend/src/components/PageScript.vue b/frontend/src/components/PageScript.vue
index fe9168162..66e43c992 100644
--- a/frontend/src/components/PageScript.vue
+++ b/frontend/src/components/PageScript.vue
@@ -213,7 +213,7 @@ const blockData = computed(() => {
 		? blockDataStore.getBlockData(
 				blockController.getFirstSelectedBlock().blockId,
 				showInheritedBlockData.value ? "all" : "own",
-		  ) || {}
+			) || {}
 		: {};
 });
 

From 239f1c7cd51ac0114a6f277e5baa65fa2388d71c Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Wed, 1 Apr 2026 01:43:01 +0530
Subject: [PATCH 498/547] fix: select dropdown rendering as text input in
 overflow

---
 frontend/src/components/Controls/StylePropertyControl.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index e486e0be5..cd3958718 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -31,6 +31,8 @@ const props = withDefaults(
 		maxValue?: number | null;
 		component?: Component;
 		events?: Record<string, unknown>;
+		type?: "select";
+		options?: Array<{ label: string; value: string | null }>;
 		defaultValue?: string | number;
 		allowDynamicValue?: boolean;
 		labelPlacement?: "left" | "top";

From f6f77e92c0996b93800c76f2aaf4c9a3f40cc8c3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 11:51:56 +0530
Subject: [PATCH 499/547] fix(PlacementControl): Maintain justifyContent on
 click different cell

- Also match the preview on hover to state user will get after click
---
 frontend/src/components/PlacementControl.vue | 150 +++++++++++--------
 1 file changed, 85 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/PlacementControl.vue b/frontend/src/components/PlacementControl.vue
index fc8b5ea01..bd8069261 100644
--- a/frontend/src/components/PlacementControl.vue
+++ b/frontend/src/components/PlacementControl.vue
@@ -11,29 +11,18 @@
 						'!justify-end': option.includes('right'),
 						'!items-start': option.includes('top'),
 						'!items-end': option.includes('bottom'),
-					}">
+					}"
+					@mouseenter="hoveredSlot = getSlot(option)"
+					@mouseleave="hoveredSlot = null"
+					@click="setAlignment(option)"
+					@dblclick="setAlignment(option, true)">
 					<div
-						@click="setAlignment(option)"
-						@dblclick="setAlignment(option, true)"
-						class="flex size-1 items-center justify-center rounded-full bg-surface-gray-5 opacity-50 group-hover/option:hidden"></div>
+						class="flex size-1 items-center justify-center rounded-full bg-surface-gray-5 opacity-50"
+						:class="{ 'group-hover/option:hidden': !isDistributed }"></div>
 					<div
-						@click="setAlignment(option)"
-						@dblclick="setAlignment(option, true)"
+						v-if="!isDistributed"
 						class="hidden w-5 gap-[2px] hover:opacity-100 group-hover/option:flex"
-						:class="{
-							'flex-row': direction === 'row',
-							'flex-col': direction === 'column',
-							'items-center':
-								(direction === 'column' &&
-									(option === 'top-middle' || option === 'middle-middle' || option === 'bottom-middle')) ||
-								(direction === 'row' &&
-									(option === 'middle-left' || option === 'middle-middle' || option === 'middle-right')),
-							'items-end':
-								(direction === 'column' &&
-									(option === 'top-right' || option === 'middle-right' || option === 'bottom-right')) ||
-								(direction === 'row' &&
-									(option === 'bottom-left' || option === 'bottom-middle' || option === 'bottom-right')),
-						}">
+						:style="previewStyle(option)">
 						<div
 							class="rounded-sm bg-surface-gray-5"
 							:class="{
@@ -57,11 +46,7 @@
 			</div>
 			<div
 				class="pointer-events-none absolute top-0 flex h-full w-full cursor-pointer gap-[2px] rounded-sm p-1.5"
-				:style="{
-					'flex-direction': direction,
-					'justify-content': justifyContent,
-					'align-items': alignItems,
-				}">
+				:style="selectedOverlayStyle">
 				<div
 					class="rounded-sm bg-surface-gray-6"
 					:class="{
@@ -81,12 +66,35 @@
 						'h-2 w-1': direction === 'row',
 					}"></div>
 			</div>
+			<div
+				v-if="isDistributed && hoveredSlot"
+				class="pointer-events-none absolute top-0 flex h-full w-full cursor-pointer gap-[2px] rounded-sm p-1.5 opacity-40"
+				:style="hoverOverlayStyle">
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-3': direction === 'column',
+						'h-3 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 import blockController from "@/utils/blockController";
-import { computed } from "vue";
+import { type CSSProperties, computed, ref } from "vue";
 
 const placementOptions = [
 	"top-left",
@@ -104,47 +112,59 @@ const direction = computed(() => (blockController.getStyle("flexDirection") || "
 const justifyContent = computed(() => (blockController.getStyle("justifyContent") || "flex-start") as string);
 const alignItems = computed(() => (blockController.getStyle("alignItems") || "stretch") as string);
 
+const toFlex = (s: string) =>
+	s === "top" || s === "left" ? "flex-start" : s === "middle" ? "center" : "flex-end";
+
+const isDistributed = computed(() => isSpacing(justifyContent.value));
+const hoveredSlot = ref<string | null>(null);
+
+const getSlot = (option: string) => {
+	const [vertical, horizontal] = option.split("-");
+	return direction.value === "row" ? vertical : horizontal;
+};
+
+const hoverAlignItems = computed(() =>
+	isDistributed.value && hoveredSlot.value ? toFlex(hoveredSlot.value) : alignItems.value,
+);
+
+const selectedOverlayStyle = computed<CSSProperties>(() => ({
+	flexDirection: direction.value as CSSProperties["flexDirection"],
+	justifyContent: justifyContent.value as CSSProperties["justifyContent"],
+	alignItems: alignItems.value,
+}));
+
+const hoverOverlayStyle = computed<CSSProperties>(() => ({
+	flexDirection: direction.value as CSSProperties["flexDirection"],
+	justifyContent: justifyContent.value as CSSProperties["justifyContent"],
+	alignItems: hoverAlignItems.value,
+}));
+
+const previewStyle = (option: string): CSSProperties => {
+	const [vertical, horizontal] = option.split("-");
+	const isRow = direction.value === "row";
+	const wouldBeJC = isSpacing(justifyContent.value)
+		? justifyContent.value
+		: toFlex(isRow ? horizontal : vertical);
+	return {
+		flexDirection: direction.value as CSSProperties["flexDirection"],
+		justifyContent: wouldBeJC as CSSProperties["justifyContent"],
+		alignItems: toFlex(isRow ? vertical : horizontal),
+	};
+};
+
+const isSpacing = (v: string) => v.startsWith("space-");
+
 const setAlignment = (alignment: string, spaceBetween: boolean = false) => {
-	switch (alignment) {
-		case "top-right":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-end" : "flex-start");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-start" : "flex-end");
-			break;
-		case "top-middle":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "center" : "flex-start");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-start" : "center");
-			break;
-		case "top-left":
-			blockController.setStyle("justifyContent", "flex-start");
-			blockController.setStyle("alignItems", "flex-start");
-			break;
-		case "middle-right":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-end" : "center");
-			blockController.setStyle("alignItems", direction.value === "row" ? "center" : "flex-end");
-			break;
-		case "middle-middle":
-			blockController.setStyle("justifyContent", "center");
-			blockController.setStyle("alignItems", "center");
-			break;
-		case "middle-left":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-start" : "center");
-			blockController.setStyle("alignItems", direction.value === "row" ? "center" : "flex-start");
-			break;
-		case "bottom-right":
-			blockController.setStyle("justifyContent", "flex-end");
-			blockController.setStyle("alignItems", "flex-end");
-			break;
-		case "bottom-middle":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "center" : "flex-end");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-end" : "center");
-			break;
-		case "bottom-left":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-start" : "flex-end");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-end" : "flex-start");
-			break;
-	}
+	const [vertical, horizontal] = alignment.split("-");
+	const isRow = direction.value === "row";
+	blockController.setStyle("alignItems", toFlex(isRow ? vertical : horizontal));
 	if (spaceBetween) {
-		blockController.setStyle("justifyContent", "space-between");
+		blockController.setStyle(
+			"justifyContent",
+			isSpacing(justifyContent.value) ? toFlex(isRow ? horizontal : vertical) : "space-between",
+		);
+	} else if (!isSpacing(justifyContent.value)) {
+		blockController.setStyle("justifyContent", toFlex(isRow ? horizontal : vertical));
 	}
 };
 </script>

From fe13e9171d7c32563bcb0c7fdeebbca83fbd4180 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 15:34:24 +0530
Subject: [PATCH 500/547] feat(ColorPicker): add alpha channel support

Refactor
---
 .../src/components/Controls/ColorPicker.vue   | 194 +++++++++++-------
 frontend/src/utils/helpers.ts                 |  35 +++-
 2 files changed, 149 insertions(+), 80 deletions(-)

diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index ebc83d144..7a4034e90 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -45,6 +45,17 @@
 						:class="hueSelectorClass"
 						:style="hueSelectorStyle"></div>
 				</div>
+				<div
+					ref="alphaMap"
+					class="relative m-auto h-3 w-full rounded-md"
+					@click="setAlpha"
+					@mousedown.prevent="handleAlphaSelectorMove"
+					:style="alphaMapStyle">
+					<div
+						@mousedown="handleAlphaSelectorMove"
+						:class="hueSelectorClass"
+						:style="alphaSelectorStyle"></div>
+				</div>
 				<div ref="colorPalette">
 					<div class="flex flex-wrap gap-1.5">
 						<div
@@ -100,6 +111,14 @@
 				:class="hueSelectorClass"
 				:style="hueSelectorStyle"></div>
 		</div>
+		<div
+			ref="alphaMap"
+			class="relative m-auto h-3 w-full rounded-md"
+			@click="setAlpha"
+			@mousedown.prevent="handleAlphaSelectorMove"
+			:style="alphaMapStyle">
+			<div @mousedown="handleAlphaSelectorMove" :class="hueSelectorClass" :style="alphaSelectorStyle"></div>
+		</div>
 		<div ref="colorPalette">
 			<div class="flex flex-wrap gap-1.5">
 				<div
@@ -128,7 +147,7 @@ import useCanvasStore from "@/stores/canvasStore";
 import { getColorVariableOptions } from "@/utils/colorOptions";
 import { HSVToHex, HexToHSV, getRGB } from "@/utils/helpers";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
-import { clamp, useDark, useEyeDropper } from "@vueuse/core";
+import { clamp, useDark, useElementBounding, useEyeDropper } from "@vueuse/core";
 import { Popover } from "frappe-ui";
 import { Ref, StyleValue, computed, nextTick, ref, watch } from "vue";
 
@@ -143,11 +162,22 @@ const isDark = useDark({
 const canvasStore = useCanvasStore();
 const hueMap = ref(null) as unknown as Ref<HTMLDivElement>;
 const colorMap = ref(null) as unknown as Ref<HTMLDivElement>;
+const alphaMap = ref(null) as unknown as Ref<HTMLDivElement>;
+
+const {
+	width: colorMapWidth,
+	height: colorMapHeight,
+	left: colorMapLeft,
+	top: colorMapTop,
+} = useElementBounding(colorMap);
+const { width: hueMapWidth, left: hueMapLeft } = useElementBounding(hueMap);
+const { width: alphaMapWidth, left: alphaMapLeft } = useElementBounding(alphaMap);
 
 const colorPickerPopover = ref<InstanceType<typeof Popover> | null>(null);
 
 const colorSelectorPosition = ref({ x: 0, y: 0 });
 const hueSelectorPosition = ref({ x: 0, y: 0 });
+const alphaSelectorPosition = ref({ x: Infinity, y: 0 });
 let currentColor = "#FFF" as HashString;
 
 const { isSupported, sRGBHex, open } = useEyeDropper();
@@ -226,6 +256,23 @@ const hueMapStyle = computed(() => ({
 	`,
 }));
 
+const liveSolidColor = computed(() => {
+	if (!colorMapWidth.value || !colorMapHeight.value) return `hsl(${hue.value}, 100%, 50%)`;
+	const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
+	const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
+	return HSVToHex(hue.value, s, v) as string;
+});
+
+const alphaMapStyle = computed(() => {
+	const solidColor = liveSolidColor.value;
+	return {
+		background: `
+			linear-gradient(90deg, transparent, ${solidColor}),
+			repeating-conic-gradient(#ccc 0% 25%, var(--surface-white) 0% 50%) 0 0 / 8px 8px
+		`,
+	};
+});
+
 const selectorClass =
 	"absolute rounded-full border border-black border-opacity-20 before:absolute before:h-full before:w-full before:rounded-full before:border-2 before:border-white before:!bg-[currentColor] after:absolute after:left-[2px] after:top-[2px] after:h-[calc(100%-4px)] after:w-[calc(100%-4px)] after:rounded-full after:border after:border-black after:border-opacity-20 after:bg-transparent";
 
@@ -239,7 +286,7 @@ const colorSelectorStyle = computed(
 			width: "12px",
 			left: `calc(${colorSelectorPosition.value.x}px - 6px)`,
 			top: `calc(${colorSelectorPosition.value.y}px - 6px)`,
-			color: modelColor.value || "#FFF",
+			color: liveSolidColor.value,
 			background: "transparent",
 		}) as StyleValue,
 );
@@ -252,6 +299,21 @@ const hueSelectorStyle = computed(() => ({
 	background: "transparent",
 }));
 
+const alphaSelectorStyle = computed(() => {
+	const alphaByte = Math.round((alpha.value / 100) * 255);
+	const colorWithAlpha =
+		alphaByte < 255
+			? (`${liveSolidColor.value}${alphaByte.toString(16).padStart(2, "0")}` as HashString)
+			: liveSolidColor.value;
+	return {
+		height: "12px",
+		width: "12px",
+		left: `calc(${clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value)}px - 6px)`,
+		color: colorWithAlpha,
+		background: "transparent",
+	};
+});
+
 const handleColorPaletteClick = (color: HashString) => {
 	setSelectorPosition(color);
 	updateColor();
@@ -273,86 +335,66 @@ const handleInputChange = (color: string | null) => {
 };
 
 const setColorSelectorPosition = (color: string) => {
-	if (!colorMap.value) return;
-	const rect = colorMap.value.getBoundingClientRect();
-	if (!rect || !rect.width || !rect.height) return;
-
-	const { width, height } = rect;
+	if (!colorMapWidth.value || !colorMapHeight.value) return;
 	const { s, v } = HexToHSV(color as HashString);
-	let x = clamp(s * width, 0, width);
-	let y = clamp((1 - v) * height, 0, height);
-	colorSelectorPosition.value = { x, y };
+	colorSelectorPosition.value = {
+		x: clamp(s * colorMapWidth.value, 0, colorMapWidth.value),
+		y: clamp((1 - v) * colorMapHeight.value, 0, colorMapHeight.value),
+	};
 };
 
 const setHueSelectorPosition = (color: string) => {
-	if (!hueMap.value) return;
-	const rect = hueMap.value.getBoundingClientRect();
-	if (!rect || !rect.width) return;
-
-	const { width } = rect;
+	if (!hueMapWidth.value) return;
 	const { h } = HexToHSV(color as HashString);
-	const left = (h / 360) * width;
-	hueSelectorPosition.value = { x: left, y: 0 };
+	hueSelectorPosition.value = { x: (h / 360) * hueMapWidth.value, y: 0 };
 };
 
-const handleSelectorMove = (ev: MouseEvent) => {
-	setColor(ev);
-	const pauseId = canvasStore.activeCanvas?.history?.pause();
-	const mouseMove = (mouseMoveEvent: MouseEvent) => {
-		mouseMoveEvent.preventDefault();
-		setColor(mouseMoveEvent);
-	};
-	document.addEventListener("mousemove", mouseMove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.removeEventListener("mousemove", mouseMove);
-			mouseUpEvent.preventDefault();
-			pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
-		},
-		{ once: true },
-	);
+const setAlphaSelectorPosition = (color: string) => {
+	if (!alphaMapWidth.value) return;
+	const { a } = HexToHSV(color as HashString);
+	alphaSelectorPosition.value = { x: (a / 100) * alphaMapWidth.value, y: 0 };
 };
 
-const handleHueSelectorMove = (ev: MouseEvent) => {
-	setHue(ev);
-	const pauseId = canvasStore.activeCanvas?.history?.pause();
-	const mouseMove = (mouseMoveEvent: MouseEvent) => {
-		mouseMoveEvent.preventDefault();
-		setHue(mouseMoveEvent);
+function makeDragHandler(setter: (ev: MouseEvent) => void) {
+	return (ev: MouseEvent) => {
+		setter(ev);
+		const pauseId = canvasStore.activeCanvas?.history?.pause();
+		const onMove = (e: MouseEvent) => {
+			e.preventDefault();
+			setter(e);
+		};
+		document.addEventListener("mousemove", onMove);
+		document.addEventListener(
+			"mouseup",
+			(e) => {
+				document.removeEventListener("mousemove", onMove);
+				e.preventDefault();
+				pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
+			},
+			{ once: true },
+		);
 	};
-	document.addEventListener("mousemove", mouseMove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			document.removeEventListener("mousemove", mouseMove);
-			mouseUpEvent.preventDefault();
-			pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
-		},
-		{ once: true },
-	);
-};
-
-function setColor(ev: MouseEvent) {
-	const clickPointX = ev.clientX;
-	const clickPointY = ev.clientY;
-	const colorMapBounds = colorMap.value.getBoundingClientRect();
+}
 
-	let pointX = clickPointX - colorMapBounds.left;
-	let pointY = clickPointY - colorMapBounds.top;
+const handleSelectorMove = makeDragHandler(setColor);
+const handleHueSelectorMove = makeDragHandler(setHue);
+const handleAlphaSelectorMove = makeDragHandler(setAlpha);
 
-	pointX = clamp(pointX, 0, colorMapBounds.width);
-	pointY = clamp(pointY, 0, colorMapBounds.height);
-	colorSelectorPosition.value = { x: pointX, y: pointY };
+function setColor(ev: MouseEvent) {
+	colorSelectorPosition.value = {
+		x: clamp(ev.clientX - colorMapLeft.value, 0, colorMapWidth.value),
+		y: clamp(ev.clientY - colorMapTop.value, 0, colorMapHeight.value),
+	};
 	updateColor();
 }
 
 function setHue(ev: MouseEvent) {
-	const hueMapBounds = hueMap.value.getBoundingClientRect();
-	const { clientX } = ev;
-	let point = clientX - hueMapBounds.left;
-	point = clamp(point, 0, hueMapBounds.width);
-	hueSelectorPosition.value = { x: point, y: 0 };
+	hueSelectorPosition.value = { x: clamp(ev.clientX - hueMapLeft.value, 0, hueMapWidth.value), y: 0 };
+	updateColor();
+}
+
+function setAlpha(ev: MouseEvent) {
+	alphaSelectorPosition.value = { x: clamp(ev.clientX - alphaMapLeft.value, 0, alphaMapWidth.value), y: 0 };
 	updateColor();
 }
 
@@ -360,30 +402,34 @@ function setSelectorPosition(color: HashString | null) {
 	if (!color) {
 		colorSelectorPosition.value = { x: 0, y: 0 };
 		hueSelectorPosition.value = { x: 0, y: 0 };
+		alphaSelectorPosition.value = { x: Infinity, y: 0 };
 		return;
 	}
 	const resolvedColor = resolveVariableValue(color);
 	nextTick(() => {
 		setColorSelectorPosition(resolvedColor);
 		setHueSelectorPosition(resolvedColor);
+		setAlphaSelectorPosition(resolvedColor);
 		currentColor = resolvedColor as HashString;
 	});
 }
 
 const hue = computed(() => {
-	if (!hueMap.value) return 0;
 	const positionX = hueSelectorPosition.value.x || 0;
-	const width = hueMap.value.getBoundingClientRect().width || 1;
-	return Math.round((positionX / width) * 360);
+	return Math.round((positionX / (hueMapWidth.value || 1)) * 360);
+});
+
+const alpha = computed(() => {
+	const positionX = clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value || 1);
+	return Math.round((positionX / (alphaMapWidth.value || 1)) * 100);
 });
 
 const updateColor = () => {
 	nextTick(() => {
-		const colorMapBounds = colorMap.value.getBoundingClientRect();
-		const s = Math.round((colorSelectorPosition.value.x / colorMapBounds.width) * 100);
-		const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapBounds.height) * 100);
-		const h = hue.value;
-		currentColor = HSVToHex(h, s, v);
+		if (!colorMapWidth.value || !colorMapHeight.value) return;
+		const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
+		const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
+		currentColor = HSVToHex(hue.value, s, v, alpha.value);
 		emit("update:modelValue", currentColor);
 	});
 };
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index b7375af8e..39540a135 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -9,7 +9,6 @@ import { FileUploadHandler } from "frappe-ui";
 import { defineComponent, h, markRaw, reactive, ref, toRaw } from "vue";
 import { toast } from "vue-sonner";
 import Dialog from "../components/Controls/Dialog.vue";
-import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 
 function getNumberFromPx(px: string | number | null | undefined): number {
 	if (!px) {
@@ -30,7 +29,7 @@ function addPxToNumber(number: number, round: boolean = true): string {
 	return `${number}px`;
 }
 
-function HexToHSV(color: HashString): { h: number; s: number; v: number } {
+function HexToHSV(color: HashString): { h: number; s: number; v: number; a: number } {
 	// Remove hash and normalize length
 	let hex = color.replace("#", "").trim();
 
@@ -42,9 +41,16 @@ function HexToHSV(color: HashString): { h: number; s: number; v: number } {
 			.join("");
 	}
 
+	// Extract alpha from 8-digit hex (#RRGGBBAA)
+	let a = 100;
+	if (/^[0-9a-fA-F]{8}$/.test(hex)) {
+		a = Math.round((parseInt(hex.slice(6, 8), 16) / 255) * 100);
+		hex = hex.slice(0, 6);
+	}
+
 	// If not valid hex, return black
 	if (!/^[0-9a-fA-F]{6}$/.test(hex)) {
-		return { h: 0, s: 0, v: 0 };
+		return { h: 0, s: 0, v: 0, a: 100 };
 	}
 
 	const r = parseInt(hex.slice(0, 2), 16);
@@ -69,10 +75,10 @@ function HexToHSV(color: HashString): { h: number; s: number; v: number } {
 		h *= 60;
 	}
 
-	return { h, s, v };
+	return { h, s, v, a };
 }
 
-function HSVToHex(h: number, s: number, v: number): HashString {
+function HSVToHex(h: number, s: number, v: number, a: number = 100): HashString {
 	s /= 100;
 	v /= 100;
 	h /= 360;
@@ -110,7 +116,12 @@ function HSVToHex(h: number, s: number, v: number): HashString {
 	r = Math.round(r * 255);
 	g = Math.round(g * 255);
 	b = Math.round(b * 255);
-	return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+	const hex = `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}` as HashString;
+	const alphaByte = Math.round((a / 100) * 255);
+	if (alphaByte < 255) {
+		return `${hex}${alphaByte.toString(16).padStart(2, "0")}` as HashString;
+	}
+	return hex;
 }
 
 function getRandomColor() {
@@ -180,6 +191,18 @@ function getRGB(color: HashString | RGBString | string | null): HashString | nul
 	if (!color) {
 		return null;
 	}
+	if (color.startsWith("rgba")) {
+		const parts = color
+			.replace("rgba(", "")
+			.replace(")", "")
+			.split(",")
+			.map((x) => x.trim());
+		const [r, g, b] = parts.map((x) => parseInt(x));
+		const alphaHex = Math.round(parseFloat(parts[3]) * 255)
+			.toString(16)
+			.padStart(2, "0");
+		return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}${alphaHex}` as HashString;
+	}
 	if (color.startsWith("rgb")) {
 		return RGBToHex(color as RGBString);
 	} else if (!color.startsWith("#") && color.match(/\b[a-fA-F0-9]{3,6}\b/g)) {

From a619e20d9d26b0aa8efbf6aad6decefd5ae91ba1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 15:41:41 +0530
Subject: [PATCH 501/547] fix(ColorPicker): Set proper color as selector
 position on initial load

---
 frontend/src/components/Controls/ColorPicker.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index 7a4034e90..c81a8c1dd 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -180,6 +180,19 @@ const hueSelectorPosition = ref({ x: 0, y: 0 });
 const alphaSelectorPosition = ref({ x: Infinity, y: 0 });
 let currentColor = "#FFF" as HashString;
 
+let pendingPositionColor: string | null = null;
+
+watch(colorMapWidth, (w) => {
+	if (w && pendingPositionColor) {
+		const color = pendingPositionColor;
+		nextTick(() => {
+			setColorSelectorPosition(color);
+			setHueSelectorPosition(color);
+			setAlphaSelectorPosition(color);
+		});
+	}
+});
+
 const { isSupported, sRGBHex, open } = useEyeDropper();
 
 const props = withDefaults(
@@ -403,9 +416,11 @@ function setSelectorPosition(color: HashString | null) {
 		colorSelectorPosition.value = { x: 0, y: 0 };
 		hueSelectorPosition.value = { x: 0, y: 0 };
 		alphaSelectorPosition.value = { x: Infinity, y: 0 };
+		pendingPositionColor = null;
 		return;
 	}
 	const resolvedColor = resolveVariableValue(color);
+	pendingPositionColor = resolvedColor;
 	nextTick(() => {
 		setColorSelectorPosition(resolvedColor);
 		setHueSelectorPosition(resolvedColor);

From cd7bc544c8b5e2d05a7d05262ba7fa94cf267483 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 11:51:56 +0530
Subject: [PATCH 502/547] fix(PlacementControl): Maintain justifyContent on
 click different cell

- Also match the preview on hover to state user will get after click
---
 frontend/src/components/PlacementControl.vue | 150 +++++++++++--------
 1 file changed, 85 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/PlacementControl.vue b/frontend/src/components/PlacementControl.vue
index fc8b5ea01..bd8069261 100644
--- a/frontend/src/components/PlacementControl.vue
+++ b/frontend/src/components/PlacementControl.vue
@@ -11,29 +11,18 @@
 						'!justify-end': option.includes('right'),
 						'!items-start': option.includes('top'),
 						'!items-end': option.includes('bottom'),
-					}">
+					}"
+					@mouseenter="hoveredSlot = getSlot(option)"
+					@mouseleave="hoveredSlot = null"
+					@click="setAlignment(option)"
+					@dblclick="setAlignment(option, true)">
 					<div
-						@click="setAlignment(option)"
-						@dblclick="setAlignment(option, true)"
-						class="flex size-1 items-center justify-center rounded-full bg-surface-gray-5 opacity-50 group-hover/option:hidden"></div>
+						class="flex size-1 items-center justify-center rounded-full bg-surface-gray-5 opacity-50"
+						:class="{ 'group-hover/option:hidden': !isDistributed }"></div>
 					<div
-						@click="setAlignment(option)"
-						@dblclick="setAlignment(option, true)"
+						v-if="!isDistributed"
 						class="hidden w-5 gap-[2px] hover:opacity-100 group-hover/option:flex"
-						:class="{
-							'flex-row': direction === 'row',
-							'flex-col': direction === 'column',
-							'items-center':
-								(direction === 'column' &&
-									(option === 'top-middle' || option === 'middle-middle' || option === 'bottom-middle')) ||
-								(direction === 'row' &&
-									(option === 'middle-left' || option === 'middle-middle' || option === 'middle-right')),
-							'items-end':
-								(direction === 'column' &&
-									(option === 'top-right' || option === 'middle-right' || option === 'bottom-right')) ||
-								(direction === 'row' &&
-									(option === 'bottom-left' || option === 'bottom-middle' || option === 'bottom-right')),
-						}">
+						:style="previewStyle(option)">
 						<div
 							class="rounded-sm bg-surface-gray-5"
 							:class="{
@@ -57,11 +46,7 @@
 			</div>
 			<div
 				class="pointer-events-none absolute top-0 flex h-full w-full cursor-pointer gap-[2px] rounded-sm p-1.5"
-				:style="{
-					'flex-direction': direction,
-					'justify-content': justifyContent,
-					'align-items': alignItems,
-				}">
+				:style="selectedOverlayStyle">
 				<div
 					class="rounded-sm bg-surface-gray-6"
 					:class="{
@@ -81,12 +66,35 @@
 						'h-2 w-1': direction === 'row',
 					}"></div>
 			</div>
+			<div
+				v-if="isDistributed && hoveredSlot"
+				class="pointer-events-none absolute top-0 flex h-full w-full cursor-pointer gap-[2px] rounded-sm p-1.5 opacity-40"
+				:style="hoverOverlayStyle">
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-3': direction === 'column',
+						'h-3 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-surface-gray-5"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 import blockController from "@/utils/blockController";
-import { computed } from "vue";
+import { type CSSProperties, computed, ref } from "vue";
 
 const placementOptions = [
 	"top-left",
@@ -104,47 +112,59 @@ const direction = computed(() => (blockController.getStyle("flexDirection") || "
 const justifyContent = computed(() => (blockController.getStyle("justifyContent") || "flex-start") as string);
 const alignItems = computed(() => (blockController.getStyle("alignItems") || "stretch") as string);
 
+const toFlex = (s: string) =>
+	s === "top" || s === "left" ? "flex-start" : s === "middle" ? "center" : "flex-end";
+
+const isDistributed = computed(() => isSpacing(justifyContent.value));
+const hoveredSlot = ref<string | null>(null);
+
+const getSlot = (option: string) => {
+	const [vertical, horizontal] = option.split("-");
+	return direction.value === "row" ? vertical : horizontal;
+};
+
+const hoverAlignItems = computed(() =>
+	isDistributed.value && hoveredSlot.value ? toFlex(hoveredSlot.value) : alignItems.value,
+);
+
+const selectedOverlayStyle = computed<CSSProperties>(() => ({
+	flexDirection: direction.value as CSSProperties["flexDirection"],
+	justifyContent: justifyContent.value as CSSProperties["justifyContent"],
+	alignItems: alignItems.value,
+}));
+
+const hoverOverlayStyle = computed<CSSProperties>(() => ({
+	flexDirection: direction.value as CSSProperties["flexDirection"],
+	justifyContent: justifyContent.value as CSSProperties["justifyContent"],
+	alignItems: hoverAlignItems.value,
+}));
+
+const previewStyle = (option: string): CSSProperties => {
+	const [vertical, horizontal] = option.split("-");
+	const isRow = direction.value === "row";
+	const wouldBeJC = isSpacing(justifyContent.value)
+		? justifyContent.value
+		: toFlex(isRow ? horizontal : vertical);
+	return {
+		flexDirection: direction.value as CSSProperties["flexDirection"],
+		justifyContent: wouldBeJC as CSSProperties["justifyContent"],
+		alignItems: toFlex(isRow ? vertical : horizontal),
+	};
+};
+
+const isSpacing = (v: string) => v.startsWith("space-");
+
 const setAlignment = (alignment: string, spaceBetween: boolean = false) => {
-	switch (alignment) {
-		case "top-right":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-end" : "flex-start");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-start" : "flex-end");
-			break;
-		case "top-middle":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "center" : "flex-start");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-start" : "center");
-			break;
-		case "top-left":
-			blockController.setStyle("justifyContent", "flex-start");
-			blockController.setStyle("alignItems", "flex-start");
-			break;
-		case "middle-right":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-end" : "center");
-			blockController.setStyle("alignItems", direction.value === "row" ? "center" : "flex-end");
-			break;
-		case "middle-middle":
-			blockController.setStyle("justifyContent", "center");
-			blockController.setStyle("alignItems", "center");
-			break;
-		case "middle-left":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-start" : "center");
-			blockController.setStyle("alignItems", direction.value === "row" ? "center" : "flex-start");
-			break;
-		case "bottom-right":
-			blockController.setStyle("justifyContent", "flex-end");
-			blockController.setStyle("alignItems", "flex-end");
-			break;
-		case "bottom-middle":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "center" : "flex-end");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-end" : "center");
-			break;
-		case "bottom-left":
-			blockController.setStyle("justifyContent", direction.value === "row" ? "flex-start" : "flex-end");
-			blockController.setStyle("alignItems", direction.value === "row" ? "flex-end" : "flex-start");
-			break;
-	}
+	const [vertical, horizontal] = alignment.split("-");
+	const isRow = direction.value === "row";
+	blockController.setStyle("alignItems", toFlex(isRow ? vertical : horizontal));
 	if (spaceBetween) {
-		blockController.setStyle("justifyContent", "space-between");
+		blockController.setStyle(
+			"justifyContent",
+			isSpacing(justifyContent.value) ? toFlex(isRow ? horizontal : vertical) : "space-between",
+		);
+	} else if (!isSpacing(justifyContent.value)) {
+		blockController.setStyle("justifyContent", toFlex(isRow ? horizontal : vertical));
 	}
 };
 </script>

From 52d0a424338d516077fa55c3b77612a8cad46b62 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 15:43:50 +0530
Subject: [PATCH 503/547] fix(ShadowHandler): Prevent overflow in shadow
 preview container

---
 frontend/src/components/ShadowHandler.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ShadowHandler.vue b/frontend/src/components/ShadowHandler.vue
index a236cffba..98eeb5dc9 100644
--- a/frontend/src/components/ShadowHandler.vue
+++ b/frontend/src/components/ShadowHandler.vue
@@ -35,7 +35,7 @@
 				class="shadow-popover-body max-h-[80vh] w-64 select-none overflow-y-auto rounded-lg border border-outline-gray-1 bg-surface-white p-3 shadow-xl">
 				<div class="mb-3 space-y-3">
 					<div
-						class="flex h-24 w-full items-center justify-center rounded-md border border-outline-gray-1 bg-surface-white"
+						class="flex h-24 w-full items-center justify-center overflow-hidden rounded-md border border-outline-gray-1 bg-surface-white"
 						style="
 							background-image: conic-gradient(
 								var(--surface-gray-1) 90deg,

From cd69622f34ab4e75eab6221ae65ddbab338d3f2e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 15:55:22 +0530
Subject: [PATCH 504/547] fix: Re-import blockData store utilities

---
 frontend/src/utils/helpers.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index a26c0e081..7efef8c03 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1,6 +1,7 @@
 import Block from "@/block";
 import AlertDialog from "@/components/AlertDialog.vue";
 import { builderSettings } from "@/data/builderSettings";
+import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";

From 6715ece104c216581f3b5d7886acc4534fdcea16 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 16:18:15 +0530
Subject: [PATCH 505/547] fix(Input): Clear background on clicking cross button
 in BG input

---
 frontend/src/components/BackgroundHandler.vue |  4 +---
 frontend/src/components/Controls/Input.vue    | 11 ++++++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 229073119..a5364e982 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -289,9 +289,7 @@ const setBGImageURL = (url: string) => {
 		blockController.setStyle(bgKey, null);
 	} else {
 		blockController.setStyle(bgKey, cleanURL ? `url(${cleanURL})` : null);
-		if (cleanURL) {
-			blockController.setStyle(colorKey, null);
-		}
+		blockController.setStyle(colorKey, null);
 	}
 };
 
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 63a0885db..48f8d8531 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -28,13 +28,14 @@
 			<template
 				#suffix
 				v-else-if="!['select', 'checkbox'].includes(type) && !hideClearButton && data && !disabled">
-				<button
-					class="cursor-pointer text-ink-gray-4 hover:text-ink-gray-5"
+				<Button
 					tabindex="-1"
 					:disabled="Boolean(attrs.disabled)"
-					@click="clearValue">
-					<CrossIcon />
-				</button>
+					variant="ghost"
+					@click.stop="clearValue"
+					class="-mr-1.5">
+					<CrossIcon class="h-3 w-3" />
+				</Button>
 			</template>
 		</FormControl>
 	</div>

From 742302ba89166d1a9485633c29589f28643c80ed Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 5 Apr 2026 16:59:35 +0530
Subject: [PATCH 506/547] refactor(ColorPicker): Move duplicate picker template
 to a separate component

---
 frontend/components.d.ts                      |   1 +
 .../src/components/Controls/ColorPicker.vue   | 437 +-----------------
 .../Controls/ColorPickerContent.vue           | 318 +++++++++++++
 3 files changed, 339 insertions(+), 417 deletions(-)
 create mode 100644 frontend/src/components/Controls/ColorPickerContent.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 9d95a9343..ee412daff 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -51,6 +51,7 @@ declare module 'vue' {
     ColorInput: typeof import('./src/components/Controls/ColorInput.vue')['default']
     ColorOptions: typeof import('./src/components/PropsOptions/ColorOptions.vue')['default']
     ColorPicker: typeof import('./src/components/Controls/ColorPicker.vue')['default']
+    ColorPickerContent: typeof import('./src/components/Controls/ColorPickerContent.vue')['default']
     Component: typeof import('./src/components/Icons/Component.vue')['default']
     ContextMenu: typeof import('./src/components/ContextMenu.vue')['default']
     Cross: typeof import('./src/components/Icons/Cross.vue')['default']
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index c81a8c1dd..dd57a388f 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -12,189 +12,35 @@
 				:togglePopover="
 					() => {
 						togglePopover();
-						setSelectorPosition(modelColor);
+						contentRef?.syncPositions();
 					}
 				"
 				:isOpen="isOpen"></slot>
 		</template>
-		<template #body="{ close }">
-			<div
-				ref="colorPicker"
-				class="color-picker-container flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg">
-				<div
-					ref="colorMap"
-					:style="colorMapStyle"
-					@mousedown.prevent="handleSelectorMove"
-					class="relative m-auto h-24 w-full rounded-md"
-					@click.prevent="setColor">
-					<div
-						ref="colorSelector"
-						@mousedown.stop.prevent="handleSelectorMove"
-						:class="selectorClass"
-						:style="colorSelectorStyle"></div>
-				</div>
-				<div
-					ref="hueMap"
-					class="relative m-auto h-3 w-full rounded-md"
-					@click="setHue"
-					@mousedown.prevent="handleHueSelectorMove"
-					:style="hueMapStyle">
-					<div
-						ref="hueSelector"
-						@mousedown="handleHueSelectorMove"
-						:class="hueSelectorClass"
-						:style="hueSelectorStyle"></div>
-				</div>
-				<div
-					ref="alphaMap"
-					class="relative m-auto h-3 w-full rounded-md"
-					@click="setAlpha"
-					@mousedown.prevent="handleAlphaSelectorMove"
-					:style="alphaMapStyle">
-					<div
-						@mousedown="handleAlphaSelectorMove"
-						:class="hueSelectorClass"
-						:style="alphaSelectorStyle"></div>
-				</div>
-				<div ref="colorPalette">
-					<div class="flex flex-wrap gap-1.5">
-						<div
-							v-for="color in colors"
-							:key="color"
-							class="h-3.5 w-3.5 cursor-pointer rounded-full shadow-sm"
-							@click="handleColorPaletteClick(color)"
-							:style="{ background: color }"></div>
-						<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
-					</div>
-				</div>
-				<Autocomplete
-					v-if="showInput"
-					:modelValue="modelValue"
-					class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
-					placeholder="Set Color"
-					:getOptions="getOptions"
-					referenceElementSelector=".color-picker-container"
-					@update:modelValue="handleInputChange" />
-			</div>
+		<template #body>
+			<ColorPickerContent
+				ref="contentRef"
+				:modelValue="modelValue"
+				:showInput="showInput"
+				renderMode="popover"
+				@update:modelValue="emit('update:modelValue', $event)" />
 		</template>
 	</Popover>
-	<div
+	<ColorPickerContent
 		v-else
-		ref="colorPicker"
-		:class="[
-			'color-picker-container',
-			renderMode === 'inline'
-				? 'flex w-full flex-col gap-2'
-				: 'flex flex-col gap-2 rounded-lg bg-surface-white p-3 shadow-lg',
-		]">
-		<div
-			ref="colorMap"
-			:style="colorMapStyle"
-			@mousedown.prevent="handleSelectorMove"
-			class="relative m-auto h-24 w-full rounded-md"
-			@click.prevent="setColor">
-			<div
-				ref="colorSelector"
-				@mousedown.stop.prevent="handleSelectorMove"
-				:class="selectorClass"
-				:style="colorSelectorStyle"></div>
-		</div>
-		<div
-			ref="hueMap"
-			class="relative m-auto h-3 w-full rounded-md"
-			@click="setHue"
-			@mousedown.prevent="handleHueSelectorMove"
-			:style="hueMapStyle">
-			<div
-				ref="hueSelector"
-				@mousedown="handleHueSelectorMove"
-				:class="hueSelectorClass"
-				:style="hueSelectorStyle"></div>
-		</div>
-		<div
-			ref="alphaMap"
-			class="relative m-auto h-3 w-full rounded-md"
-			@click="setAlpha"
-			@mousedown.prevent="handleAlphaSelectorMove"
-			:style="alphaMapStyle">
-			<div @mousedown="handleAlphaSelectorMove" :class="hueSelectorClass" :style="alphaSelectorStyle"></div>
-		</div>
-		<div ref="colorPalette">
-			<div class="flex flex-wrap gap-1.5">
-				<div
-					v-for="color in colors"
-					:key="color"
-					class="h-3.5 w-3.5 cursor-pointer rounded-full shadow-sm"
-					@click="handleColorPaletteClick(color)"
-					:style="{ background: color }"></div>
-				<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
-			</div>
-		</div>
-		<Autocomplete
-			v-if="showInput"
-			:modelValue="modelValue"
-			class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
-			placeholder="Set Color"
-			:getOptions="getOptions"
-			referenceElementSelector=".color-picker-container"
-			@update:modelValue="handleInputChange" />
-	</div>
+		ref="contentRef"
+		:modelValue="modelValue"
+		:showInput="showInput"
+		renderMode="inline"
+		@update:modelValue="emit('update:modelValue', $event)" />
 </template>
 <script setup lang="ts">
-import Autocomplete from "@/components/Controls/Autocomplete.vue";
-import EyeDropperIcon from "@/components/Icons/EyeDropper.vue";
-import useCanvasStore from "@/stores/canvasStore";
-import { getColorVariableOptions } from "@/utils/colorOptions";
-import { HSVToHex, HexToHSV, getRGB } from "@/utils/helpers";
-import { useBuilderVariable } from "@/utils/useBuilderVariable";
-import { clamp, useDark, useElementBounding, useEyeDropper } from "@vueuse/core";
 import { Popover } from "frappe-ui";
-import { Ref, StyleValue, computed, nextTick, ref, watch } from "vue";
+import { ref } from "vue";
+import ColorPickerContent from "./ColorPickerContent.vue";
 
 type CSSColorValue = HashString | RGBString | `var(--${string})`;
 
-const { variables, resolveVariableValue } = useBuilderVariable();
-
-const isDark = useDark({
-	attribute: "data-theme",
-});
-
-const canvasStore = useCanvasStore();
-const hueMap = ref(null) as unknown as Ref<HTMLDivElement>;
-const colorMap = ref(null) as unknown as Ref<HTMLDivElement>;
-const alphaMap = ref(null) as unknown as Ref<HTMLDivElement>;
-
-const {
-	width: colorMapWidth,
-	height: colorMapHeight,
-	left: colorMapLeft,
-	top: colorMapTop,
-} = useElementBounding(colorMap);
-const { width: hueMapWidth, left: hueMapLeft } = useElementBounding(hueMap);
-const { width: alphaMapWidth, left: alphaMapLeft } = useElementBounding(alphaMap);
-
-const colorPickerPopover = ref<InstanceType<typeof Popover> | null>(null);
-
-const colorSelectorPosition = ref({ x: 0, y: 0 });
-const hueSelectorPosition = ref({ x: 0, y: 0 });
-const alphaSelectorPosition = ref({ x: Infinity, y: 0 });
-let currentColor = "#FFF" as HashString;
-
-let pendingPositionColor: string | null = null;
-
-watch(colorMapWidth, (w) => {
-	if (w && pendingPositionColor) {
-		const color = pendingPositionColor;
-		nextTick(() => {
-			setColorSelectorPosition(color);
-			setHueSelectorPosition(color);
-			setAlphaSelectorPosition(color);
-		});
-	}
-});
-
-const { isSupported, sRGBHex, open } = useEyeDropper();
-
 const props = withDefaults(
 	defineProps<{
 		modelValue?: CSSColorValue | null;
@@ -215,253 +61,12 @@ const props = withDefaults(
 		renderMode?: "popover" | "inline";
 		offset?: number;
 	}>(),
-	{
-		modelValue: null,
-		showInput: false,
-		placement: "left-start",
-		renderMode: "popover",
-		offset: 10,
-	},
+	{ modelValue: null, showInput: false, placement: "left-start", renderMode: "popover", offset: 10 },
 );
 
-const modelColor = computed(() => {
-	const color = props.modelValue;
-	if (!color) return null;
-	const resolvedColor = resolveVariableValue(color);
-	return getRGB(resolvedColor);
-});
-
-const getOptions = async (query: string) => {
-	return getColorVariableOptions(query, variables.value, resolveVariableValue, isDark.value);
-};
-
 const emit = defineEmits(["update:modelValue"]);
-
-const colors = [
-	"#FFB3E6",
-	"#00B3E6",
-	"#E6B333",
-	"#3366E6",
-	"#999966",
-	"#99FF99",
-	"#B34D4D",
-	"#80B300",
-] as HashString[];
-
-if (!isSupported.value) {
-	colors.push("#B34D4D");
-}
-
-const colorMapStyle = computed(() => ({
-	background: `
-		linear-gradient(0deg, black, transparent),
-		linear-gradient(90deg, white, transparent),
-		hsl(${hue.value}, 100%, 50%)
-	`,
-}));
-
-const hueMapStyle = computed(() => ({
-	background: `
-		linear-gradient(90deg, hsl(0, 100%, 50%),
-		hsl(60, 100%, 50%), hsl(120, 100%, 50%),
-		hsl(180, 100%, 50%), hsl(240, 100%, 50%),
-		hsl(300, 100%, 50%), hsl(360, 100%, 50%))
-	`,
-}));
-
-const liveSolidColor = computed(() => {
-	if (!colorMapWidth.value || !colorMapHeight.value) return `hsl(${hue.value}, 100%, 50%)`;
-	const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
-	const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
-	return HSVToHex(hue.value, s, v) as string;
-});
-
-const alphaMapStyle = computed(() => {
-	const solidColor = liveSolidColor.value;
-	return {
-		background: `
-			linear-gradient(90deg, transparent, ${solidColor}),
-			repeating-conic-gradient(#ccc 0% 25%, var(--surface-white) 0% 50%) 0 0 / 8px 8px
-		`,
-	};
-});
-
-const selectorClass =
-	"absolute rounded-full border border-black border-opacity-20 before:absolute before:h-full before:w-full before:rounded-full before:border-2 before:border-white before:!bg-[currentColor] after:absolute after:left-[2px] after:top-[2px] after:h-[calc(100%-4px)] after:w-[calc(100%-4px)] after:rounded-full after:border after:border-black after:border-opacity-20 after:bg-transparent";
-
-const hueSelectorClass =
-	"absolute rounded-full border border-[rgba(0,0,0,.2)] before:absolute before:h-full before:w-full before:rounded-full before:border-2 before:border-white before:bg-[currentColor] after:absolute after:left-[2px] after:top-[2px] after:h-[calc(100%-4px)] after:w-[calc(100%-4px)] after:rounded-full after:border after:border-[rgba(0,0,0,.2)] after:bg-transparent";
-
-const colorSelectorStyle = computed(
-	() =>
-		({
-			height: "12px",
-			width: "12px",
-			left: `calc(${colorSelectorPosition.value.x}px - 6px)`,
-			top: `calc(${colorSelectorPosition.value.y}px - 6px)`,
-			color: liveSolidColor.value,
-			background: "transparent",
-		}) as StyleValue,
-);
-
-const hueSelectorStyle = computed(() => ({
-	height: "12px",
-	width: "12px",
-	left: `calc(${hueSelectorPosition.value.x}px - 6px)`,
-	color: `hsl(${hue.value}, 100%, 50%)`,
-	background: "transparent",
-}));
-
-const alphaSelectorStyle = computed(() => {
-	const alphaByte = Math.round((alpha.value / 100) * 255);
-	const colorWithAlpha =
-		alphaByte < 255
-			? (`${liveSolidColor.value}${alphaByte.toString(16).padStart(2, "0")}` as HashString)
-			: liveSolidColor.value;
-	return {
-		height: "12px",
-		width: "12px",
-		left: `calc(${clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value)}px - 6px)`,
-		color: colorWithAlpha,
-		background: "transparent",
-	};
-});
-
-const handleColorPaletteClick = (color: HashString) => {
-	setSelectorPosition(color);
-	updateColor();
-};
-
-const handleInputChange = (color: string | null) => {
-	if (!color) {
-		emit("update:modelValue", null);
-		return;
-	}
-
-	if (color.startsWith("var(--") || color.startsWith("--")) {
-		emit("update:modelValue", color.startsWith("var(--") ? color : `var(${color})`);
-		return;
-	}
-
-	setSelectorPosition(color as HashString);
-	updateColor();
-};
-
-const setColorSelectorPosition = (color: string) => {
-	if (!colorMapWidth.value || !colorMapHeight.value) return;
-	const { s, v } = HexToHSV(color as HashString);
-	colorSelectorPosition.value = {
-		x: clamp(s * colorMapWidth.value, 0, colorMapWidth.value),
-		y: clamp((1 - v) * colorMapHeight.value, 0, colorMapHeight.value),
-	};
-};
-
-const setHueSelectorPosition = (color: string) => {
-	if (!hueMapWidth.value) return;
-	const { h } = HexToHSV(color as HashString);
-	hueSelectorPosition.value = { x: (h / 360) * hueMapWidth.value, y: 0 };
-};
-
-const setAlphaSelectorPosition = (color: string) => {
-	if (!alphaMapWidth.value) return;
-	const { a } = HexToHSV(color as HashString);
-	alphaSelectorPosition.value = { x: (a / 100) * alphaMapWidth.value, y: 0 };
-};
-
-function makeDragHandler(setter: (ev: MouseEvent) => void) {
-	return (ev: MouseEvent) => {
-		setter(ev);
-		const pauseId = canvasStore.activeCanvas?.history?.pause();
-		const onMove = (e: MouseEvent) => {
-			e.preventDefault();
-			setter(e);
-		};
-		document.addEventListener("mousemove", onMove);
-		document.addEventListener(
-			"mouseup",
-			(e) => {
-				document.removeEventListener("mousemove", onMove);
-				e.preventDefault();
-				pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
-			},
-			{ once: true },
-		);
-	};
-}
-
-const handleSelectorMove = makeDragHandler(setColor);
-const handleHueSelectorMove = makeDragHandler(setHue);
-const handleAlphaSelectorMove = makeDragHandler(setAlpha);
-
-function setColor(ev: MouseEvent) {
-	colorSelectorPosition.value = {
-		x: clamp(ev.clientX - colorMapLeft.value, 0, colorMapWidth.value),
-		y: clamp(ev.clientY - colorMapTop.value, 0, colorMapHeight.value),
-	};
-	updateColor();
-}
-
-function setHue(ev: MouseEvent) {
-	hueSelectorPosition.value = { x: clamp(ev.clientX - hueMapLeft.value, 0, hueMapWidth.value), y: 0 };
-	updateColor();
-}
-
-function setAlpha(ev: MouseEvent) {
-	alphaSelectorPosition.value = { x: clamp(ev.clientX - alphaMapLeft.value, 0, alphaMapWidth.value), y: 0 };
-	updateColor();
-}
-
-function setSelectorPosition(color: HashString | null) {
-	if (!color) {
-		colorSelectorPosition.value = { x: 0, y: 0 };
-		hueSelectorPosition.value = { x: 0, y: 0 };
-		alphaSelectorPosition.value = { x: Infinity, y: 0 };
-		pendingPositionColor = null;
-		return;
-	}
-	const resolvedColor = resolveVariableValue(color);
-	pendingPositionColor = resolvedColor;
-	nextTick(() => {
-		setColorSelectorPosition(resolvedColor);
-		setHueSelectorPosition(resolvedColor);
-		setAlphaSelectorPosition(resolvedColor);
-		currentColor = resolvedColor as HashString;
-	});
-}
-
-const hue = computed(() => {
-	const positionX = hueSelectorPosition.value.x || 0;
-	return Math.round((positionX / (hueMapWidth.value || 1)) * 360);
-});
-
-const alpha = computed(() => {
-	const positionX = clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value || 1);
-	return Math.round((positionX / (alphaMapWidth.value || 1)) * 100);
-});
-
-const updateColor = () => {
-	nextTick(() => {
-		if (!colorMapWidth.value || !colorMapHeight.value) return;
-		const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
-		const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
-		currentColor = HSVToHex(hue.value, s, v, alpha.value);
-		emit("update:modelValue", currentColor);
-	});
-};
-
-watch(sRGBHex, () => {
-	if (!isSupported.value || !sRGBHex.value) return;
-	emit("update:modelValue", sRGBHex.value);
-});
-
-watch(
-	() => props.modelValue,
-	(color) => {
-		if (color === currentColor) return;
-		setSelectorPosition(getRGB(color));
-	},
-	{ immediate: true },
-);
+const colorPickerPopover = ref<InstanceType<typeof Popover> | null>(null);
+const contentRef = ref<InstanceType<typeof ColorPickerContent> | null>(null);
 
 function togglePopover(open?: boolean) {
 	if (open === undefined || open) {
@@ -471,7 +76,5 @@ function togglePopover(open?: boolean) {
 	}
 }
 
-defineExpose({
-	togglePopover,
-});
+defineExpose({ togglePopover });
 </script>
diff --git a/frontend/src/components/Controls/ColorPickerContent.vue b/frontend/src/components/Controls/ColorPickerContent.vue
new file mode 100644
index 000000000..2506ec675
--- /dev/null
+++ b/frontend/src/components/Controls/ColorPickerContent.vue
@@ -0,0 +1,318 @@
+<template>
+	<div
+		:class="[
+			'color-picker-container flex flex-col gap-2',
+			renderMode === 'inline' ? 'w-full' : 'rounded-lg bg-surface-white p-3 shadow-lg',
+		]">
+		<div
+			ref="colorMap"
+			:style="colorMapStyle"
+			@mousedown.prevent="handleSelectorMove"
+			class="relative m-auto h-24 w-full rounded-md"
+			@click.prevent="setColor">
+			<div
+				@mousedown.stop.prevent="handleSelectorMove"
+				:class="selectorClass"
+				:style="colorSelectorStyle"></div>
+		</div>
+		<div
+			ref="hueMap"
+			class="relative m-auto h-3 w-full rounded-md"
+			@click="setHue"
+			@mousedown.prevent="handleHueSelectorMove"
+			:style="hueMapStyle">
+			<div @mousedown="handleHueSelectorMove" :class="hueSelectorClass" :style="hueSelectorStyle"></div>
+		</div>
+		<div
+			ref="alphaMap"
+			class="relative m-auto h-3 w-full rounded-md"
+			@click="setAlpha"
+			@mousedown.prevent="handleAlphaSelectorMove"
+			:style="alphaMapStyle">
+			<div @mousedown="handleAlphaSelectorMove" :class="hueSelectorClass" :style="alphaSelectorStyle"></div>
+		</div>
+		<div class="flex flex-wrap gap-1.5">
+			<div
+				v-for="color in colors"
+				:key="color"
+				class="h-3.5 w-3.5 cursor-pointer rounded-full shadow-sm"
+				@click="selectColor(color)"
+				:style="{ background: color }"></div>
+			<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
+		</div>
+		<Autocomplete
+			v-if="showInput"
+			:modelValue="modelValue"
+			class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
+			placeholder="Set Color"
+			:getOptions="getOptions"
+			referenceElementSelector=".color-picker-container"
+			@update:modelValue="handleInputChange" />
+	</div>
+</template>
+<script setup lang="ts">
+import Autocomplete from "@/components/Controls/Autocomplete.vue";
+import EyeDropperIcon from "@/components/Icons/EyeDropper.vue";
+import useCanvasStore from "@/stores/canvasStore";
+import { getColorVariableOptions } from "@/utils/colorOptions";
+import { HSVToHex, HexToHSV, getRGB } from "@/utils/helpers";
+import { useBuilderVariable } from "@/utils/useBuilderVariable";
+import { clamp, useDark, useElementBounding, useEyeDropper } from "@vueuse/core";
+import { Ref, StyleValue, computed, nextTick, ref, watch } from "vue";
+
+type CSSColorValue = HashString | RGBString | `var(--${string})`;
+
+const { variables, resolveVariableValue } = useBuilderVariable();
+const isDark = useDark({ attribute: "data-theme" });
+const canvasStore = useCanvasStore();
+
+const colorMap = ref(null) as unknown as Ref<HTMLDivElement>;
+const hueMap = ref(null) as unknown as Ref<HTMLDivElement>;
+const alphaMap = ref(null) as unknown as Ref<HTMLDivElement>;
+
+const {
+	width: colorMapWidth,
+	height: colorMapHeight,
+	left: colorMapLeft,
+	top: colorMapTop,
+} = useElementBounding(colorMap);
+const { width: hueMapWidth, left: hueMapLeft } = useElementBounding(hueMap);
+const { width: alphaMapWidth, left: alphaMapLeft } = useElementBounding(alphaMap);
+
+const colorSelectorPosition = ref({ x: 0, y: 0 });
+const hueSelectorPosition = ref({ x: 0, y: 0 });
+const alphaSelectorPosition = ref({ x: Infinity, y: 0 });
+let currentColor = "#FFF" as HashString;
+let pendingPositionColor: string | null = null;
+
+watch(colorMapWidth, (w) => {
+	if (w && pendingPositionColor) {
+		const color = pendingPositionColor;
+		nextTick(() => {
+			setColorSelectorPosition(color);
+			setHueSelectorPosition(color);
+			setAlphaSelectorPosition(color);
+		});
+	}
+});
+
+const { isSupported, sRGBHex, open } = useEyeDropper();
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: CSSColorValue | null;
+		showInput?: boolean;
+		renderMode?: "popover" | "inline";
+	}>(),
+	{ modelValue: null, showInput: false, renderMode: "popover" },
+);
+
+const modelColor = computed(() => {
+	const color = props.modelValue;
+	if (!color) return null;
+	return getRGB(resolveVariableValue(color));
+});
+
+const getOptions = async (query: string) =>
+	getColorVariableOptions(query, variables.value, resolveVariableValue, isDark.value);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const colors: HashString[] = [
+	"#FFB3E6",
+	"#00B3E6",
+	"#E6B333",
+	"#3366E6",
+	"#999966",
+	"#99FF99",
+	"#B34D4D",
+	"#80B300",
+];
+if (!isSupported.value) colors.push("#B34D4D");
+
+const hue = computed(() => Math.round(((hueSelectorPosition.value.x || 0) / (hueMapWidth.value || 1)) * 360));
+const alpha = computed(() =>
+	Math.round(
+		(clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value || 1) / (alphaMapWidth.value || 1)) * 100,
+	),
+);
+
+const liveSolidColor = computed(() => {
+	if (!colorMapWidth.value || !colorMapHeight.value) return `hsl(${hue.value}, 100%, 50%)`;
+	const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
+	const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
+	return HSVToHex(hue.value, s, v) as string;
+});
+
+const colorMapStyle = computed(() => ({
+	background: `linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, transparent), hsl(${hue.value}, 100%, 50%)`,
+}));
+
+const hueMapStyle = computed(() => ({
+	background: `linear-gradient(90deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))`,
+}));
+
+const alphaMapStyle = computed(() => ({
+	background: `linear-gradient(90deg, transparent, ${liveSolidColor.value}), repeating-conic-gradient(#ccc 0% 25%, var(--surface-white) 0% 50%) 0 0 / 8px 8px`,
+}));
+
+const selectorClass =
+	"absolute rounded-full border border-black border-opacity-20 before:absolute before:h-full before:w-full before:rounded-full before:border-2 before:border-white before:!bg-[currentColor] after:absolute after:left-[2px] after:top-[2px] after:h-[calc(100%-4px)] after:w-[calc(100%-4px)] after:rounded-full after:border after:border-black after:border-opacity-20 after:bg-transparent";
+const hueSelectorClass =
+	"absolute rounded-full border border-[rgba(0,0,0,.2)] before:absolute before:h-full before:w-full before:rounded-full before:border-2 before:border-white before:bg-[currentColor] after:absolute after:left-[2px] after:top-[2px] after:h-[calc(100%-4px)] after:w-[calc(100%-4px)] after:rounded-full after:border after:border-[rgba(0,0,0,.2)] after:bg-transparent";
+
+const colorSelectorStyle = computed(
+	() =>
+		({
+			height: "12px",
+			width: "12px",
+			left: `calc(${colorSelectorPosition.value.x}px - 6px)`,
+			top: `calc(${colorSelectorPosition.value.y}px - 6px)`,
+			color: liveSolidColor.value,
+			background: "transparent",
+		}) as StyleValue,
+);
+
+const hueSelectorStyle = computed(() => ({
+	height: "12px",
+	width: "12px",
+	left: `calc(${hueSelectorPosition.value.x}px - 6px)`,
+	color: `hsl(${hue.value}, 100%, 50%)`,
+	background: "transparent",
+}));
+
+const alphaSelectorStyle = computed(() => {
+	const alphaByte = Math.round((alpha.value / 100) * 255);
+	const colorWithAlpha =
+		alphaByte < 255
+			? (`${liveSolidColor.value}${alphaByte.toString(16).padStart(2, "0")}` as HashString)
+			: liveSolidColor.value;
+	return {
+		height: "12px",
+		width: "12px",
+		left: `calc(${clamp(alphaSelectorPosition.value.x, 0, alphaMapWidth.value)}px - 6px)`,
+		color: colorWithAlpha,
+		background: "transparent",
+	};
+});
+
+const selectColor = (color: HashString) => {
+	setSelectorPosition(color);
+	updateColor();
+};
+
+const handleInputChange = (color: string | null) => {
+	if (!color) return emit("update:modelValue", null);
+	if (color.startsWith("var(--") || color.startsWith("--"))
+		return emit("update:modelValue", color.startsWith("var(--") ? color : `var(${color})`);
+	selectColor(color as HashString);
+};
+
+const setColorSelectorPosition = (color: string) => {
+	if (!colorMapWidth.value || !colorMapHeight.value) return;
+	const { s, v } = HexToHSV(color as HashString);
+	colorSelectorPosition.value = {
+		x: clamp(s * colorMapWidth.value, 0, colorMapWidth.value),
+		y: clamp((1 - v) * colorMapHeight.value, 0, colorMapHeight.value),
+	};
+};
+
+const setHueSelectorPosition = (color: string) => {
+	if (!hueMapWidth.value) return;
+	const { h } = HexToHSV(color as HashString);
+	hueSelectorPosition.value = { x: (h / 360) * hueMapWidth.value, y: 0 };
+};
+
+const setAlphaSelectorPosition = (color: string) => {
+	if (!alphaMapWidth.value) return;
+	const { a } = HexToHSV(color as HashString);
+	alphaSelectorPosition.value = { x: (a / 100) * alphaMapWidth.value, y: 0 };
+};
+
+function makeDragHandler(setter: (ev: MouseEvent) => void) {
+	return (ev: MouseEvent) => {
+		setter(ev);
+		const pauseId = canvasStore.activeCanvas?.history?.pause();
+		const onMove = (e: MouseEvent) => {
+			e.preventDefault();
+			setter(e);
+		};
+		document.addEventListener("mousemove", onMove);
+		document.addEventListener(
+			"mouseup",
+			(e) => {
+				document.removeEventListener("mousemove", onMove);
+				e.preventDefault();
+				pauseId && canvasStore.activeCanvas?.history?.resume(pauseId, true);
+			},
+			{ once: true },
+		);
+	};
+}
+
+const handleSelectorMove = makeDragHandler(setColor);
+const handleHueSelectorMove = makeDragHandler(setHue);
+const handleAlphaSelectorMove = makeDragHandler(setAlpha);
+
+function setColor(ev: MouseEvent) {
+	colorSelectorPosition.value = {
+		x: clamp(ev.clientX - colorMapLeft.value, 0, colorMapWidth.value),
+		y: clamp(ev.clientY - colorMapTop.value, 0, colorMapHeight.value),
+	};
+	updateColor();
+}
+
+function setHue(ev: MouseEvent) {
+	hueSelectorPosition.value = { x: clamp(ev.clientX - hueMapLeft.value, 0, hueMapWidth.value), y: 0 };
+	updateColor();
+}
+
+function setAlpha(ev: MouseEvent) {
+	alphaSelectorPosition.value = { x: clamp(ev.clientX - alphaMapLeft.value, 0, alphaMapWidth.value), y: 0 };
+	updateColor();
+}
+
+function setSelectorPosition(color: HashString | null) {
+	if (!color) {
+		colorSelectorPosition.value = { x: 0, y: 0 };
+		hueSelectorPosition.value = { x: 0, y: 0 };
+		alphaSelectorPosition.value = { x: Infinity, y: 0 };
+		pendingPositionColor = null;
+		return;
+	}
+	const resolvedColor = resolveVariableValue(color);
+	pendingPositionColor = resolvedColor;
+	nextTick(() => {
+		setColorSelectorPosition(resolvedColor);
+		setHueSelectorPosition(resolvedColor);
+		setAlphaSelectorPosition(resolvedColor);
+		currentColor = resolvedColor as HashString;
+	});
+}
+
+const updateColor = () => {
+	nextTick(() => {
+		if (!colorMapWidth.value || !colorMapHeight.value) return;
+		const s = Math.round((colorSelectorPosition.value.x / colorMapWidth.value) * 100);
+		const v = 100 - Math.round((colorSelectorPosition.value.y / colorMapHeight.value) * 100);
+		currentColor = HSVToHex(hue.value, s, v, alpha.value);
+		emit("update:modelValue", currentColor);
+	});
+};
+
+watch(sRGBHex, () => {
+	if (!isSupported.value || !sRGBHex.value) return;
+	emit("update:modelValue", sRGBHex.value);
+});
+
+watch(
+	() => props.modelValue,
+	(color) => {
+		if (color === currentColor) return;
+		setSelectorPosition(getRGB(color));
+	},
+	{ immediate: true },
+);
+
+defineExpose({ syncPositions: () => setSelectorPosition(modelColor.value) });
+</script>

From 1d53a3819845485a8fff85be33580585eb2dd430 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Tue, 7 Apr 2026 08:23:01 +0530
Subject: [PATCH 507/547] =?UTF-8?q?feat:=20Option=20to=20generate=20pages?=
 =?UTF-8?q?=20using=20AI=20=F0=9F=A4=96=20(#544)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 builder/ai_page_generator.py                  | 671 ++++++++++++++++++
 builder/api.py                                |  19 +-
 .../builder_settings/builder_settings.json    |  15 +-
 builder/utils.py                              |  68 +-
 frontend/components.d.ts                      |   3 +
 frontend/package.json                         |   2 +
 .../src/components/AIPageGeneratorModal.vue   | 603 ++++++++++++++++
 frontend/src/components/BlockContextMenu.vue  |  35 +-
 frontend/src/components/BuilderSettings.vue   |  12 +-
 frontend/src/components/BuilderToolbar.vue    |  20 +
 frontend/src/components/Settings/GlobalAI.vue |  85 +++
 .../src/components/WebPagePresetPicker.vue    | 473 ++++++++++++
 frontend/src/pages/PageBuilder.vue            | 131 +++-
 frontend/src/stores/builderStore.ts           |   5 +
 frontend/src/types/Builder/BuilderSettings.ts |  51 +-
 frontend/src/utils/helpers.ts                 |  30 +-
 pyproject.toml                                |   1 +
 yarn.lock                                     |  14 +-
 18 files changed, 2184 insertions(+), 54 deletions(-)
 create mode 100644 builder/ai_page_generator.py
 create mode 100644 frontend/src/components/AIPageGeneratorModal.vue
 create mode 100644 frontend/src/components/Settings/GlobalAI.vue
 create mode 100644 frontend/src/components/WebPagePresetPicker.vue

diff --git a/builder/ai_page_generator.py b/builder/ai_page_generator.py
new file mode 100644
index 000000000..7cb6af82a
--- /dev/null
+++ b/builder/ai_page_generator.py
@@ -0,0 +1,671 @@
+import json
+import re
+
+import frappe
+import litellm
+import yaml
+from frappe import _
+
+from builder.utils import has_page_write, to_compact_yaml
+
+litellm.drop_params = True
+
+
+TASK_PARAMS = {
+	"simple": {"max_tokens": 1000, "temperature": 0.5},
+	"complex": {"max_tokens": 22000, "temperature": 0.7},
+}
+
+
+# System Prompts
+
+MODIFY_PROMPT = (
+	"You modify web sections in Frappe Builder's block system.\n"
+	"Return ONLY valid and compact YAML array. No markdown, no explanations.\n\n"
+	"# Schema\n"
+	"el: str\n"
+	"id: str # MUST preserve existing\n"
+	"name?: str\n"
+	"style?: dict # CSS-in-JS camelCase. Support interactive states like hover:backgroundColor, active:color.\n"
+	"c?: [el]\n"
+	"attrs?: dict\n"
+	"text?: str\n"
+	"m_style?: dict\n\n"
+	"Rules: Preserve ALL existing 'id' values. Only change what requested. Return COMPLETE structure. "
+	"Use %, rem for responsive widths. Top-level sections MUST be 100% width.\n"
+	"Wrap text in semantic elements — never place text directly in div/section.\n"
+	"Formatting: use flow style for all style dicts e.g. style: {color: '#fff', 'hover:backgroundColor': '#eee'}. "
+	"All images must be external URLs with proper alt text if replacing."
+	"Omit any key whose value is empty, null, or {}.\n"
+	"Gradients: ALWAYS use 'backgroundImage' (NOT 'background') for gradients. "
+	"The gradient value MUST be quoted to avoid YAML parse errors. "
+	"Example: backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'. "
+	"Never leave gradient strings unquoted."
+)
+
+REWRITE_TEXT_PROMPT = (
+	"You are a professional copywriter. Rewrite the provided text content to be more engaging and professional.\n"
+	"Return ONLY the rewritten text. No markdown, no explanations, no quotes."
+)
+
+REPLACE_IMAGE_PROMPT = (
+	"You are an image finder. Suggest a highly relevant, high-quality publicly available image URL "
+	"(different from what is provided).\n"
+	"Return ONLY the image URL. No markdown, no explanations, no quotes."
+)
+
+GENERATE_PROMPT = """You are an expert web designer specializing in creating modern, responsive web pages using the Frappe Builder block system.
+
+Critical: Return ONLY a valid and compact YAML object. No markdown, no explanations.
+
+# Structure:
+Return a single root block that represents the page (el: div, id: root). This block contains all sections in its 'c' (children) property.
+
+# Schema for the Page Container Object:
+- el: div
+- id: root
+- name: body
+- style: CSS-in-JS camelCase object for page-wide styles (e.g. { backgroundColor: '#f8f9fa', fontFamily: 'Inter', display: 'flex', flexDirection: 'column', alignItems: 'center' })
+- c: array of content blocks (sections, header, footer, etc.)
+
+# Content Block Schema:
+- el: semantic HTML tag (section, nav, header, footer, h1-h3, p, span, button, a, img)
+- name: descriptive name
+- style: CSS-in-JS camelCase object. Include interactive states (e.g., 'hover:backgroundColor', 'active:transform', 'hover:color') for buttons and links.
+- m_style: mobile overrides
+- t_style: tablet overrides
+- attrs: HTML attrs (src, alt, href, target)
+- text: text content
+- c: nested blocks array
+- classes: CSS class names
+
+# Rules:
+- The top-level Page block must have 'display: flex', 'flexDirection: column', and 'alignItems: center' to layout sections properly.
+- All top-level sections inside 'c' MUST have 'width: 100%'.
+- Modern harmonious color palettes. Good spacing. Professional concise copy.
+- Interactive: Use hover states for buttons/links to make the page feel alive.
+- Google Fonts via fontFamily (use ONLY the font name and not the fallback).
+- Semantic HTML with alt texts.
+- Create maximum 5 high quality sections
+- Use semantic tags and wrap text in them. Never place text directly in a div/section without a semantic tag.
+- Avoid using emojis in text content. Focus on professional tone.
+- Gradients: ALWAYS use 'backgroundImage' (NOT 'background') for gradients. The value MUST be a quoted YAML string to avoid parse errors. Example: backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'. Never use unquoted gradient values."""
+
+MODIFY_PROMPT_MAP = {
+	"rewrite_text": REWRITE_TEXT_PROMPT,
+	"replace_image": REPLACE_IMAGE_PROMPT,
+}
+
+
+def get_system_prompt(is_modify: bool, task_type: str | None = None) -> str:
+	if is_modify:
+		return MODIFY_PROMPT_MAP.get(task_type or "", MODIFY_PROMPT)
+	return GENERATE_PROMPT
+
+
+def classify_task(is_modify: bool, task_type: str | None = None) -> str:
+	if is_modify and task_type in {"rewrite_text", "replace_image"}:
+		return "simple"
+	return "complex"
+
+
+def compress_block_to_yaml(block: dict, depth: int = 0, task_tier: str = "complex") -> dict:
+	if not isinstance(block, dict):
+		return block
+
+	out = {}
+	if block.get("element"):
+		out["el"] = block["element"]
+	if block.get("blockId"):
+		out["id"] = block["blockId"]
+	if block.get("blockName"):
+		out["name"] = block["blockName"]
+
+	base_styles = block.get("baseStyles") or {}
+	if base_styles:
+		out["style"] = base_styles
+
+	attrs = block.get("attributes") or {}
+	if attrs:
+		out["attrs"] = attrs
+
+	if block.get("classes"):
+		out["classes"] = block["classes"]
+	if block.get("innerHTML"):
+		out["text"] = block["innerHTML"]
+
+	mob = block.get("mobileStyles") or {}
+	if mob:
+		out["m_style"] = mob
+
+	tab = block.get("tabletStyles") or {}
+	if tab and (task_tier == "complex" or depth <= 1):
+		out["t_style"] = tab
+
+	children = [
+		compress_block_to_yaml(c, depth + 1, task_tier)
+		for c in block.get("children", [])
+		if isinstance(c, dict)
+	]
+	if children:
+		out["c"] = children
+
+	return out
+
+
+def extract_block_id(block_context: str) -> str | None:
+	"""Extract blockId from raw JSON context without full re-parse later."""
+	try:
+		data = json.loads(block_context)
+		if isinstance(data, list):
+			data = data[0] if data else {}
+		return data.get("blockId") if isinstance(data, dict) else None
+	except Exception:
+		return None
+
+
+def strip_block_context(block_context: str, task_tier: str, task_type: str | None = None) -> str:
+	"""Convert block JSON to compact YAML to reduce input tokens."""
+	try:
+		data = json.loads(block_context)
+	except (json.JSONDecodeError, TypeError):
+		return block_context
+
+	if isinstance(data, list):
+		data = data[0] if data else {}
+	if not isinstance(data, dict):
+		return block_context
+
+	if task_type == "rewrite_text":
+		return data.get("innerHTML") or data.get("innerText") or ""
+	if task_type == "replace_image":
+		attrs = data.get("attributes", {})
+		return to_compact_yaml({"src": attrs.get("src", ""), "alt": attrs.get("alt", "")})
+	return to_compact_yaml([compress_block_to_yaml(data, 0, task_tier)])
+
+
+def expand_yaml_to_block(node: dict) -> dict:
+	"""Expand compact YAML node back to Frappe Builder block schema."""
+	if not isinstance(node, dict):
+		return node
+
+	block = {
+		"element": node.get("el", "div"),
+		"blockName": node.get("name", ""),
+		"baseStyles": node.get("style", {}),
+		"attributes": node.get("attrs", {}),
+		"children": [expand_yaml_to_block(c) for c in node.get("c", []) if isinstance(c, dict)],
+	}
+	for yaml_key, block_key in [
+		("id", "blockId"),
+		("text", "innerHTML"),
+		("m_style", "mobileStyles"),
+		("t_style", "tabletStyles"),
+		("classes", "classes"),
+	]:
+		if yaml_key in node:
+			block[block_key] = node[yaml_key]
+
+	return block
+
+
+def validate_image_data(image_data: str) -> str:
+	"""Validate that image_data is a safe base64-encoded image data URL."""
+	if not image_data.startswith("data:image/"):
+		frappe.throw(_("Invalid image data: must be a base64-encoded image data URL"))
+	if ";base64," not in image_data:
+		frappe.throw(_("Invalid image data: must be a base64-encoded data URL"))
+	# ~5 MB image ≈ ~6.7 MB base64 string
+	if len(image_data) > 7 * 1024 * 1024:
+		frappe.throw(_("Image is too large. Please use an image smaller than 5 MB."))
+	return image_data
+
+
+def build_user_message(
+	prompt: str,
+	is_modify: bool,
+	block_context: str | None = None,
+	task_type: str | None = None,
+	image_url: str | None = None,
+) -> str | list:
+	if is_modify and block_context:
+		if task_type == "rewrite_text":
+			text = f'Text content to rewrite: "{block_context}"\n\nInstruction: {prompt}'
+		elif task_type == "replace_image":
+			text = f"Current image attributes:\n{block_context}\n\nInstruction: {prompt}"
+		else:
+			text = f"Block:\n{block_context}\n\nChange: {prompt}"
+	else:
+		text = f"Create a page for: {prompt}"
+
+	if image_url:
+		return [
+			{"type": "text", "text": text},
+			{"type": "image_url", "image_url": {"url": image_url}},
+		]
+	return text
+
+
+def call_llm(model: str, messages: list, params: dict, *, stream: bool, api_key: str | None = None):
+	"""Call litellm. Returns chunk iterator (stream=True) or string (stream=False)."""
+	if model.startswith("gemini-"):
+		model = f"gemini/{model}"
+
+	if "claude-" in model:
+		for m in messages:
+			if m["role"] == "system" and isinstance(m.get("content"), str):
+				m["content"] = [{"type": "text", "text": m["content"]}]
+	resp = litellm.completion(model=model, messages=messages, stream=stream, api_key=api_key, **params)
+	return resp if stream else (resp.choices[0].message.content or "")
+
+
+def strip_fences(text: str) -> str:
+	text = re.sub(r"^```(?:yaml|json)?\s*\n?", "", text.strip())
+	return re.sub(r"\n?```\s*$", "", text).strip()
+
+
+def parse_blocks(content: str) -> dict:
+	"""Parse LLM YAML output into a single block object."""
+	parsed = yaml.safe_load(strip_fences(content))
+	if isinstance(parsed, dict):
+		block = parsed
+	elif isinstance(parsed, list):
+		block = parsed[0] if parsed else {}
+	else:
+		raise ValueError("Not a valid block object")
+
+	if not block:
+		raise ValueError("No valid blocks in response")
+
+	if isinstance(block, dict) and not block.get("id"):
+		block["id"] = "root"
+
+	return expand_yaml_to_block(block)
+
+
+def run_llm_job(
+	prompt: str,
+	model: str,
+	api_key: str,
+	event_prefix: str,
+	is_modify: bool,
+	user: str | None = None,
+	page_id: str | None = None,
+	block_context: str | None = None,
+	task_type: str | None = None,
+	image_url: str | None = None,
+):
+	user = user or frappe.session.user
+
+	def emit(suffix, **kwargs):
+		event = f"{event_prefix}_{suffix}"
+		if page_id:
+			event = f"{event}_{page_id}"
+		payload = {
+			"page_id": page_id,
+			"task_type": task_type,
+			**kwargs,
+		}
+		frappe.publish_realtime(event, payload, user=user)
+
+	task_tier = classify_task(is_modify=is_modify, task_type=task_type)
+	params = TASK_PARAMS[task_tier]
+
+	cache_key = f"ai_streaming_content:{page_id}:{user}" if page_id else None
+	if cache_key:
+		frappe.cache().set_value(cache_key, {"content": "", "task_type": task_type}, expires_in_sec=600)
+
+	if task_tier == "simple":
+		model = get_simple_model(model)
+
+	action = "Modifying" if is_modify else "Generating"
+	model_label = get_model_label(model)
+	emit(
+		"progress",
+		status="generating",
+		message=f"{action} with {model_label}",
+		task_tier=task_tier,
+		model_used=model,
+		total_length=0,
+	)
+
+	original_id = None
+	stripped_context = None
+	if is_modify and block_context:
+		original_id = extract_block_id(block_context)
+		stripped_context = strip_block_context(block_context, task_tier, task_type=task_type)
+
+	# Image is only applicable for generate/modify-block tasks, not simple text/image tasks
+	effective_image_url = image_url if task_type not in {"rewrite_text", "replace_image"} else None
+
+	messages = [
+		{
+			"role": "system",
+			"content": get_system_prompt(is_modify, task_type),
+			"cache_control": {"type": "ephemeral"},
+		},
+		{
+			"role": "user",
+			"content": build_user_message(
+				prompt,
+				is_modify,
+				block_context=stripped_context,
+				task_type=task_type,
+				image_url=effective_image_url,
+			),
+		},
+	]
+
+	content = ""
+	try:
+		last_stage = None
+		for chunk in call_llm(model, messages, params, stream=True, api_key=api_key):
+			if delta := chunk.choices[0].delta.content:
+				if not content:
+					emit("progress", message="Building...")
+					last_stage = "Building..."
+				content += delta
+				if cache_key:
+					frappe.cache().set_value(
+						cache_key, {"content": content, "task_type": task_type}, expires_in_sec=600
+					)
+
+				emit("stream", chunk=delta, block_id=original_id, total_length=len(content))
+
+				stage = get_progress_stage(content)
+				if stage and stage != last_stage:
+					last_stage = stage
+					emit("progress", message=stage, total_length=len(content))
+
+	except ValueError as e:
+		if cache_key:
+			frappe.cache().delete_value(cache_key)
+		frappe.log_error(f"Parse error: {e}\nContent: {content}", f"{event_prefix} parse")
+		emit("error", message="Failed to parse AI response. The model returned invalid YAML.")
+		return
+
+	except Exception as e:
+		if cache_key:
+			frappe.cache().delete_value(cache_key)
+		frappe.log_error(f"LLM job error: {e}", event_prefix)
+		emit("error", message=str(e))
+		return
+
+	if cache_key:
+		frappe.cache().delete_value(cache_key)
+
+	success_message = "Modified block successfully" if is_modify else "Page generated successfully"
+	emit(
+		"complete",
+		block_id=original_id,
+		model_used=model,
+		task_tier=task_tier,
+		message=success_message,
+	)
+
+
+def generate_page_blocks(
+	prompt: str,
+	model: str,
+	api_key: str,
+	user: str | None = None,
+	page_id: str | None = None,
+	image_url: str | None = None,
+):
+	run_llm_job(
+		prompt,
+		model,
+		api_key,
+		"ai_generation",
+		is_modify=False,
+		user=user,
+		page_id=page_id,
+		image_url=image_url,
+	)
+
+
+def modify_section_blocks(
+	prompt: str,
+	block_context: str,
+	model: str,
+	api_key: str,
+	user: str | None = None,
+	page_id: str | None = None,
+	task_type: str | None = None,
+	image_url: str | None = None,
+):
+	run_llm_job(
+		prompt,
+		model,
+		api_key,
+		"ai_modify",
+		is_modify=True,
+		user=user,
+		page_id=page_id,
+		block_context=block_context,
+		task_type=task_type,
+		image_url=image_url,
+	)
+
+
+def enqueue_ai_job(fn, model=None, **kwargs):
+	if not frappe.has_permission("Builder Page", ptype="write"):
+		frappe.throw(_("You do not have permission to modify pages"))
+	settings = frappe.get_single("Builder Settings")
+
+	if not model:
+		model = "openrouter"
+
+	model = get_default_model(model)
+
+	api_key = settings.get_password("ai_api_key", raise_exception=False)
+	if not api_key:
+		frappe.throw(_("Please configure an OpenRouter API key in Settings → AI"))
+
+	frappe.enqueue(
+		fn,
+		model=model,
+		api_key=api_key,
+		user=frappe.session.user,
+		now=True,
+		**kwargs,
+	)
+	frappe.local.response.http_status_code = 202
+	return {"status": "accepted"}
+
+
+AVAILABLE_MODELS = [
+	{
+		"provider": "openrouter",
+		"models": [
+			{
+				"name": "openrouter/anthropic/claude-sonnet-4.6",
+				"label": "Claude Sonnet 4.6 (Balanced)",
+				"max_tokens": 200000,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/anthropic/claude-haiku-4-6",
+				"label": "Claude Haiku 4.6 (Fast)",
+				"max_tokens": 200000,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/google/gemini-3.1-pro",
+				"label": "Gemini 3.1 Pro (Flagship)",
+				"max_tokens": 1048576,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/google/gemini-3-flash-preview",
+				"label": "Gemini 3 Flash (Fast)",
+				"max_tokens": 1048576,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/openai/gpt-5.4-mini",
+				"label": "GPT-5.4 Mini",
+				"max_tokens": 1000000,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/moonshotai/kimi-k2.5",
+				"label": "Kimi K2.5 (Cheapest)",
+				"max_tokens": 2000000,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/z-ai/glm-5",
+				"label": "GLM-5 (Balanced)",
+				"max_tokens": 200000,
+				"vision": True,
+			},
+			{
+				"name": "openrouter/moonshotai/kimi-k2",
+				"label": "Kimi K2 (Generous Free Tier)",
+				"max_tokens": 131072,
+				"vision": False,
+			},
+		],
+	},
+]
+
+
+def get_model_label(model_name: str) -> str:
+	for provider in AVAILABLE_MODELS:
+		for m in provider["models"]:
+			if m["name"] == model_name:
+				return m["label"]
+	# Fallback: clean up the name
+	return model_name.removeprefix("openrouter/").replace("/", " ").replace("-", " ").title()
+
+
+def get_progress_stage(content: str) -> str | None:
+	lookback = content[-400:]
+	major_elements = ["section", "nav", "header", "footer"]
+
+	# Find the most recent major element type
+	last_pos = -1
+	found_el = None
+	for el in major_elements:
+		pos = lookback.rfind(f"el: {el}")
+		if pos > last_pos:
+			last_pos = pos
+			found_el = el
+
+	if found_el and last_pos != -1:
+		part = lookback[last_pos:]
+		name_match = re.search(r"name:\s*['\"]?([^'\"\n]+)['\"]?", part)
+		if name_match:
+			block_name = name_match.group(1).strip()
+			if block_name.lower() not in {"body", "root", "container"}:
+				return f"Building {block_name}"
+	return None
+
+
+PROVIDER_DEFAULT_MODEL: dict[str, str] = {
+	"openrouter": "openrouter/anthropic/claude-sonnet-4.6",
+}
+
+
+PROVIDER_SIMPLE_MODEL: dict[str, str] = {
+	"openrouter": "openrouter/google/gemini-3-flash-preview",
+}
+
+
+def detect_provider(model: str) -> str | None:
+	if model.lower().startswith("openrouter/"):
+		return "openrouter"
+	return None
+
+
+def get_simple_model(model: str) -> str:
+	provider = detect_provider(model)
+	if provider is None:
+		if model in PROVIDER_SIMPLE_MODEL:
+			return PROVIDER_SIMPLE_MODEL[model]
+		return model
+	return PROVIDER_SIMPLE_MODEL.get(provider, model)
+
+
+def get_default_model(model_or_provider: str) -> str:
+	if model_or_provider in PROVIDER_DEFAULT_MODEL:
+		return PROVIDER_DEFAULT_MODEL[model_or_provider]
+	return model_or_provider
+
+
+@frappe.whitelist()
+def get_ai_models():
+	return AVAILABLE_MODELS
+
+
+@frappe.whitelist()
+@has_page_write()
+def generate_page_from_prompt(
+	prompt: str,
+	page_id: str | None = None,
+	model: str | None = None,
+	image_data: str | None = None,
+):
+	image_url = validate_image_data(image_data) if image_data else None
+	return enqueue_ai_job(
+		generate_page_blocks, prompt=prompt, page_id=page_id, model=model, image_url=image_url
+	)
+
+
+@frappe.whitelist()
+@has_page_write()
+def modify_section_from_prompt(
+	prompt: str,
+	block_context: str,
+	page_id: str | None = None,
+	task_type: str | None = None,
+	model: str | None = None,
+	image_data: str | None = None,
+):
+	try:
+		json.loads(block_context)
+	except json.JSONDecodeError:
+		frappe.throw(_("Invalid block context JSON"))
+	image_url = validate_image_data(image_data) if image_data else None
+	return enqueue_ai_job(
+		modify_section_blocks,
+		prompt=prompt,
+		block_context=block_context,
+		page_id=page_id,
+		task_type=task_type,
+		model=model,
+		image_url=image_url,
+	)
+
+
+@frappe.whitelist()
+@has_page_write()
+def get_ai_streaming_content(page_id: str):
+	user = frappe.session.user
+	cache_key = f"ai_streaming_content:{page_id}:{user}"
+	return frappe.cache().get_value(cache_key) or {"content": None}
+
+
+@frappe.whitelist()
+@has_page_write()
+def test_api_key():
+	settings = frappe.get_single("Builder Settings")
+	model = settings.get("ai_model") or "openrouter"
+	api_key = settings.get_password("ai_api_key", raise_exception=False)
+	if not api_key:
+		return {"success": False, "message": _("Please set an OpenRouter API key")}
+
+	actual_model = get_default_model(model)
+	if actual_model.startswith("gemini-"):
+		actual_model = f"gemini/{actual_model}"
+	try:
+		litellm.completion(
+			model=actual_model,
+			messages=[{"role": "user", "content": "Say 'OK' if you can read this"}],
+			max_tokens=10,
+			api_key=api_key,
+		)
+		return {"success": True, "message": _("API key is valid")}
+	except Exception as e:
+		return {"success": False, "message": str(e)}
diff --git a/builder/api.py b/builder/api.py
index e42168a3a..3abdbb929 100644
--- a/builder/api.py
+++ b/builder/api.py
@@ -19,6 +19,7 @@
 
 from builder import builder_analytics
 from builder.builder.doctype.builder_page.builder_page import BuilderPageRenderer
+from builder.utils import has_page_write
 
 
 @frappe.whitelist()
@@ -200,17 +201,15 @@ def get_apps():
 
 
 @frappe.whitelist()
+@has_page_write("You do not have permission to update page folder.")
 def update_page_folder(pages: list[str], folder_name: str) -> None:
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to update page folder.")
 	for page in pages:
 		frappe.db.set_value("Builder Page", page, "project_folder", folder_name, update_modified=False)
 
 
 @frappe.whitelist()
+@has_page_write("You do not have permission to duplicate a page.")
 def duplicate_page(page_name: str):
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to duplicate a page.")
 	page = frappe.get_doc("Builder Page", page_name)
 	new_page = frappe.copy_doc(page)
 	del new_page.page_name
@@ -228,10 +227,8 @@ def duplicate_page(page_name: str):
 
 
 @frappe.whitelist()
+@has_page_write("You do not have permission to delete a folder.")
 def delete_folder(folder_name: str) -> None:
-	if not frappe.has_permission("Builder Project Folder", ptype="write"):
-		frappe.throw("You do not have permission to delete a folder.")
-
 	# remove folder from all pages
 	pages = frappe.get_all("Builder Page", filters={"project_folder": folder_name}, fields=["name"])
 	for page in pages:
@@ -241,10 +238,8 @@ def delete_folder(folder_name: str) -> None:
 
 
 @frappe.whitelist()
+@has_page_write("You do not have permission to sync a component.")
 def sync_component(component_id: str):
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to sync a component.")
-
 	component = frappe.get_doc("Builder Component", component_id)
 	component.sync_component()
 
@@ -334,9 +329,7 @@ def get_codemirror_completions():
 
 
 @frappe.whitelist()
+@has_page_write("You do not have permission to reorder client scripts")
 def reorder_client_scripts(script_order: list[str]):
-	if not frappe.has_permission("Builder Page", ptype="write"):
-		frappe.throw("You do not have permission to reorder client scripts")
-
 	for idx, script_name in enumerate(script_order, start=1):
 		frappe.db.set_value("Builder Page Client Script", script_name, "idx", idx)
diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index d65c28cdf..d2b6d669c 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -18,7 +18,9 @@
   "home_page",
   "developer_options_section",
   "execute_block_scripts_in_editor",
-  "restrict_click_handlers"
+  "restrict_click_handlers",
+  "ai_section",
+  "ai_api_key"
  ],
  "fields": [
   {
@@ -106,6 +108,17 @@
    "fieldname": "restrict_click_handlers",
    "fieldtype": "Check",
    "label": "Restrict Click Handlers"
+  },
+  {
+   "fieldname": "ai_section",
+   "fieldtype": "Section Break",
+   "label": "AI Settings"
+  },
+  {
+   "description": "API key for the selected AI model provider",
+   "fieldname": "ai_api_key",
+   "fieldtype": "Password",
+   "label": "AI API Key"
   }
  ],
  "hide_toolbar": 1,
diff --git a/builder/utils.py b/builder/utils.py
index 8d3ed8efd..82c0f9a35 100644
--- a/builder/utils.py
+++ b/builder/utils.py
@@ -4,10 +4,12 @@
 import shutil
 import socket
 from dataclasses import dataclass
+from functools import wraps
 from os.path import join
 from urllib.parse import unquote, urlparse
 
 import frappe
+import yaml
 from frappe.model.document import Document
 from frappe.modules.import_file import import_file_by_path
 from frappe.utils import get_url
@@ -27,6 +29,27 @@
 from werkzeug.routing import Rule
 
 
+def has_page_write(message: str | None = None):
+	"""Decorator to check if user has permission to edit Builder Page.
+
+	Args:
+		message: Custom error message to display if permission is denied.
+			 If not provided, defaults to "You do not have permission to modify pages"
+	"""
+
+	def decorator(fn):
+		@wraps(fn)
+		def wrapper(*args, **kwargs):
+			if not frappe.has_permission("Builder Page", ptype="write"):
+				error_message = message or frappe._("You do not have permission to modify pages")
+				frappe.throw(error_message)
+			return fn(*args, **kwargs)
+
+		return wrapper
+
+	return decorator
+
+
 @dataclass
 class BlockDataKey:
 	key: str
@@ -691,4 +714,47 @@ def execute_script_and_combine(prev_block_data, block_data_script, props):
 	_locals = dict(block=to_dict_with_fallback(prev_block_data or {}), props=props)
 	execute_script(unescape_html(block_data_script), _locals, "sample")
 	block_data.update(_locals["block"])
-	return block_data
+	return combine(prev_block_data, block_data)
+
+
+class CompactDumper(yaml.Dumper):
+	"""Minimal-whitespace YAML dumper.
+
+	Two optimizations over the default Dumper:
+	1. indentless=True — removes the extra 2-space indent on list items inside
+	   mappings, which compounds in deeply nested block trees.
+	2. Flow style for flat dicts — turns multi-line style blocks into single-line
+	   {k: v, k: v} inline mappings, saving ~60% of style-dict tokens.
+	"""
+
+	def increase_indent(self, flow=False, indentless=False):
+		return super().increase_indent(flow=flow, indentless=True)
+
+	def represent_mapping(self, tag, mapping, flow_style=None):
+		# Use flow style {k: v} only for flat dicts (no nested dicts or lists)
+		if flow_style is None:
+			flow_style = all(not isinstance(v, (dict, list)) for v in mapping.values())
+		return super().represent_mapping(tag, mapping, flow_style=flow_style)
+
+
+def _str_representer(dumper, data):
+	"""Use plain scalars where safe; single-quote only when the value contains
+	characters that would confuse the YAML parser."""
+	if any(c in data for c in (":", "{", "}", "[", "]", "#", "&", "*", "!", "|", ">", "'", '"', "\n")):
+		return dumper.represent_scalar("tag:yaml.org,2002:str", data, style="'")
+	return dumper.represent_scalar("tag:yaml.org,2002:str", data)
+
+
+CompactDumper.add_representer(str, _str_representer)
+
+
+def to_compact_yaml(data) -> str:
+	"""Serialize data to minimal YAML for LLM context."""
+	return yaml.dump(
+		data,
+		Dumper=CompactDumper,
+		sort_keys=False,
+		default_flow_style=False,
+		allow_unicode=True,
+		width=1000,  # prevent wrapping long values mid-token
+	)
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ee412daff..6ac05fa5c 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AIPageGeneratorModal: typeof import('./src/components/AIPageGeneratorModal.vue')['default']
     AlertDialog: typeof import('./src/components/AlertDialog.vue')['default']
     AnalyticsFilters: typeof import('./src/components/Settings/AnalyticsFilters.vue')['default']
     AnalyticsOverview: typeof import('./src/components/Settings/AnalyticsOverview.vue')['default']
@@ -71,6 +72,7 @@ declare module 'vue' {
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     Folder: typeof import('./src/components/Icons/Folder.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
+    GlobalAI: typeof import('./src/components/Settings/GlobalAI.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
     GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
@@ -147,5 +149,6 @@ declare module 'vue' {
     VariableManager: typeof import('./src/components/Modals/VariableManager.vue')['default']
     VariantControl: typeof import('./src/components/Controls/VariantControl.vue')['default']
     VisibilityInput: typeof import('./src/components/VisibilityInput.vue')['default']
+    WebPagePresetPicker: typeof import('./src/components/WebPagePresetPicker.vue')['default']
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 908bed664..26c45b62d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -39,6 +39,7 @@
     "autoprefixer": "^10.4.2",
     "codemirror": "^6.0.2",
     "frappe-ui": "0.1.253",
+    "js-yaml": "^4.1.1",
     "opentype.js": "^1.3.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
@@ -52,6 +53,7 @@
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/opentype.js": "^1.3.8",
     "cypress": "^13.3.2",
     "eslint": "^8.38.0",
diff --git a/frontend/src/components/AIPageGeneratorModal.vue b/frontend/src/components/AIPageGeneratorModal.vue
new file mode 100644
index 000000000..6c471af83
--- /dev/null
+++ b/frontend/src/components/AIPageGeneratorModal.vue
@@ -0,0 +1,603 @@
+<template>
+	<Dialog v-model="showDialog" :options="{ title, size: 'xl', paddingTop: '20vh' }">
+		<template #body-content>
+			<div class="flex flex-col gap-3">
+				<div
+					class="relative"
+					@paste.stop="handlePaste"
+					@dragover.prevent="isDragging = isVisionModel ? true : isDragging"
+					@dragleave="isDragging = false"
+					@drop.prevent="handleDrop">
+					<Textarea
+						v-model="prompt"
+						:placeholder="placeholder"
+						:rows="6"
+						class="w-full text-base"
+						@keydown.meta.enter="handleSubmit"
+						@keydown.ctrl.enter="handleSubmit" />
+					<Transition name="fade">
+						<div
+							v-if="isDragging"
+							class="border-outline-blue-3 bg-surface-blue-1/60 pointer-events-none absolute inset-0 flex items-center justify-center rounded-md border-2 border-dashed">
+							<div class="text-ink-blue-4 flex items-center gap-1.5 text-xs font-medium">
+								<FeatherIcon name="image" class="h-3.5 w-3.5" />
+								Drop image to attach
+							</div>
+						</div>
+					</Transition>
+					<span
+						v-if="isVisionModel && !imagePreviewUrl && !isDragging"
+						class="pointer-events-none absolute bottom-2 right-2 select-none text-[10px] text-ink-gray-4">
+						Paste or drop image
+					</span>
+				</div>
+				<Transition name="fade">
+					<div
+						v-if="imagePreviewUrl"
+						class="flex items-center gap-2 rounded-md border border-outline-gray-2 bg-surface-gray-1 p-1.5 pr-2.5">
+						<img :src="imagePreviewUrl" class="h-8 w-8 rounded object-cover" alt="Reference image" />
+						<span class="flex-1 truncate text-xs text-ink-gray-7">{{ imageFileName }}</span>
+						<button
+							type="button"
+							class="hover:text-ink-red-7 flex items-center rounded text-ink-gray-5"
+							title="Remove image"
+							@click="clearImage">
+							<FeatherIcon name="x" class="h-3.5 w-3.5" />
+						</button>
+					</div>
+				</Transition>
+				<Transition name="fade">
+					<div
+						v-if="errorMessage"
+						class="text-ink-red-9 flex items-center gap-2 rounded-md bg-surface-red-1 p-2 text-xs">
+						<FeatherIcon name="alert-circle" class="h-3.5 w-3.5 shrink-0" />
+						{{ errorMessage }}
+					</div>
+				</Transition>
+				<div class="flex items-center justify-between gap-2 pt-2">
+					<div class="flex items-center">
+						<Dropdown
+							:options="[
+								{
+									label: 'Select Model',
+									disabled: true,
+								},
+								...modelOptions.map((m) => ({
+									label: m.label,
+									onClick: () => (selectedModel = m.value),
+								})),
+							]">
+							<Button
+								variant="ghost"
+								icon-right="chevron-up"
+								:label="modelOptions.find((m) => m.value === selectedModel)?.label || 'Model'" />
+						</Dropdown>
+						<Popover v-if="mode === 'generate'" placement="top" :offset="10">
+							<template #target="{ togglePopover }">
+								<Button
+									variant="ghost"
+									icon-right="chevron-up"
+									:label="selectedPreset?.name || 'No Style'"
+									:class="{
+										'!text-ink-gray-4': !selectedPreset,
+									}"
+									@click="togglePopover" />
+							</template>
+							<template #body-main="{ close }">
+								<div class="z-[1100] w-[420px] rounded-lg border bg-surface-white p-2 shadow-2xl">
+									<div class="flex items-center justify-between p-1 px-2">
+										<div class="text-sm text-ink-gray-4">Styles</div>
+										<Button
+											v-if="selectedPreset"
+											class="text-sm text-ink-gray-5 hover:text-ink-gray-7"
+											@click="
+												selectedPreset = null;
+												close();
+											">
+											Clear Selection
+										</Button>
+									</div>
+									<div class="max-h-[350px] overflow-y-auto p-2">
+										<WebPagePresetPicker
+											:modelValue="selectedPreset"
+											@update:modelValue="
+												(val) => {
+													selectedPreset = val;
+													close();
+												}
+											" />
+									</div>
+								</div>
+							</template>
+						</Popover>
+					</div>
+
+					<Button
+						variant="solid"
+						@click="handleSubmit"
+						:disabled="!canGenerate"
+						:loading="generating"
+						:label="mode === 'modify' ? 'Modify' : 'Generate'"
+						icon-right="arrow-up" />
+				</div>
+			</div>
+		</template>
+	</Dialog>
+
+	<Teleport to="body">
+		<Transition name="slide-up">
+			<div
+				v-if="(generating || progressMessage) && !showDialog"
+				class="fixed left-1/2 top-16 z-[1000] -translate-x-1/2">
+				<div
+					class="flex items-center gap-3 rounded-lg border border-outline-gray-2 bg-surface-white px-4 py-2.5 shadow-lg">
+					<FeatherIcon
+						:name="generating ? 'loader' : 'check-circle'"
+						:class="[generating ? 'animate-spin text-ink-gray-7' : 'text-ink-green-3', 'h-4 w-4']" />
+					<span class="text-sm font-medium text-ink-gray-9">
+						{{ progressMessage || (mode === "modify" ? "Modifying section…" : "Generating page…") }}
+					</span>
+				</div>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import Dialog from "@/components/Controls/Dialog.vue";
+import WebPagePresetPicker from "@/components/WebPagePresetPicker.vue";
+import useBuilderStore from "@/stores/builderStore";
+import { useLocalStorage, useThrottleFn } from "@vueuse/core";
+import { Button, createResource, Dropdown, FeatherIcon, Popover, Textarea } from "frappe-ui";
+// @ts-ignore
+import yaml from "js-yaml";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+
+interface Preset {
+	id: string;
+	name: string;
+	description: string;
+	icon: string;
+	category: string;
+}
+
+interface AIModel {
+	name: string;
+	label: string;
+	max_tokens: number;
+	vision?: boolean;
+}
+
+interface AIProvider {
+	provider: string;
+	models: AIModel[];
+}
+
+interface SelectOption {
+	label: string;
+	value: string;
+}
+
+interface StreamData {
+	chunk?: string;
+	task_type?: string;
+	block_id?: string;
+	total_length?: number;
+}
+
+interface ProgressData {
+	message?: string;
+	task_type?: string;
+	block_id?: string;
+	total_length?: number;
+}
+
+interface CompleteData {
+	model_used?: string;
+	task_tier?: "simple" | "complex";
+	message?: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: boolean;
+		pageId: string;
+		mode?: "generate" | "modify";
+		blockContext?: Record<string, any> | null;
+	}>(),
+	{ mode: "generate", blockContext: null },
+);
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: boolean): void;
+	(e: "update:blockContext", value: Record<string, any> | null): void;
+	(e: "generated"): void;
+	(e: "streaming", block: BlockOptions): void;
+	(e: "modified"): void;
+	(e: "modifyStreaming", block: BlockOptions): void;
+	(e: "openSettings"): void;
+	(e: "generating", isGenerating: boolean): void;
+}>();
+
+const showDialog = computed({
+	get: () => props.modelValue,
+	set: (v) => emit("update:modelValue", v),
+});
+
+const prompt = ref("");
+const generating = ref(false);
+const errorMessage = ref("");
+const progressMessage = ref("");
+const streamingContent = ref("");
+const remoteTaskType = ref<string | null>(null);
+const remoteBlockId = ref<string | null>(null);
+const availableModels = ref<AIProvider[]>([]);
+const selectedPreset = ref<Preset | null>(null);
+const selectedModel = useLocalStorage("ai-selected-model", "");
+const imageData = ref<string | null>(null);
+const imagePreviewUrl = ref<string | null>(null);
+const imageFileName = ref("");
+const isDragging = ref(false);
+const currentProviderModels = computed(() => {
+	const found = availableModels.value.find((p) => p.provider === "openrouter");
+	return found ? found.models : [];
+});
+
+watch(
+	currentProviderModels,
+	(models) => {
+		const isValid = models.some((m) => m.name === selectedModel.value);
+		if (models.length > 0 && (!selectedModel.value || !isValid)) {
+			selectedModel.value = models[0].name;
+		}
+	},
+	{ immediate: true },
+);
+
+const modelOptions = computed<SelectOption[]>(() => {
+	return currentProviderModels.value.map((m) => ({ label: m.label, value: m.name }));
+});
+
+const isVisionModel = computed(() => {
+	const model = currentProviderModels.value.find((m) => m.name === selectedModel.value);
+	return model?.vision ?? false;
+});
+
+watch(isVisionModel, (supported) => {
+	if (!supported) clearImage();
+});
+
+const builderStore = useBuilderStore();
+const canGenerate = computed(
+	() => prompt.value.trim() !== "" && builderStore.isAIEnabled && !generating.value,
+);
+
+const title = computed(() => {
+	if (props.mode === "generate") return "Generate with AI";
+	return "Modify with AI";
+});
+
+const placeholder = computed(() => {
+	if (props.mode === "generate") return "Describe the page you want to create…";
+	return "Describe how you want to modify this section…";
+});
+
+function buildPrompt(base: string) {
+	const preset = selectedPreset.value;
+	return preset ? `${base}\n\nDESIGN STYLE: ${preset.name}. ${preset.description}` : base;
+}
+
+function clearImage() {
+	imageData.value = null;
+	imagePreviewUrl.value = null;
+	imageFileName.value = "";
+	isDragging.value = false;
+}
+
+function attachImageFile(file: File) {
+	if (!file.type.startsWith("image/")) {
+		errorMessage.value = "Please paste a valid image.";
+		return;
+	}
+	if (file.size > 5 * 1024 * 1024) {
+		errorMessage.value = "Image must be smaller than 5 MB.";
+		return;
+	}
+	imageFileName.value = file.name || "pasted-image.png";
+	const reader = new FileReader();
+	reader.onload = (e) => {
+		imageData.value = e.target?.result as string;
+		imagePreviewUrl.value = imageData.value;
+	};
+	reader.readAsDataURL(file);
+}
+
+function handlePaste(event: ClipboardEvent) {
+	if (!isVisionModel.value) return;
+	const items = Array.from(event.clipboardData?.items || []);
+	const imageItem = items.find((item) => item.type.startsWith("image/"));
+	if (!imageItem) return;
+	event.preventDefault();
+	const file = imageItem.getAsFile();
+	if (file) attachImageFile(file);
+}
+
+function handleDrop(event: DragEvent) {
+	isDragging.value = false;
+	if (!isVisionModel.value) return;
+	const file = Array.from(event.dataTransfer?.files || []).find((f) => f.type.startsWith("image/"));
+	if (file) attachImageFile(file);
+}
+
+function convertYAMLtoBlock(yamlBlock: Record<string, any>): BlockOptions {
+	if (!yamlBlock || typeof yamlBlock !== "object" || Array.isArray(yamlBlock)) return yamlBlock;
+	const ensureObj = (val: any) => (val && typeof val === "object" && !Array.isArray(val) ? val : {});
+	const ensureArray = (val: any) => (Array.isArray(val) ? val : []);
+	const block: BlockOptions = {
+		element: yamlBlock.el || "div",
+		blockName: yamlBlock.name || "",
+		baseStyles: ensureObj(yamlBlock.style),
+		attributes: ensureObj(yamlBlock.attrs),
+		mobileStyles: ensureObj(yamlBlock.m_style),
+		tabletStyles: ensureObj(yamlBlock.t_style),
+		classes: ensureArray(yamlBlock.classes),
+	};
+	if (yamlBlock.id) block.blockId = yamlBlock.id;
+	if (yamlBlock.text) block.innerText = yamlBlock.text;
+	block.children = Array.isArray(yamlBlock.c) ? yamlBlock.c.map(convertYAMLtoBlock) : [];
+	return block;
+}
+
+function getValidPartialYAML(yamlStr: string): any {
+	let cleaned = yamlStr.trim();
+	if (cleaned.startsWith("```")) {
+		const lines = cleaned.split("\n");
+		lines.shift();
+		if (lines.at(-1)?.startsWith("```")) lines.pop();
+		cleaned = lines.join("\n");
+	}
+	try {
+		return yaml.load(cleaned);
+	} catch {
+		const lines = cleaned.split("\n");
+		for (let i = lines.length - 1; i > 0; i--) {
+			try {
+				const parsed = yaml.load(lines.slice(0, i).join("\n"));
+				if (parsed) return parsed;
+			} catch {}
+		}
+	}
+	return null;
+}
+
+function parseBlock(raw: string): BlockOptions | null {
+	const parsed = getValidPartialYAML(raw);
+	if (!parsed) return null;
+	const block = Array.isArray(parsed) ? parsed[0] : parsed;
+	return block && typeof block === "object" && block.el ? convertYAMLtoBlock(block) : null;
+}
+
+function resetState() {
+	generating.value = true;
+	errorMessage.value = "";
+	progressMessage.value = "Initializing…";
+	streamingContent.value = "";
+	showDialog.value = false;
+}
+
+function handleError(error: unknown, fallback: string) {
+	generating.value = false;
+	progressMessage.value = "";
+	showDialog.value = true;
+	errorMessage.value = error instanceof Error ? error.message : fallback;
+}
+
+async function runTask(type: "generate" | "modify", customParams: Record<string, any> = {}) {
+	resetState();
+	const isModify = type === "modify" || props.mode === "modify";
+	const url = `builder.ai_page_generator.${isModify ? "modify_section" : "generate_page"}_from_prompt`;
+
+	try {
+		await createResource({
+			url,
+			makeParams: () => ({
+				prompt: buildPrompt(prompt.value),
+				page_id: props.pageId,
+				model: selectedModel.value,
+				...(imageData.value ? { image_data: imageData.value } : {}),
+				...customParams,
+			}),
+		}).submit();
+	} catch (e) {
+		handleError(e, `An error occurred while ${isModify ? "modifying" : "generating"}`);
+	}
+}
+
+const handleSubmit = () => {
+	if (props.mode === "modify") {
+		runTask("modify", {
+			block_context: JSON.stringify(props.blockContext),
+		});
+	} else {
+		runTask("generate");
+	}
+};
+
+async function executeDirect(
+	block: Record<string, any>,
+	type: "rewrite_text" | "replace_image",
+	customPrompt?: string,
+) {
+	emit("update:blockContext", block);
+	runTask("modify", {
+		prompt: customPrompt || (type === "rewrite_text" ? "Improve this text" : "Replace image"),
+		block_context: JSON.stringify(block),
+		task_type: type,
+	});
+}
+
+function processStreaming() {
+	const block = parseBlock(streamingContent.value);
+	if (block) {
+		block.originalElement = "body";
+		block.blockId = block.blockId || "root";
+		emit("streaming", block);
+	}
+}
+
+function processModifyStreaming() {
+	const effectiveTaskType = remoteTaskType.value;
+	const effectiveBlockId = remoteBlockId.value || props.blockContext?.blockId;
+
+	if (effectiveTaskType === "rewrite_text") {
+		emit("modifyStreaming", {
+			innerHTML: streamingContent.value.trim().replace(/^"|"$/g, ""),
+			blockId: effectiveBlockId,
+		});
+		return;
+	}
+	if (effectiveTaskType === "replace_image") {
+		const parsed = getValidPartialYAML(streamingContent.value);
+		emit("modifyStreaming", { attributes: { src: parsed }, blockId: effectiveBlockId });
+		return;
+	}
+	const block = parseBlock(streamingContent.value);
+	if (block) {
+		block.blockId = effectiveBlockId;
+		emit("modifyStreaming", block);
+	}
+}
+
+const throttledStreaming = useThrottleFn(processStreaming, 500);
+const throttledModifyStreaming = useThrottleFn(processModifyStreaming, 500);
+
+function makeHandlers(isModify: boolean) {
+	const onProgress = (data: ProgressData) => {
+		generating.value = true;
+		if (data.message) progressMessage.value = data.message;
+		if (data.task_type) remoteTaskType.value = data.task_type;
+		if (isModify && data.block_id) remoteBlockId.value = data.block_id;
+	};
+
+	const onStream = (data: StreamData) => {
+		generating.value = true;
+		if (!data.chunk) return;
+
+		streamingContent.value += data.chunk;
+		const canThrottle = !isModify || !["rewrite_text", "replace_image"].includes(remoteTaskType.value ?? "");
+		if (canThrottle) (isModify ? throttledModifyStreaming : throttledStreaming)();
+
+		if (data.task_type) remoteTaskType.value = data.task_type;
+		if (data.block_id) remoteBlockId.value = data.block_id;
+	};
+
+	const onComplete = (data: CompleteData) => {
+		generating.value = false;
+		progressMessage.value = data.message || "Operation completed";
+		setTimeout(() => (progressMessage.value = ""), 2000);
+		if (isModify) {
+			processModifyStreaming();
+			emit("modified");
+		} else {
+			processStreaming();
+			emit("generated");
+		}
+		prompt.value = "";
+		remoteTaskType.value = null;
+		remoteBlockId.value = null;
+	};
+
+	const onError = (data: { message?: string }) => {
+		generating.value = false;
+		progressMessage.value = "";
+		showDialog.value = true;
+		errorMessage.value =
+			data.message || `An error occurred while ${isModify ? "modifying the section" : "generating the page"}`;
+		remoteTaskType.value = null;
+		remoteBlockId.value = null;
+	};
+
+	return { onProgress, onStream, onComplete, onError };
+}
+
+const generateHandlers = makeHandlers(false);
+const modifyHandlers = makeHandlers(true);
+
+const eventName = (base: string) => (props.pageId ? `${base}_${props.pageId}` : base);
+
+const listeners = {
+	ai_generation_progress: generateHandlers.onProgress,
+	ai_generation_stream: generateHandlers.onStream,
+	ai_generation_complete: generateHandlers.onComplete,
+	ai_generation_error: generateHandlers.onError,
+	ai_modify_progress: modifyHandlers.onProgress,
+	ai_modify_stream: modifyHandlers.onStream,
+	ai_modify_complete: modifyHandlers.onComplete,
+	ai_modify_error: modifyHandlers.onError,
+};
+
+function attachListeners() {
+	Object.entries(listeners).forEach(([evt, handler]) => {
+		builderStore.realtime.on(eventName(evt), handler);
+	});
+}
+
+function detachListeners() {
+	Object.entries(listeners).forEach(([evt, handler]) => {
+		builderStore.realtime.off(eventName(evt), handler);
+	});
+}
+
+onMounted(() => {
+	attachListeners();
+	createResource({
+		url: "builder.ai_page_generator.get_ai_models",
+		auto: true,
+		onSuccess: (data: AIProvider[]) => (availableModels.value = data),
+	});
+});
+
+onUnmounted(detachListeners);
+
+watch(
+	() => props.pageId,
+	() => {
+		detachListeners();
+		attachListeners();
+	},
+);
+watch(generating, (v) => emit("generating", v));
+watch(showDialog, (v) => {
+	if (v) {
+		errorMessage.value = "";
+		progressMessage.value = "";
+		streamingContent.value = "";
+		clearImage();
+	}
+});
+
+defineExpose({ executeDirect });
+</script>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+	transition: all 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+	opacity: 0;
+	transform: translate(-50%, -20px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index 69a1f7a9d..9b9823bb6 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -16,7 +16,7 @@ import useComponentStore from "@/stores/componentStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy, triggerCopyEvent } from "@/utils/helpers";
 import { useStorage } from "@vueuse/core";
-import { Ref, nextTick, ref } from "vue";
+import { Ref, inject, nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 
 const builderStore = useBuilderStore();
@@ -44,6 +44,11 @@ const showContextMenu = (event: MouseEvent, refBlock: Block) => {
 
 const copiedStyle = useStorage("copiedStyle", { blockId: "", style: {} }, sessionStorage) as Ref<StyleCopy>;
 
+const editWithAIFn = inject<((block: Block) => void) | undefined>("editWithAI", undefined);
+const runDirectAI = inject<
+	((block: Block, type: "rewrite_text" | "replace_image", customPrompt?: string) => void) | undefined
+>("runDirectAI", undefined);
+
 const copyStyle = () => {
 	copiedStyle.value = {
 		blockId: block.value.blockId,
@@ -60,6 +65,34 @@ const duplicateBlock = () => {
 };
 
 const contextMenuOptions: ContextMenuOption[] = [
+	{
+		label: "Edit with AI",
+		action: () => {
+			if (editWithAIFn) {
+				editWithAIFn(block.value);
+			}
+		},
+		condition: () => builderStore.isAIEnabled && Boolean(editWithAIFn) && !block.value.isRoot(),
+		disabled: () => builderStore.readOnlyMode,
+	},
+	{
+		label: "Rewrite (AI)",
+		action: () => {
+			runDirectAI?.(block.value, "rewrite_text", "Rewrite the content");
+		},
+		condition: () =>
+			builderStore.isAIEnabled && Boolean(runDirectAI) && block.value.isText() && !block.value.isRoot(),
+		disabled: () => builderStore.readOnlyMode,
+	},
+	{
+		label: "Replace Image (AI)",
+		action: () => {
+			runDirectAI?.(block.value, "replace_image", "Replace image");
+		},
+		condition: () =>
+			builderStore.isAIEnabled && Boolean(runDirectAI) && block.value.isImage() && !block.value.isRoot(),
+		disabled: () => builderStore.readOnlyMode,
+	},
 	{
 		label: "Edit HTML",
 		action: () => {
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 3de585460..1ffbac0e7 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -48,10 +48,13 @@ import MetaIcon from "./Icons/Meta.vue";
 import SettingsIcon from "./Icons/Settings.vue";
 // @ts-ignore
 import TerminalIcon from "~icons/lucide/terminal";
+// @ts-ignore
+import SparklesIcon from "~icons/lucide/sparkles";
+import GlobalAI from "./Settings/GlobalAI.vue";
 import GlobalAnalytics from "./Settings/GlobalAnalytics.vue";
 import GlobalCode from "./Settings/GlobalCode.vue";
-import GlobalGeneral from "./Settings/GlobalGeneral.vue";
 import GlobalDeveloper from "./Settings/GlobalDeveloper.vue";
+import GlobalGeneral from "./Settings/GlobalGeneral.vue";
 import PageAnalytics from "./Settings/PageAnalytics.vue";
 import PageGeneral from "./Settings/PageGeneral.vue";
 import PageMeta from "./Settings/PageMeta.vue";
@@ -153,6 +156,13 @@ const globalSettings = {
 			title: "Developer Settings",
 			icon: TerminalIcon,
 		},
+		{
+			label: "AI",
+			value: "global_ai",
+			component: GlobalAI,
+			title: "AI Settings",
+			icon: SparklesIcon,
+		},
 	],
 };
 
diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index 7b30c6f07..c22f59cbd 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -93,6 +93,13 @@
 			</div>
 			<Badge variant="subtle" theme="orange" v-if="builderStore.readOnlyMode">Read Only</Badge>
 			<div class="flex gap-2">
+				<Tooltip v-if="builderStore.isAIEnabled" text="Generate with AI" :hoverDelay="0.6" arrow-class="mb-3">
+					<Button
+						variant="ghost"
+						@click="openAIGenerator"
+						:icon="SparklesIcon"
+						:disabled="builderStore.readOnlyMode"></Button>
+				</Tooltip>
 				<Tooltip text="Toggle Dark Mode" :hoverDelay="0.6" arrow-class="mb-3">
 					<Button
 						variant="ghost"
@@ -150,6 +157,7 @@ import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import PlayIcon from "@/components/Icons/Play.vue";
 import SettingsGearIcon from "@/components/Icons/SettingsGear.vue";
 import PublishButton from "@/components/PublishButton.vue";
+import { builderSettings } from "@/data/builderSettings";
 import { webPages } from "@/data/webPage";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
@@ -159,6 +167,8 @@ import { useDark, useToggle } from "@vueuse/core";
 import { Badge, Popover, Tooltip } from "frappe-ui";
 import { computed, defineAsyncComponent, inject, ref } from "vue";
 import { toast } from "vue-sonner";
+// @ts-ignore
+import SparklesIcon from "~icons/lucide/sparkles";
 import MainMenu from "./MainMenu.vue";
 import PageOptions from "./PageOptions.vue";
 
@@ -176,6 +186,16 @@ const showInfoDialog = ref(false);
 const showSettingsDialog = ref(false);
 const showShortcuts = inject<() => void>("showShortcuts", () => {});
 
+const openAIGeneratorFn = inject<(() => void) | undefined>("showAIGenerator", undefined);
+
+const openAIGenerator = () => {
+	if (openAIGeneratorFn) {
+		openAIGeneratorFn();
+	} else {
+		toast.error("AI Generator is not available");
+	}
+};
+
 const currentlyViewedByText = computed(() => {
 	const names = builderStore.viewers.map((viewer) => viewer.fullname).map((name) => name.split(" ")[0]);
 	const count = names.length;
diff --git a/frontend/src/components/Settings/GlobalAI.vue b/frontend/src/components/Settings/GlobalAI.vue
new file mode 100644
index 000000000..2882427a1
--- /dev/null
+++ b/frontend/src/components/Settings/GlobalAI.vue
@@ -0,0 +1,85 @@
+<template>
+	<div class="flex flex-col gap-5">
+		<div class="flex flex-col gap-2">
+			<label class="text-sm text-ink-gray-9">OpenRouter API Key</label>
+			<div class="flex items-center gap-2">
+				<FormControl
+					type="password"
+					:modelValue="apiKey"
+					@update:modelValue="updateApiKey"
+					placeholder="sk-or-v1-…"
+					class="flex-1" />
+				<Button v-if="apiKey" variant="subtle" @click="testApiKey" :disabled="testing">
+					{{ testing ? "Testing..." : "Test Key" }}
+				</Button>
+			</div>
+			<p class="text-xs text-ink-gray-6">
+				Get API key from
+				<a
+					href="https://openrouter.ai/keys"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-ink-blue-4 underline">
+					openrouter.ai/keys
+				</a>
+				— supports Claude, Gemini, GPT and more under one key.
+			</p>
+		</div>
+		<div v-if="statusMessage" class="rounded-lg p-3 text-sm" :class="statusClass">
+			{{ statusMessage }}
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { builderSettings } from "@/data/builderSettings";
+import useBuilderStore from "@/stores/builderStore";
+import { createResource, FormControl } from "frappe-ui";
+import { onMounted, ref } from "vue";
+
+const builderStore = useBuilderStore();
+
+const testing = ref(false);
+const statusMessage = ref("");
+const statusClass = ref("");
+const apiKey = ref("");
+
+const updateApiKey = (value: string) => {
+	apiKey.value = value;
+	builderStore.updateBuilderSettings("ai_api_key", value);
+};
+
+const testApiKey = async () => {
+	if (!apiKey.value) return;
+
+	testing.value = true;
+	statusMessage.value = "";
+
+	try {
+		const result = (await createResource({
+			url: "builder.ai_page_generator.test_api_key",
+		}).submit()) as { success: boolean; message?: string };
+
+		if (result.success) {
+			statusMessage.value = "API key is valid!";
+			statusClass.value = "text-ink-green-3 bg-surface-green-1";
+		} else {
+			statusMessage.value = result.message || "API key test failed";
+			statusClass.value = "text-ink-red-3 bg-surface-red-1";
+		}
+	} catch (error: unknown) {
+		statusMessage.value = error instanceof Error ? error.message : "Failed to test API key";
+		statusClass.value = "text-ink-red-3 bg-surface-red-1";
+	} finally {
+		testing.value = false;
+		setTimeout(() => {
+			statusMessage.value = "";
+		}, 5000);
+	}
+};
+
+onMounted(() => {
+	if (builderSettings.doc?.ai_api_key) {
+		apiKey.value = builderSettings.doc.ai_api_key;
+	}
+});
+</script>
diff --git a/frontend/src/components/WebPagePresetPicker.vue b/frontend/src/components/WebPagePresetPicker.vue
new file mode 100644
index 000000000..acc99cc48
--- /dev/null
+++ b/frontend/src/components/WebPagePresetPicker.vue
@@ -0,0 +1,473 @@
+<template>
+	<div class="flex flex-col gap-2">
+		<!-- Category Filter -->
+		<div class="pb-2 pt-0.5">
+			<TabButtons v-model="selectedCategory" :buttons="CATEGORIES" />
+		</div>
+
+		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+			<button
+				v-for="preset in filteredPresets"
+				:key="preset.id"
+				class="group relative flex flex-col items-center gap-2 rounded-xl border p-2 outline-none transition-all duration-200"
+				:class="
+					modelValue?.id === preset.id
+						? 'border-outline-gray-9 ring-2 ring-outline-gray-4'
+						: 'border-outline-gray-2 bg-surface-white hover:border-outline-gray-4 hover:shadow-sm'
+				"
+				@click="$emit('update:modelValue', preset)">
+				<!-- Preview -->
+				<div
+					class="relative flex h-16 w-full flex-col gap-1.5 overflow-hidden rounded-lg p-2 transition-transform"
+					:class="preset?.preview?.bg">
+					<!-- Aurora Glass -->
+					<template v-if="preset.id === 'aurora-glass'">
+						<div
+							class="absolute -left-3 -top-3 h-10 w-10 rounded-full opacity-60"
+							:class="preset?.preview?.blobA"
+							style="filter: blur(8px)"></div>
+						<div
+							class="absolute -bottom-2 right-1 h-8 w-8 rounded-full opacity-40"
+							:class="preset?.preview?.blobB"
+							style="filter: blur(6px)"></div>
+						<div class="relative z-10 flex flex-col gap-1.5 pt-1">
+							<div class="h-2 w-3/4 rounded-full border border-white/10 bg-white opacity-15"></div>
+							<div class="h-1.5 w-1/2 rounded-full bg-white opacity-10"></div>
+							<div
+								class="mt-0.5 h-3.5 w-2/5 rounded-md border border-white/20"
+								style="
+									background: linear-gradient(90deg, rgba(139, 92, 246, 0.7), rgba(6, 182, 212, 0.7));
+								"></div>
+						</div>
+					</template>
+					<!-- Neo-Brutalist -->
+					<template v-else-if="preset.id === 'neo-brutalist'">
+						<div class="absolute inset-x-0 top-0 flex h-6 items-center bg-black px-2">
+							<div class="h-1.5 w-1/3 rounded-sm bg-yellow-300"></div>
+						</div>
+						<div class="mt-6 flex flex-col gap-1">
+							<div class="h-1.5 w-3/5 rounded-sm bg-black"></div>
+							<div class="h-1.5 w-2/5 rounded-sm border-2 border-black bg-transparent"></div>
+						</div>
+					</template>
+					<!-- Minimal Ink -->
+					<template v-else-if="preset.id === 'minimal-ink'">
+						<div class="h-px w-full bg-gray-200"></div>
+						<div class="flex items-center gap-1.5 py-1">
+							<div class="h-4 w-4 flex-shrink-0 rounded border-2 border-gray-800"></div>
+							<div class="h-1.5 w-2/5 rounded-sm bg-gray-800"></div>
+						</div>
+						<div class="h-px w-full bg-gray-200"></div>
+						<div class="h-1 w-1/3 rounded-sm bg-gray-300"></div>
+					</template>
+
+					<!-- Earthy Organic -->
+					<template v-else-if="preset.id === 'earthy'">
+						<div class="absolute -right-2 -top-2 h-10 w-10 rounded-full bg-amber-300 opacity-30"></div>
+						<div class="h-2 w-3/5 rounded-xl rounded-l-none bg-amber-800 opacity-80"></div>
+						<div class="h-1 w-4/5 rounded bg-amber-500 opacity-50"></div>
+						<div class="h-1 w-1/2 rounded bg-amber-700 opacity-40"></div>
+						<div class="mt-1 flex gap-1">
+							<div class="h-3 w-1/3 rounded-full bg-amber-800 opacity-70"></div>
+							<div class="h-3 w-1/4 rounded-full bg-amber-500 opacity-50"></div>
+						</div>
+					</template>
+
+					<!-- Tech Terminal -->
+					<template v-else-if="preset.id === 'tech-terminal'">
+						<div class="mb-1 flex gap-1">
+							<div class="h-1.5 w-1.5 rounded-full bg-red-500"></div>
+							<div class="h-1.5 w-1.5 rounded-full bg-yellow-400"></div>
+							<div class="h-1.5 w-1.5 rounded-full bg-green-400"></div>
+						</div>
+						<div class="h-1.5 w-2/5 rounded-sm bg-green-400 opacity-90"></div>
+						<div class="h-1 w-3/5 rounded-sm bg-green-400 opacity-35"></div>
+						<div class="h-1 w-1/2 rounded-sm bg-green-400 opacity-25"></div>
+						<div class="h-1.5 w-4 animate-pulse rounded-sm bg-green-400 opacity-70"></div>
+					</template>
+
+					<!-- Luxe Editorial -->
+					<template v-else-if="preset.id === 'luxe-editorial'">
+						<div
+							class="absolute bottom-0 left-0 top-0 w-0.5"
+							style="background: linear-gradient(180deg, #b8860b, #ffd700, #b8860b)"></div>
+						<div class="flex h-full flex-col justify-center gap-1.5 pl-3">
+							<div class="h-1.5 w-4/5 rounded-sm bg-yellow-300 opacity-90"></div>
+							<div class="h-px w-full bg-yellow-300 opacity-20"></div>
+							<div class="h-1 w-3/5 rounded-sm bg-yellow-200 opacity-50"></div>
+							<div class="h-1 w-2/5 rounded-sm bg-yellow-200 opacity-30"></div>
+						</div>
+					</template>
+
+					<!-- Bold Retro -->
+					<template v-else-if="preset.id === 'bold-retro'">
+						<div class="pointer-events-none absolute inset-0 rounded-lg border-2 border-black"></div>
+						<div class="flex h-4 w-full items-center rounded-sm bg-black px-1.5">
+							<div class="h-1.5 w-8 rounded-sm bg-yellow-300"></div>
+						</div>
+						<div class="flex flex-1 items-end gap-0.5">
+							<div class="h-full flex-1 rounded-t-sm bg-red-500"></div>
+							<div class="flex-1 rounded-t-sm bg-black" style="height: 60%"></div>
+							<div class="flex-1 rounded-t-sm bg-red-500" style="height: 75%"></div>
+							<div class="flex-1 rounded-t-sm bg-black" style="height: 35%"></div>
+							<div class="flex-1 rounded-t-sm bg-red-500" style="height: 88%"></div>
+						</div>
+					</template>
+
+					<!-- Paper & Ink -->
+					<template v-else-if="preset.id === 'paper-print'">
+						<div
+							class="absolute inset-0 opacity-20"
+							style="
+								background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%224%22 height=%224%22 viewBox=%220 0 4 4%22%3E%3Cpath fill=%22%23000%22 fill-opacity=%220.4%22 d=%22M1 3h1v1H1V3zm2-2h1v1H3V1z%22%3E%3C/path%3E%3C/svg%3E&quot;);
+							"></div>
+						<div class="relative border-b border-orange-200 py-1">
+							<div class="h-2 w-3/4 bg-gray-900"></div>
+						</div>
+						<div class="mt-1 space-y-1">
+							<div class="h-1 w-full bg-gray-600/60"></div>
+							<div class="h-1 w-5/6 bg-gray-600/60"></div>
+						</div>
+						<div class="mt-auto flex justify-end">
+							<div class="h-3 w-3 rounded-full border border-gray-900"></div>
+						</div>
+					</template>
+
+					<!-- Playful Pastel -->
+					<template v-else-if="preset.id === 'playful-pastel'">
+						<div class="absolute -right-2 -top-2 h-12 w-12 rounded-full bg-blue-200/50"></div>
+						<div class="absolute -bottom-4 -left-2 h-10 w-10 rounded-full bg-yellow-200/50"></div>
+						<div class="relative flex flex-col gap-1.5">
+							<div class="h-3 w-3/4 rounded-full bg-pink-400"></div>
+							<div class="h-4 w-1/2 rounded-full border-2 border-pink-400 bg-white"></div>
+						</div>
+					</template>
+
+					<!-- Industrial Mono -->
+					<template v-else-if="preset.id === 'industrial-mono'">
+						<div
+							class="absolute inset-0 opacity-10"
+							style="
+								background-image: linear-gradient(#fff 1px, transparent 1px),
+									linear-gradient(90deg, #fff 1px, transparent 1px);
+								background-size: 8px 8px;
+							"></div>
+						<div class="relative flex flex-col gap-2 p-1">
+							<div class="h-0.5 w-full bg-white opacity-20"></div>
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 border border-white opacity-40"></div>
+								<div class="h-2 w-12 bg-white opacity-60"></div>
+							</div>
+							<div class="h-0.5 w-full bg-white opacity-20"></div>
+						</div>
+					</template>
+
+					<!-- Synthwave Neon -->
+					<template v-else-if="preset.id === 'synthwave'">
+						<div
+							class="absolute inset-0"
+							style="
+								background: linear-gradient(0deg, #2d0b5a 0%, #0d0221 100%);
+								background-image: linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
+									linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
+								background-size: 15px 15px;
+								background-position: center bottom;
+								perspective: 100px;
+							"></div>
+						<div
+							class="absolute -bottom-2 -left-2 h-16 w-16 rounded-full bg-gradient-to-t from-orange-500/40 to-pink-500/40 blur-md"></div>
+						<div class="relative z-10 flex flex-col gap-1.5">
+							<div class="h-1.5 w-3/4 bg-cyan-400 shadow-[0_0_5px_#22d3ee]"></div>
+							<div class="h-1 w-1/2 bg-blue-400 shadow-[0_0_5px_#e879f9]"></div>
+						</div>
+					</template>
+
+					<!-- Sketch Book -->
+					<template v-else-if="preset.id === 'sketch-book'">
+						<div
+							class="absolute inset-0"
+							style="
+								background-image: radial-gradient(#d1d5db 0.5px, transparent 0.5px);
+								background-size: 10px 10px;
+							"></div>
+						<div class="relative flex flex-col gap-2 pt-1">
+							<div
+								class="h-3 w-4/5 border-2 border-gray-800 bg-white"
+								style="border-radius: 2px 8px 3px 6px"></div>
+							<div class="h-1 w-full border-b border-gray-400"></div>
+							<div class="h-1 w-2/3 border-b border-gray-400"></div>
+							<div
+								class="absolute -right-1 bottom-0 h-4 w-4 border-2 border-dashed border-gray-400"
+								style="transform: rotate(5deg)"></div>
+						</div>
+					</template>
+
+					<!-- Claymorphism -->
+					<template v-else-if="preset.id === 'claymorphism'">
+						<div
+							class="absolute bottom-2 right-2 h-10 w-10 rounded-full"
+							style="
+								background: radial-gradient(circle at 30% 30%, #d8d4f0, #bdb8e8);
+								filter: blur(10px);
+								opacity: 0.5;
+							"></div>
+
+						<div class="relative flex flex-col gap-3 pt-1">
+							<div
+								class="h-4 w-4/5 rounded-2xl"
+								style="
+									background: linear-gradient(135deg, #ede9fa 0%, #d4ceef 100%);
+									box-shadow:
+										6px 6px 14px #c8c2e844,
+										-6px -6px 14px #ffffff,
+										inset 2px 2px 5px rgba(255, 255, 255, 0.95),
+										inset -2px -2px 5px rgba(139, 120, 200, 0.08);
+								"></div>
+
+							<div
+								class="h-6 w-1/2 rounded-full"
+								style="
+									background: linear-gradient(135deg, #d4eee3 0%, #b8dece 100%);
+									box-shadow:
+										5px 5px 12px #aed4c044,
+										-5px -5px 12px #ffffff,
+										inset 3px 3px 7px rgba(255, 255, 255, 0.9),
+										inset -3px -3px 7px rgba(80, 160, 120, 0.08);
+								"></div>
+						</div>
+					</template>
+
+					<!-- Blueprint -->
+					<template v-else-if="preset.id === 'blueprint'">
+						<div
+							class="absolute inset-0"
+							style="
+								background-color: #0c3a6e;
+								background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+									linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+								background-size: 10px 10px;
+							"></div>
+						<div class="relative flex flex-col gap-1.5 border-l border-white/20 pl-2">
+							<div class="h-2 w-3/4 border-b border-t border-white/40 bg-white/5"></div>
+							<div class="flex items-center gap-1">
+								<div class="h-1.5 w-1.5 border border-white/60"></div>
+								<div class="h-0.5 w-12 bg-white/40"></div>
+							</div>
+							<div class="h-px w-full bg-white/10"></div>
+							<div class="h-1 w-1/3 bg-white/30"></div>
+						</div>
+					</template>
+				</div>
+
+				<!-- Label -->
+				<div class="flex flex-col items-center gap-0.5 px-0.5">
+					<span class="text-[11px] font-semibold leading-tight text-ink-gray-9">
+						{{ preset.name }}
+					</span>
+				</div>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface PresetPreview {
+	bg: string;
+	accent?: string;
+	blobA?: string;
+	blobB?: string;
+}
+
+interface Preset {
+	id: string;
+	name: string;
+	category: string;
+	description: string;
+	icon: string;
+	preview?: PresetPreview;
+}
+
+const PRESETS: Preset[] = [
+	{
+		id: "aurora-glass",
+		name: "Aurora Glass",
+		category: "modern",
+		description:
+			"Deep dark backgrounds with vibrant aurora-inspired gradients, glassmorphism cards with blur/translucency, and glowing blobs. Ultra-modern and immersive.",
+		icon: "aperture",
+		preview: {
+			bg: "bg-gray-900",
+			blobA: "bg-purple-600",
+			blobB: "bg-blue-700",
+		},
+	},
+	{
+		id: "neo-brutalist",
+		name: "Neo-Brutalist",
+		category: "retro",
+		description:
+			"Raw, unapologetic design with heavy borders, bold offset shadows, and chunky typography. Intentionally rough and high-contrast. No gradients, no subtlety.",
+		icon: "bold",
+		preview: {
+			bg: "bg-white",
+		},
+	},
+	{
+		id: "minimal-ink",
+		name: "Minimal Ink",
+		category: "minimal",
+		description:
+			"Absolute restraint — hairline borders, sparse layout. Typography does all the work. Inspired by Swiss editorial design and Japanese stationery brands. Zero decoration.",
+		icon: "feather",
+		preview: {
+			bg: "bg-gray-100",
+		},
+	},
+	{
+		id: "earthy",
+		name: "Earthy Organic",
+		category: "other",
+		description:
+			"Organic shapes, natural textures, and rounded asymmetric forms. Grounded and tactile — ideal for wellness, food, craft, and sustainability brands.",
+		icon: "coffee",
+		preview: {
+			bg: "bg-red-100",
+		},
+	},
+	{
+		id: "tech-terminal",
+		name: "Tech Terminal",
+		category: "tech",
+		description:
+			"Dark background with monospace typography, terminal-style chrome, and code-aesthetic UI. Think developer tools, CLI apps, and hacker-culture interfaces.",
+		icon: "terminal",
+		preview: {
+			bg: "bg-gray-900",
+		},
+	},
+	{
+		id: "luxe-editorial",
+		name: "Luxe Editorial",
+		category: "other",
+		description:
+			"Thin serif typefaces, and refined negative space. Understated luxury — think high-fashion magazines and premium brand campaigns.",
+		icon: "star",
+		preview: {
+			bg: "bg-gray-800",
+		},
+	},
+	{
+		id: "bold-retro",
+		name: "Bold Retro",
+		category: "retro",
+		description:
+			"Thick borders, chunky chart bars, flat graphic shapes, and retro poster energy. Bold and high-contrast, inspired by 90s print graphics and risograph aesthetics.",
+		icon: "zap",
+		preview: {
+			bg: "bg-yellow-100",
+		},
+	},
+	{
+		id: "paper-print",
+		name: "Paper & Ink",
+		category: "minimal",
+		description:
+			"Warm, textured paper backgrounds with high-contrast ink-like typography. Tactile and organic, inspired by letterpress printing and boutique stationery.",
+		icon: "book-open",
+		preview: {
+			bg: "bg-orange-50",
+		},
+	},
+	{
+		id: "playful-pastel",
+		name: "Playful Pastel",
+		category: "modern",
+		description:
+			"Soft candy-colored palettes, organic wiggly shapes, and pill-shaped rounded buttons. Bouncy, cheerful, and approachable for consumer-friendly apps.",
+		icon: "smile",
+		preview: {
+			bg: "bg-pink-50",
+		},
+	},
+	{
+		id: "industrial-mono",
+		name: "Industrial Mono",
+		category: "tech",
+		description:
+			"Raw, high-contrast monochrome with technical grid backgrounds and utility-first layouts. Rugged, functional, and inspired by architectural blueprints.",
+		icon: "box",
+		preview: {
+			bg: "bg-zinc-900",
+		},
+	},
+	{
+		id: "synthwave",
+		name: "Synthwave Neon",
+		category: "retro",
+		description:
+			"80s retro-futurism with glowing grid floors, vibrant sun-gradient headers, and high-contrast pink and purple neon accents. Retro-digital aesthetic.",
+		icon: "sun",
+		preview: {
+			bg: "bg-purple-900",
+		},
+	},
+	{
+		id: "sketch-book",
+		name: "Sketch Book",
+		category: "minimal",
+		description:
+			"Hand-drawn pencil lines, rough scribbled borders, and graphite textures. Creative and raw artistic feel, as if sketched in a physical notebook.",
+		icon: "edit-3",
+		preview: {
+			bg: "bg-gray-100",
+		},
+	},
+	{
+		id: "claymorphism",
+		name: "Organic Clay",
+		category: "modern",
+		description:
+			"Soft, pillowy surfaces with deep inner shadows and outer glows. Friendly, tactile, and highly rounded shapes. Modern 3D 'clay' look.",
+		icon: "box",
+		preview: {
+			bg: "bg-blue-100",
+		},
+	},
+	{
+		id: "blueprint",
+		name: "Tech Blueprint",
+		category: "tech",
+		description:
+			"Deep architectural blue backgrounds with fine white grid lines and technical drafting annotations. Precise, structural, and professional.",
+		icon: "map",
+		preview: {
+			bg: "bg-blue-900",
+		},
+	},
+];
+
+import TabButtons from "@/components/Controls/TabButtons.vue";
+import { computed, ref } from "vue";
+
+const CATEGORIES = [
+	{ label: "Minimal", value: "minimal" },
+	{ label: "Technical", value: "tech" },
+	{ label: "Modern", value: "modern" },
+	{ label: "Retro", value: "retro" },
+	{ label: "Other", value: "other" },
+];
+
+const selectedCategory = ref("minimal");
+
+const filteredPresets = computed(() => {
+	return PRESETS.filter((p) => p.category === selectedCategory.value);
+});
+
+defineProps<{
+	modelValue: Preset | null;
+}>();
+
+defineEmits<{
+	(e: "update:modelValue", value: Preset | null): void;
+}>();
+</script>
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index f30cd35bc..effb20428 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -100,11 +100,24 @@
 				required />
 		</template>
 	</Dialog>
+	<AIPageGeneratorModal
+		v-model="showAIGeneratorDialog"
+		:pageId="route.params.pageId as string"
+		:mode="aiMode"
+		:blockContext="modifyBlockContext"
+		@generated="handleGeneratedBlocks"
+		@streaming="handleStreamingBlocks"
+		@modified="handleModifiedBlocks"
+		@modifyStreaming="handleModifyStreamingBlocks"
+		@generating="isAIGenerating = $event"
+		ref="aiGeneratorModal"></AIPageGeneratorModal>
 	<BlockContextMenu ref="blockContextMenu"></BlockContextMenu>
 	<KeyboardShortcutsModal ref="shortcutsModal" />
 </template>
 
 <script setup lang="ts">
+import type Block from "@/block";
+import AIPageGeneratorModal from "@/components/AIPageGeneratorModal.vue";
 import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import BuilderCanvas from "@/components/BuilderCanvas.vue";
 import BuilderLeftPanel from "@/components/BuilderLeftPanel.vue";
@@ -121,7 +134,7 @@ import usePageStore from "@/stores/pageStore";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { getUsersInfo } from "@/usersInfo";
 import blockController from "@/utils/blockController";
-import { getRootBlockTemplate } from "@/utils/helpers";
+import { getBlockInstance, getBlockObject, getRootBlockTemplate } from "@/utils/helpers";
 import { useBuilderEvents } from "@/utils/useBuilderEvents";
 import { useShortcut } from "@/utils/useShortcut";
 import { breakpointsTailwind, useBreakpoints, useDebounceFn, useEventListener } from "@vueuse/core";
@@ -131,6 +144,7 @@ import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";
 
 const expandedEditor = ref<null | InstanceType<typeof CodeEditor>>(null);
+const aiGeneratorModal = ref<null | InstanceType<typeof AIPageGeneratorModal>>(null);
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isSmallScreen = breakpoints.smaller("lg");
@@ -144,6 +158,99 @@ const usageCount = ref(0);
 const componentUsedInPages = ref<BuilderPage[]>([]);
 const pageListDialog = ref(false);
 const blockContextMenu = ref<InstanceType<typeof BlockContextMenu> | null>(null);
+const showAIGeneratorDialog = ref(false);
+const aiMode = ref<"generate" | "modify">("generate");
+const modifyBlockContext = ref<Record<string, any> | null>(null);
+const modifyBlockId = ref<string | null>(null);
+const isAIGenerating = ref(false);
+
+provide("showAIGenerator", () => {
+	aiMode.value = "generate";
+	modifyBlockContext.value = null;
+	modifyBlockId.value = null;
+	showAIGeneratorDialog.value = true;
+});
+
+const editWithAIFn = (block: Block) => {
+	aiMode.value = "modify";
+	modifyBlockContext.value = getBlockObject(block);
+	modifyBlockId.value = block.blockId;
+	showAIGeneratorDialog.value = true;
+};
+provide("editWithAI", editWithAIFn);
+
+const runDirectAI = (block: Block, type: "rewrite_text" | "replace_image", customPrompt?: string) => {
+	const blockObj = getBlockObject(block);
+	aiMode.value = "modify";
+	modifyBlockId.value = block.blockId;
+	modifyBlockContext.value = blockObj;
+	aiGeneratorModal.value?.executeDirect(blockObj, type, customPrompt);
+};
+provide("runDirectAI", runDirectAI);
+
+const handleGeneratedBlocks = () => {
+	pageStore.savePage();
+};
+
+const handleStreamingBlocks = (block: BlockOptions) => {
+	if (!block) return;
+
+	try {
+		pageStore.pageBlocks = [getBlockInstance(block)];
+		canvasStore.activeCanvas?.setRootBlock(pageStore.pageBlocks[0] as Block, false);
+	} catch {
+		// Partial block may still be invalid, skip this frame
+	}
+};
+
+const replaceBlockInTree = (root: Block, targetId: string, replacement: BlockOptions): boolean => {
+	if (!root || !replacement) return false;
+	if (root.blockId === targetId) {
+		root.element = replacement.element || root.element;
+		root.baseStyles = replacement.baseStyles || root.baseStyles;
+		root.mobileStyles = replacement.mobileStyles || root.mobileStyles;
+		root.tabletStyles = replacement.tabletStyles || root.tabletStyles;
+		root.classes = replacement.classes || root.classes;
+
+		if (replacement.attributes) {
+			root.attributes = { ...root.attributes, ...replacement.attributes };
+		}
+
+		if (replacement.innerText !== undefined) root.innerText = replacement.innerText;
+		if (replacement.innerHTML !== undefined) root.innerHTML = replacement.innerHTML;
+
+		if (replacement.children) {
+			root.children.splice(
+				0,
+				root.children.length,
+				...replacement.children.map((child) => getBlockInstance(child as BlockOptions)),
+			);
+		}
+		return true;
+	}
+	return root.children?.some((child: Block) => replaceBlockInTree(child, targetId, replacement)) || false;
+};
+
+const handleModifiedBlocks = () => {
+	pageStore.savePage();
+	modifyBlockContext.value = null;
+	modifyBlockId.value = null;
+	aiMode.value = "generate";
+};
+
+const handleModifyStreamingBlocks = (block: BlockOptions) => {
+	const targetId = block?.blockId || modifyBlockId.value;
+	if (!block || !targetId) return;
+
+	try {
+		const rootBlock = pageStore.pageBlocks[0] as Block;
+		if (rootBlock) {
+			replaceBlockInTree(rootBlock, targetId, block);
+		}
+	} catch {
+		// Partial block may still be invalid, skip this frame
+	}
+};
 
 watch([() => canvasStore.editableBlock, () => pageStore.activePage?.is_standard], () => {
 	builderStore.toggleReadOnlyMode(
@@ -198,6 +305,23 @@ useShortcut([
 			}
 		},
 	},
+	{
+		key: "i",
+		ctrl: true,
+		description: "Edit block with AI",
+		group: "Block",
+		condition: () =>
+			builderStore.isAIEnabled &&
+			!blockController.isRoot() &&
+			!blockController.multipleBlocksSelected() &&
+			!builderStore.readOnlyMode,
+		handler: () => {
+			const block = blockController.getSelectedBlocks()[0];
+			if (block) {
+				editWithAIFn?.(block);
+			}
+		},
+	},
 ]);
 
 // When space is released, revert back to last mode
@@ -332,7 +456,8 @@ watch(
 			pageStore.selectedPage &&
 			!pageStore.settingPage &&
 			canvasStore.editingMode === "page" &&
-			!pageCanvas.value?.canvasProps?.settingCanvas
+			!pageCanvas.value?.canvasProps?.settingCanvas &&
+			!isAIGenerating.value
 		) {
 			pageStore.savingPage = true;
 			debouncedPageSave();
@@ -375,8 +500,6 @@ watch(
 
 <style>
 .page-builder {
-	--left-panel-width: 17rem;
-	--right-panel-width: 20rem;
 	--toolbar-height: 3rem;
 }
 </style>
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index b734a1b0b..4fd3b2236 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -45,6 +45,11 @@ const useBuilderStore = defineStore("builderStore", {
 			attribute: "data-theme",
 		}),
 	}),
+	getters: {
+		isAIEnabled(): boolean {
+			return !!builderSettings.doc?.ai_api_key;
+		},
+	},
 	actions: {
 		toggleReadOnlyMode(readonly: boolean | null = null) {
 			this.readOnlyMode = readonly ?? !this.readOnlyMode;
diff --git a/frontend/src/types/Builder/BuilderSettings.ts b/frontend/src/types/Builder/BuilderSettings.ts
index d692dbafd..c399b99c1 100644
--- a/frontend/src/types/Builder/BuilderSettings.ts
+++ b/frontend/src/types/Builder/BuilderSettings.ts
@@ -1,37 +1,38 @@
-
-export interface BuilderSettings{
-	creation: string
-	name: string
-	modified: string
-	owner: string
-	modified_by: string
-	docstatus: 0 | 1 | 2
-	parent?: string
-	parentfield?: string
-	parenttype?: string
-	idx?: number
+export interface BuilderSettings {
+	creation: string;
+	name: string;
+	modified: string;
+	owner: string;
+	modified_by: string;
+	docstatus: 0 | 1 | 2;
+	parent?: string;
+	parentfield?: string;
+	parenttype?: string;
+	idx?: number;
 	/**	Head HTML : Code - This will be appended at the end of the &lt;head&gt;	*/
-	head_html?: string
+	head_html?: string;
 	/**	Body HTML : Code - This will be appended at the end of the &lt;body&gt;	*/
-	body_html?: string
+	body_html?: string;
 	/**	Script : Code - Global script that will be loaded with every page built with Frappe Builder	*/
-	script?: string
+	script?: string;
 	/**	Script Public URL : Read Only	*/
-	script_public_url?: string
+	script_public_url?: string;
 	/**	Style : Code - Global style that will be loaded with every page built with Frappe Builder	*/
-	style?: string
+	style?: string;
 	/**	Style Public URL : Read Only	*/
-	style_public_url?: string
+	style_public_url?: string;
 	/**	Favicon : Attach Image - An icon file with .ico extension. Should be 16 x 16 px.<br>You can generate using <a href="https://favicon-generator.org" target="_blank">favicon-generator.org</a>	*/
-	favicon?: string
+	favicon?: string;
 	/**	Auto convert images to WebP : Check - All the images uploaded to Canvas will be auto converted to WebP for better page performance.	*/
-	auto_convert_images_to_webp?: 0 | 1
+	auto_convert_images_to_webp?: 0 | 1;
 	/**	Default Language : Data - Default language code for HTML lang attribute (e.g., en, es, fr, de)	*/
-	default_language?: string
+	default_language?: string;
 	/**	Home Page : Data	*/
-	home_page?: string,
+	home_page?: string;
 	/**	Execute Block Scripts in Editor : Check - Tries to best emulate how blocks will look like on the live site by executing Block Scripts.	*/
-	execute_block_scripts_in_editor?: "Don't Execute" | "Restricted" | "Unrestricted"
+	execute_block_scripts_in_editor?: "Don't Execute" | "Restricted" | "Unrestricted";
 	/**	Prevent Click Emulation : Check - Prevents click events from being emulated in the editor for blocks with Block Client Scripts.	*/
-	restrict_click_handlers?: 0 | 1
-}
\ No newline at end of file
+	restrict_click_handlers?: 0 | 1;
+	/**	AI API Key : Password - API key for the OpenRouter AI provider	*/
+	ai_api_key?: string;
+}
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 7efef8c03..5f12db6a6 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -490,17 +490,33 @@ async function uploadBuilderAsset(file: File, silent = false) {
 
 function dataURLtoFile(dataurl: string, filename: string) {
 	try {
-		let arr = dataurl.split(","),
-			mime = arr[0].match(/:(.*?);/)?.[1],
-			bstr = atob(arr[1]),
-			n = bstr.length,
+		let arr = dataurl.split(",");
+		let mimeMatch = arr[0].match(/:(.*?)(;|,)/);
+		let mime = mimeMatch ? mimeMatch[1] : "";
+		let isBase64 = arr[0].includes(";base64");
+
+		let dataString = arr.slice(1).join(",");
+		let u8arr;
+
+		if (isBase64) {
+			let bstr = atob(dataString);
+			let n = bstr.length;
 			u8arr = new Uint8Array(n);
-		while (n--) {
-			u8arr[n] = bstr.charCodeAt(n);
+			while (n--) {
+				u8arr[n] = bstr.charCodeAt(n);
+			}
+		} else {
+			let decoded = decodeURIComponent(dataString);
+			let n = decoded.length;
+			u8arr = new Uint8Array(n);
+			while (n--) {
+				u8arr[n] = decoded.charCodeAt(n);
+			}
 		}
+
 		return new File([u8arr], filename, { type: mime });
 	} catch (error) {
-		console.error(`Failed to convert dataURL ${dataurl} to file.`);
+		console.error(`Failed to convert dataURL ${dataurl.substring(0, 50)}... to file.`, error);
 		return null;
 	}
 }
diff --git a/pyproject.toml b/pyproject.toml
index 6b9c6ceb1..1c8607129 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -12,6 +12,7 @@ dependencies = [
     "csscompressor>=0.9.5",
     "pandas (>=2.3.2,<3.0.0)",
     "duckdb==1.4.3",
+    "litellm>=1.51.8",
 ]
 
 [project.urls]
diff --git a/yarn.lock b/yarn.lock
index 5d001d9f8..9b2e7bcb1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1445,6 +1445,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/js-yaml@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
+  integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -4407,6 +4412,13 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+js-yaml@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
+  integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -4562,7 +4574,7 @@ linkifyjs@^4.2.0, linkifyjs@^4.3.2:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
   integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
-lint-staged@>=10, lint-staged@^15.2.10:
+lint-staged@>=10:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.5.2.tgz#beff028fd0681f7db26ffbb67050a21ed4d059a3"
   integrity sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==

From 9b06b7cd81faaeda2247eca96ca19b99f4e9448f Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Tue, 7 Apr 2026 11:36:22 +0530
Subject: [PATCH 508/547] fix: changed type to string

---
 frontend/src/components/Controls/BasePropertyControl.vue  | 2 ++
 frontend/src/components/Controls/StylePropertyControl.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/BasePropertyControl.vue b/frontend/src/components/Controls/BasePropertyControl.vue
index 483802891..7ef021094 100644
--- a/frontend/src/components/Controls/BasePropertyControl.vue
+++ b/frontend/src/components/Controls/BasePropertyControl.vue
@@ -97,6 +97,8 @@ const emit = defineEmits<{
 	(clearDynamicValue: void): void;
 }>();
 
+defineOptions({ inheritance: false });
+
 const props = withDefaults(
 	defineProps<{
 		propertyKey: string;
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index cd3958718..25c473b3f 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -31,7 +31,7 @@ const props = withDefaults(
 		maxValue?: number | null;
 		component?: Component;
 		events?: Record<string, unknown>;
-		type?: "select";
+		type?: "string";
 		options?: Array<{ label: string; value: string | null }>;
 		defaultValue?: string | number;
 		allowDynamicValue?: boolean;

From e3ddc33de201c4511efd439552b8ed6b04f13df6 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Fri, 10 Apr 2026 13:02:35 +0530
Subject: [PATCH 509/547] fix: strict handler for numbers

---
 frontend/src/components/Controls/Autocomplete.vue |  6 +++---
 frontend/src/components/Controls/Input.vue        | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 70b5d1527..513974391 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -37,7 +37,7 @@
 
 			<div
 				v-if="hasNumber"
-				class="gap-0.1 pointer-events-none absolute right-6 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+				class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
 				<button
 					type="button"
 					class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
@@ -205,8 +205,8 @@ const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props
 
 const hasNumber = computed(() => {
 	if (!props.modelValue) return false;
-	const value = String(props.modelValue);
-	return /\d/.test(value);
+	const value = String(props.modelValue).trim();
+	return /^-?\d/.test(value); // must START with a digit (or minus+digit)
 });
 
 const incrementValue = () => {
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index f6b7fc72f..fa3389575 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -40,7 +40,7 @@
 
 		<div
 			v-if="hasNumber && !disabled"
-			class="gap-0.1 pointer-events-none absolute right-6 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+			class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
 			<button
 				type="button"
 				class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
@@ -111,8 +111,8 @@ const data = useVModel(props, "modelValue", emit);
 
 const hasNumber = computed(() => {
 	if (!data.value) return false;
-	const value = String(data.value);
-	return /\d/.test(value);
+	const value = String(data.value).trim();
+	return /^-?\d/.test(value); //
 });
 
 defineOptions({
@@ -145,8 +145,10 @@ const handleFocus = ($event: Event) => {
 const incrementValue = () => {
 	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
 	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
+	const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
+	const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
 	const currentNum = parseFloat(number) || 0;
-	const newNum = parseFloat((currentNum + step).toFixed(10));
+	const newNum = Math.min(max, parseFloat((currentNum + step).toFixed(10)));
 	const newValue = newNum + unit;
 	data.value = newValue;
 	emit("update:modelValue", newValue);
@@ -155,8 +157,10 @@ const incrementValue = () => {
 const decrementValue = () => {
 	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
 	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
+	const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
+	const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
 	const currentNum = parseFloat(number) || 0;
-	const newNum = parseFloat((currentNum - step).toFixed(10));
+	const newNum = Math.max(min, parseFloat((currentNum - step).toFixed(10)));
 	const newValue = newNum + unit;
 	data.value = newValue;
 	emit("update:modelValue", newValue);
@@ -173,5 +177,6 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
 	-moz-appearance: textfield !important;
 	appearance: textfield !important;
+	padding-right: 0.75rem !important;
 }
 </style>

From 4255de5b154a2a2f5c9c42264fe785ee191eaf98 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Sun, 12 Apr 2026 16:46:18 +0530
Subject: [PATCH 510/547] refactor: simiplified the code

---
 .../src/components/Controls/Autocomplete.vue  | 74 +++------------
 frontend/src/components/Controls/Input.vue    | 95 ++++---------------
 .../src/components/Controls/NumberArrows.vue  | 55 +++++++++++
 frontend/src/utils/useNumberInput.ts          | 37 ++++++++
 4 files changed, 124 insertions(+), 137 deletions(-)
 create mode 100644 frontend/src/components/Controls/NumberArrows.vue
 create mode 100644 frontend/src/utils/useNumberInput.ts

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 513974391..2778e5281 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -35,50 +35,11 @@
 				</Button>
 			</div>
 
-			<div
-				v-if="hasNumber"
-				class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-				<button
-					type="button"
-					class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
-					@click.stop="incrementValue"
-					@mousedown.prevent
-					tabindex="-1">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="12"
-						height="12"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						class="text-ink-gray-6">
-						<polyline points="18 15 12 9 6 15"></polyline>
-					</svg>
-				</button>
-				<button
-					type="button"
-					class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
-					@click.stop="decrementValue"
-					@mousedown.prevent
-					tabindex="-1">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="12"
-						height="12"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						class="text-ink-gray-6">
-						<polyline points="6 9 12 15 18 9"></polyline>
-					</svg>
-				</button>
-			</div>
+			<NumberArrows
+				:modelValue="hasNumber"
+				:disabled="disabled"
+				@increment="incrementValue"
+				@decrement="decrementValue" />
 
 			<Teleport to="body" :disabled="!referenceElementSelector">
 				<ComboboxContent
@@ -152,7 +113,8 @@ import {
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
 import { computed, nextTick, ref, watch } from "vue";
-import { extractNumberAndUnit } from "@/utils/helpers";
+import { useNumberInput } from "@/utils/useNumberInput";
+import NumberArrows from "@/components/Controls/NumberArrows.vue";
 
 interface Option {
 	label: string;
@@ -178,6 +140,7 @@ interface Props {
 	actionButton?: ActionButton;
 	referenceElementSelector?: string;
 	allowArbitraryValue?: boolean;
+	disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -203,26 +166,11 @@ const contentRef = ref<ComponentPublicInstance | null>(null);
 const fixedPositionStyles = ref({});
 const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
-const hasNumber = computed(() => {
-	if (!props.modelValue) return false;
-	const value = String(props.modelValue).trim();
-	return /^-?\d/.test(value); // must START with a digit (or minus+digit)
+const { hasNumber, incrementValue, decrementValue } = useNumberInput({
+	getValue: () => props.modelValue,
+	setValue: (v) => emit("update:modelValue", v),
 });
 
-const incrementValue = () => {
-	const { number, unit } = extractNumberAndUnit(String(props.modelValue || ""));
-	const currentNum = parseFloat(number) || 0;
-	const newNum = parseFloat((currentNum + 1).toFixed(10));
-	emit("update:modelValue", newNum + unit);
-};
-
-const decrementValue = () => {
-	const { number, unit } = extractNumberAndUnit(String(props.modelValue || ""));
-	const currentNum = parseFloat(number) || 0;
-	const newNum = parseFloat((currentNum - 1).toFixed(10));
-	emit("update:modelValue", newNum + unit);
-};
-
 const displayOptions = computed(() => {
 	let options = allOptions.value;
 	if (
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index fa3389575..49cd0a11b 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -38,50 +38,11 @@
 			</template>
 		</FormControl>
 
-		<div
-			v-if="hasNumber && !disabled"
-			class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-			<button
-				type="button"
-				class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
-				@click.stop="incrementValue"
-				@mousedown.prevent
-				tabindex="-1">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="12"
-					height="12"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="text-ink-gray-6">
-					<polyline points="18 15 12 9 6 15"></polyline>
-				</svg>
-			</button>
-			<button
-				type="button"
-				class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
-				@click.stop="decrementValue"
-				@mousedown.prevent
-				tabindex="-1">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="12"
-					height="12"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="text-ink-gray-6">
-					<polyline points="6 9 12 15 18 9"></polyline>
-				</svg>
-			</button>
-		</div>
+		<NumberArrows
+			:modelValue="hasNumber"
+			:disabled="disabled"
+			@increment="incrementValue"
+			@decrement="decrementValue" />
 	</div>
 </template>
 <script lang="ts" setup>
@@ -89,7 +50,8 @@ import CrossIcon from "@/components/Icons/Cross.vue";
 import { useDebounceFn, useVModel } from "@vueuse/core";
 import { Select } from "frappe-ui";
 import { computed, useAttrs } from "vue";
-import { extractNumberAndUnit } from "@/utils/helpers";
+import { useNumberInput } from "@/utils/useNumberInput";
+import NumberArrows from "@/components/Controls/NumberArrows.vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -109,11 +71,11 @@ const props = withDefaults(
 const emit = defineEmits(["update:modelValue", "input"]);
 const data = useVModel(props, "modelValue", emit);
 
-const hasNumber = computed(() => {
-	if (!data.value) return false;
-	const value = String(data.value).trim();
-	return /^-?\d/.test(value); //
-});
+interface UseNumberInputOptions {
+	getValue: () => string | number | boolean | null | undefined;
+	setValue: (value: string) => void;
+	getAttrs?: () => Record<string, unknown>;
+}
 
 defineOptions({
 	inheritAttrs: false,
@@ -121,6 +83,15 @@ defineOptions({
 
 const attrs = useAttrs();
 
+const { hasNumber, incrementValue, decrementValue } = useNumberInput({
+	getValue: () => data.value,
+	setValue: (v) => {
+		data.value = v;
+		emit("update:modelValue", v);
+	},
+	getAttrs: () => attrs,
+});
+
 const clearValue = () => {
 	data.value = "";
 };
@@ -141,30 +112,6 @@ const handleFocus = ($event: Event) => {
 		}, 0);
 	}
 };
-
-const incrementValue = () => {
-	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
-	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
-	const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
-	const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
-	const currentNum = parseFloat(number) || 0;
-	const newNum = Math.min(max, parseFloat((currentNum + step).toFixed(10)));
-	const newValue = newNum + unit;
-	data.value = newValue;
-	emit("update:modelValue", newValue);
-};
-
-const decrementValue = () => {
-	const { number, unit } = extractNumberAndUnit(String(data.value || ""));
-	const step = props.type === "number" && attrs.step ? parseFloat(String(attrs.step)) : 1;
-	const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
-	const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
-	const currentNum = parseFloat(number) || 0;
-	const newNum = Math.max(min, parseFloat((currentNum - step).toFixed(10)));
-	const newValue = newNum + unit;
-	data.value = newValue;
-	emit("update:modelValue", newValue);
-};
 </script>
 
 <style>
diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
new file mode 100644
index 000000000..0699bb228
--- /dev/null
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -0,0 +1,55 @@
+<template>
+	<div
+		v-if="modelValue && !disabled"
+		class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+		<button
+			type="button"
+			class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
+			@click.stop="$emit('increment')"
+			@mousedown.prevent
+			tabindex="-1">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="text-ink-gray-6">
+				<polyline points="18 15 12 9 6 15"></polyline>
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
+			@click.stop="$emit('decrement')"
+			@mousedown.prevent
+			tabindex="-1">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="text-ink-gray-6">
+				<polyline points="6 9 12 15 18 9"></polyline>
+			</svg>
+		</button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	modelValue: boolean; // this is hasNumber
+	disabled?: boolean;
+}>();
+
+defineEmits(["increment", "decrement"]);
+</script>
diff --git a/frontend/src/utils/useNumberInput.ts b/frontend/src/utils/useNumberInput.ts
new file mode 100644
index 000000000..62cb21362
--- /dev/null
+++ b/frontend/src/utils/useNumberInput.ts
@@ -0,0 +1,37 @@
+import { computed } from "vue";
+import { extractNumberAndUnit } from "@/utils/helpers";
+
+interface UseNumberInputOptions {
+    getValue: () => string | number | boolean | null | undefined;
+    setValue: (value: string) => void;
+    getAttrs?: () => Record<string, unknown>;
+}
+
+export function useNumberInput({ getValue, setValue, getAttrs }: UseNumberInputOptions) {
+    const hasNumber = computed(() => {
+        const value = String(getValue() ?? "").trim();
+        return /^-?\d/.test(value);
+    });
+
+    const incrementValue = () => {
+        const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
+        const attrs = getAttrs?.() ?? {};
+        const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
+        const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
+        const currentNum = parseFloat(number) || 0;
+        const newNum = Math.min(max, parseFloat((currentNum + step).toFixed(10)));
+        setValue(newNum + unit);
+    };
+
+    const decrementValue = () => {
+        const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
+        const attrs = getAttrs?.() ?? {};
+        const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
+        const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
+        const currentNum = parseFloat(number) || 0;
+        const newNum = Math.max(min, parseFloat((currentNum - step).toFixed(10)));
+        setValue(newNum + unit);
+    };
+
+    return { hasNumber, incrementValue, decrementValue };
+}
\ No newline at end of file

From 9446d97eaf4c91b3428e463ab6234e17fabb7113 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Mon, 13 Apr 2026 21:30:23 +0530
Subject: [PATCH 511/547] fix: added step for weight and height

---
 frontend/components.d.ts                      |  1 +
 .../TypographySection.ts                      |  6 +++
 .../src/components/Controls/Autocomplete.vue  |  5 +-
 .../src/components/Controls/NumberArrows.vue  |  2 +-
 frontend/src/utils/useNumberInput.ts          | 52 +++++++++----------
 5 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 9d95a9343..dc9f2f364 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -96,6 +96,7 @@ declare module 'vue' {
     NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
     NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']
     NewFolder: typeof import('./src/components/Modals/NewFolder.vue')['default']
+    NumberArrows: typeof import('./src/components/Controls/NumberArrows.vue')['default']
     NumberOptions: typeof import('./src/components/PropsOptions/NumberOptions.vue')['default']
     ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
     ObjectInput: typeof import('./src/components/ObjectInput.vue')['default']
diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 3ccb6be3f..b44a141f4 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -7,6 +7,7 @@ import userFonts from "@/data/userFonts";
 import { UserFont } from "@/types/Builder/UserFont";
 import blockController from "@/utils/blockController";
 import { setFont as _setFont, fontList, getFontWeightOptions } from "@/utils/fontManager";
+import { set } from "@vueuse/core";
 
 const setFont = (font: string) => {
 	_setFont(font, null).then(() => {
@@ -96,6 +97,9 @@ const typographySectionProperties = [
 				propertyKey: "fontWeight",
 				component: Autocomplete,
 				options: getFontWeightOptions((blockController.getStyle("fontFamily") || "Inter") as string),
+				step: 100,
+				min: 100,
+				max: 900,
 			};
 		},
 		searchKeyWords: "Font, Weight, FontWeight",
@@ -120,6 +124,7 @@ const typographySectionProperties = [
 			return {
 				label: "Height",
 				propertyKey: "lineHeight",
+				step: 0.1,
 			};
 		},
 		searchKeyWords: "Font, Height, LineHeight, Line Height",
@@ -131,6 +136,7 @@ const typographySectionProperties = [
 			return {
 				label: "Letter",
 				propertyKey: "letterSpacing",
+				step: 0.1,
 			};
 		},
 		searchKeyWords: "Font, Letter, LetterSpacing, Letter Spacing",
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 2778e5281..17b12893f 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -112,7 +112,7 @@ import {
 	ComboboxSeparator,
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, useAttrs, ref, watch } from "vue";
 import { useNumberInput } from "@/utils/useNumberInput";
 import NumberArrows from "@/components/Controls/NumberArrows.vue";
 
@@ -166,9 +166,12 @@ const contentRef = ref<ComponentPublicInstance | null>(null);
 const fixedPositionStyles = ref({});
 const allOptions = computed(() => (props.getOptions ? asyncOptions.value : props.options));
 
+const attrs = useAttrs();
+
 const { hasNumber, incrementValue, decrementValue } = useNumberInput({
 	getValue: () => props.modelValue,
 	setValue: (v) => emit("update:modelValue", v),
+	getAttrs: () => attrs,
 });
 
 const displayOptions = computed(() => {
diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
index 0699bb228..be075ce51 100644
--- a/frontend/src/components/Controls/NumberArrows.vue
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="modelValue && !disabled"
-		class="gap-0.1 pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+		class="pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col gap-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
 		<button
 			type="button"
 			class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
diff --git a/frontend/src/utils/useNumberInput.ts b/frontend/src/utils/useNumberInput.ts
index 62cb21362..8df642ee4 100644
--- a/frontend/src/utils/useNumberInput.ts
+++ b/frontend/src/utils/useNumberInput.ts
@@ -2,36 +2,36 @@ import { computed } from "vue";
 import { extractNumberAndUnit } from "@/utils/helpers";
 
 interface UseNumberInputOptions {
-    getValue: () => string | number | boolean | null | undefined;
-    setValue: (value: string) => void;
-    getAttrs?: () => Record<string, unknown>;
+	getValue: () => string | number | boolean | null | undefined;
+	setValue: (value: string) => void;
+	getAttrs?: () => Record<string, unknown>;
 }
 
 export function useNumberInput({ getValue, setValue, getAttrs }: UseNumberInputOptions) {
-    const hasNumber = computed(() => {
-        const value = String(getValue() ?? "").trim();
-        return /^-?\d/.test(value);
-    });
+	const hasNumber = computed(() => {
+		const value = String(getValue() ?? "").trim();
+		return /^-?\d/.test(value);
+	});
 
-    const incrementValue = () => {
-        const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
-        const attrs = getAttrs?.() ?? {};
-        const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
-        const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
-        const currentNum = parseFloat(number) || 0;
-        const newNum = Math.min(max, parseFloat((currentNum + step).toFixed(10)));
-        setValue(newNum + unit);
-    };
+	const incrementValue = () => {
+		const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
+		const attrs = getAttrs?.() ?? {};
+		const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
+		const max = attrs.max !== undefined ? parseFloat(String(attrs.max)) : Infinity;
+		const currentNum = parseFloat(number) || 0;
+		const newNum = Math.min(max, parseFloat((currentNum + step).toFixed(10)));
+		setValue(newNum + unit);
+	};
 
-    const decrementValue = () => {
-        const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
-        const attrs = getAttrs?.() ?? {};
-        const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
-        const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
-        const currentNum = parseFloat(number) || 0;
-        const newNum = Math.max(min, parseFloat((currentNum - step).toFixed(10)));
-        setValue(newNum + unit);
-    };
+	const decrementValue = () => {
+		const { number, unit } = extractNumberAndUnit(String(getValue() || ""));
+		const attrs = getAttrs?.() ?? {};
+		const step = attrs.step ? parseFloat(String(attrs.step)) : 1;
+		const min = attrs.min !== undefined ? parseFloat(String(attrs.min)) : -Infinity;
+		const currentNum = parseFloat(number) || 0;
+		const newNum = Math.max(min, parseFloat((currentNum - step).toFixed(10)));
+		setValue(newNum + unit);
+	};
 
-    return { hasNumber, incrementValue, decrementValue };
+	return { hasNumber, incrementValue, decrementValue };
 }
\ No newline at end of file

From 842a6ca4ea55da6e444b68c0eadecfcf0a3c7404 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Tue, 14 Apr 2026 17:32:26 +0530
Subject: [PATCH 512/547] fix: reduced gap and edited steps for number arrows
 in input controls

---
 .../src/components/Controls/Autocomplete.vue  | 33 ++++++++++++++-----
 .../src/components/Controls/InlineInput.vue   |  6 +++-
 frontend/src/components/Controls/Input.vue    | 29 ++++++++--------
 .../src/components/Controls/NumberArrows.vue  | 20 +++++++----
 4 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 17b12893f..08a697ca9 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -30,16 +30,24 @@
 						'pl-2': !$slots.prefix,
 						'pr-2': !hasValue,
 					}" />
-				<Button v-if="hasValue" variant="ghost" @click.stop="clearSelection" class="-ml-2">
-					<CrossIcon class="h-3 w-3" />
-				</Button>
-			</div>
+				<div class="flex items-center gap-0">
+					<NumberArrows
+						v-if="hasNumber && isStrictNumber"
+						class="ml-1"
+						:modelValue="hasNumber"
+						@increment="incrementValue"
+						@decrement="decrementValue" />
 
-			<NumberArrows
-				:modelValue="hasNumber"
-				:disabled="disabled"
-				@increment="incrementValue"
-				@decrement="decrementValue" />
+					<button
+						v-if="hasValue"
+						class="mr-2 flex-shrink-0 cursor-pointer text-ink-gray-4 hover:text-ink-gray-5"
+						tabindex="-1"
+						@click.stop="clearSelection"
+						@mousedown.prevent>
+						<CrossIcon />
+					</button>
+				</div>
+			</div>
 
 			<Teleport to="body" :disabled="!referenceElementSelector">
 				<ComboboxContent
@@ -174,6 +182,13 @@ const { hasNumber, incrementValue, decrementValue } = useNumberInput({
 	getAttrs: () => attrs,
 });
 
+const isStrictNumber = computed(() => {
+	if (typeof props.modelValue !== "string") return false;
+	const nonNumericValues = allOptions.value.map((opt) => opt.value);
+	if (nonNumericValues.includes(props.modelValue)) return false;
+	return /^\d*\.?\d+(px|%|em|rem)?$/.test(props.modelValue.trim());
+});
+
 const displayOptions = computed(() => {
 	let options = allOptions.value;
 	if (
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 528a94960..f3469b3e2 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -1,5 +1,9 @@
 <template>
-	<div class="flex items-center justify-between gap-2 [&>div>input]:pr-6">
+	<div
+		class="flex items-center justify-between gap-2"
+		:class="{
+			'[&>div>input]:pr-6': !hideClearButton,
+		}">
 		<InputLabel
 			v-if="label"
 			:class="{
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 49cd0a11b..a45436eee 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -22,27 +22,24 @@
 			<template #prefix v-if="$slots.prefix">
 				<slot name="prefix" />
 			</template>
-			<template #suffix v-if="$slots.suffix">
-				<slot name="suffix" />
-			</template>
-			<template
-				#suffix
-				v-else-if="!['select', 'checkbox'].includes(type) && !hideClearButton && data && !disabled">
+			<template #suffix>
+				<NumberArrows
+					:modelValue="hasNumber"
+					v-if="!disabled && hasNumber && isStrictNumber"
+					@increment="incrementValue"
+					@decrement="decrementValue" />
+
+				<slot v-if="$slots.suffix" name="suffix" />
+
 				<button
+					v-if="!['select', 'checkbox'].includes(type) && !hideClearButton && data && !disabled"
 					class="cursor-pointer text-ink-gray-4 hover:text-ink-gray-5"
 					tabindex="-1"
-					:disabled="Boolean(attrs.disabled)"
 					@click="clearValue">
 					<CrossIcon />
 				</button>
 			</template>
 		</FormControl>
-
-		<NumberArrows
-			:modelValue="hasNumber"
-			:disabled="disabled"
-			@increment="incrementValue"
-			@decrement="decrementValue" />
 	</div>
 </template>
 <script lang="ts" setup>
@@ -77,6 +74,12 @@ interface UseNumberInputOptions {
 	getAttrs?: () => Record<string, unknown>;
 }
 
+const isStrictNumber = computed(() => {
+	if (typeof data.value !== "string") return false;
+
+	return /^\d*\.?\d+(px|%|em|rem)?$/.test(data.value.trim());
+});
+
 defineOptions({
 	inheritAttrs: false,
 });
diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
index be075ce51..42f7dd9a7 100644
--- a/frontend/src/components/Controls/NumberArrows.vue
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -1,10 +1,10 @@
 <template>
 	<div
-		v-if="modelValue && !disabled"
-		class="pointer-events-none absolute right-5 top-1/2 z-10 flex -translate-y-1/2 flex-col gap-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+		v-if="modelValue"
+		class="pointer-events-none flex flex-col gap-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
 		<button
 			type="button"
-			class="duration-250 flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
+			class="circle-cursor duration-250 -mb-[1.5px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
 			@click.stop="$emit('increment')"
 			@mousedown.prevent
 			tabindex="-1">
@@ -24,7 +24,7 @@
 		</button>
 		<button
 			type="button"
-			class="duration-250 -mt-[2px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
+			class="circle-cursor duration-250 -mt-[1.5px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
 			@click.stop="$emit('decrement')"
 			@mousedown.prevent
 			tabindex="-1">
@@ -47,9 +47,17 @@
 
 <script lang="ts" setup>
 defineProps<{
-	modelValue: boolean; // this is hasNumber
-	disabled?: boolean;
+	modelValue: boolean;
 }>();
 
 defineEmits(["increment", "decrement"]);
 </script>
+
+<style scoped>
+.circle-cursor {
+	cursor:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='gray' stroke-width='1.5'/%3E%3C/svg%3E")
+			6 6,
+		auto;
+}
+</style>

From 3fe3cd2f702fc1eebdc2f9830c09165f3e0087e4 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Tue, 14 Apr 2026 23:58:58 +0530
Subject: [PATCH 513/547] fix:changed the pointer to circle on hover

---
 frontend/src/components/BuilderBlock.vue      | 35 ++++++++++++-------
 .../src/components/Controls/NumberArrows.vue  |  4 +--
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3d0505b12..df765ac7b 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -381,22 +381,31 @@ const allResolvedProps = computed(() => {
 	if (!isMounted.value) {
 		return {};
 	}
-	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
-		acc[key] = value.value;
-		return acc;
-	}, {} as Record<string, any>);
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce(
+		(acc, [key, value]) => {
+			acc[key] = value.value;
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	const blockProps = Object.entries({
 		...props.block.getBlockProps(),
-	}).reduce((acc, [key]) => {
-		acc[key] = getPropValue(key, props.block, uidToUse);
-		return acc;
-	}, {} as Record<string, any>);
-
-	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce((acc, [key, value]) => {
-		acc[key] = getPropValue(key, value.block!, value.blockUid);
-		return acc;
-	}, {} as Record<string, any>);
+	}).reduce(
+		(acc, [key]) => {
+			acc[key] = getPropValue(key, props.block, uidToUse);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
+
+	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce(
+		(acc, [key, value]) => {
+			acc[key] = getPropValue(key, value.block!, value.blockUid);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	return {
 		...parentProps,
diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
index 42f7dd9a7..d6a9e0c25 100644
--- a/frontend/src/components/Controls/NumberArrows.vue
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -56,8 +56,8 @@ defineEmits(["increment", "decrement"]);
 <style scoped>
 .circle-cursor {
 	cursor:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='gray' stroke-width='1.5'/%3E%3C/svg%3E")
-			6 6,
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='gray' fill-opacity='0.7' stroke='none'/%3E%3C/svg%3E")
+			7 7,
 		auto;
 }
 </style>

From 985a2ac21265e1e78410225ba9c1d5d3b13cef5e Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 16 Apr 2026 22:10:25 +0530
Subject: [PATCH 514/547] fix(BuilderBlock): Handle attributes with trailing
 spaces

---
 frontend/src/components/BuilderBlock.vue | 51 +++++++++++++++---------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3d0505b12..d73961072 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -41,8 +41,12 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
+import fetchBlockData from "@/data/blockData";
+import { builderSettings } from "@/data/builderSettings";
+import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
+import usePageStore from "@/stores/pageStore";
 import { setFont } from "@/utils/fontManager";
 import {
 	executeBlockClientScriptRestricted,
@@ -64,15 +68,11 @@ import {
 	watch,
 	watchEffect,
 } from "vue";
+import { toast } from "vue-sonner";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
-import { builderSettings } from "@/data/builderSettings";
-import fetchBlockData from "@/data/blockData";
-import usePageStore from "@/stores/pageStore";
-import { toast } from "vue-sonner";
-import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 
 const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
@@ -181,7 +181,11 @@ const attributes = computed(() => {
 	}
 
 	Object.keys(additionalAttributes).forEach((key) => {
-		if (RESTRICTED_ATTRIBS.includes(key)) {
+		const trimmedKey = key.trim();
+		if (RESTRICTED_ATTRIBS.includes(trimmedKey) || trimmedKey === "") {
+			delete additionalAttributes[key];
+		} else if (trimmedKey !== key) {
+			additionalAttributes[trimmedKey] = additionalAttributes[key];
 			delete additionalAttributes[key];
 		}
 	});
@@ -381,22 +385,31 @@ const allResolvedProps = computed(() => {
 	if (!isMounted.value) {
 		return {};
 	}
-	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
-		acc[key] = value.value;
-		return acc;
-	}, {} as Record<string, any>);
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce(
+		(acc, [key, value]) => {
+			acc[key] = value.value;
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	const blockProps = Object.entries({
 		...props.block.getBlockProps(),
-	}).reduce((acc, [key]) => {
-		acc[key] = getPropValue(key, props.block, uidToUse);
-		return acc;
-	}, {} as Record<string, any>);
-
-	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce((acc, [key, value]) => {
-		acc[key] = getPropValue(key, value.block!, value.blockUid);
-		return acc;
-	}, {} as Record<string, any>);
+	}).reduce(
+		(acc, [key]) => {
+			acc[key] = getPropValue(key, props.block, uidToUse);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
+
+	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce(
+		(acc, [key, value]) => {
+			acc[key] = getPropValue(key, value.block!, value.blockUid);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	return {
 		...parentProps,

From e024f160f111d0184eab2fc0b8755a956ef713b4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 17 Apr 2026 09:49:24 +0530
Subject: [PATCH 515/547] style: Fix import sorting

---
 .../components/BlockPropertySections/TypographySection.ts   | 1 -
 frontend/src/components/Controls/Autocomplete.vue           | 6 +++---
 frontend/src/components/Controls/Input.vue                  | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index b44a141f4..1d7defff0 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -7,7 +7,6 @@ import userFonts from "@/data/userFonts";
 import { UserFont } from "@/types/Builder/UserFont";
 import blockController from "@/utils/blockController";
 import { setFont as _setFont, fontList, getFontWeightOptions } from "@/utils/fontManager";
-import { set } from "@vueuse/core";
 
 const setFont = (font: string) => {
 	_setFont(font, null).then(() => {
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 08a697ca9..d513e5d10 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -110,7 +110,9 @@
 
 <script setup lang="ts">
 import BuilderButton from "@/components/Controls/BuilderButton.vue";
+import NumberArrows from "@/components/Controls/NumberArrows.vue";
 import CrossIcon from "@/components/Icons/Cross.vue";
+import { useNumberInput } from "@/utils/useNumberInput";
 import {
 	ComboboxContent,
 	ComboboxInput,
@@ -120,9 +122,7 @@ import {
 	ComboboxSeparator,
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
-import { computed, nextTick, useAttrs, ref, watch } from "vue";
-import { useNumberInput } from "@/utils/useNumberInput";
-import NumberArrows from "@/components/Controls/NumberArrows.vue";
+import { computed, nextTick, ref, useAttrs, watch } from "vue";
 
 interface Option {
 	label: string;
diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index a45436eee..8337db611 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -43,12 +43,12 @@
 	</div>
 </template>
 <script lang="ts" setup>
+import NumberArrows from "@/components/Controls/NumberArrows.vue";
 import CrossIcon from "@/components/Icons/Cross.vue";
+import { useNumberInput } from "@/utils/useNumberInput";
 import { useDebounceFn, useVModel } from "@vueuse/core";
 import { Select } from "frappe-ui";
 import { computed, useAttrs } from "vue";
-import { useNumberInput } from "@/utils/useNumberInput";
-import NumberArrows from "@/components/Controls/NumberArrows.vue";
 
 const props = withDefaults(
 	defineProps<{

From fb5922397f496b25cb070065b3a5af0eb566f683 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 17 Apr 2026 09:53:05 +0530
Subject: [PATCH 516/547] fix: Click-and-hold to increment or decrement

- fix color style of arrows on click
- Change opacity of disc so that arrow is visible under it
---
 .../src/components/Controls/NumberArrows.vue  | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
index d6a9e0c25..694f0bc2b 100644
--- a/frontend/src/components/Controls/NumberArrows.vue
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -4,9 +4,10 @@
 		class="pointer-events-none flex flex-col gap-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
 		<button
 			type="button"
-			class="circle-cursor duration-250 -mb-[1.5px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:-translate-y-[2px]"
-			@click.stop="$emit('increment')"
-			@mousedown.prevent
+			class="circle-cursor duration-250 -mb-[1.5px] flex h-3 w-5 items-center justify-center rounded text-ink-gray-5 transition-all ease-in-out active:-translate-y-[2px] active:text-ink-gray-9"
+			@mousedown.prevent.stop="startHold('increment')"
+			@mouseup="stopHold"
+			@mouseleave="stopHold"
 			tabindex="-1">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -17,16 +18,16 @@
 				stroke="currentColor"
 				stroke-width="2"
 				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="text-ink-gray-6">
+				stroke-linejoin="round">
 				<polyline points="18 15 12 9 6 15"></polyline>
 			</svg>
 		</button>
 		<button
 			type="button"
-			class="circle-cursor duration-250 -mt-[1.5px] flex h-3 w-5 items-center justify-center rounded transition-all ease-in-out active:translate-y-[2px]"
-			@click.stop="$emit('decrement')"
-			@mousedown.prevent
+			class="circle-cursor duration-250 -mt-[1.5px] flex h-3 w-5 items-center justify-center rounded text-ink-gray-5 transition-all ease-in-out active:translate-y-[2px] active:text-ink-gray-9"
+			@mousedown.prevent.stop="startHold('decrement')"
+			@mouseup="stopHold"
+			@mouseleave="stopHold"
 			tabindex="-1">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -37,8 +38,7 @@
 				stroke="currentColor"
 				stroke-width="2"
 				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="text-ink-gray-6">
+				stroke-linejoin="round">
 				<polyline points="6 9 12 15 18 9"></polyline>
 			</svg>
 		</button>
@@ -50,13 +50,36 @@ defineProps<{
 	modelValue: boolean;
 }>();
 
-defineEmits(["increment", "decrement"]);
+const emit = defineEmits(["increment", "decrement"]);
+
+let holdTimeout: ReturnType<typeof setTimeout> | null = null;
+let holdInterval: ReturnType<typeof setInterval> | null = null;
+
+function startHold(direction: "increment" | "decrement") {
+	emit(direction);
+	holdTimeout = setTimeout(() => {
+		holdInterval = setInterval(() => {
+			emit(direction);
+		}, 50);
+	}, 400);
+}
+
+function stopHold() {
+	if (holdTimeout) {
+		clearTimeout(holdTimeout);
+		holdTimeout = null;
+	}
+	if (holdInterval) {
+		clearInterval(holdInterval);
+		holdInterval = null;
+	}
+}
 </script>
 
 <style scoped>
 .circle-cursor {
 	cursor:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='gray' fill-opacity='0.7' stroke='none'/%3E%3C/svg%3E")
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='gray' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E")
 			7 7,
 		auto;
 }

From 308b0d501b295f431db635aa948efc3ea9377935 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 17 Apr 2026 15:04:50 +0530
Subject: [PATCH 517/547] feat: Option to set custom domain right from the
 in-app settings is Builder is installed in FC

---
 builder/domain.py                             | 187 ++++++++++++++++
 frontend/components.d.ts                      |   1 +
 frontend/src/components/BuilderSettings.vue   |  16 ++
 .../src/components/Settings/GlobalDomains.vue | 202 ++++++++++++++++++
 frontend/src/data/domains.ts                  | 102 +++++++++
 5 files changed, 508 insertions(+)
 create mode 100644 builder/domain.py
 create mode 100644 frontend/src/components/Settings/GlobalDomains.vue
 create mode 100644 frontend/src/data/domains.ts

diff --git a/builder/domain.py b/builder/domain.py
new file mode 100644
index 000000000..048c1e824
--- /dev/null
+++ b/builder/domain.py
@@ -0,0 +1,187 @@
+import re
+
+import frappe
+
+
+def dev_validate_domain(domain: str) -> str:
+	"""Normalise and validate; raises ValidationError for malformed input."""
+	domain = (domain or "").strip().lower()
+
+	if not domain or "." not in domain or domain.startswith(".") or domain.endswith(".") or ".." in domain:
+		frappe.throw(
+			"Invalid domain format. Enter a fully qualified domain like www.example.com or example.com."
+		)
+
+	labels = domain.split(".")
+	if len(labels[-1]) < 2 or any(
+		not label
+		or len(label) > 63
+		or label.startswith("-")
+		or label.endswith("-")
+		or not re.match(r"^[a-z0-9-]+$", label)
+		for label in labels
+	):
+		frappe.throw(
+			"Invalid domain format. Enter a fully qualified domain like www.example.com or example.com."
+		)
+
+	return domain
+
+
+def dev_load_domains() -> list:
+	domains = frappe.cache().get_value("builder_site_domains")
+	if domains is None:
+		domains = [
+			{
+				"name": frappe.local.site,
+				"domain": frappe.local.site,
+				"status": "Active",
+				"retry_count": 0,
+				"redirect_to_primary": 0,
+				"primary": True,
+			}
+		]
+		frappe.cache().set_value("builder_site_domains", domains)
+	return domains
+
+
+def dev_save_domains(domains: list) -> None:
+	frappe.cache().set_value("builder_site_domains", domains)
+
+
+# ─── Frappe Cloud proxy ───────────────────────────────────────────────────────
+
+
+def fc_call(method: str, **params):
+	"""Proxy to press.api.developer.domain.{method} on Frappe Cloud."""
+	import requests
+	from frappe.integrations.frappe_providers.frappecloud_billing import get_base_url
+
+	secret_key = frappe.conf.get("fc_subscription_secret_key")
+	if not secret_key:
+		frappe.throw(
+			frappe._(
+				"Frappe Cloud subscription secret key is not configured."
+				" Set fc_subscription_secret_key in site_config.json."
+			)
+		)
+
+	url = f"{get_base_url()}/api/method/press.api.developer.domain.{method}"
+	response = requests.post(url, data={"secret_key": secret_key, **params})
+
+	if response.status_code != 200:
+		error = response.json().get("exception") or f"FC API returned {response.status_code}"
+		frappe.throw(error)
+
+	return response.json().get("message")
+
+
+@frappe.whitelist()
+def get_server_ip() -> str | None:
+	if frappe.conf.developer_mode:
+		ip = frappe.cache().get_value("builder_site_server_ip")
+		if ip is None:
+			ip = "192.0.2.1"
+			frappe.cache().set_value("builder_site_server_ip", ip)
+		return ip
+	return fc_call("get_server_ip")
+
+
+@frappe.whitelist()
+def get_domains() -> list:
+	if frappe.conf.developer_mode:
+		return dev_load_domains()
+	return fc_call("get_domains")
+
+
+@frappe.whitelist()
+def check_dns(domain: str) -> dict:
+	if frappe.conf.developer_mode:
+		domain = dev_validate_domain(domain)
+		matched = domain == frappe.local.site or domain.endswith(f".{frappe.local.site}")
+		return {
+			"matched": matched,
+			"type": "CNAME",
+			"CNAME": {"matched": matched, "answer": frappe.local.site if matched else None},
+			"A": {"matched": False, "answer": None},
+		}
+	return fc_call("check_dns", domain=domain)
+
+
+@frappe.whitelist()
+def add_domain(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		domains = dev_load_domains()
+		if not any(d["domain"] == domain for d in domains):
+			domains.append(
+				{
+					"name": domain,
+					"domain": domain,
+					"status": "Active",
+					"retry_count": 0,
+					"redirect_to_primary": 0,
+					"primary": False,
+				}
+			)
+			dev_save_domains(domains)
+		return "ok"
+	return fc_call("add_domain", domain=domain)
+
+
+@frappe.whitelist()
+def remove_domain(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		dev_save_domains([d for d in dev_load_domains() if d["domain"] != domain])
+		return "ok"
+	return fc_call("remove_domain", domain=domain)
+
+
+@frappe.whitelist()
+def retry_add_domain(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		domains = dev_load_domains()
+		for d in domains:
+			if d["domain"] == domain:
+				d["status"] = "Active"
+				d["retry_count"] = d.get("retry_count", 0) + 1
+				break
+		dev_save_domains(domains)
+		return "ok"
+	return fc_call("retry_add_domain", domain=domain)
+
+
+@frappe.whitelist()
+def set_host_name(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		domains = dev_load_domains()
+		for d in domains:
+			d["primary"] = d["domain"] == domain
+		dev_save_domains(domains)
+		return "ok"
+	return fc_call("set_host_name", domain=domain)
+
+
+@frappe.whitelist()
+def set_redirect(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		domains = dev_load_domains()
+		for d in domains:
+			if d["domain"] == domain:
+				d["redirect_to_primary"] = 1
+				break
+		dev_save_domains(domains)
+		return "ok"
+	return fc_call("set_redirect", domain=domain)
+
+
+@frappe.whitelist()
+def unset_redirect(domain: str) -> str:
+	if frappe.conf.developer_mode:
+		domains = dev_load_domains()
+		for d in domains:
+			if d["domain"] == domain:
+				d["redirect_to_primary"] = 0
+				break
+		dev_save_domains(domains)
+		return "ok"
+	return fc_call("unset_redirect", domain=domain)
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 6ac05fa5c..1c0165cf9 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -76,6 +76,7 @@ declare module 'vue' {
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
     GlobalDeveloper: typeof import('./src/components/Settings/GlobalDeveloper.vue')['default']
+    GlobalDomains: typeof import('./src/components/Settings/GlobalDomains.vue')['default']
     GlobalGeneral: typeof import('./src/components/Settings/GlobalGeneral.vue')['default']
     GlobalMeta: typeof import('./src/components/Settings/GlobalMeta.vue')['default']
     GlobalRedirects: typeof import('./src/components/Settings/GlobalRedirects.vue')['default']
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 1ffbac0e7..7a80976a8 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -39,6 +39,7 @@ import GlobalRedirects from "@/components/Settings/GlobalRedirects.vue";
 import PageCode from "@/components/Settings/PageCode.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { builderSettings } from "@/data/builderSettings";
+import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { computed, onActivated, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -49,11 +50,14 @@ import SettingsIcon from "./Icons/Settings.vue";
 // @ts-ignore
 import TerminalIcon from "~icons/lucide/terminal";
 // @ts-ignore
+import ExternalLinkIcon from "~icons/lucide/external-link";
+// @ts-ignore
 import SparklesIcon from "~icons/lucide/sparkles";
 import GlobalAI from "./Settings/GlobalAI.vue";
 import GlobalAnalytics from "./Settings/GlobalAnalytics.vue";
 import GlobalCode from "./Settings/GlobalCode.vue";
 import GlobalDeveloper from "./Settings/GlobalDeveloper.vue";
+import GlobalDomains from "./Settings/GlobalDomains.vue";
 import GlobalGeneral from "./Settings/GlobalGeneral.vue";
 import PageAnalytics from "./Settings/PageAnalytics.vue";
 import PageGeneral from "./Settings/PageGeneral.vue";
@@ -65,6 +69,7 @@ const props = defineProps<{
 
 const route = useRoute();
 const pageStore = usePageStore();
+const builderStore = useBuilderStore();
 const emit = defineEmits(["close"]);
 const selectedItem = ref<string>(props.onlyGlobal ? "global_general" : "page_general");
 const settingsLoaded = ref(false);
@@ -142,6 +147,17 @@ const globalSettings = {
 			title: "Redirects",
 			icon: RedirectIcon,
 		},
+		...(builderStore.isFCSite || window.is_developer_mode
+			? [
+					{
+						label: "Domains",
+						value: "global_domains",
+						component: GlobalDomains,
+						title: "Custom Domains",
+						icon: ExternalLinkIcon,
+					},
+				]
+			: []),
 		{
 			label: "Analytics",
 			value: "global_analytics",
diff --git a/frontend/src/components/Settings/GlobalDomains.vue b/frontend/src/components/Settings/GlobalDomains.vue
new file mode 100644
index 000000000..c27bf2a1a
--- /dev/null
+++ b/frontend/src/components/Settings/GlobalDomains.vue
@@ -0,0 +1,202 @@
+<template>
+	<div class="flex flex-col gap-3">
+		<!-- Domain list -->
+		<div v-if="loading" class="text-p-sm text-ink-gray-5">Loading domains…</div>
+		<div v-else-if="!domains.length" class="text-p-sm text-ink-gray-5">No custom domains added yet.</div>
+		<div v-else class="mb-2 flex flex-col gap-2">
+			<div
+				v-for="d in domains"
+				:key="d.domain"
+				class="flex items-center justify-between rounded-md border border-outline-gray-1 px-3 py-2">
+				<div class="flex items-center gap-2">
+					<span class="text-p-sm font-medium leading-7 text-ink-gray-9">{{ d.domain }}</span>
+					<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
+					<Badge v-else-if="d.redirect_to_primary" size="sm" theme="blue" label="Redirecting" />
+				</div>
+				<Dropdown v-if="!d.primary" :options="getDomainActions(d)" placement="right">
+					<Button variant="ghost" icon="more-horizontal" />
+				</Dropdown>
+			</div>
+		</div>
+
+		<!-- Add domain form -->
+		<form @submit.prevent="handleVerifyOrAdd" class="flex flex-col gap-3">
+			<span class="text-sm text-ink-gray-5">
+				To add a custom domain, you must already own it. If you don't have one, buy it and come back here.
+			</span>
+			<FormControl
+				placeholder="www.example.com"
+				v-model="newDomain"
+				:readonly="dnsVerified === true"
+				autocomplete="off" />
+
+			<!-- DNS info card -->
+			<div class="overflow-hidden rounded-md border border-outline-gray-1">
+				<div
+					class="flex items-center gap-2 border-b border-outline-gray-1 px-3 py-2 text-p-xs"
+					:class="statusClass">
+					<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
+					<span v-if="dnsVerified === true">
+						DNS verified. Click
+						<strong>Add Domain</strong>
+						to proceed.
+					</span>
+					<span v-else>{{ statusMessage }}</span>
+				</div>
+
+				<div class="space-y-1 p-3">
+					<div
+						v-for="rec in dnsRecords"
+						:key="rec.type"
+						class="flex items-center gap-2 rounded bg-surface-gray-1 px-2.5 py-1.5 font-mono text-p-xs">
+						<span class="w-10 shrink-0 font-semibold text-ink-gray-7">{{ rec.type }}</span>
+						<span :class="newDomain ? 'text-ink-gray-5' : 'text-ink-gray-3'">
+							{{ newDomain ? dnsHostLabel : "your-domain.com" }}
+						</span>
+						<span class="text-ink-gray-4">→</span>
+						<span class="flex-1 truncate text-ink-gray-9">{{ rec.value }}</span>
+						<button
+							type="button"
+							:disabled="!rec.copyValue"
+							@click="copyToClipboard(rec.copyValue)"
+							class="text-ink-gray-4 transition-colors hover:text-ink-gray-7 disabled:cursor-not-allowed disabled:opacity-40">
+							<FeatherIcon name="copy" class="h-3.5 w-3.5" />
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<ErrorMessage v-if="addDomainError" :message="addDomainError" />
+			<div class="flex gap-2">
+				<Button
+					type="submit"
+					:variant="dnsVerified ? 'solid' : 'subtle'"
+					:loading="checkingDNS || addingDomain">
+					{{ dnsVerified ? "Add Domain" : "Verify DNS" }}
+				</Button>
+				<Button v-if="dnsVerified !== null" variant="ghost" @click="resetForm">Reset</Button>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useDomains } from "@/data/domains";
+import { Badge, Dropdown, ErrorMessage, FeatherIcon, FormControl } from "frappe-ui";
+import { computed, onMounted, ref } from "vue";
+import { toast } from "vue-sonner";
+
+const currentSite = window.location.hostname;
+const {
+	domains,
+	serverIP,
+	loading,
+	fetchDomains,
+	fetchServerIP,
+	checkDNS,
+	addDomain,
+	removeDomain,
+	retryDomain,
+	setHostName,
+	setRedirect,
+	unsetRedirect,
+} = useDomains();
+
+const newDomain = ref("");
+const dnsVerified = ref<boolean | null>(null);
+const dnsCheckError = ref("");
+const addDomainError = ref("");
+const checkingDNS = ref(false);
+const addingDomain = ref(false);
+
+const dnsHostLabel = computed(() => {
+	const parts = newDomain.value.split(".");
+	return parts.length <= 2 ? newDomain.value : parts[0];
+});
+
+const statusClass = computed(() => {
+	if (dnsVerified.value === true) return "text-ink-green-4 bg-green-50";
+	if (dnsVerified.value === false && dnsCheckError.value) return "bg-red-50 text-ink-red-4";
+	if (dnsVerified.value === false) return "bg-yellow-50 text-yellow-700";
+	return "bg-surface-gray-1 text-ink-gray-5";
+});
+
+const statusIcon = computed(() => {
+	if (dnsVerified.value === true) return "check-circle";
+	if (dnsVerified.value === false && dnsCheckError.value) return "alert-circle";
+	if (dnsVerified.value === false) return "alert-triangle";
+	return "info";
+});
+
+const statusMessage = computed(() => {
+	if (dnsVerified.value === false && dnsCheckError.value) return dnsCheckError.value;
+	if (dnsVerified.value === false)
+		return "DNS record not matched. Double-check the values below and allow up to 48h for propagation.";
+	return "Set one of these DNS records at your domain registrar, then click Verify DNS.";
+});
+
+const dnsRecords = computed(() => [
+	{ type: "CNAME", value: currentSite, copyValue: currentSite },
+	{ type: "A", value: serverIP.value ?? "loading…", copyValue: serverIP.value ?? "" },
+]);
+
+onMounted(() => Promise.all([fetchDomains(), fetchServerIP()]));
+
+async function copyToClipboard(text: string) {
+	if (!text) return;
+	try {
+		await navigator.clipboard.writeText(text);
+		toast.success("Copied to clipboard");
+	} catch {
+		toast.error("Failed to copy");
+	}
+}
+
+function resetForm() {
+	newDomain.value = "";
+	dnsVerified.value = null;
+	dnsCheckError.value = "";
+	addDomainError.value = "";
+}
+
+async function handleVerifyOrAdd() {
+	addDomainError.value = "";
+	if (!newDomain.value) return;
+
+	newDomain.value = newDomain.value
+		.replace(/(^\w+:|^)\/\//, "")
+		.split("/")[0]
+		.toLowerCase();
+
+	if (dnsVerified.value) {
+		addingDomain.value = true;
+		const ok = await addDomain(newDomain.value);
+		addingDomain.value = false;
+		if (ok) resetForm();
+	} else {
+		checkingDNS.value = true;
+		const { matched, error } = await checkDNS(newDomain.value);
+		checkingDNS.value = false;
+		dnsVerified.value = matched;
+		dnsCheckError.value = error;
+	}
+}
+
+function getDomainActions(d: any) {
+	const actions: any[] = [];
+	if (d.status === "Active" && !d.primary)
+		actions.push({ label: "Set as Primary", icon: "star", onClick: () => setHostName(d.domain) });
+	if (!d.redirect_to_primary && d.status === "Active")
+		actions.push({
+			label: "Redirect to Primary",
+			icon: "corner-right-up",
+			onClick: () => setRedirect(d.domain),
+		});
+	if (d.redirect_to_primary)
+		actions.push({ label: "Disable Redirect", icon: "slash", onClick: () => unsetRedirect(d.domain) });
+	if (d.status === "Broken")
+		actions.push({ label: "Retry", icon: "refresh-cw", onClick: () => retryDomain(d.domain) });
+	actions.push({ label: "Remove Domain", icon: "trash", onClick: () => removeDomain(d.domain) });
+	return actions;
+}
+</script>
diff --git a/frontend/src/data/domains.ts b/frontend/src/data/domains.ts
new file mode 100644
index 000000000..095108ad1
--- /dev/null
+++ b/frontend/src/data/domains.ts
@@ -0,0 +1,102 @@
+import { createResource } from "frappe-ui";
+import { ref } from "vue";
+import { toast } from "vue-sonner";
+
+const API = "builder.domain";
+
+function getErrorMessage(e: any): string {
+	const msg = Array.isArray(e?.messages) && e.messages[0];
+	if (msg && typeof msg === "string") return msg.replace(/<[^>]*>/g, "").trim();
+	return e?.message || "Something went wrong";
+}
+
+export function useDomains() {
+	const domains = ref<any[]>([]);
+	const serverIP = ref<string | null>(null);
+	const loading = ref(false);
+
+	async function fetchServerIP() {
+		try {
+			serverIP.value = (await createResource({ url: `${API}.get_server_ip` }).submit()) as string;
+		} catch {
+			// non-critical
+		}
+	}
+
+	async function fetchDomains() {
+		loading.value = true;
+		try {
+			domains.value = (await createResource({ url: `${API}.get_domains` }).submit()) as any[];
+		} catch (e: any) {
+			toast.error(getErrorMessage(e));
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function checkDNS(domain: string): Promise<{ matched: boolean; error: string }> {
+		try {
+			const result = (await createResource({ url: `${API}.check_dns` }).submit({ domain })) as any;
+			return { matched: result?.matched ?? false, error: "" };
+		} catch (e: any) {
+			return { matched: false, error: getErrorMessage(e) };
+		}
+	}
+
+	async function addDomain(domain: string): Promise<boolean> {
+		try {
+			await createResource({ url: `${API}.add_domain` }).submit({ domain });
+			toast.success(`Domain ${domain} added successfully`);
+			await fetchDomains();
+			return true;
+		} catch (e: any) {
+			toast.error(getErrorMessage(e));
+			return false;
+		}
+	}
+
+	async function removeDomain(domain: string) {
+		await callAPI("remove_domain", domain, `${domain} removed`);
+	}
+
+	async function retryDomain(domain: string) {
+		await callAPI("retry_add_domain", domain, `Retrying ${domain}`);
+	}
+
+	async function setHostName(domain: string) {
+		await callAPI("set_host_name", domain, `${domain} set as primary`);
+	}
+
+	async function setRedirect(domain: string) {
+		await callAPI("set_redirect", domain, `Redirect enabled for ${domain}`);
+	}
+
+	async function unsetRedirect(domain: string) {
+		await callAPI("unset_redirect", domain, `Redirect disabled for ${domain}`);
+	}
+
+	async function callAPI(method: string, domain: string, successMsg: string) {
+		try {
+			await createResource({ url: `${API}.${method}` }).submit({ domain });
+			toast.success(successMsg);
+			await fetchDomains();
+		} catch (e: any) {
+			toast.error(getErrorMessage(e));
+		}
+	}
+
+	return {
+		domains,
+		serverIP,
+		loading,
+		fetchDomains,
+		fetchServerIP,
+		checkDNS,
+		addDomain,
+		removeDomain,
+		retryDomain,
+		setHostName,
+		setRedirect,
+		unsetRedirect,
+	};
+}

From 488146918280b0b774c6c88590b7cbce7df67c04 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Fri, 17 Apr 2026 15:28:34 +0530
Subject: [PATCH 518/547]  fix: aligned the input fields of options section to
 other input fields

---
 frontend/src/components/BuilderBlock.vue      | 35 ++++++++++++-------
 .../src/components/Controls/InlineInput.vue   |  2 +-
 .../src/components/Controls/InputLabel.vue    |  6 ++--
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3d0505b12..df765ac7b 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -381,22 +381,31 @@ const allResolvedProps = computed(() => {
 	if (!isMounted.value) {
 		return {};
 	}
-	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
-		acc[key] = value.value;
-		return acc;
-	}, {} as Record<string, any>);
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce(
+		(acc, [key, value]) => {
+			acc[key] = value.value;
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	const blockProps = Object.entries({
 		...props.block.getBlockProps(),
-	}).reduce((acc, [key]) => {
-		acc[key] = getPropValue(key, props.block, uidToUse);
-		return acc;
-	}, {} as Record<string, any>);
-
-	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce((acc, [key, value]) => {
-		acc[key] = getPropValue(key, value.block!, value.blockUid);
-		return acc;
-	}, {} as Record<string, any>);
+	}).reduce(
+		(acc, [key]) => {
+			acc[key] = getPropValue(key, props.block, uidToUse);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
+
+	const parentProps = Object.entries(getParentProps(props.block, uidToUse)).reduce(
+		(acc, [key, value]) => {
+			acc[key] = getPropValue(key, value.block!, value.blockUid);
+			return acc;
+		},
+		{} as Record<string, any>,
+	);
 
 	return {
 		...parentProps,
diff --git a/frontend/src/components/Controls/InlineInput.vue b/frontend/src/components/Controls/InlineInput.vue
index 528a94960..265b1174b 100644
--- a/frontend/src/components/Controls/InlineInput.vue
+++ b/frontend/src/components/Controls/InlineInput.vue
@@ -4,7 +4,7 @@
 			v-if="label"
 			:class="{
 				'cursor-ns-resize': enableSlider,
-				'w-1/3': type != 'checkbox',
+				'w-1/3 min-w-[88px] shrink-0': type != 'checkbox',
 			}"
 			:title="label"
 			:description="description"
diff --git a/frontend/src/components/Controls/InputLabel.vue b/frontend/src/components/Controls/InputLabel.vue
index a7d36a5b8..6e9927768 100644
--- a/frontend/src/components/Controls/InputLabel.vue
+++ b/frontend/src/components/Controls/InputLabel.vue
@@ -1,8 +1,6 @@
 <template>
-	<span
-		:class="{ 'inline-flex': description }"
-		class="w-[88px] min-w-16 max-w-40 items-center truncate text-xs leading-5 text-ink-gray-6">
-		<slot />
+	<span class="flex w-[88px] min-w-16 items-center truncate text-xs leading-5 text-ink-gray-6">
+		<span class="truncate"><slot /></span>
 		<Popover trigger="hover" v-if="description" placement="top">
 			<template #target>
 				<FeatherIcon name="info" class="ml-1 h-[12px] w-[12px] text-gray-500" />

From fb10f66e7c69357d7b05d410b6628a4cfd32daf1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 17 Apr 2026 15:41:31 +0530
Subject: [PATCH 519/547] style: Fix import sorting order

---
 frontend/src/components/BuilderBlock.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index df765ac7b..8cde7e4d5 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -41,8 +41,12 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
+import fetchBlockData from "@/data/blockData";
+import { builderSettings } from "@/data/builderSettings";
+import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
+import usePageStore from "@/stores/pageStore";
 import { setFont } from "@/utils/fontManager";
 import {
 	executeBlockClientScriptRestricted,
@@ -64,15 +68,11 @@ import {
 	watch,
 	watchEffect,
 } from "vue";
+import { toast } from "vue-sonner";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
 import DataLoaderBlock from "./DataLoaderBlock.vue";
 import TextBlock from "./TextBlock.vue";
-import { builderSettings } from "@/data/builderSettings";
-import fetchBlockData from "@/data/blockData";
-import usePageStore from "@/stores/pageStore";
-import { toast } from "vue-sonner";
-import { useBlockDataStore, useBlockUidStore } from "@/stores/blockStore";
 
 const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();

From adfaeeaf11d91bb63505f8560c10d74d5f36c221 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 18 Apr 2026 18:23:29 +0530
Subject: [PATCH 520/547] fix: to text in staging

---
 builder/domain.py                           | 24 +++++++++++++++++----
 frontend/src/components/BuilderSettings.vue |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/builder/domain.py b/builder/domain.py
index 048c1e824..f6a582563 100644
--- a/builder/domain.py
+++ b/builder/domain.py
@@ -66,12 +66,28 @@ def fc_call(method: str, **params):
 			)
 		)
 
-	url = f"{get_base_url()}/api/method/press.api.developer.domain.{method}"
+	url = f"https://staging.frappe.cloud/api/method/press.api.developer.domain.{method}"
 	response = requests.post(url, data={"secret_key": secret_key, **params})
 
 	if response.status_code != 200:
-		error = response.json().get("exception") or f"FC API returned {response.status_code}"
-		frappe.throw(error)
+		body = response.json()
+		# Try to surface the real error from the FC response
+		server_msgs = body.get("_server_messages")
+		if server_msgs:
+			import json as _json
+
+			try:
+				msgs = _json.loads(server_msgs)
+				error = (
+					_json.loads(msgs[0]).get("message")
+					if isinstance(msgs[0], str)
+					else msgs[0].get("message")
+				)
+			except Exception:
+				error = None
+		else:
+			error = body.get("exception") or body.get("message")
+		frappe.throw(error or f"FC API returned {response.status_code}")
 
 	return response.json().get("message")
 
@@ -84,7 +100,7 @@ def get_server_ip() -> str | None:
 			ip = "192.0.2.1"
 			frappe.cache().set_value("builder_site_server_ip", ip)
 		return ip
-	return fc_call("get_server_ip")
+	return fc_call("get_inbound_ip")
 
 
 @frappe.whitelist()
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 7a80976a8..4124b2273 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -147,7 +147,7 @@ const globalSettings = {
 			title: "Redirects",
 			icon: RedirectIcon,
 		},
-		...(builderStore.isFCSite || window.is_developer_mode
+		...(true || window.is_developer_mode
 			? [
 					{
 						label: "Domains",

From 30301cbcc9bc8d63aa5084ba6cba369b28ad5b3e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 18 Apr 2026 22:58:14 +0530
Subject: [PATCH 521/547] fix(BlockData): Correct order of merging own and
 passed down data

---
 frontend/src/stores/blockStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/stores/blockStore.ts b/frontend/src/stores/blockStore.ts
index e6c26a80a..f2098e074 100644
--- a/frontend/src/stores/blockStore.ts
+++ b/frontend/src/stores/blockStore.ts
@@ -48,7 +48,7 @@ const useBlockDataStore = defineStore("blockDataStore", {
 			} else if (filter === "passedDown") {
 				return blockData.passedDownData;
 			}
-			return { ...blockData.ownData, ...blockData.passedDownData };
+			return { ...blockData.passedDownData, ...blockData.ownData };
 		},
 		clearBlockData(blockUid: string) {
 			delete this.blockDataMap[blockUid];

From 4b89f2c27b967c1df3f2c8337d8a532b58c57717 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sat, 18 Apr 2026 22:58:51 +0530
Subject: [PATCH 522/547] fix(BuilderBlock): Include breakpoint in client
 script execution functions

---
 frontend/src/components/BuilderBlock.vue | 4 ++--
 frontend/src/utils/helpers.ts            | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 3d0505b12..41da2c8b2 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -423,8 +423,8 @@ watch(
 		const mode = builderSettings.doc?.execute_block_scripts_in_editor;
 		if (mode === "Don't Execute") return;
 
-		if (mode === "Restricted") executeBlockClientScriptRestricted(uidToUse, script, allResolvedProps.value);
-		else executeBlockClientScriptUnrestricted(uidToUse, script, allResolvedProps.value);
+		if (mode === "Restricted") executeBlockClientScriptRestricted(uidToUse, props.breakpoint, script, allResolvedProps.value);
+		else executeBlockClientScriptUnrestricted(uidToUse, props.breakpoint, script, allResolvedProps.value);
 	},
 	{ immediate: true },
 );
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 5f12db6a6..8769ce253 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1360,10 +1360,11 @@ const getDataArray = (collectionObject: Record<string, any>) => {
 
 function executeBlockClientScriptUnrestricted(
 	blockUid: string,
+	breakpoint: string,
 	userScript: string,
 	props: Record<string, any> = {},
 ) {
-	const thisElement = document.querySelector(`[data-block-uid='${blockUid}']`) as HTMLElement;
+	const thisElement = document.querySelector(`[data-block-uid='${blockUid}'][data-breakpoint=${breakpoint}]`) as HTMLElement;
 
 	const context = {
 		thisRef: thisElement,
@@ -1400,6 +1401,7 @@ function executeBlockClientScriptUnrestricted(
 
 function executeBlockClientScriptRestricted(
 	blockUid: string,
+	breakpoint: string,
 	userScript: string,
 	props: Record<string, any> = {},
 ) {
@@ -1491,7 +1493,7 @@ function executeBlockClientScriptRestricted(
 	};
 
 	const sandboxRoot = document.querySelector("[data-block-id='root']") as HTMLElement;
-	const thisElement = document.querySelector(`[data-block-uid='${blockUid}']`) as HTMLElement;
+	const thisElement = document.querySelector(`[data-block-uid='${blockUid}'][data-breakpoint='${breakpoint}']`) as HTMLElement;
 
 	const proxiedRoot = wrap(sandboxRoot);
 	const proxiedThis = wrap(thisElement);

From dd2cded1767310d5c955134ee87bf68b3e0397a0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 19 Apr 2026 08:10:49 +0530
Subject: [PATCH 523/547] fix: use Switch component to toggle clip background

Looks better and resolves https://github.com/frappe/builder/issues/551
---
 frontend/src/components/BackgroundHandler.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index a5364e982..6949abdeb 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -111,12 +111,14 @@
 					</BuilderButton>
 				</div>
 
-				<div v-if="isTextBlock" class="mt-4 border-t border-outline-gray-2 pt-3">
-					<InlineInput
-						label="Clip Background to Text"
-						type="checkbox"
-						:modelValue="backgroundClip === 'text'"
-						@update:modelValue="setBGClip" />
+				<div
+					v-if="isTextBlock"
+					class="flex items-center justify-between pt-3"
+					:class="{
+						'px-0.5': activeTab !== 'image',
+					}">
+					<InputLabel class="flex-1">Clip Background to Text</InputLabel>
+					<Switch size="sm" :modelValue="backgroundClip === 'text'" @update:modelValue="setBGClip" />
 				</div>
 			</div>
 		</template>
@@ -129,6 +131,7 @@ import GradientEditor from "@/components/Controls/GradientEditor.vue";
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import Input from "@/components/Controls/Input.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import Switch from "@/components/Controls/Switch.vue";
 import TabButtons from "@/components/Controls/TabButtons.vue";
 import blockController from "@/utils/blockController";
 import { getOptimizeButtonText, optimizeImage, shouldShowOptimizeButton } from "@/utils/imageUtils";
@@ -189,8 +192,6 @@ const getDisplayValue = (state: string | null) => {
 	return "";
 };
 
-const displayValue = computed(() => getDisplayValue(activeState.value));
-
 const backgroundImageURL = computed(() => {
 	const bgImage = rawBackgroundImage.value;
 	return bgImage && !isGradient.value ? bgImage.replace(/^url\(['"]?|['"]?\)$/g, "") : null;

From f068dd564718d613bc7b576a4cd0960301b07797 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 20 Apr 2026 13:44:14 +0530
Subject: [PATCH 524/547] fix(PageGeneral): update notifyStandardPageExport to
 check for is_standard before app selection

---
 frontend/src/components/Settings/PageGeneral.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
index 037113e6e..0523c6db4 100644
--- a/frontend/src/components/Settings/PageGeneral.vue
+++ b/frontend/src/components/Settings/PageGeneral.vue
@@ -251,13 +251,13 @@ const handleAppChange = async (val: string) => {
 const notifyStandardPageExport = () => {
 	const activePage = pageStore.activePage;
 
-	if (!activePage?.app) {
+	if (!activePage?.app && activePage?.is_standard) {
 		toast.warning("Please select an app for this standard page");
 		return;
 	}
 
-	if (activePage.is_standard) {
-		const appName = toTitleCase(activePage.app);
+	if (activePage?.is_standard) {
+		const appName = toTitleCase(activePage?.app || "");
 		toast.success(`This page will be exported to ${appName} app as standard page`);
 	}
 };

From a786dd69345eaf5e91788adcefe5b87a496cbebe Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 09:30:03 +0530
Subject: [PATCH 525/547] refactor: Remove unnecessary dev testing code

Also, add polling to check the updated status of domain if not active
---
 builder/domain.py                             | 141 +-----------------
 .../src/components/Settings/GlobalDomains.vue | 109 +++++++++-----
 2 files changed, 76 insertions(+), 174 deletions(-)

diff --git a/builder/domain.py b/builder/domain.py
index f6a582563..49ff60a0e 100644
--- a/builder/domain.py
+++ b/builder/domain.py
@@ -1,81 +1,22 @@
-import re
-
 import frappe
-
-
-def dev_validate_domain(domain: str) -> str:
-	"""Normalise and validate; raises ValidationError for malformed input."""
-	domain = (domain or "").strip().lower()
-
-	if not domain or "." not in domain or domain.startswith(".") or domain.endswith(".") or ".." in domain:
-		frappe.throw(
-			"Invalid domain format. Enter a fully qualified domain like www.example.com or example.com."
-		)
-
-	labels = domain.split(".")
-	if len(labels[-1]) < 2 or any(
-		not label
-		or len(label) > 63
-		or label.startswith("-")
-		or label.endswith("-")
-		or not re.match(r"^[a-z0-9-]+$", label)
-		for label in labels
-	):
-		frappe.throw(
-			"Invalid domain format. Enter a fully qualified domain like www.example.com or example.com."
-		)
-
-	return domain
-
-
-def dev_load_domains() -> list:
-	domains = frappe.cache().get_value("builder_site_domains")
-	if domains is None:
-		domains = [
-			{
-				"name": frappe.local.site,
-				"domain": frappe.local.site,
-				"status": "Active",
-				"retry_count": 0,
-				"redirect_to_primary": 0,
-				"primary": True,
-			}
-		]
-		frappe.cache().set_value("builder_site_domains", domains)
-	return domains
-
-
-def dev_save_domains(domains: list) -> None:
-	frappe.cache().set_value("builder_site_domains", domains)
-
-
-# ─── Frappe Cloud proxy ───────────────────────────────────────────────────────
+from frappe.integrations.frappe_providers.frappecloud_billing import get_base_url, get_headers
 
 
 def fc_call(method: str, **params):
-	"""Proxy to press.api.developer.domain.{method} on Frappe Cloud."""
 	import requests
-	from frappe.integrations.frappe_providers.frappecloud_billing import get_base_url
 
-	secret_key = frappe.conf.get("fc_subscription_secret_key")
-	if not secret_key:
-		frappe.throw(
-			frappe._(
-				"Frappe Cloud subscription secret key is not configured."
-				" Set fc_subscription_secret_key in site_config.json."
-			)
-		)
-
-	url = f"https://staging.frappe.cloud/api/method/press.api.developer.domain.{method}"
-	response = requests.post(url, data={"secret_key": secret_key, **params})
+	response = requests.post(
+		f"{get_base_url()}/api/method/press.saas.api.domain.{method}",
+		headers=get_headers(),
+		json=params or None,
+	)
 
 	if response.status_code != 200:
+		import json as _json
+
 		body = response.json()
-		# Try to surface the real error from the FC response
 		server_msgs = body.get("_server_messages")
 		if server_msgs:
-			import json as _json
-
 			try:
 				msgs = _json.loads(server_msgs)
 				error = (
@@ -94,110 +35,44 @@ def fc_call(method: str, **params):
 
 @frappe.whitelist()
 def get_server_ip() -> str | None:
-	if frappe.conf.developer_mode:
-		ip = frappe.cache().get_value("builder_site_server_ip")
-		if ip is None:
-			ip = "192.0.2.1"
-			frappe.cache().set_value("builder_site_server_ip", ip)
-		return ip
 	return fc_call("get_inbound_ip")
 
 
 @frappe.whitelist()
 def get_domains() -> list:
-	if frappe.conf.developer_mode:
-		return dev_load_domains()
 	return fc_call("get_domains")
 
 
 @frappe.whitelist()
 def check_dns(domain: str) -> dict:
-	if frappe.conf.developer_mode:
-		domain = dev_validate_domain(domain)
-		matched = domain == frappe.local.site or domain.endswith(f".{frappe.local.site}")
-		return {
-			"matched": matched,
-			"type": "CNAME",
-			"CNAME": {"matched": matched, "answer": frappe.local.site if matched else None},
-			"A": {"matched": False, "answer": None},
-		}
 	return fc_call("check_dns", domain=domain)
 
 
 @frappe.whitelist()
 def add_domain(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		domains = dev_load_domains()
-		if not any(d["domain"] == domain for d in domains):
-			domains.append(
-				{
-					"name": domain,
-					"domain": domain,
-					"status": "Active",
-					"retry_count": 0,
-					"redirect_to_primary": 0,
-					"primary": False,
-				}
-			)
-			dev_save_domains(domains)
-		return "ok"
 	return fc_call("add_domain", domain=domain)
 
 
 @frappe.whitelist()
 def remove_domain(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		dev_save_domains([d for d in dev_load_domains() if d["domain"] != domain])
-		return "ok"
 	return fc_call("remove_domain", domain=domain)
 
 
 @frappe.whitelist()
 def retry_add_domain(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		domains = dev_load_domains()
-		for d in domains:
-			if d["domain"] == domain:
-				d["status"] = "Active"
-				d["retry_count"] = d.get("retry_count", 0) + 1
-				break
-		dev_save_domains(domains)
-		return "ok"
 	return fc_call("retry_add_domain", domain=domain)
 
 
 @frappe.whitelist()
 def set_host_name(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		domains = dev_load_domains()
-		for d in domains:
-			d["primary"] = d["domain"] == domain
-		dev_save_domains(domains)
-		return "ok"
 	return fc_call("set_host_name", domain=domain)
 
 
 @frappe.whitelist()
 def set_redirect(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		domains = dev_load_domains()
-		for d in domains:
-			if d["domain"] == domain:
-				d["redirect_to_primary"] = 1
-				break
-		dev_save_domains(domains)
-		return "ok"
 	return fc_call("set_redirect", domain=domain)
 
 
 @frappe.whitelist()
 def unset_redirect(domain: str) -> str:
-	if frappe.conf.developer_mode:
-		domains = dev_load_domains()
-		for d in domains:
-			if d["domain"] == domain:
-				d["redirect_to_primary"] = 0
-				break
-		dev_save_domains(domains)
-		return "ok"
 	return fc_call("unset_redirect", domain=domain)
diff --git a/frontend/src/components/Settings/GlobalDomains.vue b/frontend/src/components/Settings/GlobalDomains.vue
index c27bf2a1a..7065eeece 100644
--- a/frontend/src/components/Settings/GlobalDomains.vue
+++ b/frontend/src/components/Settings/GlobalDomains.vue
@@ -1,19 +1,17 @@
 <template>
 	<div class="flex flex-col gap-3">
 		<!-- Domain list -->
-		<div v-if="loading" class="text-p-sm text-ink-gray-5">Loading domains…</div>
+		<div v-if="loading && !domains.length" class="text-p-sm text-ink-gray-5">Loading domains…</div>
 		<div v-else-if="!domains.length" class="text-p-sm text-ink-gray-5">No custom domains added yet.</div>
-		<div v-else class="mb-2 flex flex-col gap-2">
-			<div
-				v-for="d in domains"
-				:key="d.domain"
-				class="flex items-center justify-between rounded-md border border-outline-gray-1 px-3 py-2">
-				<div class="flex items-center gap-2">
-					<span class="text-p-sm font-medium leading-7 text-ink-gray-9">{{ d.domain }}</span>
-					<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
-					<Badge v-else-if="d.redirect_to_primary" size="sm" theme="blue" label="Redirecting" />
+		<div v-else class="mb-2 divide-y divide-outline-gray-1 rounded-md border border-outline-gray-1">
+			<div v-for="d in domains" :key="d.domain" class="flex items-center gap-2 px-3 py-2.5">
+				<div class="min-w-0 flex-1">
+					<p class="truncate text-p-sm font-medium text-ink-gray-9">{{ d.domain }}</p>
+					<p v-if="d.redirect_to_primary" class="text-p-xs text-ink-gray-5">Redirects to primary</p>
 				</div>
-				<Dropdown v-if="!d.primary" :options="getDomainActions(d)" placement="right">
+				<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
+				<Badge v-else :label="d.status" size="sm" :theme="statusTheme(d.status)" />
+				<Dropdown :options="getDomainActions(d)" placement="right">
 					<Button variant="ghost" icon="more-horizontal" />
 				</Dropdown>
 			</div>
@@ -21,34 +19,20 @@
 
 		<!-- Add domain form -->
 		<form @submit.prevent="handleVerifyOrAdd" class="flex flex-col gap-3">
-			<span class="text-sm text-ink-gray-5">
-				To add a custom domain, you must already own it. If you don't have one, buy it and come back here.
-			</span>
 			<FormControl
-				placeholder="www.example.com"
+				label="Set Domain"
+				placeholder="e.g. yourdomain.com"
 				v-model="newDomain"
 				:readonly="dnsVerified === true"
 				autocomplete="off" />
 
-			<!-- DNS info card -->
-			<div class="overflow-hidden rounded-md border border-outline-gray-1">
-				<div
-					class="flex items-center gap-2 border-b border-outline-gray-1 px-3 py-2 text-p-xs"
-					:class="statusClass">
-					<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
-					<span v-if="dnsVerified === true">
-						DNS verified. Click
-						<strong>Add Domain</strong>
-						to proceed.
-					</span>
-					<span v-else>{{ statusMessage }}</span>
-				</div>
-
-				<div class="space-y-1 p-3">
+			<!-- DNS records -->
+			<div class="overflow-hidden rounded bg-surface-gray-1">
+				<div class="space-y-1">
 					<div
 						v-for="rec in dnsRecords"
 						:key="rec.type"
-						class="flex items-center gap-2 rounded bg-surface-gray-1 px-2.5 py-1.5 font-mono text-p-xs">
+						class="flex items-center gap-2 px-2.5 py-1.5 font-mono text-p-xs">
 						<span class="w-10 shrink-0 font-semibold text-ink-gray-7">{{ rec.type }}</span>
 						<span :class="newDomain ? 'text-ink-gray-5' : 'text-ink-gray-3'">
 							{{ newDomain ? dnsHostLabel : "your-domain.com" }}
@@ -64,6 +48,15 @@
 						</button>
 					</div>
 				</div>
+				<div class="flex items-center gap-2 rounded px-3 py-2 text-p-xs" :class="statusClass">
+					<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
+					<span v-if="dnsVerified === true">
+						DNS verified. Click
+						<strong>Add Domain</strong>
+						to proceed.
+					</span>
+					<span v-else>{{ statusMessage }}</span>
+				</div>
 			</div>
 
 			<ErrorMessage v-if="addDomainError" :message="addDomainError" />
@@ -83,9 +76,11 @@
 <script setup lang="ts">
 import { useDomains } from "@/data/domains";
 import { Badge, Dropdown, ErrorMessage, FeatherIcon, FormControl } from "frappe-ui";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { toast } from "vue-sonner";
 
+const PENDING_STATUSES = ["Pending", "In Progress"];
+
 const currentSite = window.location.hostname;
 const {
 	domains,
@@ -109,16 +104,45 @@ const addDomainError = ref("");
 const checkingDNS = ref(false);
 const addingDomain = ref(false);
 
+let pollInterval: ReturnType<typeof setInterval> | null = null;
+
+const hasPendingDomains = computed(() => domains.value.some((d) => PENDING_STATUSES.includes(d.status)));
+
+watch(hasPendingDomains, (val) => {
+	if (val && !pollInterval) {
+		pollInterval = setInterval(() => {
+			if (!loading.value) fetchDomains();
+		}, 5000);
+	} else if (!val && pollInterval) {
+		clearInterval(pollInterval);
+		pollInterval = null;
+	}
+});
+
+onMounted(() => Promise.all([fetchDomains(), fetchServerIP()]));
+onUnmounted(() => {
+	if (pollInterval) clearInterval(pollInterval);
+});
+
+const isSubdomain = computed(() => newDomain.value.split(".").length > 2);
+
 const dnsHostLabel = computed(() => {
 	const parts = newDomain.value.split(".");
 	return parts.length <= 2 ? newDomain.value : parts[0];
 });
 
+const dnsRecords = computed(() => {
+	const records = [];
+	if (isSubdomain.value) records.push({ type: "CNAME", value: currentSite, copyValue: currentSite });
+	records.push({ type: "A", value: serverIP.value ?? "loading…", copyValue: serverIP.value ?? "" });
+	return records;
+});
+
 const statusClass = computed(() => {
-	if (dnsVerified.value === true) return "text-ink-green-4 bg-green-50";
+	if (dnsVerified.value === true) return "text-ink-green-1 bg-surface-green-1";
 	if (dnsVerified.value === false && dnsCheckError.value) return "bg-red-50 text-ink-red-4";
 	if (dnsVerified.value === false) return "bg-yellow-50 text-yellow-700";
-	return "bg-surface-gray-1 text-ink-gray-5";
+	return "text-ink-gray-6";
 });
 
 const statusIcon = computed(() => {
@@ -132,15 +156,18 @@ const statusMessage = computed(() => {
 	if (dnsVerified.value === false && dnsCheckError.value) return dnsCheckError.value;
 	if (dnsVerified.value === false)
 		return "DNS record not matched. Double-check the values below and allow up to 48h for propagation.";
-	return "Set one of these DNS records at your domain registrar, then click Verify DNS.";
+	return isSubdomain.value
+		? "Set one of these DNS records at your registrar, then click Verify DNS."
+		: "Set this DNS record at your registrar, then click Verify DNS.";
 });
 
-const dnsRecords = computed(() => [
-	{ type: "CNAME", value: currentSite, copyValue: currentSite },
-	{ type: "A", value: serverIP.value ?? "loading…", copyValue: serverIP.value ?? "" },
-]);
-
-onMounted(() => Promise.all([fetchDomains(), fetchServerIP()]));
+function statusTheme(status: string) {
+	return (
+		({ Active: "green", Broken: "red", Pending: "orange", "In Progress": "blue" } as Record<string, string>)[
+			status
+		] ?? "gray"
+	);
+}
 
 async function copyToClipboard(text: string) {
 	if (!text) return;

From 18dea9778e6fc2362eb2b620091c6f1cc6273885 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 10:04:58 +0530
Subject: [PATCH 526/547] fix: improve error handling in DNS check function

---
 .../src/components/Settings/GlobalDomains.vue | 111 +++++++++++-------
 frontend/src/data/domains.ts                  |   4 +-
 2 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalDomains.vue b/frontend/src/components/Settings/GlobalDomains.vue
index 7065eeece..2f0f6d839 100644
--- a/frontend/src/components/Settings/GlobalDomains.vue
+++ b/frontend/src/components/Settings/GlobalDomains.vue
@@ -3,15 +3,18 @@
 		<!-- Domain list -->
 		<div v-if="loading && !domains.length" class="text-p-sm text-ink-gray-5">Loading domains…</div>
 		<div v-else-if="!domains.length" class="text-p-sm text-ink-gray-5">No custom domains added yet.</div>
-		<div v-else class="mb-2 divide-y divide-outline-gray-1 rounded-md border border-outline-gray-1">
-			<div v-for="d in domains" :key="d.domain" class="flex items-center gap-2 px-3 py-2.5">
-				<div class="min-w-0 flex-1">
-					<p class="truncate text-p-sm font-medium text-ink-gray-9">{{ d.domain }}</p>
+		<div v-else class="mb-2 flex flex-col gap-2">
+			<div
+				v-for="d in domains"
+				:key="d.domain"
+				class="flex items-center gap-2 rounded-md border border-outline-gray-1 px-3 py-2.5">
+				<div class="flex min-w-0 flex-1 items-center gap-2">
+					<p class="truncate text-p-sm font-medium leading-6 text-ink-gray-9">{{ d.domain }}</p>
 					<p v-if="d.redirect_to_primary" class="text-p-xs text-ink-gray-5">Redirects to primary</p>
+					<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
+					<Badge v-else :label="d.status" size="sm" :theme="statusTheme(d.status)" />
 				</div>
-				<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
-				<Badge v-else :label="d.status" size="sm" :theme="statusTheme(d.status)" />
-				<Dropdown :options="getDomainActions(d)" placement="right">
+				<Dropdown v-if="getDomainActions(d).length" :options="getDomainActions(d)" placement="right">
 					<Button variant="ghost" icon="more-horizontal" />
 				</Dropdown>
 			</div>
@@ -20,7 +23,7 @@
 		<!-- Add domain form -->
 		<form @submit.prevent="handleVerifyOrAdd" class="flex flex-col gap-3">
 			<FormControl
-				label="Set Domain"
+				label="Add Domain"
 				placeholder="e.g. yourdomain.com"
 				v-model="newDomain"
 				:readonly="dnsVerified === true"
@@ -28,41 +31,49 @@
 
 			<!-- DNS records -->
 			<div class="overflow-hidden rounded bg-surface-gray-1">
-				<div class="space-y-1">
-					<div
-						v-for="rec in dnsRecords"
-						:key="rec.type"
-						class="flex items-center gap-2 px-2.5 py-1.5 font-mono text-p-xs">
-						<span class="w-10 shrink-0 font-semibold text-ink-gray-7">{{ rec.type }}</span>
-						<span :class="newDomain ? 'text-ink-gray-5' : 'text-ink-gray-3'">
-							{{ newDomain ? dnsHostLabel : "your-domain.com" }}
-						</span>
-						<span class="text-ink-gray-4">→</span>
-						<span class="flex-1 truncate text-ink-gray-9">{{ rec.value }}</span>
+				<template v-for="(rec, i) in dnsRecords" :key="rec.type">
+					<div v-if="i > 0" class="flex items-center gap-3 px-3">
+						<div class="bg-outline-gray-2 h-px flex-1"></div>
+						<span class="text-p-xs text-ink-gray-4">or</span>
+						<div class="bg-outline-gray-2 h-px flex-1"></div>
+					</div>
+					<div class="flex items-center gap-2 px-3 py-2.5">
+						<div class="min-w-0 flex-1">
+							<div class="flex items-baseline gap-1.5">
+								<span class="text-p-sm font-semibold leading-6 text-ink-gray-8">{{ rec.type }} record</span>
+								<span class="font-mono text-p-xs">
+									<span :class="newDomain ? 'text-ink-gray-5' : 'text-ink-gray-3'">{{ rec.host }}</span>
+									<span class="px-1 text-ink-gray-4">→</span>
+									<span class="text-ink-gray-9">{{ rec.value }}</span>
+								</span>
+							</div>
+							<p class="text-p-xs text-ink-gray-5">{{ rec.hint }}</p>
+						</div>
 						<button
 							type="button"
 							:disabled="!rec.copyValue"
 							@click="copyToClipboard(rec.copyValue)"
-							class="text-ink-gray-4 transition-colors hover:text-ink-gray-7 disabled:cursor-not-allowed disabled:opacity-40">
+							class="shrink-0 text-ink-gray-4 transition-colors hover:text-ink-gray-7 disabled:cursor-not-allowed disabled:opacity-40">
 							<FeatherIcon name="copy" class="h-3.5 w-3.5" />
 						</button>
 					</div>
-				</div>
-				<div class="flex items-center gap-2 rounded px-3 py-2 text-p-xs" :class="statusClass">
-					<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
-					<span v-if="dnsVerified === true">
-						DNS verified. Click
-						<strong>Add Domain</strong>
-						to proceed.
-					</span>
-					<span v-else>{{ statusMessage }}</span>
-				</div>
+				</template>
+			</div>
+			<div class="flex items-center gap-1.5 text-p-xs" :class="statusClass">
+				<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
+				<span v-if="dnsVerified === true">
+					DNS verified. Click
+					<strong>Add Domain</strong>
+					to proceed.
+				</span>
+				<span v-else v-html="statusMessage"></span>
 			</div>
 
 			<ErrorMessage v-if="addDomainError" :message="addDomainError" />
 			<div class="flex gap-2">
 				<Button
 					type="submit"
+					:disabled="checkingDNS || addingDomain || !newDomain"
 					:variant="dnsVerified ? 'solid' : 'subtle'"
 					:loading="checkingDNS || addingDomain">
 					{{ dnsVerified ? "Add Domain" : "Verify DNS" }}
@@ -132,17 +143,36 @@ const dnsHostLabel = computed(() => {
 });
 
 const dnsRecords = computed(() => {
+	const host = newDomain.value ? dnsHostLabel.value : "your-domain.com";
 	const records = [];
-	if (isSubdomain.value) records.push({ type: "CNAME", value: currentSite, copyValue: currentSite });
-	records.push({ type: "A", value: serverIP.value ?? "loading…", copyValue: serverIP.value ?? "" });
+	if (isSubdomain.value) {
+		records.push({
+			type: "CNAME",
+			host,
+			value: currentSite,
+			copyValue: currentSite,
+			recommended: true,
+			hint: "Automatically follows server IP changes. Best choice for subdomains.",
+		});
+	}
+	records.push({
+		type: "A",
+		host: isSubdomain.value ? host : "@",
+		value: serverIP.value ?? "loading…",
+		copyValue: serverIP.value ?? "",
+		recommended: !isSubdomain.value,
+		hint: isSubdomain.value
+			? "Use this if your DNS provider doesn't support CNAME for subdomains."
+			: "Points your root domain directly to the server. Use @ as the host name.",
+	});
 	return records;
 });
 
 const statusClass = computed(() => {
-	if (dnsVerified.value === true) return "text-ink-green-1 bg-surface-green-1";
-	if (dnsVerified.value === false && dnsCheckError.value) return "bg-red-50 text-ink-red-4";
-	if (dnsVerified.value === false) return "bg-yellow-50 text-yellow-700";
-	return "text-ink-gray-6";
+	if (dnsVerified.value === true) return "text-ink-green-3";
+	if (dnsVerified.value === false && dnsCheckError.value) return "text-ink-red-4";
+	if (dnsVerified.value === false) return "text-yellow-700";
+	return "text-ink-gray-5";
 });
 
 const statusIcon = computed(() => {
@@ -157,8 +187,8 @@ const statusMessage = computed(() => {
 	if (dnsVerified.value === false)
 		return "DNS record not matched. Double-check the values below and allow up to 48h for propagation.";
 	return isSubdomain.value
-		? "Set one of these DNS records at your registrar, then click Verify DNS."
-		: "Set this DNS record at your registrar, then click Verify DNS.";
+		? "Choose one of the records below and set it at your DNS registrar, then click Verify DNS."
+		: "Set the A record at your registrar, then click Verify DNS.";
 });
 
 function statusTheme(status: string) {
@@ -213,7 +243,7 @@ function getDomainActions(d: any) {
 	const actions: any[] = [];
 	if (d.status === "Active" && !d.primary)
 		actions.push({ label: "Set as Primary", icon: "star", onClick: () => setHostName(d.domain) });
-	if (!d.redirect_to_primary && d.status === "Active")
+	if (!d.primary && !d.redirect_to_primary && d.status === "Active")
 		actions.push({
 			label: "Redirect to Primary",
 			icon: "corner-right-up",
@@ -223,7 +253,8 @@ function getDomainActions(d: any) {
 		actions.push({ label: "Disable Redirect", icon: "slash", onClick: () => unsetRedirect(d.domain) });
 	if (d.status === "Broken")
 		actions.push({ label: "Retry", icon: "refresh-cw", onClick: () => retryDomain(d.domain) });
-	actions.push({ label: "Remove Domain", icon: "trash", onClick: () => removeDomain(d.domain) });
+	if (!d.primary)
+		actions.push({ label: "Remove Domain", icon: "trash", onClick: () => removeDomain(d.domain) });
 	return actions;
 }
 </script>
diff --git a/frontend/src/data/domains.ts b/frontend/src/data/domains.ts
index 095108ad1..b4566ea61 100644
--- a/frontend/src/data/domains.ts
+++ b/frontend/src/data/domains.ts
@@ -39,7 +39,9 @@ export function useDomains() {
 			const result = (await createResource({ url: `${API}.check_dns` }).submit({ domain })) as any;
 			return { matched: result?.matched ?? false, error: "" };
 		} catch (e: any) {
-			return { matched: false, error: getErrorMessage(e) };
+			const msg = Array.isArray(e?.messages) && e.messages[0];
+			const error = (msg && typeof msg === "string" ? msg : e?.message) || "Something went wrong";
+			return { matched: false, error };
 		}
 	}
 

From b9c781ff487427673805536e7706a89a2f027351 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 10:37:40 +0530
Subject: [PATCH 527/547] fix: restrict access to fc_call function for System
 Manager only

---
 builder/domain.py                           | 2 ++
 frontend/src/components/BuilderSettings.vue | 4 +---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/builder/domain.py b/builder/domain.py
index 49ff60a0e..5765127e4 100644
--- a/builder/domain.py
+++ b/builder/domain.py
@@ -3,6 +3,8 @@
 
 
 def fc_call(method: str, **params):
+	frappe.only_for("System Manager")
+
 	import requests
 
 	response = requests.post(
diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index 4124b2273..ffca92a0a 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -39,7 +39,6 @@ import GlobalRedirects from "@/components/Settings/GlobalRedirects.vue";
 import PageCode from "@/components/Settings/PageCode.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { builderSettings } from "@/data/builderSettings";
-import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { computed, onActivated, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -69,7 +68,6 @@ const props = defineProps<{
 
 const route = useRoute();
 const pageStore = usePageStore();
-const builderStore = useBuilderStore();
 const emit = defineEmits(["close"]);
 const selectedItem = ref<string>(props.onlyGlobal ? "global_general" : "page_general");
 const settingsLoaded = ref(false);
@@ -147,7 +145,7 @@ const globalSettings = {
 			title: "Redirects",
 			icon: RedirectIcon,
 		},
-		...(true || window.is_developer_mode
+		...(window.is_fc_site || window.is_developer_mode
 			? [
 					{
 						label: "Domains",

From 2dee77aed59184469da59daa557705b0249c7737 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 15:22:24 +0530
Subject: [PATCH 528/547] fix(DynamicHandler): Show keys even with null values

---
 frontend/src/utils/helpers.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 8769ce253..2243f764c 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -1346,7 +1346,9 @@ const getDataArray = (collectionObject: Record<string, any>) => {
 		Object.entries(obj).forEach(([key, value]) => {
 			const path = prefix ? `${prefix}.${key}` : key;
 
-			if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+			if (value === null) {
+				result.push(path);
+			} else if (typeof value === "object" && !Array.isArray(value)) {
 				processObject(value, path);
 			} else if (["string", "number", "boolean"].includes(typeof value)) {
 				result.push(path);
@@ -1364,7 +1366,9 @@ function executeBlockClientScriptUnrestricted(
 	userScript: string,
 	props: Record<string, any> = {},
 ) {
-	const thisElement = document.querySelector(`[data-block-uid='${blockUid}'][data-breakpoint=${breakpoint}]`) as HTMLElement;
+	const thisElement = document.querySelector(
+		`[data-block-uid='${blockUid}'][data-breakpoint=${breakpoint}]`,
+	) as HTMLElement;
 
 	const context = {
 		thisRef: thisElement,
@@ -1493,7 +1497,9 @@ function executeBlockClientScriptRestricted(
 	};
 
 	const sandboxRoot = document.querySelector("[data-block-id='root']") as HTMLElement;
-	const thisElement = document.querySelector(`[data-block-uid='${blockUid}'][data-breakpoint='${breakpoint}']`) as HTMLElement;
+	const thisElement = document.querySelector(
+		`[data-block-uid='${blockUid}'][data-breakpoint='${breakpoint}']`,
+	) as HTMLElement;
 
 	const proxiedRoot = wrap(sandboxRoot);
 	const proxiedThis = wrap(thisElement);

From b595337c37c89072a67b0af4ed6040913160b529 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 15:25:31 +0530
Subject: [PATCH 529/547] fix(input): Do not restrict/stopPropogation keyboard
 events

This is required for other shortcut handling
---
 frontend/src/components/Controls/PropertyControlInput.vue | 1 -
 frontend/src/utils/useBuilderEvents.ts                    | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 153d69394..34162e702 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -8,7 +8,6 @@
 			:defaultValue="defaultValue"
 			:placeholder="placeholder"
 			@update:modelValue="$emit('update:modelValue', $event)"
-			@keydown.stop="$emit('keydown', $event)"
 			:class="componentClass">
 			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
 				<slot :name="name" v-bind="slotData || {}" />
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index 7da71c2d7..d44e3bdfd 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -104,7 +104,7 @@ export function useBuilderEvents(
 			return;
 		}
 
-		let text = e.clipboardData?.getData("text/plain") as string || "";
+		let text = (e.clipboardData?.getData("text/plain") as string) || "";
 
 		await pasteBuilderBlocks(e, window.location.origin);
 
@@ -277,6 +277,7 @@ export function useBuilderEvents(
 			ctrl: true,
 			description: "Focus property search",
 			group: "General",
+			allowInInput: true,
 			handler: () => {
 				document.querySelector(".properties-search-input")?.querySelector("input")?.focus();
 			},

From e3f943b48be2be92cea6aeabb5fc1b2705444065 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 15:26:44 +0530
Subject: [PATCH 530/547] refactor(BuilderToolbar): Remove unused class

---
 frontend/src/components/BuilderToolbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
index c22f59cbd..f64f817d2 100644
--- a/frontend/src/components/BuilderToolbar.vue
+++ b/frontend/src/components/BuilderToolbar.vue
@@ -140,7 +140,6 @@
 		<Dialog
 			v-model="showSettingsDialog"
 			:disableOutsideClickToClose="true"
-			class="[&>div>div[id^=headlessui-dialog-panel]]:my-3"
 			:options="{
 				title: 'Settings',
 				size: '5xl',

From b254b9b7ffb8cdc9b8dd99e32a9b0c311b239739 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 15:58:45 +0530
Subject: [PATCH 531/547] fix(Autocomplete): Name css group so that it does not
 conflict with other group in the tree structure

---
 frontend/src/components/Controls/Autocomplete.vue   | 2 +-
 frontend/src/components/Controls/VariantControl.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index d513e5d10..8c5bf723a 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -5,7 +5,7 @@
 		open-on-click
 		open-on-focus
 		:reset-search-term-on-blur="false">
-		<div class="group relative" ref="containerRef">
+		<div class="group/autocomplete relative" ref="containerRef">
 			<div
 				class="group form-input flex h-7 flex-1 items-center gap-2 rounded bg-surface-gray-2 p-0 text-sm text-ink-gray-8 transition-colors focus-within:bg-surface-white focus-within:ring-2 focus-within:ring-outline-gray-3">
 				<div v-if="$slots.prefix" class="flex items-center pl-2">
diff --git a/frontend/src/components/Controls/VariantControl.vue b/frontend/src/components/Controls/VariantControl.vue
index 8cb55ed53..e9233a42d 100644
--- a/frontend/src/components/Controls/VariantControl.vue
+++ b/frontend/src/components/Controls/VariantControl.vue
@@ -30,12 +30,12 @@
 		</div>
 	</div>
 
-	<div v-else class="group flex items-center justify-between gap-2" v-bind="$attrs">
+	<div v-else class="group/variant flex items-center justify-between gap-2" v-bind="$attrs">
 		<div
 			class="relative flex w-1/3 min-w-[88px] shrink-0 items-center gap-2 before:absolute before:left-[5px] before:-mt-[33px] before:h-[22px] before:w-[1px] before:bg-surface-gray-4 before:content-['_'] after:absolute after:ml-[3px] after:h-1.5 after:w-1.5 after:rounded-full after:bg-surface-gray-4 hover:after:hidden">
 			<button
 				type="button"
-				class="invisible text-ink-gray-7 hover:text-ink-gray-9 group-hover:visible"
+				class="invisible text-ink-gray-7 hover:text-ink-gray-9 group-hover/variant:visible"
 				@click="$emit('clear')">
 				<FeatherIcon name="x" class="size-3" />
 			</button>

From 8608e550b45c7ef02ef88df5fdc51abf4a13753f Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 16:44:04 +0530
Subject: [PATCH 532/547] fix(BackgroundHandler): Allow setting 3 character hex
 value for BG color directly through input

Co-authored-by: Vibhuti410 <157696107+Vibhuti410@users.noreply.github.com>
---
 frontend/src/components/BackgroundHandler.vue | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
index 6949abdeb..9b756e4aa 100644
--- a/frontend/src/components/BackgroundHandler.vue
+++ b/frontend/src/components/BackgroundHandler.vue
@@ -13,7 +13,7 @@
 					:getModelValue="() => getDisplayValue(null)"
 					:getVariantValue="(v: string) => getDisplayValue(v)"
 					:setVariantValue="handleSetVariant"
-					@update:modelValue="setBGImageURL">
+					:setModelValue="(val: string) => setBGValue(val)">
 					<template #prefix="{ variant }">
 						<div
 							class="absolute left-2 top-[6px] size-4 cursor-pointer rounded shadow-md"
@@ -275,18 +275,20 @@ const setBGImage = (file: { file_url: string }) => {
 	}
 };
 
-const setBGImageURL = (url: string) => {
+const setBGValue = (value: string) => {
 	const bgKey = getStyleKey("backgroundImage");
 	const colorKey = getStyleKey("backgroundColor");
+	const isValidHexValue = (value: string) => /^([0-9A-F]{3}){1,2}$/i.test(value);
 
-	// Clean up input if it's a URL wrapper
-	let cleanURL = url;
-	if (url?.startsWith("url(")) {
-		cleanURL = url.replace(/^url\(['"]?|['"]?\)$/g, "");
+	let cleanURL = value;
+	if (value?.startsWith("url(")) {
+		cleanURL = value.replace(/^url\(['"]?|['"]?\)$/g, "");
 	}
-
-	if (cleanURL?.startsWith("#") || cleanURL?.startsWith("rgb") || cleanURL?.startsWith("hsl")) {
-		blockController.setStyle(colorKey, cleanURL);
+	if (isValidHexValue(value)) {
+		blockController.setStyle(colorKey, `#${value}`);
+		blockController.setStyle(bgKey, null);
+	} else if (value?.startsWith("#") || value?.startsWith("rgb") || value?.startsWith("hsl")) {
+		blockController.setStyle(colorKey, value);
 		blockController.setStyle(bgKey, null);
 	} else {
 		blockController.setStyle(bgKey, cleanURL ? `url(${cleanURL})` : null);

From 9079df44ea786a1c784db9a7ebdccb91da2aebfe Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Tue, 21 Apr 2026 19:59:16 +0530
Subject: [PATCH 533/547] fix(BuilderPage): Correctly escape query string keys
 in dynamic routes

---
 builder/builder/doctype/builder_page/builder_page.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
index dc440073d..93b85979e 100644
--- a/builder/builder/doctype/builder_page/builder_page.py
+++ b/builder/builder/doctype/builder_page/builder_page.py
@@ -268,7 +268,7 @@ def get_context(self, context):
 		if frappe.form_dict and self.dynamic_route:
 			query_string = "&".join(
 				[
-					f"{k}={frappe.utils.escape_html(frappe.utils.quote(v))}"
+					f"{frappe.utils.escape_html(frappe.utils.quote(k))}={frappe.utils.escape_html(frappe.utils.quote(v))}"
 					for k, v in frappe.form_dict.items()
 				]
 			)

From f39c5c39cf17e08cb0ff7972d6c4b4f64298a0ea Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 22 Apr 2026 00:42:28 +0530
Subject: [PATCH 534/547] feat: shortcut for highlighting blocks scripts

---
 frontend/src/components/BlockLayers.vue      | 33 ++++++--
 frontend/src/components/BuilderLeftPanel.vue | 26 +++++++
 frontend/src/stores/builderStore.ts          |  2 +
 frontend/src/utils/useBuilderEvents.ts       | 27 +++++++
 frontend/src/utils/useShortcut.ts            | 81 +++++++++++++++++++-
 5 files changed, 161 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 3d981ce0c..8bedb4390 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -21,11 +21,14 @@
 					:data-block-layer-id="element.blockId"
 					:data-indent="indent"
 					:title="element.blockId"
-					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
-					:class="{
-						'border-blue-500 !bg-blue-100 dark:!bg-blue-900':
-							canvasStore.layerDraggingOverBlock === element.blockId,
-					}"
+					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7 transition-[color] duration-50 ease-out"
+					:class="[
+						{
+							'border-blue-500 !bg-blue-100 dark:!bg-blue-900':
+								canvasStore.layerDraggingOverBlock === element.blockId,
+						},
+						getBlockScriptClasses(element),
+					]"
 					@click.stop="selectBlock(element, $event)"
 					@mouseover.stop="
 						!canvasStore.isDragging && canvasStore.activeCanvas?.setHoveredBlock(element.blockId)
@@ -258,6 +261,18 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
+const getBlockScriptClasses = (block: Block) => {
+	const hasClientScript = Boolean(block.getBlockClientScript());
+	const hasDataScript = Boolean(block.getBlockDataScript());
+
+	return {
+		"has-client-script": hasClientScript && !hasDataScript,
+		"has-data-script": hasDataScript && !hasClientScript,
+		"has-both-scripts": hasDataScript && hasClientScript,
+		"no-scripts": !hasDataScript && !hasClientScript,
+	};
+};
+
 interface DragState {
 	draggedElement: HTMLElement | null;
 	hoverTarget: HTMLElement | null;
@@ -402,4 +417,12 @@ defineExpose({
 .block-selected {
 	@apply border-blue-400 text-gray-900 dark:border-blue-700 dark:text-gray-200;
 }
+
+.highlight-block-script {
+	@apply border-dashed border-outline-gray-3 text-gray-800 dark:border-outline-gray-4 dark:text-gray-300;
+}
+
+.lowlight-nonscript-block {
+	@apply text-gray-400 dark:text-gray-700;
+}
 </style>
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 994660bfb..b4ced3175 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -192,4 +192,30 @@ watch(
 	},
 	{ deep: true },
 );
+
+watch(
+	[() => builderStore.highlightBlocksWithDataScripts, () => builderStore.highlightBlocksWithClientScripts],
+	([highlightDataScripts, highlightClientScripts]) => {
+		const toggleScriptClasses = (selector: string, highlight: boolean, lowlight: boolean) => {
+			document.querySelectorAll(selector).forEach((el) => {
+				el.classList.toggle("highlight-block-script", highlight);
+				el.classList.toggle("lowlight-nonscript-block", lowlight);
+			});
+		};
+
+		toggleScriptClasses(
+			".has-data-script",
+			highlightDataScripts,
+			!highlightDataScripts && highlightClientScripts,
+		);
+		toggleScriptClasses(
+			".has-client-script",
+			highlightClientScripts,
+			!highlightClientScripts && highlightDataScripts,
+		);
+		toggleScriptClasses(".has-both-scripts", highlightDataScripts || highlightClientScripts, false);
+		toggleScriptClasses(".no-scripts", false, highlightDataScripts || highlightClientScripts);
+	},
+	{ immediate: true },
+);
 </script>
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index 4fd3b2236..13b700e20 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -44,6 +44,8 @@ const useBuilderStore = defineStore("builderStore", {
 		isDark: useDark({
 			attribute: "data-theme",
 		}),
+		highlightBlocksWithDataScripts: false,
+		highlightBlocksWithClientScripts: false,
 	}),
 	getters: {
 		isAIEnabled(): boolean {
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index d44e3bdfd..39b9510b8 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -509,6 +509,33 @@ export function useBuilderEvents(
 				builderStore.mode = "move";
 			},
 		},
+		{
+			key: "l",
+			ctrl: true,
+			triggeredOn: "hold",
+			description: "Highlight Blocks with Data Scripts",
+			group: "View",
+			onHold: () => {
+				builderStore.highlightBlocksWithDataScripts = true;
+			},
+			onRelease: () => {
+				builderStore.highlightBlocksWithDataScripts = false;
+			},
+		},
+		{
+			key: "l",
+			ctrl: true,
+			shift: true,
+			triggeredOn: "hold",
+			description: "Highlight Blocks with Client Scripts",
+			group: "View",
+			onHold: () => {
+				builderStore.highlightBlocksWithClientScripts = true;
+			},
+			onRelease: () => {
+				builderStore.highlightBlocksWithClientScripts = false;
+			},
+		},
 	]);
 
 	// on tab activation, reload for latest data
diff --git a/frontend/src/utils/useShortcut.ts b/frontend/src/utils/useShortcut.ts
index 5c75c17e1..d517239cc 100644
--- a/frontend/src/utils/useShortcut.ts
+++ b/frontend/src/utils/useShortcut.ts
@@ -12,8 +12,14 @@ export interface ShortcutConfig {
 	description: string;
 	/** Group name for categorizing in the shortcuts modal */
 	group?: string;
-	/** Handler to execute when the shortcut is triggered */
-	handler: (e: KeyboardEvent) => void;
+	/** Whether the action should be triggered on press or hold */
+	triggeredOn?: "press" | "hold";
+	/** Handler to execute when the shortcut is triggered (on keydown) */
+	handler?: (e: KeyboardEvent) => void;
+	/** Handler to execute while the shortcut keys are held down (on keydown) */
+	onHold?: (e: KeyboardEvent) => void;
+	/** Handler to execute when the shortcut keys are released (on keyup) */
+	onRelease?: (e: KeyboardEvent) => void;
 	/** Whether to prevent default browser behavior (default: true) */
 	preventDefault?: boolean;
 	/** Whether the shortcut should work when an input/textarea is focused (default: false) */
@@ -38,6 +44,9 @@ export interface RegisteredShortcut {
 const activeShortcuts = reactive<RegisteredShortcut[]>([]);
 const shortcutHandlers = new Map<symbol, ShortcutConfig>();
 
+// Track which shortcut keys are currently held down
+const heldShortcuts = new Set<symbol>();
+
 let listenerAttached = false;
 
 function attachGlobalListener() {
@@ -45,6 +54,7 @@ function attachGlobalListener() {
 	listenerAttached = true;
 
 	document.addEventListener("keydown", globalKeydownHandler);
+	document.addEventListener("keyup", globalKeyupHandler);
 }
 
 function globalKeydownHandler(e: KeyboardEvent) {
@@ -64,11 +74,75 @@ function globalKeydownHandler(e: KeyboardEvent) {
 			e.preventDefault();
 		}
 
-		config.handler(e);
+		config.handler?.(e);
+		// Mark as held if not already held
+		if (config.triggeredOn === "hold" && !heldShortcuts.has(id)) {
+			heldShortcuts.add(id);
+
+			// Call onHold if provided and this is the initial press
+			if (config.onHold) {
+				config.onHold(e);
+			}
+		}
+
 		return; // Only fire the first match
 	}
 }
 
+function globalKeyupHandler(e: KeyboardEvent) {
+	if (isDialogOpen()) return;
+
+	// Check all held shortcuts to see if any are still active
+	// If a modifier key is released, we need to detect that the combo is no longer valid
+	const idsToRelease: symbol[] = [];
+
+	for (const id of heldShortcuts) {
+		const config = shortcutHandlers.get(id);
+		if (!config || config.triggeredOn !== "hold") continue;
+
+		// Check if the combo is still valid. If not, it's time to release.
+		if (!isShortcutStillPressed(e, config)) {
+			idsToRelease.push(id);
+		}
+	}
+
+	// Process releases
+	for (const id of idsToRelease) {
+		const config = shortcutHandlers.get(id);
+		if (!config) continue;
+
+		// Call onRelease if provided
+		if (config.onRelease) {
+			config.onRelease(e);
+		}
+
+		// Remove from held shortcuts
+		heldShortcuts.delete(id);
+	}
+
+	if (idsToRelease.length > 0 && !shortcutHandlers.values().next().value?.preventDefault === false) {
+		// e.preventDefault();
+	}
+}
+
+function isShortcutStillPressed(e: KeyboardEvent, config: ShortcutConfig): boolean {
+	// Check if the main key is still being pressed (heuristic: if this key was released, the combo isn't pressed)
+	// However, we can't directly tell which keys are still pressed from a keyup event
+	// So we check if the modifiers that are required are no longer all satisfied
+
+	const wantsCtrl = config.ctrl ?? false;
+	const wantsShift = config.shift ?? false;
+	const hasCtrl = isCtrlOrCmd(e);
+	const hasShift = e.shiftKey;
+
+	// If we want Ctrl but it's not pressed (user released Ctrl), combo is no longer valid
+	if (wantsCtrl && !hasCtrl) return false;
+	// If we want Shift but it's not pressed (user released Shift), combo is no longer valid
+	if (wantsShift && !hasShift) return false;
+
+	return true;
+}
+
 function matchesShortcut(e: KeyboardEvent, config: ShortcutConfig): boolean {
 	if (e.key.toLowerCase() !== config.key.toLowerCase() && e.key !== config.key) {
 		return false;
@@ -159,6 +233,7 @@ export function useShortcut(shortcuts: ShortcutConfig | ShortcutConfig[]) {
 	const removeShortcuts = () => {
 		for (const id of registeredIds) {
 			shortcutHandlers.delete(id);
+			heldShortcuts.delete(id);
 			const idx = activeShortcuts.findIndex((s) => s.id === id);
 			if (idx !== -1) activeShortcuts.splice(idx, 1);
 		}

From 2c27330ee5f2f2fd3870030bca2b0fa9ea17c4c1 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Wed, 22 Apr 2026 12:53:13 +0530
Subject: [PATCH 535/547] refactor(GlobalDomains): Simplify domain management
 UI and improve error handling

- Remove need for extra click (for domain verification), user can just trigger "Add domain" and we can internally verify domain and then add if verifcation succeeds, we can add the domain.

Continuation of https://github.com/frappe/builder/pull/555
---
 .../src/components/Settings/GlobalDomains.vue | 141 ++++++++----------
 frontend/src/data/domains.ts                  |  38 +++--
 2 files changed, 86 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/Settings/GlobalDomains.vue b/frontend/src/components/Settings/GlobalDomains.vue
index 2f0f6d839..cbff4eb90 100644
--- a/frontend/src/components/Settings/GlobalDomains.vue
+++ b/frontend/src/components/Settings/GlobalDomains.vue
@@ -5,28 +5,37 @@
 		<div v-else-if="!domains.length" class="text-p-sm text-ink-gray-5">No custom domains added yet.</div>
 		<div v-else class="mb-2 flex flex-col gap-2">
 			<div
-				v-for="d in domains"
+				v-for="d in sortedDomains"
 				:key="d.domain"
-				class="flex items-center gap-2 rounded-md border border-outline-gray-1 px-3 py-2.5">
-				<div class="flex min-w-0 flex-1 items-center gap-2">
-					<p class="truncate text-p-sm font-medium leading-6 text-ink-gray-9">{{ d.domain }}</p>
-					<p v-if="d.redirect_to_primary" class="text-p-xs text-ink-gray-5">Redirects to primary</p>
-					<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
-					<Badge v-else :label="d.status" size="sm" :theme="statusTheme(d.status)" />
+				class="flex flex-col gap-1 rounded-md border border-outline-gray-1 px-3 py-2.5">
+				<div class="flex items-center gap-2">
+					<div class="flex min-w-0 flex-1 items-center gap-2">
+						<p class="truncate text-p-sm font-medium leading-6 text-ink-gray-9">{{ d.domain }}</p>
+						<Badge v-if="d.dns_type" size="sm" theme="gray" :label="d.dns_type" />
+						<p v-if="d.redirect_to_primary" class="text-p-xs text-ink-gray-5">Redirects to primary</p>
+						<Badge v-if="d.primary" size="sm" theme="green" label="Primary" />
+						<Badge
+							v-else-if="d.status !== 'Active'"
+							:label="d.status"
+							size="sm"
+							:theme="statusTheme(d.status)" />
+					</div>
+					<Dropdown v-if="getDomainActions(d).length" :options="getDomainActions(d)" placement="right">
+						<Button variant="ghost" icon="more-horizontal" />
+					</Dropdown>
 				</div>
-				<Dropdown v-if="getDomainActions(d).length" :options="getDomainActions(d)" placement="right">
-					<Button variant="ghost" icon="more-horizontal" />
-				</Dropdown>
+				<p v-if="d.status === 'Broken'" class="text-p-xs text-ink-red-4">
+					{{ brokenReason(d) }}
+				</p>
 			</div>
 		</div>
 
 		<!-- Add domain form -->
-		<form @submit.prevent="handleVerifyOrAdd" class="flex flex-col gap-3">
+		<form @submit.prevent="handleAdd" class="flex flex-col gap-3">
 			<FormControl
-				label="Add Domain"
+				label="Enter your domain"
 				placeholder="e.g. yourdomain.com"
 				v-model="newDomain"
-				:readonly="dnsVerified === true"
 				autocomplete="off" />
 
 			<!-- DNS records -->
@@ -59,26 +68,11 @@
 					</div>
 				</template>
 			</div>
-			<div class="flex items-center gap-1.5 text-p-xs" :class="statusClass">
-				<FeatherIcon :name="statusIcon" class="h-3.5 w-3.5 shrink-0" />
-				<span v-if="dnsVerified === true">
-					DNS verified. Click
-					<strong>Add Domain</strong>
-					to proceed.
-				</span>
-				<span v-else v-html="statusMessage"></span>
-			</div>
-
-			<ErrorMessage v-if="addDomainError" :message="addDomainError" />
+			<ErrorMessage v-if="addError" :message="addError" />
 			<div class="flex gap-2">
-				<Button
-					type="submit"
-					:disabled="checkingDNS || addingDomain || !newDomain"
-					:variant="dnsVerified ? 'solid' : 'subtle'"
-					:loading="checkingDNS || addingDomain">
-					{{ dnsVerified ? "Add Domain" : "Verify DNS" }}
+				<Button type="submit" :disabled="submitting || !newDomain" variant="subtle" :loading="submitting">
+					Add Domain
 				</Button>
-				<Button v-if="dnsVerified !== null" variant="ghost" @click="resetForm">Reset</Button>
 			</div>
 		</form>
 	</div>
@@ -99,7 +93,6 @@ const {
 	loading,
 	fetchDomains,
 	fetchServerIP,
-	checkDNS,
 	addDomain,
 	removeDomain,
 	retryDomain,
@@ -109,14 +102,19 @@ const {
 } = useDomains();
 
 const newDomain = ref("");
-const dnsVerified = ref<boolean | null>(null);
-const dnsCheckError = ref("");
-const addDomainError = ref("");
-const checkingDNS = ref(false);
-const addingDomain = ref(false);
+const submitting = ref(false);
+const addError = ref("");
+
+watch(newDomain, () => {
+	addError.value = "";
+});
 
 let pollInterval: ReturnType<typeof setInterval> | null = null;
 
+const sortedDomains = computed(() =>
+	[...domains.value].sort((a, b) => (b.primary ? 1 : 0) - (a.primary ? 1 : 0)),
+);
+
 const hasPendingDomains = computed(() => domains.value.some((d) => PENDING_STATUSES.includes(d.status)));
 
 watch(hasPendingDomains, (val) => {
@@ -168,28 +166,24 @@ const dnsRecords = computed(() => {
 	return records;
 });
 
-const statusClass = computed(() => {
-	if (dnsVerified.value === true) return "text-ink-green-3";
-	if (dnsVerified.value === false && dnsCheckError.value) return "text-ink-red-4";
-	if (dnsVerified.value === false) return "text-yellow-700";
-	return "text-ink-gray-5";
-});
-
-const statusIcon = computed(() => {
-	if (dnsVerified.value === true) return "check-circle";
-	if (dnsVerified.value === false && dnsCheckError.value) return "alert-circle";
-	if (dnsVerified.value === false) return "alert-triangle";
-	return "info";
-});
-
-const statusMessage = computed(() => {
-	if (dnsVerified.value === false && dnsCheckError.value) return dnsCheckError.value;
-	if (dnsVerified.value === false)
-		return "DNS record not matched. Double-check the values below and allow up to 48h for propagation.";
-	return isSubdomain.value
-		? "Choose one of the records below and set it at your DNS registrar, then click Verify DNS."
-		: "Set the A record at your registrar, then click Verify DNS.";
-});
+function brokenReason(d: any): string {
+	if (!d.dns_response) return "Domain setup failed. Please retry or contact support.";
+	try {
+		const parsed = JSON.parse(d.dns_response);
+		if (parsed.exc_message) return parsed.exc_message.replace(/<[^>]*>/g, "").trim();
+		const cname = parsed.CNAME;
+		const a = parsed.A;
+		if (cname?.exists && !cname?.matched)
+			return `CNAME record points to wrong destination: ${cname.answer?.trim() || "unknown"}`;
+		if (a?.exists && !a?.matched) return `A record points to wrong IP: ${a.answer?.trim() || "unknown"}`;
+		if (!cname?.exists && !a?.exists) return "No DNS record found for this domain.";
+		if (parsed.matched || parsed.valid)
+			return "DNS is verified but SSL certificate provisioning failed. Please retry.";
+	} catch {
+		// ignore parse errors
+	}
+	return "Domain setup failed. Please retry or contact support.";
+}
 
 function statusTheme(status: string) {
 	return (
@@ -209,15 +203,7 @@ async function copyToClipboard(text: string) {
 	}
 }
 
-function resetForm() {
-	newDomain.value = "";
-	dnsVerified.value = null;
-	dnsCheckError.value = "";
-	addDomainError.value = "";
-}
-
-async function handleVerifyOrAdd() {
-	addDomainError.value = "";
+async function handleAdd() {
 	if (!newDomain.value) return;
 
 	newDomain.value = newDomain.value
@@ -225,17 +211,14 @@ async function handleVerifyOrAdd() {
 		.split("/")[0]
 		.toLowerCase();
 
-	if (dnsVerified.value) {
-		addingDomain.value = true;
-		const ok = await addDomain(newDomain.value);
-		addingDomain.value = false;
-		if (ok) resetForm();
-	} else {
-		checkingDNS.value = true;
-		const { matched, error } = await checkDNS(newDomain.value);
-		checkingDNS.value = false;
-		dnsVerified.value = matched;
-		dnsCheckError.value = error;
+	addError.value = "";
+	submitting.value = true;
+	const { ok, error } = await addDomain(newDomain.value);
+	submitting.value = false;
+	if (ok) {
+		newDomain.value = "";
+	} else if (error) {
+		addError.value = error;
 	}
 }
 
diff --git a/frontend/src/data/domains.ts b/frontend/src/data/domains.ts
index b4566ea61..4c0a2b63c 100644
--- a/frontend/src/data/domains.ts
+++ b/frontend/src/data/domains.ts
@@ -45,45 +45,56 @@ export function useDomains() {
 		}
 	}
 
-	async function addDomain(domain: string): Promise<boolean> {
+	async function addDomain(domain: string): Promise<{ ok: boolean; error?: string }> {
+		const id = toast.loading(`Verifying DNS for ${domain}…`);
 		try {
+			const { matched, error } = await checkDNS(domain);
+			if (!matched) {
+				toast.error("Domain verification failed", { id });
+				return {
+					ok: false,
+					error: error || "DNS not yet propagated. Make sure the record is set correctly and try again.",
+				};
+			}
+			toast.loading(`Adding ${domain}…`, { id });
 			await createResource({ url: `${API}.add_domain` }).submit({ domain });
-			toast.success(`Domain ${domain} added successfully`);
+			toast.success(`${domain} added successfully`, { id });
 			await fetchDomains();
-			return true;
+			return { ok: true };
 		} catch (e: any) {
-			toast.error(getErrorMessage(e));
-			return false;
+			toast.error(getErrorMessage(e), { id });
+			return { ok: false };
 		}
 	}
 
 	async function removeDomain(domain: string) {
-		await callAPI("remove_domain", domain, `${domain} removed`);
+		await callAPI("remove_domain", domain, `${domain} removed`, `Removing ${domain}…`);
 	}
 
 	async function retryDomain(domain: string) {
-		await callAPI("retry_add_domain", domain, `Retrying ${domain}`);
+		await callAPI("retry_add_domain", domain, `Retrying ${domain}`, `Retrying ${domain}…`);
 	}
 
 	async function setHostName(domain: string) {
-		await callAPI("set_host_name", domain, `${domain} set as primary`);
+		await callAPI("set_host_name", domain, `${domain} set as primary`, `Updating primary domain…`);
 	}
 
 	async function setRedirect(domain: string) {
-		await callAPI("set_redirect", domain, `Redirect enabled for ${domain}`);
+		await callAPI("set_redirect", domain, `Redirect enabled for ${domain}`, `Enabling redirect…`);
 	}
 
 	async function unsetRedirect(domain: string) {
-		await callAPI("unset_redirect", domain, `Redirect disabled for ${domain}`);
+		await callAPI("unset_redirect", domain, `Redirect disabled for ${domain}`, `Disabling redirect…`);
 	}
 
-	async function callAPI(method: string, domain: string, successMsg: string) {
+	async function callAPI(method: string, domain: string, successMsg: string, loadingMsg?: string) {
+		const id = loadingMsg ? toast.loading(loadingMsg) : undefined;
 		try {
 			await createResource({ url: `${API}.${method}` }).submit({ domain });
-			toast.success(successMsg);
+			toast.success(successMsg, { id });
 			await fetchDomains();
 		} catch (e: any) {
-			toast.error(getErrorMessage(e));
+			toast.error(getErrorMessage(e), { id });
 		}
 	}
 
@@ -93,7 +104,6 @@ export function useDomains() {
 		loading,
 		fetchDomains,
 		fetchServerIP,
-		checkDNS,
 		addDomain,
 		removeDomain,
 		retryDomain,

From 2bcce70631297622cd9ad3c7727fd0973cc51d02 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Wed, 22 Apr 2026 12:54:35 +0530
Subject: [PATCH 536/547] fix: changed the style for highlighting

instead of adding borders and changing text colors we now change the prefix icon
---
 frontend/src/components/BlockLayers.vue      | 52 +++++++++-----------
 frontend/src/components/BuilderLeftPanel.vue | 26 ----------
 2 files changed, 22 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 8bedb4390..1655937df 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -21,14 +21,11 @@
 					:data-block-layer-id="element.blockId"
 					:data-indent="indent"
 					:title="element.blockId"
-					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7 transition-[color] duration-50 ease-out"
-					:class="[
-						{
-							'border-blue-500 !bg-blue-100 dark:!bg-blue-900':
-								canvasStore.layerDraggingOverBlock === element.blockId,
-						},
-						getBlockScriptClasses(element),
-					]"
+					class="block-layer-item relative min-w-24 cursor-pointer select-none rounded border border-transparent bg-surface-white bg-opacity-50 text-base text-ink-gray-7"
+					:class="{
+						'border-blue-500 !bg-blue-100 dark:!bg-blue-900':
+							canvasStore.layerDraggingOverBlock === element.blockId,
+					}"
 					@click.stop="selectBlock(element, $event)"
 					@mouseover.stop="
 						!canvasStore.isDragging && canvasStore.activeCanvas?.setHoveredBlock(element.blockId)
@@ -58,14 +55,19 @@
 								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
 									element.isExtendedFromComponent(),
 							}"
-							v-if="!Boolean(element.extendedFromComponent)" />
+							v-if="!Boolean(element.extendedFromComponent) && !showCodeIcon(element)" />
 						<BlocksIcon
 							class="mr-1 h-3 w-3"
 							:class="{
 								'text-purple-500 opacity-80 dark:opacity-100 dark:brightness-125 dark:saturate-[0.3]':
 									element.isExtendedFromComponent(),
 							}"
-							v-if="Boolean(element.extendedFromComponent)" />
+							v-if="Boolean(element.extendedFromComponent) && !showCodeIcon(element)" />
+						<FeatherIcon
+							name="terminal"
+							:stroke-width="3"
+							class="h-3 w-3 text-orange-500"
+							v-if="showCodeIcon(element)" />
 						<span
 							class="layer-label min-h-[1em] min-w-[2em] max-w-64 truncate"
 							:contenteditable="element.editable && !readonly"
@@ -88,6 +90,7 @@
 							@blur="setBlockName($event, element)">
 							{{ element.getBlockDescription() }}
 						</span>
+
 						<!-- toggle visibility -->
 						<FeatherIcon
 							v-if="!element.isRoot() && !isParentHidden && !readonly"
@@ -128,10 +131,12 @@ import { ref, watch } from "vue";
 import draggable from "vuedraggable";
 import BlockLayers from "./BlockLayers.vue";
 import BlocksIcon from "./Icons/Blocks.vue";
+import useBuilderStore from "@/stores/builderStore";
 
 type LayerInstance = InstanceType<typeof BlockLayers>;
 
 const canvasStore = useCanvasStore();
+const builderStore = useBuilderStore();
 
 const rootContainer = ref<HTMLElement | null>(null);
 const childLayers = ref<LayerInstance[]>([]);
@@ -182,6 +187,13 @@ const isExpanded = (block: Block) => {
 	return expandedLayers.value.has(block.blockId);
 };
 
+const showCodeIcon = (block: Block) => {
+	return (
+		(builderStore.highlightBlocksWithClientScripts && block.getBlockClientScript()) ||
+		(builderStore.highlightBlocksWithDataScripts && block.getBlockDataScript())
+	);
+};
+
 // TODO: Refactor this!
 const toggleExpanded = (block: Block) => {
 	if (block.isRoot()) {
@@ -261,18 +273,6 @@ const selectBlock = (block: Block, event: MouseEvent) => {
 	canvasStore.selectBlock(block, event, false, true);
 };
 
-const getBlockScriptClasses = (block: Block) => {
-	const hasClientScript = Boolean(block.getBlockClientScript());
-	const hasDataScript = Boolean(block.getBlockDataScript());
-
-	return {
-		"has-client-script": hasClientScript && !hasDataScript,
-		"has-data-script": hasDataScript && !hasClientScript,
-		"has-both-scripts": hasDataScript && hasClientScript,
-		"no-scripts": !hasDataScript && !hasClientScript,
-	};
-};
-
 interface DragState {
 	draggedElement: HTMLElement | null;
 	hoverTarget: HTMLElement | null;
@@ -417,12 +417,4 @@ defineExpose({
 .block-selected {
 	@apply border-blue-400 text-gray-900 dark:border-blue-700 dark:text-gray-200;
 }
-
-.highlight-block-script {
-	@apply border-dashed border-outline-gray-3 text-gray-800 dark:border-outline-gray-4 dark:text-gray-300;
-}
-
-.lowlight-nonscript-block {
-	@apply text-gray-400 dark:text-gray-700;
-}
 </style>
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index b4ced3175..994660bfb 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -192,30 +192,4 @@ watch(
 	},
 	{ deep: true },
 );
-
-watch(
-	[() => builderStore.highlightBlocksWithDataScripts, () => builderStore.highlightBlocksWithClientScripts],
-	([highlightDataScripts, highlightClientScripts]) => {
-		const toggleScriptClasses = (selector: string, highlight: boolean, lowlight: boolean) => {
-			document.querySelectorAll(selector).forEach((el) => {
-				el.classList.toggle("highlight-block-script", highlight);
-				el.classList.toggle("lowlight-nonscript-block", lowlight);
-			});
-		};
-
-		toggleScriptClasses(
-			".has-data-script",
-			highlightDataScripts,
-			!highlightDataScripts && highlightClientScripts,
-		);
-		toggleScriptClasses(
-			".has-client-script",
-			highlightClientScripts,
-			!highlightClientScripts && highlightDataScripts,
-		);
-		toggleScriptClasses(".has-both-scripts", highlightDataScripts || highlightClientScripts, false);
-		toggleScriptClasses(".no-scripts", false, highlightDataScripts || highlightClientScripts);
-	},
-	{ immediate: true },
-);
 </script>

From 9c907a0041e5824cfaf999a97c5c561705d8a3b2 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Thu, 23 Apr 2026 14:50:33 +0530
Subject: [PATCH 537/547] feat: auto fetch name of container in component name
 when saved as a component

---
 frontend/src/components/BuilderBlock.vue        |  3 ++-
 frontend/src/components/Modals/NewComponent.vue | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 83a573b34..33c000c35 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -436,7 +436,8 @@ watch(
 		const mode = builderSettings.doc?.execute_block_scripts_in_editor;
 		if (mode === "Don't Execute") return;
 
-		if (mode === "Restricted") executeBlockClientScriptRestricted(uidToUse, props.breakpoint, script, allResolvedProps.value);
+		if (mode === "Restricted")
+			executeBlockClientScriptRestricted(uidToUse, props.breakpoint, script, allResolvedProps.value);
 		else executeBlockClientScriptUnrestricted(uidToUse, props.breakpoint, script, allResolvedProps.value);
 	},
 	{ immediate: true },
diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index fee0b106b..fdf2fb311 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -1,5 +1,6 @@
 <template>
 	<Dialog
+		v-model="model"
 		:options="{
 			title: 'New Component',
 			size: 'sm',
@@ -38,7 +39,7 @@ import usePageStore from "@/stores/pageStore";
 import { posthog } from "@/telemetry";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import { getBlockCopy, getBlockString } from "@/utils/helpers";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const componentStore = useComponentStore();
 const canvasStore = useCanvasStore();
@@ -48,7 +49,16 @@ const props = defineProps<{
 	block: Block;
 }>();
 
-const componentName = ref("");
+// Add defineModel and fix the watch
+const model = defineModel<boolean>();
+
+const componentName = ref(props.block.blockName || "");
+
+watch(model, (isOpen) => {
+	if (isOpen) {
+		componentName.value = props.block.blockName || "";
+	}
+});
 const isGlobalComponent = ref(0);
 
 const createComponentHandler = async (context: { close: () => void }) => {

From be800cf087cdb46e9ce82152c0f3e6fddb2feca3 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Thu, 23 Apr 2026 14:52:06 +0530
Subject: [PATCH 538/547] fix: clear value when clicked on cross in component
 name input

---
 frontend/src/components/Controls/Input.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
index 8337db611..ae25c074d 100644
--- a/frontend/src/components/Controls/Input.vue
+++ b/frontend/src/components/Controls/Input.vue
@@ -97,6 +97,8 @@ const { hasNumber, incrementValue, decrementValue } = useNumberInput({
 
 const clearValue = () => {
 	data.value = "";
+	emit("update:modelValue", "");
+	emit("input", "");
 };
 
 const triggerUpdate = useDebounceFn(($event: Event) => {

From b7cf272f429fb22a56d677fc500b947d8801a733 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Thu, 23 Apr 2026 14:53:47 +0530
Subject: [PATCH 539/547] refactor: removed comments

---
 frontend/src/components/Modals/NewComponent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Modals/NewComponent.vue b/frontend/src/components/Modals/NewComponent.vue
index fdf2fb311..bae756404 100644
--- a/frontend/src/components/Modals/NewComponent.vue
+++ b/frontend/src/components/Modals/NewComponent.vue
@@ -49,7 +49,6 @@ const props = defineProps<{
 	block: Block;
 }>();
 
-// Add defineModel and fix the watch
 const model = defineModel<boolean>();
 
 const componentName = ref(props.block.blockName || "");

From 465cc7cc9a2e1be8a38d370ac66e8e452c7bf4ac Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Thu, 23 Apr 2026 15:25:16 +0530
Subject: [PATCH 540/547] fix: changed height to fix movement on scroll of
 settings modal

---
 frontend/src/components/BuilderSettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderSettings.vue b/frontend/src/components/BuilderSettings.vue
index ffca92a0a..5fa83cb22 100644
--- a/frontend/src/components/BuilderSettings.vue
+++ b/frontend/src/components/BuilderSettings.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex h-[90vh] max-h-[800px] overflow-hidden">
+	<div class="flex h-[88vh] max-h-[800px] overflow-hidden">
 		<div class="flex w-48 shrink-0 flex-col gap-5 bg-surface-gray-1 p-4 px-2">
 			<span class="px-2 text-lg font-semibold text-ink-gray-9">Settings</span>
 			<div class="flex flex-col" v-for="(item, index) in settingsSidebarItems" :key="index">

From 6dbd20f7cc67c981c181a2fa16378ba02bf62776 Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Fri, 24 Apr 2026 13:10:22 +0530
Subject: [PATCH 541/547] fix: increment using key up and key down, more
 visibility on hover

---
 frontend/src/components/Controls/NumberArrows.vue         | 2 +-
 frontend/src/components/Controls/PropertyControlInput.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/NumberArrows.vue b/frontend/src/components/Controls/NumberArrows.vue
index 694f0bc2b..17a519707 100644
--- a/frontend/src/components/Controls/NumberArrows.vue
+++ b/frontend/src/components/Controls/NumberArrows.vue
@@ -79,7 +79,7 @@ function stopHold() {
 <style scoped>
 .circle-cursor {
 	cursor:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='gray' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E")
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='gray' fill-opacity='0.4' stroke='none'/%3E%3C/svg%3E")
 			7 7,
 		auto;
 }
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 34162e702..4ca1ba474 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -8,6 +8,7 @@
 			:defaultValue="defaultValue"
 			:placeholder="placeholder"
 			@update:modelValue="$emit('update:modelValue', $event)"
+			@keydown="$emit('keydown', $event)"
 			:class="componentClass">
 			<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
 				<slot :name="name" v-bind="slotData || {}" />

From 47652a8f0076d864a4ca28fd631501b8933c16af Mon Sep 17 00:00:00 2001
From: Vibhuti Garachh <vibhutigarachh4@gmail.com>
Date: Fri, 24 Apr 2026 15:07:30 +0530
Subject: [PATCH 542/547] fix: removed step from height and letter,enabled
 slider for triggering arrow up and down from keyboard

---
 .../src/components/BlockPropertySections/TypographySection.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 1d7defff0..a2d12357f 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -123,7 +123,7 @@ const typographySectionProperties = [
 			return {
 				label: "Height",
 				propertyKey: "lineHeight",
-				step: 0.1,
+				enableSlider: true,
 			};
 		},
 		searchKeyWords: "Font, Height, LineHeight, Line Height",
@@ -135,7 +135,7 @@ const typographySectionProperties = [
 			return {
 				label: "Letter",
 				propertyKey: "letterSpacing",
-				step: 0.1,
+				enableSlider: true,
 			};
 		},
 		searchKeyWords: "Font, Letter, LetterSpacing, Letter Spacing",

From ae1808c14d6314d88eae13c64650c938d3a7cbb8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 24 Apr 2026 15:15:31 +0530
Subject: [PATCH 543/547] fix: Remove forced "relative" position for HTML block
 to match editor with rendered block

fixes: https://github.com/frappe/builder/issues/560
---
 frontend/src/components/BlockHTML.vue                |  2 +-
 frontend/src/components/BlockPositionHandler.vue     | 12 +++++++++---
 frontend/src/components/BuilderBlock.vue             |  1 -
 .../src/components/Controls/StylePropertyControl.vue |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 2bd1f3940..5e4a7f074 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="component" class="!relative" v-html="html"></div>
+	<div ref="component" v-html="html"></div>
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
diff --git a/frontend/src/components/BlockPositionHandler.vue b/frontend/src/components/BlockPositionHandler.vue
index 3550f6c5f..64c675717 100644
--- a/frontend/src/components/BlockPositionHandler.vue
+++ b/frontend/src/components/BlockPositionHandler.vue
@@ -2,14 +2,15 @@
 	<div class="flex w-full flex-col items-center gap-5">
 		<StylePropertyControl
 			propertyKey="position"
-			:component="OptionToggle"
+			type="select"
 			:getModelValue="() => position"
-			:setModelValue="(val) => (position = val)"
+			:setModelValue="setPosition"
 			defaultValue="static"
 			:enableStates="false"
 			:options="[
 				{ label: 'Auto', value: 'static' },
 				{ label: 'Free', value: 'absolute' },
+				{ label: 'Relative', value: 'relative' },
 				{
 					label: 'Fixed',
 					value: 'fixed',
@@ -68,7 +69,6 @@
 </template>
 <script setup lang="ts">
 import InlineInput from "@/components/Controls/InlineInput.vue";
-import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import blockController from "@/utils/blockController";
 import { computed, watch } from "vue";
@@ -93,6 +93,12 @@ const position = computed({
 	},
 });
 
+const setPosition = (val: string | number | boolean) => {
+	if (typeof val === "string") {
+		position.value = val;
+	}
+};
+
 watch(position, (value) => {
 	if (value === "static") {
 		blockController.setStyle("top", "");
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 33c000c35..a981a8fb8 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -78,7 +78,6 @@ const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
 const component = ref<HTMLElement | InstanceType<typeof TextBlock> | null>(null);
 const attrs = useAttrs();
-const editor = ref<InstanceType<typeof BlockEditor> | null>(null);
 const isMounted = ref(false);
 
 const pageStore = usePageStore();
diff --git a/frontend/src/components/Controls/StylePropertyControl.vue b/frontend/src/components/Controls/StylePropertyControl.vue
index 25c473b3f..16eb1c296 100644
--- a/frontend/src/components/Controls/StylePropertyControl.vue
+++ b/frontend/src/components/Controls/StylePropertyControl.vue
@@ -31,7 +31,7 @@ const props = withDefaults(
 		maxValue?: number | null;
 		component?: Component;
 		events?: Record<string, unknown>;
-		type?: "string";
+		type?: string;
 		options?: Array<{ label: string; value: string | null }>;
 		defaultValue?: string | number;
 		allowDynamicValue?: boolean;

From 0f36d7e0ccce81c5c77834bea37d644dcef0e71a Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 24 Apr 2026 15:24:34 +0530
Subject: [PATCH 544/547] ci: Update pip-audit command to ignore vulnerability
 CVE-2026-28684

---
 .github/workflows/linter.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
index 7f55962c6..2c7373563 100644
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Install and run pip-audit
         run: |
           pip install pip-audit
-          pip-audit --desc on --ignore-vuln PYSEC-2023-312 .
+          pip-audit --desc on --ignore-vuln PYSEC-2023-312 --ignore-vuln CVE-2026-28684 .
 
   precommit:
     name: 'Pre-Commit'

From ddcc648c5c02d4322badd14f22f8129bcc5b55d8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 24 Apr 2026 16:41:21 +0530
Subject: [PATCH 545/547] fix: simplify position retrieval logic in
 BlockPositionHandler

---
 frontend/src/components/BlockPositionHandler.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/BlockPositionHandler.vue b/frontend/src/components/BlockPositionHandler.vue
index 64c675717..06b9287cc 100644
--- a/frontend/src/components/BlockPositionHandler.vue
+++ b/frontend/src/components/BlockPositionHandler.vue
@@ -76,9 +76,6 @@ import { computed, watch } from "vue";
 const position = computed({
 	get() {
 		const pos = (blockController.getStyle("position") as string) || "static";
-		if (["relative", "static"].includes(pos)) {
-			return "static";
-		}
 		return pos;
 	},
 	set(value: string) {

From edf8022f385269aab752e0147d367a5e122ec2c7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 24 Apr 2026 16:44:00 +0530
Subject: [PATCH 546/547] fix: allow "relative" position for movable blocks in
 Block class

---
 frontend/src/block.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/block.ts b/frontend/src/block.ts
index 2914a0bf8..c279854f6 100644
--- a/frontend/src/block.ts
+++ b/frontend/src/block.ts
@@ -500,7 +500,7 @@ class Block implements BlockOptions {
 		};
 	}
 	isMovable(): boolean {
-		return ["absolute", "fixed"].includes(this.getStyle("position") as string);
+		return ["absolute", "fixed", "relative"].includes(this.getStyle("position") as string);
 	}
 	move(direction: "up" | "left" | "down" | "right") {
 		if (!this.isMovable()) {

From c42eebf4018fc4052c2fdd611b5d5172454d1c01 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sat, 25 Apr 2026 09:10:38 +0530
Subject: [PATCH 547/547] fix: Force relative position for HTML block if
 position is not set

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/src/components/BlockHTML.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BlockHTML.vue b/frontend/src/components/BlockHTML.vue
index 5e4a7f074..adb55633b 100644
--- a/frontend/src/components/BlockHTML.vue
+++ b/frontend/src/components/BlockHTML.vue
@@ -1,5 +1,10 @@
 <template>
-	<div ref="component" v-html="html"></div>
+	<div
+		ref="component"
+		:class="{
+			'!relative': !block.getStyle('position'),
+		}"
+		v-html="html"></div>
 </template>
 <script setup lang="ts">
 import type Block from "@/block";