@toaster-builder/site-runtime 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @toaster-builder/site-runtime
+
+Общий Nuxt runtime для пользовательских сайтов Toaster и их интеграции с Builder.
+
+Пакет пока находится в версии `0.x`: совместимость публичного API фиксируется SemVer, а версия протокола обмена с Builder хранится отдельно.
+
+## Разработка в Docker
+
+Для работы нужен только Docker с Compose plugin.
+
+```bash
+make install
+make dev
+```
+
+Playground откроется на <http://localhost:3002>.
+
+Основные проверки:
+
+```bash
+make check
+make build
+make pack
+```
+
+`make pack` создаёт локальный tarball, которым можно проверить установку пакета в шаблон до публикации в npm.
+
+## Подключение к Nuxt
+
+```bash
+npm install @toaster-builder/site-runtime
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@toaster-builder/site-runtime'],
+})
+```

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = Record<string, never>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@toaster-builder/site-runtime",
+  "configKey": "toasterSiteRuntime",
+  "compatibility": {
+    "nuxt": ">=4.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,21 @@
+import { defineNuxtModule, createResolver, addPlugin } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@toaster-builder/site-runtime",
+    configKey: "toasterSiteRuntime",
+    compatibility: {
+      nuxt: ">=4.0.0"
+    }
+  },
+  defaults: {},
+  setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtimeDirectory = resolver.resolve("./runtime");
+    nuxt.options.alias["#toaster-site-runtime"] = runtimeDirectory;
+    nuxt.options.build.transpile.push(runtimeDirectory);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/editor/add-block.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="plus">
+<path id="Vector" d="M2.9162 7H11.0838M7 2.9162V11.0838" stroke="#48484A" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

package/dist/runtime/assets/editor/ai-assistant.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.25 2.5C8.55 5.56 10.11 7.12 13.17 7.42C10.11 7.72 8.55 9.28 8.25 12.34C7.95 9.28 6.39 7.72 3.33 7.42C6.39 7.12 7.95 5.56 8.25 2.5Z" stroke="#48484A" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M14.58 10C14.77 11.96 15.77 12.96 17.73 13.15C15.77 13.34 14.77 14.34 14.58 16.3C14.39 14.34 13.39 13.34 11.43 13.15C13.39 12.96 14.39 11.96 14.58 10Z" stroke="#48484A" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M3.18 13.67C3.28 14.7 3.8 15.22 4.83 15.32C3.8 15.42 3.28 15.94 3.18 16.97C3.08 15.94 2.56 15.42 1.53 15.32C2.56 15.22 3.08 14.7 3.18 13.67Z" fill="#48484A"/>
+</svg>

package/dist/runtime/assets/editor/block-settings-center.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M3 5.5C4.38071 5.5 5.5 4.38071 5.5 3C5.5 1.61929 4.38071 0.5 3 0.5C1.61929 0.5 0.5 1.61929 0.5 3C0.5 4.38071 1.61929 5.5 3 5.5Z" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/block-settings-path.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="17.6667" height="17.6667" viewBox="0 0 17.6667 17.6667" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Path" d="M15.1853 7.49616L14.2706 5.28733L15.5 3.83333L13.8333 2.16667L12.3873 3.40246L10.1315 2.47478L9.61278 0.5H7.98415L7.45757 2.50094L5.25368 3.42997L3.83333 2.16667L2.16667 3.83333L3.37781 5.32404L2.47708 7.53861L0.5 8V9.66667L2.50093 10.2129L3.42979 12.4164L2.16667 13.8333L3.83333 15.5L5.32597 14.2836L7.49751 15.1769L8 17.1667H9.66667L10.1704 15.1777L12.3793 14.263C12.7474 14.5261 13.8333 15.5 13.8333 15.5L15.5 13.8333L14.2633 12.3745L15.1782 10.165L17.1666 9.64765L17.1667 8L15.1853 7.49616Z" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/copy-block.svg

