@vigilkids/section-renderer-vue 0.0.1

package/dist/sections/article/vigilkids/ArticleQuote.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+import { renderContent } from '../prosemirror'
+
+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 renderedContent = computed(() => renderContent(s.value.content))
+
+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="article-info">
+    <p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
+    <div class="article-info-content" v-html="renderedContent" />
+    <cite v-if="s.attribution" class="article-info-attribution">
+      <span class="article-info-divider"></span>
+      <span v-bind="editableAttrs('attribution')">by {{ s.attribution }}</span>
+    </cite>
+  </div>
+</template>
+
+<style scoped>
+.article-info{background:var(--article-quote-bg,#f7f7f7);border:var(--article-quote-border,none);color:var(--article-text,#3a4259);font-size:16px;line-height:24px;margin:30px 0 14px;padding:30px;position:relative}.article-info:before{background:var(--article-quote-bar,#24c790);content:"";height:100%;left:0;position:absolute;top:0;width:10px}.article-info-title{font-size:20px;font-weight:700;line-height:23px;margin-top:0}.article-info-content,.article-info-title{color:var(--article-text,#3a4259);margin-bottom:14px}.article-info-content{font-size:16px;font-style:italic;line-height:24px}.article-info-content :deep(p){margin-top:10px}.article-info-content :deep(p:first-child){margin-top:0}.article-info-attribution{align-items:center;display:flex;font-style:normal;margin-bottom:0;margin-top:10px}.article-info-divider{background:var(--article-text-muted,#6b7280);display:inline-block;height:1px;margin-right:8px;vertical-align:middle;width:48px}@media (max-width:768px){.article-info{font-size:14px;padding:20px 16px}.article-info:before{height:100%;width:4px}.article-info-title{font-size:18px;line-height:21px;margin-bottom:10px}.article-info-content{font-size:14px;line-height:21px}.article-info-attribution{text-align:right}}
+</style>

package/dist/sections/article/vigilkids/ArticleQuote.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/vigilkids/ArticleStepList.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/vigilkids/ArticleStepList.vue

@@ -0,0 +1,49 @@
+<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 blockOrder = computed(() => props.blockOrder)
+const blocks = computed(() => props.blocks)
+
+const { blockEditableAttrs } = 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>
+<ul class="step-list">
+    <template v-for="blockId in blockOrder" :key="blockId">
+      <li v-if="blocks[blockId]">
+        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{ blocks[blockId]!.settings.label }}</span>
+        {{ blocks[blockId]!.settings.description }}
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.step-list{list-style:none;margin-bottom:30px;margin-top:20px;padding:0}.step-list li:not(:last-child){margin-bottom:24px}.step-list li{color:var(--article-text,#3a4259);font-size:16px;line-height:24px}.step-list li span{font-weight:700}.step-list .primary-color{color:var(--article-primary-hover,#1ba97a)}@media (max-width:768px){.step-list li{font-size:14px;line-height:21px}.step-list li:not(:last-child){margin-bottom:21px}}
+</style>

package/dist/sections/article/vigilkids/ArticleStepList.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/vigilkids/ArticleSubheading.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/vigilkids/ArticleSubheading.vue

@@ -0,0 +1,56 @@
+<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) || 'default')
+
+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>
+<h3 :class="['article-subheading', `article-subheading--${variant}`]">
+    <!-- numbered: 实心绿色圆形+白色数字 (VigilKids) -->
+    <span v-if="variant === 'numbered' && s.number" class="article-subheading__number" v-bind="editableAttrs('number')">
+      {{ s.number }}
+    </span>
+    <!-- pill: 绿色药丸标签 (Visiva) -->
+    <span v-else-if="variant === 'pill' && s.label" class="article-subheading__pill" v-bind="editableAttrs('label')">
+      {{ s.label }}
+    </span>
+    <!-- icon: 浅色圆形+深色数字 (Visiva) -->
+    <span v-else-if="variant === 'icon' && s.number" class="article-subheading__icon" v-bind="editableAttrs('number')">
+      {{ s.number }}
+    </span>
+    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+  </h3>
+</template>
+
+<style scoped>
+.article-subheading{align-items:center;color:var(--article-primary-hover,#1ba97a);display:flex;font-size:20px;font-weight:700;line-height:23px;margin-top:30px}.article-subheading--numbered{color:var(--article-text,#3a4259)}.article-subheading__number{align-items:center;background:var(--article-sub-number-bg,var(--article-primary,#24c790));border:var(--article-sub-number-border,none);border-radius:50%;color:var(--article-sub-number-color,#fff);display:flex;height:36px;justify-content:center;margin-right:14px;min-width:36px;width:36px}.article-subheading__pill{background:var(--article-primary,#24c790);border-radius:20px;color:#fff;display:inline-flex;height:22px;padding:0 8px}.article-subheading__icon,.article-subheading__pill{align-items:center;flex-shrink:0;font-size:14px;font-weight:600;justify-content:center;margin-right:8px}.article-subheading__icon{background:var(--article-highlight,#ecfdf5);border-radius:50%;color:var(--article-text,#3a4259);display:flex;height:24px;min-width:24px;width:24px}.article-subheading--icon,.article-subheading--pill{color:var(--article-text,#3a4259);font-weight:700}@media (max-width:768px){.article-subheading{font-size:18px}}
+</style>

package/dist/sections/article/vigilkids/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/vigilkids/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/vigilkids/ArticleTable.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } 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 isSticky = computed(() => String(s.value.variant) === 'sticky')
+
+const columns = computed<ColumnDef[]>(() =>
+  parseJsonOrArray<ColumnDef>(s.value.columns),
+)
+
+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)
+    }),
+)
+</script>
+
+<template>
+<div :class="['contrast-table', { 'sticky-table': isSticky }]">
+    <table>
+      <thead align="left">
+        <tr>
+          <th
+            v-for="(col, idx) in columns"
+            :key="idx"
+            :style="col.min_width ? { minWidth: `${col.min_width}px` } : undefined"
+          >
+            {{ col.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody align="left">
+        <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <td v-for="(cell, cellIdx) in row" :key="cellIdx" v-html="cell" />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.contrast-table{background:#fff;border:1px solid var(--article-border,#e5e7eb);margin:30px 0;overflow-x:auto}.contrast-table table{border-spacing:0;color:var(--article-text,#3a4259);text-align:center;width:100%}.contrast-table td,.contrast-table th{border-bottom:1px solid var(--article-border,#e5e7eb);border-right:1px solid var(--article-border,#e5e7eb);padding:18px 20px;width:25%}.contrast-table td:last-child,.contrast-table th:last-child{border-right:none}.contrast-table thead{font-size:16px}.contrast-table tbody tr:last-child td{border-bottom:none}.contrast-table tr td,.contrast-table tr th{background-color:#fff}.contrast-table tbody tr:nth-child(2n) td{background-color:var(--article-bg-light,#f5f9fc)}.contrast-table thead tr th{background-color:var(--article-table-header,#374151);color:var(--article-table-header-text,#fff)}.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.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 :deep(a){color:var(--article-primary-hover,#1ba97a);font-weight:400}@media (max-width:768px){.contrast-table:not(.sticky-table) tr th{min-width:200px!important}.contrast-table tbody{font-size:14px}}
+</style>

package/dist/sections/article/vigilkids/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/vigilkids/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/vigilkids/ArticleToc.vue

@@ -0,0 +1,102 @@
+<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
+  hot: boolean
+  children: { id: string; text: string; anchor: string }[]
+}
+
+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'))
+
+// 将 blockOrder 中连续的 toc-h3 归组到前一个 toc-h2 下
+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 || ''),
+        hot: Boolean(block.settings.hot),
+        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 || ''),
+      })
+    }
+  }
+
+  return groups
+})
+
+const hotIconSrc =
+  "data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5479 11.9702C10.0966 11.9702 9.71456 12.5389 9.71456 13.2188C9.71456 13.8948 10.0966 14.4668 10.5479 14.4668C10.9992 14.4668 11.3819 13.8968 11.3819 13.2175C11.3819 12.5389 10.9999 11.9689 10.5485 11.9689L10.5479 11.9702ZM15.3977 3.54841C15.3258 3.46817 15.2338 3.40848 15.1312 3.37545C15.0286 3.34242 14.919 3.33723 14.8138 3.36042C14.6018 3.41108 14.4271 3.57374 14.3471 3.79507C14.1688 4.31816 14.0036 4.84565 13.8518 5.37704C13.6385 4.93438 13.3985 4.50972 13.1318 4.10374C12.1478 2.60444 10.7985 1.3318 8.88657 0.0985037C8.7956 0.0391916 8.69032 0.00547728 8.58182 0.000902909C8.47331 -0.00367146 8.36558 0.021063 8.26993 0.0725076C8.17116 0.129583 8.08767 0.209723 8.02661 0.306079C7.96554 0.402435 7.92871 0.512143 7.91927 0.625828C7.65327 3.22973 7.16395 5.86901 5.492 7.72696L5.27001 7.25364C5.0747 6.84432 4.89202 6.45901 4.7747 6.12901C4.64802 5.76569 4.27671 5.5837 3.94538 5.72237C3.7931 5.78848 3.67093 5.90898 3.60272 6.06034L3.46806 6.347C2.64741 8.08696 1.52544 10.4736 1.3561 12.4915C1.00477 16.7687 4.55669 19.4567 8.25059 19.9033C9.06192 20.0013 9.87722 20.0233 10.6919 19.9733C13.5965 19.784 17.125 18.1554 18.3143 14.1468C19.0843 11.5449 18.7837 7.21032 15.3977 3.54708V3.54774V3.54841ZM7.82794 15.1521C7.82794 15.4901 7.57528 15.7655 7.26462 15.7655C6.95464 15.7668 6.70329 15.4921 6.70196 15.1521V13.7588L5.542 13.7788V15.1861C5.542 15.5234 5.28934 15.7994 4.97868 15.7994C4.66936 15.8008 4.41669 15.5261 4.41536 15.1861V11.4189C4.41536 11.0802 4.66735 10.8056 4.97868 10.8056C5.28934 10.8056 5.54134 11.0802 5.54134 11.4189V12.5515L6.70196 12.5322V11.3855C6.70196 11.0469 6.95395 10.7716 7.26462 10.7716C7.57528 10.7716 7.82727 11.0469 7.82727 11.3849V15.1515H7.82794V15.1521ZM10.5479 15.6908C9.4679 15.6908 8.59059 14.5801 8.59059 13.2155C8.59059 11.8509 9.4679 10.7402 10.5479 10.7402C11.6278 10.7402 12.5078 11.8509 12.5078 13.2155C12.5065 14.5801 11.6278 15.6908 10.5479 15.6908V15.6908ZM15.6504 12.1022H14.9351V15.1188C14.9351 15.4568 14.6838 15.7321 14.3731 15.7321C14.0631 15.7334 13.8111 15.4588 13.8091 15.1188V12.1022H13.0951C13.0202 12.1022 12.9461 12.0862 12.8778 12.0553C12.8095 12.0244 12.7486 11.9792 12.6991 11.9229C12.5931 11.8023 12.5339 11.6475 12.5325 11.4869C12.5325 11.1482 12.7845 10.8736 13.0951 10.8736H15.6484C15.9591 10.8736 16.2104 11.1482 16.2104 11.4869C16.2099 11.6477 16.1506 11.8028 16.0437 11.9229C15.9951 11.9796 15.9348 12.0251 15.8669 12.0562C15.799 12.0872 15.7251 12.1032 15.6504 12.1029V12.1022Z' fill='%23F74343'/%3E%3C/svg%3E"
+
+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>
+<ul class="level-1">
+    <li class="table-of-contents" v-bind="editableAttrs('title')">{{ title }}</li>
+    <template v-for="group in tocGroups" :key="group.id">
+      <li :class="{ 'hot-link': group.hot }">
+        <a :href="`#${group.anchor}`">
+          {{ group.text }}
+          <img
+            v-if="group.hot"
+            class="hot-icon"
+            :src="hotIconSrc"
+            width="20"
+            height="20"
+            alt="hot"
+          />
+        </a>
+      </li>
+      <ul v-if="group.children.length > 0" class="level-2">
+        <li v-for="child in group.children" :key="child.id">
+          <a :href="`#${child.anchor}`">{{ child.text }}</a>
+        </li>
+      </ul>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.level-1{background:#f5f9fc;border-radius:10px;display:flex;flex-direction:column;font-weight:700;gap:10px;line-height:19px;list-style:none;margin-bottom:20px;margin-top:30px;padding:28px 28px 28px 74px}.level-1 li,.level-2 li{align-items:center;display:flex;position:relative;width:-moz-fit-content;width:fit-content}.level-1 li:not(.table-of-contents):before,.level-2 li:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='12' fill='none' viewBox='0 0 21 12'%3E%3Cpath fill='%2324c790' d='M20.53 6.53a.75.75 0 0 0 0-1.06L15.757.697a.75.75 0 0 0-1.06 1.06L18.939 6l-4.242 4.243a.75.75 0 0 0 1.06 1.06zM0 6v.75h20v-1.5H0z'/%3E%3C/svg%3E") no-repeat 50%;background-size:cover;content:"";height:12px;left:-34px;position:absolute;top:3.5px;width:21px}.level-1 li.table-of-contents{font-size:18px;margin-left:-37px}.level-2{display:flex;flex-direction:column;gap:10px;list-style:none;margin-left:35px;padding:0}.level-1 a,.level-2 a{align-items:center;color:inherit;display:flex;text-decoration:none}.hot-icon{flex-shrink:0;margin-left:4px}@media (max-width:768px){.level-1 li.table-of-contents{font-size:16px}.level-1{font-size:14px;line-height:16px;margin-top:20px;padding:24px 20px 24px 54px}}
+</style>

package/dist/sections/article/vigilkids/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/sections/article/visiva/ArticleBulletList.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/ArticleBulletList.vue

@@ -0,0 +1,48 @@
+<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 blockOrder = computed(() => props.blockOrder)
+const blocks = computed(() => props.blocks)
+
+const { blockEditableAttrs } = 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>
+<ul class="blog-h3-style1-list">
+    <template v-for="blockId in blockOrder" :key="blockId">
+      <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+        {{ blocks[blockId]!.settings.text }}
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.blog-h3-style1-list{font-size:14px;font-weight:300;list-style-position:inside;list-style-type:disc;margin-top:16px;padding-left:20px}.blog-h3-style1-list li+li{margin-top:8px}@media (min-width:768px){.blog-h3-style1-list{font-size:14px;margin-top:8px}}
+</style>

package/dist/sections/article/visiva/ArticleBulletList.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/ArticleCta.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;