@platecms/delta-vue 0.6.0 → 0.7.1

package/__generated__/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/codegen.config.ts

@@ -0,0 +1,23 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+
+if (import.meta.env.VITE_OATHKEEPER_ENDPOINT === undefined || import.meta.env.CODEGEN_COOKIE === undefined) {
+  throw new Error("Missing 'VITE_OATHKEEPER_ENDPOINT' and/or 'CODEGEN_COOKIE' environment variables");
+}
+
+const CONFIG: CodegenConfig = {
+  overwrite: true,
+  schema: {
+    [import.meta.env.VITE_OATHKEEPER_ENDPOINT]: {
+      headers: {
+        Cookie: import.meta.env.CODEGEN_COOKIE,
+      },
+    },
+  },
+  generates: {
+    "./packages/delta-vue/__generated__/": {
+      preset: "client",
+    },
+  },
+};
+
+export default CONFIG;

package/eslint.config.mjs

@@ -0,0 +1,43 @@
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from '@vue/eslint-config-typescript'
+import { globalIgnores } from 'eslint/config'
+import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import baseConfig from "../../eslint.base.config.mjs";
+import js from "@eslint/js";
+import pluginVue from 'eslint-plugin-vue'
+
+const compat = new FlatCompat({
+  baseDirectory: dirname(fileURLToPath(import.meta.url)),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default defineConfigWithVueTs(
+  js.configs.recommended,
+  ...baseConfig,
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  ...compat.extends(
+    "@vue/eslint-config-prettier/skip-formatting",
+  ),
+  {
+    languageOptions: {
+      parserOptions: {
+        project: "packages/delta-vue/tsconfig.*?.json",
+      },
+    },
+  },
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "**/*.vue"],
+    rules: {
+      "vue/multi-word-component-names": "off",
+      "@typescript-eslint/naming-convention": "off",
+      "@typescript-eslint/strict-boolean-expressions": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+    },
+  },
+  globalIgnores(["**/dist", "__generated__/**/*", "**/vite.config.*.timestamp*", "**/vitest.config.*.timestamp*", "package.json", "**/*.json"]),
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platecms/delta-vue",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Plugin to connect to the Plate Delta CMS in a Vue application.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -23,10 +23,10 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@platecms/delta-cast": "0.6.0",
-    "@platecms/delta-castscript": "0.6.0",
-    "@platecms/delta-client": "0.6.0",
-    "@platecms/delta-plate-resource-notation": "0.6.0",
+    "@platecms/delta-cast": "0.7.0",
+    "@platecms/delta-castscript": "0.7.0",
+    "@platecms/delta-client": "0.7.0",
+    "@platecms/delta-plate-resource-notation": "0.7.0",
     "@graphql-codegen/cli": "5.0.7",
     "@graphql-typed-document-node/core": "3.2.0",
     "axios": "1.11.0",
@@ -47,4 +47,4 @@
     "@apollo/client": "3.13.9",
     "defu": "6.1.4"
   }
-}
+}

package/project.json

@@ -0,0 +1,54 @@
+{
+  "name": "delta-vue",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/delta-vue/src",
+  "projectType": "library",
+  "tags": [
+    "package",
+    "delta-vue"
+  ],
+  "// targets": "to see all targets run: nx show project @platecms/delta-vue --web",
+  "targets": {
+    "codegen": {
+      "outputs": [
+        "{projectRoot}/app/graphql/generated.ts"
+      ],
+      "command": "graphql-codegen --config {projectRoot}/codegen.config.ts"
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "generated/dist/{projectRoot}"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "dependsOn": [
+        "build"
+      ],
+      "configurations": {
+        "dev": {
+          "command": "is-ci && echo 'Not deployed on dev.'"
+        },
+        "acc": {
+          "command": "echo 'Packages will be published via nx release publish'"
+        },
+        "prod": {
+          "command": "is-ci && echo 'Not deployed on prod.'"
+        }
+      }
+    }
+  }
+}

