@setzkasten-cms/ui 0.4.4 → 0.4.6

package/dist/index.js

@@ -258,7 +258,7 @@ function createAppStore() {
 }
 
 // src/fields/field-renderer.tsx
-import { memo as memo10 } from "react";
+import { memo as memo12 } from "react";
 
 // src/fields/text-field-renderer.tsx
 import { memo, useCallback as useCallback2, useEffect, useRef as useRef2, useState } from "react";
@@ -807,7 +807,7 @@ var IconFieldRenderer = memo5(function IconFieldRenderer2({
 });
 
 // src/fields/array-field-renderer.tsx
-import { memo as memo6, useCallback as useCallback4 } from "react";
+import { memo as memo6, useCallback as useCallback4, useState as useState3, useRef as useRef4 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var ArrayFieldRenderer = memo6(function ArrayFieldRenderer2({
   field,
@@ -816,7 +816,12 @@ var ArrayFieldRenderer = memo6(function ArrayFieldRenderer2({
 }) {
   const arrayField = field;
   const { value, setValue } = useField(store, path);
+  const [collapsedItems, setCollapsedItems] = useState3(/* @__PURE__ */ new Set());
+  const [dragIndex, setDragIndex] = useState3(null);
+  const [dragOverIndex, setDragOverIndex] = useState3(null);
+  const dragCounter = useRef4(0);
   const items = value ?? [];
+  const isGrid = arrayField.layout === "grid";
   const addItem = useCallback4(() => {
     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]);
@@ -829,6 +834,7 @@ var ArrayFieldRenderer = memo6(function ArrayFieldRenderer2({
   );
   const moveItem = useCallback4(
     (from, to) => {
+      if (from === to) return;
       const newItems = [...items];
       const [moved] = newItems.splice(from, 1);
       newItems.splice(to, 0, moved);
@@ -836,8 +842,53 @@ var ArrayFieldRenderer = memo6(function ArrayFieldRenderer2({
     },
     [items, setValue]
   );
+  const toggleCollapse = useCallback4((index) => {
+    setCollapsedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  }, []);
+  const handleDragStart = useCallback4((e, index) => {
+    setDragIndex(index);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+  }, []);
+  const handleDragEnter = useCallback4((index) => {
+    dragCounter.current++;
+    setDragOverIndex(index);
+  }, []);
+  const handleDragLeave = useCallback4(() => {
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setDragOverIndex(null);
+    }
+  }, []);
+  const handleDragOver = useCallback4((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDrop = useCallback4(
+    (e, toIndex) => {
+      e.preventDefault();
+      dragCounter.current = 0;
+      if (dragIndex !== null) {
+        moveItem(dragIndex, toIndex);
+      }
+      setDragIndex(null);
+      setDragOverIndex(null);
+    },
+    [dragIndex, moveItem]
+  );
+  const handleDragEnd = useCallback4(() => {
+    dragCounter.current = 0;
+    setDragIndex(null);
+    setDragOverIndex(null);
+  }, []);
   const canAdd = arrayField.maxItems === void 0 || items.length < arrayField.maxItems;
   const canRemove = arrayField.minItems === void 0 || items.length > arrayField.minItems;
+  const gridStyle = isGrid ? { gridTemplateColumns: `repeat(${arrayField.gridColumns}, 1fr)` } : void 0;
   return /* @__PURE__ */ jsxs6("div", { className: "sk-field sk-field--array", children: [
     /* @__PURE__ */ jsx7("div", { className: "sk-array__header", children: /* @__PURE__ */ jsxs6("label", { className: "sk-field__label", children: [
       arrayField.label,
@@ -847,33 +898,59 @@ var ArrayFieldRenderer = memo6(function ArrayFieldRenderer2({
         ")"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx7("div", { className: "sk-array__items", children: items.map((_, index) => {
-      const itemLabel = arrayField.itemLabel ? arrayField.itemLabel(items[index], index) : `#${index + 1}`;
-      return /* @__PURE__ */ jsxs6("div", { className: "sk-array__item", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "sk-array__item-header", children: [
-          /* @__PURE__ */ jsx7("span", { className: "sk-array__item-label", children: itemLabel }),
-          /* @__PURE__ */ jsxs6("div", { className: "sk-array__item-actions", children: [
-            index > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm", onClick: () => moveItem(index, index - 1), title: "Nach oben", children: "\u2191" }),
-            index < items.length - 1 && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm", onClick: () => moveItem(index, index + 1), title: "Nach unten", children: "\u2193" }),
-            canRemove && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm sk-button--danger", onClick: () => removeItem(index), title: "Entfernen", children: "\xD7" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx7(
-          FieldRenderer,
-          {
-            field: arrayField.itemField,
-            path: [...path, index],
-            store
-          }
-        )
-      ] }, index);
-    }) }),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `sk-array__items ${isGrid ? "sk-array__items--grid" : ""}`,
+        style: gridStyle,
+        children: items.map((_, index) => {
+          const itemLabel = arrayField.itemLabel ? arrayField.itemLabel(items[index], index) : `#${index + 1}`;
+          const isCollapsed = arrayField.collapsible && collapsedItems.has(index);
+          const isDragging = dragIndex === index;
+          const isDragOver = dragOverIndex === index && dragIndex !== index;
+          return /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: `sk-array__item ${isDragging ? "sk-array__item--dragging" : ""} ${isDragOver ? "sk-array__item--dragover" : ""}`,
+              draggable: true,
+              onDragStart: (e) => handleDragStart(e, index),
+              onDragEnter: () => handleDragEnter(index),
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: (e) => handleDrop(e, index),
+              onDragEnd: handleDragEnd,
+              children: [
+                /* @__PURE__ */ jsxs6("div", { className: "sk-array__item-header", children: [
+                  /* @__PURE__ */ jsx7("span", { className: "sk-array__item-drag", title: "Ziehen zum Sortieren", children: "\u283F" }),
+                  /* @__PURE__ */ jsx7("span", { className: "sk-array__item-label", children: itemLabel }),
+                  /* @__PURE__ */ jsxs6("div", { className: "sk-array__item-actions", children: [
+                    !isGrid && index > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm", onClick: () => moveItem(index, index - 1), title: "Nach oben", children: "\u2191" }),
+                    !isGrid && index < items.length - 1 && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm", onClick: () => moveItem(index, index + 1), title: "Nach unten", children: "\u2193" }),
+                    arrayField.collapsible && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm", onClick: () => toggleCollapse(index), title: isCollapsed ? "Aufklappen" : "Zuklappen", children: isCollapsed ? "\u25B8" : "\u25BE" }),
+                    canRemove && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm sk-button--danger", onClick: () => removeItem(index), title: "Entfernen", children: "\xD7" })
+                  ] })
+                ] }),
+                !isCollapsed && /* @__PURE__ */ jsx7(
+                  FieldRenderer,
+                  {
+                    field: arrayField.itemField,
+                    path: [...path, index],
+                    store
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      }
+    ),
     canAdd && /* @__PURE__ */ jsx7("button", { type: "button", className: "sk-button sk-button--sm sk-array__add", onClick: addItem, children: "+ Hinzuf\xFCgen" })
   ] });
 });
 
 // src/fields/object-field-renderer.tsx
-import { memo as memo7, useState as useState3 } from "react";
+import { memo as memo7, useState as useState4 } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var ObjectFieldRenderer = memo7(function ObjectFieldRenderer2({
   field,
@@ -881,7 +958,7 @@ var ObjectFieldRenderer = memo7(function ObjectFieldRenderer2({
   store
 }) {
   const objField = field;
-  const [collapsed, setCollapsed] = useState3(false);
+  const [collapsed, setCollapsed] = useState4(false);
   return /* @__PURE__ */ jsxs7("div", { className: "sk-field sk-field--object", children: [
     /* @__PURE__ */ jsxs7("div", { className: "sk-field__object-header", children: [
       /* @__PURE__ */ jsx8("label", { className: "sk-field__label", children: objField.label }),
@@ -908,7 +985,7 @@ var ObjectFieldRenderer = memo7(function ObjectFieldRenderer2({
 });
 
 // src/fields/image-field-renderer.tsx
-import { memo as memo8, useCallback as useCallback5, useRef as useRef4, useState as useState4 } from "react";
+import { memo as memo8, useCallback as useCallback5, useRef as useRef5, useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function previewUrl(assets, path) {
   return assets.getPreviewUrl?.(path) ?? assets.getUrl(path);
@@ -935,13 +1012,13 @@ var ImageFieldRenderer = memo8(function ImageFieldRenderer2({
   const imgField = field;
   const { value, errors, setValue, touch } = useField(store, path);
   const assets = useAssets();
-  const fileInputRef = useRef4(null);
-  const [uploading, setUploading] = useState4(false);
-  const [dragOver, setDragOver] = useState4(false);
-  const [showBrowser, setShowBrowser] = useState4(false);
-  const [browserScope, setBrowserScope] = useState4("directory");
-  const [existing, setExisting] = useState4([]);
-  const [loadingExisting, setLoadingExisting] = useState4(false);
+  const fileInputRef = useRef5(null);
+  const [uploading, setUploading] = useState5(false);
+  const [dragOver, setDragOver] = useState5(false);
+  const [showBrowser, setShowBrowser] = useState5(false);
+  const [browserScope, setBrowserScope] = useState5("directory");
+  const [existing, setExisting] = useState5([]);
+  const [loadingExisting, setLoadingExisting] = useState5(false);
   const imageValue = value;
   const acceptStr = imgField.accept.map((ext) => `.${ext}`).join(",");
   const selectedThumbUrl = imageValue?.path && assets.getPreviewUrl ? assets.getPreviewUrl(imageValue.path) : imageValue?.path || void 0;
@@ -1111,10 +1188,139 @@ var ImageFieldRenderer = memo8(function ImageFieldRenderer2({
   ] });
 });
 
-// src/fields/override-field-renderer.tsx
+// src/fields/date-field-renderer.tsx
 import { memo as memo9 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var OverrideFieldRenderer = memo9(function OverrideFieldRenderer2({
+var DateFieldRenderer = memo9(function DateFieldRenderer2({
+  field,
+  path,
+  store
+}) {
+  const dateField = field;
+  const { value, errors, setValue, touch } = useField(store, path);
+  const inputType = dateField.includeTime ? "datetime-local" : "date";
+  return /* @__PURE__ */ jsxs9("div", { className: "sk-field sk-field--date", children: [
+    /* @__PURE__ */ jsx10("label", { className: "sk-field__label", children: dateField.label }),
+    dateField.description && /* @__PURE__ */ jsx10("p", { className: "sk-field__description", children: dateField.description }),
+    /* @__PURE__ */ jsx10(
+      "input",
+      {
+        className: "sk-field__input",
+        type: inputType,
+        value: value ?? "",
+        onChange: (e) => setValue(e.target.value),
+        onBlur: touch,
+        min: dateField.min,
+        max: dateField.max,
+        "aria-label": dateField.label
+      }
+    ),
+    errors.length > 0 && /* @__PURE__ */ jsx10("div", { className: "sk-field__errors", children: errors.map((err3, i) => /* @__PURE__ */ jsx10("p", { className: "sk-field__error", children: err3 }, i)) })
+  ] });
+});
+
+// src/fields/color-field-renderer.tsx
+import { memo as memo10, useState as useState6, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect3 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var ColorFieldRenderer = memo10(function ColorFieldRenderer2({
+  field,
+  path,
+  store
+}) {
+  const colorField = field;
+  const { value, errors, setValue, touch } = useField(store, path);
+  const [showPicker, setShowPicker] = useState6(false);
+  const containerRef = useRef6(null);
+  const currentColor = value || "#000000";
+  useEffect3(() => {
+    if (!showPicker) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setShowPicker(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showPicker]);
+  const handleColorInput = useCallback6(
+    (e) => {
+      setValue(e.target.value);
+    },
+    [setValue]
+  );
+  const handleHexInput = useCallback6(
+    (e) => {
+      let hex = e.target.value;
+      if (!hex.startsWith("#")) hex = "#" + hex;
+      if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+        setValue(hex);
+      }
+    },
+    [setValue]
+  );
+  const handlePresetClick = useCallback6(
+    (preset) => {
+      setValue(preset);
+    },
+    [setValue]
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: "sk-field sk-field--color", ref: containerRef, children: [
+    /* @__PURE__ */ jsx11("label", { className: "sk-field__label", children: colorField.label }),
+    colorField.description && /* @__PURE__ */ jsx11("p", { className: "sk-field__description", children: colorField.description }),
+    /* @__PURE__ */ jsxs10("div", { className: "sk-color__row", children: [
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          className: "sk-color__swatch",
+          style: { backgroundColor: currentColor },
+          onClick: () => setShowPicker(!showPicker),
+          "aria-label": "Farbe w\xE4hlen"
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          className: "sk-field__input sk-color__hex",
+          type: "text",
+          value: currentColor,
+          onChange: handleHexInput,
+          onBlur: touch,
+          placeholder: "#000000",
+          maxLength: 7,
+          "aria-label": colorField.label
+        }
+      )
+    ] }),
+    showPicker && /* @__PURE__ */ jsx11("div", { className: "sk-color__picker", children: /* @__PURE__ */ jsx11(
+      "input",
+      {
+        type: "color",
+        className: "sk-color__native",
+        value: currentColor,
+        onChange: handleColorInput
+      }
+    ) }),
+    colorField.presets.length > 0 && /* @__PURE__ */ jsx11("div", { className: "sk-color__presets", children: colorField.presets.map((preset) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        className: `sk-color__preset ${preset === currentColor ? "sk-color__preset--active" : ""}`,
+        style: { backgroundColor: preset },
+        onClick: () => handlePresetClick(preset),
+        title: preset,
+        "aria-label": `Farbe ${preset}`
+      },
+      preset
+    )) }),
+    errors.length > 0 && /* @__PURE__ */ jsx11("div", { className: "sk-field__errors", children: errors.map((err3, i) => /* @__PURE__ */ jsx11("p", { className: "sk-field__error", children: err3 }, i)) })
+  ] });
+});
+
+// src/fields/override-field-renderer.tsx
+import { memo as memo11 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var OverrideFieldRenderer = memo11(function OverrideFieldRenderer2({
   field,
   path,
   store
@@ -1126,12 +1332,12 @@ var OverrideFieldRenderer = memo9(function OverrideFieldRenderer2({
   const toggleActive = () => {
     setValue({ ...overrideValue, active: !isActive });
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "sk-field sk-field--override", "data-active": isActive || void 0, children: [
-    /* @__PURE__ */ jsx10("div", { className: "sk-field__override-header", children: /* @__PURE__ */ jsxs9("label", { className: "sk-field__toggle", children: [
-      /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: isActive, onChange: toggleActive }),
-      /* @__PURE__ */ jsx10("span", { className: "sk-field__toggle-label", children: overrideField.label })
+  return /* @__PURE__ */ jsxs11("div", { className: "sk-field sk-field--override", "data-active": isActive || void 0, children: [
+    /* @__PURE__ */ jsx12("div", { className: "sk-field__override-header", children: /* @__PURE__ */ jsxs11("label", { className: "sk-field__toggle", children: [
+      /* @__PURE__ */ jsx12("input", { type: "checkbox", checked: isActive, onChange: toggleActive }),
+      /* @__PURE__ */ jsx12("span", { className: "sk-field__toggle-label", children: overrideField.label })
     ] }) }),
-    isActive && /* @__PURE__ */ jsx10("div", { className: "sk-field__override-fields", children: Object.entries(overrideField.fields).map(([key, childField]) => /* @__PURE__ */ jsx10(
+    isActive && /* @__PURE__ */ jsx12("div", { className: "sk-field__override-fields", children: Object.entries(overrideField.fields).map(([key, childField]) => /* @__PURE__ */ jsx12(
       FieldRenderer,
       {
         field: childField,
@@ -1144,7 +1350,7 @@ var OverrideFieldRenderer = memo9(function OverrideFieldRenderer2({
 });
 
 // src/fields/field-renderer.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var rendererMap = {
   text: TextFieldRenderer,
   number: NumberFieldRenderer,
@@ -1154,27 +1360,29 @@ var rendererMap = {
   array: ArrayFieldRenderer,
   object: ObjectFieldRenderer,
   image: ImageFieldRenderer,
+  date: DateFieldRenderer,
+  color: ColorFieldRenderer,
   override: OverrideFieldRenderer
 };
-var FieldRenderer = memo10(function FieldRenderer2({
+var FieldRenderer = memo12(function FieldRenderer2({
   field,
   path,
   store
 }) {
   const Renderer = rendererMap[field.type];
   if (!Renderer) {
-    return /* @__PURE__ */ jsxs10("div", { style: { color: "#ef4444", padding: "8px", fontSize: "14px" }, children: [
+    return /* @__PURE__ */ jsxs12("div", { style: { color: "#ef4444", padding: "8px", fontSize: "14px" }, children: [
       "Unknown field type: ",
       field.type
     ] });
   }
-  return /* @__PURE__ */ jsx11(Renderer, { field, path, store });
+  return /* @__PURE__ */ jsx13(Renderer, { field, path, store });
 });
 
 // src/components/entry-form.tsx
-import { memo as memo11, useEffect as useEffect3, useMemo as useMemo4 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var EntryForm = memo11(function EntryForm2({
+import { memo as memo13, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var EntryForm = memo13(function EntryForm2({
   schema,
   initialValues,
   draftValues,
@@ -1182,7 +1390,7 @@ var EntryForm = memo11(function EntryForm2({
   storeRef
 }) {
   const store = useMemo4(() => createFormStore(), []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (storeRef) {
       storeRef.current = store;
     }
@@ -1192,7 +1400,7 @@ var EntryForm = memo11(function EntryForm2({
       }
     };
   }, [store, storeRef]);
-  useEffect3(() => {
+  useEffect4(() => {
     store.getState().init(schema, initialValues, draftValues);
   }, [store, schema, initialValues, draftValues]);
   const handleSave = () => {
@@ -1201,8 +1409,8 @@ var EntryForm = memo11(function EntryForm2({
       onSave(values);
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: "sk-entry-form", children: [
-    /* @__PURE__ */ jsx12("div", { className: "sk-entry-form__fields", children: Object.entries(schema).map(([key, field]) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("div", { className: "sk-entry-form", children: [
+    /* @__PURE__ */ jsx14("div", { className: "sk-entry-form__fields", children: Object.entries(schema).map(([key, field]) => /* @__PURE__ */ jsx14(
       FieldRenderer,
       {
         field,
@@ -1211,13 +1419,13 @@ var EntryForm = memo11(function EntryForm2({
       },
       key
     )) }),
-    onSave && /* @__PURE__ */ jsx12("div", { className: "sk-entry-form__actions", children: /* @__PURE__ */ jsx12("button", { type: "button", className: "sk-button sk-button--primary", onClick: handleSave, children: "Speichern" }) })
+    onSave && /* @__PURE__ */ jsx14("div", { className: "sk-entry-form__actions", children: /* @__PURE__ */ jsx14("button", { type: "button", className: "sk-button sk-button--primary", onClick: handleSave, children: "Speichern" }) })
   ] });
 });
 
 // src/components/entry-list.tsx
-import { useEffect as useEffect4, useState as useState5, useCallback as useCallback6 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState7, useCallback as useCallback7 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function EntryList({
   collection,
   label,
@@ -1226,9 +1434,9 @@ function EntryList({
   selectedSlug
 }) {
   const repository = useRepository();
-  const [entries, setEntries] = useState5([]);
-  const [loading, setLoading] = useState5(true);
-  const loadEntries = useCallback6(async () => {
+  const [entries, setEntries] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const loadEntries = useCallback7(async () => {
     setLoading(true);
     const result = await repository.listEntries(collection);
     if (result.ok) {
@@ -1236,10 +1444,10 @@ function EntryList({
     }
     setLoading(false);
   }, [repository, collection]);
-  useEffect4(() => {
+  useEffect5(() => {
     loadEntries();
   }, [loadEntries]);
-  const handleDelete = useCallback6(
+  const handleDelete = useCallback7(
     async (slug) => {
       if (!confirm(`"${slug}" wirklich l\xF6schen?`)) return;
       const result = await repository.deleteEntry(collection, slug);
@@ -1250,16 +1458,16 @@ function EntryList({
     [repository, collection, loadEntries]
   );
   if (loading) {
-    return /* @__PURE__ */ jsxs12("div", { className: "sk-entry-list sk-entry-list--loading", children: [
-      /* @__PURE__ */ jsx13("div", { className: "sk-entry-list__header", children: /* @__PURE__ */ jsx13("h2", { className: "sk-entry-list__title", children: label }) }),
-      /* @__PURE__ */ jsx13("div", { className: "sk-entry-list__empty", children: "Lade..." })
+    return /* @__PURE__ */ jsxs14("div", { className: "sk-entry-list sk-entry-list--loading", children: [
+      /* @__PURE__ */ jsx15("div", { className: "sk-entry-list__header", children: /* @__PURE__ */ jsx15("h2", { className: "sk-entry-list__title", children: label }) }),
+      /* @__PURE__ */ jsx15("div", { className: "sk-entry-list__empty", children: "Lade..." })
     ] });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "sk-entry-list", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "sk-entry-list__header", children: [
-      /* @__PURE__ */ jsx13("h2", { className: "sk-entry-list__title", children: label }),
-      /* @__PURE__ */ jsx13("span", { className: "sk-entry-list__count", children: entries.length }),
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs14("div", { className: "sk-entry-list", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "sk-entry-list__header", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "sk-entry-list__title", children: label }),
+      /* @__PURE__ */ jsx15("span", { className: "sk-entry-list__count", children: entries.length }),
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1269,9 +1477,9 @@ function EntryList({
         }
       )
     ] }),
-    entries.length === 0 ? /* @__PURE__ */ jsxs12("div", { className: "sk-entry-list__empty", children: [
-      /* @__PURE__ */ jsx13("p", { children: "Noch keine Eintr\xE4ge." }),
-      /* @__PURE__ */ jsx13(
+    entries.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: "sk-entry-list__empty", children: [
+      /* @__PURE__ */ jsx15("p", { children: "Noch keine Eintr\xE4ge." }),
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1280,24 +1488,24 @@ function EntryList({
           children: "Ersten Eintrag erstellen"
         }
       )
-    ] }) : /* @__PURE__ */ jsx13("ul", { className: "sk-entry-list__items", role: "list", children: entries.map((entry) => /* @__PURE__ */ jsxs12(
+    ] }) : /* @__PURE__ */ jsx15("ul", { className: "sk-entry-list__items", role: "list", children: entries.map((entry) => /* @__PURE__ */ jsxs14(
       "li",
       {
         className: `sk-entry-list__item ${entry.slug === selectedSlug ? "sk-entry-list__item--active" : ""}`,
         children: [
-          /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
               className: "sk-entry-list__item-btn",
               onClick: () => onSelect(entry.slug),
               children: [
-                /* @__PURE__ */ jsx13("span", { className: "sk-entry-list__item-name", children: entry.name }),
-                /* @__PURE__ */ jsx13("span", { className: "sk-entry-list__item-slug", children: entry.slug })
+                /* @__PURE__ */ jsx15("span", { className: "sk-entry-list__item-name", children: entry.name }),
+                /* @__PURE__ */ jsx15("span", { className: "sk-entry-list__item-slug", children: entry.slug })
               ]
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -1319,16 +1527,16 @@ function EntryList({
 }
 
 // src/components/collection-view.tsx
-import { useState as useState6, useCallback as useCallback7, useRef as useRef5 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState8, useCallback as useCallback8, useRef as useRef7 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function CollectionView({ collectionKey, collection }) {
   const repository = useRepository();
-  const [selectedSlug, setSelectedSlug] = useState6(null);
-  const [entryData, setEntryData] = useState6(null);
-  const [loading, setLoading] = useState6(false);
-  const [creating, setCreating] = useState6(false);
-  const formStoreRef = useRef5(null);
-  const loadEntry = useCallback7(
+  const [selectedSlug, setSelectedSlug] = useState8(null);
+  const [entryData, setEntryData] = useState8(null);
+  const [loading, setLoading] = useState8(false);
+  const [creating, setCreating] = useState8(false);
+  const formStoreRef = useRef7(null);
+  const loadEntry = useCallback8(
     async (slug) => {
       setLoading(true);
       setCreating(false);
@@ -1341,12 +1549,12 @@ function CollectionView({ collectionKey, collection }) {
     },
     [repository, collectionKey]
   );
-  const handleCreate = useCallback7(() => {
+  const handleCreate = useCallback8(() => {
     setSelectedSlug(null);
     setEntryData({});
     setCreating(true);
   }, []);
-  const handleSave = useCallback7(
+  const handleSave = useCallback8(
     async (values) => {
       const slug = creating ? prompt("Slug f\xFCr den neuen Eintrag:") : selectedSlug;
       if (!slug) return;
@@ -1361,8 +1569,8 @@ function CollectionView({ collectionKey, collection }) {
     },
     [repository, collectionKey, selectedSlug, creating]
   );
-  return /* @__PURE__ */ jsxs13("div", { className: "sk-collection-view", children: [
-    /* @__PURE__ */ jsx14("div", { className: "sk-collection-view__list", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15("div", { className: "sk-collection-view", children: [
+    /* @__PURE__ */ jsx16("div", { className: "sk-collection-view__list", children: /* @__PURE__ */ jsx16(
       EntryList,
       {
         collection: collectionKey,
@@ -1372,9 +1580,9 @@ function CollectionView({ collectionKey, collection }) {
         selectedSlug: selectedSlug ?? void 0
       }
     ) }),
-    /* @__PURE__ */ jsx14("div", { className: "sk-collection-view__editor", children: loading ? /* @__PURE__ */ jsx14("div", { className: "sk-empty", children: /* @__PURE__ */ jsx14("p", { children: "Lade Eintrag..." }) }) : entryData !== null ? /* @__PURE__ */ jsxs13("div", { children: [
-      /* @__PURE__ */ jsx14("div", { className: "sk-collection-view__editor-header", children: /* @__PURE__ */ jsx14("h3", { children: creating ? "Neuer Eintrag" : selectedSlug }) }),
-      /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16("div", { className: "sk-collection-view__editor", children: loading ? /* @__PURE__ */ jsx16("div", { className: "sk-empty", children: /* @__PURE__ */ jsx16("p", { children: "Lade Eintrag..." }) }) : entryData !== null ? /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx16("div", { className: "sk-collection-view__editor-header", children: /* @__PURE__ */ jsx16("h3", { children: creating ? "Neuer Eintrag" : selectedSlug }) }),
+      /* @__PURE__ */ jsx16(
         EntryForm,
         {
           schema: collection.fields,
@@ -1384,19 +1592,19 @@ function CollectionView({ collectionKey, collection }) {
         },
         selectedSlug ?? "new"
       )
-    ] }) : /* @__PURE__ */ jsx14("div", { className: "sk-empty", children: /* @__PURE__ */ jsx14("p", { children: "W\xE4hle einen Eintrag aus der Liste oder erstelle einen neuen." }) }) })
+    ] }) : /* @__PURE__ */ jsx16("div", { className: "sk-empty", children: /* @__PURE__ */ jsx16("p", { children: "W\xE4hle einen Eintrag aus der Liste oder erstelle einen neuen." }) }) })
   ] });
 }
 
 // src/components/admin-app.tsx
-import { useState as useState9, useEffect as useEffect7 } from "react";
+import { useState as useState11, useEffect as useEffect8 } from "react";
 
 // src/components/page-builder.tsx
-import { useState as useState8, useEffect as useEffect6, useCallback as useCallback9, useRef as useRef6, useSyncExternalStore } from "react";
+import { useState as useState10, useEffect as useEffect7, useCallback as useCallback10, useRef as useRef8, useSyncExternalStore } from "react";
 
 // src/components/toast.tsx
-import { useState as useState7, useCallback as useCallback8, createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState9, useCallback as useCallback9, createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var ToastContext = createContext2({ toast: () => {
 } });
 function useToast() {
@@ -1404,17 +1612,17 @@ function useToast() {
 }
 var nextId = 0;
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState7([]);
-  const toast = useCallback8((message, type = "info") => {
+  const [toasts, setToasts] = useState9([]);
+  const toast = useCallback9((message, type = "info") => {
     const id = nextId++;
     setToasts((prev) => [...prev, { id, message, type }]);
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
     }, 3e3);
   }, []);
-  return /* @__PURE__ */ jsxs14(ToastContext.Provider, { value: { toast }, children: [
+  return /* @__PURE__ */ jsxs16(ToastContext.Provider, { value: { toast }, children: [
     children,
-    toasts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "sk-toast-container", children: toasts.map((t) => /* @__PURE__ */ jsx15("div", { className: `sk-toast sk-toast--${t.type}`, children: t.message }, t.id)) })
+    toasts.length > 0 && /* @__PURE__ */ jsx17("div", { className: "sk-toast-container", children: toasts.map((t) => /* @__PURE__ */ jsx17("div", { className: `sk-toast sk-toast--${t.type}`, children: t.message }, t.id)) })
   ] });
 }
 
@@ -1457,7 +1665,7 @@ import {
   Redo2,
   Trash2
 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var ICON_MAP = {
   layout: LayoutGrid,
   star: Star,
@@ -1481,11 +1689,11 @@ var ICON_MAP = {
   users: Users
 };
 function useDraggable() {
-  const [offset, setOffset] = useState8({ x: 0, y: 0 });
-  const dragging = useRef6(false);
-  const start = useRef6({ x: 0, y: 0 });
-  const startOffset = useRef6({ x: 0, y: 0 });
-  const onMouseDown = useCallback9((e) => {
+  const [offset, setOffset] = useState10({ x: 0, y: 0 });
+  const dragging = useRef8(false);
+  const start = useRef8({ x: 0, y: 0 });
+  const startOffset = useRef8({ x: 0, y: 0 });
+  const onMouseDown = useCallback10((e) => {
     const target = e.target;
     if (target.closest("button") || target.closest("input") || target.closest("select")) return;
     if (!target.closest(".sk-pb__nav-header, .sk-pb__slide-over-header, .sk-pb__drag-handle")) return;
@@ -1508,20 +1716,20 @@ function useDraggable() {
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   }, [offset]);
-  const reset = useCallback9(() => setOffset({ x: 0, y: 0 }), []);
+  const reset = useCallback10(() => setOffset({ x: 0, y: 0 }), []);
   const hasMoved = offset.x !== 0 || offset.y !== 0;
   const style = hasMoved ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : void 0;
   return { onMouseDown, style, offset, reset, hasMoved };
 }
 function useResizable(defaultWidth, minW = 280, maxW = 800, minH = 200, maxH = 900) {
-  const [width, setWidth] = useState8(defaultWidth);
-  const [height, setHeight] = useState8(0);
-  const resizing = useRef6(false);
-  const startMouse = useRef6({ x: 0, y: 0 });
-  const startW = useRef6(defaultWidth);
-  const startH = useRef6(0);
-  const mode = useRef6("bl");
-  const onResizeStart = useCallback9((e, corner) => {
+  const [width, setWidth] = useState10(defaultWidth);
+  const [height, setHeight] = useState10(0);
+  const resizing = useRef8(false);
+  const startMouse = useRef8({ x: 0, y: 0 });
+  const startW = useRef8(defaultWidth);
+  const startH = useRef8(0);
+  const mode = useRef8("bl");
+  const onResizeStart = useCallback10((e, corner) => {
     e.preventDefault();
     e.stopPropagation();
     resizing.current = true;
@@ -1548,7 +1756,7 @@ function useResizable(defaultWidth, minW = 280, maxW = 800, minH = 200, maxH = 9
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   }, [width, height, minW, maxW, minH, maxH]);
-  const reset = useCallback9(() => {
+  const reset = useCallback10(() => {
     setWidth(defaultWidth);
     setHeight(0);
   }, [defaultWidth]);
@@ -1559,31 +1767,31 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
   const config = useConfig();
   const repository = useRepository();
   const { toast } = useToast();
-  const [pageConfig, setPageConfig] = useState8(null);
-  const [visibleSection, setVisibleSection] = useState8(null);
-  const [editingSection, setEditingSection] = useState8(null);
-  const [editorOpen, setEditorOpen] = useState8(false);
-  const [viewport, setViewport] = useState8("compact");
-  const [loading, setLoading] = useState8(true);
-  const [previewKey, setPreviewKey] = useState8(0);
-  const [configDirty, setConfigDirty] = useState8(false);
-  const [savingConfig, setSavingConfig] = useState8(false);
-  const [configSha, setConfigSha] = useState8();
-  const [navCollapsed, setNavCollapsed] = useState8(true);
-  const [editorCollapsed, setEditorCollapsed] = useState8(false);
-  const [dragIndex, setDragIndex] = useState8(null);
-  const [dragOverIndex, setDragOverIndex] = useState8(null);
-  const iframeRef = useRef6(null);
-  const navRef = useRef6(null);
-  const scrollAfterLoadRef = useRef6(null);
-  const draftCacheRef = useRef6({});
+  const [pageConfig, setPageConfig] = useState10(null);
+  const [visibleSection, setVisibleSection] = useState10(null);
+  const [editingSection, setEditingSection] = useState10(null);
+  const [editorOpen, setEditorOpen] = useState10(false);
+  const [viewport, setViewport] = useState10("compact");
+  const [loading, setLoading] = useState10(true);
+  const [previewKey, setPreviewKey] = useState10(0);
+  const [configDirty, setConfigDirty] = useState10(false);
+  const [savingConfig, setSavingConfig] = useState10(false);
+  const [configSha, setConfigSha] = useState10();
+  const [navCollapsed, setNavCollapsed] = useState10(true);
+  const [editorCollapsed, setEditorCollapsed] = useState10(false);
+  const [dragIndex, setDragIndex] = useState10(null);
+  const [dragOverIndex, setDragOverIndex] = useState10(null);
+  const iframeRef = useRef8(null);
+  const navRef = useRef8(null);
+  const scrollAfterLoadRef = useRef8(null);
+  const draftCacheRef = useRef8({});
   const navDrag = useDraggable();
   const editorDrag = useDraggable();
   const editorResize = useResizable(380);
-  const [compactSplit, setCompactSplit] = useState8(66);
+  const [compactSplit, setCompactSplit] = useState10(66);
   const compactSplitDefault = 66;
-  const pbRef = useRef6(null);
-  const onSplitDragStart = useCallback9((e) => {
+  const pbRef = useRef8(null);
+  const onSplitDragStart = useCallback10((e) => {
     e.preventDefault();
     const root = pbRef.current;
     if (!root) return;
@@ -1604,7 +1812,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   }, []);
-  const resetAllPositions = useCallback9(() => {
+  const resetAllPositions = useCallback10(() => {
     navDrag.reset();
     editorDrag.reset();
     editorResize.reset();
@@ -1613,7 +1821,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
   const compactSplitMoved = compactSplit !== compactSplitDefault;
   const anyMoved = navDrag.hasMoved || editorDrag.hasMoved || editorResize.hasResized || compactSplitMoved;
   const configKey = "_" + pageKey.replace(/\//g, "--");
-  useEffect6(() => {
+  useEffect7(() => {
     loadPageConfig();
   }, [pageKey]);
   async function loadPageConfig() {
@@ -1640,7 +1848,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     }
     return null;
   }
-  const scrollToSection = useCallback9((sectionKey) => {
+  const scrollToSection = useCallback10((sectionKey) => {
     const iframe = iframeRef.current;
     if (!iframe?.contentWindow) return;
     iframe.contentWindow.postMessage(
@@ -1648,7 +1856,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
       "*"
     );
   }, []);
-  const syncSectionsToPreview = useCallback9((sections2) => {
+  const syncSectionsToPreview = useCallback10((sections2) => {
     const iframe = iframeRef.current;
     if (!iframe?.contentWindow) return;
     iframe.contentWindow.postMessage(
@@ -1656,9 +1864,9 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
       "*"
     );
   }, []);
-  const pageConfigRef = useRef6(pageConfig);
+  const pageConfigRef = useRef8(pageConfig);
   pageConfigRef.current = pageConfig;
-  const handleIframeLoad = useCallback9(() => {
+  const handleIframeLoad = useCallback10(() => {
     setTimeout(() => {
       if (scrollAfterLoadRef.current) {
         scrollToSection(scrollAfterLoadRef.current);
@@ -1669,7 +1877,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
       }
     }, 200);
   }, [scrollToSection, syncSectionsToPreview]);
-  useEffect6(() => {
+  useEffect7(() => {
     function handleMessage(event) {
       if (event.data?.type === "sk:visible-section") {
         setVisibleSection(event.data.section);
@@ -1678,22 +1886,22 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, []);
-  const openEditor = useCallback9((sectionKey) => {
+  const openEditor = useCallback10((sectionKey) => {
     setEditingSection(sectionKey);
     setEditorOpen(true);
     setEditorCollapsed(false);
     scrollToSection(sectionKey);
   }, [scrollToSection]);
-  const closeEditor = useCallback9(() => {
+  const closeEditor = useCallback10(() => {
     setEditorOpen(false);
     setEditorCollapsed(false);
     setEditingSection(null);
   }, []);
-  const reloadPreview = useCallback9((scrollTo) => {
+  const reloadPreview = useCallback10((scrollTo) => {
     scrollAfterLoadRef.current = scrollTo ?? visibleSection;
     setPreviewKey((k) => k + 1);
   }, [visibleSection]);
-  const needsSsrReload = useCallback9((sectionKey, values) => {
+  const needsSsrReload = useCallback10((sectionKey, values) => {
     const product = Object.values(config.products)[0];
     const section = product?.sections[sectionKey];
     if (!section) return true;
@@ -1722,7 +1930,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     }
     return hasNonTextChanges(prev, values, section.fields);
   }, [config]);
-  const updateDraft = useCallback9((sectionKey, values) => {
+  const updateDraft = useCallback10((sectionKey, values) => {
     const requiresReload = needsSsrReload(sectionKey, values);
     draftCacheRef.current[sectionKey] = values;
     if (requiresReload) {
@@ -1742,7 +1950,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
       );
     }
   }, [needsSsrReload, reloadPreview]);
-  const clearDraftCache = useCallback9((sectionKey) => {
+  const clearDraftCache = useCallback10((sectionKey) => {
     delete draftCacheRef.current[sectionKey];
     fetch("/api/setzkasten/draft", {
       method: "DELETE",
@@ -1751,11 +1959,11 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     }).catch(() => {
     });
   }, []);
-  const discardDraft = useCallback9((sectionKey) => {
+  const discardDraft = useCallback10((sectionKey) => {
     clearDraftCache(sectionKey);
     reloadPreview(sectionKey);
   }, [clearDraftCache, reloadPreview]);
-  const toggleSection = useCallback9((sectionKey) => {
+  const toggleSection = useCallback10((sectionKey) => {
     setPageConfig((prev) => {
       if (!prev) return prev;
       const updated = {
@@ -1769,14 +1977,14 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     });
     setConfigDirty(true);
   }, [syncSectionsToPreview]);
-  const handleDragStart = useCallback9((index) => {
+  const handleDragStart = useCallback10((index) => {
     setDragIndex(index);
   }, []);
-  const handleDragOver = useCallback9((e, index) => {
+  const handleDragOver = useCallback10((e, index) => {
     e.preventDefault();
     setDragOverIndex(index);
   }, []);
-  const handleDragEnd = useCallback9(() => {
+  const handleDragEnd = useCallback10(() => {
     if (dragIndex !== null && dragOverIndex !== null && dragIndex !== dragOverIndex) {
       setPageConfig((prev) => {
         if (!prev) return prev;
@@ -1793,7 +2001,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
     setDragIndex(null);
     setDragOverIndex(null);
   }, [dragIndex, dragOverIndex, syncSectionsToPreview]);
-  const savePageConfig = useCallback9(async () => {
+  const savePageConfig = useCallback10(async () => {
     if (!pageConfig || savingConfig) return;
     setSavingConfig(true);
     try {
@@ -1822,26 +2030,26 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
   const viewportWidth = viewportWidths[viewport];
   const isCompact = viewport === "compact";
   if (loading) {
-    return /* @__PURE__ */ jsx16("div", { className: "sk-pb", children: /* @__PURE__ */ jsx16("div", { className: "sk-pb__loading", children: "Lade Page Builder..." }) });
+    return /* @__PURE__ */ jsx18("div", { className: "sk-pb", children: /* @__PURE__ */ jsx18("div", { className: "sk-pb__loading", children: "Lade Page Builder..." }) });
   }
   const sections = pageConfig?.sections ?? [];
-  const navContent = /* @__PURE__ */ jsxs15(Fragment3, { children: [
-    /* @__PURE__ */ jsxs15("div", { className: "sk-pb__nav-header", children: [
-      navCollapsed && visibleSection && /* @__PURE__ */ jsxs15(
+  const navContent = /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "sk-pb__nav-header", children: [
+      navCollapsed && visibleSection && /* @__PURE__ */ jsxs17(
         "button",
         {
           type: "button",
           className: "sk-pb__inline-edit-btn",
           onClick: () => openEditor(visibleSection),
           children: [
-            /* @__PURE__ */ jsx16(Edit, { size: 14 }),
+            /* @__PURE__ */ jsx18(Edit, { size: 14 }),
             getSectionDef(visibleSection)?.label ?? visibleSection
           ]
         }
       ),
-      !navCollapsed && /* @__PURE__ */ jsx16("span", { className: "sk-pb__nav-title", children: "Sections" }),
-      !navCollapsed && /* @__PURE__ */ jsxs15("div", { className: "sk-pb__nav-actions", children: [
-        /* @__PURE__ */ jsx16(
+      !navCollapsed && /* @__PURE__ */ jsx18("span", { className: "sk-pb__nav-title", children: "Sections" }),
+      !navCollapsed && /* @__PURE__ */ jsxs17("div", { className: "sk-pb__nav-actions", children: [
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -1851,10 +2059,10 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
               setNavCollapsed(true);
             },
             title: "Compact Desktop",
-            children: /* @__PURE__ */ jsx16(AppWindow, { size: 14 })
+            children: /* @__PURE__ */ jsx18(AppWindow, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -1864,10 +2072,10 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
               setNavCollapsed(true);
             },
             title: "Desktop",
-            children: /* @__PURE__ */ jsx16(Monitor, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Monitor, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -1877,10 +2085,10 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
               setNavCollapsed(false);
             },
             title: "Tablet",
-            children: /* @__PURE__ */ jsx16(Tablet, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Tablet, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -1890,54 +2098,54 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
               setNavCollapsed(false);
             },
             title: "Mobile",
-            children: /* @__PURE__ */ jsx16(Smartphone, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Smartphone, { size: 14 })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "sk-pb__nav-header-right", children: [
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs17("div", { className: "sk-pb__nav-header-right", children: [
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
             className: "sk-pb__collapse-btn",
             onClick: () => setNavCollapsed((c) => !c),
             title: navCollapsed ? "Navigation aufklappen" : "Navigation einklappen",
-            children: navCollapsed ? /* @__PURE__ */ jsx16(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx16(ChevronUp, { size: 14 })
+            children: navCollapsed ? /* @__PURE__ */ jsx18(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx18(ChevronUp, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
             className: "sk-pb__exit-btn",
             onClick: onExit,
             title: "Page Builder verlassen",
-            children: /* @__PURE__ */ jsx16(X, { size: 16 })
+            children: /* @__PURE__ */ jsx18(X, { size: 16 })
           }
         )
       ] })
     ] }),
-    !navCollapsed && /* @__PURE__ */ jsxs15(Fragment3, { children: [
-      pages.length > 1 && onPageChange && /* @__PURE__ */ jsxs15("div", { className: "sk-pb__page-switcher", children: [
-        /* @__PURE__ */ jsx16("label", { className: "sk-pb__page-switcher-label", children: "Seite" }),
-        /* @__PURE__ */ jsx16(
+    !navCollapsed && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      pages.length > 1 && onPageChange && /* @__PURE__ */ jsxs17("div", { className: "sk-pb__page-switcher", children: [
+        /* @__PURE__ */ jsx18("label", { className: "sk-pb__page-switcher-label", children: "Seite" }),
+        /* @__PURE__ */ jsx18(
           "select",
           {
             className: "sk-pb__page-select",
             value: pageKey,
             onChange: (e) => onPageChange(e.target.value),
-            children: pages.map((p) => /* @__PURE__ */ jsx16("option", { value: p.pageKey, children: p.label }, p.pageKey))
+            children: pages.map((p) => /* @__PURE__ */ jsx18("option", { value: p.pageKey, children: p.label }, p.pageKey))
           }
         )
       ] }),
-      /* @__PURE__ */ jsx16("div", { className: "sk-pb__section-list", children: sections.map((section, index) => {
+      /* @__PURE__ */ jsx18("div", { className: "sk-pb__section-list", children: sections.map((section, index) => {
         const def = getSectionDef(section.key);
         const IconComp = def?.icon ? ICON_MAP[def.icon] : null;
         const isVisible = visibleSection === section.key;
         const isEditing = editingSection === section.key;
         const isDragging = dragIndex === index;
         const isDragOver = dragOverIndex === index;
-        return /* @__PURE__ */ jsxs15(
+        return /* @__PURE__ */ jsxs17(
           "div",
           {
             className: `sk-pb__section-pill${isEditing ? " sk-pb__section-pill--editing" : ""}${isVisible && !isEditing ? " sk-pb__section-pill--visible" : ""}${!section.enabled ? " sk-pb__section-pill--disabled" : ""}${isDragging ? " sk-pb__section-pill--dragging" : ""}${isDragOver ? " sk-pb__section-pill--dragover" : ""}`,
@@ -1946,20 +2154,20 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             onDragOver: (e) => handleDragOver(e, index),
             onDragEnd: handleDragEnd,
             children: [
-              /* @__PURE__ */ jsx16("span", { className: "sk-pb__section-grip", children: /* @__PURE__ */ jsx16(GripVertical, { size: 14 }) }),
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsx18("span", { className: "sk-pb__section-grip", children: /* @__PURE__ */ jsx18(GripVertical, { size: 14 }) }),
+              /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   type: "button",
                   className: "sk-pb__section-main",
                   onClick: () => openEditor(section.key),
                   children: [
-                    IconComp && /* @__PURE__ */ jsx16("span", { className: "sk-pb__section-icon", children: /* @__PURE__ */ jsx16(IconComp, { size: 16 }) }),
-                    /* @__PURE__ */ jsx16("span", { className: "sk-pb__section-label", children: def?.label ?? section.key })
+                    IconComp && /* @__PURE__ */ jsx18("span", { className: "sk-pb__section-icon", children: /* @__PURE__ */ jsx18(IconComp, { size: 16 }) }),
+                    /* @__PURE__ */ jsx18("span", { className: "sk-pb__section-label", children: def?.label ?? section.key })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   type: "button",
@@ -1969,7 +2177,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
                     toggleSection(section.key);
                   },
                   title: section.enabled ? "Section ausblenden" : "Section einblenden",
-                  children: section.enabled ? /* @__PURE__ */ jsx16(Eye, { size: 14 }) : /* @__PURE__ */ jsx16(EyeOff, { size: 14 })
+                  children: section.enabled ? /* @__PURE__ */ jsx18(Eye, { size: 14 }) : /* @__PURE__ */ jsx18(EyeOff, { size: 14 })
                 }
               )
             ]
@@ -1977,7 +2185,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
           section.key
         );
       }) }),
-      configDirty && /* @__PURE__ */ jsx16("div", { className: "sk-pb__nav-footer", children: /* @__PURE__ */ jsxs15(
+      configDirty && /* @__PURE__ */ jsx18("div", { className: "sk-pb__nav-footer", children: /* @__PURE__ */ jsxs17(
         "button",
         {
           type: "button",
@@ -1985,14 +2193,14 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
           onClick: savePageConfig,
           disabled: savingConfig,
           children: [
-            /* @__PURE__ */ jsx16(Save, { size: 14 }),
+            /* @__PURE__ */ jsx18(Save, { size: 14 }),
             savingConfig ? "Speichert..." : "Reihenfolge speichern"
           ]
         }
       ) })
     ] })
   ] });
-  const editorPanel = editorOpen && editingSection && !editorCollapsed && (getSectionDef(editingSection) ? /* @__PURE__ */ jsx16(
+  const editorPanel = editorOpen && editingSection && !editorCollapsed && (getSectionDef(editingSection) ? /* @__PURE__ */ jsx18(
     SectionSlideOver,
     {
       sectionKey: editingSection,
@@ -2005,25 +2213,25 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
       onSaved: clearDraftCache
     },
     editingSection
-  ) : /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over-header", children: [
-      /* @__PURE__ */ jsx16("h3", { children: editingSection }),
-      /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over-actions", children: [
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "sk-pb__collapse-btn", onClick: () => setEditorCollapsed(true), title: "Einklappen", children: /* @__PURE__ */ jsx16(PanelRightClose, { size: 16 }) }),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "sk-pb__close-btn", onClick: closeEditor, children: /* @__PURE__ */ jsx16(X, { size: 18 }) })
+  ) : /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over-header", children: [
+      /* @__PURE__ */ jsx18("h3", { children: editingSection }),
+      /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over-actions", children: [
+        /* @__PURE__ */ jsx18("button", { type: "button", className: "sk-pb__collapse-btn", onClick: () => setEditorCollapsed(true), title: "Einklappen", children: /* @__PURE__ */ jsx18(PanelRightClose, { size: 16 }) }),
+        /* @__PURE__ */ jsx18("button", { type: "button", className: "sk-pb__close-btn", onClick: closeEditor, children: /* @__PURE__ */ jsx18(X, { size: 18 }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "sk-pb__slide-over-body", children: /* @__PURE__ */ jsx16("p", { className: "sk-pb__slide-over-info", children: "Diese Section hat noch kein editierbares Schema." }) })
+    /* @__PURE__ */ jsx18("div", { className: "sk-pb__slide-over-body", children: /* @__PURE__ */ jsx18("p", { className: "sk-pb__slide-over-info", children: "Diese Section hat noch kein editierbares Schema." }) })
   ] }));
   const editorFloatTransform = editorDrag.hasMoved ? { transform: `translate(${editorDrag.offset.x}px, ${editorDrag.offset.y}px)` } : {};
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: pbRef,
       className: `sk-pb${isCompact ? " sk-pb--compact" : ""}`,
       style: isCompact ? { "--sk-split": `${compactSplit}` } : void 0,
       children: [
-        /* @__PURE__ */ jsx16("div", { className: "sk-pb__preview", children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18("div", { className: "sk-pb__preview", children: /* @__PURE__ */ jsx18(
           "div",
           {
             className: "sk-pb__iframe-container",
@@ -2031,7 +2239,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
               maxWidth: isCompact ? "calc(var(--sk-split, 66) * 1vw)" : viewportWidth,
               margin: viewport === "desktop" ? void 0 : isCompact ? "0" : "0 auto"
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx18(
               "iframe",
               {
                 ref: iframeRef,
@@ -2044,7 +2252,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             )
           }
         ) }),
-        isCompact && /* @__PURE__ */ jsx16(
+        isCompact && /* @__PURE__ */ jsx18(
           "div",
           {
             className: "sk-pb__split-divider",
@@ -2052,7 +2260,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             onMouseDown: onSplitDragStart
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "div",
           {
             ref: navRef,
@@ -2062,7 +2270,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             children: navContent
           }
         ),
-        editorPanel && /* @__PURE__ */ jsxs15(
+        editorPanel && /* @__PURE__ */ jsxs17(
           "div",
           {
             className: "sk-pb__editor-float",
@@ -2073,7 +2281,7 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             },
             onMouseDown: editorDrag.onMouseDown,
             children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx18(
                 "div",
                 {
                   className: "sk-pb__resize-corner sk-pb__resize-corner--bl",
@@ -2084,24 +2292,24 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
             ]
           }
         ),
-        editorOpen && editingSection && editorCollapsed && /* @__PURE__ */ jsx16(
+        editorOpen && editingSection && editorCollapsed && /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
             className: "sk-pb__editor-expand-btn",
             onClick: () => setEditorCollapsed(false),
             title: "Editor aufklappen",
-            children: /* @__PURE__ */ jsx16(PanelRightOpen, { size: 16 })
+            children: /* @__PURE__ */ jsx18(PanelRightOpen, { size: 16 })
           }
         ),
-        anyMoved && /* @__PURE__ */ jsx16(
+        anyMoved && /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
             className: "sk-pb__reset-pos-btn",
             onClick: resetAllPositions,
             title: "Panel-Positionen zur\xFCcksetzen",
-            children: /* @__PURE__ */ jsx16(RotateCcw, { size: 14 })
+            children: /* @__PURE__ */ jsx18(RotateCcw, { size: 14 })
           }
         )
       ]
@@ -2111,22 +2319,22 @@ function PageBuilder({ pageKey = "index", pages = [], onPageChange, onExit }) {
 function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollapse, onDraftUpdate, onDiscard, onSaved }) {
   const repository = useRepository();
   const { toast } = useToast();
-  const [initialValues, setInitialValues] = useState8({});
-  const [loading, setLoading] = useState8(true);
-  const [saving, setSaving] = useState8(false);
-  const [sha, setSha] = useState8();
-  const [conflict, setConflict] = useState8(null);
-  const storeRef = useRef6(null);
-  const [formStore, setFormStore] = useState8(null);
-  const draftTimerRef = useRef6(null);
-  const saveRef = useRef6(null);
-  const undoRef = useRef6(null);
-  const redoRef = useRef6(null);
-  const storeSnapshotRef = useRef6({ dirty: false, canUndo: false, canRedo: false });
+  const [initialValues, setInitialValues] = useState10({});
+  const [loading, setLoading] = useState10(true);
+  const [saving, setSaving] = useState10(false);
+  const [sha, setSha] = useState10();
+  const [conflict, setConflict] = useState10(null);
+  const storeRef = useRef8(null);
+  const [formStore, setFormStore] = useState10(null);
+  const draftTimerRef = useRef8(null);
+  const saveRef = useRef8(null);
+  const undoRef = useRef8(null);
+  const redoRef = useRef8(null);
+  const storeSnapshotRef = useRef8({ dirty: false, canUndo: false, canRedo: false });
   const storeState = useSyncExternalStore(
-    useCallback9((cb) => formStore?.subscribe(cb) ?? (() => {
+    useCallback10((cb) => formStore?.subscribe(cb) ?? (() => {
     }), [formStore]),
-    useCallback9(() => {
+    useCallback10(() => {
       if (!formStore) return storeSnapshotRef.current;
       const s = formStore.getState();
       const dirty = s.isDirty();
@@ -2139,7 +2347,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
       return storeSnapshotRef.current;
     }, [formStore])
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setLoading(true);
     repository.getEntry("_sections", sectionKey).then((result) => {
       if (result.ok) {
@@ -2149,7 +2357,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
       setLoading(false);
     });
   }, [sectionKey, repository]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (formStore) return;
     const check = setInterval(() => {
       if (storeRef.current && !formStore) {
@@ -2159,7 +2367,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
     }, 50);
     return () => clearInterval(check);
   }, [formStore, loading]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!formStore) return;
     const unsub = formStore.subscribe((state) => {
       if (draftTimerRef.current) clearTimeout(draftTimerRef.current);
@@ -2172,7 +2380,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
       if (draftTimerRef.current) clearTimeout(draftTimerRef.current);
     };
   }, [formStore, sectionKey, onDraftUpdate]);
-  const handleSave = useCallback9(async (values) => {
+  const handleSave = useCallback10(async (values) => {
     setSaving(true);
     const result = await repository.saveEntry("_sections", sectionKey, {
       content: values,
@@ -2218,7 +2426,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
     if (!store) return;
     store.getState().redo();
   };
-  const resolveConflictLocal = useCallback9(async () => {
+  const resolveConflictLocal = useCallback10(async () => {
     if (!conflict) return;
     setSaving(true);
     const result = await repository.saveEntry("_sections", sectionKey, {
@@ -2236,7 +2444,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
     }
     setSaving(false);
   }, [conflict, repository, sectionKey, onSaved, toast]);
-  const resolveConflictRemote = useCallback9(() => {
+  const resolveConflictRemote = useCallback10(() => {
     if (!conflict) return;
     const store = storeRef.current;
     if (store) {
@@ -2248,13 +2456,13 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
     onDiscard(sectionKey);
     toast("Remote-Version \xFCbernommen.", "success");
   }, [conflict, section.fields, sectionKey, onDiscard, toast]);
-  const handleDiscard = useCallback9(() => {
+  const handleDiscard = useCallback10(() => {
     const store = storeRef.current;
     if (!store) return;
     store.getState().resetToInitial();
     onDiscard(sectionKey);
   }, [sectionKey, onDiscard]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
@@ -2275,24 +2483,24 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over-header", children: [
-      /* @__PURE__ */ jsx16("div", { className: "sk-pb__slide-over-title", children: storeState.dirty && /* @__PURE__ */ jsxs15("span", { className: "sk-pb__draft-indicator", title: "Ungespeicherte \xC4nderungen", children: [
-        /* @__PURE__ */ jsx16("span", { className: "sk-pb__draft-dot" }),
+  return /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over-header", children: [
+      /* @__PURE__ */ jsx18("div", { className: "sk-pb__slide-over-title", children: storeState.dirty && /* @__PURE__ */ jsxs17("span", { className: "sk-pb__draft-indicator", title: "Ungespeicherte \xC4nderungen", children: [
+        /* @__PURE__ */ jsx18("span", { className: "sk-pb__draft-dot" }),
         "Entwurf"
       ] }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over-actions", children: [
-        storeState.dirty && /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over-actions", children: [
+        storeState.dirty && /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
             className: "sk-pb__discard-btn",
             onClick: handleDiscard,
             title: "\xC4nderungen verwerfen",
-            children: /* @__PURE__ */ jsx16(Trash2, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Trash2, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -2300,10 +2508,10 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
             onClick: () => undoRef.current?.(),
             disabled: !storeState.canUndo,
             title: "R\xFCckg\xE4ngig (Cmd+Z)",
-            children: /* @__PURE__ */ jsx16(Undo2, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Undo2, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -2311,10 +2519,10 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
             onClick: () => redoRef.current?.(),
             disabled: !storeState.canRedo,
             title: "Wiederholen (Cmd+Shift+Z)",
-            children: /* @__PURE__ */ jsx16(Redo2, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Redo2, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -2322,41 +2530,41 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
             onClick: () => saveRef.current?.(),
             disabled: saving || !storeState.dirty,
             title: "Speichern (Cmd+S)",
-            children: /* @__PURE__ */ jsx16(Save, { size: 14 })
+            children: /* @__PURE__ */ jsx18(Save, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "sk-pb__collapse-btn", onClick: onCollapse, title: "Einklappen", children: /* @__PURE__ */ jsx16(PanelRightClose, { size: 16 }) }),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "sk-pb__close-btn", onClick: onClose, children: /* @__PURE__ */ jsx16(X, { size: 18 }) })
+        /* @__PURE__ */ jsx18("button", { type: "button", className: "sk-pb__collapse-btn", onClick: onCollapse, title: "Einklappen", children: /* @__PURE__ */ jsx18(PanelRightClose, { size: 16 }) }),
+        /* @__PURE__ */ jsx18("button", { type: "button", className: "sk-pb__close-btn", onClick: onClose, children: /* @__PURE__ */ jsx18(X, { size: 18 }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "sk-pb__slide-over-body", children: [
-      conflict && /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict", children: [
-        /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-header", children: [
-          /* @__PURE__ */ jsx16(Shield, { size: 16 }),
-          /* @__PURE__ */ jsx16("strong", { children: "Konflikt" }),
+    /* @__PURE__ */ jsxs17("div", { className: "sk-pb__slide-over-body", children: [
+      conflict && /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-header", children: [
+          /* @__PURE__ */ jsx18(Shield, { size: 16 }),
+          /* @__PURE__ */ jsx18("strong", { children: "Konflikt" }),
           " \u2014 Die Datei wurde extern ge\xE4ndert."
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "sk-pb__conflict-diff", children: Object.keys({ ...conflict.local, ...conflict.remote }).filter((key) => JSON.stringify(conflict.local[key]) !== JSON.stringify(conflict.remote[key])).map((key) => {
+        /* @__PURE__ */ jsx18("div", { className: "sk-pb__conflict-diff", children: Object.keys({ ...conflict.local, ...conflict.remote }).filter((key) => JSON.stringify(conflict.local[key]) !== JSON.stringify(conflict.remote[key])).map((key) => {
           const fieldDef = section.fields[key];
           const label = fieldDef?.label ?? key;
           const localVal = JSON.stringify(conflict.local[key], null, 2) ?? "\u2014";
           const remoteVal = JSON.stringify(conflict.remote[key], null, 2) ?? "\u2014";
-          return /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-field", children: [
-            /* @__PURE__ */ jsx16("div", { className: "sk-pb__conflict-label", children: label }),
-            /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-values", children: [
-              /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-local", children: [
-                /* @__PURE__ */ jsx16("span", { className: "sk-pb__conflict-tag", children: "Deine Version" }),
-                /* @__PURE__ */ jsx16("pre", { children: localVal })
+          return /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-field", children: [
+            /* @__PURE__ */ jsx18("div", { className: "sk-pb__conflict-label", children: label }),
+            /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-values", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-local", children: [
+                /* @__PURE__ */ jsx18("span", { className: "sk-pb__conflict-tag", children: "Deine Version" }),
+                /* @__PURE__ */ jsx18("pre", { children: localVal })
               ] }),
-              /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-remote", children: [
-                /* @__PURE__ */ jsx16("span", { className: "sk-pb__conflict-tag", children: "Remote" }),
-                /* @__PURE__ */ jsx16("pre", { children: remoteVal })
+              /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-remote", children: [
+                /* @__PURE__ */ jsx18("span", { className: "sk-pb__conflict-tag", children: "Remote" }),
+                /* @__PURE__ */ jsx18("pre", { children: remoteVal })
               ] })
             ] })
           ] }, key);
         }) }),
-        /* @__PURE__ */ jsxs15("div", { className: "sk-pb__conflict-actions", children: [
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs17("div", { className: "sk-pb__conflict-actions", children: [
+          /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
@@ -2366,7 +2574,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
               children: "Meine Version \xFCbernehmen"
             }
           ),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
@@ -2377,7 +2585,7 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
           )
         ] })
       ] }),
-      loading ? /* @__PURE__ */ jsx16("p", { className: "sk-pb__slide-over-loading", children: "Lade..." }) : /* @__PURE__ */ jsx16(
+      loading ? /* @__PURE__ */ jsx18("p", { className: "sk-pb__slide-over-loading", children: "Lade..." }) : /* @__PURE__ */ jsx18(
         EntryForm,
         {
           schema: section.fields,
@@ -2393,12 +2601,12 @@ function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollap
 
 // src/components/admin-app.tsx
 import { Layers, Globe as Globe2, Settings as Settings2 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function AdminApp() {
   const config = useConfig();
-  const [user, setUser] = useState9(null);
-  const [checking, setChecking] = useState9(true);
-  useEffect7(() => {
+  const [user, setUser] = useState11(null);
+  const [checking, setChecking] = useState11(true);
+  useEffect8(() => {
     checkSession();
   }, []);
   async function checkSession() {
@@ -2414,53 +2622,53 @@ function AdminApp() {
     }
   }
   if (checking) {
-    return /* @__PURE__ */ jsx17(LoadingScreen, {});
+    return /* @__PURE__ */ jsx19(LoadingScreen, {});
   }
   if (!user) {
-    return /* @__PURE__ */ jsx17(LoginScreen, { config });
+    return /* @__PURE__ */ jsx19(LoginScreen, { config });
   }
-  return /* @__PURE__ */ jsx17(ToastProvider, { children: /* @__PURE__ */ jsx17(AdminShell, { config, user }) });
+  return /* @__PURE__ */ jsx19(ToastProvider, { children: /* @__PURE__ */ jsx19(AdminShell, { config, user }) });
 }
 function LoadingScreen() {
-  return /* @__PURE__ */ jsxs16("div", { className: "sk-admin-loading", children: [
-    /* @__PURE__ */ jsx17("div", { className: "sk-admin-loading__spinner" }),
-    /* @__PURE__ */ jsx17("p", { className: "sk-admin-loading__text", children: "Lade Setzkasten..." })
+  return /* @__PURE__ */ jsxs18("div", { className: "sk-admin-loading", children: [
+    /* @__PURE__ */ jsx19("div", { className: "sk-admin-loading__spinner" }),
+    /* @__PURE__ */ jsx19("p", { className: "sk-admin-loading__text", children: "Lade Setzkasten..." })
   ] });
 }
 function LoginScreen({ config }) {
   const providers = config.auth?.providers ?? ["github"];
-  return /* @__PURE__ */ jsx17("div", { className: "sk-login", children: /* @__PURE__ */ jsxs16("div", { className: "sk-login__card", children: [
-    /* @__PURE__ */ jsx17("div", { className: "sk-login__logo", children: "S" }),
-    /* @__PURE__ */ jsx17("h1", { className: "sk-login__title", children: config.theme?.brandName ?? "Setzkasten" }),
-    /* @__PURE__ */ jsx17("p", { className: "sk-login__subtitle", children: "Melde dich an, um Inhalte zu bearbeiten." }),
-    providers.includes("github") && /* @__PURE__ */ jsxs16("a", { href: "/api/setzkasten/auth/login?provider=github", className: "sk-login__btn", children: [
-      /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx17("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844a9.59 9.59 0 012.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0022 12.017C22 6.484 17.522 2 12 2Z" }) }),
+  return /* @__PURE__ */ jsx19("div", { className: "sk-login", children: /* @__PURE__ */ jsxs18("div", { className: "sk-login__card", children: [
+    /* @__PURE__ */ jsx19("div", { className: "sk-login__logo", children: "S" }),
+    /* @__PURE__ */ jsx19("h1", { className: "sk-login__title", children: config.theme?.brandName ?? "Setzkasten" }),
+    /* @__PURE__ */ jsx19("p", { className: "sk-login__subtitle", children: "Melde dich an, um Inhalte zu bearbeiten." }),
+    providers.includes("github") && /* @__PURE__ */ jsxs18("a", { href: "/api/setzkasten/auth/login?provider=github", className: "sk-login__btn", children: [
+      /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx19("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844a9.59 9.59 0 012.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0022 12.017C22 6.484 17.522 2 12 2Z" }) }),
       "Mit GitHub anmelden"
     ] }),
-    providers.includes("google") && /* @__PURE__ */ jsxs16("a", { href: "/api/setzkasten/auth/login?provider=google", className: "sk-login__btn", children: [
-      /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
-        /* @__PURE__ */ jsx17("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
-        /* @__PURE__ */ jsx17("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
-        /* @__PURE__ */ jsx17("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
-        /* @__PURE__ */ jsx17("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+    providers.includes("google") && /* @__PURE__ */ jsxs18("a", { href: "/api/setzkasten/auth/login?provider=google", className: "sk-login__btn", children: [
+      /* @__PURE__ */ jsxs18("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+        /* @__PURE__ */ jsx19("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
+        /* @__PURE__ */ jsx19("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+        /* @__PURE__ */ jsx19("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+        /* @__PURE__ */ jsx19("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
       ] }),
       "Mit Google anmelden"
     ] })
   ] }) });
 }
 function AdminShell({ config, user }) {
-  const [view, setView] = useState9("dashboard");
-  const [pages, setPages] = useState9([]);
-  const [selectedPageKey, setSelectedPageKey] = useState9("index");
-  const [loadingPages, setLoadingPages] = useState9(true);
-  useEffect7(() => {
+  const [view, setView] = useState11("dashboard");
+  const [pages, setPages] = useState11([]);
+  const [selectedPageKey, setSelectedPageKey] = useState11("index");
+  const [loadingPages, setLoadingPages] = useState11(true);
+  useEffect8(() => {
     fetch("/api/setzkasten/pages").then((r) => r.json()).then((data) => {
       setPages(data.pages ?? []);
     }).catch(() => {
     }).finally(() => setLoadingPages(false));
   }, []);
   if (view === "page-builder") {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       PageBuilder,
       {
         pageKey: selectedPageKey,
@@ -2470,7 +2678,7 @@ function AdminShell({ config, user }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Dashboard,
     {
       config,
@@ -2493,43 +2701,43 @@ function Dashboard({
   onOpenPageBuilder
 }) {
   const brandName = config.theme?.brandName ?? "Setzkasten";
-  return /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard", children: [
-    /* @__PURE__ */ jsxs16("header", { className: "sk-dashboard__topbar", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__brand", children: [
-        /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__logo", children: "S" }),
-        /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__brand-name", children: "Setzkasten" })
+  return /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard", children: [
+    /* @__PURE__ */ jsxs18("header", { className: "sk-dashboard__topbar", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__brand", children: [
+        /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__logo", children: "S" }),
+        /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__brand-name", children: "Setzkasten" })
       ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__user", children: [
-        user.avatarUrl ? /* @__PURE__ */ jsx17("img", { src: user.avatarUrl, className: "sk-dashboard__avatar", alt: "" }) : /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__avatar sk-dashboard__avatar--placeholder", children: (user.name ?? user.email ?? "?")[0].toUpperCase() }),
-        /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__user-name", children: user.name || user.email }),
-        /* @__PURE__ */ jsx17("a", { href: "/api/setzkasten/auth/logout", className: "sk-dashboard__logout", children: "Abmelden" })
+      /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__user", children: [
+        user.avatarUrl ? /* @__PURE__ */ jsx19("img", { src: user.avatarUrl, className: "sk-dashboard__avatar", alt: "" }) : /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__avatar sk-dashboard__avatar--placeholder", children: (user.name ?? user.email ?? "?")[0].toUpperCase() }),
+        /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__user-name", children: user.name || user.email }),
+        /* @__PURE__ */ jsx19("a", { href: "/api/setzkasten/auth/logout", className: "sk-dashboard__logout", children: "Abmelden" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs16("main", { className: "sk-dashboard__content", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__card sk-dashboard__card--primary", children: [
-        /* @__PURE__ */ jsx17("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx17(Layers, { size: 28 }) }),
-        /* @__PURE__ */ jsx17("h2", { className: "sk-dashboard__card-title", children: "Zum Setzkasten f\xFCr" }),
-        /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__card-controls", children: [
-          /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsxs18("main", { className: "sk-dashboard__content", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__card sk-dashboard__card--primary", children: [
+        /* @__PURE__ */ jsx19("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx19(Layers, { size: 28 }) }),
+        /* @__PURE__ */ jsx19("h2", { className: "sk-dashboard__card-title", children: "Zum Setzkasten f\xFCr" }),
+        /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__card-controls", children: [
+          /* @__PURE__ */ jsx19(
             "select",
             {
               className: "sk-dashboard__select",
               disabled: true,
               value: brandName,
-              children: /* @__PURE__ */ jsx17("option", { children: brandName })
+              children: /* @__PURE__ */ jsx19("option", { children: brandName })
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx19(
             "select",
             {
               className: "sk-dashboard__select",
               value: selectedPageKey,
               onChange: (e) => onSelectPage(e.target.value),
               disabled: loadingPages || pages.length === 0,
-              children: loadingPages ? /* @__PURE__ */ jsx17("option", { children: "Lade..." }) : pages.length === 0 ? /* @__PURE__ */ jsx17("option", { value: "index", children: "Startseite" }) : pages.map((p) => /* @__PURE__ */ jsx17("option", { value: p.pageKey, children: p.label }, p.pageKey))
+              children: loadingPages ? /* @__PURE__ */ jsx19("option", { children: "Lade..." }) : pages.length === 0 ? /* @__PURE__ */ jsx19("option", { value: "index", children: "Startseite" }) : pages.map((p) => /* @__PURE__ */ jsx19("option", { value: p.pageKey, children: p.label }, p.pageKey))
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -2540,16 +2748,16 @@ function Dashboard({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__cards-row", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__card sk-dashboard__card--disabled", children: [
-          /* @__PURE__ */ jsx17("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx17(Globe2, { size: 22 }) }),
-          /* @__PURE__ */ jsx17("h3", { className: "sk-dashboard__card-subtitle", children: "Websites verwalten" }),
-          /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__badge", children: "Kommt bald" })
+      /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__cards-row", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__card sk-dashboard__card--disabled", children: [
+          /* @__PURE__ */ jsx19("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx19(Globe2, { size: 22 }) }),
+          /* @__PURE__ */ jsx19("h3", { className: "sk-dashboard__card-subtitle", children: "Websites verwalten" }),
+          /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__badge", children: "Kommt bald" })
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "sk-dashboard__card sk-dashboard__card--disabled", children: [
-          /* @__PURE__ */ jsx17("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx17(Settings2, { size: 22 }) }),
-          /* @__PURE__ */ jsx17("h3", { className: "sk-dashboard__card-subtitle", children: "Globale Konfiguration" }),
-          /* @__PURE__ */ jsx17("span", { className: "sk-dashboard__badge", children: "Kommt bald" })
+        /* @__PURE__ */ jsxs18("div", { className: "sk-dashboard__card sk-dashboard__card--disabled", children: [
+          /* @__PURE__ */ jsx19("div", { className: "sk-dashboard__card-icon", children: /* @__PURE__ */ jsx19(Settings2, { size: 22 }) }),
+          /* @__PURE__ */ jsx19("h3", { className: "sk-dashboard__card-subtitle", children: "Globale Konfiguration" }),
+          /* @__PURE__ */ jsx19("span", { className: "sk-dashboard__badge", children: "Kommt bald" })
         ] })
       ] })
     ] })
@@ -2557,12 +2765,12 @@ function Dashboard({
 }
 
 // src/hooks/use-save.ts
-import { useCallback as useCallback10, useState as useState10 } from "react";
+import { useCallback as useCallback11, useState as useState12 } from "react";
 function useSave(store, collection, slug) {
   const repository = useRepository();
   const eventBus = useEventBus();
-  const [saving, setSaving] = useState10(false);
-  const save = useCallback10(async () => {
+  const [saving, setSaving] = useState12(false);
+  const save = useCallback11(async () => {
     const state = store.getState();
     if (!state.isDirty()) {
       return { ok: true, value: { sha: "", message: "No changes" } };