@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/admin/navigation-guard.js

@@ -0,0 +1,55 @@
+export default class NavigationGuard {
+  constructor(router, adminStoreDefinition) {
+    this.router = router;
+    this.adminStoreDefinition = adminStoreDefinition;
+    this.extendRouteMethods();
+  }
+  programmatic = false;
+  extendRouteMethods() {
+    ["push", "go", "back", "forward", "replace"].forEach((methodName) => {
+      const routerFn = this.router[methodName];
+      this.router[methodName] = (...args) => {
+        this.programmatic = true;
+        return routerFn.apply(this.router, args);
+      };
+    });
+  }
+  isRouteForcedNavigation(toRoute) {
+    const cwaForceQuery = toRoute.query?.cwa_force === "true";
+    if (cwaForceQuery) {
+      delete toRoute.query.cwa_force;
+      return true;
+    }
+    const cwaForceParam = toRoute.params?.cwa_force;
+    return cwaForceParam === "true";
+  }
+  allowNavigation(toRoute) {
+    return this.isRouteForcedNavigation(toRoute) || !this.programmatic || !this.navigationDisabled;
+  }
+  get navigationDisabled() {
+    return this.adminStore.state.isEditing && !this.adminStore.state.navigationGuardDisabled;
+  }
+  get adminNavigationGuardFn() {
+    return (toRoute) => {
+      try {
+        const cwaForceQuery = toRoute.query?.cwa_force;
+        if (!this.allowNavigation(toRoute)) {
+          return false;
+        }
+        if (!cwaForceQuery) {
+          return true;
+        }
+        return {
+          path: toRoute.path,
+          query: toRoute.query,
+          hash: toRoute.hash
+        };
+      } finally {
+        this.programmatic = false;
+      }
+    };
+  }
+  get adminStore() {
+    return this.adminStoreDefinition.useStore();
+  }
+}

package/dist/runtime/admin/resource-stack-manager.d.ts

@@ -0,0 +1,92 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { AdminStore } from '../storage/stores/admin/admin-store.js';
+import type { ResourcesStore } from '../storage/stores/resources/resources-store.js';
+import type { ManageableResourceOps, StyleOptions } from './manageable-resource.js';
+import type { ComponentUi, ManagerTab } from '#cwa/module';
+import { CwaResourceTypes } from '#cwa/runtime/resources/resource-utils';
+import type { Resources } from '#cwa/runtime/resources/resources';
+interface _ResourceStackItem {
+    iri: string;
+    domElements: Ref<HTMLElement[]>;
+    displayName?: string;
+    managerTabs?: ManagerTab[];
+    ui?: ComponentUi[];
+    childIris: Ref<string[]>;
+    styles?: ComputedRef<StyleOptions | undefined>;
+    resourceOps?: ManageableResourceOps;
+}
+export type ResourceStackItem = _ResourceStackItem;
+interface AddToStackWindowEvent {
+    clickTarget: EventTarget | null;
+}
+interface AddToStackEvent extends _ResourceStackItem, AddToStackWindowEvent {
+}
+export interface AddResourceEvent {
+    addAfter: boolean | null;
+    targetIri: string;
+    closest: {
+        position?: string;
+        group?: string;
+    };
+    pageDataProperty?: string;
+}
+export default class ResourceStackManager {
+    private adminStoreDefinition;
+    private readonly resourcesStoreDefinition;
+    private readonly resources;
+    readonly forcePublishedVersion: Ref<boolean | undefined>;
+    readonly showManager: Ref<boolean>;
+    private readonly isLayoutStack;
+    private readonly _isEditingLayout;
+    private readonly currentClickTarget;
+    private readonly currentResourceStack;
+    private readonly previousResourceStack;
+    private readonly lastContextTarget;
+    private readonly contextResourceStack;
+    private readonly cachedCurrentStackItem;
+    private readonly resourceManagerState;
+    private readonly yOffset;
+    private focusComponent;
+    private focusWrapper;
+    private focusProxy;
+    private _currentStackItem;
+    private _currentIri;
+    constructor(adminStoreDefinition: AdminStore, resourcesStoreDefinition: ResourcesStore, resources: Resources);
+    private handleCurrentStackItemChange;
+    get isEditingLayout(): Ref<boolean, boolean>;
+    getState(prop: string): any;
+    setState(prop: string, value: any): void;
+    get contextStack(): ComputedRef<_ResourceStackItem[]>;
+    get resourceStack(): ComputedRef<_ResourceStackItem[]>;
+    get isPopulating(): ComputedRef<boolean>;
+    get isContextPopulating(): ComputedRef<boolean>;
+    get currentStackItem(): ComputedRef<_ResourceStackItem | undefined>;
+    get currentIri(): ComputedRef<string | undefined>;
+    resetStack(clearContextStack?: boolean): void;
+    getClosestStackItemByType(type: CwaResourceTypes): string | undefined;
+    private confirmStackChange;
+    selectStackIndex(index: number, fromContext: boolean): Promise<void>;
+    private getCurrentTarget;
+    completeStack(event: AddToStackWindowEvent, isContext?: boolean, type?: undefined | 'page' | 'layout'): void;
+    addToStack(event: AddToStackEvent, isContext?: boolean, resourceOps?: ManageableResourceOps): void;
+    private _addToStack;
+    private finishStack;
+    isComponentGroupDisabled(iri: string): boolean;
+    isComponentDisabled(iri: string): boolean;
+    private filterDisabledStackItems;
+    private getCurrentStack;
+    private insertResourceStackItem;
+    redrawFocus(): void;
+    private createFocusComponent;
+    private removeFocusComponent;
+    private scrollIntoView;
+    private isElementOutsideViewport;
+    private listenEditModeChange;
+    private listenCurrentIri;
+    private resetResourceManagerVars;
+    private isResourceInStack;
+    private get isEditing();
+    private get adminStore();
+    private get resourcesStore();
+}
+export {};

