@vigilkids/section-renderer-vue 0.0.1

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+import { safeUrl } 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) || 'button')
+
+const primaryUrl = computed(() => safeUrl(String(s.value.button_url || '')))
+const secondaryUrl = computed(() => safeUrl(String(s.value.secondary_button_url || '')))
+
+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-button-single -->
+  <div v-if="variant === 'button'" class="blog-button-single-wrapper">
+    <a
+      :href="editorMode ? undefined : primaryUrl"
+      class="blog-button-single"
+      :class="{ 'blog-button-single--disabled': editorMode }"
+    >
+      <!-- #living-beauty -->
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+      </svg>
+      <span class="blog-button-single-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+    </a>
+  </div>
+
+  <!-- blog-button-group -->
+  <div v-else-if="variant === 'button-group'" class="blog-button-group">
+    <div class="blog-button-group-item">
+      <a
+        :href="editorMode ? undefined : primaryUrl"
+        class="blog-button-group-button-black"
+        :class="{ 'blog-button-group--disabled': editorMode }"
+      >
+        <!-- #living-beauty2 -->
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+        </svg>
+        <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+      </a>
+      <p v-if="s.button_caption" class="blog-button-group-note">
+        <img src="https://cdn.visiva.ai/blog/coupon.svg" alt="Coupon" class="blog-icon-17">
+        <span class="blog-button-group-note-text" v-bind="editableAttrs('button_caption')">{{ s.button_caption }}</span>
+      </p>
+    </div>
+
+    <div class="blog-button-group-item">
+      <a
+        :href="editorMode ? undefined : secondaryUrl"
+        class="blog-button-group-button-green"
+        :class="{ 'blog-button-group--disabled': editorMode }"
+      >
+        <!-- #market -->
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <mask id="market-mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+            <rect width="16" height="16" fill="#D9D9D9"/>
+          </mask>
+          <g mask="url(#market-mask0)">
+            <path d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z" fill="black"/>
+            <path d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z" fill="black"/>
+            <path d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z" fill="black"/>
+          </g>
+        </svg>
+        <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{ s.secondary_button_text }}</span>
+      </a>
+      <p v-if="s.secondary_button_caption" class="blog-button-group-note">
+        <!-- #star -->
+        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.5 0L10.4084 5.87336L16.584 5.87336L11.5878 9.50329L13.4962 15.3766L8.5 11.7467L3.50383 15.3766L5.41219 9.50329L0.416019 5.87336L6.59163 5.87336L8.5 0Z" fill="#00B67A"/>
+          <path d="M8.5 12L11.5 9.5L12 11L8.5 12Z" fill="#005128"/>
+        </svg>
+        <span class="blog-button-group-note-text" v-bind="editableAttrs('secondary_button_caption')">{{ s.secondary_button_caption }}</span>
+      </p>
+    </div>
+  </div>
+
+  <!-- blog-button-group-dark -->
+  <div v-else-if="variant === 'button-group-dark'" class="blog-button-group-dark">
+    <div class="blog-button-group-dark-inner">
+      <div>
+        <a
+          :href="editorMode ? undefined : primaryUrl"
+          class="blog-button-group-dark-button"
+          :class="{ 'blog-button-group--disabled': editorMode }"
+        >
+          <!-- #living-beauty2 -->
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+          </svg>
+          <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+        </a>
+      </div>
+      <div>
+        <a
+          :href="editorMode ? undefined : secondaryUrl"
+          class="blog-button-group-button-green"
+          :class="{ 'blog-button-group--disabled': editorMode }"
+        >
+          <!-- #market -->
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="market-mask1" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+              <rect width="16" height="16" fill="#D9D9D9"/>
+            </mask>
+            <g mask="url(#market-mask1)">
+              <path d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z" fill="black"/>
+              <path d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z" fill="black"/>
+              <path d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z" fill="black"/>
+            </g>
+          </svg>
+          <span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{ s.secondary_button_text }}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-button-single-wrapper{margin-top:40px;text-align:center}.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;text-decoration:none}.blog-button-single:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-button-single--disabled{pointer-events:none}.blog-button-single-text{font-size:16px;font-weight:700}.blog-button-group{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.blog-button-group--disabled{pointer-events:none}.blog-button-group-button-black{align-items:center;background:#000;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px;text-decoration:none}.blog-button-group-button-black:hover{background:rgba(0,0,0,.8)}.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;text-decoration:none}.blog-button-group-button-green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-button-group-text{font-size:16px;font-weight:700}.blog-button-group-note{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:16px}.blog-button-group-note-text{color:#666262;font-size:14px;font-weight:500}.blog-button-group-dark{background:#000;border-radius:20px;margin-top:40px;padding:40px 16px}.blog-button-group-dark-inner{align-items:center;display:flex;flex-direction:column;gap:16px}.blog-button-group-dark-button{align-items:center;background:#000;border:1px solid #fff;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px;text-decoration:none}.blog-button-group-dark-button:hover{background:#fff;color:#000}@media (min-width:768px){.blog-button-single-wrapper{text-align:left}.blog-button-single{min-width:220px}.blog-button-group{flex-direction:row;gap:24px}.blog-button-group-button-black{min-width:220px}.blog-button-group-button-green{min-width:260px}.blog-button-group-note{margin-top:20px}.blog-button-group-dark-inner{flex-direction:row;gap:24px}.blog-button-group-dark-button{min-width:220px}}.blog-icon-17{height:17px;width:17px}
+</style>

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

@@ -0,0 +1,76 @@
+<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 title = computed(() => (props.settings.title as string) || '')
+
+const items = computed(() =>
+  props.blockOrder
+    .map((id) => props.blocks[id])
+    .filter((b): b is BlockData => !!b && b.type === 'faq_item'),
+)
+
+const { editableAttrs, 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>
+<div class="blog-qa-card3">
+    <div class="blog-qa-card3-header">
+      <!-- #faq -->
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#faq-clip0)">
+          <path d="M10 0.9375C4.995 0.9375 0.9375 4.995 0.9375 10L0.939583 10.1971C0.970862 11.7478 1.40154 13.2643 2.19 14.6L2.2975 14.7771L1.76417 16.2446L1.73583 16.3308C1.52417 17.1 1.92333 17.8767 2.64833 18.14L2.74667 18.1721C2.87917 18.2096 3.01625 18.2292 3.15417 18.2292L6.20125 18.2296L6.04542 18.1562C7.27779 18.7544 8.63012 19.0643 10 19.0625C15.005 19.0625 19.0625 15.005 19.0625 10C19.0625 4.995 15.005 0.9375 10 0.9375Z" fill="#1FB04F"/>
+          <path d="M10 12.846C9.77992 12.846 9.56886 12.9334 9.41325 13.089C9.25763 13.2446 9.17021 13.4557 9.17021 13.6758C9.17021 13.8958 9.25763 14.1069 9.41325 14.2625C9.56886 14.4181 9.77992 14.5056 10 14.5056C10.2201 14.5056 10.4311 14.4181 10.5867 14.2625C10.7424 14.1069 10.8298 13.8958 10.8298 13.6758C10.8298 13.4557 10.7424 13.2446 10.5867 13.089C10.4311 12.9334 10.2201 12.846 10 12.846ZM10.0008 5.49514C9.26375 5.49514 8.56708 5.77555 8.03875 6.28472C7.76853 6.5439 7.55376 6.85525 7.40743 7.19989C7.26111 7.54454 7.18629 7.9153 7.1875 8.28972V8.4318L7.19041 8.47764C7.17499 8.56833 7.17912 8.66126 7.20253 8.75022C7.22593 8.83919 7.26807 8.92212 7.32613 8.99348C7.38418 9.06484 7.45681 9.12297 7.53915 9.16399C7.62149 9.205 7.71164 9.22795 7.80357 9.23131C7.8955 9.23466 7.98708 9.21834 8.07219 9.18343C8.1573 9.14852 8.23397 9.09583 8.29707 9.02889C8.36016 8.96195 8.40823 8.88231 8.43806 8.79528C8.46788 8.70826 8.47877 8.61588 8.47 8.52431L8.47833 8.45764L8.47958 8.29014L8.48166 8.21347C8.52333 7.48306 9.19083 6.89931 10.0008 6.89931C10.8408 6.89931 11.5221 7.52556 11.5221 8.28972C11.5221 8.80097 11.2096 9.27389 10.7154 9.51597L10.5362 9.59764C10.1943 9.76873 9.9069 10.0318 9.70625 10.3572C9.47583 10.726 9.35333 11.1697 9.35333 11.6251V12.0268L9.35625 12.0664C9.37958 12.1926 9.47625 12.2806 9.59291 12.2806H10.4054L10.4442 12.2768C10.5014 12.2648 10.5527 12.2333 10.5893 12.1877C10.6259 12.1421 10.6456 12.0853 10.645 12.0268V11.6026L10.6479 11.5335C10.6704 11.2347 10.8508 10.9693 11.105 10.8618C11.611 10.6485 12.0429 10.2907 12.3466 9.83323C12.6503 9.37574 12.8124 8.83885 12.8125 8.28972C12.8144 7.91532 12.7399 7.54447 12.5938 7.19976C12.4477 6.85505 12.2329 6.54371 11.9625 6.28472C11.4367 5.77566 10.7327 5.4923 10.0008 5.49514Z" fill="white"/>
+        </g>
+        <defs>
+          <clipPath id="faq-clip0">
+            <rect width="20" height="20" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
+      <h2 class="blog-qa-card3-title" v-bind="editableAttrs('title')">{{ title }}</h2>
+    </div>
+
+    <div
+      v-for="(item, index) in items"
+      :key="blockOrder[index]"
+      :class="index === items.length - 1 ? 'blog-qa-card3-item-last' : 'blog-qa-card3-item'"
+    >
+      <h3 class="blog-qa-card3-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
+        {{ item.settings.question }}
+      </h3>
+      <p class="blog-qa-card3-answer" v-bind="blockEditableAttrs(blockOrder[index], 'answer')">
+        {{ item.settings.answer }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-qa-card3{background:#f8fffb;border-radius:10px;font-size:14px;margin-top:40px;padding:28px 16px}.blog-qa-card3-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-qa-card3-title{color:#1fb04f;font-size:18px;font-weight:700;margin:0}.blog-qa-card3-item{margin-bottom:16px}.blog-qa-card3-item-last{margin-bottom:0}.blog-qa-card3-question{font-weight:700;margin:0 0 6px}.blog-qa-card3-answer{line-height:1.625;margin:0}@media (min-width:768px){.blog-qa-card3{border-radius:15px;font-size:16px;padding:28px 20px}.blog-qa-card3-title{font-size:20px}.blog-qa-card3-item{margin-bottom:24px}.blog-qa-card3-question{margin-bottom:12px}}
+</style>

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+import { safeUrl } 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 isDark = computed(() => s.value.variant === 'dark')
+const blockOrder = computed(() => props.blockOrder)
+const blocks = computed(() => props.blocks)
+
+const { editableAttrs, 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>
+<!-- blog-features-card / blog-features-card-dark -->
+  <div :class="isDark ? 'blog-features-card-dark' : 'blog-features-card'">
+    <div class="blog-features-card-content">
+      <h2 class="blog-features-card-title" v-bind="editableAttrs('title')">{{ s.title }}</h2>
+
+      <ul :class="isDark ? 'blog-features-card-dark-list' : 'blog-features-card-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>
+
+      <a
+        :href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
+        :class="isDark ? 'blog-features-card-dark-button' : 'blog-features-card-button'"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <!-- #living-beauty -->
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z" fill="currentColor"/>
+        </svg>
+        <span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{ s.button_text }}</span>
+      </a>
+    </div>
+
+    <div class="blog-features-card-image-wrapper">
+      <img
+        :src="safeUrl(String(s.image_src || ''))"
+        alt="Feature Image"
+        class="blog-features-card-image"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-features-card{background:#f7f8fa}.blog-features-card,.blog-features-card-dark{align-items:center;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.blog-features-card-dark{background:#2e2e2e;color:#fff}.blog-features-card-content{max-width:426px}.blog-features-card-title{font-size:18px;font-weight:700;margin:0 0 16px;text-align:center}.blog-features-card-list{color:#666262;font-size:14px;font-weight:300;list-style-position:outside;list-style-type:disc;margin:0 0 20px;padding-left:16px}.blog-features-card-list li+li{margin-top:8px}.blog-features-card-dark-list{font-size:14px;font-weight:300;list-style-position:outside;list-style-type:disc;margin:0 0 20px;padding-left:16px}.blog-features-card-dark-list li+li{margin-top:8px}.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;margin:0 auto;min-width:270px;text-decoration:none}.blog-features-card-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-features-card-dark-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;margin:0 auto;min-width:270px;text-decoration:none}.blog-features-card-dark-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-button-group-text{font-size:16px;font-weight:700}.blog-features-card-image-wrapper{max-width:411px}.blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:768px){.blog-features-card,.blog-features-card-dark{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.blog-features-card-title{font-size:20px;text-align:left}.blog-features-card-dark-list,.blog-features-card-list{margin-bottom:28px}.blog-features-card-button,.blog-features-card-dark-button{margin:0;min-width:260px}.blog-features-card-image{border-radius:20px;min-height:239px}}@media (max-width:767px){.blog-features-card-button,.blog-features-card-dark-button{margin-left:auto;margin-right:auto}}
+</style>

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

@@ -0,0 +1,61 @@
+<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-h2-style1: plain -->
+  <h2
+    v-if="variant === 'plain'"
+    :id="String(s.anchor || '')"
+    class="blog-h2-style1"
+    v-bind="editableAttrs('title')"
+  >
+    {{ s.title }}
+  </h2>
+
+  <!-- blog-h2-style2: accent -->
+  <h2
+    v-else-if="variant === 'accent'"
+    :id="String(s.anchor || '')"
+    class="blog-h2-style2"
+    v-bind="editableAttrs('title')"
+  >
+    <span class="blog-h2-style2-indicator" />
+    {{ s.title }}
+  </h2>
+</template>
+
+<style scoped>
+.blog-h2-style1,.blog-h2-style2{font-size:22px;font-weight:900;line-height:1;margin-bottom:0;margin-top:16px}.blog-h2-style2{gap:8px;padding-left:8px;position:relative}.blog-h2-style2-indicator{background:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.blog-h2-style1[id],.blog-h2-style2[id]{scroll-margin-top:80px}@media (min-width:768px){.blog-h2-style1{font-size:30px}.blog-h2-style2{font-size:30px;padding-left:16px}.blog-h2-style2-indicator{height:25px;width:5px}}
+</style>

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