@setzkasten-cms/ui 0.4.2

package/src/components/toast.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback, createContext, useContext } from 'react'
+
+type ToastType = 'success' | 'error' | 'info'
+
+interface Toast {
+  id: number
+  message: string
+  type: ToastType
+}
+
+interface ToastContextValue {
+  toast: (message: string, type?: ToastType) => void
+}
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} })
+
+export function useToast() {
+  return useContext(ToastContext)
+}
+
+let nextId = 0
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const toast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = nextId++
+    setToasts(prev => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id))
+    }, 3000)
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      {toasts.length > 0 && (
+        <div className="sk-toast-container">
+          {toasts.map(t => (
+            <div key={t.id} className={`sk-toast sk-toast--${t.type}`}>
+              {t.message}
+            </div>
+          ))}
+        </div>
+      )}
+    </ToastContext.Provider>
+  )
+}

package/src/fields/array-field-renderer.tsx

@@ -0,0 +1,101 @@
+import { memo, useCallback } from 'react'
+import type { ArrayFieldDef, AnyFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import { FieldRenderer, type FieldRendererProps } from './field-renderer'
+
+export const ArrayFieldRenderer = memo(function ArrayFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const arrayField = field as ArrayFieldDef
+  const { value, setValue } = useField(store, path)
+
+  const items = (value as unknown[]) ?? []
+
+  const addItem = useCallback(() => {
+    const defaultValue = arrayField.itemField.defaultValue ?? (
+      arrayField.itemField.type === 'object' ? {} :
+      arrayField.itemField.type === 'text' ? '' :
+      arrayField.itemField.type === 'number' ? 0 :
+      arrayField.itemField.type === 'boolean' ? false :
+      null
+    )
+    setValue([...items, defaultValue])
+  }, [items, arrayField.itemField, setValue])
+
+  const removeItem = useCallback(
+    (index: number) => {
+      setValue(items.filter((_, i) => i !== index))
+    },
+    [items, setValue],
+  )
+
+  const moveItem = useCallback(
+    (from: number, to: number) => {
+      const newItems = [...items]
+      const [moved] = newItems.splice(from, 1)
+      newItems.splice(to, 0, moved)
+      setValue(newItems)
+    },
+    [items, setValue],
+  )
+
+  const canAdd = arrayField.maxItems === undefined || items.length < arrayField.maxItems
+  const canRemove = arrayField.minItems === undefined || items.length > arrayField.minItems
+
+  return (
+    <div className="sk-field sk-field--array">
+      <div className="sk-array__header">
+        <label className="sk-field__label">
+          {arrayField.label}
+          <span className="sk-array__count">({items.length})</span>
+        </label>
+      </div>
+
+      <div className="sk-array__items">
+        {items.map((_, index) => {
+          const itemLabel = arrayField.itemLabel
+            ? arrayField.itemLabel(items[index], index)
+            : `#${index + 1}`
+
+          return (
+            <div key={index} className="sk-array__item">
+              <div className="sk-array__item-header">
+                <span className="sk-array__item-label">{itemLabel}</span>
+                <div className="sk-array__item-actions">
+                  {index > 0 && (
+                    <button type="button" className="sk-button sk-button--sm" onClick={() => moveItem(index, index - 1)} title="Nach oben">
+                      ↑
+                    </button>
+                  )}
+                  {index < items.length - 1 && (
+                    <button type="button" className="sk-button sk-button--sm" onClick={() => moveItem(index, index + 1)} title="Nach unten">
+                      ↓
+                    </button>
+                  )}
+                  {canRemove && (
+                    <button type="button" className="sk-button sk-button--sm sk-button--danger" onClick={() => removeItem(index)} title="Entfernen">
+                      ×
+                    </button>
+                  )}
+                </div>
+              </div>
+              <FieldRenderer
+                field={arrayField.itemField as AnyFieldDef}
+                path={[...path, index]}
+                store={store}
+              />
+            </div>
+          )
+        })}
+      </div>
+
+      {canAdd && (
+        <button type="button" className="sk-button sk-button--sm sk-array__add" onClick={addItem}>
+          + Hinzufügen
+        </button>
+      )}
+    </div>
+  )
+})

