@kidecms/core 0.1.0

package/admin/components/FieldControl.astro

@@ -0,0 +1,397 @@
+---
+import type { FieldConfig } from "@kidecms/core";
+import { serializeFieldValue, humanize } from "@kidecms/core";
+import { customFields } from "virtual:kide/custom-fields";
+import ImagePicker from "./ImagePicker";
+import TreeItemsEditor from "./TreeItemsEditor";
+import RichTextEditor from "./RichTextEditor";
+import SelectField from "./SelectField";
+import RelationField from "./RelationField";
+import BlockEditor from "./BlockEditor";
+import SlugField from "./SlugField";
+import CheckboxField from "./CheckboxField";
+import TaxonomySelect from "./TaxonomySelect";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { cn } from "../lib/utils";
+
+type RelationOption = {
+  value: string;
+  label: string;
+};
+
+type RelationMeta = {
+  collectionSlug: string;
+  collectionLabel: string;
+  hasMany: boolean;
+  labelField?: string;
+};
+
+type LinkOptionGroup = {
+  collection: string;
+  label: string;
+  items: Array<{ id: string; label: string; href: string }>;
+};
+
+const {
+  name,
+  field,
+  value,
+  relationOptions = [],
+  relationMeta,
+  readOnly = false,
+  menuLinkOptions = [],
+  blockRelationOptions = {},
+} = Astro.props as {
+  name: string;
+  field: FieldConfig;
+  value?: unknown;
+  relationOptions?: RelationOption[];
+  relationMeta?: RelationMeta;
+  readOnly?: boolean;
+  menuLinkOptions?: LinkOptionGroup[];
+  blockRelationOptions?: Record<string, RelationOption[]>;
+};
+
+const label = field.label ?? humanize(name);
+const placeholder = field.admin?.placeholder ?? "";
+const serializedValue = serializeFieldValue(field, value);
+const rows =
+  field.admin?.rows ?? (field.type === "richText" ? 10 : field.type === "json" || field.type === "blocks" ? 12 : 5);
+const inputMode = field.type === "number" ? "decimal" : undefined;
+const controlClass = cn("w-full shadow-none", readOnly && "cursor-not-allowed bg-muted text-muted-foreground");
+const isTreeEditor =
+  field.type === "json" && (field.admin?.component === "menu-items" || field.admin?.component === "taxonomy-terms");
+
+// Custom field component: if admin.component is set and not a built-in variant, look for user-provided component
+const builtInComponents = new Set(["radio", "taxonomy-select", "menu-items", "taxonomy-terms"]);
+const CustomComponent =
+  field.admin?.component && !builtInComponents.has(field.admin.component)
+    ? customFields[field.admin.component] ?? null
+    : null;
+
+// Build serializable block types metadata for BlockEditor
+const blockTypesMeta =
+  field.type === "blocks" && field.types
+    ? Object.fromEntries(
+        Object.entries(field.types).map(([typeName, typeFields]) => [
+          typeName,
+          Object.fromEntries(
+            Object.entries(typeFields).map(([fieldName, subField]) => [
+              fieldName,
+              {
+                type: subField.type,
+                label: subField.label,
+                required: subField.required,
+                options: "options" in subField ? subField.options : undefined,
+                from: "from" in subField ? subField.from : undefined,
+                admin: subField.admin,
+                defaultValue: subField.defaultValue,
+                of: "of" in subField && subField.of ? { type: subField.of.type } : undefined,
+                collection: "collection" in subField ? subField.collection : undefined,
+                hasMany: "hasMany" in subField ? subField.hasMany : undefined,
+              },
+            ]),
+          ),
+        ]),
+      )
+    : {};
+---
+
+<div
+  class="grid gap-2"
+  data-field-name={name}
+  {...field.condition
+    ? {
+        "data-condition-field": field.condition.field,
+        "data-condition-value": JSON.stringify(field.condition.value),
+      }
+    : {}}
+>
+  {
+    !isTreeEditor && (
+      <Label htmlFor={name}>
+        {label}
+        {field.required ? " *" : ""}
+      </Label>
+    )
+  }
+  {field.description && <p class="text-muted-foreground -mt-1 text-xs leading-5">{field.description}</p>}
+  {field.admin?.help && <p class="text-muted-foreground -mt-1 -mb-0.5 text-xs leading-5">{field.admin.help}</p>}
+
+  {
+    CustomComponent && (
+      <CustomComponent
+        client:load
+        name={name}
+        field={field}
+        value={serializedValue}
+        readOnly={readOnly}
+      />
+    )
+  }
+
+  {!CustomComponent && (
+  <Fragment>
+
+  {
+    field.type === "image" && !readOnly && (
+      <ImagePicker client:load name={name} value={serializedValue} placeholder={placeholder} />
+    )
+  }
+
+  {
+    field.type === "image" && readOnly && (
+      <Input
+        className={controlClass}
+        type="text"
+        id={name}
+        name={name}
+        defaultValue={serializedValue}
+        placeholder={placeholder}
+        readOnly={readOnly}
+      />
+    )
+  }
+
+  {
+    field.type === "text" && field.admin?.component === "taxonomy-select" && !readOnly && (
+      <TaxonomySelect client:load name={name} value={serializedValue} taxonomySlug={field.admin?.placeholder ?? ""} />
+    )
+  }
+
+  {
+    (field.type === "text" || field.type === "email" || field.type === "date") &&
+      field.admin?.component !== "taxonomy-select" &&
+      (field.type === "text" && field.admin?.rows ? (
+        <Textarea
+          className={controlClass}
+          id={name}
+          name={name}
+          rows={field.admin.rows}
+          defaultValue={serializedValue}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={field.required}
+        />
+      ) : (
+        <Input
+          className={controlClass}
+          type={field.type === "email" ? "email" : field.type === "date" ? "date" : "text"}
+          id={name}
+          name={name}
+          defaultValue={serializedValue}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={field.required}
+        />
+      ))
+  }
+
+  {
+    field.type === "slug" && (
+      <SlugField
+        client:load
+        name={name}
+        value={serializedValue}
+        from={field.from}
+        readOnly={readOnly}
+        required={field.required}
+        placeholder={placeholder || "auto-generated-slug"}
+        className={controlClass}
+      />
+    )
+  }
+
+  {
+    field.type === "number" && (
+      <Input
+        className={controlClass}
+        type="number"
+        id={name}
+        name={name}
+        defaultValue={serializedValue}
+        inputMode={inputMode}
+        readOnly={readOnly}
+        required={field.required}
+      />
+    )
+  }
+
+  {field.type === "boolean" && <CheckboxField client:load name={name} checked={Boolean(value)} disabled={readOnly} />}
+
+  {
+    field.type === "select" && field.admin?.component !== "radio" && (
+      <SelectField
+        client:load
+        name={name}
+        value={String(value ?? "")}
+        placeholder="Select an option"
+        disabled={readOnly}
+        items={field.options.map((option) => ({ value: option, label: option }))}
+      />
+    )
+  }
+
+  {
+    field.type === "select" && field.admin?.component === "radio" && (
+      <div class="flex flex-wrap gap-x-5 gap-y-2 has-disabled:opacity-50">
+        {field.options.map((option) => (
+          <label class="hover:text-foreground flex items-center gap-2 text-sm transition-colors has-disabled:cursor-not-allowed has-disabled:hover:text-current">
+            <input
+              class="border-input hover:border-primary/60 checked:border-primary checked:hover:border-primary focus-visible:ring-ring/50 disabled:hover:border-input size-4 shrink-0 appearance-none rounded-full border transition-all checked:border-[5px] focus-visible:ring-3 focus-visible:outline-none disabled:cursor-not-allowed"
+              type="radio"
+              name={name}
+              value={option}
+              checked={String(value ?? "") === option}
+              disabled={readOnly}
+            />
+            <span class="select-none">{option}</span>
+          </label>
+        ))}
+      </div>
+    )
+  }
+
+  {
+    field.type === "relation" && !readOnly && relationMeta && (
+      <RelationField
+        client:load
+        name={name}
+        value={Array.isArray(value) ? JSON.stringify(value) : String(value ?? "")}
+        hasMany={relationMeta.hasMany}
+        options={relationOptions}
+        collectionSlug={relationMeta.collectionSlug}
+        collectionLabel={relationMeta.collectionLabel}
+        labelField={relationMeta.labelField}
+      />
+    )
+  }
+
+  {
+    field.type === "relation" && (readOnly || !relationMeta) && (
+      <SelectField
+        client:load
+        name={name}
+        value={String(value ?? "")}
+        placeholder="Select a document"
+        disabled={readOnly}
+        items={relationOptions}
+      />
+    )
+  }
+
+  {
+    field.type === "richText" && !readOnly && (
+      <RichTextEditor client:load name={name} initialValue={value ? JSON.stringify(value) : ""} rows={rows} />
+    )
+  }
+
+  {
+    field.type === "richText" && readOnly && (
+      <Textarea
+        className={controlClass}
+        id={name}
+        name={name}
+        rows={rows}
+        readOnly={readOnly}
+        defaultValue={serializedValue}
+      />
+    )
+  }
+
+  {
+    field.type === "json" && field.admin?.component === "menu-items" && !readOnly && (
+      <TreeItemsEditor
+        client:load
+        name={name}
+        value={serializedValue}
+        variant="menu"
+        label={label}
+        linkOptions={menuLinkOptions}
+      />
+    )
+  }
+
+  {
+    field.type === "json" && field.admin?.component === "taxonomy-terms" && !readOnly && (
+      <TreeItemsEditor client:load name={name} value={serializedValue} variant="taxonomy" label={label} />
+    )
+  }
+
+  {
+    field.type === "json" &&
+      (field.admin?.component === "menu-items" || field.admin?.component === "taxonomy-terms") &&
+      readOnly && (
+        <Textarea
+          className={controlClass}
+          id={name}
+          name={name}
+          rows={rows}
+          readOnly={readOnly}
+          defaultValue={serializedValue}
+        />
+      )
+  }
+
+  {
+    field.type === "blocks" && !readOnly && (
+      <BlockEditor
+        client:load
+        name={name}
+        value={serializedValue}
+        types={blockTypesMeta}
+        blockRelationOptions={blockRelationOptions}
+      />
+    )
+  }
+
+  {
+    field.type === "blocks" && readOnly && (
+      <Textarea
+        className={controlClass}
+        id={name}
+        name={name}
+        rows={rows}
+        readOnly={readOnly}
+        defaultValue={serializedValue}
+      />
+    )
+  }
+
+  {
+    field.type === "array" && "of" in field && field.of?.type === "text" && (
+      <Input
+        className={controlClass}
+        id={name}
+        name={name}
+        placeholder={placeholder || "item1, item2, item3"}
+        readOnly={readOnly}
+        required={field.required}
+        defaultValue={serializedValue}
+      />
+    )
+  }
+
+  {
+    ((field.type === "array" && !("of" in field && field.of?.type === "text")) ||
+      (field.type === "json" &&
+        field.admin?.component !== "menu-items" &&
+        field.admin?.component !== "taxonomy-terms")) && (
+      <Textarea
+        className={controlClass}
+        id={name}
+        name={name}
+        rows={rows}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={field.required}
+        defaultValue={serializedValue}
+      />
+    )
+  }
+
+  </Fragment>
+  )}
+</div>

