@vigilkids/section-renderer-vue 0.0.1

package/dist/sections/article/visiva/ArticleSubheading.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+const variant = computed(() => (s.value.variant as string) || 'plain')
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<!-- blog-h3-style1: plain -->
+  <h3
+    v-if="variant === 'plain'"
+    :id="String(s.anchor || '')"
+    class="blog-h3-style1"
+  >
+    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+  </h3>
+
+  <!-- blog-h3-style2: numbered -->
+  <h3
+    v-else-if="variant === 'numbered'"
+    :id="String(s.anchor || '')"
+    class="blog-h3-style2"
+  >
+    <span class="blog-h3-style2-number" v-bind="editableAttrs('number')">{{ s.number }}</span>
+    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+  </h3>
+
+  <!-- blog-h3-style3: pill -->
+  <h3
+    v-else-if="variant === 'pill'"
+    :id="String(s.anchor || '')"
+    class="blog-h3-style3"
+  >
+    <span class="blog-h3-style3-badge" v-bind="editableAttrs('label')">{{ s.label }}</span>
+    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+  </h3>
+
+  <!-- blog-h3-style4: icon -->
+  <h3
+    v-else-if="variant === 'icon'"
+    :id="String(s.anchor || '')"
+    class="blog-h3-style4"
+  >
+    <div class="blog-h3-style4-icon-wrapper">
+      <!-- #h3-round -->
+      <svg class="blog-h3-style4-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <mask id="h3-round-mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+          <rect width="24" height="24" fill="#D9D9D9"/>
+        </mask>
+        <g mask="url(#h3-round-mask0)">
+          <path d="M14.0337 0.558447C14.5853 0.180022 15.3451 0.38452 15.6344 0.989291L17.6614 5.22613C17.7689 5.45078 17.9497 5.63206 18.174 5.73992L22.4014 7.77291C23.0042 8.06278 23.2081 8.82181 22.8315 9.37363L20.1843 13.2521C20.0445 13.457 19.9788 13.7035 19.9979 13.9511L20.3599 18.6396C20.4114 19.3066 19.8569 19.8616 19.1907 19.8099L14.5177 19.4472C14.2698 19.428 14.0229 19.4941 13.818 19.6347L9.95375 22.2858C9.40216 22.6642 8.64241 22.4597 8.35308 21.855L6.32609 17.6181C6.21862 17.3935 6.03775 17.2122 5.81348 17.1043L1.58608 15.0713C0.983319 14.7815 0.779391 14.0225 1.15601 13.4706L3.80314 9.59211C3.94293 9.38728 4.0087 9.14072 3.98959 8.89312L3.62762 4.20466C3.57612 3.53761 4.13053 2.9827 4.79682 3.03441L9.46977 3.39706C9.71768 3.4163 9.96454 3.35015 10.1694 3.20958L14.0337 0.558447Z" fill="#1FB04F"/>
+          <path d="M8.26009 1.55404C8.54364 0.946524 9.30138 0.734741 9.85654 1.10785L13.7459 3.72178C13.9521 3.86038 14.1996 3.92415 14.4473 3.90254L19.1165 3.49501C19.7823 3.43691 20.342 3.98649 20.2968 4.65402L19.9796 9.34576C19.9628 9.59354 20.0309 9.83947 20.1727 10.043L22.8566 13.8959C23.2385 14.4441 23.0418 15.205 22.4418 15.5007L18.234 17.5742C18.0108 17.6842 17.8317 17.8672 17.7264 18.0929L15.7399 22.3491C15.4563 22.9566 14.6986 23.1684 14.1434 22.7953L10.2541 20.1814C10.0478 20.0428 9.80035 19.979 9.55264 20.0006L4.88341 20.4081C4.21766 20.4662 3.65799 19.9167 3.70313 19.2491L4.02038 14.5574C4.03714 14.3096 3.96902 14.0637 3.82728 13.8602L1.14335 10.0073C0.761488 9.45907 0.958166 8.6981 1.55813 8.40245L5.76591 6.32891C5.98914 6.21891 6.16827 6.0359 6.2736 5.81023L8.26009 1.55404Z" fill="#F7FFFA"/>
+        </g>
+      </svg>
+      <span class="blog-h3-style4-number">{{ s.number }}</span>
+    </div>
+    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+  </h3>
+</template>
+
+<style scoped>
+.blog-h3-style1{line-height:1}.blog-h3-style1,.blog-h3-style2{font-size:18px;font-weight:900;margin-bottom:0;margin-top:16px}.blog-h3-style2{display:flex;line-height:100%}.blog-h3-style2>*+*{margin-left:8px}.blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:50%;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;width:24px}.blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h3-style3>*+*{margin-left:4px}.blog-h3-style3-badge{background:#1fb04f;border-radius:20px;color:#fff;display:inline-block;flex-shrink:0;font-size:16px;font-weight:600;height:22px;line-height:22px;padding:0 8px;transform:translateY(4px)}.blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h3-style4>*+*{margin-left:4px}.blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;position:relative;width:24px}.blog-h3-style4-icon{left:0;position:absolute;top:1px}.blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;position:relative;z-index:10}.blog-h3-style1[id],.blog-h3-style2[id],.blog-h3-style3[id],.blog-h3-style4[id]{scroll-margin-top:80px}@media (min-width:768px){.blog-h3-style1,.blog-h3-style2,.blog-h3-style3{font-size:24px}.blog-h3-style3>*+*{margin-left:12px}.blog-h3-style4{font-size:24px}.blog-h3-style4>*+*{margin-left:12px}}
+</style>

package/dist/sections/article/visiva/ArticleSubheading.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleTable.d.vue.ts

@@ -0,0 +1,9 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    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/sections/article/visiva/ArticleTable.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const s = computed(() => props.settings)
+
+interface ColumnDef {
+  label: string
+  min_width?: number
+}
+
+function parseJsonOrArray<T>(value: unknown): T[] {
+  if (Array.isArray(value)) return value as T[]
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value)
+      if (Array.isArray(parsed)) return parsed as T[]
+    } catch {
+      /* JSON 解析失败，返回空数组 */
+    }
+  }
+  return []
+}
+
+const variant = computed(() => String(s.value.variant || 'default'))
+
+const columns = computed<ColumnDef[]>(() => {
+  const raw = parseJsonOrArray<ColumnDef | string>(s.value.columns)
+  return raw.map((item) =>
+    typeof item === 'string' ? { label: item } : item,
+  )
+})
+
+const rows = computed(() =>
+  props.blockOrder
+    .filter((id) => props.blocks[id]?.type === 'table-row')
+    .map((id) => {
+      const block = props.blocks[id]!
+      return parseJsonOrArray<string>(block.settings.cells)
+    }),
+)
+
+const expanded = ref(false)
+</script>
+
+<template>
+<!-- blog-table: default -->
+  <div v-if="variant === 'default'" class="blog-table-wrapper">
+    <table class="blog-table">
+      <thead>
+        <tr class="blog-table-header">
+          <th
+            v-for="(col, idx) in columns"
+            :key="idx"
+            :class="idx === columns.length - 1 ? 'blog-table-header-cell-last' : 'blog-table-header-cell'"
+          >
+            {{ col.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-row">
+          <td
+            v-for="(cell, cellIdx) in row"
+            :key="cellIdx"
+            :class="
+              cellIdx === 0
+                ? 'blog-table-cell-first'
+                : cellIdx === row.length - 1
+                  ? 'blog-table-cell-last'
+                  : 'blog-table-cell'
+            "
+            v-html="cell"
+          />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- blog-table-plus: collapsible -->
+  <div v-else-if="variant === 'collapsible'" class="blog-table-plus-container">
+    <div
+      class="blog-table-plus-content"
+      :class="{ 'blog-table-plus-content--expanded': expanded }"
+    >
+      <table class="blog-table">
+        <thead>
+          <tr class="blog-table-plus-header">
+            <th
+              v-for="(col, idx) in columns"
+              :key="idx"
+              :class="idx === columns.length - 1 ? 'blog-table-header-cell-last' : 'blog-table-header-cell'"
+            >
+              {{ col.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-plus-row">
+            <td
+              v-for="(cell, cellIdx) in row"
+              :key="cellIdx"
+              :class="
+                cellIdx === 0
+                  ? 'blog-table-plus-cell-first'
+                  : cellIdx === row.length - 1
+                    ? 'blog-table-plus-cell-last'
+                    : 'blog-table-plus-cell'
+              "
+              v-html="cell"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="!expanded" class="blog-table-plus-overlay">
+      <button
+        class="blog-table-plus-toggle"
+        @click="expanded = true"
+      >
+        <!-- #extend -->
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.884 17.3698L10.944 17.4348C11.0833 17.5742 11.2487 17.6847 11.4308 17.7602C11.6129 17.8356 11.808 17.8745 12.005 17.8745C12.2021 17.8745 12.3972 17.8356 12.5793 17.7602C12.7613 17.6847 12.9267 17.5742 13.066 17.4348L20.844 9.65678C21.1173 9.37387 21.2685 8.99497 21.2651 8.60167C21.2616 8.20838 21.1039 7.83216 20.8258 7.55405C20.5477 7.27594 20.1714 7.11818 19.7782 7.11477C19.3849 7.11135 19.006 7.26254 18.723 7.53578L12.007 14.2508L5.28205 7.52578C5.14361 7.38258 4.97804 7.26838 4.795 7.18986C4.61195 7.11133 4.4151 7.07005 4.21594 7.06841C4.01677 7.06677 3.81927 7.10482 3.63496 7.18033C3.45065 7.25584 3.28323 7.36729 3.14245 7.5082C3.00168 7.6491 2.89038 7.81663 2.81505 8.00101C2.73971 8.18539 2.70185 8.38293 2.70368 8.5821C2.7055 8.78126 2.74697 8.97807 2.82567 9.16104C2.90437 9.34401 3.01872 9.50947 3.16205 9.64778L10.884 17.3698Z" fill="#2C2C2C"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;margin-top:40px;min-width:0;overflow-x:auto;text-align:center}.blog-table{border-collapse:collapse;min-width:800px;width:100%}.blog-table-header{background:#292929;color:#fff;font-size:18px}.blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.blog-table-header-cell-last{font-size:14px;font-weight:600;padding:17px 16px}.blog-table-row{background:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.blog-table-cell{border-right:1px solid #d9d9d9;padding:17px 16px}.blog-table-cell:hover{font-weight:400}.blog-table-cell-first{background:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;padding:17px 16px}.blog-table-cell-first:hover{font-weight:400}.blog-table-cell-last{font-size:14px;padding:17px 16px}.blog-table-plus-container{background:#fff;border:1px solid #d4d4d4;border-radius:20px;font-size:14px;margin-top:40px;overflow:hidden;position:relative;text-align:center}.blog-table-plus-content{max-height:500px;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;transition:all .3s ease-in-out}.blog-table-plus-content--expanded{max-height:none}.blog-table-plus-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.blog-table-plus-toggle{align-items:center;background:#fff;border:1px solid #d4d4d4;border-radius:50%;box-shadow:0 4px 14.1px 0 rgba(0,0,0,.13);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;margin-left:-25px;position:absolute;transform:translateY(-50%);transition:all .3s;width:50px;z-index:10}.blog-table-plus-toggle:hover{background:#f9fafb}.blog-table-plus-header{background:#292929;color:#fff;font-size:18px;position:sticky;top:0;z-index:10}.blog-table-plus-row{background:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;min-height:80px}.blog-table-plus-cell{border-right:1px solid #d9d9d9;min-height:80px;padding:17px 16px}.blog-table-plus-cell:hover{font-weight:400}.blog-table-plus-cell-first{background:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;min-height:80px;padding:17px 16px}.blog-table-plus-cell-first:hover{font-weight:400}.blog-table-plus-cell-last{font-size:14px;min-height:80px;padding:17px 16px}.blog-table :deep(a){color:#1fb04f;font-weight:400}
+</style>

package/dist/sections/article/visiva/ArticleTable.vue.d.ts

@@ -0,0 +1,9 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    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/sections/article/visiva/ArticleToc.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleToc.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+interface TocGroup {
+  id: string
+  text: string
+  anchor: string
+  children: { id: string; text: string; anchor: string; hot: boolean }[]
+}
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const title = computed(() => String(props.settings.title || 'Table Of Contents'))
+
+const tocGroups = computed<TocGroup[]>(() => {
+  const groups: TocGroup[] = []
+
+  for (const blockId of props.blockOrder) {
+    const block = props.blocks[blockId]
+    if (!block) continue
+
+    if (block.type === 'toc-h2') {
+      groups.push({
+        id: blockId,
+        text: String(block.settings.text || ''),
+        anchor: String(block.settings.anchor || ''),
+        children: [],
+      })
+    } else if (block.type === 'toc-h3' && groups.length > 0) {
+      groups[groups.length - 1]!.children.push({
+        id: blockId,
+        text: String(block.settings.text || ''),
+        anchor: String(block.settings.anchor || ''),
+        hot: Boolean(block.settings.hot),
+      })
+    }
+  }
+
+  return groups
+})
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<div class="blog-toc">
+    <div class="blog-toc-header">
+      <!-- #triangle-full -->
+      <svg class="blog-toc-icon" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <mask id="triangle-full-mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+          <rect width="20" height="20" fill="#D9D9D9"/>
+        </mask>
+        <g mask="url(#triangle-full-mask0)">
+          <path d="M8.43188 5.98075C9.23262 4.96929 10.7673 4.96929 11.5681 5.98075L16.9339 12.7586C17.9719 14.0697 17.0381 16 15.3658 16H4.6342C2.96193 16 2.02812 14.0697 3.0661 12.7586L8.43188 5.98075Z" fill="black"/>
+        </g>
+      </svg>
+      <h2 class="blog-toc-title" v-bind="editableAttrs('title')">{{ title }}</h2>
+    </div>
+
+    <ul class="blog-toc-list">
+      <template v-for="group in tocGroups" :key="group.id">
+        <li v-if="group.children.length === 0" class="blog-toc-list-item">
+          <a :href="`#${group.anchor}`" class="blog-toc-link">{{ group.text }}</a>
+        </li>
+
+        <li v-else class="blog-toc-list-item">
+          <a :href="`#${group.anchor}`" class="blog-toc-link">{{ group.text }}</a>
+          <ol class="blog-toc-numbered-list">
+            <li v-for="child in group.children" :key="child.id">
+              <div class="blog-toc-numbered-item">
+                <a :href="`#${child.anchor}`" class="blog-toc-link">
+                  <span>{{ child.text }}</span>
+                </a>
+                <div v-if="child.hot" class="blog-toc-hot-tag-wrapper">
+                  <!-- #hot-tag -->
+                  <svg class="blog-toc-hot-tag-bg" viewBox="0 0 23 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M19.3997 0C21.0565 0 22.3997 1.34315 22.3997 3V9C22.3997 10.6569 21.0565 12 19.3997 12H4.39966C2.7428 12 1.39966 10.6569 1.39966 9V6.42188L0.300049 5.78711C-0.0999011 5.55615 -0.0999345 4.97898 0.300049 4.74805L1.39966 4.11328V3C1.39966 1.34315 2.7428 7.24787e-08 4.39966 0H19.3997Z" fill="#FF0000"/>
+                  </svg>
+                  <span class="blog-toc-hot-tag-text">HOT</span>
+                </div>
+              </div>
+            </li>
+          </ol>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.blog-toc{background:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.blog-toc-icon{flex-shrink:0;height:16px;width:16px}.blog-toc-title{color:#000;font-size:16px;font-weight:600;margin:0}.blog-toc-list{color:#000;font-size:14px;list-style:none;margin:0;padding:0}.blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.blog-toc-list-item+.blog-toc-list-item{margin-top:8px}.blog-toc-numbered-list{font-size:12px;font-weight:300;margin-top:8px;padding-left:36px}.blog-toc-numbered-list,.blog-toc-numbered-list>li{list-style-position:outside;list-style-type:decimal}.blog-toc-numbered-list>li{display:list-item}.blog-toc-numbered-list>li+li{margin-top:8px}.blog-toc-numbered-item{align-items:center;display:flex;gap:8px}.blog-toc-link{color:inherit;text-decoration:none}.blog-toc-hot-tag-wrapper{align-items:center;display:flex;gap:4px;position:relative}.blog-toc-hot-tag-bg{min-height:12px;min-width:22px;position:absolute;width:100%}.blog-toc-hot-tag-text{color:#fff;font-family:Roboto,sans-serif;font-size:12px;font-style:italic;font-weight:900;position:relative;transform:scale(.75);transform-origin:center}@media (min-width:768px){.blog-toc{border-radius:20px;padding:40px 32px}.blog-toc-title{font-size:20px}.blog-toc-list,.blog-toc-numbered-list{font-size:14px}}@media (max-width:639px){.blog-toc-list{font-size:14px}.blog-toc-numbered-list{font-size:12px}}
+</style>

package/dist/sections/article/visiva/ArticleToc.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/shims-css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string
+  export default content
+}

package/dist/styles/products/vigilkids.css

@@ -0,0 +1 @@
+.article-content--vigilkids p{color:#3a4259;margin-top:10px}.article-content--vigilkids a:not(.btn){color:#4285f4;transition:all .3s ease}.article-content--vigilkids .level-1 a,.article-content--vigilkids .level-2 a{color:#3a4259}.article-content--vigilkids .level-1 a:hover,.article-content--vigilkids .level-2 a:hover{color:#4285f4}.article-content--vigilkids .underline,.article-content--vigilkids a:not(.btn):hover{text-decoration:underline}.article-content--vigilkids .font-bold{font-weight:700}.article-content--vigilkids .primary-color{color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.article-content--vigilkids .top-level{align-items:flex-start!important;display:flex!important;flex-direction:column;gap:10px}.article-content--vigilkids .level-2{display:flex;flex-direction:column;gap:10px;margin-left:35px}.article-content--vigilkids .level-1 li,.article-content--vigilkids .level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.article-content--vigilkids .level-1 li:not(.table-of-contents):before,.article-content--vigilkids .level-2 li:before{background:url(../../assets/images/article/arrow.svg) no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.article-content--vigilkids h2{background:#f5f9fc;font-size:28px;font-weight:700;line-height:36px;margin-bottom:30px;margin-top:30px;padding:14px 30px;position:relative}.article-content--vigilkids .black-h2{background:transparent;color:#3a4259;font-size:28px;line-height:36px;padding:0}.article-content--vigilkids h2:not(.black-h2):before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids h3{align-items:center;color:hsl(var(--color-primary-hover-var));display:flex;font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-content--vigilkids .black-h3{color:#3a4259}.article-content--vigilkids h3 .green-text{align-items:center;border-radius:50%;color:#fff;display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;position:relative;width:36px}.article-content--vigilkids h3 .green-text:before{background:var(--color-primary);border-radius:50%;content:"";height:36px;left:0;position:absolute;top:0;width:36px;z-index:-1}.article-content--vigilkids .disc-list{list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--vigilkids .article-info{background:#f7f7f7;color:#3a4259;font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-content--vigilkids .article-info p:last-child{margin-bottom:0}.article-content--vigilkids .article-info:before{background:hsla(var(--color-primary-var),1);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-content--vigilkids .article-info-title{color:#3a4259;font-size:20px;font-weight:700;line-height:23px;margin-bottom:14px}.article-content--vigilkids .article-info-content{color:#3a4259;font-size:16px;font-style:italic;line-height:24px;margin-bottom:14px}.article-content--vigilkids .notice-info{background:hsla(var(--color-primary-hover-var),.1);border:2px dashed var(--color-primary-hover);border-radius:10px;font-size:18px;line-height:21px;margin-bottom:20px;margin-top:30px;padding:60px 40px 40px 108px;position:relative}.article-content--vigilkids .notice-info:before{background:url(../../assets/images/article/notice-info-icon.svg) no-repeat 50%;background-size:cover;content:"";height:40px;left:40px;position:absolute;top:0;width:142px}.article-content--vigilkids .notice-info p{position:relative}.article-content--vigilkids .notice-info p:not(:last-child){margin-bottom:16px}.article-content--vigilkids .notice-info p:before{background:url(../../assets/images/article/notice-info.svg) no-repeat 50%;content:"";height:30px;left:-38px;position:absolute;top:-4.5px;width:30px}.article-content--vigilkids .notice-info.warning{background:#f1631c1a;border-color:#f1631c}.article-content--vigilkids .notice-info.warning:before{background:url(../../assets/images/article/notice-warning-icon.svg) no-repeat 50%}.article-content--vigilkids .notice-info.warning p:before{background:url(../../assets/images/article/notice-warning.svg) no-repeat 50%}.article-content--vigilkids .step-list{margin-bottom:30px;margin-top:20px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:24px}.article-content--vigilkids .step-list li span{font-weight:700}.article-content--vigilkids .article-question{background:#f3f5f7;border-radius:10px;color:#3a4259;margin:30px 0;padding:30px 30px 30px 82px}.article-content--vigilkids .article-question p:last-child{margin-bottom:0}.article-content--vigilkids .article-question-title{line-height:38px;margin-bottom:11.5px}.article-content--vigilkids .article-question-title:before{background:url(../../assets/images/article/question.svg) no-repeat 50%;background-size:cover;content:"";height:38px;left:-52px;position:absolute;top:0;width:38px}.article-content--vigilkids img:not(.hot-icon){height:auto;margin:10px auto 30px;max-width:500px;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--vigilkids .btn{align-items:center;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:52px;justify-content:center;line-height:24px;margin:20px auto 30px;padding:10px 20px;transition:all .3s ease;width:220px}.article-content--vigilkids .btn,.article-content--vigilkids .btn.btn-primary{background:hsl(var(--color-primary-var))}.article-content--vigilkids .btn.btn-primary:active,.article-content--vigilkids .btn.btn-primary:hover{background:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn-group{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:30px;margin-top:20px}.article-content--vigilkids .btn-group .btn{margin:0}.article-content--vigilkids .btn.outline-btn{background:#fff;border:2px solid hsl(var(--color-primary-var));color:hsl(var(--color-primary-hover-var))}.article-content--vigilkids .btn.outline-btn:hover{background:hsl(var(--color-primary-var));color:#fff}.article-content--vigilkids .btn.outline-btn:active{background:hsl(var(--color-primary-hover-var));color:#fff}.article-content--vigilkids .article-feature{background:#f3f5f7;border-radius:10px;color:#3a4259;margin-top:30px;padding:30px 60px}.article-content--vigilkids .article-feature-title{margin-top:0}.article-content--vigilkids .article-question-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:20px;position:relative}.article-content--vigilkids .article-feature-list{line-height:32px;list-style-type:disc;padding-left:20px}.article-content--vigilkids .article-try{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 60px}.article-content--vigilkids .article-try-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:10px}.article-content--vigilkids .article-try-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-try-description{line-height:32px}.article-content--vigilkids .article-try .btn{margin:0 0 0 10px;min-width:220px}.article-content--vigilkids .article-show{align-items:center;background:#f3f5f7;border-radius:10px;color:#3a4259;display:flex;justify-content:space-between;margin-top:30px;padding:40px 30px 40px 60px}.article-content--vigilkids .article-show-title{font-size:24px;font-weight:700;line-height:28px;margin-bottom:14px}.article-content--vigilkids .article-show-content{display:flex;flex-direction:column;justify-content:space-between}.article-content--vigilkids .article-show-description{line-height:30px}.article-content--vigilkids .article-show .btn{margin-left:0;min-width:220px}.article-content--vigilkids .article-show img:not(.hot-icon){border-radius:10px;height:auto;margin-left:32px;max-width:368px;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--vigilkids .faq-list{background:#f3f5f7;border-radius:10px;color:#333;margin-bottom:50px;margin-top:20px;padding:26px 20px}.article-content--vigilkids .faq-item{background:#fff;border-radius:10px;cursor:pointer;padding:32px 26px 32px 18px;position:relative;transition:all .3s ease}.article-content--vigilkids .faq-item:hover{transform:translateY(-2px)}.article-content--vigilkids .faq-item:not(:last-child){margin-bottom:10px}.article-content--vigilkids .faq-item-title{cursor:pointer;font-size:18px;font-weight:700;line-height:26px;margin-bottom:0;margin-top:0;padding-right:74px;transition:margin-bottom .3s ease}.article-content--vigilkids .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/show_7eb7dc7834.svg) no-repeat 50%;background-size:cover;content:"";height:26px;position:absolute;right:26px;top:30px;transition:transform .3s ease,background-image .3s ease;width:26px}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:18px}.article-content--vigilkids .faq-item.active .faq-item-title:before{background:url(https://vigilkids-marketing-test.oss-us-west-1.aliyuncs.com/vigilkids/close_8fdb59cd06.svg) no-repeat 50%;transform:rotate(180deg)}.article-content--vigilkids .faq-item-answer{color:#666;font-size:18px;line-height:27px;margin:0;max-height:0;opacity:0;overflow:hidden;padding:0 74px 0 22px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}.article-content--vigilkids .faq-item.active .faq-item-answer{opacity:1;padding-bottom:0;padding-top:0}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{background:#f5f9fc;border-radius:10px;display:grid;gap:60px;grid-template-columns:1fr 1fr;margin:20px 0;padding:20px 30px}.article-content--vigilkids .props-dashed{background:#fff;border:1px dashed #ccc}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{display:block;font-size:20px;font-weight:700;line-height:28px;padding-left:14px;position:relative}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{background:hsla(var(--color-primary-var),1);content:"";height:14px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:6px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{color:#3a4259;font-size:16px;line-height:32px;margin-top:14px;padding-left:14px}.article-content--vigilkids .props-dashed .props-right span:before,.article-content--vigilkids .props-solid .props-right span:before{background:#f44242}.contrast-table{background:#fff;border:1px solid #d9d9d9;margin:30px 0;overflow-x:auto}.contrast-table table{color:#333;text-align:center}.contrast-table td,.contrast-table th{border-bottom:1px solid #d9d9d9;border-right:1px solid #d9d9d9;padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}@media only screen and (max-width:500px){.contrast-table tbody{font-size:14px}}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table.sticky-table tr td:first-child,.contrast-table.sticky-table tr th:first-child{font-weight:700;left:0;position:sticky;z-index:2}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td,.contrast-table thead tr th{background-color:#f4f5f7}.contrast-table.sticky-table tr td:first-child:after,.contrast-table.sticky-table tr th:first-child:after{background-image:linear-gradient(270deg,rgba(49,49,49,0),rgba(0,0,0,.04));bottom:0;content:"";position:absolute;right:-16px;top:0;width:16px;z-index:1}.contrast-table tr td a{color:hsl(var(--color-primary-hover-var));font-weight:400}.article-content--vigilkids .notice-info-row{display:flex;gap:20px;margin-bottom:10px;margin-top:30px}.article-content--vigilkids .notice-info-row .notice-info{background:#f5f9fc;margin:0;padding-bottom:40px;padding-left:78px;padding-top:75px;width:50%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:24px;margin-bottom:16px;margin-top:0;min-height:30px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:-3px}@media (max-width:768px){.article-content--vigilkids p{font-size:14px}.article-content--vigilkids .level-1 li.table-of-contents{font-size:16px}.article-content--vigilkids .level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}.article-content--vigilkids h2{font-size:20px;line-height:23px;margin-bottom:20px;margin-top:20px;padding:16px}.article-content--vigilkids h2:before{height:100%;width:4px}.article-content--vigilkids h3{font-size:18px}.article-content--vigilkids .article-info{font-size:14px;padding:20px 16px}.article-content--vigilkids .article-info:before{height:100%;width:4px}.article-content--vigilkids .article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-content--vigilkids .article-info-content{font-size:14px;line-height:21px}.article-content--vigilkids .article-info P:last-child{text-align:right}.article-content--vigilkids .notice-info{line-height:19px;padding:44px 16px 30px 44px}.article-content--vigilkids .notice-info:before{background-size:cover!important;height:32px;left:16px;width:114px}.article-content--vigilkids .notice-info p:before{left:-30px;top:-2px}.article-content--vigilkids .step-list li{font-size:14px;line-height:21px}.article-content--vigilkids .step-list li:not(:last-child){margin-bottom:21px}.article-content--vigilkids .article-question{padding:20px}.article-content--vigilkids .article-question-title{padding-left:52px}.article-content--vigilkids .article-question-title:before{left:0}.article-content--vigilkids .btn-group{align-items:center;flex-direction:column;gap:18px}.article-content--vigilkids .faq-item{padding:24px 20px 24px 16px}.article-content--vigilkids .faq-item-title{font-size:16px;line-height:19px;padding-right:60px}.article-content--vigilkids .faq-item-title:before{height:20px;right:20px;top:22px;width:20px}.article-content--vigilkids .faq-item-answer{line-height:21px;padding-left:16px;padding-right:60px}.article-content--vigilkids .article-feature{padding:20px 16px}.article-content--vigilkids .article-try{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-try-description{line-height:21px}.article-content--vigilkids .article-try .btn{margin:20px 0}.article-content--vigilkids .article-show{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-content--vigilkids .article-show-content{align-items:center}.article-content--vigilkids .article-show-description{line-height:21px}.article-content--vigilkids .article-show .btn,.article-content--vigilkids .article-show img:not(.hot-icon){margin:20px 0}.article-content--vigilkids .faq-item{padding:20px 16px}.article-content--vigilkids .faq-item-title{font-size:14px;line-height:16px;padding-right:40px}.article-content--vigilkids .faq-item-answer{font-size:14px;line-height:16px;padding-left:0;padding-right:0}.article-content--vigilkids .faq-item.active .faq-item-title{margin-bottom:10px}.article-content--vigilkids .faq-item-title:before{right:16px;top:20px;width:16px}.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.article-content--vigilkids .black-h2{font-size:20px;line-height:23px}.article-content--vigilkids .props-dashed,.article-content--vigilkids .props-solid{gap:20px;grid-template-columns:1fr;margin:16px 0;padding:16px}.article-content--vigilkids .props-dashed span,.article-content--vigilkids .props-solid span{font-size:18px;line-height:21px;padding-left:10px}.article-content--vigilkids .props-dashed span:before,.article-content--vigilkids .props-solid span:before{height:10px;width:4px}.article-content--vigilkids .props-dashed ul,.article-content--vigilkids .props-solid ul{font-size:14px;line-height:21px;margin-top:10px;padding-left:10px}.article-content--vigilkids .notice-info-row{flex-direction:column;gap:16px}.article-content--vigilkids .notice-info-row .notice-info{padding-bottom:24px;padding-left:44px;padding-top:52px;width:100%}.article-content--vigilkids .notice-info-row .notice-info p{line-height:21px;margin-bottom:12px;min-height:24px}.article-content--vigilkids .notice-info-row .notice-info p:last-child{margin-bottom:0}.article-content--vigilkids .notice-info-row .notice-info p:before{top:0}.article-content--vigilkids .notice-info p:before{background-size:cover;height:24px;width:24px}.article-content--vigilkids .notice-info.warning p:before{background-size:cover}}@media (max-width:515px){.article-content--vigilkids img:not(.hot-icon){max-width:100%;width:auto}}.article-content--vigilkids [id]{scroll-margin-top:80px}

package/dist/styles/products/visiva.css

@@ -0,0 +1 @@
+.article-content--visiva p{color:#1a1a1a;font-size:16px;line-height:1.7;margin-top:10px}.article-content--visiva a{color:#1fb04f;transition:all .3s ease}.article-content--visiva a:hover{text-decoration:underline}.article-content--visiva .font-bold,.article-content--visiva b,.article-content--visiva strong{font-weight:700}.article-content--visiva .underline{text-decoration:underline}.article-content--visiva>h2{font-size:30px;font-weight:900;line-height:1.2;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:24px;font-weight:900;line-height:1.2;margin-top:16px}.article-content--visiva ul{margin-top:10px}.article-content--visiva .disc-list{font-size:14px;line-height:1.8;list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--visiva>img:not(.hot-icon):not(.icon){border-radius:24px;display:block;height:auto;margin:10px auto 30px;max-width:100%;-o-object-fit:cover;object-fit:cover;width:auto}.article-content--visiva .btn{align-items:center;border:none;border-radius:40px;box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:60px;justify-content:center;line-height:24px;margin:20px auto 30px;min-width:220px;padding:10px 20px;text-decoration:none;transition:all .3s ease}.article-content--visiva .btn.btn-primary{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.article-content--visiva .btn.btn-primary:hover{opacity:.9}.article-content--visiva .btn.outline-btn{background:#fff;border:2px solid #1fb04f;color:#1fb04f}.article-content--visiva .btn.outline-btn:hover{background:#1fb04f;color:#fff}.article-content--visiva .btn-group{align-items:center;display:flex;gap:24px;justify-content:center;margin-bottom:30px}.article-content--visiva .btn-group .btn{margin:0}.article-content--visiva .contrast-table{border:1px solid #d4d4d4;border-radius:20px;margin-top:40px;overflow:hidden}.article-content--visiva .contrast-table table{border-collapse:collapse;min-width:600px;width:100%}.article-content--visiva .contrast-table thead tr{background:#292929;color:#fff}.article-content--visiva .contrast-table th{font-size:14px;font-weight:600;padding:17px 16px}.article-content--visiva .contrast-table td{border-top:1px solid #d9d9d9;font-size:14px;padding:17px 16px}.article-content--visiva .sticky-table{overflow-x:auto}@media (max-width:768px){.article-content--visiva p{font-size:14px}.article-content--visiva>h2{font-size:22px;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:18px}.article-content--visiva .btn-group{flex-direction:column;gap:10px}.article-content--visiva>img:not(.hot-icon):not(.icon){max-width:100%}}.article-content--visiva .blog-paragraph,.article-content--visiva .blog-paragraph-normal{margin-top:20px}.article-content--visiva .blog-paragraph-large{font-size:20px;margin-top:40px}.article-content--visiva .blog-paragraph-highlight{color:var(--primary-1000,#1fb04f);text-decoration:underline}.article-content--visiva .blog-paragraph-bg-highlight{background-color:#ecffb9}.article-content--visiva .blog-paragraph-bold{font-weight:700}@media (max-width:640px){.article-content--visiva .blog-paragraph{font-size:14px}}.article-content--visiva .blog-intro-text{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-intro-list{font-weight:300;list-style-position:inside;list-style-type:disc;padding-left:20px}.article-content--visiva .blog-intro-list-item{margin-top:8px}.article-content--visiva .blog-intro-text-secondary{font-size:16px;line-height:24px;margin-top:8px}.article-content--visiva .blog-toc{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-toc-title{color:#000;font-size:16px;font-weight:600;line-height:24px}.article-content--visiva .blog-toc-list{color:#000}.article-content--visiva .blog-toc-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.article-content--visiva .blog-toc-numbered-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:decimal;margin-top:8px;padding-left:36px}.article-content--visiva .blog-toc-numbered-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-numbered-list>li{display:list-item;list-style-position:outside;list-style-type:decimal}.article-content--visiva .blog-toc-numbered-item{align-items:center;display:flex;gap:8px}.article-content--visiva .blog-toc-hot-tag-wrapper{align-items:center;display:flex;gap:4px;position:relative}.article-content--visiva .blog-toc-hot-tag-text{color:#fff;font-family:Roboto,sans-serif;font-size:12px;font-style:italic;font-weight:900;line-height:16px;transform:scale(.75);transform-origin:center}.article-content--visiva .blog-h2-style1{font-size:22px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h2-style1-text{margin-top:16px}.article-content--visiva .blog-h2-style2{font-size:22px;font-weight:900;gap:8px;line-height:1;margin-top:16px;padding-left:8px;position:relative}.article-content--visiva .blog-h2-style2-indicator{background-color:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.article-content--visiva .blog-h2-style2-link{color:#1fb04f}.article-content--visiva .blog-h3-style1{font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style1-text{margin-top:4px}.article-content--visiva .blog-h3-style1-list{font-size:12px;font-weight:300;line-height:16px;list-style-position:inside;list-style-type:disc;margin-top:16px;padding-left:20px}.article-content--visiva .blog-h3-style1-list>*+*{margin-top:8px}.article-content--visiva .blog-h3-style2{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style2>*+*{margin-left:8px}.article-content--visiva .blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:9999px;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;line-height:28px;transform:translateY(0);width:24px}.article-content--visiva .blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style3>*+*{margin-left:4px}.article-content--visiva .blog-h3-style3-badge{background-color:#1fb04f;border-radius:20px;color:#fff;display:inline-block;font-size:16px;font-weight:600;height:22px;line-height:22px;line-height:24px;padding-left:8px;padding-right:8px;transform:translateY(4px)}.article-content--visiva .blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style4>*+*{margin-left:4px}.article-content--visiva .blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;line-height:24px;position:relative;width:24px}.article-content--visiva .blog-h3-style4-icon{left:0;position:absolute;top:1px}.article-content--visiva .blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;line-height:24px;position:relative;z-index:10}.article-content--visiva .blog-placeholder-image{background-color:#d9d9d9;border-radius:24px;height:300px;margin-top:40px;width:100%}.article-content--visiva .blog-button-single-wrapper{margin-top:40px;text-align:center}.article-content--visiva .blog-button-single{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-single:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-single-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.article-content--visiva .blog-button-group-button-black{align-items:center;background-color:#000;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-black:hover{background-color:rgba(0,0,0,.8)}.article-content--visiva .blog-button-group-button-green{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-group-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group-note{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:16px}.article-content--visiva .blog-button-group-note-text{color:#666262;font-size:14px;font-weight:500;line-height:20px}.article-content--visiva .blog-button-group-dark{background-color:#000;border-radius:20px;margin-top:40px;padding:40px 16px}.article-content--visiva .blog-button-group-dark-inner{align-items:center;display:flex;flex-direction:column;gap:16px}.article-content--visiva .blog-button-group-dark-button{align-items:center;background-color:#000;border:1px solid #fff;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-dark-button:hover{background-color:#fff;color:#000}.article-content--visiva .blog-quote{background-color:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.article-content--visiva .blog-quote-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:16px}.article-content--visiva .blog-quote-text{font-size:12px;font-style:italic;line-height:16px;line-height:1.625;margin-bottom:8px}.article-content--visiva .blog-quote-footer{align-items:flex-end;display:flex;gap:8px}.article-content--visiva .blog-quote-divider{background-color:#666262;display:inline-block;height:1px;margin-bottom:4px;width:48px}.article-content--visiva .blog-quote-author{color:#666262;font-size:12px;line-height:16px}.article-content--visiva .blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;min-width:0;overflow-x:auto;text-align:center}.article-content--visiva .blog-table{border-collapse:collapse;min-width:800px;width:100%}.article-content--visiva .blog-table-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px}.article-content--visiva .blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.article-content--visiva .blog-table-header-cell-last{font-size:14px;font-weight:600;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.article-content--visiva .blog-table-cell{border-right:1px solid #d9d9d9;padding:17px 16px}.article-content--visiva .blog-table-cell:hover{font-weight:400}.article-content--visiva .blog-table-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;padding:17px 16px}.article-content--visiva .blog-table-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-cell-last{font-size:14px;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-plus-container{background-color:#fff;border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;overflow:hidden;position:relative;text-align:center}.article-content--visiva .blog-table-plus-content{max-height:500px;min-width:0;overflow-x:auto;overflow:hidden;position:relative;transition:all .3s ease-in-out}.article-content--visiva .blog-table-plus-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.article-content--visiva .blog-table-plus-toggle{align-items:center;background-color:#fff;border:1px solid #d4d4d4;border-radius:9999px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;position:absolute;transform:translateY(-50%) translateX(-50%);transition:all .3s;width:50px;z-index:10}.article-content--visiva .blog-table-plus-toggle:hover{background-color:#f9fafb}.article-content--visiva .blog-table-plus-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px;position:sticky;top:0;z-index:10}.article-content--visiva .blog-table-plus-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;min-height:80px}.article-content--visiva .blog-table-plus-cell{border-right:1px solid #d9d9d9;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-last{font-size:14px;line-height:20px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.article-content--visiva .blog-pros-cons-card{background-color:#f7f8fa;border-radius:10px;flex:1 1 0%;padding:20px 12px}.article-content--visiva .blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.article-content--visiva .blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-pros-cons-list{color:#000;font-size:14px;line-height:20px;list-style-position:inside;list-style-type:disc}.article-content--visiva .blog-pros-cons-list>*+*{margin-top:12px}.article-content--visiva .blog-step{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.article-content--visiva .blog-step-link{color:#1fb04f;font-weight:900}.article-content--visiva .blog-note-style{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.article-content--visiva .blog-note-style-badge{align-items:center;background-color:#02a967;border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding-left:8px;padding-right:8px;position:absolute;top:0}.article-content--visiva .blog-note-style-badge-text{color:#fff;font-size:14px;font-weight:700;line-height:20px}.article-content--visiva .blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-note-style2{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 12px 20px;position:relative}.article-content--visiva .blog-features-card{align-items:center;background-color:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-content{max-width:426px}.article-content--visiva .blog-features-card-title{font-size:18px;font-weight:700;line-height:28px;margin-bottom:16px;text-align:center}.article-content--visiva .blog-features-card-list{color:#666262;font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-features-card-image-wrapper{max-width:411px}.article-content--visiva .blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--visiva .blog-features-card-dark{align-items:center;background-color:#2e2e2e;border-radius:10px;color:#fff;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-dark-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-dark-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-dark-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-dark-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-note-style3{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.article-content--visiva .blog-note-style3-title{color:#000;font-weight:600}.article-content--visiva .blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-qa-card{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-qa-item{margin-bottom:24px}.article-content--visiva .blog-qa-question{font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-question-black{color:#000;font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-answer{color:#666262;line-height:1.625}.article-content--visiva .blog-qa-answer-label{color:#000;font-weight:600}.article-content--visiva .blog-qa-card2-title{font-size:24px;font-weight:700;line-height:32px;margin-top:40px}.article-content--visiva .blog-qa-card2-intro{font-size:14px;line-height:20px;margin-top:20px}.article-content--visiva .blog-qa-card2-container{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:20px;padding:20px 16px}.article-content--visiva .blog-qa-card3{background-color:#f8fffb;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:28px 16px}.article-content--visiva .blog-qa-card3-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-qa-card3-title{color:#1fb04f;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-qa-card3-item{margin-bottom:16px}.article-content--visiva .blog-qa-card3-question{font-weight:700;margin-bottom:6px}.article-content--visiva .blog-qa-card3-answer{line-height:1.625}@media (min-width:768px){.article-content--visiva .blog-intro-text,.article-content--visiva .blog-intro-text-secondary{font-size:20px;line-height:28px}.article-content--visiva .blog-toc{border-radius:20px;padding:40px 32px}.article-content--visiva .blog-toc-title{font-size:20px;line-height:28px}.article-content--visiva .blog-h2-style1{font-size:30px}.article-content--visiva .blog-h2-style2{font-size:30px;padding-left:16px}.article-content--visiva .blog-h2-style2-indicator{height:25px;width:5px}.article-content--visiva .blog-h3-style1{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style1-text{margin-top:16px}.article-content--visiva .blog-h3-style1-list{font-size:14px;line-height:20px;margin-top:8px}.article-content--visiva .blog-h3-style2,.article-content--visiva .blog-h3-style3{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style3>*+*{margin-left:12px}.article-content--visiva .blog-h3-style4{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style4>*+*{margin-left:12px}.article-content--visiva .blog-button-single-wrapper{text-align:left}.article-content--visiva .blog-button-single{min-width:220px}.article-content--visiva .blog-button-group{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-button-black{min-width:220px}.article-content--visiva .blog-button-group-button-green{min-width:260px}.article-content--visiva .blog-button-group-note{margin-top:20px}.article-content--visiva .blog-button-group-dark-inner{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-dark-button{min-width:220px}.article-content--visiva .blog-quote{border-radius:20px;padding:30px 28px}.article-content--visiva .blog-quote-title{font-size:20px;line-height:1}.article-content--visiva .blog-quote-text{font-size:14px;line-height:20px;margin-bottom:16px}.article-content--visiva .blog-quote-author{font-size:14px;line-height:20px}.article-content--visiva .blog-pros-cons{flex-direction:row;gap:24px}.article-content--visiva .blog-pros-cons-card{border-radius:20px;padding:26px 30px}.article-content--visiva .blog-step{font-size:20px;line-height:1}.article-content--visiva .blog-note-style-text{font-size:16px;line-height:24px}.article-content--visiva .blog-note-style2{padding-left:16px;padding-right:16px}.article-content--visiva .blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-title{font-size:20px;line-height:1;text-align:left}.article-content--visiva .blog-features-card-list{margin-bottom:28px}.article-content--visiva .blog-features-card-button{min-width:260px}.article-content--visiva .blog-features-card-image{border-radius:20px;min-height:239px}.article-content--visiva .blog-features-card-dark{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-dark-list{margin-bottom:28px}.article-content--visiva .blog-features-card-dark-button{min-width:260px}.article-content--visiva .blog-note-style3{border-radius:15px;padding:24px}.article-content--visiva .blog-note-style3-text{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card2-title{font-size:28px}.article-content--visiva .blog-qa-card2-intro{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card2-container{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card3{border-radius:15px;font-size:16px;line-height:24px;padding-left:20px;padding-right:20px}.article-content--visiva .blog-qa-card3-title{font-size:20px;line-height:1}.article-content--visiva .blog-qa-card3-item{margin-bottom:24px}.article-content--visiva .blog-qa-card3-question{margin-bottom:12px}}@media (max-width:640px){.article-content--visiva .blog-h2-style1-text,.article-content--visiva .blog-h3-style1-text,.article-content--visiva .blog-toc-list{font-size:14px;line-height:20px}.article-content--visiva .blog-toc-numbered-list{font-size:12px;line-height:16px}}@media (max-width:768px){.article-content--visiva .blog-h2-style2-text,.article-content--visiva .blog-intro-list{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card-button,.article-content--visiva .blog-features-card-dark-button{margin-left:auto;margin-right:auto}}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vigilkids/section-renderer-vue",
+  "version": "0.0.1",
+  "description": "Vue 3 adapter for OneX Section Renderer SDK",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./editor": {
+      "import": "./dist/editor.mjs",
+      "types": "./dist/editor.d.ts"
+    },
+    "./styles/vigilkids": "./dist/styles/products/vigilkids.css",
+    "./styles/visiva": "./dist/styles/products/visiva.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "unbuild"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1yhy/onex.git",
+    "directory": "packages/section-renderer-vue"
+  },
+  "peerDependencies": {
+    "@vigilkids/section-core": "^0.0.1",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "unbuild": "^3.5.0",
+    "vue-tsc": "^2.0.21"
+  }
+}