package/src/fields/boolean-field-renderer.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import type { BooleanFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+export const BooleanFieldRenderer = memo(function BooleanFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const boolField = field as BooleanFieldDef
+  const { value, setValue } = useField(store, path)
+
+  return (
+    <div className="sk-field sk-field--boolean">
+      <label className="sk-field__toggle">
+        <input
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(e) => setValue(e.target.checked)}
+          aria-label={boolField.label}
+        />
+        <span className="sk-field__toggle-label">{boolField.label}</span>
+      </label>
+      {boolField.description && <p className="sk-field__description">{boolField.description}</p>}
+    </div>
+  )
+})

package/src/fields/field-renderer.tsx

@@ -0,0 +1,60 @@
+import { memo, type ComponentType } from 'react'
+import type { AnyFieldDef, FieldDefinition, FieldPath, FieldType } from '@setzkasten-cms/core'
+import { TextFieldRenderer } from './text-field-renderer'
+import { NumberFieldRenderer } from './number-field-renderer'
+import { BooleanFieldRenderer } from './boolean-field-renderer'
+import { SelectFieldRenderer } from './select-field-renderer'
+import { IconFieldRenderer } from './icon-field-renderer'
+import { ArrayFieldRenderer } from './array-field-renderer'
+import { ObjectFieldRenderer } from './object-field-renderer'
+import { ImageFieldRenderer } from './image-field-renderer'
+import { OverrideFieldRenderer } from './override-field-renderer'
+import type { createFormStore } from '../stores/form-store'
+
+// ---------------------------------------------------------------------------
+// Field renderer props (shared by all renderers)
+// ---------------------------------------------------------------------------
+
+export interface FieldRendererProps {
+  field: AnyFieldDef
+  path: FieldPath
+  store: ReturnType<typeof createFormStore>
+}
+
+// ---------------------------------------------------------------------------
+// Renderer registry (Strategy Pattern via type map)
+// ---------------------------------------------------------------------------
+
+const rendererMap: Partial<Record<FieldType, ComponentType<FieldRendererProps>>> = {
+  text: TextFieldRenderer,
+  number: NumberFieldRenderer,
+  boolean: BooleanFieldRenderer,
+  select: SelectFieldRenderer,
+  icon: IconFieldRenderer,
+  array: ArrayFieldRenderer,
+  object: ObjectFieldRenderer,
+  image: ImageFieldRenderer,
+  override: OverrideFieldRenderer,
+}
+
+/**
+ * Generic field renderer – looks up the correct component by field type.
+ * Adding a new field type = adding an entry to rendererMap.
+ */
+export const FieldRenderer = memo(function FieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const Renderer = rendererMap[field.type]
+
+  if (!Renderer) {
+    return (
+      <div style={{ color: '#ef4444', padding: '8px', fontSize: '14px' }}>
+        Unknown field type: {field.type}
+      </div>
+    )
+  }
+
+  return <Renderer field={field} path={path} store={store} />
+})

package/src/fields/icon-field-renderer.tsx

