@vigilkids/section-renderer-vue 0.0.1

package/dist/composables/useSectionStyle.mjs

@@ -0,0 +1,111 @@
+import { computed, toValue } from "vue";
+const SAFE_COLOR_PATTERN = /^#[\da-fA-F]{6}$/;
+const SPACING_PRESETS = {
+  compact: "py-8 sm:py-12",
+  standard: "py-12 sm:py-24",
+  spacious: "py-20 sm:py-32"
+};
+const ALIGN_CLASSES = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+const MAX_WIDTH_CLASSES = {
+  prose: "mx-auto max-w-prose",
+  wide: "mx-auto max-w-screen-lg",
+  full: "w-full"
+};
+const VISIBILITY_CLASSES = {
+  visible: "",
+  hidden: "hidden",
+  "mobile-only": "sm:hidden",
+  "desktop-only": "hidden sm:block"
+};
+function safeColor(value) {
+  const s = typeof value === "string" ? value : void 0;
+  if (s && SAFE_COLOR_PATTERN.test(s)) return s;
+  return void 0;
+}
+function safePixel(value) {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isNaN(n) && n >= 0 && n <= 500) return n;
+  return void 0;
+}
+export function useSectionStyle(sectionId, settings) {
+  const style = computed(() => {
+    const id = toValue(sectionId);
+    const s = toValue(settings) ?? {};
+    const classes = [];
+    const styles = {};
+    const cssParts = [];
+    const spacingPreset = s.spacing_preset;
+    if (spacingPreset && spacingPreset !== "custom" && SPACING_PRESETS[spacingPreset]) {
+      classes.push(SPACING_PRESETS[spacingPreset]);
+    }
+    const textAlign = s.text_alignment;
+    if (textAlign && ALIGN_CLASSES[textAlign]) {
+      classes.push(ALIGN_CLASSES[textAlign]);
+    }
+    const maxWidth = s.max_width;
+    if (maxWidth && MAX_WIDTH_CLASSES[maxWidth]) {
+      classes.push(MAX_WIDTH_CLASSES[maxWidth]);
+    }
+    const visibility = s.visibility;
+    if (visibility && VISIBILITY_CLASSES[visibility]) {
+      classes.push(VISIBILITY_CLASSES[visibility]);
+    }
+    const bgColor = safeColor(s.background_color);
+    if (bgColor) {
+      styles["background-color"] = bgColor;
+    }
+    const textColor = safeColor(s.text_color);
+    if (textColor) {
+      styles.color = textColor;
+    }
+    const borderRadius = safePixel(s.border_radius);
+    if (borderRadius !== void 0 && borderRadius > 0) {
+      styles["border-radius"] = `${borderRadius}px`;
+    }
+    const marginTop = safePixel(s.margin_top);
+    if (marginTop !== void 0 && marginTop > 0) {
+      styles["margin-top"] = `${marginTop}px`;
+    }
+    const marginBottom = safePixel(s.margin_bottom);
+    if (marginBottom !== void 0 && marginBottom > 0) {
+      styles["margin-bottom"] = `${marginBottom}px`;
+    }
+    if (spacingPreset === "custom") {
+      const pt = safePixel(s.padding_top);
+      const pb = safePixel(s.padding_bottom);
+      if (pt !== void 0 || pb !== void 0) {
+        const mobileRules = [];
+        const desktopRules = [];
+        if (pt !== void 0) {
+          mobileRules.push(`padding-top: ${Math.round(pt * 0.75)}px`);
+          desktopRules.push(`padding-top: ${pt}px`);
+        }
+        if (pb !== void 0) {
+          mobileRules.push(`padding-bottom: ${Math.round(pb * 0.75)}px`);
+          desktopRules.push(`padding-bottom: ${pb}px`);
+        }
+        cssParts.push(`#section-${id} { ${mobileRules.join("; ")}; }`);
+        cssParts.push(`@media (min-width: 768px) { #section-${id} { ${desktopRules.join("; ")}; } }`);
+      }
+    }
+    const customCSS = typeof s.custom_css === "string" ? s.custom_css.trim() : "";
+    if (customCSS) {
+      const sanitized = customCSS.replace(/[<>]/g, "").slice(0, 2e3);
+      if (sanitized) {
+        cssParts.push(`#section-${id} { ${sanitized} }`);
+      }
+    }
+    const customClass = typeof s.custom_class === "string" ? s.custom_class.trim() : "";
+    return {
+      wrapperClasses: classes.join(" "),
+      wrapperStyles: styles,
+      scopedCSS: cssParts.join("\n"),
+      customClass
+    };
+  });
+  return { style };
+}

