@kidecms/core 0.1.0

package/routes/pages/admin/assets/[id].astro

@@ -0,0 +1,183 @@
+---
+import { ArrowLeft, Trash2 } from "lucide-react";
+
+import AdminCard from "@kidecms/core/admin/components/AdminCard.astro";
+import AiGenerateButton from "@kidecms/core/admin/components/AiGenerateButton";
+import FocalPointSelector from "@kidecms/core/admin/components/FocalPointSelector";
+import UnsavedGuard from "@kidecms/core/admin/components/UnsavedGuard";
+import TreeSelect, { flattenByParent } from "@kidecms/core/admin/components/TreeSelect";
+import { buttonVariants } from "@kidecms/core/admin/components/ui/button";
+import { Label } from "@kidecms/core/admin/components/ui/label";
+import { Textarea } from "@kidecms/core/admin/components/ui/textarea";
+import config from "virtual:kide/config";
+import { assets, folders, isAiEnabled } from "virtual:kide/runtime";
+import { formatDate, initDateFormat } from "@kidecms/core";
+import AdminLayout from "@kidecms/core/admin/layouts/AdminLayout.astro";
+
+export const prerender = false;
+
+const user = Astro.locals.user;
+const accessibleCollections = config.collections.filter((c) => {
+  const rule = c.access?.read;
+  if (!rule) return true;
+  return rule({ user: user ?? null, doc: null, operation: "read", collection: c.slug });
+});
+
+initDateFormat(config, Astro.cookies.get("tz")?.value);
+const { id } = Astro.params;
+if (!id) return Astro.redirect("/admin/assets");
+
+const asset = await assets.findById(id);
+if (!asset) return Astro.redirect("/admin/assets");
+
+const aiEnabled = isAiEnabled();
+const isImage = asset.mimeType.startsWith("image/");
+const currentFolder = asset.folder ? await folders.findById(asset.folder) : null;
+const allFolders = await folders.findAll();
+
+const formatSize = (bytes: number) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const folderItems = flattenByParent(
+  allFolders,
+  (f) => f._id,
+  (f) => f.name,
+  (f) => f.parent,
+);
+---
+
+<AdminLayout
+  title={`${asset.filename} | Assets | Kide CMS`}
+  collections={accessibleCollections}
+  activeCollection="assets"
+  customNav={config.admin?.nav}
+>
+  <section class="space-y-6">
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <a
+          href={asset.folder ? `/admin/assets?folder=${asset.folder}` : "/admin/assets"}
+          class="text-muted-foreground hover:text-foreground mb-2 inline-flex items-center gap-1 text-sm transition-colors"
+        >
+          <ArrowLeft className="size-3.5" />
+          {currentFolder ? currentFolder.name : "Assets"}
+        </a>
+        <h1 class="text-2xl font-semibold tracking-tight">{asset.filename}</h1>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-end gap-2">
+      <button type="submit" form="asset-form" value="save" disabled class={buttonVariants({ variant: "outline" })}>
+        Save
+      </button>
+      <form method="post" action={`/api/cms/assets/${asset._id}`}>
+        <input type="hidden" name="_method" value="DELETE" />
+        <button type="submit" class={buttonVariants({ variant: "destructive" })}>
+          <Trash2 className="size-3.5" />
+          Delete
+        </button>
+      </form>
+    </div>
+
+    <UnsavedGuard client:load formId="asset-form" isNew={false} isDraft={false} />
+    <form id="asset-form" method="post" action={`/api/cms/assets/${asset._id}`}>
+      <input type="hidden" name="_action" value="update" />
+      <div class="grid gap-6 2xl:grid-cols-[minmax(0,1.55fr)_minmax(380px,460px)]">
+        <div class="space-y-6">
+          {
+            isImage && (
+              <AdminCard title="Preview">
+                <FocalPointSelector
+                  client:load
+                  src={asset.url}
+                  alt={asset.alt ?? asset.filename}
+                  focalX={asset.focalX}
+                  focalY={asset.focalY}
+                />
+              </AdminCard>
+            )
+          }
+        </div>
+
+        <div class="space-y-6 text-sm [&_input]:text-sm [&_textarea]:text-sm">
+          <AdminCard title="Info">
+            <dl class="grid gap-3">
+              <div>
+                <dt class="text-muted-foreground text-xs">Filename</dt>
+                <dd class="mt-0.5">{asset.filename}</dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground text-xs">Type</dt>
+                <dd class="mt-0.5">{asset.mimeType}</dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground text-xs">Size</dt>
+                <dd class="mt-0.5">{formatSize(asset.size)}</dd>
+              </div>
+              {
+                asset.width && asset.height && (
+                  <div>
+                    <dt class="text-muted-foreground text-xs">Dimensions</dt>
+                    <dd class="mt-0.5">
+                      {asset.width} &times; {asset.height} px
+                    </dd>
+                  </div>
+                )
+              }
+              <div>
+                <dt class="text-muted-foreground text-xs">Path</dt>
+                <dd class="mt-0.5 font-mono text-xs break-all">{asset.storagePath}</dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground text-xs">Created</dt>
+                <dd class="mt-0.5">{formatDate(asset._createdAt)}</dd>
+              </div>
+            </dl>
+          </AdminCard>
+
+          <AdminCard title="Details">
+            <div class="grid gap-5">
+              <div class="grid gap-2">
+                <Label htmlFor="folder">Folder</Label>
+                <TreeSelect
+                  client:load
+                  name="folder"
+                  value={asset.folder ?? ""}
+                  placeholder="Select folder..."
+                  searchPlaceholder="Search folders..."
+                  emptyMessage="No folders found."
+                  items={folderItems}
+                />
+              </div>
+              <div class="grid gap-2">
+                <Label htmlFor="alt">Alt text</Label>
+                <Textarea
+                  className="w-full shadow-none"
+                  id="alt"
+                  name="alt"
+                  rows={3}
+                  defaultValue={asset.alt ?? ""}
+                  placeholder="Describe the image for accessibility..."
+                />
+                {
+                  aiEnabled && isImage && (
+                    <AiGenerateButton
+                      client:load
+                      endpoint="/api/cms/ai/alt-text"
+                      payload={{ imageUrl: asset.url, filename: asset.filename }}
+                      targetField="alt"
+                      label="Generate alt text"
+                    />
+                  )
+                }
+              </div>
+            </div>
+          </AdminCard>
+        </div>
+      </div>
+    </form>
+  </section>
+</AdminLayout>