@@ -0,0 +1,130 @@
+import { memo, useState, useMemo, useCallback, useRef, useEffect } from 'react'
+import { icons, type LucideIcon } from 'lucide-react'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+/** Convert PascalCase icon name to kebab-case for storage */
+function toKebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/** Convert kebab-case to PascalCase for lookup */
+function toPascal(name: string): string {
+  return name.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase())
+}
+
+/** All icon entries: [kebabName, PascalName, Component] */
+const ALL_ICONS: [string, string, LucideIcon][] = Object.entries(icons).map(
+  ([pascal, comp]) => [toKebab(pascal), pascal, comp],
+)
+
+const MAX_VISIBLE = 120
+
+export const IconFieldRenderer = memo(function IconFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const { value, errors, setValue } = useField(store, path)
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const searchRef = useRef<HTMLInputElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const currentValue = (value as string) ?? ''
+  const CurrentIcon = currentValue ? ((icons as Record<string, LucideIcon>)[toPascal(currentValue)] ?? null) : null
+
+  const filtered = useMemo(() => {
+    if (!search) return ALL_ICONS.slice(0, MAX_VISIBLE)
+    const q = search.toLowerCase()
+    return ALL_ICONS.filter(([kebab]) => kebab.includes(q)).slice(0, MAX_VISIBLE)
+  }, [search])
+
+  const selectIcon = useCallback(
+    (kebab: string) => {
+      setValue(kebab)
+      setOpen(false)
+      setSearch('')
+    },
+    [setValue],
+  )
+
+  // Focus search when opening
+  useEffect(() => {
+    if (open) searchRef.current?.focus()
+  }, [open])
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        setSearch('')
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  return (
+    <div className="sk-field sk-field--icon">
+      <label className="sk-field__label">{field.label}</label>
+      {field.description && (
+        <p className="sk-field__description">{field.description}</p>
+      )}
+
+      <button
+        type="button"
+        className="sk-icon-picker__trigger"
+        onClick={() => setOpen(!open)}
+      >
+        {CurrentIcon ? (
+          <>
+            <CurrentIcon size={20} />
+            <span>{currentValue}</span>
+          </>
+        ) : (
+          <span className="sk-icon-picker__placeholder">Icon wählen...</span>
+        )}
+      </button>
+
+      {open && (
+        <div className="sk-icon-picker__panel" ref={panelRef}>
+          <input
+            ref={searchRef}
+            type="text"
+            className="sk-icon-picker__search"
+            placeholder="Icon suchen..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <div className="sk-icon-picker__grid">
+            {filtered.map(([kebab, , Icon]) => (
+              <button
+                key={kebab}
+                type="button"
+                className={`sk-icon-picker__item${kebab === currentValue ? ' sk-icon-picker__item--active' : ''}`}
+                onClick={() => selectIcon(kebab)}
+                title={kebab}
+              >
+                <Icon size={20} />
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <p className="sk-icon-picker__empty">Kein Icon gefunden</p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {errors.length > 0 && (
+        <div className="sk-field__errors">
+          {errors.map((err, i) => (
+            <p key={i} className="sk-field__error">{err}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

package/src/fields/image-field-renderer.tsx

@@ -0,0 +1,266 @@
+import { memo, useCallback, useRef, useState } from 'react'
+import type { ImageFieldDef, ImageValue, AssetMetadata } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import { useAssets } from '../providers/setzkasten-provider'
+import type { FieldRendererProps } from './field-renderer'
+
+/** Helper: get a preview URL that works in the admin (raw GitHub), falling back to public URL */
+function previewUrl(assets: { getUrl(p: string): string; getPreviewUrl?(p: string): string }, path: string): string {
+  return assets.getPreviewUrl?.(path) ?? assets.getUrl(path)
+}
+
+/** Convert image File to WebP using Canvas API. Skips SVG, GIF, and already-WebP/AVIF files. */
+async function compressToWebP(file: File, quality = 0.85): Promise<{ bytes: Uint8Array; filename: string; mimeType: string }> {
+  const skipTypes = ['image/svg+xml', 'image/gif', 'image/webp', 'image/avif']
+  if (skipTypes.includes(file.type)) {
+    return { bytes: new Uint8Array(await file.arrayBuffer()), filename: file.name, mimeType: file.type }
+  }
+
+  const bitmap = await createImageBitmap(file)
+  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
+  const ctx = canvas.getContext('2d')!
+  ctx.drawImage(bitmap, 0, 0)
+  bitmap.close()
+
+  const blob = await canvas.convertToBlob({ type: 'image/webp', quality })
+  const webpName = file.name.replace(/\.(jpe?g|png|bmp|tiff?)$/i, '.webp')
+  return { bytes: new Uint8Array(await blob.arrayBuffer()), filename: webpName, mimeType: 'image/webp' }
+}
+
+export const ImageFieldRenderer = memo(function ImageFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const imgField = field as ImageFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+  const assets = useAssets()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+  const [dragOver, setDragOver] = useState(false)
+  const [showBrowser, setShowBrowser] = useState(false)
+  const [browserScope, setBrowserScope] = useState<'directory' | 'all'>('directory')
+  const [existing, setExisting] = useState<AssetMetadata[]>([])
+  const [loadingExisting, setLoadingExisting] = useState(false)
+
+  const imageValue = value as ImageValue | undefined
+  const acceptStr = imgField.accept.map((ext) => `.${ext}`).join(',')
+
+  // For the selected image thumbnail: use asset proxy for authenticated preview
+  const selectedThumbUrl = imageValue?.path && assets.getPreviewUrl
+    ? assets.getPreviewUrl(imageValue.path)
+    : imageValue?.path || undefined
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      setUploading(true)
+      try {
+        const { bytes, filename, mimeType } = await compressToWebP(file)
+        const result = await assets.upload(imgField.directory, filename, bytes, mimeType)
+        if (result.ok) {
+          const publicUrl = assets.getUrl(result.value.path)
+          setValue({ path: publicUrl, alt: imageValue?.alt ?? '' })
+        } else {
+          const dir = imgField.directory.replace(/^\/+|\/+$/g, '')
+          const publicUrl = assets.getUrl(`public/images/${dir}/${filename}`)
+          setValue({ path: publicUrl, alt: imageValue?.alt ?? '' })
+        }
+      } catch {
+        const dir = imgField.directory.replace(/^\/+|\/+$/g, '')
+        const publicUrl = assets.getUrl(`public/images/${dir}/${file.name}`)
+        setValue({ path: publicUrl, alt: imageValue?.alt ?? '' })
+      }
+      setUploading(false)
+      touch()
+    },
+    [assets, imgField.directory, imageValue?.alt, setValue, touch],
+  )
+
+  const loadExisting = useCallback(async (scope: 'directory' | 'all') => {
+    setLoadingExisting(true)
+    setBrowserScope(scope)
+    try {
+      const dir = scope === 'all' ? '' : imgField.directory
+      const result = await assets.list(dir)
+      if (result.ok) {
+        setExisting(result.value)
+      }
+    } catch {
+      // ignore
+    }
+    setLoadingExisting(false)
+  }, [assets, imgField.directory])
+
+  const handleBrowse = useCallback(() => {
+    setShowBrowser(true)
+    loadExisting('directory')
+  }, [loadExisting])
+
+  const handleSelectExisting = useCallback(
+    (asset: AssetMetadata) => {
+      const publicUrl = assets.getUrl(asset.path)
+      setValue({ path: publicUrl, alt: imageValue?.alt ?? '' })
+      setShowBrowser(false)
+    },
+    [assets, imageValue?.alt, setValue],
+  )
+
+  const handleFileSelect = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      await uploadFile(file)
+    },
+    [uploadFile],
+  )
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault()
+      setDragOver(false)
+      const file = e.dataTransfer.files[0]
+      if (file) await uploadFile(file)
+    },
+    [uploadFile],
+  )
+
+  const handleAltChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue({ path: imageValue?.path ?? '', alt: e.target.value })
+    },
+    [imageValue?.path, setValue],
+  )
+
+  const handleRemove = useCallback(() => {
+    setValue({ path: '', alt: '' })
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }, [setValue])
+
+  return (
+    <div className="sk-field sk-field--image">
+      <label className="sk-field__label">
+        {imgField.label}
+        {imgField.required && <span className="sk-field__required">*</span>}
+      </label>
+      {imgField.description && <p className="sk-field__description">{imgField.description}</p>}
+
+      <div className="sk-field__image-zone">
+        {uploading ? (
+          <div className="sk-field__image-upload" style={{ borderColor: 'var(--sk-accent)' }}>
+            Wird hochgeladen...
+          </div>
+        ) : imageValue?.path ? (
+          <div className="sk-field__image-preview">
+            {selectedThumbUrl && (
+              <img src={selectedThumbUrl} alt={imageValue.alt ?? ''} className="sk-field__image-thumb" />
+            )}
+            <p className="sk-field__image-path">{imageValue.path}</p>
+            <div className="sk-field__image-actions">
+              <button type="button" className="sk-button sk-button--sm" onClick={() => fileInputRef.current?.click()}>
+                Neu hochladen
+              </button>
+              <button type="button" className="sk-button sk-button--sm" onClick={handleBrowse}>
+                Aus Bibliothek
+              </button>
+              <button type="button" className="sk-button sk-button--sm sk-button--danger" onClick={handleRemove}>
+                Entfernen
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="sk-field__image-empty">
+            <button
+              type="button"
+              className={`sk-field__image-upload${dragOver ? ' sk-field__image-upload--drag' : ''}`}
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
+              onDragLeave={() => setDragOver(false)}
+              onDrop={handleDrop}
+            >
+              Bild hochladen oder hierher ziehen
+            </button>
+            <button type="button" className="sk-button sk-button--sm sk-field__image-browse" onClick={handleBrowse}>
+              Aus Bibliothek wählen
+            </button>
+          </div>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={acceptStr}
+          onChange={handleFileSelect}
+          style={{ display: 'none' }}
+        />
+      </div>
+
+      {/* Image Browser */}
+      {showBrowser && (
+        <div className="sk-field__image-browser">
+          <div className="sk-field__image-browser-header">
+            <span className="sk-field__image-browser-title">
+              {browserScope === 'all' ? 'Alle Bilder' : `Bilder in ${imgField.directory || 'Bibliothek'}`}
+            </span>
+            <div className="sk-field__image-browser-controls">
+              {browserScope === 'directory' ? (
+                <button type="button" className="sk-button sk-button--sm" onClick={() => loadExisting('all')}>
+                  Alle Bilder
+                </button>
+              ) : (
+                <button type="button" className="sk-button sk-button--sm" onClick={() => loadExisting('directory')}>
+                  Nur {imgField.directory || 'Ordner'}
+                </button>
+              )}
+              <button type="button" className="sk-button sk-button--sm" onClick={() => setShowBrowser(false)}>
+                Schließen
+              </button>
+            </div>
+          </div>
+          {loadingExisting ? (
+            <p className="sk-field__image-browser-loading">Lade Bilder...</p>
+          ) : existing.length === 0 ? (
+            <p className="sk-field__image-browser-empty">Keine Bilder vorhanden</p>
+          ) : (
+            <div className="sk-field__image-browser-grid">
+              {existing.map((asset) => {
+                const thumbUrl = previewUrl(assets, asset.path)
+                return (
+                  <button
+                    key={asset.path}
+                    type="button"
+                    className="sk-field__image-browser-item"
+                    onClick={() => handleSelectExisting(asset)}
+                    title={asset.path.split('/').pop()}
+                  >
+                    <img src={thumbUrl} alt="" className="sk-field__image-browser-thumb" />
+                    <span className="sk-field__image-browser-name">{asset.path.split('/').pop()}</span>
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {imageValue?.path && (
+        <input
+          className="sk-field__input"
+          type="text"
+          value={imageValue.alt ?? ''}
+          onChange={handleAltChange}
+          placeholder="Alt-Text (für SEO)"
+          aria-label="Alt text"
+        />
+      )}
+
+      {errors.length > 0 && (
+        <div className="sk-field__errors">
+          {errors.map((err, i) => (
+            <p key={i} className="sk-field__error">{err}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

package/src/fields/number-field-renderer.tsx

@@ -0,0 +1,38 @@
+import { memo } from 'react'
+import type { NumberFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+export const NumberFieldRenderer = memo(function NumberFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const numField = field as NumberFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+
+  return (
+    <div className="sk-field sk-field--number">
+      <label className="sk-field__label">{numField.label}</label>
+      {numField.description && <p className="sk-field__description">{numField.description}</p>}
+      <input
+        className="sk-field__input"
+        type="number"
+        value={(value as number) ?? 0}
+        onChange={(e) => setValue(Number(e.target.value))}
+        onBlur={touch}
+        min={numField.min}
+        max={numField.max}
+        step={numField.step}
+        aria-label={numField.label}
+      />
+      {errors.length > 0 && (
+        <div className="sk-field__errors">
+          {errors.map((err, i) => (
+            <p key={i} className="sk-field__error">{err}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})