@kidecms/core 0.1.0

package/admin/layouts/AdminLayout.astro

@@ -0,0 +1,340 @@
+---
+import "virtual:kide/admin-css";
+
+import {
+  ExternalLink,
+  Clock,
+  FileText,
+  FolderTree,
+  Image,
+  Layers,
+  LayoutGrid,
+  Menu,
+  PencilRuler,
+  Plus,
+  Users,
+  BarChart,
+  Bell,
+  Bookmark,
+  Calendar,
+  Database,
+  Globe,
+  Home,
+  Key,
+  Link,
+  Lock,
+  Mail,
+  MessageSquare,
+  Package,
+  Palette,
+  Search,
+  Settings,
+  Shield,
+  Star,
+  Tag,
+  Terminal,
+  Zap,
+} from "lucide-react";
+
+const navIconMap: Record<string, any> = {
+  BarChart, Bell, Bookmark, Calendar, Clock, Database, FileText, FolderTree,
+  Globe, Home, Image, Key, Layers, LayoutGrid, Link, Lock, Mail,
+  Menu, MessageSquare, Package, Palette, PencilRuler, Search, Settings,
+  Shield, Star, Tag, Terminal, Users, Zap,
+};
+
+import MobileSidebar from "../components/MobileSidebar";
+import SidebarUserMenu from "../components/SidebarUserMenu";
+import Toast from "../components/Toast.astro";
+import { Separator } from "../components/ui/separator";
+import { cn } from "../lib/utils";
+
+const {
+  title = "Admin",
+  collections = [],
+  activeCollection = null,
+  embed = false,
+  customNav = [],
+} = Astro.props as {
+  title?: string;
+  collections?: Array<{ slug: string; labels: { singular: string; plural: string }; singleton?: boolean }>;
+  activeCollection?: string | null;
+  embed?: boolean;
+  customNav?: Array<{ label: string; href: string; icon?: string }>;
+};
+
+const user = Astro.locals.user;
+
+// Server-side toast: read _toast/_msg params set by API redirect
+const toastStatus = Astro.url.searchParams.get("_toast") as "success" | "error" | null;
+const toastMessage =
+  Astro.url.searchParams.get("_msg") ?? (toastStatus === "success" ? "Saved successfully" : "Something went wrong");
+
+// Build sidebar nav in explicit order:
+// 1. Content collections (alphabetical, shared icon)
+// 2. Singles
+// 3. Taxonomies, Menus, Authors, Users (pinned utility collections)
+// 4. Assets
+
+const pinnedOrder = ["taxonomies", "menus", "authors", "users"];
+const pinnedSlugs = new Set(pinnedOrder);
+const pinnedIcons: Record<string, any> = {
+  taxonomies: FolderTree,
+  menus: Menu,
+  authors: PencilRuler,
+  users: Users,
+};
+
+const hasSingletons = collections.some((c) => c.singleton);
+const singletonSlugs = new Set(collections.filter((c) => c.singleton).map((c) => c.slug));
+const isActiveSingles =
+  activeCollection === "singles" || (activeCollection !== null && singletonSlugs.has(activeCollection));
+
+type NavItem = { href: string; label: string; singularLabel?: string; Icon: any; active: boolean; newHref?: string; weight: number };
+const navItems: NavItem[] = [];
+
+// Built-in nav items with default weights (spaced by 10 for easy interleaving)
+navItems.push({
+  href: "/admin/recent",
+  label: "Recent",
+  Icon: Clock,
+  active: activeCollection === "recent",
+  weight: 0,
+});
+
+const contentCollections = collections
+  .filter((c) => !c.singleton && !pinnedSlugs.has(c.slug))
+  .sort((a, b) => a.labels.plural.localeCompare(b.labels.plural));
+for (const c of contentCollections) {
+  navItems.push({
+    href: `/admin/${c.slug}`,
+    label: c.labels.plural,
+    singularLabel: c.labels.singular,
+    Icon: Layers,
+    active: activeCollection === c.slug,
+    newHref: `/admin/${c.slug}/new`,
+    weight: 10,
+  });
+}
+
+if (hasSingletons) {
+  navItems.push({ href: "/admin/singles", label: "Singles", Icon: FileText, active: isActiveSingles, weight: 20 });
+}
+
+for (const slug of pinnedOrder) {
+  const c = collections.find((col) => col.slug === slug);
+  if (c) {
+    navItems.push({
+      href: `/admin/${c.slug}`,
+      label: c.labels.plural,
+      singularLabel: c.labels.singular,
+      Icon: pinnedIcons[slug] ?? LayoutGrid,
+      active: activeCollection === c.slug,
+      newHref: `/admin/${c.slug}/new`,
+      weight: 30,
+    });
+  }
+}
+
+navItems.push({
+  href: "/admin/assets",
+  label: "Assets",
+  Icon: Image,
+  active: activeCollection === "assets",
+  weight: 40,
+});
+
+// Custom nav items from admin config
+const currentPath = Astro.url.pathname;
+for (const item of customNav) {
+  navItems.push({
+    href: item.href,
+    label: item.label,
+    Icon: navIconMap[item.icon ?? ""] ?? LayoutGrid,
+    active: currentPath === item.href || currentPath.startsWith(item.href + "/"),
+    weight: item.weight ?? 50,
+  });
+}
+
+// Sort all items by weight (stable sort preserves order within same weight)
+navItems.sort((a, b) => a.weight - b.weight);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <script is:inline>
+      if (!document.cookie.includes("tz="))
+        document.cookie = "tz=" + Intl.DateTimeFormat().resolvedOptions().timeZone + ";path=/;max-age=31536000";
+    </script>
+    <script is:inline>
+      (function () {
+        var t = localStorage.getItem("admin-theme") || "system";
+        var dark = t === "dark" || (t === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.classList.add("dark");
+      })();
+    </script>
+  </head>
+  <body class="bg-background text-foreground min-h-screen antialiased">
+    {
+      embed ? (
+        <main class="mx-auto w-full px-4 py-6 lg:px-8 lg:py-8">
+          <slot />
+        </main>
+      ) : (
+        <div
+          class="min-h-screen lg:grid"
+          style="grid-template-columns: 17rem 1fr; transition: grid-template-columns 150ms ease;"
+        >
+          {/* ── Desktop sidebar ──────────────────────────────────────────── */}
+          <aside class="bg-sidebar/40 sticky top-0 mt-1 hidden h-screen overflow-hidden border-r backdrop-blur transition-transform duration-150 ease-in-out lg:flex lg:flex-col">
+            <div class="px-3 pt-3 pb-2">
+              {user && (
+                <SidebarUserMenu
+                  client:load
+                  userName={user.name}
+                  userEmail={user.email}
+                  logoutAction="/api/cms/auth/logout"
+                />
+              )}
+            </div>
+
+            <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-3">
+              {navItems.map((item) => (
+                <div
+                    class={cn(
+                      "group relative rounded-lg",
+                      item.active ? "bg-foreground/10 dark:bg-accent" : "hover:bg-foreground/5 dark:hover:bg-accent/60",
+                    )}
+                  >
+                    <a
+                      href={item.href}
+                      class={cn(
+                        "flex items-center gap-3 px-3 py-2.5 text-sm",
+                        item.newHref && "pr-8",
+                        item.active ? "text-accent-foreground" : "text-foreground/70 group-hover:text-foreground",
+                      )}
+                    >
+                      <item.Icon className="size-4 shrink-0 stroke-1" />
+                      <span>{item.label}</span>
+                    </a>
+                    {item.newHref && (
+                      <a
+                        href={item.newHref}
+                        title={`Add new ${(item.singularLabel ?? item.label).toLowerCase()}`}
+                        class="text-foreground/40 hover:text-foreground/70 absolute top-1/2 right-1.5 hidden -translate-y-1/2 rounded p-1 group-hover:block"
+                      >
+                        <Plus className="size-3.5" />
+                      </a>
+                    )}
+                </div>
+              ))}
+            </nav>
+            <div class="border-t px-3 pt-2.5 pb-3">
+              <a
+                href="/"
+                target="_blank"
+                class="text-foreground/70 hover:text-foreground hover:bg-foreground/5 dark:hover:bg-accent/60 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm"
+              >
+                <ExternalLink className="size-4 shrink-0 stroke-1" />
+                <span>View site</span>
+              </a>
+            </div>
+          </aside>
+
+          <div class="min-w-0">
+            {/* ── Mobile header ────────────────────────────────────────── */}
+            <header class="bg-background/95 supports-backdrop-filter:bg-background/75 flex items-center gap-3 border-b px-4 py-3 backdrop-blur lg:hidden">
+              <MobileSidebar client:load>
+                <div class="px-3 pt-3 pb-1">
+                  {user && (
+                    <SidebarUserMenu
+                      client:load
+                      userName={user.name}
+                      userEmail={user.email}
+                      logoutAction="/api/cms/auth/logout"
+                    />
+                  )}
+                  <Separator className="mt-3" />
+                </div>
+
+                <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-3">
+                  {navItems.map((item) => (
+                    <div
+                      class={cn(
+                        "group relative rounded-lg",
+                        item.active
+                          ? "bg-foreground/10 dark:bg-accent"
+                          : "hover:bg-foreground/5 dark:hover:bg-accent/60",
+                      )}
+                    >
+                      <a
+                        href={item.href}
+                        class={cn(
+                          "flex items-center gap-3 px-3 py-2.5 text-sm",
+                          item.newHref && "pr-8",
+                          item.active ? "text-accent-foreground" : "text-foreground/70 group-hover:text-foreground",
+                        )}
+                      >
+                        <item.Icon className="size-4 shrink-0 stroke-1" />
+                        <span>{item.label}</span>
+                      </a>
+                      {item.newHref && (
+                        <a
+                          href={item.newHref}
+                          title={`Add new ${(item.singularLabel ?? item.label).toLowerCase()}`}
+                          class="text-foreground/40 hover:text-foreground/70 absolute top-1/2 right-1.5 hidden -translate-y-1/2 rounded p-1 group-hover:block"
+                        >
+                          <Plus className="size-3.5" />
+                        </a>
+                      )}
+                    </div>
+                  ))}
+                </nav>
+                <div class="border-t px-3 py-3">
+                  <a
+                    href="/"
+                    target="_blank"
+                    class="text-foreground/70 hover:text-foreground hover:bg-foreground/5 dark:hover:bg-accent/60 flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm"
+                  >
+                    <ExternalLink className="size-4 shrink-0 stroke-1" />
+                    <span>View site</span>
+                  </a>
+                </div>
+              </MobileSidebar>
+            </header>
+
+            <main class="mx-auto w-full max-w-[1900px] px-4 py-6 lg:px-8 lg:py-8">
+              <slot />
+            </main>
+          </div>
+        </div>
+      )
+    }
+
+    {toastStatus && <Toast status={toastStatus} message={toastMessage} />}
+
+    {/* Clean toast params from URL and remove toast element after animation */}
+    <script is:inline>
+      (function () {
+        var p = new URLSearchParams(location.search);
+        var status = p.get("_toast");
+        if (!status) return;
+        p.delete("_toast");
+        p.delete("_msg");
+        history.replaceState({}, "", location.pathname + (p.size ? "?" + p : ""));
+        // Error toasts stay longer (5s) than success toasts (3s)
+        var delay = status === "error" ? 5200 : 3200;
+        setTimeout(function () {
+          var el = document.getElementById("admin-toast");
+          if (el) el.remove();
+        }, delay);
+      })();
+    </script>
+  </body>
+</html>

package/admin/lib/utils.ts

@@ -0,0 +1,19 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const ALLOWED_WIDTHS = [320, 480, 640, 768, 960, 1024, 1280, 1536, 1920];
+
+function clampWidth(width: number): number {
+  return ALLOWED_WIDTHS.reduce((prev, curr) => (Math.abs(curr - width) < Math.abs(prev - width) ? curr : prev));
+}
+
+/** Generate a thumbnail URL for an upload path. Works on both local (Sharp) and Cloudflare (Image Transformations). */
+export function thumbnail(src: string, width: number = 480): string {
+  if (!src || !src.startsWith("/uploads/")) return src;
+  const w = clampWidth(width);
+  return `/api/cms/img${src}?w=${w}`;
+}

package/dist/admin.js

@@ -0,0 +1,92 @@
+import { richTextToPlainText } from "./values";
+const DEFAULT_DATE_FORMAT = "en-US";
+let dateLocale = DEFAULT_DATE_FORMAT;
+let timeZone;
+export const initDateFormat = (config, nextTimeZone) => {
+    dateLocale = config.admin?.dateFormat ?? DEFAULT_DATE_FORMAT;
+    timeZone = nextTimeZone;
+};
+export const formatDate = (value) => {
+    if (!value)
+        return "—";
+    const date = new Date(String(value));
+    if (Number.isNaN(date.getTime()))
+        return String(value);
+    return date.toLocaleString(dateLocale, {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone,
+    });
+};
+export const resolveAdminRoute = (path) => {
+    const segments = (path ?? "").split("/").filter(Boolean);
+    if (segments.length === 0)
+        return { kind: "dashboard" };
+    if (segments[0] === "recent" && segments.length === 1)
+        return { kind: "recent" };
+    if (segments[0] === "singles" && segments.length === 1)
+        return { kind: "singles" };
+    if (segments.length === 1)
+        return { kind: "list", collectionSlug: segments[0] };
+    if (segments[1] === "new")
+        return { kind: "new", collectionSlug: segments[0] };
+    return {
+        kind: "edit",
+        collectionSlug: segments[0],
+        documentId: segments[1],
+    };
+};
+export const humanize = (value) => value
+    .replace(/^_+/, "")
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[-_]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^\w/, (char) => char.toUpperCase());
+export const formatFieldValue = (field, value, relationLabels = {}) => {
+    if (value === undefined || value === null || value === "")
+        return "—";
+    if (!field)
+        return String(value);
+    if (field.type === "richText") {
+        const text = richTextToPlainText(value);
+        return text.length > 120 ? `${text.slice(0, 117)}...` : text;
+    }
+    if (field.type === "array") {
+        return Array.isArray(value) ? value.join(", ") : "—";
+    }
+    if (field.type === "json" || field.type === "blocks") {
+        return Array.isArray(value) ? `${value.length} items` : "JSON";
+    }
+    if (field.type === "boolean")
+        return value ? "Yes" : "No";
+    if (field.type === "relation") {
+        if (Array.isArray(value)) {
+            return value.map((entry) => relationLabels[String(entry)] ?? String(entry)).join(", ");
+        }
+        return relationLabels[String(value)] ?? String(value);
+    }
+    return String(value);
+};
+export const getListColumns = (collection, viewConfig) => {
+    if (viewConfig?.columns?.length) {
+        return collection.drafts ? viewConfig.columns : viewConfig.columns.filter((column) => column !== "_status");
+    }
+    const firstField = "title" in collection.fields ? "title" : Object.keys(collection.fields)[0];
+    return collection.drafts ? [firstField, "_status", "_updatedAt"] : [firstField, "_updatedAt"];
+};
+export const getFieldSets = (collection) => {
+    const allFields = Object.keys(collection.fields).filter((fieldName) => !collection.fields[fieldName].admin?.hidden);
+    const contentFields = allFields.filter((fieldName) => collection.fields[fieldName].admin?.position !== "sidebar");
+    const sidebarFields = allFields.filter((fieldName) => collection.fields[fieldName].admin?.position === "sidebar");
+    if (sidebarFields.length > 0) {
+        return [
+            { fields: contentFields, position: "content" },
+            { fields: sidebarFields, position: "sidebar" },
+        ];
+    }
+    return [{ fields: contentFields, position: "content" }];
+};