package/src/components/ExperienceComponent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {sortBy} from "lodash";
+import type {ExperienceComponent} from "../../__generated__/graphql";
+import RenderLibraryComponent from "./RenderLibraryComponent.vue";
+import GridPlacement from "./GridPlacement.vue";
+
+defineProps<{
+  experienceComponent: ExperienceComponent
+}>()
+</script>
+
+<template>
+  <slot name="render-component">
+    <RenderLibraryComponent
+      :building-block="experienceComponent.buildingBlock"
+      :building-block-field-fulfillments="experienceComponent.buildingBlockFieldFulfillments"
+    />
+  </slot>
+
+  <slot name="grid-placements">
+    <GridPlacement v-for="gridPlacement in sortBy(experienceComponent.grid?.gridPlacements, 'row')" :grid-placement="gridPlacement" :key="gridPlacement.prn" />
+  </slot>
+</template>
+
+<style scoped>
+</style>

package/src/components/GridPlacement.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type {GridPlacement} from "../../__generated__/graphql";
+import ExperienceComponent from "./ExperienceComponent.vue";
+
+defineProps<{
+  gridPlacement: GridPlacement
+}>()
+</script>
+
+<template>
+  <ExperienceComponent :experience-component="gridPlacement.experienceComponent" />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/RenderLibraryComponent.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import {type Component, computed, inject} from "vue";
+import type {BuildingBlock, BuildingBlockFieldFulfillment} from "../../__generated__/graphql";
+
+const library = inject<{ [key: string]: Component }>('library')
+
+const props = withDefaults(
+  defineProps<{
+    buildingBlock?: BuildingBlock
+    buildingBlockFieldFulfillments?: BuildingBlockFieldFulfillment[]
+  }>(), {
+    buildingBlockFieldFulfillments: () => []
+  }
+)
+
+const currentComponent = computed(() => {
+  if(!library || !props.buildingBlock) return undefined;
+
+  return library[props.buildingBlock.slug]
+})
+</script>
+
+<template>
+  <component v-if="currentComponent" :is="currentComponent" :building-block="buildingBlock" :building-block-field-fulfillments="buildingBlockFieldFulfillments" />
+  <slot name="missing-component" :data="buildingBlock" v-else-if="buildingBlock" />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/RootExperienceComponentProvider.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type {ExperienceComponent} from "../../__generated__/graphql";
+import ExperienceComponentComponent from "./ExperienceComponent.vue";
+
+defineProps<{
+  rootExperienceComponent: ExperienceComponent
+}>();
+</script>
+
+<template>
+  <slot>
+    <ExperienceComponentComponent v-if="rootExperienceComponent" :experience-component="rootExperienceComponent" />
+  </slot>
+</template>
+
+<style scoped></style>

package/src/components/atoms/icon/FontAwesomeIcon.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  icon: [string, string]
+  className?: string
+  size?: string
+  spin?: boolean
+}>()
+
+const iconStyle = computed(() => {
+  return props.icon[0] === 'fas' ? 'fa-solid' : 'fa-light'
+})
+
+</script>
+
+<template>
+  <i
+    :class="`${iconStyle} fa-${icon[1]} ${className ?? ''} ${size && size !== 'md' ? `text-${size}` : 'text-[16px]'} ${spin ? 'fa-spin' : ''}`"
+  ></i>
+</template>

