@rimelight/cms 0.0.2 → 0.0.3

package/src/storage/index.ts

@@ -0,0 +1,253 @@
+export interface StorageFile {
+  key: string
+  name: string
+  size: number
+  mimeType: string
+  uploadedAt: string
+  url: string
+  etag?: string
+  customMetadata?: Record<string, string>
+}
+
+export interface StorageListResult {
+  files: StorageFile[]
+  truncated: boolean
+  cursor?: string
+}
+
+export interface R2StorageOptions {
+  binding?: string | undefined
+  publicUrl?: string | undefined
+  prefix?: string | undefined
+}
+
+export interface StorageConfig {
+  provider: "r2" | "local" | "s3"
+  binding?: string | undefined
+  publicUrl?: string | undefined
+  prefix?: string | undefined
+}
+
+export interface StorageListOptions {
+  prefix?: string | undefined
+  cursor?: string | undefined
+  limit?: number | undefined
+  publicUrl?: string | undefined
+  apiBasePath?: string | undefined
+}
+
+export interface StorageUploadOptions {
+  key?: string | undefined
+  prefix?: string | undefined
+  publicUrl?: string | undefined
+  apiBasePath?: string | undefined
+}
+
+export function r2(options: R2StorageOptions = {}): StorageConfig {
+  return {
+    provider: "r2",
+    binding: options.binding ?? "BLOB",
+    publicUrl: options.publicUrl,
+    prefix: options.prefix ?? "media/"
+  }
+}
+
+/**
+ * Resolves Cloudflare R2 bucket instance from Cloudflare env or Astro locals.
+ */
+export async function getR2Bucket(locals?: any, bindingName = "BLOB"): Promise<any> {
+  // 1. Try cloudflare:workers standard export (Astro v6+)
+  try {
+    // @ts-ignore
+    const cf = await import("cloudflare:workers")
+    if (cf?.env && cf.env[bindingName]) {
+      return cf.env[bindingName]
+    }
+  } catch {}
+
+  // 2. Direct locals property check (locals.env or locals[bindingName])
+  if (locals) {
+    if (locals.env && locals.env[bindingName]) {
+      return locals.env[bindingName]
+    }
+    if (locals[bindingName]) {
+      return locals[bindingName]
+    }
+  }
+
+  // 3. Global process.env fallback
+  if (typeof process !== "undefined" && process.env && (process.env as any)[bindingName]) {
+    return (process.env as any)[bindingName]
+  }
+
+  return null
+}
+
+/**
+ * Lists files from R2 Bucket under configured prefix.
+ */
+export async function listR2Files(
+  bucket: any,
+  options: StorageListOptions = {}
+): Promise<StorageListResult> {
+  if (!bucket || typeof bucket.list !== "function") {
+    return { files: [], truncated: false }
+  }
+
+  const prefix = options.prefix ?? "media/"
+  const limit = options.limit ?? 50
+
+  const result = await bucket.list({
+    prefix,
+    cursor: options.cursor,
+    limit
+  })
+
+  const files: StorageFile[] = (result.objects || []).map((obj: any) => {
+    const rawKey = obj.key as string
+    const name = rawKey.startsWith(prefix) ? rawKey.slice(prefix.length) : rawKey
+    const cleanedName = name.includes("/") ? name.split("/").pop()! : name
+    const mimeType = obj.httpMetadata?.contentType || guessMimeType(rawKey)
+
+    // Resolve public URL: custom domain, or proxy endpoint
+    let url = ""
+    if (options.publicUrl) {
+      const baseUrl = options.publicUrl.endsWith("/")
+        ? options.publicUrl.slice(0, -1)
+        : options.publicUrl
+      url = `${baseUrl}/${rawKey}`
+    } else if (options.apiBasePath) {
+      const baseApi = options.apiBasePath.endsWith("/")
+        ? options.apiBasePath.slice(0, -1)
+        : options.apiBasePath
+      url = `${baseApi}/${rawKey}`
+    } else {
+      url = `/cms/api/media/${rawKey}`
+    }
+
+    return {
+      key: rawKey,
+      name: cleanedName,
+      size: obj.size,
+      mimeType,
+      uploadedAt: obj.uploaded ? new Date(obj.uploaded).toISOString() : new Date().toISOString(),
+      url,
+      etag: obj.etag,
+      customMetadata: obj.customMetadata
+    }
+  })
+
+  return {
+    files,
+    truncated: result.truncated,
+    cursor: result.cursor
+  }
+}
+
+/**
+ * Uploads a file buffer/stream into R2 Bucket.
+ */
+export async function uploadR2File(
+  bucket: any,
+  file: File,
+  options: StorageUploadOptions = {}
+): Promise<StorageFile> {
+  if (!bucket || typeof bucket.put !== "function") {
+    throw new Error("R2 bucket binding is not available in runtime environment.")
+  }
+
+  const prefix = options.prefix ?? "media/"
+  const timestamp = Date.now()
+  const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, "_")
+  const randomSuffix = Math.random().toString(36).substring(2, 8)
+  const key = options.key ?? `${prefix}${timestamp}-${randomSuffix}/${safeName}`
+
+  const arrayBuffer = await file.arrayBuffer()
+
+  const r2Object = await bucket.put(key, arrayBuffer, {
+    httpMetadata: {
+      contentType: file.type || guessMimeType(safeName),
+      contentDisposition: `inline; filename="${safeName}"`
+    },
+    customMetadata: {
+      originalName: file.name,
+      uploadedAt: new Date().toISOString()
+    }
+  })
+
+  let url = ""
+  if (options.publicUrl) {
+    const baseUrl = options.publicUrl.endsWith("/")
+      ? options.publicUrl.slice(0, -1)
+      : options.publicUrl
+    url = `${baseUrl}/${key}`
+  } else if (options.apiBasePath) {
+    const baseApi = options.apiBasePath.endsWith("/")
+      ? options.apiBasePath.slice(0, -1)
+      : options.apiBasePath
+    url = `${baseApi}/${key}`
+  } else {
+    url = `/cms/api/media/${key}`
+  }
+
+  return {
+    key,
+    name: safeName,
+    size: file.size,
+    mimeType: file.type || guessMimeType(safeName),
+    uploadedAt: new Date().toISOString(),
+    url,
+    etag: r2Object?.etag
+  }
+}
+
+/**
+ * Deletes a file from R2 Bucket by key.
+ */
+export async function deleteR2File(bucket: any, key: string): Promise<boolean> {
+  if (!bucket || typeof bucket.delete !== "function") {
+    throw new Error("R2 bucket binding is not available in runtime environment.")
+  }
+  await bucket.delete(key)
+  return true
+}
+
+/**
+ * MIME type guesser fallback.
+ */
+function guessMimeType(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase()
+  switch (ext) {
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg"
+    case "png":
+      return "image/png"
+    case "webp":
+      return "image/webp"
+    case "gif":
+      return "image/gif"
+    case "svg":
+      return "image/svg+xml"
+    case "avif":
+      return "image/avif"
+    case "mp4":
+      return "video/mp4"
+    case "webm":
+      return "video/webm"
+    case "mp3":
+      return "audio/mpeg"
+    case "wav":
+      return "audio/wav"
+    case "pdf":
+      return "application/pdf"
+    case "json":
+      return "application/json"
+    case "txt":
+      return "text/plain"
+    case "zip":
+      return "application/zip"
+    default:
+      return "application/octet-stream"
+  }
+}

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>