@webiny/website-builder-vue 6.4.0-beta.5 → 6.4.0-beta.6

package/{src/editorComponents/index.ts → editorComponents/index.d.ts}

@@ -5,8 +5,6 @@ import { GridColumn } from "./GridColumn.manifest.js";
 import { Image } from "./Image.manifest.js";
 import { Lexical } from "./Lexical.manifest.js";
 import { Root } from "./Root.manifest.js";
-
-export const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];
-
+export declare const editorComponents: import("@webiny/website-builder-sdk/types.js").Component[];
 export { Box, Fragment, Grid, GridColumn, Image, Lexical, Root };
 export { createLexicalValue } from "./Lexical.js";

package/editorComponents/index.js

@@ -0,0 +1,20 @@
+import { Box } from "./Box.manifest.js";
+import { Fragment } from "./Fragment.manifest.js";
+import { Grid } from "./Grid.manifest.js";
+import { GridColumn } from "./GridColumn.manifest.js";
+import { Image } from "./Image.manifest.js";
+import { Lexical } from "./Lexical.manifest.js";
+import { Root } from "./Root.manifest.js";
+const editorComponents = [
+    Root,
+    Box,
+    Grid,
+    GridColumn,
+    Image,
+    Lexical,
+    Fragment
+];
+export { createLexicalValue } from "./Lexical.js";
+export { Box, Fragment, Grid, GridColumn, Image, Lexical, Root, editorComponents };
+
+//# sourceMappingURL=index.js.map

package/editorComponents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorComponents/index.js","sources":["../../src/editorComponents/index.ts"],"sourcesContent":["import { Box } from \"./Box.manifest.js\";\nimport { Fragment } from \"./Fragment.manifest.js\";\nimport { Grid } from \"./Grid.manifest.js\";\nimport { GridColumn } from \"./GridColumn.manifest.js\";\nimport { Image } from \"./Image.manifest.js\";\nimport { Lexical } from \"./Lexical.manifest.js\";\nimport { Root } from \"./Root.manifest.js\";\n\nexport const editorComponents = [Root, Box, Grid, GridColumn, Image, Lexical, Fragment];\n\nexport { Box, Fragment, Grid, GridColumn, Image, Lexical, Root };\nexport { createLexicalValue } from \"./Lexical.js\";\n"],"names":["editorComponents","Root","Box","Grid","GridColumn","Image","Lexical","Fragment"],"mappings":";;;;;;;AAQO,MAAMA,mBAAmB;IAACC;IAAMC;IAAKC;IAAMC;IAAYC;IAAOC;IAASC;CAAS"}

package/index.d.ts

@@ -0,0 +1,10 @@
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type ComponentConstraint, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
+export { createComponent } from "./createComponent.js";
+export * from "./components/index.js";
+export * from "./editorComponents/index.js";
+export * from "./composables/useViewport.js";
+export * from "./composables/useSelectFromState.js";
+export * from "./composables/useObservable.js";
+export * from "./composables/useBindingsForElement.js";
+export * from "./composables/useDocumentState.js";
+export type { ComponentProps, ComponentPropsWithChildren, InferManifest, InferComponentChange, InferDescendantChange } from "./types.js";

package/index.js

@@ -1,4 +1,9 @@
-// Dev-only proxy: forwards to the compiled dist so that workspace symlinks
-// resolve correctly when the package is consumed by external Node.js runtimes
-// (e.g. Nitro) that follow symlinks to this source root.
-export * from "./dist/index.js";
+export * from "./components/index.js";
+export * from "./editorComponents/index.js";
+export * from "./composables/useViewport.js";
+export * from "./composables/useSelectFromState.js";
+export * from "./composables/useObservable.js";
+export * from "./composables/useBindingsForElement.js";
+export * from "./composables/useDocumentState.js";
+export { StyleSettings, contentSdk, createBooleanInput, createColorInput, createDateInput, createElement, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput, createTheme, environment, getHeadersProvider, registerComponentGroup, setHeadersProvider } from "@webiny/website-builder-sdk";
+export { createComponent } from "./createComponent.js";