package/routes/pages/admin/assets/index.astro

@@ -0,0 +1,58 @@
+---
+import AssetsGrid from "@kidecms/core/admin/components/AssetsGrid";
+import config from "virtual:kide/config";
+import { assets, folders } from "virtual:kide/runtime";
+import AdminLayout from "@kidecms/core/admin/layouts/AdminLayout.astro";
+
+export const prerender = false;
+
+const user = Astro.locals.user;
+const accessibleCollections = config.collections.filter((c) => {
+  const rule = c.access?.read;
+  if (!rule) return true;
+  return rule({ user: user ?? null, doc: null, operation: "read", collection: c.slug });
+});
+
+const currentFolderId = Astro.url.searchParams.get("folder") || null;
+
+// Get current folder details if we're inside one
+const currentFolder = currentFolderId ? await folders.findById(currentFolderId) : null;
+if (currentFolderId && !currentFolder) return Astro.redirect("/admin/assets");
+
+// Get subfolders and assets for current location
+const subfolders = await folders.findByParent(currentFolderId);
+const folderAssets = await assets.find({ limit: 100, folder: currentFolderId });
+
+// Build breadcrumb trail
+const breadcrumbs: Array<{ label: string; href: string; id: string }> = [];
+if (currentFolder) {
+  let folder: typeof currentFolder | null = currentFolder;
+  const chain: typeof breadcrumbs = [];
+  while (folder) {
+    chain.unshift({ label: folder.name, href: `/admin/assets?folder=${folder._id}`, id: folder._id });
+    folder = folder.parent ? await folders.findById(folder.parent) : null;
+  }
+  breadcrumbs.push(...chain);
+}
+
+// Serialize data for the React island
+const folderData = subfolders.map((f) => ({ _id: f._id, name: f.name }));
+const assetData = folderAssets.map((a) => ({
+  _id: a._id,
+  filename: a.filename,
+  mimeType: a.mimeType,
+  url: a.url,
+  alt: a.alt,
+  _createdAt: a._createdAt,
+}));
+---
+
+<AdminLayout title="Assets | Kide CMS" collections={accessibleCollections} activeCollection="assets" customNav={config.admin?.nav}>
+  <AssetsGrid
+    client:load
+    folders={folderData}
+    assets={assetData}
+    breadcrumbs={breadcrumbs}
+    currentFolderId={currentFolderId}
+  />
+</AdminLayout>

package/routes/pages/admin/invite.astro