package/dist/runtime/admin/resource-stack-manager.js

@@ -0,0 +1,355 @@
+import { computed, createApp, nextTick, ref, shallowRef, watch } from "vue";
+import { consola as logger } from "consola";
+import { createConfirmDialog } from "vuejs-confirm-dialog";
+import ComponentFocus from "../templates/components/main/admin/resource-manager/ComponentFocus.vue";
+import { CwaResourceTypes, getResourceTypeFromIri } from "#cwa/runtime/resources/resource-utils";
+import ConfirmDialog from "#cwa/runtime/templates/components/core/ConfirmDialog.vue";
+export default class ResourceStackManager {
+  constructor(adminStoreDefinition, resourcesStoreDefinition, resources) {
+    this.adminStoreDefinition = adminStoreDefinition;
+    this.resourcesStoreDefinition = resourcesStoreDefinition;
+    this.resources = resources;
+    watch(() => this.isEditing, this.listenEditModeChange.bind(this));
+    watch(this.currentIri, this.listenCurrentIri.bind(this));
+    watch(this.currentStackItem, this.handleCurrentStackItemChange.bind(this));
+    watch(this.showManager, (newValue) => !newValue && this.removeFocusComponent());
+  }
+  forcePublishedVersion = ref();
+  showManager = ref(false);
+  isLayoutStack = ref(false);
+  _isEditingLayout = ref(false);
+  currentClickTarget = ref(null);
+  currentResourceStack = shallowRef([]);
+  previousResourceStack = shallowRef([]);
+  lastContextTarget = ref(null);
+  contextResourceStack = shallowRef([]);
+  cachedCurrentStackItem = shallowRef();
+  resourceManagerState = ref({});
+  yOffset = 100;
+  focusComponent;
+  focusWrapper;
+  focusProxy;
+  _currentStackItem;
+  _currentIri;
+  async handleCurrentStackItemChange(currentStackItem) {
+    this.cachedCurrentStackItem.value = currentStackItem;
+    await nextTick();
+    this.scrollIntoView();
+    this.createFocusComponent();
+  }
+  get isEditingLayout() {
+    return this._isEditingLayout;
+  }
+  getState(prop) {
+    return this.resourceManagerState.value[prop];
+  }
+  setState(prop, value) {
+    Object.assign(this.resourceManagerState.value, { [prop]: value });
+  }
+  get contextStack() {
+    return computed(() => {
+      return this.lastContextTarget.value ? [] : this.contextResourceStack.value;
+    });
+  }
+  get resourceStack() {
+    return computed(() => {
+      return this.currentClickTarget.value ? [] : this.currentResourceStack.value;
+    });
+  }
+  get isPopulating() {
+    return computed(() => !!this.currentClickTarget.value);
+  }
+  get isContextPopulating() {
+    return computed(() => !!this.lastContextTarget.value);
+  }
+  get currentStackItem() {
+    if (!this._currentStackItem) {
+      this._currentStackItem = computed(() => {
+        if (!this.showManager.value) {
+          return;
+        }
+        if (this.currentClickTarget.value) {
+          return this.cachedCurrentStackItem.value;
+        }
+        return this.currentResourceStack.value[0];
+      });
+    }
+    return this._currentStackItem;
+  }
+  get currentIri() {
+    if (!this._currentIri) {
+      this._currentIri = computed(() => {
+        const currentStackItem = this.currentStackItem.value;
+        if (!currentStackItem) {
+          return;
+        }
+        const stackIri = currentStackItem.iri;
+        if (this.forcePublishedVersion.value === void 0) {
+          return stackIri;
+        }
+        if (this.forcePublishedVersion.value) {
+          return this.resourcesStore.findPublishedComponentIri(stackIri);
+        }
+        return this.resourcesStore.findDraftComponentIri(stackIri);
+      });
+    }
+    return this._currentIri;
+  }
+  resetStack(clearContextStack) {
+    if (clearContextStack) {
+      this.lastContextTarget.value = null;
+      this.contextResourceStack.value = [];
+      return;
+    }
+    this.previousResourceStack.value = this.currentResourceStack.value;
+    this.currentClickTarget.value = null;
+    this.currentResourceStack.value = [];
+  }
+  getClosestStackItemByType(type) {
+    const currentStack = this.resourceStack.value;
+    for (const stackItem of currentStack) {
+      const stackItemIri = stackItem.iri;
+      const resourceType = getResourceTypeFromIri(stackItemIri);
+      if (resourceType === type) {
+        return stackItemIri;
+      }
+    }
+  }
+  async confirmStackChange(alertData, fromContext) {
+    let cachedNewStack;
+    if (!fromContext) {
+      cachedNewStack = this.currentResourceStack.value;
+      this.currentResourceStack.value = this.previousResourceStack.value;
+    }
+    const dialog = createConfirmDialog(ConfirmDialog);
+    const { isCanceled } = await dialog.reveal(alertData);
+    if (isCanceled) {
+      if (fromContext) {
+        this.resetStack(true);
+      }
+      return false;
+    }
+    if (cachedNewStack) {
+      this.currentResourceStack.value = cachedNewStack;
+    }
+    return true;
+  }
+  async selectStackIndex(index, fromContext) {
+    if (!this.isEditing) {
+      return;
+    }
+    const fromStack = fromContext ? this.contextResourceStack : this.currentResourceStack;
+    const currentLength = fromStack.value.length;
+    if (!currentLength) {
+      this.showManager.value = false;
+      return;
+    }
+    if (index < 0 || index > currentLength - 1) {
+      logger.error(`Cannot select stack index: '${index}' is out of range`);
+      return;
+    }
+    if (this._isEditingLayout.value !== this.isLayoutStack.value) {
+      const confirmed = await this.confirmStackChange({ title: "Are you sure?", content: `<p>Are you sure you want to switch and edit the ${this.isLayoutStack.value ? "layout" : "page"}?</p>` }, fromContext);
+      if (!confirmed) {
+        this.isLayoutStack.value = this._isEditingLayout.value;
+        return;
+      }
+      this._isEditingLayout.value = this.isLayoutStack.value;
+    }
+    this.currentResourceStack.value = fromStack.value.slice(index);
+    this.showManager.value = true;
+    if (fromContext) {
+      this.resetStack(true);
+    }
+  }
+  getCurrentTarget(isContext) {
+    return isContext ? this.lastContextTarget : this.currentClickTarget;
+  }
+  completeStack(event, isContext, type) {
+    if (type) {
+      this.isLayoutStack.value = type === "layout";
+    }
+    this._addToStack(event, isContext);
+  }
+  addToStack(event, isContext, resourceOps) {
+    return this._addToStack(event, isContext, resourceOps);
+  }
+  _addToStack(event, isContext, resourceOps) {
+    const currentTarget = this.getCurrentTarget(!!isContext);
+    const { clickTarget, ...resourceStackItem } = event;
+    const isResourceClick = "iri" in resourceStackItem;
+    if (!currentTarget.value) {
+      if (!isContext && isResourceClick && this.isResourceInStack(resourceStackItem.iri, false)) {
+        currentTarget.value = clickTarget;
+        return;
+      }
+      this.resetStack(isContext);
+      if (!isContext) {
+        this.resetStack(true);
+      }
+    }
+    if (!this.isEditing) {
+      return;
+    }
+    if (isResourceClick && this.isResourceInStack(resourceStackItem.iri, !!isContext) && currentTarget.value) {
+      return;
+    }
+    if (!isResourceClick) {
+      this.finishStack(!!isContext);
+      return;
+    }
+    resourceStackItem.resourceOps = resourceOps;
+    this.insertResourceStackItem(resourceStackItem, !!isContext);
+    currentTarget.value = clickTarget;
+  }
+  finishStack(isContext) {
+    this.filterDisabledStackItems(isContext);
+    this.getCurrentTarget(isContext).value = null;
+    if (this.currentResourceStack.value.length === 0) {
+      this.previousResourceStack.value = [];
+    }
+  }
+  isComponentGroupDisabled(iri) {
+    if (getResourceTypeFromIri(iri) !== CwaResourceTypes.COMPONENT_GROUP) {
+      return false;
+    }
+    return this.resources.isDataPage.value && !this.isLayoutStack.value;
+  }
+  isComponentDisabled(iri) {
+    if (getResourceTypeFromIri(iri) !== CwaResourceTypes.COMPONENT) {
+      return false;
+    }
+    return this.resources.isDataPage.value && !this.resources.isPageDataResource(iri).value && !this.isLayoutStack.value;
+  }
+  filterDisabledStackItems(isContext) {
+    const stack = this.getCurrentStack(isContext);
+    const newStack = [];
+    for (const item of stack.value) {
+      if (this.isComponentGroupDisabled(item.iri)) {
+        continue;
+      }
+      if (this.isComponentDisabled(item.iri)) {
+        continue;
+      }
+      newStack.push(item);
+    }
+    stack.value = newStack;
+  }
+  getCurrentStack(isContext) {
+    return isContext ? this.contextResourceStack : this.currentResourceStack;
+  }
+  insertResourceStackItem(resourceStackItem, isContext) {
+    const stack = this.getCurrentStack(!!isContext);
+    const iris = this.resourcesStore.findAllPublishableIris(resourceStackItem.iri);
+    const insertAtIndex = stack.value.findIndex((existingStackItem) => {
+      const existingItemChildren = existingStackItem.childIris.value;
+      if (!existingItemChildren) {
+        return false;
+      }
+      return existingItemChildren.some((r) => iris.includes(r));
+    });
+    insertAtIndex === -1 ? stack.value.push(resourceStackItem) : stack.value.splice(insertAtIndex, 0, resourceStackItem);
+  }
+  redrawFocus() {
+    if (!this.focusProxy) {
+      return;
+    }
+    this.focusProxy.redraw();
+  }
+  createFocusComponent() {
+    this.removeFocusComponent();
+    const stackItem = this.currentStackItem.value;
+    if (!this.currentIri.value || !stackItem) {
+      return;
+    }
+    this.focusComponent = createApp(ComponentFocus, {
+      iri: this.currentIri,
+      domElements: stackItem.domElements
+    });
+    this.focusWrapper = document.createElement("div");
+    this.focusWrapper.className = "cwa:absolute cwa:z-10";
+    document.body.appendChild(this.focusWrapper);
+    this.focusProxy = this.focusComponent.mount(this.focusWrapper);
+  }
+  removeFocusComponent() {
+    if (this.focusComponent) {
+      const toUnmount = this.focusComponent;
+      this.focusComponent = void 0;
+      this.focusProxy = void 0;
+      toUnmount.unmount();
+    }
+    if (this.focusWrapper) {
+      const toRemove = this.focusWrapper;
+      this.focusWrapper = void 0;
+      toRemove.remove();
+    }
+  }
+  scrollIntoView() {
+    let element;
+    let elementOutOfView = false;
+    const stackItem = this.currentStackItem.value;
+    if (!stackItem) {
+      return;
+    }
+    for (const elCandidate of stackItem.domElements.value) {
+      if (elCandidate.nodeType === Node.ELEMENT_NODE) {
+        if (!element) {
+          element = elCandidate;
+        }
+        if (this.isElementOutsideViewport(element)) {
+          elementOutOfView = true;
+        }
+        if (elementOutOfView && element) {
+          break;
+        }
+      }
+    }
+    if (!element || !elementOutOfView) {
+      return;
+    }
+    const y = element.getBoundingClientRect().top + window.scrollY - this.yOffset;
+    window.scrollTo({ top: y, behavior: "smooth" });
+  }
+  isElementOutsideViewport(el) {
+    const { top, left, bottom, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let visibleHeight = innerHeight;
+    const managerSpacer = document.getElementById("cwa-manager-spacer");
+    if (managerSpacer) {
+      visibleHeight -= managerSpacer.offsetHeight;
+    }
+    return top < this.yOffset || left < 0 || bottom > visibleHeight || right > innerWidth;
+  }
+  listenEditModeChange(isEditing) {
+    if (!isEditing) {
+      this.showManager.value = false;
+      this.resetStack(true);
+      this._isEditingLayout.value = false;
+    }
+  }
+  listenCurrentIri(newIri, oldIri) {
+    if (newIri && oldIri) {
+      if (this.resourcesStore.isIriPublishableEquivalent(oldIri, newIri)) {
+        return;
+      }
+    }
+    this.resetResourceManagerVars();
+  }
+  resetResourceManagerVars() {
+    this.forcePublishedVersion.value = void 0;
+    this.resourceManagerState.value = {};
+  }
+  isResourceInStack(iri, isContext) {
+    const stack = isContext ? this.contextResourceStack : this.currentResourceStack;
+    return !!stack.value.find((el) => el.iri === iri);
+  }
+  get isEditing() {
+    return this.adminStore.state.isEditing;
+  }
+  get adminStore() {
+    return this.adminStoreDefinition.useStore();
+  }
+  get resourcesStore() {
+    return this.resourcesStoreDefinition.useStore();
+  }
+}

package/dist/runtime/api/api-documentation.d.ts

@@ -0,0 +1,28 @@
+import type { ApiDocumentationStore } from '../storage/stores/api-documentation/api-documentation-store.js';
+import type { CwaApiDocumentationDataInterface } from '../storage/stores/api-documentation/state.js';
+import type CwaFetch from './fetcher/cwa-fetch.js';
+export interface ApiDocumentationComponentMetadata {
+    resourceName: string;
+    endpoint: string;
+    isPublishable: boolean;
+}
+export interface ApiDocumentationComponentMetadataCollection {
+    [key: string]: ApiDocumentationComponentMetadata;
+}
+export default class ApiDocumentation {
+    private readonly cwaFetch;
+    private readonly storeDefinition;
+    private readonly apiDocsSet;
+    private apiDocPromise;
+    constructor(cwaFetch: CwaFetch, store: ApiDocumentationStore);
+    setDocsPathFromLinkHeader(linkHeader: string): void;
+    getApiDocumentation(refresh?: boolean): Promise<CwaApiDocumentationDataInterface | undefined>;
+    getComponentMetadata(refresh?: boolean, includePosition?: boolean): Promise<undefined | ApiDocumentationComponentMetadataCollection>;
+    private reRunGetApiDocumentationWhenReady;
+    private getCurrentApiDocs;
+    private awaitApiDocPromise;
+    private fetchAllApiDocumentation;
+    private doRequest;
+    private get store();
+    private get docsPath();
+}

package/dist/runtime/api/api-documentation.js

@@ -0,0 +1,131 @@
+import { ref, watch } from "vue";
+import { consola as logger } from "consola";
+import { CwaResourceTypes, getResourceTypeFromIri } from "#cwa/runtime/resources/resource-utils";
+export default class ApiDocumentation {
+  cwaFetch;
+  storeDefinition;
+  apiDocsSet = ref(false);
+  apiDocPromise;
+  constructor(cwaFetch, store) {
+    this.cwaFetch = cwaFetch;
+    this.storeDefinition = store;
+  }
+  setDocsPathFromLinkHeader(linkHeader) {
+    this.apiDocsSet.value = this.apiDocsSet.value || !!this.docsPath;
+    if (this.apiDocsSet.value) {
+      return;
+    }
+    const matches = /<(.+)>; rel="http:\/\/www.w3.org\/ns\/hydra\/core#apiDocumentation"/.exec(
+      linkHeader
+    );
+    if (!matches || !matches[1]) {
+      logger.error(
+        'The "Link" HTTP header is not of the type "http://www.w3.org/ns/hydra/core#apiDocumentation".'
+      );
+      return;
+    }
+    this.store.$patch({
+      docsPath: matches[1]
+    });
+    this.apiDocsSet.value = true;
+    logger.debug("ApiDocumentation docsPath", this.docsPath);
+  }
+  async getApiDocumentation(refresh = false) {
+    if (!this.docsPath) {
+      logger.debug("Waiting for docsPath to bet set to fetch API Documentation");
+      return this.reRunGetApiDocumentationWhenReady(refresh);
+    }
+    const currentDocs = this.getCurrentApiDocs(refresh);
+    if (currentDocs) {
+      return currentDocs;
+    }
+    logger.debug("Fetching API Documentation");
+    return await this.fetchAllApiDocumentation(this.docsPath);
+  }
+  async getComponentMetadata(refresh = false, includePosition = false) {
+    const apiDocumentation = await this.getApiDocumentation(refresh);
+    const docs = apiDocumentation?.docs;
+    const entrypoint = apiDocumentation?.entrypoint;
+    if (!docs || !entrypoint) {
+      return;
+    }
+    const properties = docs["hydra:supportedClass"].reduce(
+      (obj, supportedClass) => {
+        obj[supportedClass["rdfs:label"]] = supportedClass["hydra:supportedProperty"].map((supportedProperty) => supportedProperty["hydra:title"]);
+        return obj;
+      },
+      {}
+    );
+    const metadata = {};
+    const typeCheckArray = [CwaResourceTypes.COMPONENT];
+    if (includePosition) {
+      typeCheckArray.push(CwaResourceTypes.COMPONENT_POSITION);
+    }
+    for (const [key, endpoint] of Object.entries(entrypoint)) {
+      const rType = getResourceTypeFromIri(endpoint);
+      if (rType && typeCheckArray.includes(rType)) {
+        const resourceName = key[0].toUpperCase() + key.slice(1);
+        const isPublishable = properties?.[resourceName].includes("publishedAt") || false;
+        metadata[resourceName] = {
+          resourceName,
+          endpoint,
+          isPublishable
+        };
+      }
+    }
+    return metadata;
+  }
+  reRunGetApiDocumentationWhenReady(refresh = false) {
+    return new Promise((resolve) => {
+      watch(this.apiDocsSet, async (isSet) => {
+        if (isSet) {
+          const docs = await this.getApiDocumentation(refresh);
+          resolve(docs);
+        }
+      });
+    });
+  }
+  getCurrentApiDocs(refresh) {
+    if (!this.apiDocPromise && !refresh && this.store.$state.apiDocumentation) {
+      logger.debug("Not refreshing API Documentation. Returning cached data.");
+      return this.store.$state.apiDocumentation;
+    }
+    return null;
+  }
+  async awaitApiDocPromise() {
+    logger.debug("Waiting for previous request to complete for API Documentation");
+    await this.apiDocPromise;
+    return this.store.$state.apiDocumentation;
+  }
+  async fetchAllApiDocumentation(docsPath) {
+    if (this.apiDocPromise) {
+      return await this.awaitApiDocPromise();
+    }
+    this.apiDocPromise = Promise.all([
+      this.doRequest("/.jsonld"),
+      this.doRequest(docsPath),
+      this.doRequest("/_/page_data_metadatas")
+    ]).then((responses) => {
+      this.store.$patch({
+        apiDocumentation: {
+          entrypoint: responses[0],
+          docs: responses[1],
+          pageDataMetadata: responses[2]
+        }
+      });
+      logger.debug("New API Documentation Saved");
+      this.apiDocPromise = void 0;
+    });
+    await this.apiDocPromise;
+    return this.store.$state.apiDocumentation;
+  }
+  async doRequest(path) {
+    return await this.cwaFetch.fetch(path);
+  }
+  get store() {
+    return this.storeDefinition.useStore();
+  }
+  get docsPath() {
+    return this.store.$state.docsPath;
+  }
+}