@kidecms/core 0.1.0

package/admin/components/SelectField.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+
+type SelectOption = { label: string; value: string };
+
+type Props = {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  items: SelectOption[];
+  onChange?: (value: string) => void;
+};
+
+export default function SelectField({
+  name,
+  value: initialValue,
+  placeholder = "Select an option",
+  disabled,
+  items,
+  onChange: onChangeProp,
+}: Props) {
+  const [value, setValue] = useState(initialValue ?? "");
+  const hiddenRef = useRef<HTMLInputElement>(null);
+  const isInitial = useRef(true);
+
+  useEffect(() => {
+    if (isInitial.current) {
+      isInitial.current = false;
+      return;
+    }
+    hiddenRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [value]);
+
+  return (
+    <>
+      <input type="hidden" name={name} value={value} ref={hiddenRef} />
+      <Select
+        items={items}
+        value={value}
+        onValueChange={(v) => {
+          setValue(v ?? "");
+          onChangeProp?.(v ?? "");
+        }}
+        disabled={disabled}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="">
+              <span className="text-muted-foreground">None</span>
+            </SelectItem>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </>
+  );
+}

package/admin/components/SidebarUserMenu.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ChevronsUpDown, LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu";
+import { DropdownMenuTrigger } from "./ui/dropdown-menu";
+
+type Theme = "light" | "dark" | "system";
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+  const dark = theme === "dark" || (theme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
+  root.classList.toggle("dark", dark);
+}
+
+export default function SidebarUserMenu({
+  userName,
+  userEmail,
+  logoutAction,
+}: {
+  userName: string;
+  userEmail: string;
+  logoutAction: string;
+}) {
+  const [theme, setTheme] = useState<Theme>("system");
+
+  useEffect(() => {
+    const saved = localStorage.getItem("admin-theme") as Theme | null;
+    if (saved) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTheme(saved);
+      applyTheme(saved);
+    }
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if ((localStorage.getItem("admin-theme") ?? "system") === "system") {
+        applyTheme("system");
+      }
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  const changeTheme = (t: Theme) => {
+    setTheme(t);
+    localStorage.setItem("admin-theme", t);
+    applyTheme(t);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="hover:bg-foreground/5 dark:hover:bg-accent/60 flex w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors">
+        <div className="bg-primary/80 text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-full font-medium">
+          {userName.charAt(0).toUpperCase()}
+        </div>
+        <div className="min-w-0 flex-1 text-left">
+          <div className="truncate text-sm font-medium">{userName}</div>
+          <div className="text-muted-foreground truncate text-xs">{userEmail}</div>
+        </div>
+        <ChevronsUpDown className="text-muted-foreground size-4 shrink-0" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent side="bottom" align="start" className="w-(--radix-dropdown-menu-trigger-width)">
+        <DropdownMenuItem onClick={() => changeTheme("light")}>
+          <Sun className="text-muted-foreground size-3.5" />
+          Light
+          {theme === "light" && <span className="ml-auto text-xs">&#10003;</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => changeTheme("dark")}>
+          <Moon className="text-muted-foreground size-3.5" />
+          Dark
+          {theme === "dark" && <span className="ml-auto text-xs">&#10003;</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => changeTheme("system")}>
+          <Monitor className="text-muted-foreground size-3.5" />
+          System
+          {theme === "system" && <span className="ml-auto text-xs">&#10003;</span>}
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={() => {
+            const form = document.createElement("form");
+            form.method = "post";
+            form.action = logoutAction;
+            document.body.appendChild(form);
+            form.submit();
+          }}
+        >
+          <LogOut className="text-muted-foreground size-3.5" />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/admin/components/SlugField.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { Input } from "./ui/input";
+import { cn } from "../lib/utils";
+
+type Props = {
+  name: string;
+  value?: string;
+  from?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+};
+
+function slugify(value: string) {
+  return value
+    .normalize("NFKD")
+    .replace(/[^\w\s-]/g, "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export default function SlugField({
+  name,
+  value: initialValue = "",
+  from,
+  readOnly,
+  required,
+  placeholder,
+  className,
+}: Props) {
+  const [value, setValue] = React.useState(initialValue);
+  const autoSyncRef = React.useRef(!initialValue);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!from || readOnly) return;
+
+    const form = wrapperRef.current?.closest("form");
+    if (!form) return;
+
+    const sourceInput = form.querySelector<HTMLInputElement>(`[name="${from}"]`);
+    if (!sourceInput) return;
+
+    const handleInput = () => {
+      if (autoSyncRef.current) {
+        setValue(slugify(sourceInput.value));
+      }
+    };
+
+    sourceInput.addEventListener("input", handleInput);
+    return () => sourceInput.removeEventListener("input", handleInput);
+  }, [from, readOnly]);
+
+  return (
+    <div ref={wrapperRef}>
+      <Input
+        type="text"
+        id={name}
+        name={name}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          autoSyncRef.current = false;
+        }}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        className={cn("shadow-none", className)}
+      />
+    </div>
+  );
+}

package/admin/components/TaxonomySelect.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import TreeSelect, { flattenTree, type TreeSelectItem } from "./TreeSelect";
+
+type Props = {
+  name: string;
+  value?: string;
+  taxonomySlug: string;
+};
+
+type Term = {
+  id: string;
+  name: string;
+  slug: string;
+  children?: Term[];
+};
+
+export default function TaxonomySelect({ name, value, taxonomySlug }: Props) {
+  const [items, setItems] = useState<TreeSelectItem[]>([]);
+
+  useEffect(() => {
+    fetch(`/api/cms/taxonomies?where=${encodeURIComponent(JSON.stringify({ slug: taxonomySlug }))}&status=any`)
+      .then((res) => (res.ok ? res.json() : { docs: [] }))
+      .then((result) => {
+        const doc = result.docs?.[0] ?? result[0];
+        if (!doc?.terms) return;
+        const parsed = typeof doc.terms === "string" ? JSON.parse(doc.terms) : doc.terms;
+        if (Array.isArray(parsed)) {
+          setItems(
+            flattenTree(
+              parsed as Term[],
+              (t) => t.slug,
+              (t) => t.name,
+            ),
+          );
+        }
+      })
+      .catch(() => {});
+  }, [taxonomySlug]);
+
+  return (
+    <TreeSelect
+      name={name}
+      value={value}
+      placeholder={`Search ${taxonomySlug}...`}
+      searchPlaceholder="Search terms..."
+      emptyMessage="No terms found."
+      items={items}
+    />
+  );
+}

package/admin/components/Toast.astro

@@ -0,0 +1,40 @@
+---
+/**
+ * Server-side toast notification — no React hydration needed.
+ * Rendered directly in HTML with CSS animations for auto-dismiss.
+ */
+import { CircleAlert, CircleCheck } from "lucide-react";
+import { cn } from "../lib/utils";
+
+type Props = {
+  status: "success" | "error";
+  message: string;
+};
+
+const { status, message } = Astro.props;
+const isError = status === "error";
+---
+
+{/* Centering wrapper — keeps left-1/2 -translate-x-1/2 stable while inner div animates */}
+<div class="fixed top-4 left-1/2 z-50 w-full max-w-sm -translate-x-1/2">
+  <div
+    id="admin-toast"
+    role={isError ? "alert" : "status"}
+    class={cn(
+      "bg-card flex items-center gap-2 rounded-lg border px-5 py-3 text-sm shadow-lg",
+      isError ? "border-red-500/30" : "border-green-500/30",
+    )}
+    style={`animation: toast-in 0.25s ease-out, toast-out 0.3s ease-in ${isError ? "4.7s" : "2.7s"} forwards`}
+  >
+    {
+      isError ? (
+        <CircleAlert className="size-4 shrink-0 text-red-600 dark:text-red-400" />
+      ) : (
+        <CircleCheck className="size-4 shrink-0 text-green-600 dark:text-green-400" />
+      )
+    }
+    <span class={cn(isError ? "text-red-700 dark:text-red-400" : "text-green-700 dark:text-green-400")}>
+      {message}
+    </span>
+  </div>
+</div>