package/src/components/editor/EditorExperienceComponent.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import {
+  type Draft,
+} from "@platecms/delta-client/utils"
+import {sortBy} from "lodash";
+import type {ExperienceComponent, GridPlacement} from "../../../__generated__/graphql";
+import {inject} from "vue";
+import EditorControlsContainer from "./controls/EditorControlsContainer.vue";
+import RenderLibraryComponent from "../RenderLibraryComponent.vue";
+import MissingExperienceComponent from "../placeholders/MissingExperienceComponent.vue";
+import EditorGridPlacement from "./EditorGridPlacement.vue";
+
+defineProps<{
+  rows?: number
+  experienceComponent: Draft<ExperienceComponent>
+  gridPlacement?: Draft<GridPlacement>
+}>()
+
+const blacklist = inject<string[]>('blacklist', [])
+</script>
+
+<template>
+  <EditorControlsContainer v-if="experienceComponent?.buildingBlock && !blacklist.includes(experienceComponent.buildingBlock.slug)" :rows="rows" :row="gridPlacement?.row" :experience-component="experienceComponent">
+    <RenderLibraryComponent :building-block="experienceComponent.buildingBlock" :building-block-field-fulfillments="experienceComponent.buildingBlockFieldFulfillments">
+      <template v-slot:missing-component="slotProps">
+        <MissingExperienceComponent v-if="slotProps.data" :building-block="slotProps.data" />
+      </template>
+    </RenderLibraryComponent>
+  </EditorControlsContainer>
+
+  <EditorGridPlacement v-for="gridPlacement in sortBy(experienceComponent.grid?.gridPlacements, 'row')" :grid-placement="gridPlacement as Draft<GridPlacement>" :rows="experienceComponent?.grid?.gridPlacements.length" :key="gridPlacement.prn" />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/editor/EditorGridPlacement.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import {throttle} from "lodash";
+import {ref, inject} from "vue";
+import type { Ref } from "vue";
+import {WindowConnector, ConnectorEventType, type Draft} from "@platecms/delta-client/utils"
+import type { ExperienceComponentCreateEvent } from "@platecms/delta-client/utils"
+import type {BuildingBlock, ExperienceComponent, GridPlacement} from "../../../__generated__/graphql";
+import RenderLibraryComponent from "../RenderLibraryComponent.vue";
+import MissingExperienceComponent from "../placeholders/MissingExperienceComponent.vue";
+import EditorExperienceComponent from "./EditorExperienceComponent.vue";
+
+const props = defineProps<{
+  rows?: number
+  gridPlacement: Draft<GridPlacement>
+}>()
+
+const buildingBlockToCreate = inject<Ref<BuildingBlock | undefined>>('buildingBlockToCreate')
+const connector = inject<WindowConnector>('connector')
+const mode = inject<Ref<'edit' | 'drag'>>('mode')
+
+const isInsideTarget = ref(false)
+
+const mousePosition: Ref<'bottom' | 'top' | undefined> = ref(undefined)
+
+const target = ref<HTMLElement | undefined>(undefined)
+
+ 
+const updateMode = inject<(mode: 'edit' | 'drag' | 'preview') => void>('updateMode')
+const throttleHandleMouseOver = throttle(handleMouseOver, 250)
+
+function handleMouseOver(event: MouseEvent) {
+  if(!isInsideTarget.value || !target.value) return
+
+  const targetRectangle = target.value.getBoundingClientRect();
+
+  // const x = event.clientX - targetRectangle.left;
+  const y = event.clientY - targetRectangle.top;
+
+  mousePosition.value = y > Math.ceil(targetRectangle.height / 2) ? 'bottom' : 'top';
+}
+
+function handleMouseUp() {
+  if(mousePosition.value === undefined || mode?.value !== 'drag') return
+
+  const index = props.gridPlacement.row + (mousePosition.value === 'bottom' ? 1 : 0)
+
+  connector?.send({ type: ConnectorEventType.EXPERIENCE_COMPONENT_CREATE, payload: { index: index > -1 ? index : 0 } } as ExperienceComponentCreateEvent)
+  if(updateMode) updateMode('edit')
+  mousePosition.value = undefined
+}
+</script>
+
+<template>
+  <div
+      ref="target"
+      @mouseup="handleMouseUp"
+      @mouseenter="() => isInsideTarget = true"
+      @mouseleave="() => {
+        isInsideTarget = false
+        mousePosition = undefined
+      }"
+      @mousemove="throttleHandleMouseOver"
+  >
+    <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'top'" class="dv:animate-pulse dv:outline-2 dv:outline-offset-2 dv:outline-gray-800 dv:outline-dashed">
+      <RenderLibraryComponent :building-block="buildingBlockToCreate">
+        <template v-slot:missing-component="slotProps">
+          <MissingExperienceComponent v-if="slotProps.data" :building-block="slotProps.data" />
+        </template>
+      </RenderLibraryComponent>
+    </div>
+
+    <EditorExperienceComponent :experience-component="gridPlacement.experienceComponent as Draft<ExperienceComponent>" :grid-placement="gridPlacement" :rows="rows" />
+
+    <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'bottom'" class="dv:animate-pulse dv:outline-2 dv:outline-offset-2 dv:outline-gray-800 dv:outline-dashed">
+      <RenderLibraryComponent :building-block="buildingBlockToCreate">
+        <template v-slot:missing-component="slotProps">
+          <MissingExperienceComponent v-if="slotProps.data" :building-block="slotProps.data" />
+        </template>
+      </RenderLibraryComponent>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/editor/EditorRootExperienceComponent.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type {ExperienceComponent} from "../../../__generated__/graphql";
+import { type Draft } from "@platecms/delta-client/utils";
+import EditorExperienceComponent from "./EditorExperienceComponent.vue";
+
+defineProps<{
+  rootExperienceComponent: Draft<ExperienceComponent>
+}>();
+</script>
+
+<template>
+  <EditorExperienceComponent v-if="rootExperienceComponent" :experience-component="rootExperienceComponent" />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/editor/controls/EditorControlsContainer.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import {inject} from "vue";
+import {
+  ConnectorEventType,
+  type Draft,
+  type ExperienceComponentEditEvent,
+  type ExperienceComponentRemoveEvent,
+  GridPlacementDownEvent,
+  GridPlacementUpEvent,
+  WindowConnector
+} from "@platecms/delta-client/utils"
+import type {ExperienceComponent} from "../../../../__generated__/graphql";
+import FontAwesomeIcon from '../../atoms/icon/FontAwesomeIcon.vue'; 
+
+const connector = inject<WindowConnector>('connector')
+const mode = inject<'edit' | 'drag' | 'preview'>('mode', 'preview')
+
+defineProps<{
+  rows?: number
+  row?: number
+  experienceComponent: Draft<ExperienceComponent>
+}>()
+</script>
+
+<template>
+  <div class="dv:relative dv:group/controls dv:hover:outline-2 dv:outline-gray-800 dv:hover:-outline-offset-2 dv:hover:bg-gray-200 hover:dv:outline-gray-800 hover:dv:outline-dashed dv:z-40 dv:cursor-pointer">
+    <slot />
+
+    <div class="dv:hidden dv:group-hover/controls:flex dv:absolute dv:z-50 dv:top-0 dv:w-full dv:items-center dv:justify-center">
+      <div class="dv:rounded-b-md dv:bg-gray-800 dv:px-6 dv:py-2 dv:text-white dv:text-xs">
+        <p>
+          {{ experienceComponent.buildingBlock?.slug ?? 'No slug' }}
+        </p>
+      </div>
+    </div>
+    <div v-if="experienceComponent.isDraft" class="delta-snapshot-ignore dv:absolute dv:top-4 dv:right-4">
+      <div class="dv:px-3 dv:h-8 dv:bg-gray-800 dv:text-white dv:text-xs dv:flex dv:flex-col dv:gap-2 dv:items-center dv:justify-center dv:rounded-full">
+        <p>
+          Draft
+        </p>
+      </div>
+    </div>
+    <div v-if="mode === 'edit'" class="delta-snapshot-ignore dv:absolute dv:left-4 dv:top-4 dv:flex dv:gap-2 dv:z-50">
+      <!--  Edit button    -->
+      <div
+          @click="connector?.send({
+          type: ConnectorEventType.EXPERIENCE_COMPONENT_EDIT,
+          payload: {
+            uuid: experienceComponent.uuid,
+            prn: experienceComponent.prn
+          }
+        } as ExperienceComponentEditEvent)"
+          class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
+      >
+        <FontAwesomeIcon :icon="['fal', 'pencil']" />
+      </div>
+
+      <!--  Remove button    -->
+      <div
+        @click="connector?.send({
+          type: ConnectorEventType.EXPERIENCE_COMPONENT_REMOVE,
+          payload: {
+            uuid: experienceComponent.uuid,
+            prn: experienceComponent.prn
+          }
+        } as ExperienceComponentRemoveEvent)"
+        class="delta-snapshot-ignore dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
+      >
+        <FontAwesomeIcon :icon="['fal', 'trash-can']" />
+      </div>
+
+      <!--  Move Up button    -->
+      <div
+        v-if="(row ?? 1) > 1"
+        @click="connector?.send({
+          type: ConnectorEventType.GRID_PLACEMENT_UP,
+          payload: {
+            uuid: experienceComponent.uuid,
+            prn: experienceComponent.prn
+          }
+        } as GridPlacementUpEvent)"
+        class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
+      >
+        <FontAwesomeIcon :icon="['fal', 'arrow-up']" />
+      </div>
+
+      <!--  Move Down button    -->
+      <div
+        v-if="(row ?? 1) <( (rows ?? 1))"
+        @click="connector?.send({
+          type: ConnectorEventType.GRID_PLACEMENT_DOWN,
+          payload: {
+            uuid: experienceComponent.uuid,
+            prn: experienceComponent.prn
+          }
+        } as GridPlacementDownEvent)"
+        class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
+      >
+        <FontAwesomeIcon :icon="['fal', 'arrow-down']" />
+      </div>
+
+      <div class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer">
+        <p class="text-white">
+          {{ row }}
+        </p>
+      </div>
+    </div>
+
+    <!--  Hidden element to create snapshots  -->
+    <div class="delta-snapshot-ignore dv:absolute dv:left-4 dv:top-0 dv:h-full dv:flex dv:items-center dv:justify-center">
+      <div class="dv:opacity-0 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer">
+        <FontAwesomeIcon :icon="['fal', 'arrow-from-line']" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/placeholders/EmptyGridPlacements.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import {
+  ConnectorEventType,
+  type ExperienceComponentCreateEvent,
+  WindowConnector
+} from "@platecms/delta-client/utils"
+import {type Component, computed, inject, ref} from "vue";
+import type {BuildingBlock} from "../../../__generated__/graphql";
+const props = withDefaults(defineProps<{
+  type?: 'content-experience' | 'blueprint',
+  buildingBlockToCreate?: BuildingBlock
+}>(), {
+  type: 'content-experience'
+})
+
+const isInsidePlaceholder = ref(false)
+const connector = inject<WindowConnector>('connector')
+const library = inject<{ [key: string]: Component }>('library')
+
+const currentComponent = computed(() => {
+  if(!library || !props.buildingBlockToCreate) return undefined;
+
+  return library[props.buildingBlockToCreate.slug]
+})
+
+function handleMouseUp() {
+  connector?.send({ type: ConnectorEventType.EXPERIENCE_COMPONENT_CREATE, payload: { index: 0 } } as ExperienceComponentCreateEvent)
+  isInsidePlaceholder.value = false
+}
+</script>
+
+<template>
+  <div @mouseenter="isInsidePlaceholder = true" @mouseleave="isInsidePlaceholder = false" @mouseup="handleMouseUp()">
+    <component v-if="currentComponent && isInsidePlaceholder" :is="currentComponent" :building-block="buildingBlockToCreate" :building-block-field-fulfillments="[]" class="dv:animate-pulse" />
+
+    <div v-else class="dv:p-4 dv:h-screen dv:w-full">
+      <div class="dv:border dv:border-dashed dv:border-[#705ED9] dv:h-full dv:w-full dv:flex dv:flex-col dv:gap-4 dv:items-center dv:justify-center dv:bg-[#EAEAFA] dv:rounded-md">
+        <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="0.5" y="9.5" width="29" height="29" rx="4.5" stroke="#705ED9" stroke-dasharray="2 2"/>
+          <rect x="9.5" y="0.5" width="29" height="29" rx="4.5" fill="#EAEAFA" stroke="#705ED9"/>
+        </svg>
+
+        <p v-if="type === 'content-experience'" class="dv:text-center dv:text-[#705ED9]">
+          Drag experience components from the sidebar to begin <br>
+          or add a template
+        </p>
+
+        <p v-else class="dv:text-center dv:text-[#705ED9]">
+          Drag experience components from the sidebar to begin
+        </p>
+
+        <button v-if="type === 'content-experience'" @click="connector?.send({ type: ConnectorEventType.BLUEPRINT_OVERLAY_OPEN, payload: null })" class="dv:bg-gradient-to-bl dv:from-primary dv:to-primary-tint dv:px-6 dv:py-3 dv:rounded-md dv:text-white dv:font-medium">
+          Use template
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/placeholders/MissingExperienceComponent.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type {BuildingBlock} from "../../../__generated__/graphql";
+
+defineProps<{
+  buildingBlock: BuildingBlock
+}>()
+</script>
+
+<template>
+  <div class="dv:w-full dv:p-4">
+    <div class="dv:h-64 dv:flex dv:items-center dv:justify-center dv:border-2 dv:border-dashed">
+      <p>
+        Missing component: {{ buildingBlock.slug }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/createDelta.ts

@@ -0,0 +1,16 @@
+import { Delta } from "./index";
+import { Component, markRaw } from "vue";
+import { DeltaComponent } from "./defineComponent";
+
+export function createDelta(): Delta {
+  const delta: Delta = markRaw({
+    install(app) {
+      app.provide("delta", delta);
+      app.config.globalProperties.$delta = delta;
+    },
+
+    components: markRaw<Record<string, DeltaComponent<Component>>>({}),
+  });
+
+  return delta;
+}