package/dist/ai.js

@@ -0,0 +1,67 @@
+import { streamText } from "ai";
+import { getStorage, readEnv } from "./runtime";
+export function isAiEnabled() {
+    return !!(readEnv("AI_PROVIDER") && readEnv("AI_API_KEY"));
+}
+export async function getAiModel() {
+    const provider = readEnv("AI_PROVIDER") || "openai";
+    const modelName = readEnv("AI_MODEL") || "gpt-4o-mini";
+    if (provider === "openai") {
+        const { createOpenAI } = await import("@ai-sdk/openai");
+        const openai = createOpenAI({ apiKey: readEnv("AI_API_KEY") });
+        return openai(modelName);
+    }
+    throw new Error(`Unsupported AI provider: ${provider}`);
+}
+export async function streamAltText(imageUrl, filename) {
+    const model = await getAiModel();
+    const image = await getStorage().getFile(imageUrl);
+    if (!image) {
+        throw new Error(`Image not found: ${imageUrl}`);
+    }
+    return streamText({
+        model,
+        messages: [
+            {
+                role: "user",
+                content: [
+                    {
+                        type: "image",
+                        image: new Uint8Array(image),
+                    },
+                    {
+                        type: "text",
+                        text: `Generate a concise, descriptive alt text for this image (filename: ${filename}). The alt text should be suitable for accessibility purposes. Return only the alt text, no quotes or extra formatting.`,
+                    },
+                ],
+            },
+        ],
+    });
+}
+export async function streamSeoDescription(content) {
+    const model = await getAiModel();
+    const prompt = `Generate an SEO-optimized meta description (max 155 characters) for a page with the following content. Return only the description, no quotes or extra formatting.
+
+Title: ${content.title}
+${content.excerpt ? `Excerpt: ${content.excerpt}` : ""}
+${content.body ? `Body preview: ${content.body.substring(0, 500)}` : ""}`;
+    return streamText({ model, prompt });
+}
+export async function streamTranslation(content) {
+    const model = await getAiModel();
+    let prompt;
+    if (content.fieldType === "richText") {
+        prompt = `Translate the following rich text JSON AST from ${content.sourceLocale} to ${content.targetLocale}. Keep the exact same JSON structure, only translate the text values. Return only the valid JSON, no extra formatting or code blocks.
+
+${content.text}`;
+    }
+    else if (content.fieldType === "slug") {
+        prompt = `Translate and create a URL-friendly slug in ${content.targetLocale} based on this ${content.sourceLocale} text: "${content.text}". Return only the slug (lowercase, hyphens instead of spaces, no special characters).`;
+    }
+    else {
+        prompt = `Translate the following text from ${content.sourceLocale} to ${content.targetLocale}. Return only the translated text, no quotes or extra formatting.
+
+${content.text}`;
+    }
+    return streamText({ model, prompt });
+}