package/admin/components/FocalPointSelector.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Crosshair, X } from "lucide-react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+type Props = {
+  src: string;
+  alt: string;
+  focalX: number | null;
+  focalY: number | null;
+};
+
+export default function FocalPointSelector({ src, alt, focalX: initialX, focalY: initialY }: Props) {
+  const [focalX, setFocalX] = useState<number | null>(initialX);
+  const [focalY, setFocalY] = useState<number | null>(initialY);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const hiddenXRef = useRef<HTMLInputElement>(null);
+
+  // Notify the form of value changes so UnsavedGuard detects them
+  useEffect(() => {
+    hiddenXRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [focalX, focalY]);
+
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const img = imageRef.current;
+    if (!img) return;
+    const rect = img.getBoundingClientRect();
+    const x = Math.round(((e.clientX - rect.left) / rect.width) * 100);
+    const y = Math.round(((e.clientY - rect.top) / rect.height) * 100);
+    setFocalX(Math.max(0, Math.min(100, x)));
+    setFocalY(Math.max(0, Math.min(100, y)));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setFocalX(null);
+    setFocalY(null);
+  }, []);
+
+  const hasFocal = focalX !== null && focalY !== null;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex h-6 items-center justify-between gap-2">
+        <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+          <Crosshair className="size-3" />
+          {hasFocal ? <span>Focal point</span> : <span>Click image to set focal point</span>}
+        </div>
+        {hasFocal && (
+          <div className="flex items-center gap-1.5">
+            <div className="flex items-center gap-1">
+              <span className="text-muted-foreground text-xs">X</span>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={focalX ?? ""}
+                onChange={(e) =>
+                  setFocalX(e.target.value === "" ? null : Math.max(0, Math.min(100, Number(e.target.value))))
+                }
+                className="h-6 w-14 px-1.5 text-center text-xs"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="text-muted-foreground text-xs">Y</span>
+              <Input
+                type="number"
+                min={0}
+                max={100}
+                value={focalY ?? ""}
+                onChange={(e) =>
+                  setFocalY(e.target.value === "" ? null : Math.max(0, Math.min(100, Number(e.target.value))))
+                }
+                className="h-6 w-14 px-1.5 text-center text-xs"
+              />
+            </div>
+            <Button type="button" variant="ghost" size="icon-xs" title="Clear focal point" onClick={handleClear}>
+              <X className="size-3" />
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="bg-muted/30 relative cursor-crosshair overflow-hidden rounded-md" onClick={handleClick}>
+        <img ref={imageRef} src={src} alt={alt} className="w-full object-contain" draggable={false} />
+        {hasFocal && (
+          <div
+            className="pointer-events-none absolute size-8 -translate-x-1/2 -translate-y-1/2"
+            style={{ left: `${focalX}%`, top: `${focalY}%` }}
+          >
+            <div className="absolute inset-0 rounded-full border-2 border-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.4),inset_0_0_0_1.5px_rgba(0,0,0,0.4)]" />
+            <div className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_0_0_1.5px_rgba(0,0,0,0.4)]" />
+          </div>
+        )}
+      </div>
+      <input ref={hiddenXRef} type="hidden" name="focalX" value={focalX ?? ""} />
+      <input type="hidden" name="focalY" value={focalY ?? ""} />
+    </div>
+  );
+}