@@ -0,0 +1,116 @@
+---
+import "virtual:kide/admin-css";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kidecms/core/admin/components/ui/card";
+import { Input } from "@kidecms/core/admin/components/ui/input";
+import { Label } from "@kidecms/core/admin/components/ui/label";
+import { buttonVariants } from "@kidecms/core/admin/components/ui/button";
+import { validateInvite } from "virtual:kide/runtime";
+import { getDb } from "virtual:kide/db";
+import { eq } from "drizzle-orm";
+
+export const prerender = false;
+
+const token = Astro.url.searchParams.get("token") ?? "";
+const error = Astro.url.searchParams.get("error");
+
+let userEmail = "";
+let valid = false;
+
+if (token) {
+  const invite = await validateInvite(token);
+  if (invite) {
+    valid = true;
+    const db = await getDb();
+    const schema = await import("virtual:kide/schema");
+    const tables = schema.cmsTables as Record<string, { main: any }>;
+    if (tables.users) {
+      const rows = await db.select().from(tables.users.main).where(eq(tables.users.main._id, invite.userId)).limit(1);
+      if (rows.length > 0) userEmail = String((rows[0] as any).email);
+    }
+  }
+}
+
+const errorMessage =
+  error === "missing"
+    ? "Name and password are required."
+    : error === "password"
+      ? "Passwords do not match."
+      : error === "short"
+        ? "Password must be at least 8 characters."
+        : error === "expired" || error === "invalid"
+          ? "This invite link has expired or already been used."
+          : null;
+---
+
+<!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>Accept Invitation | Kide CMS</title>
+    <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">
+    <div class="flex min-h-screen items-center justify-center px-4">
+      <div class="w-full max-w-sm space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Set up your account</CardTitle>
+            <CardDescription>
+              {valid ? `Complete your account for ${userEmail}` : "Accept your invitation to Kide CMS"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {
+              errorMessage && (
+                <div class="border-destructive/50 bg-destructive/10 text-destructive mb-4 rounded-lg border px-3 py-2 text-sm">
+                  {errorMessage}
+                </div>
+              )
+            }
+            {
+              valid ? (
+                <form method="post" action="/api/cms/auth/invite" class="grid gap-4">
+                  <input type="hidden" name="_action" value="accept" />
+                  <input type="hidden" name="token" value={token} />
+                  <div class="grid gap-2">
+                    <Label htmlFor="name">Name</Label>
+                    <Input id="name" name="name" type="text" placeholder="Your name" required autoFocus />
+                  </div>
+                  <div class="grid gap-2">
+                    <Label htmlFor="password">Password</Label>
+                    <Input id="password" name="password" type="password" placeholder="Min 8 characters" required />
+                  </div>
+                  <div class="grid gap-2">
+                    <Label htmlFor="confirmPassword">Confirm password</Label>
+                    <Input
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type="password"
+                      placeholder="Repeat password"
+                      required
+                    />
+                  </div>
+                  <button class={buttonVariants({ size: "lg", className: "w-full" })} type="submit">
+                    Create account
+                  </button>
+                </form>
+              ) : (
+                !errorMessage && <p class="text-muted-foreground text-sm">No valid invitation token provided.</p>
+              )
+            }
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </body>
+</html>

package/routes/pages/admin/login.astro

@@ -0,0 +1,57 @@
+---
+import "virtual:kide/admin-css";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kidecms/core/admin/components/ui/card";
+import { Input } from "@kidecms/core/admin/components/ui/input";
+import { Label } from "@kidecms/core/admin/components/ui/label";
+import { buttonVariants } from "@kidecms/core/admin/components/ui/button";
+
+export const prerender = false;
+
+const error = Astro.url.searchParams.get("error");
+const errorMessage =
+  error === "invalid" ? "Invalid email or password." : error === "missing" ? "Email and password are required." : null;
+---
+
+<!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>Sign in | Kide CMS</title>
+  </head>
+  <body class="bg-background text-foreground min-h-screen antialiased">
+    <div class="flex min-h-screen items-center justify-center px-4">
+      <div class="w-full max-w-sm space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Sign in</CardTitle>
+            <CardDescription>Enter your credentials to continue</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {
+              errorMessage && (
+                <div class="border-destructive/50 bg-destructive/10 text-destructive mb-4 rounded-lg border px-3 py-2 text-sm">
+                  {errorMessage}
+                </div>
+              )
+            }
+            <form method="post" action="/api/cms/auth/login" class="grid gap-4">
+              <div class="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" name="email" type="email" placeholder="admin@example.com" required autoFocus />
+              </div>
+              <div class="grid gap-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" name="password" type="password" placeholder="Enter password" required />
+              </div>
+              <button class={buttonVariants({ size: "lg", className: "w-full" })} type="submit"> Sign in </button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </body>
+</html>

package/routes/pages/admin/setup.astro

@@ -0,0 +1,91 @@
+---
+import "virtual:kide/admin-css";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@kidecms/core/admin/components/ui/card";
+import { Input } from "@kidecms/core/admin/components/ui/input";
+import { Label } from "@kidecms/core/admin/components/ui/label";
+import { buttonVariants } from "@kidecms/core/admin/components/ui/button";
+import { getDb } from "virtual:kide/db";
+
+export const prerender = false;
+
+// If users already exist, redirect to login
+const db = await getDb();
+const schema = await import("virtual:kide/schema");
+const tables = schema.cmsTables as Record<string, { main: any }>;
+if (tables.users) {
+  const rows = await db.select().from(tables.users.main).limit(1);
+  if (rows.length > 0) {
+    return Astro.redirect("/admin/login");
+  }
+}
+
+const error = Astro.url.searchParams.get("error");
+const errorMessage =
+  error === "missing"
+    ? "All fields are required."
+    : error === "password"
+      ? "Passwords do not match."
+      : error === "short"
+        ? "Password must be at least 8 characters."
+        : null;
+---
+
+<!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>Setup | Kide CMS</title>
+  </head>
+  <body class="bg-background text-foreground min-h-screen antialiased">
+    <div class="flex min-h-screen items-center justify-center px-4">
+      <div class="w-full max-w-sm space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Create admin account</CardTitle>
+            <CardDescription>This will be the first user with admin privileges</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {
+              errorMessage && (
+                <div class="border-destructive/50 bg-destructive/10 text-destructive mb-4 rounded-lg border px-3 py-2 text-sm">
+                  {errorMessage}
+                </div>
+              )
+            }
+            <form method="post" action="/api/cms/auth/setup" class="grid gap-4">
+              <div class="grid gap-2">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" name="name" type="text" placeholder="Your name" required autoFocus />
+              </div>
+              <div class="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" name="email" type="email" placeholder="admin@example.com" required />
+              </div>
+              <div class="grid gap-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" name="password" type="password" placeholder="Min 8 characters" required />
+              </div>
+              <div class="grid gap-2">
+                <Label htmlFor="confirmPassword">Confirm password</Label>
+                <Input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  placeholder="Repeat password"
+                  required
+                />
+              </div>
+              <button class={buttonVariants({ size: "lg", className: "w-full" })} type="submit">
+                Create account
+              </button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </body>
+</html>

package/virtual.d.ts

@@ -0,0 +1,61 @@
+declare module "virtual:kide/custom-fields" {
+  export const customFields: Record<string, any>;
+}
+
+declare module "virtual:kide/config" {
+  import type { CmsConfig } from "@kidecms/core";
+  const config: CmsConfig;
+  export default config;
+}
+
+declare module "virtual:kide/api" {
+  const cms: Record<string, any> & { meta: any };
+  export { cms };
+}
+
+declare module "virtual:kide/schema" {
+  const cmsTables: Record<string, { main: any; translations?: any }>;
+  export { cmsTables };
+}
+
+declare module "virtual:kide/runtime" {
+  export const initCmsRuntime: () => void;
+  export {
+    getSessionUser,
+    destroySession,
+    clearSessionCookie,
+    verifyPassword,
+    hashPassword,
+    createSession,
+    setSessionCookie,
+    validateSession,
+    createInvite,
+    validateInvite,
+    consumeInvite,
+    SESSION_COOKIE_NAME,
+    acquireLock,
+    releaseLock,
+    isAiEnabled,
+    getAiModel,
+    streamAltText,
+    streamSeoDescription,
+    streamTranslation,
+    assets,
+    folders,
+    createCms,
+  } from "@kidecms/core";
+}
+
+declare module "virtual:kide/block-renderer" {
+  const BlockRenderer: any;
+  export default BlockRenderer;
+}
+
+declare module "virtual:kide/db" {
+  export function getDb(): Promise<any>;
+}
+
+declare module "virtual:kide/email" {
+  export function sendInviteEmail(options: { to: string; inviteUrl: string }): Promise<void>;
+  export function isEmailConfigured(): boolean;
+}