@rimelight/cms 0.0.4 → 0.0.6

package/src/client/components/editors/CalloutEditor.tsx

@@ -37,17 +37,17 @@ const TARGET_OPTIONS = [
 ]
 
 export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) => {
-  const [linkSettingsOpen, setLinkSettingsOpen] = createSignal(!!componentProps.props.to)
+  const [linkSettingsOpen, setLinkSettingsOpen] = createSignal(!!componentProps.props["to"])
   let childrenContainer: HTMLDivElement | undefined = undefined
   let sortableInstance: any = null
 
-  const variant = () => componentProps.props.variant || "info"
+  const variant = () => componentProps.props["variant"] || "info"
 
   const childrenBlocks = (): BaseBlock[] => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -89,8 +89,8 @@ export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) =>
   const saveLinkProps = (to?: string, target?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
-      to: to !== undefined ? to : componentProps.props.to,
-      target: target !== undefined ? target : componentProps.props.target
+      to: to !== undefined ? to : componentProps.props["to"],
+      target: target !== undefined ? target : componentProps.props["target"]
     })
   }
 
@@ -125,7 +125,7 @@ export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) =>
           onClick={() => setLinkSettingsOpen(!linkSettingsOpen())}
           title="Link settings"
           leadingIcon="link"
-          label={componentProps.props.to ? "Linked" : "Add Link"}
+          label={componentProps.props["to"] ? "Linked" : "Add Link"}
         />
       </div>
 
@@ -135,9 +135,9 @@ export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) =>
             <RLSInput
               type="text"
               placeholder="Link URL (e.g. https://... or /slug)"
-              value={componentProps.props.to || ""}
+              value={componentProps.props["to"] || ""}
               onBlur={(e: FocusEvent & { currentTarget: HTMLInputElement }) =>
-                saveLinkProps(e.currentTarget.value, componentProps.props.target)
+                saveLinkProps(e.currentTarget.value, componentProps.props["target"])
               }
               size="sm"
             />
@@ -145,9 +145,9 @@ export const CalloutEditor: Component<CalloutEditorProps> = (componentProps) =>
           <div class="w-32">
             <RLSSelect
               items={TARGET_OPTIONS}
-              value={componentProps.props.target || "_self"}
+              value={componentProps.props["target"] || "_self"}
               onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
-                saveLinkProps(componentProps.props.to, e.currentTarget.value)
+                saveLinkProps(componentProps.props["to"], e.currentTarget.value)
               }
               size="xs"
             />

package/src/client/components/editors/CardEditor.tsx

