rimelight-components 2.1.16 → 2.1.18

package/dist/runtime/components/blocks/Block.d.vue.ts

@@ -1,12 +1,14 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
+}
+export interface BlockEmits {
+}
 declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<BlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/Block.vue

@@ -1,13 +1,22 @@
 <script setup>
-import { inject, computed, ref } from "vue";
-const editorApi = inject("block-editor-api");
-if (!editorApi) {
-  throw new Error("RCBlock must be used within a BlockEditor component");
-}
+import { inject, ref } from "vue";
+import { tv } from "tailwind-variants";
 const { id, type } = defineProps({
   id: { type: String, required: true },
   type: { type: String, required: true }
 });
+const emit = defineEmits([]);
+const blockStyles = tv({
+  slots: {
+    root: "group relative pl-12 flex flex-row gap-xs",
+    menuContainer: "top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100"
+  }
+});
+const { root, menuContainer } = blockStyles();
+const editorApi = inject("block-editor-api");
+if (!editorApi) {
+  throw new Error("RCBlock must be used within a BlockEditor component");
+}
 const onDelete = () => editorApi.removeBlock(id);
 const onDuplicate = () => editorApi.duplicateBlock(id);
 const onMoveUp = () => editorApi.moveBlock(id, -1);
@@ -54,8 +63,8 @@ const items = ref([
 </script>
 
 <template>
-  <div class="group relative pl-12 flex flex-row gap-xs">
-    <div class="top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100">
+  <div :class="root()">
+    <div :class="menuContainer()">
       <UDropdownMenu :items="items">
         <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral" />
       </UDropdownMenu>

package/dist/runtime/components/blocks/Block.vue.d.ts

@@ -1,12 +1,14 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
+}
+export interface BlockEmits {
+}
 declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<BlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/BlockEditRenderer.d.vue.ts

@@ -1,7 +1,9 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockEditRendererProps {
     blocks: Block[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface BlockEditRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<BlockEditRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockEditRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/BlockEditRenderer.vue

@@ -1,9 +1,17 @@
 <script setup>
 import {} from "vue";
 import { getBlockEditorComponent } from "../../internal/blockMapper";
+import { tv } from "tailwind-variants";
 const { blocks } = defineProps({
   blocks: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const blockEditRendererStyles = tv({
+  slots: {
+    root: "flex flex-col gap-lg w-full"
+  }
+});
+const { root } = blockEditRendererStyles();
 const getComponent = (block) => {
   if (!block || !block.type || block.type.length === 0) {
     console.error("Block object is missing the critical 'type' field.");
@@ -19,7 +27,7 @@ const getComponent = (block) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-lg w-full">
+  <div :class="root()">
     <UEmpty
       v-if="!blocks || blocks.length === 0"
       variant="naked"

package/dist/runtime/components/blocks/BlockEditRenderer.vue.d.ts

@@ -1,7 +1,9 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockEditRendererProps {
     blocks: Block[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface BlockEditRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<BlockEditRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockEditRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/BlockEditor.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { provide, ref, computed } from "vue";
+import { provide } from "vue";
 import { useBlockEditor } from "../../composables";
-const blocks = defineModel({ type: Array, ...{ required: true } });
+import { tv } from "tailwind-variants";
 const { historyLimit } = defineProps({
   historyLimit: { type: Number, required: false }
 });
 const emit = defineEmits(["save"]);
+const blocks = defineModel({ type: Array, ...{ required: true } });
+const blockEditorStyles = tv({});
 const {
   removeBlock,
   moveBlock,
@@ -29,37 +31,6 @@ provide("block-editor-api", {
   redo
 });
 defineExpose({ undo, redo, canUndo, canRedo });
-const handleSave = () => {
-  emit("save");
-};
-const showPreview = ref(false);
-const gridClass = computed(() => ({
-  // The base grid: transitions enable smooth resizing
-  "grid transition-[grid-template-columns] duration-300 ease-out": true,
-  // When hidden, use a single column (Editor takes full width)
-  "grid-cols-1": !showPreview.value,
-  // When visible, use two equal columns (Editor + Preview)
-  "grid-cols-2 gap-xl": showPreview.value
-}));
-const editorPanelClass = computed(() => ({
-  // When preview is visible, both editor/preview share 1/2 span.
-  "col-span-1 w-full": showPreview.value,
-  // When preview is hidden, the editor uses the full grid space.
-  "col-span-2 w-full": !showPreview.value
-}));
-const togglePreview = () => {
-  showPreview.value = !showPreview.value;
-};
-const undoAction = () => {
-  if (canUndo.value) {
-    undo();
-  }
-};
-const redoAction = () => {
-  if (canRedo.value) {
-    redo();
-  }
-};
 </script>
 
 <template>

package/dist/runtime/components/blocks/BlockViewRenderer.d.vue.ts

@@ -1,7 +1,9 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockViewRendererProps {
     blocks: Block[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface BlockViewRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<BlockViewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockViewRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/BlockViewRenderer.vue

@@ -1,9 +1,17 @@
 <script setup>
 import {} from "vue";
 import { getBlockRendererComponent } from "../../internal/blockMapper";
+import { tv } from "tailwind-variants";
 const { blocks } = defineProps({
   blocks: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const blockViewRendererStyles = tv({
+  slots: {
+    root: "flex flex-col gap-lg"
+  }
+});
+const { root } = blockViewRendererStyles();
 const getComponent = (block) => {
   if (!block || !block.type || block.type.length === 0) {
     console.error("Block object is missing the critical 'type' field.");
@@ -19,7 +27,7 @@ const getComponent = (block) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-lg">
+  <div :class="root()">
     <UEmpty
       v-if="!blocks || blocks.length === 0"
       variant="naked"

package/dist/runtime/components/blocks/BlockViewRenderer.vue.d.ts

@@ -1,7 +1,9 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockViewRendererProps {
     blocks: Block[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface BlockViewRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<BlockViewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockViewRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/TextRenderer.d.vue.ts

@@ -1,7 +1,9 @@
 import { type RichTextContent } from "../../types/index.js";
-type __VLS_Props = {
+export interface TextRendererProps {
     content: RichTextContent;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface TextRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<TextRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/TextRenderer.vue

@@ -4,12 +4,20 @@ import {
 import TextNode from "../nodes/TextNode.vue";
 import LinkNode from "../nodes/LinkNode.vue";
 import PageMention from "../page/PageMention.vue";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "TextRenderer"
 });
 const { content } = defineProps({
   content: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const textRendererStyles = tv({
+  slots: {
+    root: ""
+  }
+});
+const { root } = textRendererStyles();
 const getTag = (item) => {
   switch (item.type) {
     case "text":

package/dist/runtime/components/blocks/TextRenderer.vue.d.ts

@@ -1,7 +1,9 @@
 import { type RichTextContent } from "../../types/index.js";
-type __VLS_Props = {
+export interface TextRendererProps {
     content: RichTextContent;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface TextRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<TextRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/CalloutBlockEditor.d.vue.ts

@@ -1,4 +1,8 @@
 import type { CalloutBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface CalloutBlockEditorProps extends CalloutBlockProps {
+}
+export interface CalloutBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<CalloutBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/CalloutBlockEditor.vue

@@ -1,10 +1,18 @@
 <script setup>
+import { tv } from "tailwind-variants";
 const { variant, children, to, target } = defineProps({
   variant: { type: String, required: true },
   children: { type: Array, required: true },
   to: { type: String, required: false },
   target: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const calloutBlockEditorStyles = tv({
+  slots: {
+    root: ""
+  }
+});
+const { root } = calloutBlockEditorStyles();
 </script>
 
 <template>

package/dist/runtime/components/blocks/editor/CalloutBlockEditor.vue.d.ts

@@ -1,4 +1,8 @@
 import type { CalloutBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface CalloutBlockEditorProps extends CalloutBlockProps {
+}
+export interface CalloutBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<CalloutBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/CardBlockEditor.d.vue.ts

@@ -1,4 +1,8 @@
 import type { CardBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface CardBlockEditorProps extends CardBlockProps {
+}
+export interface CardBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<CardBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/CardBlockEditor.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { tv } from "tailwind-variants";
 const { title, to, target, children } = defineProps({
   title: { type: String, required: true },
   to: { type: String, required: false },
@@ -6,11 +7,18 @@ const { title, to, target, children } = defineProps({
   description: { type: String, required: false },
   children: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const cardBlockEditorStyles = tv({
+  slots: {
+    card: "flex h-full flex-col"
+  }
+});
+const { card } = cardBlockEditorStyles();
 </script>
 
 <template>
   <NuxtLink :to="to" :target="target">
-    <UCard class="flex h-full flex-col">
+    <UCard :class="card()">
       <h3>{{ title }}</h3>
       <RCBlockEditRenderer :blocks="children" />
     </UCard>

package/dist/runtime/components/blocks/editor/CardBlockEditor.vue.d.ts

@@ -1,4 +1,8 @@
 import type { CardBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface CardBlockEditorProps extends CardBlockProps {
+}
+export interface CardBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<CardBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/ImageBlockEditor.d.vue.ts

@@ -1,10 +1,18 @@
-import type { ImageBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type ImageBlockProps } from "../../../types/index.js";
+export interface ImageBlockEditorProps extends ImageBlockProps {
+}
+export interface ImageBlockEditorEmits {
+    (e: "update:src", value: string | null): void;
+    (e: "update:alt", value: string): void;
+    (e: "update:caption", value: string | null): void;
+    (e: "update:file", value: File | null): void;
+}
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:src": (value: string | null) => any;
     "update:alt": (value: string) => any;
     "update:caption": (value: string | null) => any;
     "update:file": (value: File | null) => any;
-}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ImageBlockEditorProps> & Readonly<{
     "onUpdate:src"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string) => any) | undefined;
     "onUpdate:caption"?: ((value: string | null) => any) | undefined;

package/dist/runtime/components/blocks/editor/ImageBlockEditor.vue

@@ -1,18 +1,30 @@
 <script setup>
 import { ref, watch, computed } from "vue";
+import { tv } from "tailwind-variants";
+import {} from "../../../types";
 import { useObjectUrl } from "@vueuse/core";
-const props = defineProps({
+const { src, alt, caption } = defineProps({
   src: { type: String, required: true },
   alt: { type: String, required: true },
   caption: { type: String, required: false }
 });
 const emit = defineEmits(["update:src", "update:alt", "update:caption", "update:file"]);
+const imageBlockEditorStyles = tv({
+  slots: {
+    root: "mx-auto space-y-4 flex flex-col gap-xs w-full",
+    upload: "min-h-48 w-full",
+    previewContainer: "w-full relative rounded-lg border border-default overflow-hidden",
+    previewImage: "w-full h-auto object-contain transition-opacity duration-300",
+    emptyPreview: "w-full h-48 flex items-center justify-center bg-elevated/25"
+  }
+});
+const { root, upload, previewContainer, previewImage, emptyPreview } = imageBlockEditorStyles();
 const fileToUpload = ref(null);
-const localAlt = ref(props.alt || "");
-const localCaption = ref(props.caption || "");
+const localAlt = ref(alt || "");
+const localCaption = ref(caption || "");
 const filePreviewUrl = useObjectUrl(fileToUpload);
 const previewSrc = computed(() => {
-  return fileToUpload.value ? filePreviewUrl.value : props.src;
+  return fileToUpload.value ? filePreviewUrl.value : src;
 });
 const removeFile = () => {
   fileToUpload.value = null;
@@ -31,26 +43,26 @@ watch(fileToUpload, (newFile) => {
 </script>
 
 <template>
-  <figure class="mx-auto space-y-4 flex flex-col gap-xs w-full">
+  <figure :class="root()">
     <UFileUpload
       v-slot="{ open }"
       v-model="fileToUpload"
       accept="image/*"
-      class="min-h-48 w-full"
+      :class="upload()"
       variant="area"
       color="neutral"
       label="Drop image here"
       description="JPG, PNG, GIF or WEBP. Click to select."
     >
       <div class="flex flex-col items-center justify-center space-y-3 p-4">
-        <div class="w-full relative rounded-lg border border-default overflow-hidden">
+        <div :class="previewContainer()">
           <img
             v-if="previewSrc"
             :src="previewSrc"
             :alt="localAlt || 'Image preview'"
-            class="w-full h-auto object-contain transition-opacity duration-300"
+            :class="previewImage()"
           />
-          <div v-else class="w-full h-48 flex items-center justify-center bg-elevated/25">
+          <div v-else :class="emptyPreview()">
             <UIcon name="i-lucide-image" class="w-10 h-10 text-muted" />
           </div>
 

package/dist/runtime/components/blocks/editor/ImageBlockEditor.vue.d.ts

@@ -1,10 +1,18 @@
-import type { ImageBlockProps } from "../../../types/index.js";
-declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type ImageBlockProps } from "../../../types/index.js";
+export interface ImageBlockEditorProps extends ImageBlockProps {
+}
+export interface ImageBlockEditorEmits {
+    (e: "update:src", value: string | null): void;
+    (e: "update:alt", value: string): void;
+    (e: "update:caption", value: string | null): void;
+    (e: "update:file", value: File | null): void;
+}
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:src": (value: string | null) => any;
     "update:alt": (value: string) => any;
     "update:caption": (value: string | null) => any;
     "update:file": (value: File | null) => any;
-}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ImageBlockEditorProps> & Readonly<{
     "onUpdate:src"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string) => any) | undefined;
     "onUpdate:caption"?: ((value: string | null) => any) | undefined;

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.d.vue.ts

@@ -1,7 +1,9 @@
 import type { ParagraphBlockProps } from "../../../types/index.js";
-type __VLS_Props = ParagraphBlockProps & {
+export interface ParagraphBlockEditorProps extends ParagraphBlockProps {
     id: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface ParagraphBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.vue

@@ -1,11 +1,19 @@
 <script setup>
 import { inject, ref, watch, onMounted, nextTick } from "vue";
+import { tv } from "tailwind-variants";
 import { richTextToHtml, parseHtmlToRichText } from "../../../utils";
 const editorApi = inject("block-editor-api");
 const props = defineProps({
-  text: { type: Array, required: true },
-  id: { type: String, required: true }
+  id: { type: String, required: true },
+  text: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const paragraphBlockEditorStyles = tv({
+  slots: {
+    root: "p-2 outline-none min-h-6 focus:ring-2 focus:ring-blue-500 rounded-md transition duration-150 text-base"
+  }
+});
+const { root } = paragraphBlockEditorStyles();
 const editorRef = ref(null);
 const localHtml = ref(richTextToHtml(props.text));
 const isContentChanging = ref(false);
@@ -49,10 +57,6 @@ onMounted(() => {
     ref="editorRef"
     contenteditable="true"
     @blur="commitContentOnBlur"
-    :class="[
-  'p-2 outline-none min-h-6',
-  'focus:ring-2 focus:ring-blue-500 rounded-md transition duration-150',
-  'text-base'
-]"
+    :class="root()"
   ></div>
 </template>

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.vue.d.ts

@@ -1,7 +1,9 @@
 import type { ParagraphBlockProps } from "../../../types/index.js";
-type __VLS_Props = ParagraphBlockProps & {
+export interface ParagraphBlockEditorProps extends ParagraphBlockProps {
     id: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface ParagraphBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/SectionBlockEditor.d.vue.ts

@@ -1,7 +1,9 @@
 import { type SectionBlockProps } from "../../../types/index.js";
-type __VLS_Props = SectionBlockProps & {
+export interface SectionBlockEditorProps extends SectionBlockProps {
     id: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}
+export interface SectionBlockEditorEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<SectionBlockEditorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockEditorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue

@@ -2,13 +2,23 @@
 import { inject, ref, computed, watch } from "vue";
 import {} from "../../../types";
 import {} from "@nuxt/ui/components/Select.vue";
+import { tv } from "tailwind-variants";
 const { level, title, description, children, id } = defineProps({
+  id: { type: String, required: true },
   level: { type: Number, required: true },
   title: { type: String, required: true },
   description: { type: String, required: false },
-  children: { type: Array, required: true },
-  id: { type: String, required: true }
+  children: { type: Array, required: true }
 });
+const emit = defineEmits([]);
+const sectionBlockEditorStyles = tv({
+  slots: {
+    root: "flex flex-col gap-sm",
+    headerContainer: "flex flex-row gap-xs",
+    titleInput: "w-full"
+  }
+});
+const { root, headerContainer, titleInput } = sectionBlockEditorStyles();
 const hasChildren = computed(() => children && children.length > 0);
 const editorApi = inject("block-editor-api");
 const localLevel = ref(level);
@@ -67,10 +77,10 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col gap-sm">
+  <div :class="root()">
     <RCSection :level="localLevel" :title="localTitle" :description="description" is-editing>
       <template #title>
-        <div class="flex flex-row gap-xs">
+        <div :class="headerContainer()">
           <USelect
             v-model="localLevel"
             :items="levelItems"
@@ -87,7 +97,7 @@ watch(
             placeholder="Section Title..."
             @input="updateLocalTitle"
             @blur="commitTitleOnBlur"
-            class="w-full"
+            :class="titleInput()"
           />
         </div>
       </template>