studiocms 0.1.0-beta.24 → 0.1.0-beta.26

package/dist/components/dashboard/content-mgmt/PageHeader.astro

@@ -1,13 +1,17 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Center, Group, Icon, Input, Modal } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Center } from 'studiocms:ui/components/center';
+import { Group } from 'studiocms:ui/components/group';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
 
 interface Props {
 	lang: UiLanguageKeys;
 	editPage?: boolean;
 	createPage?: boolean;
-	// title?: string;
 	editFolder?: boolean;
 	createFolder?: boolean;
 }
@@ -29,6 +33,10 @@ const editId = urlParams.get('edit') || '';
 if (editId) {
 	const res = await runSDK(SDKCoreJs.GET.page.byId(editId));
 
+	if (!res) {
+		return new Response(null, { status: 404, statusText: 'Page Not Found' });
+	}
+
 	if (editPage) {
 		pageTitle = `${res.data.title}`;
 		pageSlug = res.data.slug;
@@ -63,9 +71,9 @@ const currentMode = editPage
 <header class="page-header">
   <div class="page-title-container">
     <Button color='primary' id='nav-open' class='mobile-btn'>
-      <Icon name="bars-3" height={24} width={24} slot="start-content" />
+      <Icon name="heroicons:bars-3" height={24} width={24} slot="start-content" />
     </Button>
-    <h1 class="page-title" data-link={Astro.locals.routeMap.sdk.pages}>
+    <h1 class="page-title" data-link={Astro.locals.StudioCMS.routeMap.sdk.pages}>
       {currentMode === 'none' ? (
         <t-content-header key="title">
           {pageTitle}
@@ -90,13 +98,13 @@ const currentMode = editPage
     { editPage && ( 
       <Group>
         <Button id="delete-page-modal-trigger" color="danger" type="submit" size="sm">
-            <Icon name="trash-20-solid" width={20} height={20} />
+            <Icon name="heroicons:trash-20-solid" width={20} height={20} />
             <t-content-header key="delete-button">
               {t('delete-button')}
             </t-content-header>
         </Button>
         <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-page-form">
-          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="save-button">
             {t('save-button')}
           </t-content-header>
@@ -117,7 +125,7 @@ const currentMode = editPage
           <div class="modal-body">
             <input type="hidden" name="page-id" value={currentId} />
             <input type="hidden" name="page-slug" value={pageSlug} />
-            <input type="hidden" name="action-route" value={Astro.locals.routeMap.endpointLinks.content.page} />
+            <input type="hidden" name="action-route" value={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page} />
                     
             <span><t-content-header key="delete-modal-desc-1">
             {t('delete-modal-desc-1')}
@@ -127,7 +135,7 @@ const currentMode = editPage
            
             <Input name="slug-confirm" placeholder={`${pageSlug?.slice(0, pageSlug.length-2)}...`} isRequired />
             
-            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            <span style="color: var(--danger-base)"><t-content-header key="delete-modal-warning">
             {t('delete-modal-warning')}
           </t-content-header></span>
           </div>
@@ -138,13 +146,13 @@ const currentMode = editPage
     { editFolder && ( 
       <Group>
         <Button id="delete-folder-modal-trigger" color="danger" type="submit" size="sm">
-          <Icon name="trash-20-solid" width={20} height={20} />
+          <Icon name="heroicons:trash-20-solid" width={20} height={20} />
           <t-content-header key="delete-button">
             {t('delete-button')}
           </t-content-header>
         </Button>
         <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-folder-form">
-          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="save-button">
             {t('save-button')}
           </t-content-header>
@@ -165,7 +173,7 @@ const currentMode = editPage
           <div class="modal-body">
             <input type="hidden" name="folder-id" value={currentId} />
             <input type="hidden" name="folder-name" value={folderName} />
-            <input type="hidden" name="action-route" value={Astro.locals.routeMap.endpointLinks.content.folder} />
+            <input type="hidden" name="action-route" value={Astro.locals.StudioCMS.routeMap.endpointLinks.content.folder} />
 
             <span><t-content-header key="delete-folder-modal-desc-1">
             {t('delete-folder-modal-desc-1')}
@@ -175,7 +183,7 @@ const currentMode = editPage
 
             <Input name="confirm-folder-name" placeholder={`${folderName.slice(0, folderName.length-2)}...`} isRequired />
           
-            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            <span style="color: var(--danger-base)"><t-content-header key="delete-modal-warning">
             {t('delete-modal-warning')}
           </t-content-header></span>
           </div>
@@ -185,7 +193,7 @@ const currentMode = editPage
 
     { createFolder && ( 
       <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="create-folder-form">
-        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="create-button">
             {t('create-button')}
           </t-content-header>
@@ -195,13 +203,13 @@ const currentMode = editPage
     {createPage && ( 
       <Group>
       <Button id="draft-button" variant="outlined" size="sm" color="primary" type="submit" form="page-create-form">
-        <Icon slot="start-content" name="document-text-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:document-text-20-solid" width={20} height={20} />
           <t-content-header key="draft-button">
             {t('draft-button')}
           </t-content-header>
       </Button>
       <Button id="publish-button" variant="solid" size="sm"  color="primary" type="submit" form="page-create-form" disabled>
-        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="publish-button">
             {t('publish-button')}
           </t-content-header>
@@ -234,8 +242,8 @@ const currentMode = editPage
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components';
-    import { toast } from "studiocms:ui/components";
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from "studiocms:ui/components/toaster";
 
     const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
 
@@ -446,7 +454,7 @@ const currentMode = editPage
     }
 
     code {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
         padding: .25rem;
         border-radius: 4px;
     }

package/dist/components/dashboard/content-mgmt/PageTypeHandler.astro

@@ -0,0 +1,107 @@
+---
+import type { SettingsField } from 'studiocms:plugin-helpers';
+
+interface Props {
+	pluginFields: {
+		identifier: string;
+		fields?: SettingsField[];
+	}[];
+}
+
+const { pluginFields } = Astro.props;
+---
+
+<page-type-handler data-plugin-fields={JSON.stringify(pluginFields)}>
+	<slot />
+</page-type-handler>
+
+<script>
+	import type { SettingsField } from 'studiocms:plugin-helpers';
+
+	type PluginField = {
+		identifier: string;
+		fields?: SettingsField[];
+	};
+
+	class PageTypeHandler extends HTMLElement {
+		private pluginFields: PluginField[] = [];
+
+		constructor() {
+			super();
+			this.attachShadow({ mode: "open" });
+			this.loadPluginFields();
+		}
+
+		connectedCallback() {
+			this.setupEventListeners();
+			this.render();
+		}
+
+		private loadPluginFields() {
+			const dataPluginFields = this.getAttribute("data-plugin-fields");
+			try {
+				this.pluginFields = JSON.parse(dataPluginFields || "[]");
+			} catch {
+				this.pluginFields = [];
+			}
+		}
+
+		private render() {
+			if (!this.shadowRoot) return;
+			if (this.shadowRoot.childNodes.length === 0) {
+				const slot = document.createElement("slot");
+				this.shadowRoot.appendChild(slot);
+			}
+		}
+
+		private setupEventListeners() {
+			// Wait for DOM to be ready
+			setTimeout(() => {
+				this.setupPluginFieldsHandler();
+			}, 0);
+		}
+
+		private setupPluginFieldsHandler() {
+			const pageTypeDropdown = document.querySelector("#page-type-dropdown");
+			if (!pageTypeDropdown) return;
+
+			const pageTypeOptions = pageTypeDropdown.querySelectorAll(".sui-select-option");
+
+			pageTypeOptions.forEach((option) => {
+				option.addEventListener("click", () => {
+					this.handlePageTypeChange(option);
+				});
+			});
+		}
+
+		private handlePageTypeChange(option: Element) {
+			const selectedValue = option.getAttribute("value");
+			if (!selectedValue) return;
+
+			const matchedPluginFields = this.pluginFields.find(
+				(pluginField) => pluginField.identifier === selectedValue
+			);
+
+			this.toggleCustomPageTypeFields(matchedPluginFields);
+		}
+
+		private toggleCustomPageTypeFields(matchedPluginFields?: PluginField) {
+			const customPageTypeFields = document.getElementById("custom-page-type-fields");
+			if (!customPageTypeFields) return;
+
+			const hasFields = matchedPluginFields?.fields && matchedPluginFields.fields.length > 0;
+
+			if (hasFields) {
+				customPageTypeFields.classList.remove("page-types-hidden");
+				customPageTypeFields.style.display = "block";
+			} else {
+				customPageTypeFields.classList.add("page-types-hidden");
+				customPageTypeFields.style.display = "none";
+			}
+		}
+	}
+
+	if (!customElements.get("page-type-handler")) {
+		customElements.define("page-type-handler", PageTypeHandler);
+	}
+</script>

package/dist/components/dashboard/content-mgmt/PluginFields.astro

@@ -1,6 +1,11 @@
 ---
 import type { SettingsField } from 'studiocms:plugin-helpers';
-import { Checkbox, Input, RadioGroup, Row, Select, Textarea } from 'studiocms:ui/components';
+import { Checkbox } from 'studiocms:ui/components/checkbox';
+import { Input } from 'studiocms:ui/components/input';
+import { RadioGroup } from 'studiocms:ui/components/radiogroup';
+import { Row } from 'studiocms:ui/components/row';
+import { Select } from 'studiocms:ui/components/select';
+import { Textarea } from 'studiocms:ui/components/textarea';
 
 interface Props {
 	fields: SettingsField[];

package/dist/components/dashboard/content-mgmt/TreeRenderer.astro

@@ -30,14 +30,14 @@ const sortedData = sortTree(data);
 
 function getIcon(pageData: CombinedPageData | null) {
 	if (pageData?.slug === 'index') {
-		return 'home-modern';
+		return 'heroicons:home-modern';
 	}
 
 	if (pageData?.draft) {
-		return 'pencil';
+		return 'heroicons:pencil';
 	}
 
-	return 'document-text';
+	return 'heroicons:document-text';
 }
 ---
 
@@ -45,15 +45,15 @@ function getIcon(pageData: CombinedPageData | null) {
     page ? (
         <TreeSidebarLink 
             icon={getIcon(pageData)} 
-            href={`${Astro.locals.routeMap.mainLinks.contentManagementEdit}/?edit=${id}`}
+            href={`${Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementEdit}/?edit=${id}`}
             >
             {name}
         </TreeSidebarLink>
     ) : (
         <TreeSidebarFolder 
             {name} 
-            icon="folder" 
-            href={`${Astro.locals.routeMap.mainLinks.contentManagementFolderEdit}/?folder=${id}`}
+            icon="heroicons:folder" 
+            href={`${Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderEdit}/?folder=${id}`}
             >
             {children && children.length > 0 && (
                 <div class="inner-sidebar-folder-child-nodes">
@@ -64,10 +64,10 @@ function getIcon(pageData: CombinedPageData | null) {
     )
 ))}
 {isNewPage && (
-    <TreeSidebarLink icon="document-plus" href='#'>
+    <TreeSidebarLink icon="heroicons:document-plus" href='#'>
         New Page...
     </TreeSidebarLink>
 )}
 {isNewFolder && (
-    <TreeSidebarFolder name="New Folder..." icon="folder-plus" href="#" />
+    <TreeSidebarFolder name="New Folder..." icon="heroicons:folder-plus" href="#" />
 )}

package/dist/components/dashboard/content-mgmt/TreeSidebarFolder.astro

@@ -1,53 +1,145 @@
 ---
-import { Icon } from 'studiocms:ui/components';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'a'> {
 	/**
 	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
 	 */
-	icon: HeroIconName;
+	icon: AvailableIcons;
 	name: string;
 	href: string;
 }
 
-const { icon, name, ...props } = Astro.props;
+const { icon, name, class: className, ...props } = Astro.props;
 
 const activeIcon = `${icon}-solid`;
 
 const compId = crypto.randomUUID();
 ---
 
-<a id={compId} class="inner-sidebar-link" {...props} data-astro-reload>
-  <Icon name={icon} id="not-selected-icon" class='sidebar-link-icon not-selected' width={24} height={24} />
-  <Icon name={activeIcon as HeroIconName} id="selected-icon" class="sidebar-link-icon selected" width={24} height={24} />
+<tree-sidebar-folder
+  id={compId}
+  class:list={["inner-sidebar-link", className]}
+  {...props}
+>
+  <Icon
+    name={icon}
+    id="not-selected-icon"
+    class="sidebar-link-icon not-selected"
+    width={24}
+    height={24}
+  />
+  <Icon
+    name={activeIcon as AvailableIcons}
+    id="selected-icon"
+    class="sidebar-link-icon selected"
+    width={24}
+    height={24}
+  />
   <span class="sidebar-link-text">
     {name}
   </span>
-</a>
+</tree-sidebar-folder>
 <slot />
 
-<script is:inline data-astro-rerun define:vars={{ compId }}>
-  function setInnerSidebarLinks() {
-    const link = document.getElementById(compId)
+<script>
+  class TreeSidebarFolder extends HTMLElement {
+    href: string;
 
-    const notSelectedIcon = link.querySelector('#not-selected-icon')
-    const selectedIcon = link.querySelector('#selected-icon')
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+      this.href = this.getAttribute("href") || "#";
+    }
+
+    connectedCallback() {
+      this.render();
+      // Basic link semantics and keyboard focus
+      this.setAttribute("role", "link");
+      if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+      this.setSidebarActiveState();
+      this.setupEventListeners();
+    }
 
-    notSelectedIcon.style.display = 'block';
-    selectedIcon.style.display = 'none';
-    link.classList.remove('active');
+    render() {
+      if (!this.shadowRoot) return;
+      // Avoid duplicating the slot on reconnect
+      if (this.shadowRoot.childNodes.length === 0) {
+        const slot = document.createElement("slot");
+        this.shadowRoot.appendChild(slot);
+      }
+    }
 
-    const LinkQueryParams = new URL(link.href).searchParams.get('folder');
-    const CurrentQueryParams = new URL(window.location.href).searchParams.get('folder');
+    setSidebarActiveState() {
+      // Query icons from Light DOM since they're projected through the slot
+      const notSelectedIcon = this.querySelector("#not-selected-icon");
+      const selectedIcon = this.querySelector("#selected-icon");
 
-    if (LinkQueryParams === CurrentQueryParams) {
-      notSelectedIcon.style.display = 'none';
-      selectedIcon.style.display = 'block';
-      link.classList.add('active');
+      let hrefEdit = null;
+      try {
+        hrefEdit = new URL(
+          this.getAttribute("href") || this.href || "#",
+          window.location.origin,
+        ).searchParams.get("folder");
+      } catch {}
+      const currentEdit = new URL(window.location.href).searchParams.get(
+        "folder",
+      );
+
+      const isActive =
+        hrefEdit !== null && currentEdit !== null && hrefEdit === currentEdit;
+
+      this.classList.toggle("active", !!isActive);
+      if (notSelectedIcon)
+        (notSelectedIcon as HTMLElement).style.display = isActive
+          ? "none"
+          : "block";
+      if (selectedIcon)
+        (selectedIcon as HTMLElement).style.display = isActive
+          ? "block"
+          : "none";
+      if (isActive) {
+        this.setAttribute('aria-current', 'page');
+      } else {
+        this.removeAttribute('aria-current');
+      }
     }
+
+    setupEventListeners() {
+      this.addEventListener('click', (event) => {
+        const e = event as MouseEvent;
+        const url = new URL(this.href, window.location.origin);
+        const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
+        const target = this.getAttribute('target');
+        const openInNewTab = target === '_blank' || e.ctrlKey || e.metaKey || e.button === 1;
+
+        if (!isHttp) return;
+
+        if (openInNewTab) {
+          // Preserve default middle-click behavior if this were a native link
+          e.preventDefault();
+          window.open(url.href, '_blank');
+          return;
+        }
+
+        // Primary (left) click same-tab navigation
+        if (e.button === 0) {
+          e.preventDefault();
+          window.location.href = url.href;
+        }
+      });
+      this.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.click();
+        }
+      });
+    }
+  }
+
+  if (!customElements.get("tree-sidebar-folder")) {
+    customElements.define("tree-sidebar-folder", TreeSidebarFolder);
   }
-  document.addEventListener('astro:page-load', setInnerSidebarLinks);
-  setInnerSidebarLinks();
 </script>

package/dist/components/dashboard/content-mgmt/TreeSidebarLink.astro

@@ -1,51 +1,143 @@
 ---
-import { Icon } from 'studiocms:ui/components';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'a'> {
 	/**
 	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
 	 */
-	icon: HeroIconName;
+	icon: AvailableIcons;
 	href: string;
 }
 
-const { icon, ...props } = Astro.props;
+const { icon, class: className, ...props } = Astro.props;
 
 const activeIcon = `${icon}-solid`;
 
 const compId = crypto.randomUUID();
 ---
 
-<a id={compId} class="inner-sidebar-link" {...props} data-astro-reload>
-  <Icon name={icon} id="not-selected-icon" class='sidebar-link-icon not-selected' width={24} height={24} />
-  <Icon name={activeIcon as HeroIconName} id="selected-icon" class="sidebar-link-icon selected" width={24} height={24} />
+<tree-sidebar-link
+  id={compId}
+  class:list={["inner-sidebar-link", className]}
+  {...props}
+>
+  <Icon
+    name={icon}
+    id="not-selected-icon"
+    class="sidebar-link-icon not-selected"
+    width={24}
+    height={24}
+  />
+  <Icon
+    name={activeIcon as AvailableIcons}
+    id="selected-icon"
+    class="sidebar-link-icon selected"
+    width={24}
+    height={24}
+  />
   <span class="sidebar-link-text">
     <slot />
   </span>
-</a>
+</tree-sidebar-link>
 
-<script is:inline data-astro-rerun define:vars={{ compId }}>
-  function setInnerSidebarLinks() {
-    const link = document.getElementById(compId)
+<script>
+  class TreeSidebarLink extends HTMLElement {
+    href: string;
 
-    const notSelectedIcon = link.querySelector('#not-selected-icon')
-    const selectedIcon = link.querySelector('#selected-icon')
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+      this.href = this.getAttribute("href") || "#";
+    }
+
+    connectedCallback() {
+      this.render();
+      // Basic link semantics and keyboard focus
+      this.setAttribute("role", "link");
+      if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+      this.setSidebarActiveState();
+      this.setupEventListeners();
+    }
 
-    notSelectedIcon.style.display = 'block';
-    selectedIcon.style.display = 'none';
-    link.classList.remove('active');
+    render() {
+      if (!this.shadowRoot) return;
+      // Avoid duplicating the slot on reconnect
+      if (this.shadowRoot.childNodes.length === 0) {
+        const slot = document.createElement("slot");
+        this.shadowRoot.appendChild(slot);
+      }
+    }
 
-    const LinkQueryParams = new URL(link.href).searchParams.get('edit');
-    const CurrentQueryParams = new URL(window.location.href).searchParams.get('edit');
+    setSidebarActiveState() {
+      // Icons live in light DOM (projected via slot)
+      const notSelectedIcon = this.querySelector(".not-selected");
+      const selectedIcon = this.querySelector(".selected");
 
-    if (LinkQueryParams === CurrentQueryParams) {
-      notSelectedIcon.style.display = 'none';
-      selectedIcon.style.display = 'block';
-      link.classList.add('active');
+      let hrefEdit = null;
+      try {
+        hrefEdit = new URL(
+          this.getAttribute("href") || this.href || "#",
+          window.location.origin,
+        ).searchParams.get("edit");
+      } catch {}
+      const currentEdit = new URL(window.location.href).searchParams.get(
+        "edit",
+      );
+
+      const isActive =
+        hrefEdit !== null && currentEdit !== null && hrefEdit === currentEdit;
+
+      this.classList.toggle("active", !!isActive);
+      if (notSelectedIcon)
+        (notSelectedIcon as HTMLElement).style.display = isActive
+          ? "none"
+          : "block";
+      if (selectedIcon)
+        (selectedIcon as HTMLElement).style.display = isActive
+          ? "block"
+          : "none";
+      if (isActive) {
+        this.setAttribute('aria-current', 'page');
+      } else {
+        this.removeAttribute('aria-current');
+      }
     }
+
+    setupEventListeners() {
+      this.addEventListener('click', (event) => {
+        const e = event as MouseEvent;
+        const url = new URL(this.href, window.location.origin);
+        const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
+        const target = this.getAttribute('target');
+        const openInNewTab = target === '_blank' || e.ctrlKey || e.metaKey || e.button === 1;
+
+        if (!isHttp) return;
+
+        if (openInNewTab) {
+          // Preserve default middle-click behavior if this were a native link
+          e.preventDefault();
+          window.open(url.href, '_blank');
+          return;
+        }
+
+        // Primary (left) click same-tab navigation
+        if (e.button === 0) {
+          e.preventDefault();
+          window.location.href = url.href;
+        }
+      });
+      this.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.click();
+        }
+      });
+    }
+  }
+
+  if (!customElements.get("tree-sidebar-link")) {
+    customElements.define("tree-sidebar-link", TreeSidebarLink);
   }
-  document.addEventListener('astro:page-load', setInnerSidebarLinks);
-  setInnerSidebarLinks();
 </script>

package/dist/components/dashboard/content-mgmt/runtime.js

@@ -1,6 +1,6 @@
 import * as mod from "virtual:studiocms/components/Editors";
+import { prefixError } from "@withstudiocms/component-registry/errors";
 import { StudioCMSError } from "../../../errors.js";
-import { prefixError } from "../../../lib/renderer/errors.js";
 import { convertToSafeString } from "../../../utils/safeString.js";
 async function importEditorKeys(keys) {
   const predefinedComponents = {};