svedit 0.2.0 → 0.4.0

package/dist/util.d.ts

@@ -1,4 +1,126 @@
-export function split_annotated_string(text_with_annotations: any, at_position: any): any[][];
-export function join_annotated_string(first_text: any, second_text: any): any[];
-export function snake_to_pascal(str: any): any;
+/**
+ * @import { Annotation, AnnotatedText } from './types.d.ts';
+ */
+/**
+ * Get the actual character length (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to count grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are counted as single characters.
+ *
+ * @param {string} str - The string to measure
+ * @returns {number} The number of visual characters (grapheme clusters)
+ *
+ * @example
+ * get_char_length('Hello') // Returns: 5
+ * get_char_length('a😀b') // Returns: 3 (not 4)
+ * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
+ */
+export function get_char_length(str: string): number;
+/**
+ * Get a single character at the specified position (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to access grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are treated as single characters.
+ *
+ * @param {string} str - The string to access
+ * @param {number} index - Character position (0-based)
+ * @returns {string} The character at the specified position, or empty string if index is out of bounds
+ *
+ * @example
+ * get_char_at('Hello', 1) // Returns: 'e'
+ * get_char_at('a😀b', 1) // Returns: '😀' (full emoji)
+ * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function get_char_at(str: string, index: number): string;
+/**
+ * Slice string by character positions (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to slice by grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences remain intact.
+ *
+ * @param {string} str - The string to slice
+ * @param {number} start - Starting character position (inclusive)
+ * @param {number} [end] - Ending character position (exclusive). If undefined, slices to end
+ * @returns {string} The sliced string with complete characters
+ *
+ * @example
+ * char_slice('Hello 😀 World', 6, 8) // Returns: '😀 ' (emoji stays intact)
+ * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function char_slice(str: string, start: number, end?: number): string;
+/**
+ * Convert UTF-16 code unit offset to grapheme cluster offset within a string
+ *
+ * Converts DOM selection offsets (which use UTF-16 code units) to character-based
+ * offsets (grapheme clusters) for consistent text manipulation.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} utf16_offset - The UTF-16 code unit offset from DOM
+ * @returns {number} The corresponding grapheme cluster offset
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
+ */
+export function utf16_to_char_offset(str: string, utf16_offset: number): number;
+/**
+ * Convert grapheme cluster offset to UTF-16 code unit offset within a string
+ *
+ * Converts character-based offsets (grapheme clusters) to DOM selection offsets
+ * (UTF-16 code units) for proper DOM selection positioning.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} char_offset - The grapheme cluster offset
+ * @returns {number} The corresponding UTF-16 code unit offset for DOM operations
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
+ */
+export function char_to_utf16_offset(str: string, char_offset: number): number;
+/**
+ * Splits an annotated text at the specified character position.
+ *
+ * Annotations that span the split point will be divided appropriately,
+ * with offsets adjusted for each resulting part.
+ *
+ * @param {AnnotatedText} text_with_annotations - Annotated text object
+ * @param {number} at_position - Character position where to split (0-based)
+ * @returns {[AnnotatedText, AnnotatedText]} Tuple of [left_part, right_part]
+ *
+ * @example
+ * split_annotated_text({text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}, 8)
+ * // Returns:
+ * // [
+ * //   {text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]},
+ * //   {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]}
+ * // ]
+ */
+export function split_annotated_text(text_with_annotations: AnnotatedText, at_position: number): [AnnotatedText, AnnotatedText];
+/**
+ * Joins two annotated texts into a single annotated text.
+ *
+ * Annotations from the second text will have their offsets shifted by the length
+ * of the first text. Adjacent annotations of the same type and data will be merged.
+ *
+ * @param {AnnotatedText} first_text - First annotated text object
+ * @param {AnnotatedText} second_text - Second annotated text object
+ * @returns {AnnotatedText} Combined annotated text object
+ *
+ * @example
+ * join_annotated_text({text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]}, {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]})
+ * // Returns: {text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}
+ */
+export function join_annotated_text(first_text: AnnotatedText, second_text: AnnotatedText): AnnotatedText;
+/**
+ * Convert snake_case string to PascalCase
+ *
+ * @param {string} str - The snake_case string to convert
+ * @returns {string} The converted PascalCase string
+ *
+ * @example
+ * snake_to_pascal('list_item') // Returns: 'ListItem'
+ */
+export function snake_to_pascal(str: string): string;
+import type { AnnotatedText } from './types.d.ts';
 //# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/lib/util.js"],"names":[],"mappings":"AAMA,8FA6BC;AAKD,gFA8BC;AAED,+CAKC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/lib/util.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAWlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAoBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CAyC1C;AAGD;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CAqCzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;mCAzO6C,cAAc"}

package/dist/util.js

