@setzkasten-cms/ui 0.4.2

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@setzkasten-cms/ui",
+  "version": "0.4.2",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./styles/admin.css": "./src/styles/admin.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tiptap/extension-link": "^3.20.1",
+    "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-text-align": "^3.20.1",
+    "@tiptap/pm": "^3.20.1",
+    "@tiptap/react": "^3.20.1",
+    "@tiptap/starter-kit": "^3.20.1",
+    "immer": "^10.2.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.0",
+    "@setzkasten-cms/core": "0.4.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/adapters/proxy-asset-store.ts

@@ -0,0 +1,210 @@
+import {
+  ok,
+  err,
+  networkError,
+  type AssetStore,
+  type AssetMetadata,
+  type Result,
+} from '@setzkasten-cms/core'
+
+export interface ProxyAssetConfig {
+  /** Base URL of the Setzkasten GitHub proxy */
+  proxyBaseUrl: string
+  /** GitHub owner */
+  owner: string
+  /** GitHub repo */
+  repo: string
+  /** Branch */
+  branch: string
+  /** Base path for assets in the repo, e.g. 'public/images' */
+  assetsPath?: string
+  /** Public URL prefix for assets, e.g. '/images' */
+  publicUrlPrefix?: string
+}
+
+/**
+ * Asset store that uploads files to GitHub via the server-side proxy.
+ * Preserves original filenames (Setzkasten principle).
+ */
+export class ProxyAssetStore implements AssetStore {
+  private baseUrl: string
+  private owner: string
+  private repo: string
+  private branch: string
+  private assetsPath: string
+  private publicUrlPrefix: string
+
+  constructor(config: ProxyAssetConfig) {
+    this.baseUrl = config.proxyBaseUrl.replace(/\/$/, '')
+    this.owner = config.owner
+    this.repo = config.repo
+    this.branch = config.branch
+    this.assetsPath = config.assetsPath ?? 'public/images'
+    this.publicUrlPrefix = config.publicUrlPrefix ?? '/images'
+  }
+
+  private apiUrl(path: string): string {
+    return `${this.baseUrl}/repos/${this.owner}/${this.repo}/${path}`
+  }
+
+  async upload(
+    directory: string,
+    filename: string,
+    content: Uint8Array,
+    mimeType: string,
+  ): Promise<Result<AssetMetadata>> {
+    try {
+      const dir = directory.replace(/^\/+|\/+$/g, '')
+      const repoPath = `${this.assetsPath}/${dir}/${filename}`
+      const base64Content = this.uint8ToBase64(content)
+
+      const response = await fetch(this.apiUrl(`contents/${repoPath}`), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Upload ${filename}`,
+          content: base64Content,
+          branch: this.branch,
+        }),
+      })
+
+      if (!response.ok) {
+        const text = await response.text()
+        return err(networkError(`Upload failed: HTTP ${response.status} - ${text}`, null))
+      }
+
+      return ok({
+        path: repoPath,
+        size: content.byteLength,
+        mimeType,
+      })
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Upload failed', error))
+    }
+  }
+
+  async delete(path: string): Promise<Result<void>> {
+    try {
+      // Get file SHA first
+      const fileResponse = await fetch(
+        this.apiUrl(`contents/${path}?ref=${this.branch}`),
+      )
+
+      if (!fileResponse.ok) {
+        return err(networkError(`File not found: ${path}`, null))
+      }
+
+      const fileData = (await fileResponse.json()) as { sha: string }
+
+      const response = await fetch(this.apiUrl(`contents/${path}`), {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Delete ${path}`,
+          sha: fileData.sha,
+          branch: this.branch,
+        }),
+      })
+
+      if (!response.ok) {
+        return err(networkError(`Delete failed: HTTP ${response.status}`, null))
+      }
+
+      return ok(undefined)
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Delete failed', error))
+    }
+  }
+
+  async list(directory: string): Promise<Result<AssetMetadata[]>> {
+    try {
+      const dirPath = `${this.assetsPath}/${directory}`.replace(/\/+$/, '')
+      return await this.listRecursive(dirPath)
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'List failed', error))
+    }
+  }
+
+  private async listRecursive(dirPath: string): Promise<Result<AssetMetadata[]>> {
+    const response = await fetch(
+      this.apiUrl(`contents/${dirPath}?ref=${this.branch}`),
+    )
+
+    if (!response.ok) {
+      if (response.status === 404) return ok([])
+      return err(networkError(`HTTP ${response.status}`, null))
+    }
+
+    const data = (await response.json()) as Array<{
+      name: string
+      path: string
+      size: number
+      type: string
+    }>
+
+    const files: AssetMetadata[] = data
+      .filter((item) => item.type === 'file' && this.isImageFile(item.name))
+      .map((item) => ({
+        path: item.path,
+        size: item.size,
+        mimeType: this.guessMimeType(item.name),
+      }))
+
+    // Recurse into subdirectories
+    const dirs = data.filter((item) => item.type === 'dir')
+    for (const dir of dirs) {
+      const subResult = await this.listRecursive(dir.path)
+      if (subResult.ok) {
+        files.push(...subResult.value)
+      }
+    }
+
+    return ok(files)
+  }
+
+  private isImageFile(name: string): boolean {
+    const ext = name.split('.').pop()?.toLowerCase() ?? ''
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext)
+  }
+
+  getUrl(path: string): string {
+    // Convert repo path to public URL
+    // e.g. 'public/images/hero/bg.jpg' → '/images/hero/bg.jpg'
+    if (path.startsWith(this.assetsPath)) {
+      return this.publicUrlPrefix + path.slice(this.assetsPath.length)
+    }
+    return path
+  }
+
+  getPreviewUrl(path: string): string {
+    // If path is a public URL (e.g. /images/about/pic.jpg), convert to repo path first
+    const repoPath = path.startsWith(this.publicUrlPrefix)
+      ? this.assetsPath + path.slice(this.publicUrlPrefix.length)
+      : path
+    // Proxy through our authenticated asset endpoint (works for private repos)
+    return `/api/setzkasten/asset/${repoPath}`
+  }
+
+  private uint8ToBase64(bytes: Uint8Array): string {
+    let binary = ''
+    for (let i = 0; i < bytes.length; i++) {
+      binary += String.fromCharCode(bytes[i]!)
+    }
+    return btoa(binary)
+  }
+
+  private guessMimeType(filename: string): string {
+    const ext = filename.split('.').pop()?.toLowerCase()
+    const mimeTypes: Record<string, string> = {
+      jpg: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      png: 'image/png',
+      gif: 'image/gif',
+      webp: 'image/webp',
+      avif: 'image/avif',
+      svg: 'image/svg+xml',
+      pdf: 'application/pdf',
+    }
+    return mimeTypes[ext ?? ''] ?? 'application/octet-stream'
+  }
+}