package/dist/editor.d.ts

@@ -0,0 +1,4 @@
+export * from './index';
+export { createPreviewApp } from './preview/createPreviewApp';
+export type { EditorToPreviewMessage, PreviewToEditorMessage, } from '@vigilkids/section-core/bridge';
+export { BRIDGE_PROTOCOL_VERSION, HEARTBEAT_INTERVAL_MS, HEARTBEAT_MAX_MISSES, PreviewBridge, PREVIEW_CHANNEL, } from '@vigilkids/section-core/bridge';

package/dist/editor.mjs

@@ -0,0 +1,9 @@
+export * from "./index.mjs";
+export { createPreviewApp } from "./preview/createPreviewApp.mjs";
+export {
+  BRIDGE_PROTOCOL_VERSION,
+  HEARTBEAT_INTERVAL_MS,
+  HEARTBEAT_MAX_MISSES,
+  PreviewBridge,
+  PREVIEW_CHANNEL
+} from "@vigilkids/section-core/bridge";

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export type { BlockData, SectionDefinition, SectionInstance, SectionRegistration, SectionsData, } from '@vigilkids/section-core';
+export { safeColor, safeUrl } from '@vigilkids/section-core';
+export { default as FallbackSection } from './renderer/FallbackSection.vue';
+export { default as LazySection } from './renderer/LazySection.vue';
+export { default as SectionErrorBoundary } from './renderer/SectionErrorBoundary.vue';
+export { default as SectionRenderer } from './renderer/SectionRenderer.vue';
+export { default as SectionWrapper } from './renderer/SectionWrapper.vue';
+export { registerSection, useRegistry } from './composables/useRegistry';
+export { useLazyRender } from './composables/useLazyRender';
+export { useSectionStyle } from './composables/useSectionStyle';
+export type { SectionStyleResult } from './composables/useSectionStyle';
+export { useInlineEdit } from './composables/useInlineEdit';
+export type { UseInlineEditOptions } from './composables/useInlineEdit';
+export { generateJsonLdScripts, generateSectionJsonLd } from './composables/useSectionSEO';
+export type { SectionSEOOptions } from './composables/useSectionSEO';
+export { SectionRendererPlugin } from './plugin';
+export { default as RichTextSection } from './sections/RichTextSection.vue';
+export { registerArticleSections } from './sections/article';

package/dist/index.mjs

@@ -0,0 +1,14 @@
+export { safeColor, safeUrl } from "@vigilkids/section-core";
+export { default as FallbackSection } from "./renderer/FallbackSection.vue";
+export { default as LazySection } from "./renderer/LazySection.vue";
+export { default as SectionErrorBoundary } from "./renderer/SectionErrorBoundary.vue";
+export { default as SectionRenderer } from "./renderer/SectionRenderer.vue";
+export { default as SectionWrapper } from "./renderer/SectionWrapper.vue";
+export { registerSection, useRegistry } from "./composables/useRegistry.mjs";
+export { useLazyRender } from "./composables/useLazyRender.mjs";
+export { useSectionStyle } from "./composables/useSectionStyle.mjs";
+export { useInlineEdit } from "./composables/useInlineEdit.mjs";
+export { generateJsonLdScripts, generateSectionJsonLd } from "./composables/useSectionSEO.mjs";
+export { SectionRendererPlugin } from "./plugin.mjs";
+export { default as RichTextSection } from "./sections/RichTextSection.vue";
+export { registerArticleSections } from "./sections/article/index.mjs";

package/dist/plugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vue';
+/**
+ * Vue 插件 — 一键安装 Section Renderer SDK
+ * 使用: app.use(SectionRendererPlugin)
+ */
+export declare const SectionRendererPlugin: Plugin;

package/dist/plugin.mjs

