@kyro-cms/admin 0.1.2

package/dist/server/chunks/_id__DvbD--iR.mjs

@@ -0,0 +1,992 @@
+import { c as createComponent } from './astro-component_Dbx3T2Nh.mjs';
+import 'piccolore';
+import { Q as renderTemplate, bb as defineScriptVars, a3 as addAttribute, B as maybeRenderHead } from './sequence_9cl7AJy-.mjs';
+import { r as renderComponent } from './server_peBx9VXG.mjs';
+import { $ as $$AdminLayout } from './AdminLayout_D-_JeUqC.mjs';
+import { c as collections } from './config_CPXslElD.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+
+function AutoForm({
+  config,
+  data = {},
+  errors = {},
+  onChange,
+  disabled
+}) {
+  const handleFieldChange = (fieldName, value) => {
+    onChange?.({
+      ...data,
+      [fieldName]: value
+    });
+  };
+  const renderField = (field, parentData) => {
+    if (field.admin?.hidden) return null;
+    const value = parentData !== void 0 ? parentData[field.name] : data[field.name];
+    const error = errors[field.name];
+    if (field.type === "row" && "fields" in field) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "kyro-form-row",
+          children: field.fields.map((f) => renderField(f, parentData))
+        },
+        field.name || `row-${Math.random()}`
+      );
+    }
+    if (field.type === "collapsible" && "fields" in field) {
+      return /* @__PURE__ */ jsxs(
+        "details",
+        {
+          className: "kyro-form-collapsible",
+          children: [
+            /* @__PURE__ */ jsxs("summary", { className: "kyro-form-collapsible-header", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+                }
+              ),
+              field.label
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "kyro-form-collapsible-content", children: field.fields.map(
+              (f) => renderField(f, parentData)
+            ) })
+          ]
+        },
+        field.name || `collapsible-${Math.random()}`
+      );
+    }
+    if (field.type === "tabs" && "tabs" in field) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "kyro-form-tabs",
+          children: field.tabs.map((tab, index) => /* @__PURE__ */ jsxs("div", { className: "kyro-form-tab", children: [
+            /* @__PURE__ */ jsx("h3", { className: "kyro-form-tab-title", children: tab.label }),
+            /* @__PURE__ */ jsx("div", { className: "kyro-form-tab-content", children: tab.fields.map((f) => renderField(f, parentData)) })
+          ] }, index))
+        },
+        field.name || `tabs-${Math.random()}`
+      );
+    }
+    switch (field.type) {
+      case "text":
+      case "email":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: field.type === "email" ? "email" : field.variant === "url" ? "url" : "text",
+              className: `kyro-form-input ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              placeholder: `Enter ${field.label || field.name}`,
+              minLength: field.minLength,
+              maxLength: field.maxLength
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "password":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "password",
+              className: `kyro-form-input ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              placeholder: `Enter ${field.label || field.name}`
+            }
+          ),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "textarea":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              rows: field.rows || 4,
+              placeholder: `Enter ${field.label || field.name}`
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "number":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              className: `kyro-form-input kyro-form-number ${error ? "kyro-form-input-error" : ""}`,
+              value: value ?? "",
+              onChange: (e) => handleFieldChange(field.name, parseFloat(e.target.value) || 0),
+              disabled,
+              placeholder: "0",
+              min: field.min,
+              max: field.max,
+              step: field.step || "any"
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "checkbox":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-checkbox", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: value || false,
+                onChange: (e) => handleFieldChange(field.name, e.target.checked),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "kyro-form-checkbox-label", children: field.label || field.name })
+          ] }),
+          field.admin?.description && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description })
+        ] }, field.name);
+      case "date":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "date",
+              className: `kyro-form-input ${error ? "kyro-form-input-error" : ""}`,
+              value: value ? new Date(value).toISOString().split("T")[0] : "",
+              onChange: (e) => handleFieldChange(
+                field.name,
+                e.target.value ? new Date(e.target.value) : null
+              ),
+              disabled
+            }
+          ),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "select":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: `kyro-form-input kyro-form-select ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              children: [
+                /* @__PURE__ */ jsxs("option", { value: "", children: [
+                  "Select ",
+                  field.label || field.name
+                ] }),
+                field.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value || opt, children: opt.label || opt }, opt.value || opt))
+              ]
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "radio":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "kyro-form-radio-group", children: field.options?.map((opt) => /* @__PURE__ */ jsxs("label", { className: "kyro-form-radio", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: field.name,
+                value: opt.value || opt,
+                checked: value === (opt.value || opt),
+                onChange: (e) => handleFieldChange(field.name, e.target.value),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: opt.label || opt })
+          ] }, opt.value || opt)) }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "color":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "kyro-form-color-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                className: `kyro-form-color ${error ? "kyro-form-input-error" : ""}`,
+                value: value || "#000000",
+                onChange: (e) => handleFieldChange(field.name, e.target.value),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "kyro-form-color-value", children: value || "#000000" })
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "json":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`,
+              value: typeof value === "string" ? value : JSON.stringify(value || {}, null, 2),
+              onChange: (e) => {
+                try {
+                  handleFieldChange(field.name, JSON.parse(e.target.value));
+                } catch {
+                  handleFieldChange(field.name, e.target.value);
+                }
+              },
+              disabled,
+              rows: 6,
+              placeholder: '{"key": "value"}'
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "markdown":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              rows: 8,
+              placeholder: "Enter markdown content..."
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "code":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              rows: 8,
+              placeholder: "Enter code..."
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      case "group":
+        if ("fields" in field) {
+          const groupData = value || {};
+          return /* @__PURE__ */ jsxs("div", { className: "kyro-form-group", children: [
+            /* @__PURE__ */ jsx("h3", { className: "kyro-form-group-title", children: field.label || field.name }),
+            /* @__PURE__ */ jsx("div", { className: "kyro-form-group-fields", children: field.fields.map(
+              (f) => renderField(f, groupData)
+            ) })
+          ] }, field.name);
+        }
+        return null;
+      case "array":
+        if ("fields" in field) {
+          const items = Array.isArray(value) ? value : [];
+          const labels = field.labels || {
+            singular: "Item",
+            plural: "Items"
+          };
+          return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+            /* @__PURE__ */ jsx("label", { className: "kyro-form-label", children: field.label || field.name }),
+            /* @__PURE__ */ jsxs("div", { className: "kyro-form-array", children: [
+              items.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "kyro-form-array-empty", children: [
+                "No ",
+                labels.plural.toLowerCase(),
+                " yet"
+              ] }) : items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "kyro-form-array-item", children: [
+                /* @__PURE__ */ jsxs("div", { className: "kyro-form-array-item-header", children: [
+                  /* @__PURE__ */ jsx("span", { className: "kyro-form-array-item-number", children: index + 1 }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "kyro-form-array-item-remove",
+                      onClick: () => {
+                        const newItems = items.filter(
+                          (_, i) => i !== index
+                        );
+                        handleFieldChange(field.name, newItems);
+                      },
+                      disabled,
+                      children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "kyro-form-array-item-fields", children: field.fields.map((f) => {
+                  const fieldKey = f.name;
+                  const subFieldValue = item[fieldKey];
+                  const handleSubFieldChange = (newValue) => {
+                    const newItem = { ...item, [fieldKey]: newValue };
+                    const newItems = [...items];
+                    newItems[index] = newItem;
+                    handleFieldChange(field.name, newItems);
+                  };
+                  return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+                    /* @__PURE__ */ jsx("label", { className: "kyro-form-label", children: f.label || f.name }),
+                    renderSubField(
+                      f,
+                      subFieldValue,
+                      handleSubFieldChange,
+                      disabled
+                    )
+                  ] }, fieldKey);
+                }) })
+              ] }, index)),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "kyro-btn kyro-btn-secondary kyro-btn-sm",
+                  onClick: () => {
+                    const newItem = {};
+                    field.fields.forEach((f) => {
+                      if (f.defaultValue !== void 0) {
+                        newItem[f.name] = f.defaultValue;
+                      }
+                    });
+                    handleFieldChange(field.name, [...items, newItem]);
+                  },
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+                      }
+                    ),
+                    "Add ",
+                    labels.singular
+                  ]
+                }
+              )
+            ] })
+          ] }, field.name);
+        }
+        return null;
+      case "blocks":
+        if ("blocks" in field) {
+          const blocks = Array.isArray(value) ? value : [];
+          const labels = field.labels || {
+            plural: "Blocks"
+          };
+          return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+            /* @__PURE__ */ jsx("label", { className: "kyro-form-label", children: field.label || field.name }),
+            /* @__PURE__ */ jsxs("div", { className: "kyro-form-blocks", children: [
+              blocks.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "kyro-form-blocks-empty", children: [
+                "No ",
+                labels.plural.toLowerCase(),
+                " yet"
+              ] }) : blocks.map((block, index) => /* @__PURE__ */ jsxs("div", { className: "kyro-form-block-item", children: [
+                /* @__PURE__ */ jsxs("div", { className: "kyro-form-block-item-header", children: [
+                  /* @__PURE__ */ jsx("span", { className: "kyro-form-block-item-type", children: field.blocks.find(
+                    (b) => b.slug === block.blockType
+                  )?.label || block.blockType }),
+                  /* @__PURE__ */ jsxs("div", { className: "kyro-form-block-item-actions", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "kyro-form-block-item-move",
+                        onClick: () => {
+                          if (index > 0) {
+                            const newBlocks = [...blocks];
+                            [newBlocks[index - 1], newBlocks[index]] = [
+                              newBlocks[index],
+                              newBlocks[index - 1]
+                            ];
+                            handleFieldChange(field.name, newBlocks);
+                          }
+                        },
+                        disabled: disabled || index === 0,
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            children: /* @__PURE__ */ jsx("path", { d: "M18 15l-6-6-6 6" })
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "kyro-form-block-item-remove",
+                        onClick: () => {
+                          const newBlocks = blocks.filter(
+                            (_, i) => i !== index
+                          );
+                          handleFieldChange(field.name, newBlocks);
+                        },
+                        disabled,
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "kyro-form-block-item-fields", children: field.blocks.find((b) => b.slug === block.blockType)?.fields?.map((f) => {
+                  if (!f.name) return null;
+                  const fieldKey = f.name;
+                  const blockData = block;
+                  const handleBlockFieldChange = (newValue) => {
+                    const newBlock = {
+                      ...blockData,
+                      [fieldKey]: newValue
+                    };
+                    const newBlocks = [...blocks];
+                    newBlocks[index] = newBlock;
+                    handleFieldChange(field.name, newBlocks);
+                  };
+                  return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+                    /* @__PURE__ */ jsx("label", { className: "kyro-form-label", children: f.label || f.name }),
+                    renderSubField(
+                      f,
+                      block[fieldKey],
+                      handleBlockFieldChange,
+                      disabled
+                    )
+                  ] }, fieldKey);
+                }) })
+              ] }, index)),
+              /* @__PURE__ */ jsxs("div", { className: "kyro-form-blocks-add", children: [
+                /* @__PURE__ */ jsx("span", { className: "kyro-form-blocks-add-label", children: "Add block:" }),
+                /* @__PURE__ */ jsx("div", { className: "kyro-form-blocks-add-buttons", children: field.blocks.map((block) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "kyro-btn kyro-btn-secondary kyro-btn-sm",
+                    onClick: () => {
+                      const newBlock = { blockType: block.slug };
+                      handleFieldChange(field.name, [...blocks, newBlock]);
+                    },
+                    disabled,
+                    children: block.label
+                  },
+                  block.slug
+                )) })
+              ] })
+            ] })
+          ] }, field.name);
+        }
+        return null;
+      case "relationship":
+        return /* @__PURE__ */ jsx(
+          RelationshipField,
+          {
+            field,
+            value,
+            onChange: (newValue) => handleFieldChange(field.name, newValue),
+            disabled,
+            error
+          },
+          field.name
+        );
+      case "upload":
+        return /* @__PURE__ */ jsx(
+          UploadField,
+          {
+            field,
+            value,
+            onChange: (newValue) => handleFieldChange(field.name, newValue),
+            disabled,
+            error
+          },
+          field.name
+        );
+      case "richtext":
+        return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+            field.label || field.name,
+            field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `kyro-form-input kyro-form-textarea kyro-form-richtext ${error ? "kyro-form-input-error" : ""}`,
+              value: value || "",
+              onChange: (e) => handleFieldChange(field.name, e.target.value),
+              disabled,
+              rows: 8,
+              placeholder: "Enter rich text content..."
+            }
+          ),
+          field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+          error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+        ] }, field.name);
+      default: {
+        const anyField = field;
+        return /* @__PURE__ */ jsx("div", { className: "kyro-form-field", children: /* @__PURE__ */ jsxs("span", { className: "kyro-form-unsupported", children: [
+          "Unsupported field type: ",
+          anyField.type
+        ] }) }, anyField.name);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "kyro-form", children: config.fields.map((field) => renderField(field)) });
+}
+function renderSubField(field, value, onChange, disabled) {
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "password":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: field.type === "email" ? "email" : "text",
+          className: "kyro-form-input",
+          value: value || "",
+          onChange: (e) => onChange(e.target.value),
+          disabled
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          className: "kyro-form-input kyro-form-number",
+          value: value ?? "",
+          onChange: (e) => onChange(parseFloat(e.target.value) || 0),
+          disabled
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value || false,
+          onChange: (e) => onChange(e.target.checked),
+          disabled
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "kyro-form-input kyro-form-textarea",
+          value: value || "",
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          rows: 3
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "kyro-form-input kyro-form-select",
+          value: value || "",
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+            field.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value || opt, children: opt.label || opt }, opt.value || opt))
+          ]
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "kyro-form-input",
+          value: value || "",
+          onChange: (e) => onChange(e.target.value),
+          disabled
+        }
+      );
+  }
+}
+function UploadField({
+  field,
+  value,
+  onChange,
+  disabled,
+  error
+}) {
+  const inputRef = useRef(null);
+  const [preview, setPreview] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isImage = (file) => file.type.startsWith("image/");
+  const handleFile = (file) => {
+    if (isImage(file)) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+    onChange({
+      filename: file.name,
+      size: file.size,
+      type: file.type,
+      url: URL.createObjectURL(file)
+    });
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+    /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+      field.label || field.name,
+      field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `kyro-form-upload ${isDragging ? "kyro-form-upload-dragging" : ""} ${error ? "kyro-form-upload-error" : ""}`,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        },
+        onDragLeave: () => setIsDragging(false),
+        onDrop: handleDrop,
+        onClick: () => inputRef.current?.click(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "kyro-form-upload-input",
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) handleFile(file);
+              },
+              disabled,
+              accept: field.mimeTypes?.join(",")
+            }
+          ),
+          preview || value?.url ? /* @__PURE__ */ jsxs("div", { className: "kyro-form-upload-preview", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview || value.url,
+                alt: "Preview",
+                className: "kyro-form-upload-image"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "kyro-form-upload-info", children: [
+              /* @__PURE__ */ jsx("span", { className: "kyro-form-upload-filename", children: value?.filename || "Uploaded file" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "kyro-form-upload-change",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    inputRef.current?.click();
+                  },
+                  children: "Change"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "kyro-form-upload-placeholder", children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "32",
+                height: "32",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "17,8 12,3 7,8" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "Drop image here or click to upload" }),
+            /* @__PURE__ */ jsx("span", { className: "kyro-form-upload-hint", children: "PNG, JPG, GIF up to 10MB" })
+          ] })
+        ]
+      }
+    ),
+    field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+    error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error })
+  ] });
+}
+function RelationshipField({
+  field,
+  value,
+  onChange,
+  disabled,
+  error
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const isMultiple = field.hasMany;
+  const targetCollection = Array.isArray(field.relationTo) ? field.relationTo[0] : field.relationTo;
+  useEffect(() => {
+    if (isOpen) {
+      setLoading(true);
+      fetch(`/api/${targetCollection}?limit=50`).then((res) => res.json()).then((data) => {
+        setOptions(data.docs || []);
+        setLoading(false);
+      }).catch((err) => {
+        console.error("Failed to fetch relations:", err);
+        setLoading(false);
+      });
+    }
+  }, [isOpen, targetCollection]);
+  const filteredOptions = options.filter((opt) => {
+    const term = search.toLowerCase();
+    const searchableFields = ["title", "name", "filename", "id", "slug"];
+    return searchableFields.some(
+      (key) => opt[key] && String(opt[key]).toLowerCase().includes(term)
+    );
+  });
+  const getLabel = (opt) => {
+    if (!opt) return "";
+    return opt.title || opt.name || opt.filename || opt.slug || opt.id;
+  };
+  const isSelected = (optId) => {
+    if (!value) return false;
+    if (isMultiple) {
+      return value.some((v) => (v.id || v) === optId);
+    }
+    return (value.id || value) === optId;
+  };
+  const toggleSelection = (opt) => {
+    if (isMultiple) {
+      const current = Array.isArray(value) ? value : [];
+      if (isSelected(opt.id)) {
+        onChange(current.filter((item) => (item.id || item) !== opt.id));
+      } else {
+        onChange([...current, opt.id]);
+      }
+    } else {
+      if (isSelected(opt.id)) {
+        onChange(null);
+      } else {
+        onChange(opt.id);
+        setIsOpen(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "kyro-form-field", children: [
+    /* @__PURE__ */ jsxs("label", { className: "kyro-form-label", children: [
+      field.label || field.name,
+      field.required && /* @__PURE__ */ jsx("span", { className: "kyro-form-label-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "kyro-form-relationship",
+        onClick: () => !disabled && setIsOpen(true),
+        style: disabled ? { opacity: 0.5, cursor: "not-allowed" } : {},
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "kyro-form-relationship-header", children: [
+            /* @__PURE__ */ jsx("span", { className: "kyro-form-relationship-type", children: targetCollection }),
+            isMultiple && /* @__PURE__ */ jsx("span", { className: "kyro-form-relationship-badge", children: "Multiple" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "kyro-form-relationship-value", children: value ? isMultiple && Array.isArray(value) ? value.length > 0 ? `${value.length} items selected` : "None selected" : `Selected: ${getLabel(value) || value.id || value}` : /* @__PURE__ */ jsx("span", { className: "kyro-form-relationship-empty", children: "Click to search and select..." }) })
+        ]
+      }
+    ),
+    field.admin?.description && !error && /* @__PURE__ */ jsx("p", { className: "kyro-form-help", children: field.admin.description }),
+    error && /* @__PURE__ */ jsx("p", { className: "kyro-form-error", children: error }),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "kyro-modal-overlay", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "kyro-relation-modal",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "kyro-relation-modal-header", children: [
+            /* @__PURE__ */ jsxs("h3", { children: [
+              "Select ",
+              field.label || field.name
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                autoFocus: true,
+                placeholder: `Search in ${targetCollection}...`,
+                className: "kyro-relation-modal-search",
+                value: search,
+                onChange: (e) => setSearch(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "kyro-relation-modal-list", children: loading ? /* @__PURE__ */ jsx("div", { className: "kyro-relation-modal-empty", children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "kyro-relation-modal-empty", children: "No results found." }) : filteredOptions.map((opt) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `kyro-relation-modal-item ${isSelected(opt.id) ? "selected" : ""}`,
+              onClick: () => toggleSelection(opt),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: getLabel(opt) }),
+                /* @__PURE__ */ jsxs("span", { className: "kyro-relation-modal-item-id", children: [
+                  "(",
+                  opt.id.slice(0, 8),
+                  "...)"
+                ] })
+              ]
+            },
+            opt.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "kyro-relation-modal-footer", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "kyro-btn kyro-btn-secondary kyro-btn-sm",
+              onClick: () => setIsOpen(false),
+              children: "Done"
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+const $$id = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$props, $$slots);
+  Astro2.self = $$id;
+  const { collection, id } = Astro2.params;
+  if (!collection || !collections[collection]) {
+    return Astro2.redirect("/");
+  }
+  const config = collections[collection];
+  let doc = null;
+  if (id && id !== "new") {
+    try {
+      const response = await fetch(`${Astro2.url.origin}/api/${collection}/${id}`);
+      if (response.ok) {
+        const result = await response.json();
+        doc = result.data || null;
+      }
+    } catch (error) {
+      console.error("Failed to fetch document:", error);
+    }
+  }
+  const isNew = !doc;
+  const title = isNew ? `Create ${config.singularLabel || config.label || collection}` : `Edit ${config.singularLabel || config.label || collection}`;
+  const description = config.admin?.description || `Manage ${(config.label || collection || "").toLowerCase()} documents`;
+  return renderTemplate`${renderComponent($$result, "AdminLayout", $$AdminLayout, { "title": title }, { "default": async ($$result2) => renderTemplate(_a || (_a = __template([" ", '<div class="flex-1 overflow-y-auto p-8 space-y-6"> <!-- Header --> <div class="surface-tile p-8 flex items-center justify-between"> <div class="flex items-center gap-4"> <a', ' class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-gray-200 text-[#64748b] hover:text-[#0b1222] hover:bg-gray-50 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path> </svg> </a> <div> <h1 class="text-2xl font-black tracking-tighter text-[#0b1222]">', '</h1> <p class="text-sm text-[#64748b] mt-0.5">', '</p> </div> </div> <div class="flex items-center gap-3"> <a', ' class="px-5 py-2.5 border border-gray-200 rounded-xl text-[#0b1222] font-bold text-sm hover:bg-gray-50 transition-colors">\nCancel\n</a> <button type="submit" form="doc-form" id="btn-save" class="px-6 py-2.5 bg-[#0b1222] text-white rounded-xl font-bold text-sm hover:bg-[#1a2332] transition-colors active:scale-95"> ', ` </button> </div> </div> <!-- Form Card --> <div class="surface-tile p-8"> <!-- Toast container --> <div id="toast-container" class="hidden fixed bottom-6 right-6 z-50"> <div class="flex items-center gap-3 px-5 py-4 bg-[#0b1222] text-white rounded-xl shadow-2xl"> <span id="toast-message"></span> <button onclick="document.getElementById('toast-container').classList.add('hidden')" class="text-white/50 hover:text-white ml-2"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> </div> <form id="doc-form"> `, " </form> </div> <!-- Document Metadata (edit mode only) --> ", " </div> <script>(function(){", "\n    function showToast(message, isError = false) {\n      const container = document.getElementById('toast-container');\n      const msg = document.getElementById('toast-message');\n      if (container && msg) {\n        msg.textContent = message;\n        container.classList.remove('hidden');\n        if (!isError) {\n          setTimeout(() => container.classList.add('hidden'), 3000);\n        }\n      }\n    }\n\n    document.getElementById('doc-form')?.addEventListener('submit', async (e) => {\n      e.preventDefault();\n      \n      const btn = document.getElementById('btn-save');\n      const originalText = btn?.textContent || '';\n      if (btn) {\n        btn.textContent = 'Saving…';\n        btn.setAttribute('disabled', 'true');\n      }\n\n      const formData = new FormData(e.target);\n      const data = {};\n      formData.forEach((value, key) => {\n        data[key] = value;\n      });\n\n      const url = isNew ? `/api/${collection}` : `/api/${collection}/${id}`;\n      const method = isNew ? 'POST' : 'PATCH';\n\n      try {\n        const response = await fetch(url, {\n          method,\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify(data),\n        });\n\n        if (response.ok) {\n          showToast(isNew ? 'Document created successfully' : 'Changes saved');\n          setTimeout(() => {\n            window.location.href = `/${collection}`;\n          }, 800);\n        } else {\n          const error = await response.json();\n          showToast(error.error || 'An error occurred', true);\n        }\n      } catch (error) {\n        showToast('Failed to save document', true);\n      } finally {\n        if (btn) {\n          btn.textContent = originalText;\n          btn.removeAttribute('disabled');\n        }\n      }\n    });\n  })();<\/script> "], [" ", '<div class="flex-1 overflow-y-auto p-8 space-y-6"> <!-- Header --> <div class="surface-tile p-8 flex items-center justify-between"> <div class="flex items-center gap-4"> <a', ' class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-gray-200 text-[#64748b] hover:text-[#0b1222] hover:bg-gray-50 transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path> </svg> </a> <div> <h1 class="text-2xl font-black tracking-tighter text-[#0b1222]">', '</h1> <p class="text-sm text-[#64748b] mt-0.5">', '</p> </div> </div> <div class="flex items-center gap-3"> <a', ' class="px-5 py-2.5 border border-gray-200 rounded-xl text-[#0b1222] font-bold text-sm hover:bg-gray-50 transition-colors">\nCancel\n</a> <button type="submit" form="doc-form" id="btn-save" class="px-6 py-2.5 bg-[#0b1222] text-white rounded-xl font-bold text-sm hover:bg-[#1a2332] transition-colors active:scale-95"> ', ` </button> </div> </div> <!-- Form Card --> <div class="surface-tile p-8"> <!-- Toast container --> <div id="toast-container" class="hidden fixed bottom-6 right-6 z-50"> <div class="flex items-center gap-3 px-5 py-4 bg-[#0b1222] text-white rounded-xl shadow-2xl"> <span id="toast-message"></span> <button onclick="document.getElementById('toast-container').classList.add('hidden')" class="text-white/50 hover:text-white ml-2"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> </div> <form id="doc-form"> `, " </form> </div> <!-- Document Metadata (edit mode only) --> ", " </div> <script>(function(){", "\n    function showToast(message, isError = false) {\n      const container = document.getElementById('toast-container');\n      const msg = document.getElementById('toast-message');\n      if (container && msg) {\n        msg.textContent = message;\n        container.classList.remove('hidden');\n        if (!isError) {\n          setTimeout(() => container.classList.add('hidden'), 3000);\n        }\n      }\n    }\n\n    document.getElementById('doc-form')?.addEventListener('submit', async (e) => {\n      e.preventDefault();\n      \n      const btn = document.getElementById('btn-save');\n      const originalText = btn?.textContent || '';\n      if (btn) {\n        btn.textContent = 'Saving…';\n        btn.setAttribute('disabled', 'true');\n      }\n\n      const formData = new FormData(e.target);\n      const data = {};\n      formData.forEach((value, key) => {\n        data[key] = value;\n      });\n\n      const url = isNew ? \\`/api/\\${collection}\\` : \\`/api/\\${collection}/\\${id}\\`;\n      const method = isNew ? 'POST' : 'PATCH';\n\n      try {\n        const response = await fetch(url, {\n          method,\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify(data),\n        });\n\n        if (response.ok) {\n          showToast(isNew ? 'Document created successfully' : 'Changes saved');\n          setTimeout(() => {\n            window.location.href = \\`/\\${collection}\\`;\n          }, 800);\n        } else {\n          const error = await response.json();\n          showToast(error.error || 'An error occurred', true);\n        }\n      } catch (error) {\n        showToast('Failed to save document', true);\n      } finally {\n        if (btn) {\n          btn.textContent = originalText;\n          btn.removeAttribute('disabled');\n        }\n      }\n    });\n  })();<\/script> "])), maybeRenderHead(), addAttribute(`/${collection}`, "href"), title, description, addAttribute(`/${collection}`, "href"), isNew ? "Create" : "Save Changes", renderComponent($$result2, "AutoForm", AutoForm, { "client:load": true, "config": config, "data": doc || {}, "collectionSlug": collection, "client:component-hydration": "load", "client:component-path": "@/components/AutoForm", "client:component-export": "AutoForm" }), !isNew && doc && renderTemplate`<div class="surface-tile p-8"> <h3 class="text-xs font-bold text-[#64748b] uppercase tracking-[0.2em] mb-4">Document Info</h3> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div> <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">ID</p> <p class="text-sm text-[#0b1222] font-mono">${doc.id?.slice(0, 12)}…</p> </div> ${doc.createdAt && renderTemplate`<div> <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Created</p> <p class="text-sm text-[#0b1222]">${new Date(doc.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</p> </div>`} ${doc.updatedAt && renderTemplate`<div> <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Updated</p> <p class="text-sm text-[#0b1222]">${new Date(doc.updatedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</p> </div>`} </div> </div>`, defineScriptVars({ collection, id, isNew })) })}`;
+}, "/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/pages/[collection]/[id].astro", void 0);
+
+const $$file = "/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/pages/[collection]/[id].astro";
+const $$url = "/[collection]/[id]";
+
+const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$id,
+  file: $$file,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const page = () => _page;
+
+export { page };