@rimelight/cms 0.0.2 → 0.0.4

package/src/astro/blocks/ApiDocumentationBlock.astro

@@ -1,350 +0,0 @@
----
-import type { BaseBlock } from "@rimelight/cms"
-function filterProps(props: any[], options: { hide?: string[]; show?: string[] }): any[] {
-  if (options.show?.length) return props.filter((p: any) => options.show!.includes(p.name))
-  if (options.hide?.length) return props.filter((p: any) => !options.hide!.includes(p.name))
-  return props
-}
-
-interface Props {
-  block: BaseBlock
-  locale?: string
-}
-
-const { block } = Astro.props
-const { componentName, sections = {}, hide = [], show = [] } = block.props
-const compMeta = block.props.meta
-const themeCode = block.props.themeCode
-
-const filterOpts: { hide?: string[]; show?: string[] } = { hide, show }
-const props = filterProps(compMeta?.props ?? [], filterOpts)
-const slots = compMeta?.slots ?? []
-const emits = compMeta?.emits ?? []
----
-
-{(sections.props !== false) && (
-  <div class="api-documentation-section mb-6">
-    <h3 class="text-lg font-semibold text-foreground mb-3">Props</h3>
-    {props.length > 0 ? (
-      <div class="overflow-x-auto">
-        <table class="w-full text-sm border-collapse">
-          <thead>
-            <tr class="border-b border-border">
-              <th class="text-left py-2 px-3 font-semibold">Name</th>
-              <th class="text-left py-2 px-3 font-semibold">Type</th>
-              <th class="text-left py-2 px-3 font-semibold">Required</th>
-              <th class="text-left py-2 px-3 font-semibold">Default</th>
-              <th class="text-left py-2 px-3 font-semibold">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {props.map((prop: any) => (
-              <tr class="border-b border-border/50">
-                <td><span class="font-mono text-sm">{prop.name}</span></td>
-                <td><span class="font-mono text-xs text-muted-foreground">{prop.type}</span></td>
-                <td>{prop.required ? "Yes" : "No"}</td>
-                <td>{prop.default !== undefined ? <span class="font-mono text-xs text-muted-foreground">{prop.default}</span> : "—"}</td>
-                <td>{prop.description || "—"}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    ) : (
-      <p class="text-sm italic text-muted-foreground">No props to display.</p>
-    )}
-  </div>
-)}
-
-{(sections.slots !== false) && (
-  <div class="api-documentation-section mb-6">
-    <h3 class="text-lg font-semibold text-foreground mb-3">Slots</h3>
-    {slots.length === 0 ? (
-      <p class="text-sm italic text-muted-foreground">No slots to display.</p>
-    ) : (
-      <div class="overflow-x-auto">
-        <table class="w-full text-sm border-collapse">
-          <thead>
-            <tr class="border-b border-border">
-              <th class="text-left py-2 px-3 font-semibold">Slot</th>
-              <th class="text-left py-2 px-3 font-semibold">Type</th>
-            </tr>
-          </thead>
-          <tbody>
-            {slots.map((slot: any) => (
-              <tr class="border-b border-border/50">
-                <td class="py-2 px-3">
-                  <span class="font-mono text-sm">{slot.name}</span>
-                </td>
-                <td class="py-2 px-3">
-                  {Object.keys(slot.bindings || {}).length > 0 ? (
-                    <span class="font-mono text-xs text-muted-foreground">
-                      {Object.values(slot.bindings)[0]}
-                    </span>
-                  ) : (
-                    <span class="text-muted-foreground">-</span>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    )}
-  </div>
-)}
-
-{(sections.emits !== false) && (
-  <div class="api-documentation-section mb-6">
-    <h3 class="text-lg font-semibold text-foreground mb-3">Emits</h3>
-    {emits.length === 0 ? (
-      <p class="text-sm italic text-muted-foreground">No events emitted by this component.</p>
-    ) : (
-      <div class="overflow-x-auto">
-        <table class="w-full text-sm border-collapse">
-          <thead>
-            <tr class="border-b border-border">
-              <th class="text-left py-2 px-3 font-semibold">Event</th>
-              <th class="text-left py-2 px-3 font-semibold">Payload</th>
-            </tr>
-          </thead>
-          <tbody>
-            {emits.map((emit: any) => (
-              <tr class="border-b border-border/50">
-                <td class="py-2 px-3">
-                  <span class="font-mono text-sm">{emit.name}</span>
-                </td>
-                <td class="py-2 px-3">
-                  <span class="font-mono text-xs text-muted-foreground">{emit.type}</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    )}
-  </div>
-)}
-
-{(sections.theme !== false) && (
-  <div class="api-documentation-section mb-6">
-    <h3 class="text-lg font-semibold text-foreground mb-3">Theme</h3>
-    {themeCode ? (
-      <div class="api-theme-container relative border border-border rounded-lg overflow-hidden group mb-6" data-component={componentName}>
-        <div class="api-theme-collapse overflow-hidden max-h-[240px] relative transition-[max-height] duration-300 ease-in-out">
-          <div class="expressive-code m-0 border-0 rounded-none">
-            <figure class="frame m-0 border-0">
-              <pre class="language-ts overflow-x-auto m-0 border-0 rounded-none bg-muted"><code class="language-ts m-0">{themeCode}</code></pre>
-            </figure>
-          </div>
-          <div class="api-theme-fade absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-background to-transparent pointer-events-none transition-opacity duration-300"></div>
-        </div>
-        <div class="api-theme-trigger-bar absolute bottom-0 left-0 right-0 flex justify-center pb-3 bg-gradient-to-t from-background/90 via-background/70 to-transparent pt-12">
-          <button class="api-theme-btn px-4 py-1.5 text-xs font-semibold text-primary-foreground bg-primary hover:bg-primary/90 border border-border rounded-md shadow-md transition-all duration-200 cursor-pointer">Show theme config</button>
-        </div>
-      </div>
-    ) : (
-      <p class="text-sm italic text-muted-foreground">No theme data available.</p>
-    )}
-  </div>
-)}
-
-{(sections.changelog) && (
-  <div class="api-documentation-section mb-6">
-    <h3 class="text-lg font-semibold text-foreground mb-3">Changelog</h3>
-    <div class="api-changelog-container group" data-component={componentName}>
-      <div class="api-changelog-loading py-6 flex flex-col gap-4">
-        <div class="animate-pulse h-4 bg-muted rounded w-1/4"></div>
-        <div class="animate-pulse h-3 bg-muted rounded w-full"></div>
-        <div class="animate-pulse h-3 bg-muted rounded w-5/6"></div>
-      </div>
-      <div class="api-changelog-content hidden">
-        <div class="api-changelog-timeline-target"></div>
-      </div>
-      <div class="api-changelog-empty hidden text-sm italic text-muted-foreground py-2">
-        No recent changes found.
-      </div>
-    </div>
-  </div>
-)}
-
-<script>
-  function escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
-  }
-
-  async function loadChangelog() {
-    if (typeof document === "undefined") return;
-    const containers = document.querySelectorAll('.api-changelog-container');
-
-    await Promise.all(
-      Array.from(containers).map(async (container) => {
-        if (container.getAttribute('data-changelog-ready') === 'true') return;
-        container.setAttribute('data-changelog-ready', 'true');
-
-        const component = container.getAttribute('data-component');
-
-        const loadingEl = container.querySelector('.api-changelog-loading') as HTMLElement;
-        const contentEl = container.querySelector('.api-changelog-content') as HTMLElement;
-        const targetEl = container.querySelector('.api-changelog-timeline-target') as HTMLElement;
-        const emptyEl = container.querySelector('.api-changelog-empty') as HTMLElement;
-
-        if (!component || !loadingEl || !contentEl || !targetEl || !emptyEl) return;
-
-        try {
-          const res = await fetch(`/api/github/changelog?component=${component}`);
-          if (!res.ok) throw new Error();
-          const data: any[] = await res.json();
-
-          loadingEl.classList.add('hidden');
-
-          if (!data || data.length === 0) {
-            emptyEl.classList.remove('hidden');
-            return;
-          }
-
-          const timelineItems: Array<{ type: 'tag' | 'commit'; versionTag?: string; sha?: string; message?: string }> = [];
-
-          data.forEach((release: any) => {
-            if (release.tag) {
-              timelineItems.push({
-                type: 'tag',
-                versionTag: release.tag === 'unreleased' ? 'Soon' : release.tag
-              });
-            }
-
-            if (release.commits && Array.isArray(release.commits)) {
-              release.commits.forEach((commit: any) => {
-                timelineItems.push({
-                  type: 'commit',
-                  sha: commit.sha,
-                  message: commit.message
-                });
-              });
-            }
-          });
-
-          let rootHtml = `<div data-orientation="vertical" data-slot="root" class="flex flex-col">`;
-
-          timelineItems.forEach((item, index) => {
-            const isLast = index === timelineItems.length - 1;
-
-            if (item.type === 'tag') {
-              rootHtml += `
-                <div data-slot="item" class="group relative flex flex-1 gap-3">
-                  <div data-slot="container" class="relative flex items-center flex-col shrink-0">
-                    <span data-slot="indicator" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative size-6 text-xs text-primary bg-primary/10 border border-primary/20 my-1">
-                      <span class="i-lucide-tag size-3.5"></span>
-                    </span>
-                    ${!isLast ? `<div data-slot="separator" class="flex-1 bg-elevated w-0.5 min-h-[16px]"></div>` : ''}
-                  </div>
-                  <div data-slot="wrapper" class="w-full py-1">
-                    <div data-slot="title" class="font-medium text-foreground text-sm flex items-center">
-                      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-semibold bg-primary/10 text-primary border border-primary/20">
-                        ${escapeHtml(item.versionTag || '')}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              `;
-            } else {
-              const cleanedMessage = (item.message || '')
-                .replace(/#(\d+)/g, '<a href="https://github.com/Rimelight-Entertainment/rimelight/issues/$1" target="_blank" class="text-primary hover:underline">#$1</a>')
-                .replace(/`(.*?)`/g, '<code class="text-xs px-1.5 py-0.5 bg-muted border border-border rounded font-mono text-muted-foreground">$1</code>');
-
-              rootHtml += `
-                <div data-slot="item" class="group relative flex flex-1 gap-3">
-                  <div data-slot="container" class="relative flex items-center flex-col shrink-0">
-                    <span data-slot="indicator" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative size-6 text-xs text-muted bg-transparent">
-                      <span class="size-1.5 rounded-full bg-border"></span>
-                    </span>
-                    ${!isLast ? `<div data-slot="separator" class="flex-1 bg-elevated w-0.5 min-h-[16px]"></div>` : ''}
-                  </div>
-                  <div data-slot="wrapper" class="w-full py-1 flex items-start gap-2 text-sm">
-                    <a href="https://github.com/Rimelight-Entertainment/rimelight/commit/${item.sha}" target="_blank" class="font-mono text-xs px-1.5 py-0.5 bg-muted border border-border rounded text-muted-foreground hover:text-foreground hover:border-border shrink-0">
-                      ${item.sha ? item.sha.slice(0, 7) : ''}
-                    </a>
-                    <span class="text-muted-foreground text-sm leading-snug pt-0.5">
-                      ${cleanedMessage}
-                    </span>
-                  </div>
-                </div>
-              `;
-            }
-          });
-
-          rootHtml += `</div>`;
-
-          targetEl.innerHTML = rootHtml;
-          contentEl.classList.remove('hidden');
-        } catch (err) {
-          loadingEl.classList.add('hidden');
-          emptyEl.textContent = 'Failed to load changelog.';
-          emptyEl.classList.remove('hidden');
-        }
-      })
-    );
-  }
-
-  function setupThemeCollapser() {
-    if (typeof document === 'undefined') return;
-    const containers = document.querySelectorAll('.api-theme-container');
-    containers.forEach(container => {
-      if (container.getAttribute('data-collapser-ready') === 'true') return;
-      container.setAttribute('data-collapser-ready', 'true');
-
-      const collapseWrapper = container.querySelector('.api-theme-collapse') as HTMLElement;
-      const fadeOverlay = container.querySelector('.api-theme-fade') as HTMLElement;
-      const btn = container.querySelector('.api-theme-btn') as HTMLButtonElement;
-      const triggerBar = container.querySelector('.api-theme-trigger-bar') as HTMLElement;
-
-      if (!collapseWrapper || !btn || !triggerBar || !fadeOverlay) return;
-
-      const checkAndSetup = () => {
-        const scrollHeight = collapseWrapper.scrollHeight;
-        if (scrollHeight <= 240) {
-          collapseWrapper.style.maxHeight = 'none';
-          fadeOverlay.style.display = 'none';
-          triggerBar.style.display = 'none';
-          return;
-        }
-
-        let isExpanded = false;
-
-        btn.addEventListener('click', () => {
-          isExpanded = !isExpanded;
-          if (isExpanded) {
-            collapseWrapper.style.maxHeight = `${collapseWrapper.scrollHeight}px`;
-            btn.textContent = 'Hide theme config';
-            fadeOverlay.style.opacity = '0';
-            triggerBar.classList.remove('absolute', 'bottom-0');
-            triggerBar.classList.add('relative', 'bg-background', 'py-3', 'border-t', 'border-border');
-            triggerBar.style.paddingTop = '12px';
-          } else {
-            collapseWrapper.style.maxHeight = '240px';
-            btn.textContent = 'Show theme config';
-            fadeOverlay.style.opacity = '1';
-            triggerBar.classList.add('absolute', 'bottom-0');
-            triggerBar.classList.remove('relative', 'bg-background', 'py-3', 'border-t', 'border-border');
-            triggerBar.style.paddingTop = '48px';
-            container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-          }
-        });
-      };
-
-      setTimeout(checkAndSetup, 150);
-    });
-  }
-
-  if (typeof document !== 'undefined') {
-    loadChangelog();
-    setupThemeCollapser();
-    document.addEventListener('astro:page-load', loadChangelog);
-    document.addEventListener('astro:after-swap', setupThemeCollapser);
-  }
-</script>

package/src/astro/blocks/DialogueBlock.astro

@@ -1,23 +0,0 @@
----
-import type { BaseBlock } from "@rimelight/cms"
-
-interface Props {
-  block: BaseBlock
-  locale?: string
-}
-
-const { block } = Astro.props
-const { character, parenthetical, line } = block.props
----
-
-<div class="my-3 mx-8 max-w-md">
-  <div class="text-sm font-bold text-center text-pink-800 dark:text-pink-200">
-    {character}
-  </div>
-  {parenthetical && (
-    <div class="text-xs italic text-center text-gray-600 dark:text-gray-400 mt-0.5">
-      ({parenthetical})
-    </div>
-  )}
-  <div class="text-sm text-center text-gray-700 dark:text-gray-300 mt-1">{line}</div>
-</div>

package/src/astro/blocks/LivePreviewBlock.astro

@@ -1,27 +0,0 @@
----
-import type { BaseBlock } from "@rimelight/cms"
-
-interface Props {
-  block: BaseBlock
-  locale?: string
-}
-
-const { block } = Astro.props
-const { componentCode, framework = "astro", height = "300px", width = "100%", editable = false } = block.props
----
-
-<div class="cms-live-preview border border-border rounded-xl overflow-visible bg-background text-foreground my-6" data-block-id={block.id} data-framework={framework} data-editable={editable}>
-  <div class="controls-area p-4 border-b border-border flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <span class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Live Preview</span>
-      <span class="text-xs font-mono text-muted-foreground bg-muted px-2 py-0.5 rounded">{framework}</span>
-    </div>
-    {editable && (
-      <span class="text-xs text-muted-foreground italic">Editable</span>
-    )}
-  </div>
-
-  <div class="preview-area p-4 flex items-center justify-center" style={`height: ${height}; width: ${width};`}>
-    <pre class="text-sm font-mono text-muted-foreground bg-muted p-4 rounded-lg overflow-x-auto w-full"><code>{componentCode}</code></pre>
-  </div>
-</div>

package/src/astro/blocks/SceneBlock.astro

@@ -1,65 +0,0 @@
----
-import type { BaseBlock, TimeOfDay, Setting, Transition } from "@rimelight/cms"
-
-interface Props {
-  block: BaseBlock
-  locale?: string
-}
-
-const { block } = Astro.props
-const { location, timeOfDay, setting, transition, description } = block.props
-
-const timeOfDayLabels: Record<TimeOfDay, string> = {
-  MORNING: "Morning",
-  NOON: "Noon",
-  AFTERNOON: "Afternoon",
-  EVENING: "Evening",
-  NIGHT: "Night",
-  OTHER: "Other"
-}
-
-const settingLabels: Record<Setting, string> = { 
-  INTERIOR: "INT.", 
-  EXTERIOR: "EXT.", 
-  OTHER: "Other" 
-}
-
-const transitionLabels: Record<Transition, string> = {
-  CUT_TO: "CUT TO",
-  CUT_BACK_TO: "CUT BACK TO",
-  FADE_TO: "FADE TO",
-  NONE: ""
-}
-
-const settingLabel = settingLabels[setting as Setting] || "Other"
-const todLabel = timeOfDayLabels[timeOfDay as TimeOfDay] || "Other"
-const transitionLabel = transitionLabels[transition as Transition] || ""
-
-const headingParts = []
-if (settingLabel && settingLabel !== "Other") headingParts.push(settingLabel)
-if (location) headingParts.push(location)
-if (todLabel && todLabel !== "Other") headingParts.push(`- ${todLabel}`)
----
-
-<div class="my-4 p-3 border-l-4 border-indigo-400 bg-indigo-50/20 dark:bg-indigo-950/10 rounded-r-lg">
-  <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-indigo-800 dark:text-indigo-200 mb-2">
-    {headingParts.map((part) => (
-      <span>{part}</span>
-    ))}
-    {transitionLabel && (
-      <span class="ml-auto text-[10px] italic text-gray-600 dark:text-gray-400">
-        {transitionLabel}
-      </span>
-    )}
-  </div>
-  {description && (
-    <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">
-      {description}
-    </p>
-  )}
-  {((block.children && block.children.length > 0) || (block.props?.children && block.props.children.length > 0)) && (
-    <div class="mt-3">
-      <slot />
-    </div>
-  )}
-</div>

package/src/astro/blocks/ScriptBlock.astro

@@ -1,59 +0,0 @@
----
-import type { BaseBlock } from "@rimelight/cms"
-
-interface Props {
-  block: BaseBlock
-  locale?: string
-}
-
-const { block } = Astro.props
-const { title, synopsis, characters, aPlot, bPlot, cPlot, stinger } = block.props
----
-
-<div class="my-6 p-4 border-l-4 border-amber-400 bg-amber-50/20 dark:bg-amber-950/10 rounded-r-lg">
-  <div class="mb-4">
-    <h3 class="text-xl font-bold text-amber-900 dark:text-amber-100">{title}</h3>
-    {synopsis && <p class="text-sm text-gray-600 dark:text-gray-400 mt-1 italic">{synopsis}</p>}
-    {characters && characters.length > 0 && (
-      <div class="flex flex-wrap gap-3 mt-3 text-xs">
-        {characters.map((char: string) => (
-          <span class="px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200">
-            {char}
-          </span>
-        ))}
-      </div>
-    )}
-  </div>
-  {(aPlot || bPlot || cPlot) && (
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 my-3">
-      {aPlot && (
-        <div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700">
-          <div class="text-[10px] font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">A Plot</div>
-          <div class="text-sm mt-0.5">{aPlot}</div>
-        </div>
-      )}
-      {bPlot && (
-        <div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700">
-          <div class="text-[10px] font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">B Plot</div>
-          <div class="text-sm mt-0.5">{bPlot}</div>
-        </div>
-      )}
-      {cPlot && (
-        <div class="bg-white/50 dark:bg-neutral-900/30 rounded p-2 border border-gray-200 dark:border-gray-700">
-          <div class="text-[10px] font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">C Plot</div>
-          <div class="text-sm mt-0.5">{cPlot}</div>
-        </div>
-      )}
-    </div>
-  )}
-  {stinger && (
-    <p class="text-sm text-gray-600 dark:text-gray-400 italic mt-2 border-t border-gray-200 dark:border-gray-700 pt-2">
-      Stinger: {stinger}
-    </p>
-  )}
-  {((block.children && block.children.length > 0) || (block.props?.children && block.props.children.length > 0)) && (
-    <div class="mt-4">
-      <slot />
-    </div>
-  )}
-</div>

package/src/core/template-sync.ts

@@ -1,75 +0,0 @@
-import type { BaseBlock } from "./types/blocks"
-
-/**
- * Merges updated template blocks into an existing page block tree. Matches templated blocks by
- * block `type` + `isTemplated: true` tag and structural index. Fits updated template anchors while
- * preserving user-inserted custom blocks around them.
- */
-export function mergeTemplateBlocks(
-  existingPageBlocks: BaseBlock[],
-  newTemplateBlocks: BaseBlock[]
-): BaseBlock[] {
-  const merged: BaseBlock[] = []
-
-  const newTemplatedAnchors = newTemplateBlocks.filter((b) => b.isTemplated)
-  let existingIndex = 0
-
-  for (const templateAnchor of newTemplatedAnchors) {
-    // Collect user-inserted custom blocks preceding this template anchor
-    while (
-      existingIndex < existingPageBlocks.length &&
-      !existingPageBlocks[existingIndex]?.isTemplated
-    ) {
-      const block = existingPageBlocks[existingIndex]
-      if (block) merged.push(block)
-      existingIndex++
-    }
-
-    // Match existing template anchor by block type
-    const existingAnchor = existingPageBlocks[existingIndex]
-
-    if (existingAnchor && existingAnchor.type === templateAnchor.type) {
-      merged.push({
-        ...templateAnchor,
-        id: existingAnchor.id,
-        props: mergeBlockProps(
-          existingAnchor.props,
-          templateAnchor.props,
-          existingAnchor.templatedProps
-        )
-      })
-      existingIndex++
-    } else {
-      // New template anchor inserted in template update: add fresh block with new random UUID
-      merged.push({
-        ...templateAnchor,
-        id: crypto.randomUUID()
-      })
-    }
-  }
-
-  // Append any remaining custom user blocks at the end of the document
-  while (existingIndex < existingPageBlocks.length) {
-    const block = existingPageBlocks[existingIndex]
-    if (block) merged.push(block)
-    existingIndex++
-  }
-
-  return merged
-}
-
-function mergeBlockProps(
-  existingProps: any,
-  templateProps: any,
-  templatedProps?: boolean | string[]
-) {
-  if (templatedProps === true) return { ...templateProps }
-  if (Array.isArray(templatedProps)) {
-    const updated = { ...existingProps }
-    for (const key of templatedProps) {
-      updated[key] = templateProps[key]
-    }
-    return updated
-  }
-  return { ...existingProps, ...templateProps }
-}