package/src/adapters/proxy-content-repository.ts

@@ -0,0 +1,259 @@
+import {
+  ok,
+  err,
+  networkError,
+  conflictError,
+  type ContentRepository,
+  type EntryData,
+  type EntryListItem,
+  type Asset,
+  type CommitResult,
+  type TreeNode,
+  type Result,
+} from '@setzkasten-cms/core'
+
+export interface ProxyConfig {
+  /** Base URL of the Setzkasten API proxy, e.g. '/api/setzkasten/github' */
+  proxyBaseUrl: string
+  /** GitHub owner */
+  owner: string
+  /** GitHub repo name */
+  repo: string
+  /** Branch to operate on */
+  branch: string
+  /** Base path within the repo for content files, e.g. 'src/content' */
+  contentPath?: string
+}
+
+/**
+ * Client-side ContentRepository that calls the server-side GitHub proxy.
+ * The GitHub token never leaves the server – all API calls go through
+ * /api/setzkasten/github/[...path].
+ */
+export class ProxyContentRepository implements ContentRepository {
+  private baseUrl: string
+  private owner: string
+  private repo: string
+  private branch: string
+  private contentPath: string
+
+  constructor(config: ProxyConfig) {
+    this.baseUrl = config.proxyBaseUrl.replace(/\/$/, '')
+    this.owner = config.owner
+    this.repo = config.repo
+    this.branch = config.branch
+    this.contentPath = config.contentPath ?? 'src/content'
+  }
+
+  private apiUrl(path: string): string {
+    return `${this.baseUrl}/repos/${this.owner}/${this.repo}/${path}`
+  }
+
+  private contentFilePath(collection: string, slug: string): string {
+    return `${this.contentPath}/${collection}/${slug}.json`
+  }
+
+  async listEntries(collection: string): Promise<Result<EntryListItem[]>> {
+    try {
+      const dirPath = `${this.contentPath}/${collection}`
+      const response = await fetch(
+        this.apiUrl(`contents/${dirPath}?ref=${this.branch}`),
+      )
+
+      if (!response.ok) {
+        if (response.status === 404) return ok([])
+        return err(networkError(`HTTP ${response.status}`, null))
+      }
+
+      const data = (await response.json()) as Array<{ name: string; sha: string; type: string }>
+
+      return ok(
+        data
+          .filter((item) => item.name.endsWith('.json'))
+          .map((item) => ({
+            slug: item.name.replace(/\.json$/, ''),
+            name: item.name.replace(/\.json$/, ''),
+          })),
+      )
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Network error', error))
+    }
+  }
+
+  async getEntry(collection: string, slug: string): Promise<Result<EntryData>> {
+    try {
+      const filePath = this.contentFilePath(collection, slug)
+      const response = await fetch(
+        this.apiUrl(`contents/${filePath}?ref=${this.branch}`),
+      )
+
+      if (!response.ok) {
+        return err(networkError(`HTTP ${response.status}`, null))
+      }
+
+      const data = (await response.json()) as { content: string; sha: string; encoding: string }
+
+      const binary = atob(data.content.replace(/\n/g, ''))
+      const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0))
+      const decoded = new TextDecoder().decode(bytes)
+      const content = JSON.parse(decoded) as Record<string, unknown>
+
+      return ok({ content, sha: data.sha })
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Network error', error))
+    }
+  }
+
+  async saveEntry(
+    collection: string,
+    slug: string,
+    data: EntryData,
+    assets?: Asset[],
+  ): Promise<Result<CommitResult>> {
+    try {
+      // Upload assets first (if any)
+      if (assets && assets.length > 0) {
+        for (const asset of assets) {
+          const assetResult = await this.uploadAsset(asset)
+          if (!assetResult.ok) return assetResult as Result<never>
+        }
+      }
+
+      // Save the JSON content file
+      const filePath = this.contentFilePath(collection, slug)
+      const jsonContent = JSON.stringify(data.content, null, 2)
+      const base64Content = btoa(unescape(encodeURIComponent(jsonContent)))
+
+      const body: Record<string, unknown> = {
+        message: `Update ${collection}/${slug}`,
+        content: base64Content,
+        branch: this.branch,
+      }
+
+      // Include SHA for conflict detection (update existing file)
+      if (data.sha) {
+        body.sha = data.sha
+      }
+
+      const response = await fetch(this.apiUrl(`contents/${filePath}`), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+
+      if (!response.ok) {
+        if (response.status === 409) {
+          return err(conflictError('Concurrent edit detected. The file was modified since you loaded it.'))
+        }
+        const text = await response.text()
+        return err(networkError(`Save failed: HTTP ${response.status} - ${text}`, null))
+      }
+
+      const result = (await response.json()) as {
+        content: { sha: string }
+        commit: { sha: string; html_url: string }
+      }
+
+      return ok({
+        sha: result.content.sha,
+        message: `Update ${collection}/${slug}`,
+        url: result.commit.html_url,
+      })
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Save failed', error))
+    }
+  }
+
+  async deleteEntry(collection: string, slug: string): Promise<Result<CommitResult>> {
+    try {
+      const entryResult = await this.getEntry(collection, slug)
+      if (!entryResult.ok) return entryResult as Result<never>
+
+      const filePath = this.contentFilePath(collection, slug)
+
+      const response = await fetch(this.apiUrl(`contents/${filePath}`), {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Delete ${collection}/${slug}`,
+          sha: entryResult.value.sha,
+          branch: this.branch,
+        }),
+      })
+
+      if (!response.ok) {
+        return err(networkError(`Delete failed: HTTP ${response.status}`, null))
+      }
+
+      const result = (await response.json()) as { commit: { sha: string } }
+
+      return ok({
+        sha: result.commit.sha,
+        message: `Delete ${collection}/${slug}`,
+      })
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Delete failed', error))
+    }
+  }
+
+  async getTree(ref?: string): Promise<Result<TreeNode[]>> {
+    try {
+      const response = await fetch(
+        this.apiUrl(`git/trees/${ref ?? this.branch}?recursive=1`),
+      )
+
+      if (!response.ok) {
+        return err(networkError(`HTTP ${response.status}`, null))
+      }
+
+      const data = (await response.json()) as {
+        tree: Array<{ path: string; type: string; sha: string }>
+      }
+
+      return ok(
+        data.tree
+          .filter((item) => item.path.startsWith(this.contentPath))
+          .map((item) => ({
+            path: item.path,
+            type: item.type === 'tree' ? 'dir' as const : 'file' as const,
+            sha: item.sha,
+          })),
+      )
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Network error', error))
+    }
+  }
+
+  private async uploadAsset(asset: Asset): Promise<Result<{ sha: string }>> {
+    try {
+      const base64Content = this.uint8ToBase64(asset.content)
+
+      const response = await fetch(this.apiUrl(`contents/${asset.path}`), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Upload ${asset.path}`,
+          content: base64Content,
+          branch: this.branch,
+        }),
+      })
+
+      if (!response.ok) {
+        return err(networkError(`Asset upload failed: HTTP ${response.status}`, null))
+      }
+
+      const result = (await response.json()) as { content: { sha: string } }
+      return ok({ sha: result.content.sha })
+    } catch (error) {
+      return err(networkError(error instanceof Error ? error.message : 'Upload failed', error))
+    }
+  }
+
+  private uint8ToBase64(bytes: Uint8Array): string {
+    let binary = ''
+    for (let i = 0; i < bytes.length; i++) {
+      binary += String.fromCharCode(bytes[i]!)
+    }
+    return btoa(binary)
+  }
+}