package/admin/components/ImageBrowseDialog.tsx

@@ -0,0 +1,176 @@
+import { useState, useCallback, useEffect } from "react";
+import { ChevronRight, Folder, Loader2, X } from "lucide-react";
+import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { thumbnail } from "../lib/utils";
+
+type AssetRecord = {
+  _id: string;
+  filename: string;
+  mimeType: string;
+  url: string;
+  _createdAt: string;
+};
+
+type FolderRecord = {
+  _id: string;
+  name: string;
+};
+
+type BrowseState = {
+  folderId: string | null;
+  folders: FolderRecord[];
+  assets: AssetRecord[];
+  breadcrumbs: Array<{ id: string | null; name: string }>;
+  loading: boolean;
+};
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (asset: AssetRecord) => void;
+};
+
+export default function ImageBrowseDialog({ open, onOpenChange, onSelect }: Props) {
+  const [browse, setBrowse] = useState<BrowseState>({
+    folderId: null,
+    folders: [],
+    assets: [],
+    breadcrumbs: [{ id: null, name: "All assets" }],
+    loading: false,
+  });
+
+  const loadFolder = useCallback(async (folderId: string | null, breadcrumbs: BrowseState["breadcrumbs"]) => {
+    setBrowse((prev) => ({ ...prev, loading: true, folderId, breadcrumbs }));
+    try {
+      const folderParam = folderId ? `&folder=${folderId}` : "&folder=";
+      const [assetsRes, foldersRes] = await Promise.all([
+        fetch(`/api/cms/assets?limit=50${folderParam}`),
+        fetch(`/api/cms/assets/folders?parent=${folderId ?? ""}`),
+      ]);
+      const assetsData = await assetsRes.json();
+      const foldersData = await foldersRes.json();
+      setBrowse((prev) => ({
+        ...prev,
+        folders: foldersData ?? [],
+        assets: (assetsData.items ?? []).filter((a: AssetRecord) => a.mimeType.startsWith("image/")),
+        loading: false,
+      }));
+    } catch {
+      setBrowse((prev) => ({ ...prev, folders: [], assets: [], loading: false }));
+    }
+  }, []);
+
+  const navigateToFolder = useCallback(
+    (folder: FolderRecord) => {
+      loadFolder(folder._id, [...browse.breadcrumbs, { id: folder._id, name: folder.name }]);
+    },
+    [browse.breadcrumbs, loadFolder],
+  );
+
+  const navigateToBreadcrumb = useCallback(
+    (index: number) => {
+      const crumb = browse.breadcrumbs[index];
+      loadFolder(crumb.id, browse.breadcrumbs.slice(0, index + 1));
+    },
+    [browse.breadcrumbs, loadFolder],
+  );
+
+  useEffect(() => {
+    if (open) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      loadFolder(null, [{ id: null, name: "All assets" }]);
+    }
+  }, [open, loadFolder]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <DialogTitle>Media Library</DialogTitle>
+            <DialogClose>
+              <button
+                type="button"
+                title="Close"
+                className="text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors"
+              >
+                <X className="size-5" />
+              </button>
+            </DialogClose>
+          </div>
+        </DialogHeader>
+
+        {browse.breadcrumbs.length > 1 && (
+          <nav className="text-muted-foreground flex items-center gap-1 text-sm">
+            {browse.breadcrumbs.map((crumb, i) => (
+              <span key={crumb.id ?? "root"} className="contents">
+                {i > 0 && <ChevronRight className="size-3.5 shrink-0" />}
+                {i < browse.breadcrumbs.length - 1 ? (
+                  <button
+                    type="button"
+                    onClick={() => navigateToBreadcrumb(i)}
+                    className="hover:text-foreground truncate transition-colors"
+                  >
+                    {crumb.name}
+                  </button>
+                ) : (
+                  <span className="text-foreground truncate font-medium">{crumb.name}</span>
+                )}
+              </span>
+            ))}
+          </nav>
+        )}
+
+        <div className="max-h-[60vh] overflow-y-auto">
+          {browse.loading ? (
+            <div className="flex h-48 items-center justify-center">
+              <Loader2 className="text-muted-foreground size-6 animate-spin" />
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {browse.folders.length > 0 && (
+                <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+                  {browse.folders.map((folder) => (
+                    <button
+                      key={folder._id}
+                      type="button"
+                      onClick={() => navigateToFolder(folder)}
+                      className="hover:bg-accent flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors"
+                    >
+                      <Folder className="text-muted-foreground size-4 shrink-0" />
+                      <span className="truncate">{folder.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {browse.assets.length > 0 ? (
+                <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
+                  {browse.assets.map((asset) => (
+                    <button
+                      key={asset._id}
+                      type="button"
+                      onClick={() => {
+                        onSelect(asset);
+                        onOpenChange(false);
+                      }}
+                      className="hover:border-foreground relative aspect-square overflow-hidden rounded-lg border transition-colors"
+                    >
+                      <img src={thumbnail(asset.url)} alt={asset.filename} className="size-full object-cover" />
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                browse.folders.length === 0 && (
+                  <div className="text-muted-foreground flex h-48 items-center justify-center text-sm">
+                    {browse.folderId ? "This folder is empty." : "No images uploaded yet."}
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}