@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="copy" clip-path="url(#clip0_0_50)">
+<path id="Vector" d="M3.3328 13.3336C2.41606 13.3336 1.666 12.5835 1.666 11.6668V3.3328C1.666 2.41606 2.41606 1.666 3.3328 1.666H11.6668C12.5835 1.666 13.3336 2.41606 13.3336 3.3328M8.3332 6.6664H16.6672C17.5877 6.6664 18.334 7.41265 18.334 8.3332V16.6672C18.334 17.5877 17.5877 18.334 16.6672 18.334H8.3332C7.41265 18.334 6.6664 17.5877 6.6664 16.6672V8.3332C6.6664 7.41265 7.41265 6.6664 8.3332 6.6664Z" stroke="#48484A" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_50">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/runtime/assets/editor/delete-block.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9L18.005 20.3463C17.8369 21.3026 17.0062 22 16.0353 22H7.96474C6.99379 22 6.1631 21.3026 5.99496 20.3463L4 9" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 6L15.375 6M3 6L8.625 6M8.625 6V4C8.625 2.89543 9.52043 2 10.625 2H13.375C14.4796 2 15.375 2.89543 15.375 4V6M8.625 6L15.375 6" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/hide-block.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 16L17.0248 12.6038" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17.5V14" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 16L6.96895 12.6124" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 8C6.6 16 17.4 16 21 8" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/move-block-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3.333v13.334M10 16.667l5.417-5.417M10 16.667 4.583 11.25" stroke="#48484A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/move-block-up.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16.667V3.333M10 3.333L4.583 8.75M10 3.333l5.417 5.417" stroke="#48484A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/editor/show-block.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12C3 12 6.6 6 12 6C17.4 6 21 12 21 12C21 12 17.4 18 12 18C6.6 18 3 12 3 12Z" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5Z" stroke="#48484A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/components/BlockEditorFrame.d.vue.ts