@@ -20,14 +20,14 @@ export const CardEditor: Component<CardEditorProps> = (componentProps) => {
         <RLSInput
           type="text"
           placeholder="Card Title"
-          value={componentProps.props.title || ""}
+          value={componentProps.props["title"] || ""}
           onBlur={(e) => save("title", e.currentTarget.value)}
           size="sm"
         />
         <RLSInput
           type="text"
           placeholder="Link (href e.g. /docs/getting-started)"
-          value={componentProps.props.href || ""}
+          value={componentProps.props["href"] || ""}
           onBlur={(e) => save("href", e.currentTarget.value)}
           size="sm"
         />
@@ -35,7 +35,7 @@ export const CardEditor: Component<CardEditorProps> = (componentProps) => {
       <RLSInput
         type="text"
         placeholder="Card Description"
-        value={componentProps.props.description || ""}
+        value={componentProps.props["description"] || ""}
         onBlur={(e) => save("description", e.currentTarget.value)}
         size="sm"
       />
@@ -43,14 +43,14 @@ export const CardEditor: Component<CardEditorProps> = (componentProps) => {
         <RLSInput
           type="text"
           placeholder="Icon (e.g. i-lucide-book-open)"
-          value={componentProps.props.icon || ""}
+          value={componentProps.props["icon"] || ""}
           onBlur={(e) => save("icon", e.currentTarget.value)}
           size="sm"
         />
         <RLSInput
           type="text"
           placeholder="Badge (optional e.g. New, Beta)"
-          value={componentProps.props.badge || ""}
+          value={componentProps.props["badge"] || ""}
           onBlur={(e) => save("badge", e.currentTarget.value)}
           size="sm"
         />

package/src/client/components/editors/CardsEditor.tsx

@@ -30,7 +30,7 @@ export const CardsEditor: Component<CardsEditorProps> = (componentProps) => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -84,7 +84,7 @@ export const CardsEditor: Component<CardsEditorProps> = (componentProps) => {
           <div class="w-32">
             <RLSSelect
               items={COLUMN_OPTIONS}
-              value={String(componentProps.props.columns || 2)}
+              value={String(componentProps.props["columns"] || 2)}
               onChange={(e: Event & { currentTarget: HTMLSelectElement }) =>
                 setColumns(e.currentTarget.value)
               }

package/src/client/components/editors/CodeEditor.tsx

@@ -37,15 +37,15 @@ export const CodeEditor: Component<CodeEditorProps> = (componentProps) => {
   const saveProps = (lang?: string, code?: string, caption?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
-      language: lang !== undefined ? lang : componentProps.props.language || "typescript",
+      language: lang !== undefined ? lang : componentProps.props["language"] || "typescript",
       code: code !== undefined ? code : codeTextarea?.value || "",
-      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+      caption: caption !== undefined ? caption : componentProps.props["caption"] || ""
     })
   }
 
   onMount(() => {
     if (codeTextarea) {
-      codeTextarea.value = componentProps.props.code || ""
+      codeTextarea.value = componentProps.props["code"] || ""
       autoResize()
     }
   })
@@ -58,7 +58,7 @@ export const CodeEditor: Component<CodeEditorProps> = (componentProps) => {
           <div class="w-36">
             <RLSSelect
               items={LANGUAGES}
-              value={componentProps.props.language || "typescript"}
+              value={componentProps.props["language"] || "typescript"}
               onChange={(e) => saveProps(e.currentTarget.value)}
               size="xs"
             />
@@ -89,7 +89,7 @@ export const CodeEditor: Component<CodeEditorProps> = (componentProps) => {
       <RLSInput
         type="text"
         data-field="caption"
-        value={componentProps.props.caption || ""}
+        value={componentProps.props["caption"] || ""}
         onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
         size="sm"
         placeholder="Caption (optional)"

package/src/client/components/editors/DialogueEditor.tsx

@@ -11,10 +11,10 @@ export const DialogueEditor: Component<DialogueEditorProps> = (componentProps) =
   const saveProps = (character?: string, parenthetical?: string, line?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
-      character: character !== undefined ? character : componentProps.props.character || "",
+      character: character !== undefined ? character : componentProps.props["character"] || "",
       parenthetical:
-        parenthetical !== undefined ? parenthetical : componentProps.props.parenthetical || "",
-      line: line !== undefined ? line : componentProps.props.line || ""
+        parenthetical !== undefined ? parenthetical : componentProps.props["parenthetical"] || "",
+      line: line !== undefined ? line : componentProps.props["line"] || ""
     })
   }
 
@@ -23,7 +23,7 @@ export const DialogueEditor: Component<DialogueEditorProps> = (componentProps) =
       <div class="w-48 mx-auto">
         <RLSInput
           data-field="character"
-          value={componentProps.props.character || ""}
+          value={componentProps.props["character"] || ""}
           onBlur={(e) => saveProps(e.currentTarget.value)}
           class="text-center font-bold text-sm uppercase"
           placeholder="CHARACTER"
@@ -33,7 +33,7 @@ export const DialogueEditor: Component<DialogueEditorProps> = (componentProps) =
       <div class="w-64 mx-auto">
         <RLSInput
           data-field="parenthetical"
-          value={componentProps.props.parenthetical || ""}
+          value={componentProps.props["parenthetical"] || ""}
           onBlur={(e) => saveProps(undefined, e.currentTarget.value)}
           class="text-center italic text-sm"
           placeholder="(parenthetical)"
@@ -42,7 +42,7 @@ export const DialogueEditor: Component<DialogueEditorProps> = (componentProps) =
       </div>
       <RLSTextarea
         data-field="line"
-        value={componentProps.props.line || ""}
+        value={componentProps.props["line"] || ""}
         onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
         placeholder="Dialogue line..."
         rows={2}

package/src/client/components/editors/FileTreeEditor.tsx

@@ -10,7 +10,7 @@ export const FileTreeEditor: Component<FileTreeEditorProps> = (componentProps) =
   let jsonTextarea: HTMLTextAreaElement | undefined
 
   const tree = (): FileTreeNode[] =>
-    componentProps.props.tree || [
+    componentProps.props["tree"] || [
       { name: "src", isDir: true, children: [{ name: "index.ts", isDir: false }] },
       { name: "package.json", isDir: false }
     ]

package/src/client/components/editors/ImageEditor.tsx

@@ -10,9 +10,9 @@ export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
   const saveProps = (src?: string, alt?: string, caption?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
-      src: src !== undefined ? src : componentProps.props.src || "",
-      alt: alt !== undefined ? alt : componentProps.props.alt || "",
-      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+      src: src !== undefined ? src : componentProps.props["src"] || "",
+      alt: alt !== undefined ? alt : componentProps.props["alt"] || "",
+      caption: caption !== undefined ? caption : componentProps.props["caption"] || ""
     })
   }
 
@@ -23,7 +23,7 @@ export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
         <RLSInput
           id="image-src-input"
           type="text"
-          value={componentProps.props.src || ""}
+          value={componentProps.props["src"] || ""}
           onBlur={(e) => saveProps(e.currentTarget.value)}
           placeholder="https://..."
           leadingIcon="image"
@@ -36,7 +36,7 @@ export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
           <RLSInput
             id="image-alt-input"
             type="text"
-            value={componentProps.props.alt || ""}
+            value={componentProps.props["alt"] || ""}
             onBlur={(e) => saveProps(undefined, e.currentTarget.value)}
             placeholder="Alt description"
             size="sm"
@@ -48,7 +48,7 @@ export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
           <RLSInput
             id="image-caption-input"
             type="text"
-            value={componentProps.props.caption || ""}
+            value={componentProps.props["caption"] || ""}
             onBlur={(e) => saveProps(undefined, undefined, e.currentTarget.value)}
             placeholder="Image caption"
             size="sm"
@@ -56,11 +56,11 @@ export const ImageEditor: Component<ImageEditorProps> = (componentProps) => {
         </div>
       </div>
 
-      {componentProps.props.src && (
+      {componentProps.props["src"] && (
         <div class="mt-2 flex justify-center p-2 rounded-lg border border-default">
           <img
-            src={componentProps.props.src}
-            alt={componentProps.props.alt || "Image preview"}
+            src={componentProps.props["src"]}
+            alt={componentProps.props["alt"] || "Image preview"}
             class="max-h-48 object-cover rounded shadow-sm"
           />
         </div>

package/src/client/components/editors/ParagraphEditor.tsx

@@ -155,7 +155,7 @@ export const ParagraphEditor: Component<ParagraphEditorProps> = (componentProps)
 
   onMount(() => {
     if (!editableDiv) return
-    const text = componentProps.props.text
+    const text = componentProps.props["text"]
     if (!text) {
       editableDiv.innerHTML = ""
     } else if (Array.isArray(text)) {

package/src/client/components/editors/SceneEditor.tsx

@@ -41,13 +41,13 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   const slugText = () => {
-    const setting = componentProps.props.setting || "INT."
-    const loc = (componentProps.props.location || "LOCATION").toUpperCase()
-    const time = componentProps.props.timeOfDay || "MORNING"
+    const setting = componentProps.props["setting"] || "INT."
+    const loc = (componentProps.props["location"] || "LOCATION").toUpperCase()
+    const time = componentProps.props["timeOfDay"] || "MORNING"
     return `${setting} ${loc} - ${time}`
   }
 
@@ -114,7 +114,7 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
           <RLSInput
             id="scene-location-input"
             data-field="location"
-            value={componentProps.props.location || ""}
+            value={componentProps.props["location"] || ""}
             onBlur={(e) => saveProps({ location: e.currentTarget.value })}
             placeholder="E.g. LIVING ROOM"
             size="sm"
@@ -125,7 +125,7 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
           <span class="text-xs font-semibold text-muted uppercase tracking-wide">Setting</span>
           <RLSSelect
             items={SETTINGS}
-            value={componentProps.props.setting || "INT."}
+            value={componentProps.props["setting"] || "INT."}
             onChange={(e) => saveProps({ setting: e.currentTarget.value })}
             size="sm"
           />
@@ -135,7 +135,7 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
           <span class="text-xs font-semibold text-muted uppercase tracking-wide">Time of Day</span>
           <RLSSelect
             items={TIMES_OF_DAY}
-            value={componentProps.props.timeOfDay || "MORNING"}
+            value={componentProps.props["timeOfDay"] || "MORNING"}
             onChange={(e) => saveProps({ timeOfDay: e.currentTarget.value })}
             size="sm"
           />
@@ -149,7 +149,7 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
         <RLSTextarea
           id="scene-description-textarea"
           data-field="description"
-          value={componentProps.props.description || ""}
+          value={componentProps.props["description"] || ""}
           onBlur={(e) => saveProps({ description: e.currentTarget.value })}
           placeholder="Action lines..."
           rows={3}
@@ -163,7 +163,7 @@ export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
         <div class="w-48">
           <RLSSelect
             items={TRANSITIONS}
-            value={componentProps.props.transition || "NONE"}
+            value={componentProps.props["transition"] || "NONE"}
             onChange={(e) => saveProps({ transition: e.currentTarget.value })}
             size="sm"
           />

package/src/client/components/editors/ScriptEditor.tsx

@@ -22,12 +22,12 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
   let childrenContainer: HTMLDivElement | null = null as HTMLDivElement | null
   let sortableInstance: any = null
 
-  const characters = (): string[] => componentProps.props.characters || []
+  const characters = (): string[] => componentProps.props["characters"] || []
   const childrenBlocks = (): BaseBlock[] => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -96,7 +96,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
         <span class="text-xs font-bold text-muted uppercase tracking-widest">Script Title</span>
         <RLSInput
           data-field="title"
-          value={componentProps.props.title || ""}
+          value={componentProps.props["title"] || ""}
           onInput={(e) => saveProps({ title: e.currentTarget.value })}
           placeholder="Script Title"
           size="sm"
@@ -107,7 +107,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
         <span class="text-xs font-bold text-muted uppercase tracking-widest">Synopsis</span>
         <RLSTextarea
           data-field="synopsis"
-          value={componentProps.props.synopsis || ""}
+          value={componentProps.props["synopsis"] || ""}
           onInput={(e) => saveProps({ synopsis: e.currentTarget.value })}
           placeholder="Synopsis..."
           rows={2}
@@ -167,21 +167,21 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
         <div class="grid grid-cols-3 gap-2">
           <RLSInput
             data-field="aPlot"
-            value={componentProps.props.aPlot || ""}
+            value={componentProps.props["aPlot"] || ""}
             onInput={(e) => saveProps({ aPlot: e.currentTarget.value })}
             placeholder="A-Plot"
             size="sm"
           />
           <RLSInput
             data-field="bPlot"
-            value={componentProps.props.bPlot || ""}
+            value={componentProps.props["bPlot"] || ""}
             onInput={(e) => saveProps({ bPlot: e.currentTarget.value })}
             placeholder="B-Plot"
             size="sm"
           />
           <RLSInput
             data-field="cPlot"
-            value={componentProps.props.cPlot || ""}
+            value={componentProps.props["cPlot"] || ""}
             onInput={(e) => saveProps({ cPlot: e.currentTarget.value })}
             placeholder="C-Plot"
             size="sm"
@@ -193,7 +193,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
         <span class="text-xs font-bold text-muted uppercase tracking-widest">Stinger</span>
         <RLSInput
           data-field="stinger"
-          value={componentProps.props.stinger || ""}
+          value={componentProps.props["stinger"] || ""}
           onInput={(e) => saveProps({ stinger: e.currentTarget.value })}
           placeholder="Stinger (post-credits etc)"
           size="sm"

package/src/client/components/editors/SectionEditor.tsx

@@ -26,7 +26,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -84,7 +84,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
         <input
           ref={(el) => (titleInput = el)}
           type="text"
-          value={componentProps.props.title || ""}
+          value={componentProps.props["title"] || ""}
           onInput={saveProps}
           placeholder="Section Title"
           class="flex-1 font-bold text-lg bg-transparent border-0 focus:outline-none text-highlighted placeholder:text-muted/60 py-0.5"
@@ -94,7 +94,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
       <input
         ref={(el) => (descInput = el)}
         type="text"
-        value={componentProps.props.description || ""}
+        value={componentProps.props["description"] || ""}
         onInput={saveProps}
         placeholder="Section description (optional)..."
         class="text-sm text-muted bg-transparent border-0 focus:outline-none placeholder:text-muted/50 py-0.5"

package/src/client/components/editors/StepItemEditor.tsx

@@ -23,7 +23,7 @@ export const StepItemEditor: Component<StepItemEditorProps> = (componentProps) =
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -65,8 +65,9 @@ export const StepItemEditor: Component<StepItemEditorProps> = (componentProps) =
   const saveMeta = (title?: string, description?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
-      title: title !== undefined ? title : componentProps.props.title || "",
-      description: description !== undefined ? description : componentProps.props.description || ""
+      title: title !== undefined ? title : componentProps.props["title"] || "",
+      description:
+        description !== undefined ? description : componentProps.props["description"] || ""
     })
   }
 
@@ -76,14 +77,14 @@ export const StepItemEditor: Component<StepItemEditorProps> = (componentProps) =
         <RLSInput
           type="text"
           placeholder="Step title (e.g. Install Dependencies)"
-          value={componentProps.props.title || ""}
+          value={componentProps.props["title"] || ""}
           onBlur={(e) => saveMeta(e.currentTarget.value, undefined)}
           size="sm"
         />
         <RLSInput
           type="text"
           placeholder="Step description (optional)"
-          value={componentProps.props.description || ""}
+          value={componentProps.props["description"] || ""}
           onBlur={(e) => saveMeta(undefined, e.currentTarget.value)}
           size="sm"
         />

package/src/client/components/editors/StepsEditor.tsx

@@ -22,7 +22,7 @@ export const StepsEditor: Component<StepsEditorProps> = (componentProps) => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {

package/src/client/components/editors/TabItemEditor.tsx

@@ -23,7 +23,7 @@ export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) =>
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {
@@ -66,7 +66,7 @@ export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) =>
     componentProps.onPropsChange({
       ...componentProps.props,
       label,
-      value: componentProps.props.value || label.toLowerCase().replace(/\s+/g, "-")
+      value: componentProps.props["value"] || label.toLowerCase().replace(/\s+/g, "-")
     })
   }
 
@@ -78,7 +78,7 @@ export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) =>
           <RLSInput
             type="text"
             placeholder="e.g. pnpm, Astro, TypeScript"
-            value={componentProps.props.label || ""}
+            value={componentProps.props["label"] || ""}
             onBlur={(e) => saveLabel(e.currentTarget.value)}
             size="sm"
           />

package/src/client/components/editors/TableEditor.tsx

@@ -10,20 +10,20 @@ export interface TableEditorProps {
 
 export const TableEditor: Component<TableEditorProps> = (componentProps) => {
   const columns = (): TableColumnDef[] =>
-    componentProps.props.columns || [
+    componentProps.props["columns"] || [
       { key: "col1", header: "Header 1", align: "left" },
       { key: "col2", header: "Header 2", align: "left" }
     ]
 
   const rows = (): Record<string, string>[] =>
-    componentProps.props.rows || [{ col1: "Cell 1", col2: "Cell 2" }]
+    componentProps.props["rows"] || [{ col1: "Cell 1", col2: "Cell 2" }]
 
   const save = (newCols: TableColumnDef[], newRows: Record<string, string>[], caption?: string) => {
     componentProps.onPropsChange({
       ...componentProps.props,
       columns: newCols,
       rows: newRows,
-      caption: caption !== undefined ? caption : componentProps.props.caption || ""
+      caption: caption !== undefined ? caption : componentProps.props["caption"] || ""
     })
   }
 
@@ -172,7 +172,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
       <RLSInput
         type="text"
         placeholder="Table caption (optional)"
-        value={componentProps.props.caption || ""}
+        value={componentProps.props["caption"] || ""}
         onBlur={(e) => save(columns(), rows(), e.currentTarget.value)}
         size="sm"
       />

package/src/client/components/editors/TabsEditor.tsx

@@ -22,7 +22,7 @@ export const TabsEditor: Component<TabsEditorProps> = (componentProps) => {
     if (typeof componentProps.children === "function") {
       return componentProps.children() || []
     }
-    return componentProps.children || componentProps.props.children || []
+    return componentProps.children || componentProps.props["children"] || []
   }
 
   onMount(() => {