@rimelight/cms 0.0.4 → 0.0.5

package/src/admin/pages/pages-edit.astro

@@ -15,7 +15,7 @@ import "../../client/styles/cms-editor.css";
 export const prerender = false;
 
 const currentLocale = Astro.currentLocale ?? "en";
-const id = Astro.params.id;
+const id = Astro.params["id"];
 
 let page: any = null;
 let draft: any = null;
@@ -57,12 +57,12 @@ const extractedBlocks = Array.isArray(rawContent?.blocks)
 
 const titleVal =
   typeof page.title === "object" && page.title !== null
-    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>)["en"] || ""
     : String(page.title || "");
 
 const descVal =
   typeof page.description === "object" && page.description !== null
-    ? (page.description as Record<string, string>)[currentLocale] || (page.description as Record<string, string>).en || ""
+    ? (page.description as Record<string, string>)[currentLocale] || (page.description as Record<string, string>)["en"] || ""
     : String(page.description || "");
 
 const pageType = (page as any).type || "blog";

package/src/admin/pages/pages-index.astro

@@ -29,7 +29,7 @@ if (db) {
 const formattedPages = pagesList.map((page) => {
   const titleVal =
     typeof page.title === "object" && page.title !== null
-      ? (page.title as Record<string, string>).en || ""
+      ? (page.title as Record<string, string>)["en"] || ""
       : String(page.title || "");
   return {
     id: page.id,
@@ -124,7 +124,7 @@ const columns: TableColumn[] = [
   <script>
     document.querySelectorAll(".delete-page-btn").forEach((btn) => {
       btn.addEventListener("click", async () => {
-        const pageId = (btn as HTMLElement).dataset.pageId;
+        const pageId = (btn as HTMLElement).dataset["pageId"];
         if (!pageId) return;
         if (!confirm("Are you sure you want to delete this page?")) return;
 

package/src/admin/pages/pages-preview.astro

@@ -11,14 +11,14 @@ import { verifyPreviewToken } from "../../core/preview.ts";
 export const prerender = false;
 
 const currentLocale = Astro.currentLocale ?? "en";
-const id = Astro.params.id;
+const id = Astro.params["id"];
 
 if (!id) {
   return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
 }
 
 const token = Astro.url.searchParams.get("token");
-const secret = process.env.CMS_PREVIEW_SECRET || "rimelight-preview-secret-key";
+const secret = process.env["CMS_PREVIEW_SECRET"] || "rimelight-preview-secret-key";
 if (token) {
   await verifyPreviewToken(id, token, secret);
 }
@@ -48,7 +48,7 @@ const content = draft?.content ? parseContent(draft.content) : parseContent(page
 
 const titleVal =
   typeof page.title === "object" && page.title !== null
-    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>)["en"] || ""
     : String(page.title || "");
 ---
 

package/src/admin/pages/pages-review.astro

@@ -11,7 +11,7 @@ import { diffPageSnapshots } from "../../core/diff.ts";
 export const prerender = false;
 
 const currentLocale = Astro.currentLocale ?? "en";
-const id = Astro.params.id;
+const id = Astro.params["id"];
 
 if (!id) {
   return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
@@ -52,7 +52,7 @@ const diffResult = diffPageSnapshots(publishedSnapshot, draftSnapshot);
 
 const titleVal =
   typeof page.title === "object" && page.title !== null
-    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>)["en"] || ""
     : String(page.title || "");
 ---
 

package/src/admin/pages/templates-edit.astro

@@ -12,7 +12,7 @@ import { getRelativeLocaleUrl } from "@rimelight/i18n";
 export const prerender = false;
 
 const currentLocale = Astro.currentLocale ?? "en";
-const id = Astro.params.id;
+const id = Astro.params["id"];
 
 let template: any = null;
 if (db && id) {

package/src/admin/pages/templates-index.astro

@@ -74,7 +74,7 @@ if (db) {
   <script>
     document.querySelectorAll('.delete-template-btn').forEach((btn) => {
       btn.addEventListener('click', async () => {
-        const id = (btn as HTMLElement).dataset.id;
+        const id = (btn as HTMLElement).dataset["id"];
         if (!id) return;
 
         if (!confirm('Are you sure you want to delete this template?')) return;

package/src/astro/BlockRenderer.astro

@@ -19,7 +19,7 @@ const {
 } = Astro.props
 
 const Component = components[block.type] ?? defaultBlockComponents[block.type]
-const rawChildren = block.children || block.props?.children || []
+const rawChildren = block.children || block.props?.["children"] || []
 const children = (Array.isArray(rawChildren) ? rawChildren : []) as BaseBlock[]
 const nextDepth = block.type === "SectionBlock" ? Math.min(6, (sectionDepth || 2) + 1) : sectionDepth
 ---

package/src/astro/blocks/CalloutBlock.astro

@@ -61,7 +61,7 @@ const variantConfigs: Record<
   }
 }
 
-const config = (variantConfigs[variant as CalloutVariant] || variantConfigs.info)!
+const config = (variantConfigs[variant as CalloutVariant] || variantConfigs["info"])!
 const Tag = to ? "a" : "div"
 ---
 

package/src/astro/blocks/OrderedListBlock.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { block } = Astro.props
-const items = block.props?.items || block.children || []
+const items = block.props?.["items"] || block.children || []
 
 function escapeHtml(str: string): string {
   return (str || "")
@@ -50,6 +50,6 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
 
 <ol class="cms-ordered-list list-decimal list-inside space-y-2 my-4 text-base text-neutral-800" data-block-id={block.id}>
   {items.map((item: BaseBlock) => (
-    <li set:html={renderNodesToHtml(item.props?.content || [])} />
+    <li set:html={renderNodesToHtml(item.props?.["content"] || [])} />
   ))}
 </ol>

package/src/astro/blocks/ParagraphBlock.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { block, locale = "en" } = Astro.props
-const rawText = block.props?.text
+const rawText = block.props?.["text"]
 
 function escapeHtml(str: string): string {
   return (str || "")

package/src/astro/blocks/TabsBlock.astro

@@ -7,15 +7,15 @@ interface Props {
 }
 
 const { block } = Astro.props
-const children: BaseBlock[] = block.children || block.props?.children || []
-const defaultValue = block.props?.defaultValue || (children[0]?.props?.value || children[0]?.props?.label || "tab-0")
+const children: BaseBlock[] = block.children || block.props?.["children"] || []
+const defaultValue = block.props?.["defaultValue"] || (children[0]?.props?.["value"] || children[0]?.props?.["label"] || "tab-0")
 const tabsId = `tabs-${block.id}`
 ---
 
 <div class="cms-tabs my-6 border border-neutral-200 rounded-xl overflow-hidden" data-block-id={block.id} id={tabsId}>
   <div class="flex items-center gap-1 border-b border-neutral-200 bg-neutral-50 px-3 pt-2">
     {children.map((child, index) => {
-      const val = child.props?.value || child.props?.label || `tab-${index}`
+      const val = child.props?.["value"] || child.props?.["label"] || `tab-${index}`
       const isDefault = val === defaultValue || (!defaultValue && index === 0)
       return (
         <button
@@ -27,8 +27,8 @@ const tabsId = `tabs-${block.id}`
           }`}
           data-tab-target={`${tabsId}-panel-${index}`}
         >
-          {child.props?.icon && <span class={`${child.props.icon} mr-1.5 inline-block size-3.5 align-text-bottom`} />}
-          {child.props?.label || `Tab ${index + 1}`}
+          {child.props?.["icon"] && <span class={`${child.props["icon"]} mr-1.5 inline-block size-3.5 align-text-bottom`} />}
+          {child.props?.["label"] || `Tab ${index + 1}`}
         </button>
       )
     })}

package/src/astro/blocks/UnorderedListBlock.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { block } = Astro.props
-const items = block.props?.items || block.children || []
+const items = block.props?.["items"] || block.children || []
 
 function escapeHtml(str: string): string {
   return (str || "")
@@ -50,6 +50,6 @@ function renderNodesToHtml(nodes: InlineNode[]): string {
 
 <ul class="cms-unordered-list list-disc list-inside space-y-2 my-4 text-base text-neutral-800" data-block-id={block.id}>
   {items.map((item: BaseBlock) => (
-    <li set:html={renderNodesToHtml(item.props?.content || [])} />
+    <li set:html={renderNodesToHtml(item.props?.["content"] || [])} />
   ))}
 </ul>

package/src/auth/editor-guards.ts

@@ -114,7 +114,7 @@ export function validateServerBlockPayload(
 
 function getChildren(b: BaseBlock): BaseBlock[] {
   if (!b) return []
-  if (Array.isArray(b.props?.children)) return b.props.children
+  if (Array.isArray(b.props?.["children"])) return b.props["children"]
   if (Array.isArray(b.children)) return b.children
   return []
 }

package/src/cache/purge.ts

@@ -8,8 +8,8 @@ export interface CachePurgeOptions {
 
 export async function invalidatePageCache(options: CachePurgeOptions): Promise<boolean> {
   const { slug, locales, domain = "rimelight.com", basePath = "", isEnterpriseCloudflare } = options
-  const zoneId = process.env.CLOUDFLARE_ZONE_ID
-  const apiToken = process.env.CLOUDFLARE_API_TOKEN
+  const zoneId = process.env["CLOUDFLARE_ZONE_ID"]
+  const apiToken = process.env["CLOUDFLARE_API_TOKEN"]
 
   if (!zoneId || !apiToken) {
     return false

package/src/client/components/RimelightBlock.tsx

@@ -84,7 +84,7 @@ export const RimelightBlock: Component<RimelightBlockProps> = (props) => {
 
     const childrenList = () => {
       if (Array.isArray(blockItem.children)) return blockItem.children
-      if (Array.isArray(blockItem.props?.children)) return blockItem.props.children
+      if (Array.isArray(blockItem.props?.["children"])) return blockItem.props["children"]
       return []
     }
 

package/src/client/components/RimelightBlockPicker.tsx

@@ -137,7 +137,7 @@ export const RimelightBlockPicker: Component<RimelightBlockPickerProps> = (props
 
   const allowedTypes = (): string[] => {
     const parent = props.containerType || "Root"
-    return ALLOWED_CHILDREN_MAP[parent] || ALLOWED_CHILDREN_MAP.Root || []
+    return ALLOWED_CHILDREN_MAP[parent] || ALLOWED_CHILDREN_MAP["Root"] || []
   }
 
   const filteredBlocks = () => {

package/src/client/components/RimelightPreview.tsx

@@ -25,8 +25,8 @@ export const RimelightPreview: Component<RimelightPreviewProps> = (props) => {
   }
 
   const [blocks, setBlocks] = createSignal<BaseBlock[]>(getInitialBlocks())
-  const [title, setTitle] = createSignal<string>(props.title || "")
-  const [description, setDescription] = createSignal<string>(props.description || "")
+  const [title, setTitle] = createSignal<string>(props["title"] || "")
+  const [description, setDescription] = createSignal<string>(props["description"] || "")
   const [banner, setBanner] = createSignal<string>(props.banner || "")
   const [category, setCategory] = createSignal<string>(props.category || "")
 
@@ -120,14 +120,14 @@ function escapeHtml(str: string): string {
 function getChildren(b: BaseBlock): BaseBlock[] {
   if (!b) return []
   if (Array.isArray(b.children)) return b.children
-  if (Array.isArray(b.props?.children)) return b.props.children
+  if (Array.isArray(b.props?.["children"])) return b.props["children"]
   return []
 }
 
 function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string {
   if (!b) return ""
   const props = b.props || {}
-  const rawText = props.text
+  const rawText = props["text"]
   const textVal = typeof rawText === "object" && rawText !== null ? rawText.en || "" : rawText || ""
 
   if (b.type === "ParagraphBlock") {
@@ -172,9 +172,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
 
   if (b.type === "SectionBlock") {
     const level = calculateHeadingLevel(sectionDepth)
-    const title = props.title || "Untitled Section"
+    const title = props["title"] || "Untitled Section"
     const slug = title.toLowerCase().replace(/\W+/g, "-")
-    const description = props.description
+    const description = props["description"]
     let headingClasses = "font-bold text-neutral-900"
     if (level === 2) headingClasses += " text-3xl mt-6 mb-3 border-b border-neutral-200 pb-2"
     else if (level === 3) headingClasses += " text-2xl font-semibold mt-5 mb-2.5"
@@ -194,9 +194,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
   }
 
   if (b.type === "CalloutBlock") {
-    const variant = props.variant || "info"
-    const to = props.to
-    const target = props.target || "_self"
+    const variant = props["variant"] || "info"
+    const to = props["to"]
+    const target = props["target"] || "_self"
     const icons: Record<string, string> = {
       info: "ℹ️",
       success: "✅",
@@ -206,7 +206,7 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
       ideation: "💡",
       source: "💻"
     }
-    const icon = icons[variant] || icons.info
+    const icon = icons[variant] || icons["info"]
 
     let variantClasses = "bg-info-50/50 border-info-200 text-info-800"
     if (variant === "success") {
@@ -237,9 +237,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
   }
 
   if (b.type === "ImageBlock") {
-    const src = props.src || props.url || ""
-    const alt = props.alt || "Image"
-    const caption = props.caption
+    const src = props["src"] || props["url"] || ""
+    const alt = props["alt"] || "Image"
+    const caption = props["caption"]
     return `<figure class="mx-auto my-6 flex flex-col items-center max-w-full">
       <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 shadow-sm" />
       ${caption ? `<figcaption class="mt-2 text-center text-xs text-neutral-500 italic">${escapeHtml(caption)}</figcaption>` : ""}
@@ -247,9 +247,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
   }
 
   if (b.type === "CodeBlock") {
-    const code = props.code || textVal
-    const language = props.language || "plaintext"
-    const caption = props.caption
+    const code = props["code"] || textVal
+    const language = props["language"] || "plaintext"
+    const caption = props["caption"]
     return `<div class="cms-code my-4 rounded-lg bg-neutral-950 p-4 font-mono text-sm border border-neutral-800 overflow-x-auto">
       <div class="text-xs text-neutral-500 uppercase mb-2 select-none">${escapeHtml(language)}</div>
       <pre class="m-0"><code class="text-success-300 font-mono">${escapeHtml(code)}</code></pre>
@@ -258,9 +258,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
   }
 
   if (b.type === "ScriptBlock") {
-    const title = props.title || "Untitled Script"
-    const synopsis = props.synopsis
-    const chars = props.characters || []
+    const title = props["title"] || "Untitled Script"
+    const synopsis = props["synopsis"]
+    const chars = props["characters"] || []
     const { aPlot, bPlot, cPlot, stinger } = props
     return `<div class="my-6 p-4 border-l-4 border-warning-400 bg-warning-50/20 rounded-r-lg">
       <div class="mb-4">
@@ -307,10 +307,10 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
       NONE: ""
     }
 
-    const setting = settingLabels[props.setting] || props.setting || "INT."
-    const location = props.location || ""
-    const tod = timeOfDayLabels[props.timeOfDay] || props.timeOfDay || "Morning"
-    const transition = transitionLabels[props.transition] || ""
+    const setting = settingLabels[props["setting"]] || props["setting"] || "INT."
+    const location = props["location"] || ""
+    const tod = timeOfDayLabels[props["timeOfDay"]] || props["timeOfDay"] || "Morning"
+    const transition = transitionLabels[props["transition"]] || ""
 
     const parts: string[] = []
     if (setting && setting !== "Other") parts.push(setting)
@@ -322,7 +322,7 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
         ${parts.map((p) => `<span>${escapeHtml(p)}</span>`).join("")}
         ${transition ? `<span class="ml-auto text-[10px] italic text-neutral-500">${escapeHtml(transition)}</span>` : ""}
       </div>
-      ${props.description ? `<p class="text-sm text-neutral-700 mb-2">${escapeHtml(props.description)}</p>` : ""}
+      ${props["description"] ? `<p class="text-sm text-neutral-700 mb-2">${escapeHtml(props["description"])}</p>` : ""}
       <div class="mt-3">
         ${getChildren(b)
           .map((c) => renderBlockPreviewHtml(c, sectionDepth))
@@ -332,9 +332,9 @@ function renderBlockPreviewHtml(b: BaseBlock, sectionDepth: number = 0): string
   }
 
   if (b.type === "DialogueBlock") {
-    const character = props.character || "CHARACTER"
-    const parenthetical = props.parenthetical
-    const line = props.line || ""
+    const character = props["character"] || "CHARACTER"
+    const parenthetical = props["parenthetical"]
+    const line = props["line"] || ""
     return `<div class="my-3 mx-8 max-w-md">
       <div class="text-sm font-bold text-center text-commentary-800">${escapeHtml(character)}</div>
       ${parenthetical ? `<div class="text-xs italic text-center text-neutral-500 mt-0.5">(${escapeHtml(parenthetical)})</div>` : ""}

package/src/client/components/RimelightPropertiesPanel.tsx

@@ -49,13 +49,13 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
   const [expandedGroups, setExpandedGroups] = createSignal<Record<string, boolean>>({})
   const [arrayInputs, setArrayInputs] = createSignal<Record<string, string>>({})
   const [links, setLinks] = createSignal<Array<{ label: string; to: string; icon?: string }>>(
-    componentProps.initialProperties?.links || []
+    componentProps.initialProperties?.["links"] || []
   )
 
   // Bylines state
   const [availableBylines, setAvailableBylines] = createSignal<BylineItem[]>([])
   const [bylines, setBylines] = createSignal<BylineItem[]>(
-    componentProps.bylines || componentProps.initialProperties?.bylines || []
+    componentProps.bylines || componentProps.initialProperties?.["bylines"] || []
   )
   const [isBylineModalOpen, setIsBylineModalOpen] = createSignal(false)
   const [editingBylineIndex, setEditingBylineIndex] = createSignal<number | null>(null)
@@ -71,10 +71,10 @@ export const RimelightPropertiesPanel: Component<RimelightPropertiesPanelProps>
     Array<{ id: string; name: string; slug: string }>
   >([])
   const [selectedCategory, setSelectedCategory] = createSignal<string>(
-    componentProps.initialProperties?.category || ""
+    componentProps.initialProperties?.["category"] || ""
   )
   const [tagsList, setTagsList] = createSignal<string[]>(
-    componentProps.tags || componentProps.initialProperties?.tags || []
+    componentProps.tags || componentProps.initialProperties?.["tags"] || []
   )
   const [newTagInput, setNewTagInput] = createSignal("")
 

package/src/client/components/RimelightTemplateEditor.tsx

@@ -163,7 +163,11 @@ export const RimelightTemplateEditor: Component<RimelightTemplateEditorProps> =
           <For each={blocks()}>
             {(block, index) => {
               const rawText =
-                block.props.text || block.props.title || block.props.code || block.props.src || ""
+                block.props["text"] ||
+                block.props["title"] ||
+                block.props["code"] ||
+                block.props["src"] ||
+                ""
               const textVal = typeof rawText === "object" ? rawText.en || "" : rawText || ""
 
               return (
@@ -220,10 +224,10 @@ export const RimelightTemplateEditor: Component<RimelightTemplateEditorProps> =
                           onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => {
                             const val = e.currentTarget.value
                             updateBlockItem(block.id, (b) => {
-                              if (b.type === "SectionBlock") b.props.title = val
-                              else if (b.type === "CodeBlock") b.props.code = val
-                              else if (b.type === "ImageBlock") b.props.src = val
-                              else b.props.text = { en: val }
+                              if (b.type === "SectionBlock") b.props["title"] = val
+                              else if (b.type === "CodeBlock") b.props["code"] = val
+                              else if (b.type === "ImageBlock") b.props["src"] = val
+                              else b.props["text"] = { en: val }
                             })
                           }}
                           size="sm"

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)"