@@ -0,0 +1,16 @@
+import { type Component } from 'vue';
+import type { BlockOptions, PageRegion } from '#toaster-site-runtime/types/page';
+type __VLS_Props = {
+    blockComponent: Component;
+    blockId: string;
+    blockIndex: number;
+    builderReady: boolean;
+    enabled: boolean;
+    options: BlockOptions;
+    placementId: string;
+    placementCount: number;
+    region: PageRegion;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BlockEditorFrame.vue

@@ -0,0 +1,418 @@
+<script setup>
+import { computed } from "vue";
+import addBlockIcon from "../assets/editor/add-block.svg";
+import aiAssistantIcon from "../assets/editor/ai-assistant.svg";
+import blockSettingsCenterIcon from "../assets/editor/block-settings-center.svg";
+import blockSettingsPathIcon from "../assets/editor/block-settings-path.svg";
+import copyBlockIcon from "../assets/editor/copy-block.svg";
+import deleteBlockIcon from "../assets/editor/delete-block.svg";
+import hideBlockIcon from "../assets/editor/hide-block.svg";
+import moveBlockDownIcon from "../assets/editor/move-block-down.svg";
+import moveBlockUpIcon from "../assets/editor/move-block-up.svg";
+import showBlockIcon from "../assets/editor/show-block.svg";
+import BlockPlacementProvider from "#toaster-site-runtime/components/BlockPlacementProvider.vue";
+import { useBuilderEventService } from "#toaster-site-runtime/composables/useBuilderEventService";
+const props = defineProps({
+  blockComponent: { type: null, required: true },
+  blockId: { type: String, required: true },
+  blockIndex: { type: Number, required: true },
+  builderReady: { type: Boolean, required: true },
+  enabled: { type: Boolean, required: true },
+  options: { type: Object, required: true },
+  placementId: { type: String, required: true },
+  placementCount: { type: Number, required: true },
+  region: { type: null, required: true }
+});
+const builderEvents = useBuilderEventService();
+const blockVersionLabel = computed(() => {
+  const [name, variant = ""] = props.blockId.split("/");
+  const formattedVariant = /^v\d+$/i.test(variant) ? variant.toUpperCase() : variant;
+  return [name, formattedVariant].filter(Boolean).join(" ");
+});
+function postBuilderEvent(event, payload = {}) {
+  builderEvents.sendBlockEvent(event, {
+    blockId: props.blockId,
+    placementId: props.placementId,
+    region: props.region
+  }, payload);
+}
+</script>
+
+<template>
+  <div
+    class="block-editor-frame"
+    :class="{
+  'block-editor-frame--builder-ready': builderReady,
+  'block-editor-frame--disabled': !enabled
+}"
+    :data-toaster-block-id="blockId"
+    :data-toaster-placement-id="placementId"
+    :data-toaster-region="region"
+  >
+    <div class="block-editor-frame__content">
+      <BlockPlacementProvider :placement-id="placementId">
+        <component
+          :is="blockComponent"
+          :options="options"
+        />
+      </BlockPlacementProvider>
+    </div>
+
+    <template v-if="builderReady">
+      <div class="block-editor-frame__toolbar">
+        <button
+          class="block-editor-frame__control block-editor-frame__version"
+          type="button"
+          :aria-label="`\u0421\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0435\u0440\u0441\u0438\u044E \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
+          data-tooltip="Сменить версию блока"
+          @click.stop="postBuilderEvent('change-block-version')"
+        >
+          {{ blockVersionLabel }}
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u041F\u0435\u0440\u0435\u043D\u0435\u0441\u0442\u0438 \u0432\u0432\u0435\u0440\u0445 \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
+          data-tooltip="Перенести вверх"
+          :disabled="blockIndex === 0"
+          @click.stop="postBuilderEvent('move-block', { direction: 'up', index: blockIndex })"
+        >
+          <img
+            :src="moveBlockUpIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u041F\u0435\u0440\u0435\u043D\u0435\u0441\u0442\u0438 \u0432\u043D\u0438\u0437 \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
+          data-tooltip="Перенести вниз"
+          :disabled="blockIndex === placementCount - 1"
+          @click.stop="postBuilderEvent('move-block', { direction: 'down', index: blockIndex })"
+        >
+          <img
+            :src="moveBlockDownIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
+          data-tooltip="Копировать блок"
+          @click.stop="postBuilderEvent('copy-block', { enable: enabled })"
+        >
+          <img
+            :src="copyBlockIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
+          data-tooltip="Настройки блока"
+          @click.stop="postBuilderEvent('open-setting-block')"
+        >
+          <span
+            class="block-editor-frame__settings-icon"
+            aria-hidden="true"
+          >
+            <img
+              class="block-editor-frame__settings-path"
+              :src="blockSettingsPathIcon"
+              alt=""
+            >
+            <img
+              class="block-editor-frame__settings-center"
+              :src="blockSettingsCenterIcon"
+              alt=""
+            >
+          </span>
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u041E\u0442\u043A\u0440\u044B\u0442\u044C AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043D\u0442\u0430 \u0434\u043B\u044F \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
+          data-tooltip="AI-ассистент"
+          @click.stop="postBuilderEvent('open-assistant-block')"
+        >
+          <img
+            :src="aiAssistantIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="enabled ? `\u0412\u0440\u0435\u043C\u0435\u043D\u043D\u043E \u0441\u043A\u0440\u044B\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}` : `\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
+          :data-tooltip="enabled ? '\u0412\u0440\u0435\u043C\u0435\u043D\u043D\u043E \u0441\u043A\u0440\u044B\u0442\u044C \u0431\u043B\u043E\u043A' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u043B\u043E\u043A'"
+          @click.stop="postBuilderEvent('hide-block', { enable: !enabled })"
+        >
+          <img
+            :src="enabled ? hideBlockIcon : showBlockIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+
+        <button
+          class="block-editor-frame__control block-editor-frame__icon-button"
+          type="button"
+          :aria-label="`\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0431\u043B\u043E\u043A ${blockVersionLabel}`"
+          data-tooltip="Удалить блок"
+          @click.stop="postBuilderEvent('delete-block')"
+        >
+          <img
+            :src="deleteBlockIcon"
+            alt=""
+            aria-hidden="true"
+          >
+        </button>
+      </div>
+
+      <button
+        class="block-editor-frame__control block-editor-frame__add block-editor-frame__add--after"
+        type="button"
+        aria-label="Добавить блок снизу"
+        data-tooltip="Добавить блок"
+        @click.stop="postBuilderEvent('add-block', { position: 'after' })"
+      >
+        <img
+          :src="addBlockIcon"
+          alt=""
+          aria-hidden="true"
+        >
+      </button>
+
+      <button
+        class="block-editor-frame__control block-editor-frame__add-ai"
+        type="button"
+        :aria-label="`\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u0431\u043B\u043E\u043A \u0447\u0435\u0440\u0435\u0437 AI \u043F\u043E\u0441\u043B\u0435 \u0431\u043B\u043E\u043A\u0430 ${blockVersionLabel}`"
+        data-tooltip="Создать блок через AI"
+        @click.stop="postBuilderEvent('open-create-block-assistant')"
+      >
+        <img
+          :src="aiAssistantIcon"
+          alt=""
+          aria-hidden="true"
+        >
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.block-editor-frame {
+  position: relative;
+}
+.block-editor-frame::after {
+  position: absolute;
+  z-index: 2147483645;
+  border: 1px dashed transparent;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  transition: border-color 120ms ease;
+}
+.block-editor-frame--builder-ready:hover::after, .block-editor-frame--builder-ready:focus-within::after {
+  border-color: #ff0099;
+}
+
+.block-editor-frame--disabled .block-editor-frame__content {
+  filter: grayscale(1);
+  opacity: 0.42;
+}
+
+.block-editor-frame__content {
+  transition: filter 180ms ease, opacity 180ms ease;
+}
+
+.block-editor-frame__toolbar,
+.block-editor-frame__add,
+.block-editor-frame__add-ai {
+  z-index: 2147483647;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.block-editor-frame__toolbar {
+  position: absolute;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  inset: 12px 12px auto auto;
+  transform: translateY(-4px);
+}
+
+.block-editor-frame__control {
+  position: relative;
+  box-sizing: border-box;
+  margin: 0;
+  color: #000;
+  font-family: Inter, Arial, sans-serif;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  background: #fff;
+  border: 1px solid rgba(27, 67, 50, 0.12);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  appearance: none;
+}
+.block-editor-frame__control::after {
+  position: absolute;
+  z-index: 1;
+  padding: 6px 12px;
+  color: #fff;
+  font: 400 11px/normal Inter, Arial, sans-serif;
+  white-space: nowrap;
+  visibility: hidden;
+  background: #202020;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  content: attr(data-tooltip);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 100ms ease, visibility 100ms ease;
+}
+.block-editor-frame__control:hover::after, .block-editor-frame__control:focus-visible::after {
+  visibility: visible;
+  opacity: 1;
+}
+.block-editor-frame__control:focus-visible {
+  outline: 2px solid #0c8ce9;
+  outline-offset: 2px;
+}
+.block-editor-frame__control:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+.block-editor-frame__settings-icon {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.block-editor-frame__settings-icon img {
+  position: absolute;
+  display: block;
+}
+
+.block-editor-frame__icon-button .block-editor-frame__settings-path {
+  inset: 1.16665px;
+  width: 17.6667px;
+  height: 17.6667px;
+}
+
+.block-editor-frame__icon-button .block-editor-frame__settings-center {
+  inset: 7px;
+  width: 6px;
+  height: 6px;
+}
+
+.block-editor-frame__toolbar .block-editor-frame__control::after {
+  top: calc(100% + 8px);
+  right: 0;
+}
+
+.block-editor-frame__version {
+  min-height: 32px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.block-editor-frame__icon-button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  padding: 5px;
+  border-radius: 6px;
+  place-items: center;
+}
+.block-editor-frame__icon-button img {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.block-editor-frame__add,
+.block-editor-frame__add-ai {
+  position: absolute;
+  left: 50%;
+  display: grid;
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  place-items: center;
+}
+.block-editor-frame__add img,
+.block-editor-frame__add-ai img {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.block-editor-frame__add-ai {
+  bottom: 0;
+  transform: translate(calc(-50% + 32px), 50%);
+}
+.block-editor-frame__add-ai::after {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.block-editor-frame__add--after {
+  bottom: 0;
+  transform: translate(-50%, 50%);
+}
+.block-editor-frame__add--after::after {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.block-editor-frame--builder-ready:hover .block-editor-frame__toolbar,
+.block-editor-frame--builder-ready:focus-within .block-editor-frame__toolbar,
+.block-editor-frame--builder-ready:hover .block-editor-frame__add,
+.block-editor-frame--builder-ready:focus-within .block-editor-frame__add,
+.block-editor-frame--builder-ready:hover .block-editor-frame__add-ai,
+.block-editor-frame--builder-ready:focus-within .block-editor-frame__add-ai {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.block-editor-frame--builder-ready:hover .block-editor-frame__toolbar,
+.block-editor-frame--builder-ready:focus-within .block-editor-frame__toolbar {
+  transform: translateY(0);
+}
+
+@media (max-width: 499px) {
+  .block-editor-frame--builder-ready:hover::after,
+  .block-editor-frame--builder-ready:focus-within::after {
+    border-color: transparent;
+  }
+  .block-editor-frame__toolbar,
+  .block-editor-frame__add,
+  .block-editor-frame__add-ai {
+    display: none;
+  }
+}
+</style>

package/dist/runtime/components/BlockEditorFrame.vue.d.ts

@@ -0,0 +1,16 @@
+import { type Component } from 'vue';
+import type { BlockOptions, PageRegion } from '#toaster-site-runtime/types/page';
+type __VLS_Props = {
+    blockComponent: Component;
+    blockId: string;
+    blockIndex: number;
+    builderReady: boolean;
+    enabled: boolean;
+    options: BlockOptions;
+    placementId: string;
+    placementCount: number;
+    region: PageRegion;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/BlockPlacementProvider.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    placementId: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlockPlacementProvider.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { provide, toRef } from "vue";
+import { blockPlacementIdKey } from "#toaster-site-runtime/utils/block-placement";
+const props = defineProps({
+  placementId: { type: String, required: true }
+});
+provide(blockPlacementIdKey, toRef(props, "placementId"));
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/BlockPlacementProvider.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    placementId: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageRegionRenderer.d.vue.ts

@@ -0,0 +1,16 @@
+import { type Component } from 'vue';
+import type { BlockOptions, BlockPlacement, PageRegion } from '#toaster-site-runtime/types/page';
+type __VLS_Props = {
+    builderReady: boolean;
+    isPlacementEnabled: (placement: BlockPlacement) => boolean;
+    pagePlacements: (region: PageRegion) => BlockPlacement[];
+    placementKey: (region: PageRegion, placement: BlockPlacement) => string;
+    region: PageRegion;
+    resolveBlock: (id: string) => Component;
+    resolveBlockOptions: (placement: BlockPlacement & {
+        options?: BlockOptions;
+    }) => BlockOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;