@kidecms/core 0.1.0

package/admin/components/ImagePicker.tsx

@@ -0,0 +1,149 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { ImagePlus, Loader2, Upload, X } from "lucide-react";
+import { cn, thumbnail } from "../lib/utils";
+import { Button } from "./ui/button";
+import ImageBrowseDialog from "./ImageBrowseDialog";
+
+type Props = {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+};
+
+export default function ImagePicker({ name, value: initialValue, onChange: onChangeProp }: Props) {
+  const [value, setValue] = useState(initialValue ?? "");
+  const [assetId, setAssetId] = useState<string | null>(null);
+  const [localPreview, setLocalPreview] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hiddenRef = useRef<HTMLInputElement>(null);
+
+  // Resolve asset ID from URL on mount
+  useEffect(() => {
+    if (!value) return;
+    fetch(`/api/cms/assets?url=${encodeURIComponent(value)}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((asset) => {
+        if (asset?._id) setAssetId(asset._id);
+      })
+      .catch(() => {});
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Notify the form of value changes so UnsavedGuard detects them
+  const prevValueRef = useRef(value);
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+      hiddenRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }, [value]);
+
+  const handleUpload = useCallback(
+    async (file: File) => {
+      setUploading(true);
+      try {
+        setLocalPreview(URL.createObjectURL(file));
+
+        const formData = new FormData();
+        formData.append("file", file);
+        const res = await fetch("/api/cms/assets/upload", { method: "POST", body: formData });
+        if (!res.ok) throw new Error("Upload failed");
+        const asset = await res.json();
+        setValue(asset.url);
+        setAssetId(asset._id);
+        onChangeProp?.(asset.url);
+      } catch (e) {
+        console.error("Upload failed:", e);
+        setLocalPreview(null);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [onChangeProp],
+  );
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleUpload(file);
+    },
+    [handleUpload],
+  );
+
+  const imgSrc = localPreview ?? thumbnail(value);
+  const isImage =
+    value && (value.match(/\.(jpg|jpeg|png|gif|webp|avif|svg)$/i) || value.startsWith("http") || localPreview);
+
+  return (
+    <div className="space-y-3">
+      <input ref={hiddenRef} type="hidden" name={name} value={value} />
+
+      {value && (
+        <div className="group relative inline-block">
+          {isImage ? (
+            <a
+              href={assetId ? `/admin/assets/${assetId}` : undefined}
+              target="_blank"
+              className={cn(
+                "block size-40 overflow-hidden rounded-lg border",
+                assetId && "hover:border-foreground/50 cursor-pointer",
+              )}
+            >
+              <img src={imgSrc} alt="" className="size-full object-cover" />
+            </a>
+          ) : (
+            <div className="bg-muted/30 flex size-40 items-center justify-center rounded-lg border">
+              <span className="text-muted-foreground truncate px-4 text-sm">{value}</span>
+            </div>
+          )}
+          <button
+            type="button"
+            title="Remove image"
+            onClick={() => {
+              if (localPreview) URL.revokeObjectURL(localPreview);
+              setLocalPreview(null);
+              setValue("");
+              setAssetId(null);
+              onChangeProp?.("");
+            }}
+            className="border-foreground/25 hover:border-foreground bg-background/80 absolute top-2 right-2 flex size-5 items-center justify-center rounded border opacity-0 backdrop-blur-sm transition-[opacity,border-color] group-hover:opacity-100"
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />
+        <Button
+          type="button"
+          variant="outline"
+          className="text-foreground/70"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={uploading}
+        >
+          {uploading ? <Loader2 className="size-3 animate-spin" /> : <Upload className="size-4 stroke-1" />}
+          Upload
+        </Button>
+        <Button type="button" variant="outline" className="text-foreground/70" onClick={() => setOpen(true)}>
+          <ImagePlus className="size-4 stroke-1" />
+          Browse
+        </Button>
+      </div>
+
+      <ImageBrowseDialog
+        open={open}
+        onOpenChange={setOpen}
+        onSelect={(asset) => {
+          if (localPreview) URL.revokeObjectURL(localPreview);
+          setLocalPreview(null);
+          setValue(asset.url);
+          setAssetId(asset._id);
+          onChangeProp?.(asset.url);
+        }}
+      />
+    </div>
+  );
+}

package/admin/components/InternalLinkPicker.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "./ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { cn } from "../lib/utils";
+
+export type LinkOptionGroup = {
+  collection: string;
+  label: string;
+  items: Array<{ id: string; label: string; href: string }>;
+};
+
+export default function InternalLinkPicker({
+  editHref,
+  linkOptions,
+  onSelect,
+}: {
+  editHref: string;
+  linkOptions: LinkOptionGroup[];
+  onSelect: (item: { id: string; label: string; href: string }) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  const selectedLabel = React.useMemo(() => {
+    if (!editHref) return "";
+    for (const group of linkOptions) {
+      const found = group.items.find((item) => item.href === editHref);
+      if (found) return found.label;
+    }
+    return editHref;
+  }, [editHref, linkOptions]);
+
+  return (
+    <div className="min-w-0 flex-3">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="h-7 w-full justify-between font-normal"
+          >
+            <span className={cn("truncate", !selectedLabel && "text-muted-foreground")}>
+              {selectedLabel || "Search documents..."}
+            </span>
+            <ChevronsUpDown className="ml-2 size-3.5 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search documents..." />
+            <CommandList>
+              <CommandEmpty>No documents found.</CommandEmpty>
+              {linkOptions.map((group) => (
+                <CommandGroup key={group.collection} heading={group.label}>
+                  {group.items.map((item) => (
+                    <CommandItem
+                      key={item.id}
+                      value={`${item.label} ${item.href}`}
+                      onSelect={() => {
+                        onSelect(item);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check className={cn("size-4", editHref === item.href ? "opacity-100" : "opacity-0")} />
+                      {item.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/admin/components/LiveHeading.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function LiveHeading({ initial, inputName = "title" }: { initial: string; inputName?: string }) {
+  const [text, setText] = useState(initial);
+
+  useEffect(() => {
+    const input = document.querySelector<HTMLInputElement>(`[name="${inputName}"]`);
+    if (!input) return;
+    const handler = () => setText(input.value || initial);
+    input.addEventListener("input", handler);
+    return () => input.removeEventListener("input", handler);
+  }, [initial, inputName]);
+
+  return <>{text}</>;
+}

package/admin/components/MobileSidebar.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "./ui/button";
+import { Sheet, SheetContent, SheetTitle } from "./ui/sheet";
+
+export default function MobileSidebar({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="ghost" size="icon-sm" onClick={() => setOpen(true)}>
+        <Menu className="size-5" />
+        <span className="sr-only">Open menu</span>
+      </Button>
+
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent side="left" className="w-68 p-0" showCloseButton={false}>
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <div className="flex h-full flex-col" onClick={() => setOpen(false)}>
+            {children}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/admin/components/RelationField.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+
+import { Button } from "./ui/button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./ui/sheet";
+import { cn } from "../lib/utils";
+
+type Option = { value: string; label: string };
+
+type Props = {
+  name: string;
+  value?: string;
+  hasMany?: boolean;
+  options: Option[];
+  collectionSlug: string;
+  collectionLabel: string;
+  labelField?: string;
+};
+
+export default function RelationField({
+  name,
+  value: initialValue,
+  hasMany = false,
+  options: initialOptions,
+  collectionSlug,
+  collectionLabel,
+  labelField = "title",
+}: Props) {
+  const [options, setOptions] = useState(initialOptions);
+  const [selected, setSelected] = useState<string[]>(() => {
+    if (!initialValue) return [];
+    if (hasMany) {
+      try {
+        const parsed = JSON.parse(initialValue);
+        return Array.isArray(parsed) ? parsed.map(String) : [];
+      } catch {
+        return [];
+      }
+    }
+    return initialValue ? [initialValue] : [];
+  });
+  const [open, setOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const hiddenRef = useRef<HTMLInputElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const hiddenValue = hasMany ? JSON.stringify(selected) : (selected[0] ?? "");
+
+  // Notify form of changes so UnsavedGuard can detect them
+  useEffect(() => {
+    hiddenRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [hiddenValue]);
+
+  const getLabel = useCallback((id: string) => options.find((o) => o.value === id)?.label ?? id, [options]);
+
+  const displayLabel = useMemo(() => {
+    if (selected.length === 0) return "";
+    if (hasMany) return `${selected.length} selected`;
+    return getLabel(selected[0]);
+  }, [selected, hasMany, getLabel]);
+
+  const selectItem = (id: string) => {
+    if (hasMany) {
+      setSelected((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]));
+    } else {
+      setSelected((prev) => (prev[0] === id ? [] : [id]));
+      setOpen(false);
+    }
+  };
+
+  const remove = (id: string) => {
+    setSelected((prev) => prev.filter((v) => v !== id));
+  };
+
+  // Listen for postMessage from embedded iframe after successful save
+  useEffect(() => {
+    if (!sheetOpen) return;
+
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data?.type !== "cms:created") return;
+      const docId = String(e.data.id);
+      fetch(`/api/cms/${collectionSlug}/${docId}?status=any`)
+        .then((res) => (res.ok ? res.json() : null))
+        .then((doc) => {
+          if (doc) {
+            const label = String(doc[labelField] ?? doc.slug ?? docId);
+            setOptions((prev) => {
+              const exists = prev.some((o) => o.value === docId);
+              return exists
+                ? prev.map((o) => (o.value === docId ? { ...o, label } : o))
+                : [{ value: docId, label }, ...prev];
+            });
+            if (hasMany) {
+              setSelected((prev) => (prev.includes(docId) ? prev : [...prev, docId]));
+            } else {
+              setSelected([docId]);
+            }
+          }
+          setSheetOpen(false);
+        });
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [sheetOpen, collectionSlug, hasMany, labelField]);
+
+  return (
+    <div className="space-y-2">
+      <input ref={hiddenRef} type="hidden" name={name} value={hiddenValue} />
+
+      {/* Selected items (hasMany chips) */}
+      {hasMany && selected.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {selected.map((id) => (
+            <span
+              key={id}
+              className="bg-secondary text-secondary-foreground inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-sm"
+            >
+              {getLabel(id)}
+              <button
+                type="button"
+                title="Remove"
+                onClick={() => remove(id)}
+                className="text-muted-foreground hover:text-foreground -mr-0.5 rounded p-0.5"
+              >
+                <X className="size-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Combobox */}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            size="lg"
+            className="border-input bg-muted/30 hover:bg-muted dark:bg-input/30 dark:hover:bg-input/50 w-full justify-between text-base font-normal"
+          >
+            <span className={cn("truncate", !displayLabel && "text-muted-foreground")}>
+              {displayLabel || `Search ${collectionLabel.toLowerCase()}...`}
+            </span>
+            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+          <Command>
+            <CommandInput placeholder={`Search ${collectionLabel.toLowerCase()}...`} />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              {options.map((o) => (
+                <CommandItem key={o.value} value={o.label} onSelect={() => selectItem(o.value)}>
+                  <Check className={cn("ml-1 size-4", selected.includes(o.value) ? "opacity-100" : "opacity-0")} />
+                  {o.label}
+                </CommandItem>
+              ))}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* Create new button */}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="text-foreground/70"
+        onClick={() => setSheetOpen(true)}
+      >
+        <Plus className="size-3.5" />
+        Create {collectionLabel.toLowerCase()}
+      </Button>
+
+      {/* Create sheet — full-width iframe with the actual add-new page */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="data-[side=right]:w-[90vw] data-[side=right]:sm:max-w-[90vw] data-[side=right]:lg:w-[50vw] data-[side=right]:lg:max-w-[50vw]"
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Create {collectionLabel.toLowerCase()}</SheetTitle>
+          </SheetHeader>
+          <div className="flex-1 overflow-hidden">
+            {sheetOpen && (
+              <iframe
+                ref={iframeRef}
+                src={`/admin/${collectionSlug}/new?_embed=1`}
+                title={`Create ${collectionLabel}`}
+                className="size-full"
+              />
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}