@@ -0,0 +1,14 @@
+import { registerSection } from "./composables/useRegistry.mjs";
+function registerBuiltinSections() {
+  registerSection({
+    name: "rich-text",
+    componentName: "RichTextSection",
+    component: () => import("./sections/RichTextSection.vue"),
+    supportsInlineEdit: true
+  });
+}
+export const SectionRendererPlugin = {
+  install() {
+    registerBuiltinSections();
+  }
+};

package/dist/preview/createPreviewApp.d.ts

@@ -0,0 +1,20 @@
+/** Preview App 配置 */
+interface PreviewAppOptions {
+    /** postMessage bridge 实例 */
+    bridge: {
+        send: (msg: Record<string, unknown>) => void;
+        on: (type: string, handler: (payload: unknown) => void) => () => void;
+    };
+    /** 点击 Section 事件 */
+    onSectionClick?: (sectionId: string) => void;
+    /** Hover Section 事件 */
+    onSectionHover?: (sectionId: string | null) => void;
+    /** 内容渲染完成 */
+    onContentReady?: () => void;
+}
+/**
+ * 创建并挂载 Preview App
+ * 在 preview-host 的 main.ts 中调用
+ */
+export declare function createPreviewApp(selector: string, options: PreviewAppOptions): void;
+export {};

package/dist/preview/createPreviewApp.mjs

@@ -0,0 +1,161 @@
+import { detectUndoRedo, isEditableTarget, isModKey } from "@vigilkids/section-core";
+import { createApp, h, provide, ref } from "vue";
+import { SectionRendererPlugin } from "../plugin.mjs";
+import SectionRenderer from "../renderer/SectionRenderer.vue";
+const loadedProducts = /* @__PURE__ */ new Set();
+const productCSSLoaders = {
+  vigilkids: () => import("../styles/products/vigilkids.css"),
+  visiva: () => import("../styles/products/visiva.css")
+};
+async function loadProductCSS(productCode) {
+  if (loadedProducts.has(productCode)) return;
+  const loader = productCSSLoaders[productCode];
+  if (loader) {
+    await loader();
+    loadedProducts.add(productCode);
+  }
+}
+export function createPreviewApp(selector, options) {
+  const sectionsData = ref({
+    sections: {},
+    section_order: []
+  });
+  const selectedSectionId = ref(null);
+  const allSectionsSelected = ref(false);
+  const rawHtmlContent = ref(null);
+  const currentProduct = ref("");
+  const inlineEditingField = ref(null);
+  const app = createApp({
+    setup() {
+      provide("currentProduct", currentProduct);
+      options.bridge.on("sections:update", (payload) => {
+        rawHtmlContent.value = null;
+        const data = payload;
+        if (inlineEditingField.value) {
+          const { sectionId, key } = inlineEditingField.value;
+          const currentSection = sectionsData.value.sections[sectionId];
+          if (currentSection && data.sections[sectionId]) {
+            data.sections[sectionId].settings[key] = currentSection.settings[key];
+          }
+        }
+        sectionsData.value = data;
+      });
+      options.bridge.on("html:preview", (payload) => {
+        const data = payload;
+        rawHtmlContent.value = data.html;
+      });
+      options.bridge.on("section:select", (payload) => {
+        const data = payload;
+        selectedSectionId.value = data.sectionId;
+        let attempts = 0;
+        const tryScroll = () => {
+          const el = document.getElementById(`section-${data.sectionId}`);
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          } else if (attempts++ < 30) {
+            requestAnimationFrame(tryScroll);
+          }
+        };
+        requestAnimationFrame(tryScroll);
+      });
+      options.bridge.on("section:deselect", () => {
+        selectedSectionId.value = null;
+        allSectionsSelected.value = false;
+      });
+      options.bridge.on("section:select-all", () => {
+        selectedSectionId.value = null;
+        allSectionsSelected.value = true;
+      });
+      options.bridge.on("preview:ping", () => {
+        options.bridge.send({ type: "preview:pong" });
+      });
+      options.bridge.on("theme:change", (payload) => {
+        const data = payload;
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.tokens)) {
+          root.style.setProperty(key, value);
+        }
+        if (data.productCode) {
+          currentProduct.value = data.productCode;
+          loadProductCSS(data.productCode);
+        }
+      });
+      function handleSectionClick(sectionId) {
+        options.onSectionClick?.(sectionId);
+      }
+      return () => rawHtmlContent.value !== null ? h("div", {
+        class: `article-content article-content--${currentProduct.value || "vigilkids"}`,
+        innerHTML: rawHtmlContent.value
+      }) : h(SectionRenderer, {
+        sectionsData: sectionsData.value,
+        editorMode: true,
+        selectedSectionId: selectedSectionId.value,
+        allSectionsSelected: allSectionsSelected.value,
+        productCode: currentProduct.value || void 0,
+        onSectionClick: handleSectionClick,
+        onSettingUpdate: (sectionId, key, value) => {
+          options.bridge.send({ type: "inline-edit:update", payload: { sectionId, key, value } });
+        },
+        onBlockSettingUpdate: (sectionId, blockId, key, value) => {
+          options.bridge.send({ type: "inline-edit:block-update", payload: { sectionId, blockId, key, value } });
+        },
+        onInlineEditStart: (sectionId, key) => {
+          inlineEditingField.value = { sectionId, key };
+          options.bridge.send({ type: "inline-edit:start", payload: { sectionId, key } });
+        },
+        onInlineEditEnd: () => {
+          inlineEditingField.value = null;
+          options.bridge.send({ type: "inline-edit:end" });
+        },
+        onInlineEditUndoRedo: (action) => {
+          options.bridge.send({ type: action === "undo" ? "shortcut:undo" : "shortcut:redo" });
+        }
+      });
+    }
+  });
+  app.use(SectionRendererPlugin);
+  app.mount(selector);
+  document.addEventListener("keydown", (e) => {
+    if (isEditableTarget(e)) return;
+    const undoRedoAction = detectUndoRedo(e);
+    if (undoRedoAction) {
+      e.preventDefault();
+      options.bridge.send({ type: undoRedoAction === "undo" ? "shortcut:undo" : "shortcut:redo" });
+      return;
+    }
+    if (isModKey(e)) {
+      const key = e.key.toLowerCase();
+      const modShortcuts = {
+        c: "shortcut:copy",
+        v: "shortcut:paste",
+        a: "shortcut:select-all"
+      };
+      const mapped = modShortcuts[key];
+      if (mapped) {
+        e.preventDefault();
+        options.bridge.send({ type: mapped });
+        return;
+      }
+    }
+    if (e.altKey && e.key === "ArrowUp") {
+      e.preventDefault();
+      options.bridge.send({ type: "shortcut:move-up" });
+      return;
+    }
+    if (e.altKey && e.key === "ArrowDown") {
+      e.preventDefault();
+      options.bridge.send({ type: "shortcut:move-down" });
+      return;
+    }
+    if (e.key === "Escape") {
+      options.bridge.send({ type: "shortcut:escape" });
+      return;
+    }
+    if (e.key === "Delete") {
+      options.bridge.send({ type: "shortcut:delete" });
+    }
+  });
+  options.onContentReady?.();
+  options.bridge.send({ type: "preview:ready" });
+  options.bridge.send({ type: "preview:styles-ready" });
+}