@@ -1,75 +1,232 @@
-// split_annotated_string(["Hello world", [[6,11, "strong"]]], 8)
-// =>
-// [
-//   ["Hello wo", [[6,8, "strong"]]]
-//   ["rld", [[0,3, "strong"]]]
-// ]
-export function split_annotated_string(text_with_annotations, at_position) {
-  const [text, annotations] = text_with_annotations;
-
-  // Split the text
-  const left_text = text.slice(0, at_position);
-  const right_text = text.slice(at_position);
+/**
+ * @import { Annotation, AnnotatedText } from './types.d.ts';
+ */
 
+/**
+ * Get the actual character length (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to count grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are counted as single characters.
+ *
+ * @param {string} str - The string to measure
+ * @returns {number} The number of visual characters (grapheme clusters)
+ *
+ * @example
+ * get_char_length('Hello') // Returns: 5
+ * get_char_length('a😀b') // Returns: 3 (not 4)
+ * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
+ */
+export function get_char_length(str) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  return [...segmenter.segment(str)].length;
+}
+
+/**
+ * Get a single character at the specified position (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to access grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are treated as single characters.
+ *
+ * @param {string} str - The string to access
+ * @param {number} index - Character position (0-based)
+ * @returns {string} The character at the specified position, or empty string if index is out of bounds
+ *
+ * @example
+ * get_char_at('Hello', 1) // Returns: 'e'
+ * get_char_at('a😀b', 1) // Returns: '😀' (full emoji)
+ * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function get_char_at(str, index) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  return segments[index].segment;
+}
+
+/**
+ * Slice string by character positions (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to slice by grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences remain intact.
+ *
+ * @param {string} str - The string to slice
+ * @param {number} start - Starting character position (inclusive)
+ * @param {number} [end] - Ending character position (exclusive). If undefined, slices to end
+ * @returns {string} The sliced string with complete characters
+ *
+ * @example
+ * char_slice('Hello 😀 World', 6, 8) // Returns: '😀 ' (emoji stays intact)
+ * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function char_slice(str, start, end = undefined) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  return segments.slice(start, end).map(s => s.segment).join('');
+}
+
+/**
+ * Convert UTF-16 code unit offset to grapheme cluster offset within a string
+ *
+ * Converts DOM selection offsets (which use UTF-16 code units) to character-based
+ * offsets (grapheme clusters) for consistent text manipulation.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} utf16_offset - The UTF-16 code unit offset from DOM
+ * @returns {number} The corresponding grapheme cluster offset
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
+ */
+export function utf16_to_char_offset(str, utf16_offset) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  let char_offset = 0;
+  let utf16_count = 0;
+
+  for (const segment of segments) {
+    if (utf16_count >= utf16_offset) break;
+    utf16_count += segment.segment.length;
+    if (utf16_count > utf16_offset) break;
+    char_offset++;
+  }
+
+  return char_offset;
+}
+
+/**
+ * Convert grapheme cluster offset to UTF-16 code unit offset within a string
+ *
+ * Converts character-based offsets (grapheme clusters) to DOM selection offsets
+ * (UTF-16 code units) for proper DOM selection positioning.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} char_offset - The grapheme cluster offset
+ * @returns {number} The corresponding UTF-16 code unit offset for DOM operations
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
+ */
+export function char_to_utf16_offset(str, char_offset) {
+  const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+  const segments = [...segmenter.segment(str)];
+  let utf16_offset = 0;
+
+  for (let i = 0; i < Math.min(char_offset, segments.length); i++) {
+    utf16_offset += segments[i].segment.length;
+  }
+
+  return utf16_offset;
+}
+
+/**
+ * Splits an annotated text at the specified character position.
+ *
+ * Annotations that span the split point will be divided appropriately,
+ * with offsets adjusted for each resulting part.
+ *
+ * @param {AnnotatedText} text_with_annotations - Annotated text object
+ * @param {number} at_position - Character position where to split (0-based)
+ * @returns {[AnnotatedText, AnnotatedText]} Tuple of [left_part, right_part]
+ *
+ * @example
+ * split_annotated_text({text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}, 8)
+ * // Returns:
+ * // [
+ * //   {text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]},
+ * //   {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]}
+ * // ]
+ */
+export function split_annotated_text(text_with_annotations, at_position) {
+  const {text, annotations} = text_with_annotations;
+
+  // Split the text using character-aware slicing
+  const left_text = char_slice(text, 0, at_position);
+  const right_text = char_slice(text, at_position);
+
+  /** @type {Array<Annotation>} */
   const left_annotations = [];
+  /** @type {Array<Annotation>} */
   const right_annotations = [];
 
   // Process each annotation
-  for (const [start, end, type, data] of annotations) {
-    if (end <= at_position) {
+  for (const {start_offset, end_offset, node_id} of annotations) {
+    if (end_offset <= at_position) {
       // Annotation is entirely in the left part
-      left_annotations.push([start, end, type, data]);
-    } else if (start >= at_position) {
+      left_annotations.push({start_offset, end_offset, node_id});
+    } else if (start_offset >= at_position) {
       // Annotation is entirely in the right part - shift offsets
-      right_annotations.push([start - at_position, end - at_position, type, data]);
+      right_annotations.push({start_offset: start_offset - at_position, end_offset: end_offset - at_position, node_id});
     } else {
       // Annotation spans the split point - split it
-      left_annotations.push([start, at_position, type, data]);
-      right_annotations.push([0, end - at_position, type, data]);
+      left_annotations.push({start_offset, end_offset: at_position, node_id});
+      right_annotations.push({start_offset: 0, end_offset: end_offset - at_position, node_id});
     }
   }
 
   return [
-    [left_text, left_annotations],
-    [right_text, right_annotations]
+    {text: left_text, annotations: left_annotations},
+    {text: right_text, annotations: right_annotations}
   ];
 }
 
 
-// join_annotated_string(["Hello wo", [[6,8, "strong"]]], ["rld", [[0,3, "strong"]]])
-// => ["Hello world", [[6,11, "strong"]]]
-export function join_annotated_string(first_text, second_text) {
-  const [first_text_content, first_annotations] = first_text;
-  const [second_text_content, second_annotations] = second_text;
+/**
+ * Joins two annotated texts into a single annotated text.
+ *
+ * Annotations from the second text will have their offsets shifted by the length
+ * of the first text. Adjacent annotations of the same type and data will be merged.
+ *
+ * @param {AnnotatedText} first_text - First annotated text object
+ * @param {AnnotatedText} second_text - Second annotated text object
+ * @returns {AnnotatedText} Combined annotated text object
+ *
+ * @example
+ * join_annotated_text({text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]}, {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]})
+ * // Returns: {text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}
+ */
+export function join_annotated_text(first_text, second_text) {
+  const {text: first_text_content, annotations: first_annotations} = first_text;
+  const {text: second_text_content, annotations: second_annotations} = second_text;
 
   // Join the text content
   const joined_text = first_text_content + second_text_content;
 
   // Start with all annotations from the first text (unchanged)
+  /** @type {Array<Annotation>} */
   const joined_annotations = [...first_annotations];
 
   // Add annotations from the second text, shifting their offsets
-  const offset = first_text_content.length;
-  for (const [start, end, type, data] of second_annotations) {
-    const shifted_annotation = [start + offset, end + offset, type, data];
+  const offset = get_char_length(first_text_content);
+  for (const {start_offset, end_offset, node_id} of second_annotations) {
+    /** @type {Annotation} */
+    const shifted_annotation = {start_offset: start_offset + offset, end_offset: end_offset + offset, node_id};
 
     // Check if this annotation can be merged with the last annotation from first text
     const last_annotation = joined_annotations[joined_annotations.length - 1];
     if (last_annotation &&
-        last_annotation[1] === shifted_annotation[0] && // annotations are adjacent
-        last_annotation[2] === shifted_annotation[2] && // same type
-        JSON.stringify(last_annotation[3]) === JSON.stringify(shifted_annotation[3])) { // same data
+        last_annotation.end_offset === shifted_annotation.start_offset && // annotations are adjacent
+        last_annotation.node_id === shifted_annotation.node_id) { // same node_id
       // Merge by extending the end position of the last annotation
-      last_annotation[1] = shifted_annotation[1];
+      last_annotation.end_offset = shifted_annotation.end_offset;
     } else {
       // Add as separate annotation
       joined_annotations.push(shifted_annotation);
     }
   }
 
-  return [joined_text, joined_annotations];
+  return {text: joined_text, annotations: joined_annotations};
 }
 
+/**
+ * Convert snake_case string to PascalCase
+ *
+ * @param {string} str - The snake_case string to convert
+ * @returns {string} The converted PascalCase string
+ *
+ * @example
+ * snake_to_pascal('list_item') // Returns: 'ListItem'
+ */
 export function snake_to_pascal(str) {
   return str
     .split('_')

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/AnnotatedTextProperty.svelte

@@ -0,0 +1,117 @@
+<script>
+	import { getContext } from 'svelte';
+	import { char_slice, get_char_length, snake_to_pascal } from './util.js';
+
+  /** @import { AnnotatedTextPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
+
+	const svedit = getContext('svedit');
+
+ /** @type {AnnotatedTextPropertyProps} */
+	let {
+		path,
+		class: css_class,
+		placeholder = '',
+	} = $props();
+
+	let is_focused = $derived.by(() => {
+		return svedit.doc.selection?.type === 'text' && path.join('.') === svedit.doc.selection?.path.join('.');
+	});
+
+	/**
+	 * Converts text with annotations into renderable fragments for display.
+	 * @param {string} text - The plain text content
+	 * @param {Array<Annotation>} annotations - Array of annotations where each is {start_offset, end_offset, node_id}
+	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
+	 */
+	function get_fragments(text, annotations) {
+		let fragments = [];
+		let last_index = 0;
+
+		// Sort annotations by start_offset
+		const sorted_annotations = [...annotations].sort((a, b) => a.start_offset - b.start_offset);
+
+		for (let [, annotation] of sorted_annotations.entries()) {
+			// Add text before the annotation using character-aware slicing
+			if (annotation.start_offset > last_index) {
+				fragments.push(char_slice(text, last_index, annotation.start_offset));
+			}
+
+			// Add the annotated string using character-aware slicing
+			const annotated_content = char_slice(text, annotation.start_offset, annotation.end_offset);
+			const node = svedit.doc.get(annotation.node_id);
+			if (!node) throw new Error(`Node not found for annotation ${annotation.node_id}`);
+
+			fragments.push({
+			  node,
+				content: annotated_content,
+				// NOTE: We need to provide the original index here, because the source data
+				// is the address space.
+				annotation_index: annotations.indexOf(annotation),
+			});
+
+			last_index = annotation.end_offset;
+		}
+
+		// Add any remaining text after the last annotation using character-aware slicing
+		if (last_index < get_char_length(text)) {
+			fragments.push(char_slice(text, last_index));
+		}
+
+		return fragments;
+	}
+
+	let fragments = $derived(get_fragments(svedit.doc.get(path).text, svedit.doc.get(path).annotations));
+	let plain_text = $derived(svedit.doc.get(path).text);
+
+</script>
+
+{#key plain_text}
+  <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+  <div
+   	data-type="text"
+   	data-path={path.join('.')}
+   	style="anchor-name: --{path.join('-')};"
+   	class="text svedit-selectable {css_class}"
+   	class:empty={get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)}
+    class:focused={is_focused}
+    placeholder={placeholder}
+  >
+    {#each fragments as fragment, index (index)}
+  		{#if typeof fragment === 'string'}{fragment}{:else}
+        {@const AnnotationComponent = svedit.doc.config.node_components[snake_to_pascal(fragment.node.type)]}
+        <AnnotationComponent path={[...path, 'annotations', fragment.annotation_index, 'node_id']} content={fragment.content} />
+      {/if}
+  	{/each}<!--
+    --><br>
+  </div>
+{/key}
+
+<style>
+  .text {
+    white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		box-sizing: content-box;
+
+		&.heading1 {
+      text-wrap: var(--text-wrap);
+    }
+  }
+
+  [placeholder].empty::before {
+    content: attr(placeholder);
+    pointer-events: none;
+    color: color-mix(in oklch, currentcolor 50%, transparent);
+  }
+
+  /* We can safely hide the <br> element when the placeholder is empty and focused. */
+  /* No longer the cursor will be rendered after the placeholder when focused. */
+  /* ATTENTION: This hack has the side effect that in Safari Desktop the cursor sometimes disappears. */
+  [placeholder].empty.focused br {
+    display:none;
+  }
+
+  /*.text.focused {
+    background: none;
+    outline: 1px solid var(--editing-stroke-color);
+  }*/
+</style>

package/src/lib/CustomProperty.svelte

@@ -1,6 +1,10 @@
 <script>
+  import { getContext } from 'svelte';
+
   /** @import { CustomPropertyProps } from './types.d.ts'; */
 
+  const svedit = getContext('svedit');
+
   /** @type {CustomPropertyProps} */
   let {
     path,
@@ -9,19 +13,23 @@
   } = $props();
 </script>
 
-<!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
-<div
-  class="property {css_class}"
-  data-type="property"
-  data-path={path.join('.')}
-  style="anchor-name: --{path.join('-')};"
->
-  <div class="cursor-trap">
-    <div class="svedit-selectable"><br/></div>
-  </div>
+{#if svedit.editable}
+  <!-- NOTE: It's super crucial that there is no extra whitespace, to not introduce additional cursor positions in contenteditable -->
+  <div
+    class="property {css_class}"
+    data-type="property"
+    data-path={path.join('.')}
+    style="anchor-name: --{path.join('-')};"
+  >
+    <div class="cursor-trap">
+      <div class="svedit-selectable"><br/></div>
+    </div>
 
-  <div class="property-content" contenteditable="false">{@render children()}</div>
-</div>
+    <div class="property-content" contenteditable="false">{@render children()}</div>
+  </div>
+{:else}
+  {@render children()}
+{/if}
 
 <style>
   .property {