@rimelight/cms 0.0.2 → 0.0.3

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

@@ -93,9 +93,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
   return (
     <div class="rimelight-script-editor flex flex-col gap-4 p-3 border-l-2 border-primary/50 w-full">
       <div class="flex flex-col gap-1">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
-          Script Title
-        </span>
+        <span class="text-xs font-bold text-muted uppercase tracking-widest">Script Title</span>
         <RLSInput
           data-field="title"
           value={componentProps.props.title || ""}
@@ -106,9 +104,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
-          Synopsis
-        </span>
+        <span class="text-xs font-bold text-muted uppercase tracking-widest">Synopsis</span>
         <RLSTextarea
           data-field="synopsis"
           value={componentProps.props.synopsis || ""}
@@ -119,12 +115,10 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
-          Characters
-        </span>
+        <span class="text-xs font-bold text-muted uppercase tracking-widest">Characters</span>
         <div class="chars-container flex flex-wrap gap-1.5 mb-1.5 min-h-[24px]">
           {characters().length === 0 ? (
-            <div class="text-xs text-muted-foreground italic py-0.5">No characters added</div>
+            <div class="text-xs text-muted italic py-0.5">No characters added</div>
           ) : (
             <For each={characters()}>
               {(char) => (
@@ -169,7 +163,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">Plots</span>
+        <span class="text-xs font-bold text-muted uppercase tracking-widest">Plots</span>
         <div class="grid grid-cols-3 gap-2">
           <RLSInput
             data-field="aPlot"
@@ -196,9 +190,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
       </div>
 
       <div class="flex flex-col gap-1">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest">
-          Stinger
-        </span>
+        <span class="text-xs font-bold text-muted uppercase tracking-widest">Stinger</span>
         <RLSInput
           data-field="stinger"
           value={componentProps.props.stinger || ""}
@@ -209,7 +201,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
       </div>
 
       <div class="mt-2">
-        <span class="text-xs font-bold text-muted-foreground uppercase tracking-widest block mb-1">
+        <span class="text-xs font-bold text-muted uppercase tracking-widest block mb-1">
           Scenes & Content
         </span>
         <div
@@ -218,7 +210,7 @@ export const ScriptEditor: Component<ScriptEditorProps> = (componentProps) => {
         >
           {childrenBlocks().length === 0 ? (
             <div class="cms-empty-placeholder relative flex flex-col items-center justify-center gap-2 p-3 rounded-lg border border-dashed border-default text-center my-1">
-              <div class="text-xs font-semibold text-muted-foreground">Empty script content</div>
+              <div class="text-xs font-semibold text-muted">Empty script content</div>
               <RLSButton
                 variant="outline"
                 color="neutral"

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

@@ -78,7 +78,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
   return (
     <div class="w-full flex flex-col gap-2 py-0.5">
       <div class="flex items-center gap-2.5">
-        <span class="text-xs font-bold text-muted-foreground select-none shrink-0 tracking-wider">
+        <span class="text-xs font-bold text-muted select-none shrink-0 tracking-wider">
           H{headingLevel()}
         </span>
         <input
@@ -87,7 +87,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
           value={componentProps.props.title || ""}
           onInput={saveProps}
           placeholder="Section Title"
-          class="flex-1 font-bold text-lg bg-transparent border-0 focus:outline-none text-foreground placeholder:text-muted-foreground/60 py-0.5"
+          class="flex-1 font-bold text-lg bg-transparent border-0 focus:outline-none text-highlighted placeholder:text-muted/60 py-0.5"
         />
       </div>
 
@@ -97,7 +97,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
         value={componentProps.props.description || ""}
         onInput={saveProps}
         placeholder="Section description (optional)..."
-        class="text-sm text-muted-foreground bg-transparent border-0 focus:outline-none placeholder:text-muted-foreground/50 py-0.5"
+        class="text-sm text-muted bg-transparent border-0 focus:outline-none placeholder:text-muted/50 py-0.5"
       />
 
       <div
@@ -106,7 +106,7 @@ export const SectionEditor: Component<SectionEditorProps> = (componentProps) =>
       >
         {childrenBlocks().length === 0 ? (
           <div class="flex flex-col items-center justify-center p-3 border border-dashed border-default rounded-lg text-center">
-            <span class="text-xs text-muted-foreground">Empty section</span>
+            <span class="text-xs text-muted">Empty section</span>
             <RLSButton
               variant="link"
               color="primary"

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

@@ -91,11 +91,11 @@ export const StepItemEditor: Component<StepItemEditorProps> = (componentProps) =
 
       <div
         ref={(el) => (childrenContainer = el)}
-        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px] bg-background"
+        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px] bg-neutral-50"
       >
         {childrenBlocks().length === 0 ? (
           <div class="text-center py-2">
-            <span class="text-xs text-muted-foreground block">Empty step content</span>
+            <span class="text-xs text-muted block">Empty step content</span>
             <RLSButton
               variant="link"
               color="primary"

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

@@ -64,9 +64,7 @@ export const StepsEditor: Component<StepsEditorProps> = (componentProps) => {
   return (
     <div class="rimelight-steps-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-          Steps Walkthrough
-        </span>
+        <span class="text-xs font-bold uppercase tracking-wider text-muted">Steps Walkthrough</span>
         <RLSButton
           variant="outline"
           color="neutral"
@@ -83,7 +81,7 @@ export const StepsEditor: Component<StepsEditorProps> = (componentProps) => {
       >
         {childrenBlocks().length === 0 ? (
           <div class="text-center py-3">
-            <span class="text-xs text-muted-foreground block mb-2">No steps in walkthrough</span>
+            <span class="text-xs text-muted block mb-2">No steps in walkthrough</span>
             <RLSButton
               variant="link"
               color="primary"

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

@@ -73,7 +73,7 @@ export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) =>
   return (
     <div class="rimelight-tab-item-editor flex flex-col gap-2 p-3 rounded-lg border border-default bg-muted/10 w-full">
       <div class="flex items-center gap-2">
-        <span class="text-xs font-semibold text-muted-foreground uppercase">Tab Label:</span>
+        <span class="text-xs font-semibold text-muted uppercase">Tab Label:</span>
         <div class="flex-1 max-w-xs">
           <RLSInput
             type="text"
@@ -87,11 +87,11 @@ export const TabItemEditor: Component<TabItemEditorProps> = (componentProps) =>
 
       <div
         ref={(el) => (childrenContainer = el)}
-        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px] bg-background"
+        class="p-2 rounded-lg border border-dashed border-default flex flex-col gap-2 min-h-[36px] bg-neutral-50"
       >
         {childrenBlocks().length === 0 ? (
           <div class="text-center py-2">
-            <span class="text-xs text-muted-foreground block">Empty tab content</span>
+            <span class="text-xs text-muted block">Empty tab content</span>
             <RLSButton
               variant="link"
               color="primary"

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

@@ -78,7 +78,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
   return (
     <div class="rimelight-table-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full overflow-x-auto">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">Table</span>
+        <span class="text-xs font-bold uppercase tracking-wider text-muted">Table</span>
         <div class="flex items-center gap-2">
           <RLSButton
             variant="outline"
@@ -110,7 +110,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
                       <input
                         type="text"
                         aria-label={`Column ${colIdx() + 1} header`}
-                        class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 font-semibold outline-none text-foreground"
+                        class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 font-semibold outline-none text-highlighted"
                         value={col.header}
                         onBlur={(e) => updateHeader(colIdx(), e.currentTarget.value)}
                       />
@@ -118,7 +118,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
                         <button
                           type="button"
                           aria-label="Delete column"
-                          class="text-muted-foreground hover:text-danger p-1 text-xs"
+                          class="text-muted hover:text-danger p-1 text-xs"
                           onClick={() => removeColumn(colIdx())}
                           title="Delete column"
                         >
@@ -142,7 +142,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
                         <input
                           type="text"
                           aria-label={`${col.header} row ${rowIdx() + 1}`}
-                          class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 outline-none text-foreground"
+                          class="w-full bg-transparent border border-transparent hover:border-default focus:border-primary rounded px-2 py-1 outline-none text-highlighted"
                           value={row[col.key] || ""}
                           onBlur={(e) => updateCell(rowIdx(), col.key, e.currentTarget.value)}
                         />
@@ -154,7 +154,7 @@ export const TableEditor: Component<TableEditorProps> = (componentProps) => {
                       <button
                         type="button"
                         aria-label="Delete row"
-                        class="text-muted-foreground hover:text-danger p-1 text-xs"
+                        class="text-muted hover:text-danger p-1 text-xs"
                         onClick={() => removeRow(rowIdx())}
                         title="Delete row"
                       >

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

@@ -64,9 +64,7 @@ export const TabsEditor: Component<TabsEditorProps> = (componentProps) => {
   return (
     <div class="rimelight-tabs-editor flex flex-col gap-3 p-3 rounded-xl border border-default/70 w-full">
       <div class="flex items-center justify-between">
-        <span class="text-xs font-bold uppercase tracking-wider text-muted-foreground">
-          Tabs Container
-        </span>
+        <span class="text-xs font-bold uppercase tracking-wider text-muted">Tabs Container</span>
         <RLSButton
           variant="outline"
           color="neutral"
@@ -83,7 +81,7 @@ export const TabsEditor: Component<TabsEditorProps> = (componentProps) => {
       >
         {childrenBlocks().length === 0 ? (
           <div class="text-center py-3">
-            <span class="text-xs text-muted-foreground block mb-2">No tabs in container</span>
+            <span class="text-xs text-muted block mb-2">No tabs in container</span>
             <RLSButton
               variant="link"
               color="primary"

package/src/client/components/index.ts

@@ -5,3 +5,6 @@ export * from "./RimelightEditorLayout"
 export * from "./RimelightPreview"
 export * from "./RimelightPropertiesPanel"
 export * from "./RimelightTemplateEditor"
+export * from "./RimelightTaxonomyManager"
+export * from "./RimelightBylinesManager"
+export * from "./RimelightTaxonomyMasterDetail"

package/src/client/loader.ts

@@ -8,6 +8,9 @@ export { RimelightPreview } from "./components/RimelightPreview"
 export { RimelightPropertiesPanel } from "./components/RimelightPropertiesPanel"
 export { RimelightBlockPicker } from "./components/RimelightBlockPicker"
 export { RimelightTemplateEditor } from "./components/RimelightTemplateEditor"
+export { RimelightTaxonomyManager } from "./components/RimelightTaxonomyManager"
+export { RimelightBylinesManager } from "./components/RimelightBylinesManager"
+export { RimelightTaxonomyMasterDetail } from "./components/RimelightTaxonomyMasterDetail"
 
 export { ParagraphEditor } from "./components/editors/ParagraphEditor"
 export { CalloutEditor } from "./components/editors/CalloutEditor"

package/src/core/diff.ts

@@ -0,0 +1,145 @@
+import type { BaseBlock } from "./types/blocks"
+
+export type DiffChangeType = "added" | "removed" | "modified" | "unchanged"
+
+export interface BlockDiff {
+  blockId: string
+  type: string
+  status: DiffChangeType
+  oldBlock?: BaseBlock
+  newBlock?: BaseBlock
+  fieldChanges?: {
+    field: string
+    oldValue: any
+    newValue: any
+  }[]
+}
+
+export interface PageVersionDiff {
+  blocks: BlockDiff[]
+  metaChanges: {
+    field: string
+    oldValue: any
+    newValue: any
+  }[]
+  summary: {
+    addedCount: number
+    removedCount: number
+    modifiedCount: number
+    unchangedCount: number
+  }
+}
+
+/**
+ * Calculates a detailed diff between an old list of blocks and a new list of blocks.
+ */
+export function diffBlocks(oldBlocks: BaseBlock[] = [], newBlocks: BaseBlock[] = []): BlockDiff[] {
+  const diffs: BlockDiff[] = []
+  const oldMap = new Map<string, { block: BaseBlock; index: number }>()
+  const newMap = new Map<string, { block: BaseBlock; index: number }>()
+
+  oldBlocks.forEach((block, index) => {
+    oldMap.set(block.id, { block, index })
+  })
+
+  newBlocks.forEach((block, index) => {
+    newMap.set(block.id, { block, index })
+  })
+
+  // Check new blocks (added or modified/unchanged)
+  for (const newBlock of newBlocks) {
+    const oldEntry = oldMap.get(newBlock.id)
+
+    if (!oldEntry) {
+      diffs.push({
+        blockId: newBlock.id,
+        type: newBlock.type,
+        status: "added",
+        newBlock
+      })
+    } else {
+      const oldBlock = oldEntry.block
+      const fieldChanges: { field: string; oldValue: any; newValue: any }[] = []
+
+      const oldProps = (oldBlock as any).props || (oldBlock as any).properties || {}
+      const newProps = (newBlock as any).props || (newBlock as any).properties || {}
+
+      // Compare properties
+      const allPropKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)])
+
+      for (const key of allPropKeys) {
+        const oldVal = oldProps[key]
+        const newVal = newProps[key]
+        if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+          fieldChanges.push({ field: `props.${key}`, oldValue: oldVal, newValue: newVal })
+        }
+      }
+
+      if (fieldChanges.length > 0) {
+        diffs.push({
+          blockId: newBlock.id,
+          type: newBlock.type,
+          status: "modified",
+          oldBlock,
+          newBlock,
+          fieldChanges
+        })
+      } else {
+        diffs.push({
+          blockId: newBlock.id,
+          type: newBlock.type,
+          status: "unchanged",
+          oldBlock,
+          newBlock
+        })
+      }
+    }
+  }
+
+  // Check for removed blocks
+  for (const oldBlock of oldBlocks) {
+    if (!newMap.has(oldBlock.id)) {
+      diffs.push({
+        blockId: oldBlock.id,
+        type: oldBlock.type,
+        status: "removed",
+        oldBlock
+      })
+    }
+  }
+
+  return diffs
+}
+
+/**
+ * Compares two page snapshots (metadata + content blocks).
+ */
+export function diffPageSnapshots(oldSnapshot: any, newSnapshot: any): PageVersionDiff {
+  const oldBlocks = oldSnapshot?.content?.blocks || []
+  const newBlocks = newSnapshot?.content?.blocks || []
+  const blockDiffs = diffBlocks(oldBlocks, newBlocks)
+
+  const metaFields = ["title", "slug", "description", "tags", "type", "authorIds", "bylines"]
+  const metaChanges: { field: string; oldValue: any; newValue: any }[] = []
+
+  for (const field of metaFields) {
+    const oldVal = oldSnapshot?.[field]
+    const newVal = newSnapshot?.[field]
+    if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+      metaChanges.push({ field, oldValue: oldVal, newValue: newVal })
+    }
+  }
+
+  const summary = {
+    addedCount: blockDiffs.filter((d) => d.status === "added").length,
+    removedCount: blockDiffs.filter((d) => d.status === "removed").length,
+    modifiedCount: blockDiffs.filter((d) => d.status === "modified").length,
+    unchangedCount: blockDiffs.filter((d) => d.status === "unchanged").length
+  }
+
+  return {
+    blocks: blockDiffs,
+    metaChanges,
+    summary
+  }
+}

package/src/core/excerpt.ts

@@ -0,0 +1,159 @@
+import type { BaseBlock } from "./types/blocks.ts"
+import type { InlineNode } from "./types/inline.ts"
+
+function extractTextFromInlineNodes(nodes: InlineNode[] | undefined | null): string {
+  if (!nodes || !Array.isArray(nodes)) return ""
+  return nodes
+    .map((node) => {
+      if (node.type === "text") return node.text || ""
+      if (node.type === "page_mention") return node.displayTitle || node.pageSlug || ""
+      if (node.type === "link") return extractTextFromInlineNodes(node.children)
+      return ""
+    })
+    .join("")
+}
+
+function extractTextFromProperty(prop: unknown, locale: string = "en"): string {
+  if (!prop) return ""
+  if (typeof prop === "string") return prop
+  if (typeof prop === "object" && prop !== null) {
+    if (Array.isArray(prop)) {
+      return extractTextFromInlineNodes(prop as InlineNode[])
+    }
+    const record = prop as Record<string, unknown>
+    if (typeof record[locale] === "string") return record[locale] as string
+    if (typeof record.en === "string") return record.en as string
+    const firstVal = Object.values(record)[0]
+    if (typeof firstVal === "string") return firstVal
+  }
+  return ""
+}
+
+/**
+ * Recursively extracts plain text from an array of CMS blocks.
+ */
+export function extractTextFromBlocks(
+  blocks: BaseBlock[] | undefined | null,
+  locale: string = "en"
+): string {
+  if (!blocks || !Array.isArray(blocks)) return ""
+
+  const chunks: string[] = []
+
+  for (const block of blocks) {
+    if (!block) continue
+
+    const props = block.props || {}
+
+    switch (block.type) {
+      case "ParagraphBlock": {
+        const text = extractTextFromProperty(props.text, locale)
+        if (text) chunks.push(text)
+        break
+      }
+      case "SectionBlock": {
+        if (props.title) chunks.push(String(props.title))
+        if (props.description) chunks.push(String(props.description))
+        if (Array.isArray(props.children)) {
+          const childText = extractTextFromBlocks(props.children, locale)
+          if (childText) chunks.push(childText)
+        }
+        break
+      }
+      case "CardBlock": {
+        if (props.title) chunks.push(String(props.title))
+        if (props.description) chunks.push(String(props.description))
+        break
+      }
+      case "DialogueBlock": {
+        if (props.character && props.line) {
+          chunks.push(`${props.character}: ${props.line}`)
+        } else if (props.line) {
+          chunks.push(String(props.line))
+        }
+        break
+      }
+      case "StepItemBlock": {
+        if (props.title) chunks.push(String(props.title))
+        if (props.description) chunks.push(String(props.description))
+        break
+      }
+      default:
+        break
+    }
+
+    if (Array.isArray(block.children) && block.children.length > 0) {
+      const childText = extractTextFromBlocks(block.children, locale)
+      if (childText) chunks.push(childText)
+    }
+  }
+
+  return chunks.join(" ").replace(/\s+/g, " ").trim()
+}
+
+export interface ExcerptOptions {
+  maxLength?: number
+  locale?: string
+  fallback?: string
+}
+
+/**
+ * Generates an SEO / RSS safe plain text excerpt from a CMS page or block payload.
+ */
+export function createPageExcerpt(
+  page:
+    | {
+        description?: unknown
+        content?: unknown
+        title?: unknown
+      }
+    | null
+    | undefined,
+  options: ExcerptOptions = {}
+): string {
+  const { maxLength = 160, locale = "en", fallback = "" } = options
+
+  if (!page) return fallback
+
+  // 1. First priority: explicit localized description
+  const explicitDesc = extractTextFromProperty(page.description, locale)
+  if (explicitDesc) {
+    return truncateExcerpt(explicitDesc, maxLength)
+  }
+
+  // 2. Second priority: content properties description
+  let contentObj = page.content
+  if (typeof contentObj === "string") {
+    try {
+      contentObj = JSON.parse(contentObj)
+    } catch {
+      contentObj = null
+    }
+  }
+
+  if (contentObj && typeof contentObj === "object") {
+    const props = (contentObj as { properties?: Record<string, unknown> }).properties
+    if (props && props.description) {
+      const descText = extractTextFromProperty(props.description, locale)
+      if (descText) return truncateExcerpt(descText, maxLength)
+    }
+
+    // 3. Third priority: extract from blocks
+    const blocks = (contentObj as { blocks?: BaseBlock[] }).blocks
+    if (Array.isArray(blocks) && blocks.length > 0) {
+      const extracted = extractTextFromBlocks(blocks, locale)
+      if (extracted) return truncateExcerpt(extracted, maxLength)
+    }
+  }
+
+  return fallback
+}
+
+function truncateExcerpt(text: string, maxLength: number): string {
+  const clean = text
+    .replace(/<[^>]*>/g, "")
+    .replace(/\s+/g, " ")
+    .trim()
+  if (clean.length <= maxLength) return clean
+  return `${clean.slice(0, maxLength - 1).trimEnd()}…`
+}

package/src/core/preview.ts

@@ -0,0 +1,87 @@
+/**
+ * Generates and verifies HMAC-signed stateless preview tokens for draft pages.
+ */
+
+async function getCryptoKey(secret: string): Promise<CryptoKey> {
+  const enc = new TextEncoder()
+  return crypto.subtle.importKey(
+    "raw",
+    enc.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign", "verify"]
+  )
+}
+
+function hexEncode(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer)
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("")
+}
+
+function hexDecode(hex: string): Uint8Array {
+  const matches = hex.match(/.{1,2}/g) || []
+  return new Uint8Array(matches.map((byte) => parseInt(byte, 16)))
+}
+
+/**
+ * Generates a signed token for a page ID valid for ttlSeconds (default 24h).
+ */
+export async function generatePreviewToken(
+  pageId: string,
+  secret: string,
+  ttlSeconds = 86400
+): Promise<{ token: string; expiresAt: number }> {
+  const expiresAt = Math.floor(Date.now() / 1000) + ttlSeconds
+  const payload = `${pageId}:${expiresAt}`
+
+  const key = await getCryptoKey(secret)
+  const enc = new TextEncoder()
+  const signatureBuffer = await crypto.subtle.sign("HMAC", key, enc.encode(payload))
+  const signature = hexEncode(signatureBuffer)
+
+  // Token format: base64(payload).signature
+  const token = `${btoa(payload)}.${signature}`
+  return { token, expiresAt }
+}
+
+/**
+ * Verifies a signed preview token against a pageId and secret.
+ */
+export async function verifyPreviewToken(
+  pageId: string,
+  token: string,
+  secret: string
+): Promise<boolean> {
+  try {
+    const parts = token.split(".")
+    if (parts.length !== 2) return false
+
+    const [b64Payload, signatureHex] = parts
+    if (!b64Payload || !signatureHex) return false
+
+    const payload = atob(b64Payload)
+    const [tokenPageId, tokenExpStr] = payload.split(":")
+    if (!tokenPageId || !tokenExpStr) return false
+
+    if (tokenPageId !== pageId) return false
+
+    const expiresAt = parseInt(tokenExpStr, 10)
+    const now = Math.floor(Date.now() / 1000)
+    if (isNaN(expiresAt) || now > expiresAt) return false
+
+    const key = await getCryptoKey(secret)
+    const enc = new TextEncoder()
+    const signatureBytes = hexDecode(signatureHex)
+
+    return await crypto.subtle.verify(
+      "HMAC",
+      key,
+      signatureBytes as unknown as BufferSource,
+      enc.encode(payload)
+    )
+  } catch {
+    return false
+  }
+}