@setzkasten-cms/ui 0.4.2

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

@@ -0,0 +1,41 @@
+import { memo, useState } from 'react'
+import type { ObjectFieldDef, AnyFieldDef } from '@setzkasten-cms/core'
+import { FieldRenderer, type FieldRendererProps } from './field-renderer'
+
+export const ObjectFieldRenderer = memo(function ObjectFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const objField = field as ObjectFieldDef
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className="sk-field sk-field--object">
+      <div className="sk-field__object-header">
+        <label className="sk-field__label">{objField.label}</label>
+        {objField.collapsible && (
+          <button
+            type="button"
+            className="sk-field__object-toggle"
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? '▸' : '▾'}
+          </button>
+        )}
+      </div>
+      {!collapsed && (
+        <div className="sk-field__object-fields">
+          {Object.entries(objField.fields).map(([key, childField]) => (
+            <FieldRenderer
+              key={key}
+              field={childField as AnyFieldDef}
+              path={[...path, key]}
+              store={store}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

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

@@ -0,0 +1,48 @@
+import { memo } from 'react'
+import type { OverrideFieldDef, AnyFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import { FieldRenderer, type FieldRendererProps } from './field-renderer'
+
+/**
+ * Override field – native replacement for Keystatic's DOM-hack.
+ * Shows an "active" checkbox. When unchecked, child fields are hidden.
+ */
+export const OverrideFieldRenderer = memo(function OverrideFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const overrideField = field as OverrideFieldDef
+  const { value, setValue } = useField(store, path)
+
+  const overrideValue = (value as { active: boolean } | undefined) ?? { active: false }
+  const isActive = overrideValue.active
+
+  const toggleActive = () => {
+    setValue({ ...overrideValue, active: !isActive })
+  }
+
+  return (
+    <div className="sk-field sk-field--override" data-active={isActive || undefined}>
+      <div className="sk-field__override-header">
+        <label className="sk-field__toggle">
+          <input type="checkbox" checked={isActive} onChange={toggleActive} />
+          <span className="sk-field__toggle-label">{overrideField.label}</span>
+        </label>
+      </div>
+
+      {isActive && (
+        <div className="sk-field__override-fields">
+          {Object.entries(overrideField.fields).map(([key, childField]) => (
+            <FieldRenderer
+              key={key}
+              field={childField as AnyFieldDef}
+              path={[...path, key]}
+              store={store}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})

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

@@ -0,0 +1,42 @@
+import { memo } from 'react'
+import type { SelectFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+
+export const SelectFieldRenderer = memo(function SelectFieldRenderer({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const selectField = field as SelectFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+
+  return (
+    <div className="sk-field sk-field--select">
+      <label className="sk-field__label">{selectField.label}</label>
+      {selectField.description && (
+        <p className="sk-field__description">{selectField.description}</p>
+      )}
+      <select
+        className="sk-field__input sk-field__select"
+        value={(value as string) ?? ''}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={touch}
+        aria-label={selectField.label}
+      >
+        {selectField.options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {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/text-field-renderer.tsx

@@ -0,0 +1,313 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import type { TextFieldDef } from '@setzkasten-cms/core'
+import { useField } from '../hooks/use-field'
+import type { FieldRendererProps } from './field-renderer'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import Link from '@tiptap/extension-link'
+import TextAlign from '@tiptap/extension-text-align'
+import {
+  Type,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+} from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// localStorage helpers for formatting toggle persistence
+// ---------------------------------------------------------------------------
+
+const STORAGE_KEY = 'sk-formatting-fields'
+
+function getFormattingState(fieldPath: string): boolean {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (!stored) return false
+    const map = JSON.parse(stored) as Record<string, boolean>
+    return map[fieldPath] ?? false
+  } catch {
+    return false
+  }
+}
+
+function setFormattingState(fieldPath: string, enabled: boolean) {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    const map = stored ? (JSON.parse(stored) as Record<string, boolean>) : {}
+    if (enabled) {
+      map[fieldPath] = true
+    } else {
+      delete map[fieldPath]
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(map))
+  } catch {
+    // ignore
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Inline toolbar button (shared)
+// ---------------------------------------------------------------------------
+
+const InlineToolbarButton = memo(function InlineToolbarButton({
+  label,
+  isActive,
+  onClick,
+  title,
+  children,
+}: {
+  label?: string
+  isActive: boolean
+  onClick: () => void
+  title?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      className={`sk-rte__btn${isActive ? ' sk-rte__btn--active' : ''}`}
+      onClick={onClick}
+      title={title ?? label}
+    >
+      {children ?? label}
+    </button>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// Mini rich-text editor for inline formatting
+// ---------------------------------------------------------------------------
+
+const FormattedTextInput = memo(function FormattedTextInput({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const textField = field as TextFieldDef
+  const { value, errors, isDirty, setValue, touch } = useField(store, path)
+  const isUpdatingRef = useRef(false)
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        horizontalRule: false,
+        codeBlock: false,
+      }),
+      Placeholder.configure({ placeholder: textField.placeholder ?? 'Schreibe hier...' }),
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
+      }),
+      TextAlign.configure({ types: ['paragraph'] }),
+    ],
+    content: (value as string) || '',
+    onUpdate: ({ editor: ed }) => {
+      isUpdatingRef.current = true
+      setValue(ed.getHTML())
+      isUpdatingRef.current = false
+    },
+    onBlur: () => touch(),
+  })
+
+  useEffect(() => {
+    if (!editor || isUpdatingRef.current) return
+    const current = editor.getHTML()
+    if (current !== value && typeof value === 'string') {
+      editor.commands.setContent(value, { emitUpdate: false })
+    }
+  }, [editor, value])
+
+  const handleLink = useCallback(() => {
+    if (!editor) return
+    if (editor.isActive('link')) {
+      editor.chain().focus().unsetLink().run()
+      return
+    }
+    const url = window.prompt('URL eingeben:')
+    if (!url) return
+    editor.chain().focus().setLink({ href: url }).run()
+  }, [editor])
+
+  if (!editor) return null
+
+  return (
+    <div className="sk-rte sk-rte--inline">
+      <div className="sk-rte__toolbar">
+        <InlineToolbarButton
+          label="B"
+          isActive={editor.isActive('bold')}
+          onClick={() => { editor.chain().focus().toggleBold().run() }}
+        />
+        <InlineToolbarButton
+          label="I"
+          isActive={editor.isActive('italic')}
+          onClick={() => { editor.chain().focus().toggleItalic().run() }}
+        />
+        <InlineToolbarButton
+          label="S"
+          isActive={editor.isActive('strike')}
+          onClick={() => { editor.chain().focus().toggleStrike().run() }}
+        />
+        <InlineToolbarButton
+          label="🔗"
+          isActive={editor.isActive('link')}
+          onClick={handleLink}
+          title="Link"
+        />
+        <span className="sk-rte__sep" />
+        <InlineToolbarButton
+          label="&bull;"
+          isActive={editor.isActive('bulletList')}
+          onClick={() => { editor.chain().focus().toggleBulletList().run() }}
+        />
+        <InlineToolbarButton
+          label="1."
+          isActive={editor.isActive('orderedList')}
+          onClick={() => { editor.chain().focus().toggleOrderedList().run() }}
+        />
+        <InlineToolbarButton
+          label="&ldquo;"
+          isActive={editor.isActive('blockquote')}
+          onClick={() => { editor.chain().focus().toggleBlockquote().run() }}
+        />
+        <span className="sk-rte__sep" />
+        <InlineToolbarButton
+          isActive={editor.isActive({ textAlign: 'left' })}
+          onClick={() => { editor.chain().focus().setTextAlign('left').run() }}
+          title="Linksbündig"
+        >
+          <AlignLeft size={14} />
+        </InlineToolbarButton>
+        <InlineToolbarButton
+          isActive={editor.isActive({ textAlign: 'center' })}
+          onClick={() => { editor.chain().focus().setTextAlign('center').run() }}
+          title="Zentriert"
+        >
+          <AlignCenter size={14} />
+        </InlineToolbarButton>
+        <InlineToolbarButton
+          isActive={editor.isActive({ textAlign: 'right' })}
+          onClick={() => { editor.chain().focus().setTextAlign('right').run() }}
+          title="Rechtsbündig"
+        >
+          <AlignRight size={14} />
+        </InlineToolbarButton>
+        <InlineToolbarButton
+          isActive={editor.isActive({ textAlign: 'justify' })}
+          onClick={() => { editor.chain().focus().setTextAlign('justify').run() }}
+          title="Blocksatz"
+        >
+          <AlignJustify size={14} />
+        </InlineToolbarButton>
+      </div>
+      <EditorContent editor={editor} className="sk-rte__content sk-rte__content--inline" />
+    </div>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// Plain text input (default)
+// ---------------------------------------------------------------------------
+
+const PlainTextInput = memo(function PlainTextInput({
+  field,
+  path,
+  store,
+}: FieldRendererProps) {
+  const textField = field as TextFieldDef
+  const { value, errors, setValue, touch } = useField(store, path)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.target.value)
+  }
+
+  const inputProps = {
+    value: (value as string) ?? '',
+    onChange: handleChange,
+    onBlur: touch,
+    placeholder: textField.placeholder,
+    maxLength: textField.maxLength,
+    'aria-label': textField.label,
+    'aria-invalid': errors.length > 0,
+  }
+
+  return (
+    <>
+      {textField.multiline ? (
+        <textarea className="sk-field__input sk-field__textarea" rows={4} {...inputProps} />
+      ) : (
+        <input className="sk-field__input" type="text" {...inputProps} />
+      )}
+      {textField.maxLength && (
+        <span className="sk-field__counter">
+          {((value as string) ?? '').length}/{textField.maxLength}
+        </span>
+      )}
+    </>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// Main text field renderer with formatting toggle
+// ---------------------------------------------------------------------------
+
+export const TextFieldRenderer = memo(function TextFieldRenderer(props: FieldRendererProps) {
+  const textField = props.field as TextFieldDef
+  const { errors, isDirty } = useField(props.store, props.path)
+  const fieldPath = props.path.join('.')
+
+  // Schema can force formatting on; otherwise use localStorage toggle
+  const [formatting, setFormatting] = useState(() =>
+    textField.formatting || getFormattingState(fieldPath),
+  )
+
+  const toggleFormatting = useCallback(() => {
+    setFormatting((prev) => {
+      const next = !prev
+      setFormattingState(fieldPath, next)
+      return next
+    })
+  }, [fieldPath])
+
+  return (
+    <div
+      className={`sk-field sk-field--text${formatting ? ' sk-field--formatted' : ''}`}
+      data-dirty={isDirty || undefined}
+    >
+      <div className="sk-field__header">
+        <label className="sk-field__label">
+          {textField.label}
+          {textField.required && <span className="sk-field__required">*</span>}
+        </label>
+        <button
+          type="button"
+          className={`sk-field__format-toggle${formatting ? ' sk-field__format-toggle--active' : ''}`}
+          onClick={toggleFormatting}
+          title={formatting ? 'Formatierung ausschalten' : 'Formatierung einschalten'}
+        >
+          <Type size={14} />
+        </button>
+      </div>
+      {textField.description && (
+        <p className="sk-field__description">{textField.description}</p>
+      )}
+
+      {formatting ? (
+        <FormattedTextInput {...props} />
+      ) : (
+        <PlainTextInput {...props} />
+      )}
+
+      {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/hooks/use-field.ts

@@ -0,0 +1,82 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useStore } from 'zustand'
+import type { FieldPath } from '@setzkasten-cms/core'
+
+// Stable empty array to avoid new references on every render
+const EMPTY_ERRORS: string[] = []
+
+// Path-based deep get (duplicated from form-store to avoid circular deps)
+function getIn(obj: unknown, path: FieldPath): unknown {
+  let current: unknown = obj
+  for (const key of path) {
+    if (current === null || current === undefined) return undefined
+    if (typeof current === 'object') {
+      current = (current as Record<string | number, unknown>)[key]
+    } else {
+      return undefined
+    }
+  }
+  return current
+}
+
+/**
+ * Hook for individual field state – subscribes only to its own path.
+ * This prevents unnecessary re-renders when other fields change.
+ *
+ * IMPORTANT: All selectors must return referentially stable values
+ * to avoid React 19 useSyncExternalStore infinite loops.
+ */
+export function useField(store: ReturnType<typeof import('../stores/form-store').createFormStore>, path: FieldPath) {
+  const pathKey = path.join('.')
+
+  // Use stable selector references
+  const value = useStore(store, useCallback(
+    (s) => getIn(s.values, path),
+    [pathKey],
+  ))
+
+  const errors = useStore(store, useCallback(
+    (s) => {
+      const fieldErrors = s.errors[pathKey]
+      return fieldErrors && fieldErrors.length > 0 ? fieldErrors : EMPTY_ERRORS
+    },
+    [pathKey],
+  ))
+
+  const isTouched = useStore(store, useCallback(
+    (s) => s.touched.has(pathKey),
+    [pathKey],
+  ))
+
+  // Compute isDirty outside of useStore to avoid unstable selector
+  const initialValues = useStore(store, useCallback(
+    (s) => getIn(s.initialValues, path),
+    [pathKey],
+  ))
+
+  const isDirty = JSON.stringify(value) !== JSON.stringify(initialValues)
+
+  const setValue = useCallback(
+    (newValue: unknown) => {
+      store.getState().setFieldValue(path, newValue)
+    },
+    [store, pathKey],
+  )
+
+  const touch = useCallback(() => {
+    store.getState().touchField(path)
+  }, [store, pathKey])
+
+  return useMemo(
+    () => ({
+      value,
+      errors,
+      isTouched,
+      isDirty,
+      setValue,
+      touch,
+      path,
+    }),
+    [value, errors, isTouched, isDirty, setValue, touch, path],
+  )
+}

package/src/hooks/use-save.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react'
+import type { Result, CommitResult } from '@setzkasten-cms/core'
+import { useRepository, useEventBus } from '../providers/setzkasten-provider'
+import type { createFormStore } from '../stores/form-store'
+
+/**
+ * Hook for saving form content to the repository.
+ */
+export function useSave(
+  store: ReturnType<typeof createFormStore>,
+  collection: string,
+  slug: string,
+) {
+  const repository = useRepository()
+  const eventBus = useEventBus()
+  const [saving, setSaving] = useState(false)
+
+  const save = useCallback(async (): Promise<Result<CommitResult>> => {
+    const state = store.getState()
+
+    if (!state.isDirty()) {
+      return { ok: true, value: { sha: '', message: 'No changes' } }
+    }
+
+    setSaving(true)
+    state.setStatus('saving')
+
+    const result = await repository.saveEntry(collection, slug, {
+      content: state.values,
+    })
+
+    if (result.ok) {
+      // Update initial values to current (no longer dirty)
+      state.init(state.schema!, state.values)
+      state.setStatus('idle')
+      eventBus.emit({ type: 'entry-saved', collection, slug })
+    } else {
+      state.setStatus('error', result.error.message)
+    }
+
+    setSaving(false)
+    return result
+  }, [store, repository, eventBus, collection, slug])
+
+  return { save, saving }
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+// ---------------------------------------------------------------------------
+// @setzkasten-cms/ui – Public API
+// ---------------------------------------------------------------------------
+
+// Providers
+export { SetzKastenProvider, useSetzKasten, useRepository, useAuth, useAssets, useEventBus, useConfig } from './providers/setzkasten-provider'
+export type { SetzKastenContext } from './providers/setzkasten-provider'
+
+// Stores
+export { createFormStore } from './stores/form-store'
+export type { FormState, FormActions, FormStore } from './stores/form-store'
+export { createAppStore } from './stores/app-store'
+export type { AppState, AppActions, AppStore, RecentEntry } from './stores/app-store'
+
+// Fields
+export { FieldRenderer } from './fields/field-renderer'
+export type { FieldRendererProps } from './fields/field-renderer'
+
+// Components
+export { EntryForm } from './components/entry-form'
+export { EntryList } from './components/entry-list'
+export { CollectionView } from './components/collection-view'
+export { AdminApp } from './components/admin-app'
+export { ToastProvider, useToast } from './components/toast'
+
+// Hooks
+export { useField } from './hooks/use-field'
+export { useSave } from './hooks/use-save'
+
+// Adapters
+export { ProxyContentRepository } from './adapters/proxy-content-repository'
+export type { ProxyConfig } from './adapters/proxy-content-repository'
+export { ProxyAssetStore } from './adapters/proxy-asset-store'
+export type { ProxyAssetConfig } from './adapters/proxy-asset-store'

package/src/providers/setzkasten-provider.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+import type {
+  ContentRepository,
+  AuthProvider,
+  AssetStore,
+  SetzKastenConfig,
+  ContentEventBus,
+} from '@setzkasten-cms/core'
+import { createEventBus } from '@setzkasten-cms/core'
+
+export interface SetzKastenContext {
+  config: SetzKastenConfig
+  repository: ContentRepository
+  auth: AuthProvider
+  assets: AssetStore
+  eventBus: ContentEventBus
+}
+
+const Context = createContext<SetzKastenContext | null>(null)
+
+interface SetzKastenProviderProps {
+  config: SetzKastenConfig
+  repository: ContentRepository
+  auth: AuthProvider
+  assets: AssetStore
+  children: ReactNode
+}
+
+/**
+ * Root provider – the composition root injects all concrete adapters here.
+ * UI components access ports only via this context (Dependency Inversion).
+ */
+export function SetzKastenProvider({
+  config,
+  repository,
+  auth,
+  assets,
+  children,
+}: SetzKastenProviderProps) {
+  const value = useMemo(
+    () => ({
+      config,
+      repository,
+      auth,
+      assets,
+      eventBus: createEventBus(),
+    }),
+    [config, repository, auth, assets],
+  )
+
+  return <Context value={value}>{children}</Context>
+}
+
+export function useSetzKasten(): SetzKastenContext {
+  const context = useContext(Context)
+  if (!context) {
+    throw new Error('useSetzKasten must be used within a <SetzKastenProvider>')
+  }
+  return context
+}
+
+export function useRepository(): ContentRepository {
+  return useSetzKasten().repository
+}
+
+export function useAuth(): AuthProvider {
+  return useSetzKasten().auth
+}
+
+export function useAssets(): AssetStore {
+  return useSetzKasten().assets
+}
+
+export function useEventBus(): ContentEventBus {
+  return useSetzKasten().eventBus
+}
+
+export function useConfig(): SetzKastenConfig {
+  return useSetzKasten().config
+}