package/package.json

@@ -1,8 +1,7 @@
 {
 	"name": "@webiny/website-builder-vue",
-	"version": "6.4.0-beta.5",
+	"version": "6.4.0-beta.6",
 	"type": "module",
-	"main": "index.js",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -18,21 +17,24 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/website-builder-sdk": "6.4.0-beta.5",
-		"deep-equal": "^2.2.3",
-		"mobx": "^6.15.3",
-		"vue": "^3.5.0"
+		"@webiny/website-builder-sdk": "6.4.0-beta.6",
+		"deep-equal": "2.2.3",
+		"mobx": "6.15.3",
+		"vue": "3.5.34"
 	},
 	"devDependencies": {
-		"@webiny/build-tools": "6.4.0-beta.5",
+		"@webiny/build-tools": "6.4.0-beta.6",
 		"typescript": "6.0.3"
 	},
 	"peerDependencies": {
-		"vue": ">=3.3"
+		"vue": "3.5.34"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
+	"webiny": {
+		"publishFrom": "dist"
+	},
 	"adio": {
 		"ignore": {
 			"dependencies": [

package/{src/types.ts → types.d.ts}

@@ -1,12 +1,5 @@
-import type {
-    CssProperties,
-    DocumentElement,
-    ComponentManifestInput,
-    ComponentChangeHandler,
-    DescendantChangeHandler
-} from "@webiny/website-builder-sdk";
+import type { CssProperties, DocumentElement, ComponentManifestInput, ComponentChangeHandler, DescendantChangeHandler } from "@webiny/website-builder-sdk";
 import type { VNode } from "vue";
-
 /**
  * Props received by every user-defined component registered via createComponent().
  */
@@ -16,31 +9,17 @@ export type ComponentProps<TInputs = unknown> = {
     element: DocumentElement;
     breakpoint: string;
 };
-
 /**
  * Shorthand for components that accept children (Box, Root, GridColumn, etc.).
  * `inputs.children` is the resolved VNode produced by ElementSlot.
  */
-export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<
-    TInputs & { children: VNode | null }
->;
-
-// ---------- TypeScript utility types (mirrors the React package) ----------
-
-export type ExtractInputs<T> = T extends { inputs: infer I } ? I : never;
-
-export type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<
-    Parameters<T>[0]
->;
-
-export type InferManifest<T extends (props: any) => any> = ComponentManifestInput<
-    ExtractInputs<Parameters<T>[0]>
->;
-
-export type InferComponentChange<T extends (props: any) => any> = ComponentChangeHandler<
-    ExtractInputs<Parameters<T>[0]>
->;
-
-export type InferDescendantChange<T extends (props: any) => any> = DescendantChangeHandler<
-    ExtractInputs<Parameters<T>[0]>
->;
+export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
+    children: VNode | null;
+}>;
+export type ExtractInputs<T> = T extends {
+    inputs: infer I;
+} ? I : never;
+export type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<Parameters<T>[0]>;
+export type InferManifest<T extends (props: any) => any> = ComponentManifestInput<ExtractInputs<Parameters<T>[0]>>;
+export type InferComponentChange<T extends (props: any) => any> = ComponentChangeHandler<ExtractInputs<Parameters<T>[0]>>;
+export type InferDescendantChange<T extends (props: any) => any> = DescendantChangeHandler<ExtractInputs<Parameters<T>[0]>>;

package/src/components/ConnectToEditor.ts

@@ -1,46 +0,0 @@
-import { defineComponent, ref, onMounted, h, type PropType } from "vue";
-import { contentSdk, type Component, type Document } from "@webiny/website-builder-sdk";
-import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
-import { ElementRenderer } from "./ElementRenderer.js";
-
-/**
- * Used in editing mode: fetches a fresh copy of the page from the SDK,
- * then mounts a DocumentStoreProvider + ElementRenderer for it.
- *
- * `document` is optional — when omitted (e.g. the live page is a draft not
- * yet published), the current URL pathname is used as the page path so the
- * editing SDK can still receive the document via the editor's postMessage.
- *
- * Equivalent of the React ConnectToEditor component.
- */
-export const ConnectToEditor = defineComponent({
-    name: "WebinyConnectToEditor",
-
-    props: {
-        document: { type: Object as PropType<Document | undefined>, default: undefined },
-        components: { type: Array as PropType<Component[]>, required: true }
-    },
-
-    setup(props) {
-        const data = ref<Document | null>(null);
-
-        onMounted(() => {
-            const path = props.document?.properties?.path ?? window.location.pathname;
-            contentSdk.getPage(path).then(doc => {
-                data.value = doc;
-            });
-        });
-
-        return () => {
-            if (!data.value) {
-                return null;
-            }
-
-            return h(
-                DocumentStoreProvider,
-                { id: data.value.properties.id, document: data.value },
-                { default: () => h(ElementRenderer, { id: "root" }) }
-            );
-        };
-    }
-});

package/src/components/DocumentFragment.ts

@@ -1,43 +0,0 @@
-import { defineComponent, type PropType } from "vue";
-import type { Slot } from "vue";
-
-/**
- * Declarative fragment marker — analogous to the React DocumentFragment
- * component but implemented differently in Vue.
- *
- * Usage inside a <DocumentRenderer>:
- *
- * ```vue
- * <DocumentRenderer :document="doc" :components="comps">
- *   <!-- Inject a Vue subtree into the 'header' named fragment slot -->
- *   <template #fragment:header>
- *     <MySiteHeader />
- *   </template>
- * </DocumentRenderer>
- * ```
- *
- * For component-type fragments pass a `fragments` prop directly to
- * DocumentRenderer instead:
- * ```ts
- * const fragments = [{ type: "component", component: "Webiny/MyNav", inputs: {} }];
- * ```
- */
-export type DocumentFragmentProps =
-    | { name: string; element: Slot; component?: never; inputs?: never }
-    | { component: string; inputs?: Record<string, unknown>; name?: never; element?: never };
-
-export const DocumentFragment = defineComponent({
-    name: "WebinyDocumentFragment",
-    props: {
-        name: { type: String, default: undefined },
-        component: { type: String, default: undefined },
-        inputs: {
-            type: Object as PropType<Record<string, unknown>>,
-            default: undefined
-        }
-    },
-    setup(_, { slots }) {
-        // If used directly in a template, render the default slot.
-        return () => slots.default?.() ?? null;
-    }
-});

package/src/components/DocumentRenderer.ts

@@ -1,102 +0,0 @@
-import { defineComponent, computed, h, type PropType } from "vue";
-import { contentSdk, type Component, type Document } from "@webiny/website-builder-sdk";
-import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
-import { ConnectToEditor } from "./ConnectToEditor.js";
-import { FragmentsProvider, type DocumentFragmentConfig } from "./FragmentsProvider.js";
-import { ElementRenderer } from "./ElementRenderer.js";
-import { editorComponents } from "~/editorComponents/index.js";
-
-/**
- * Top-level rendering component. Accepts a Webiny document and a list of
- * custom components, then renders the full page tree.
- *
- * **Named-slot fragments**
- *
- * Inject app-level Vue subtrees into named fragment slots:
- * ```vue
- * <DocumentRenderer :document="page.document" :components="myComps">
- *   <template #fragment:header><MySiteHeader /></template>
- *   <template #fragment:footer><MySiteFooter /></template>
- * </DocumentRenderer>
- * ```
- *
- * **Component fragments** (reference built-in editor components by name):
- * ```ts
- * const fragments = [
- *   { type: "component", component: "Webiny/MyNav", inputs: { label: "Nav" } }
- * ];
- * ```
- */
-export const DocumentRenderer = defineComponent({
-    name: "WebinyDocumentRenderer",
-
-    props: {
-        document: {
-            type: Object as PropType<Document | null>,
-            default: null
-        },
-        components: {
-            type: Array as PropType<Component[]>,
-            default: () => []
-        },
-        /** Additional fragment configs (component-type or pre-built fixed fragments). */
-        fragments: {
-            type: Array as PropType<DocumentFragmentConfig[]>,
-            default: () => []
-        }
-    },
-
-    setup(props, { slots }) {
-        // Collect named slot fragments: <template #fragment:header> etc.
-        const slotFragments = computed((): DocumentFragmentConfig[] =>
-            Object.entries(slots)
-                .filter(([name]) => name.startsWith("fragment:"))
-                .map(
-                    ([name, slot]): DocumentFragmentConfig => ({
-                        type: "fixed",
-                        name: name.slice("fragment:".length),
-                        element: slot!
-                    })
-                )
-        );
-
-        const allFragments = computed(() => [...slotFragments.value, ...props.fragments]);
-
-        return () => {
-            const { document, components } = props;
-
-            // Register all components with the SDK on every render (idempotent).
-            const allComponents = [...editorComponents, ...components];
-            allComponents.forEach(c => contentSdk.registerComponent(c));
-
-            if (!document && !contentSdk.isEditing()) {
-                return h("div", { "data-role": "document-renderer" }, slots.default?.());
-            }
-
-            return h("div", { "data-role": "document-renderer" }, [
-                h(
-                    FragmentsProvider,
-                    { fragments: allFragments.value },
-                    {
-                        default: () =>
-                            contentSdk.isEditing()
-                                ? h(ConnectToEditor, {
-                                      document: document ?? undefined,
-                                      components
-                                  })
-                                : h(
-                                      DocumentStoreProvider,
-                                      {
-                                          id: document!.properties.id,
-                                          document: document!
-                                      },
-                                      {
-                                          default: () => h(ElementRenderer, { id: "root" })
-                                      }
-                                  )
-                    }
-                )
-            ]);
-        };
-    }
-});

package/src/components/DocumentStoreProvider.ts

@@ -1,53 +0,0 @@
-import {
-    defineComponent,
-    provide,
-    inject,
-    watchEffect,
-    type InjectionKey,
-    type PropType
-} from "vue";
-import type { DocumentStore, Document } from "@webiny/website-builder-sdk";
-import { documentStoreManager } from "@webiny/website-builder-sdk";
-
-export const DOCUMENT_STORE_KEY: InjectionKey<DocumentStore> = Symbol("WebinyDocumentStore");
-
-/**
- * Creates (or retrieves) the DocumentStore for the given document ID and
- * provides it to all descendants via Vue's provide/inject.
- *
- * Equivalent of the React DocumentStoreProvider context provider.
- */
-export const DocumentStoreProvider = defineComponent({
-    name: "WebinyDocumentStoreProvider",
-
-    props: {
-        id: { type: String, required: true },
-        document: { type: Object as PropType<Document | undefined>, default: undefined }
-    },
-
-    setup(props, { slots }) {
-        const store = documentStoreManager.getStore(props.id);
-
-        watchEffect(() => {
-            if (props.document) {
-                store.setDocument(props.document);
-            }
-        });
-
-        provide(DOCUMENT_STORE_KEY, store);
-
-        return () => slots.default?.();
-    }
-});
-
-/**
- * Composable – retrieve the nearest DocumentStore from the component tree.
- * Must be called inside a setup() that is a descendant of DocumentStoreProvider.
- */
-export const useDocumentStore = (): DocumentStore => {
-    const store = inject(DOCUMENT_STORE_KEY);
-    if (!store) {
-        throw new Error("useDocumentStore must be used within a DocumentStoreProvider");
-    }
-    return store;
-};

package/src/components/EditingElementRenderer/EditingElementRenderer.presenter.ts

@@ -1,59 +0,0 @@
-// This file is identical to the React version — it is a pure-TypeScript MobX
-// class with no framework-specific code, so it can be shared as-is.
-"use client";
-import { makeAutoObservable, observable, toJS } from "mobx";
-import type { DocumentStore } from "@webiny/website-builder-sdk";
-import {
-    contentSdk,
-    jsonPatch,
-    type EditingSdk,
-    type DocumentElement
-} from "@webiny/website-builder-sdk";
-
-export class EditingElementRendererPresenter {
-    private element: DocumentElement;
-    private listeners: Array<() => void> = [];
-    private documentStore: DocumentStore;
-    private readonly editingSdk: EditingSdk | undefined;
-
-    constructor(documentStore: DocumentStore) {
-        this.documentStore = documentStore;
-        this.element = observable({}) as DocumentElement;
-        this.editingSdk = contentSdk.getEditingSdk();
-        makeAutoObservable(this);
-    }
-
-    get vm() {
-        return {
-            element: toJS(this.element)
-        };
-    }
-
-    init(element: DocumentElement) {
-        this.element = element;
-        this.setupPreview();
-    }
-
-    dispose() {
-        this.listeners.forEach(fn => fn());
-    }
-
-    private setupPreview() {
-        const element = this.element;
-        if (!element) {
-            return;
-        }
-
-        const { id } = element;
-
-        if (this.editingSdk) {
-            this.listeners.push(
-                this.editingSdk.messenger.on(`element.patch.${id}`, patch => {
-                    this.documentStore.updateDocument(document => {
-                        jsonPatch.applyPatch(document.bindings[id], patch, false, true);
-                    });
-                })
-            );
-        }
-    }
-}

package/src/components/EditingElementRenderer/EditingElementRenderer.ts

@@ -1,70 +0,0 @@
-import { defineComponent, onUnmounted, watch, h, type PropType } from "vue";
-import { type DocumentElement } from "@webiny/website-builder-sdk";
-import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter.js";
-import { LiveElementRenderer } from "../LiveElementRenderer.js";
-import { useElementSlotDepth } from "../ElementSlotDepthProvider.js";
-import { useElementIndex } from "../ElementIndexProvider.js";
-import { useDocumentStore } from "../DocumentStoreProvider.js";
-import { useObservable } from "~/composables/useObservable.js";
-
-/**
- * Wraps LiveElementRenderer with data-* attributes consumed by the Webiny
- * editor (depth, sibling index, parent element ID/slot).
- *
- * Also sets up an EditingElementRendererPresenter that listens for element
- * patch messages from the editor iframe and applies them to the document store.
- */
-export const EditingElementRenderer = defineComponent({
-    name: "WebinyEditingElementRenderer",
-
-    props: {
-        element: { type: Object as PropType<DocumentElement>, required: true }
-    },
-
-    setup(props) {
-        const documentStore = useDocumentStore();
-        const depth = useElementSlotDepth();
-        const index = useElementIndex();
-
-        const presenter = new EditingElementRendererPresenter(documentStore);
-
-        // Initialise the presenter when the element (or its ID) changes.
-        const stopWatch = watch(
-            () => props.element?.id,
-            () => {
-                if (props.element) {
-                    presenter.init(props.element);
-                }
-            },
-            { immediate: true }
-        );
-
-        onUnmounted(() => {
-            presenter.dispose();
-            stopWatch();
-        });
-
-        // Bridge the presenter's MobX observable vm into a Vue reactive ref.
-        const vm = useObservable(() => presenter.vm);
-
-        return () => {
-            const element = vm.value?.element;
-            if (!element?.id) {
-                return null;
-            }
-
-            return h(
-                "div",
-                {
-                    style: { display: "contents" },
-                    "data-element-id": element.id,
-                    "data-depth": depth,
-                    "data-parent-index": index,
-                    "data-parent-id": element.parent?.id,
-                    "data-parent-slot": element.parent?.slot
-                },
-                [h(LiveElementRenderer, { element })]
-            );
-        };
-    }
-});

package/src/components/ElementIndexProvider.ts

@@ -1,24 +0,0 @@
-import { defineComponent, provide, inject, type InjectionKey, type PropType } from "vue";
-
-const INDEX_KEY: InjectionKey<number> = Symbol("WebinyElementIndex");
-
-/**
- * Provides the sibling index of the current element to all descendants.
- */
-export const ElementIndexProvider = defineComponent({
-    name: "WebinyElementIndexProvider",
-
-    props: {
-        index: { type: Number as PropType<number>, required: true }
-    },
-
-    setup(props, { slots }) {
-        provide(INDEX_KEY, props.index);
-        return () => slots.default?.();
-    }
-});
-
-/** Returns the sibling index of the current element (0-based). */
-export const useElementIndex = (): number => {
-    return inject(INDEX_KEY, 0);
-};

package/src/components/ElementRenderer.ts

@@ -1,42 +0,0 @@
-import { defineComponent, h } from "vue";
-import { environment } from "@webiny/website-builder-sdk";
-import { EditingElementRenderer } from "./EditingElementRenderer/index.js";
-import { LiveElementRenderer } from "./LiveElementRenderer.js";
-import { useDocumentStore } from "./DocumentStoreProvider.js";
-import { useObservable } from "~/composables/useObservable.js";
-import { setElementRenderer } from "./LiveElementSlot.js";
-
-/**
- * Entry point for rendering a single document element by ID.
- *
- * - Retrieves the live element from the MobX DocumentStore (reactive via useObservable).
- * - Dispatches to EditingElementRenderer (editor mode) or LiveElementRenderer (live mode).
- */
-export const ElementRenderer = defineComponent({
-    name: "WebinyElementRenderer",
-
-    props: {
-        id: { type: String, required: true }
-    },
-
-    setup(props) {
-        const documentStore = useDocumentStore();
-
-        // Reactively track the element in the MobX store.
-        const element = useObservable(() => documentStore.getElement(props.id));
-
-        return () => {
-            if (!element.value) {
-                return null;
-            }
-
-            if (environment.isEditing()) {
-                return h(EditingElementRenderer, { element: element.value });
-            }
-            return h(LiveElementRenderer, { element: element.value });
-        };
-    }
-});
-
-// Break the circular dependency: LiveElementSlot needs ElementRenderer.
-setElementRenderer(ElementRenderer);

package/src/components/ElementSlot.ts

@@ -1,34 +0,0 @@
-import { defineComponent, h, type PropType } from "vue";
-import { environment } from "@webiny/website-builder-sdk";
-import { LiveElementSlot } from "./LiveElementSlot.js";
-import { PreviewElementSlot } from "./PreviewElementSlot.js";
-
-/**
- * Dispatches to PreviewElementSlot (editing mode) or LiveElementSlot (live
- * mode) based on the current environment.
- *
- * Used by LiveElementRenderer when resolving slot inputs so that child elements
- * are rendered recursively via ElementRenderer.
- */
-export const ElementSlot = defineComponent({
-    name: "WebinyElementSlot",
-
-    props: {
-        parentId: { type: String, required: true },
-        slot: { type: String, required: true },
-        elements: { type: Array as PropType<string[]>, default: () => [] }
-    },
-
-    setup(props) {
-        return () => {
-            if (environment.isEditing()) {
-                return h(PreviewElementSlot, {
-                    parentId: props.parentId,
-                    slot: props.slot,
-                    elements: props.elements
-                });
-            }
-            return h(LiveElementSlot, { elements: props.elements });
-        };
-    }
-});

package/src/components/ElementSlotDepthProvider.ts

@@ -1,24 +0,0 @@
-import { defineComponent, provide, inject, type InjectionKey, type PropType } from "vue";
-
-const DEPTH_KEY: InjectionKey<number> = Symbol("WebinyElementSlotDepth");
-
-/**
- * Provides the current element-slot nesting depth to all descendants.
- */
-export const ElementSlotDepthProvider = defineComponent({
-    name: "WebinyElementSlotDepthProvider",
-
-    props: {
-        depth: { type: Number as PropType<number>, required: true }
-    },
-
-    setup(props, { slots }) {
-        provide(DEPTH_KEY, props.depth);
-        return () => slots.default?.();
-    }
-});
-
-/** Returns the current slot nesting depth (0 at the root). */
-export const useElementSlotDepth = (): number => {
-    return inject(DEPTH_KEY, 0);
-};