package/dist/renderer/FallbackSection.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    blockOrder?: string[];
+    blocks?: Record<string, unknown>;
+    editorMode?: boolean;
+    settings?: Record<string, unknown>;
+};
+declare const _default: 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>;
+export default _default;

package/dist/renderer/FallbackSection.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  blockOrder?: string[]
+  blocks?: Record<string, unknown>
+  editorMode?: boolean
+  settings?: Record<string, unknown>
+}>()
+</script>
+
+<template>
+  <div class="flex items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50 p-8 text-gray-400">
+    <div class="text-center">
+      <div class="mb-2 text-2xl">📦</div>
+      <p class="text-sm">组件加载中...</p>
+    </div>
+  </div>
+</template>

package/dist/renderer/FallbackSection.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    blockOrder?: string[];
+    blocks?: Record<string, unknown>;
+    editorMode?: boolean;
+    settings?: Record<string, unknown>;
+};
+declare const _default: 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>;
+export default _default;

package/dist/renderer/LazySection.d.vue.ts

@@ -0,0 +1,60 @@
+declare const _default: import("vue").DefineComponent<{
+    /** Block 实例映射 */
+    blocks: Record<string, {
+        type: string;
+        settings: Record<string, unknown>;
+    }>;
+    /** Block 排序 */
+    blockOrder: string[];
+    /** 编辑器模式 */
+    editorMode?: boolean;
+    /** 是否选中 */
+    isSelected?: boolean;
+    /** 产品标识，用于解析产品级 Section 组件覆盖 */
+    productCode?: string;
+    /** IntersectionObserver rootMargin，控制提前加载距离 */
+    rootMargin?: string;
+    /** Section ID */
+    sectionId: string;
+    /** Section 类型 */
+    sectionType: string;
+    /** Section 设置 */
+    settings: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    inlineEditEnd: () => any;
+    sectionClick: (sectionId: string) => any;
+    inlineEditUndoRedo: (action: "redo" | "undo") => any;
+    inlineEditStart: (sectionId: string, key: string) => any;
+    blockSettingUpdate: (sectionId: string, blockId: string, key: string, value: unknown) => any;
+    settingUpdate: (sectionId: string, key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Block 实例映射 */
+    blocks: Record<string, {
+        type: string;
+        settings: Record<string, unknown>;
+    }>;
+    /** Block 排序 */
+    blockOrder: string[];
+    /** 编辑器模式 */
+    editorMode?: boolean;
+    /** 是否选中 */
+    isSelected?: boolean;
+    /** 产品标识，用于解析产品级 Section 组件覆盖 */
+    productCode?: string;
+    /** IntersectionObserver rootMargin，控制提前加载距离 */
+    rootMargin?: string;
+    /** Section ID */
+    sectionId: string;
+    /** Section 类型 */
+    sectionType: string;
+    /** Section 设置 */
+    settings: Record<string, unknown>;
+}> & Readonly<{
+    onInlineEditEnd?: (() => any) | undefined;
+    onSectionClick?: ((sectionId: string) => any) | undefined;
+    onInlineEditUndoRedo?: ((action: "redo" | "undo") => any) | undefined;
+    onInlineEditStart?: ((sectionId: string, key: string) => any) | undefined;
+    onBlockSettingUpdate?: ((sectionId: string, blockId: string, key: string, value: unknown) => any) | undefined;
+    onSettingUpdate?: ((sectionId: string, key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/LazySection.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+/** 根据 Section 类型返回占位高度，防止 CLS 布局偏移 */
+function getPlaceholderHeight(type: string): string {
+  const heights: Record<string, string> = {
+    'hero-banner': '400px',
+    'feature-grid': '300px',
+    'text-with-image': '250px',
+    'testimonials': '280px',
+    'faq': '200px',
+    'cta': '180px',
+    'rich-text': '200px',
+    'spacer': '40px',
+  }
+  return heights[type] ?? '200px'
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { useLazyRender } from '../composables/useLazyRender'
+import { useRegistry } from '../composables/useRegistry'
+import FallbackSection from './FallbackSection.vue'
+import SectionErrorBoundary from './SectionErrorBoundary.vue'
+import SectionWrapper from './SectionWrapper.vue'
+
+const props = defineProps<{
+  /** Block 实例映射 */
+  blocks: Record<string, { type: string; settings: Record<string, unknown> }>
+  /** Block 排序 */
+  blockOrder: string[]
+  /** 编辑器模式 */
+  editorMode?: boolean
+  /** 是否选中 */
+  isSelected?: boolean
+  /** 产品标识，用于解析产品级 Section 组件覆盖 */
+  productCode?: string
+  /** IntersectionObserver rootMargin，控制提前加载距离 */
+  rootMargin?: string
+  /** Section ID */
+  sectionId: string
+  /** Section 类型 */
+  sectionType: string
+  /** Section 设置 */
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'sectionClick', sectionId: string): void
+  (e: 'settingUpdate', sectionId: string, key: string, value: unknown): void
+  (e: 'blockSettingUpdate', sectionId: string, blockId: string, key: string, value: unknown): void
+  (e: 'inlineEditStart', sectionId: string, key: string): void
+  (e: 'inlineEditEnd'): void
+  (e: 'inlineEditUndoRedo', action: 'redo' | 'undo'): void
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const { isVisible } = useLazyRender(containerRef, {
+  rootMargin: props.rootMargin ?? '200px',
+  // SSR 输出完整 HTML，客户端 hydration 后再由 Observer 接管
+  ssrEager: true,
+})
+
+const registry = useRegistry()
+
+// 解析注册表中的组件，未注册则降级到 FallbackSection
+const resolvedComponent = computed(() =>
+  registry.resolve(props.sectionType, props.productCode) ?? FallbackSection,
+)
+</script>
+
+<template>
+<div ref="containerRef">
+    <template v-if="isVisible || isSelected">
+      <SectionErrorBoundary
+        :section-id="sectionId"
+        :section-type="sectionType"
+      >
+        <SectionWrapper
+          :section-id="sectionId"
+          :section-type="sectionType"
+          :editor-mode="editorMode"
+          :is-selected="isSelected"
+          :settings="settings"
+          @click="emit('sectionClick', sectionId)"
+        >
+          <component
+            :is="resolvedComponent"
+            :settings="settings"
+            :blocks="blocks"
+            :block-order="blockOrder"
+            :editor-mode="editorMode"
+            @update:setting="(key: string, value: unknown) => emit('settingUpdate', sectionId, key, value)"
+            @update:block-setting="(blockId: string, key: string, value: unknown) => emit('blockSettingUpdate', sectionId, blockId, key, value)"
+            @inline-edit-start="(key: string) => emit('inlineEditStart', sectionId, key)"
+            @inline-edit-end="emit('inlineEditEnd')"
+            @undo-redo="(action: 'redo' | 'undo') => emit('inlineEditUndoRedo', action)"
+          />
+        </SectionWrapper>
+      </SectionErrorBoundary>
+    </template>
+
+    <!-- CLS 占位：未加载时保持最小高度，防止内容加载后布局偏移 -->
+    <div
+      v-else
+      class="section-lazy-placeholder"
+      :data-section-type="sectionType"
+      :style="{ minHeight: getPlaceholderHeight(sectionType) }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.section-lazy-placeholder{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}
+</style>

package/dist/renderer/LazySection.vue.d.ts

@@ -0,0 +1,60 @@
+declare const _default: import("vue").DefineComponent<{
+    /** Block 实例映射 */
+    blocks: Record<string, {
+        type: string;
+        settings: Record<string, unknown>;
+    }>;
+    /** Block 排序 */
+    blockOrder: string[];
+    /** 编辑器模式 */
+    editorMode?: boolean;
+    /** 是否选中 */
+    isSelected?: boolean;
+    /** 产品标识，用于解析产品级 Section 组件覆盖 */
+    productCode?: string;
+    /** IntersectionObserver rootMargin，控制提前加载距离 */
+    rootMargin?: string;
+    /** Section ID */
+    sectionId: string;
+    /** Section 类型 */
+    sectionType: string;
+    /** Section 设置 */
+    settings: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    inlineEditEnd: () => any;
+    sectionClick: (sectionId: string) => any;
+    inlineEditUndoRedo: (action: "redo" | "undo") => any;
+    inlineEditStart: (sectionId: string, key: string) => any;
+    blockSettingUpdate: (sectionId: string, blockId: string, key: string, value: unknown) => any;
+    settingUpdate: (sectionId: string, key: string, value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Block 实例映射 */
+    blocks: Record<string, {
+        type: string;
+        settings: Record<string, unknown>;
+    }>;
+    /** Block 排序 */
+    blockOrder: string[];
+    /** 编辑器模式 */
+    editorMode?: boolean;
+    /** 是否选中 */
+    isSelected?: boolean;
+    /** 产品标识，用于解析产品级 Section 组件覆盖 */
+    productCode?: string;
+    /** IntersectionObserver rootMargin，控制提前加载距离 */
+    rootMargin?: string;
+    /** Section ID */
+    sectionId: string;
+    /** Section 类型 */
+    sectionType: string;
+    /** Section 设置 */
+    settings: Record<string, unknown>;
+}> & Readonly<{
+    onInlineEditEnd?: (() => any) | undefined;
+    onSectionClick?: ((sectionId: string) => any) | undefined;
+    onInlineEditUndoRedo?: ((action: "redo" | "undo") => any) | undefined;
+    onInlineEditStart?: ((sectionId: string, key: string) => any) | undefined;
+    onBlockSettingUpdate?: ((sectionId: string, blockId: string, key: string, value: unknown) => any) | undefined;
+    onSettingUpdate?: ((sectionId: string, key: string, value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/SectionErrorBoundary.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    sectionId: string;
+    sectionType: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: 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: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};