create-kide-app 0.0.7 → 0.0.9

package/templates/base/src/styles/admin.css

@@ -0,0 +1,253 @@
+@import "tailwindcss";
+@custom-variant dark (&:is(.dark *));
+
+/* ── Light: cool blue-gray, neutral surfaces ─────────────────────── */
+:root {
+  --background: oklch(0.985 0.002 247);
+  --foreground: oklch(0.145 0.015 285);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.015 285);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.015 285);
+  --primary: oklch(0.145 0.015 285);
+  --primary-foreground: oklch(0.985 0.002 247);
+  --secondary: oklch(0.968 0.003 264);
+  --secondary-foreground: oklch(0.373 0.013 285);
+  --muted: oklch(0.968 0.003 264);
+  --muted-foreground: oklch(0.556 0.01 264);
+  --accent: oklch(0.968 0.003 264);
+  --accent-foreground: oklch(0.145 0.015 285);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.006 264);
+  --input: oklch(0.872 0.009 264);
+  --ring: oklch(0.556 0.01 264);
+  --chart-1: oklch(0.623 0.214 259.815);
+  --chart-2: oklch(0.546 0.245 262.881);
+  --chart-3: oklch(0.488 0.243 264.376);
+  --chart-4: oklch(0.424 0.199 265.638);
+  --chart-5: oklch(0.809 0.105 251.813);
+  --sidebar: oklch(0.985 0.002 247);
+  --sidebar-foreground: oklch(0.145 0.015 285);
+  --sidebar-primary: oklch(0.145 0.015 285);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247);
+  --sidebar-accent: oklch(0.968 0.003 264);
+  --sidebar-accent-foreground: oklch(0.373 0.013 285);
+  --sidebar-border: oklch(0.929 0.006 264);
+  --sidebar-ring: oklch(0.556 0.01 264);
+  --radius: 0.375rem;
+
+  /* Extended palette */
+  --color-surface: oklch(1 0 0);
+  --color-muted-strong: oklch(0.929 0.006 264);
+  --color-foreground-secondary: oklch(0.373 0.013 285);
+  --color-foreground-tertiary: oklch(0.446 0.011 264);
+  --color-placeholder: oklch(0.708 0.01 264);
+  --color-input-border: oklch(0.872 0.009 264);
+  --color-hover: oklch(0.968 0.003 264);
+  --color-destructive-subtle: oklch(0.971 0.013 17.38);
+  --color-accent-subtle: oklch(0.932 0.032 255);
+}
+
+/* ── Dark: deep blue-gray, elevated surfaces ─────────────────────── */
+/* .dark class is set by inline script before paint (handles system/dark/light) */
+.dark {
+  --background: oklch(0.175 0.014 265);
+  --foreground: oklch(0.96 0.004 265);
+  --card: oklch(0.215 0.014 265);
+  --card-foreground: oklch(0.96 0.004 265);
+  --popover: oklch(0.215 0.014 265);
+  --popover-foreground: oklch(0.96 0.004 265);
+  --primary: oklch(0.96 0.004 265);
+  --primary-foreground: oklch(0.175 0.014 265);
+  --secondary: oklch(0.255 0.014 265);
+  --secondary-foreground: oklch(0.78 0.006 265);
+  --muted: oklch(0.255 0.014 265);
+  --muted-foreground: oklch(0.6 0.006 265);
+  --accent: oklch(0.255 0.014 265);
+  --accent-foreground: oklch(0.96 0.004 265);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.3 0.012 265);
+  --input: oklch(0.36 0.012 265);
+  --ring: oklch(0.6 0.006 265);
+  --sidebar: oklch(0.175 0.014 265);
+  --sidebar-foreground: oklch(0.96 0.004 265);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.96 0.004 265);
+  --sidebar-accent: oklch(0.255 0.014 265);
+  --sidebar-accent-foreground: oklch(0.78 0.006 265);
+  --sidebar-border: oklch(0.3 0.012 265);
+  --sidebar-ring: oklch(0.6 0.006 265);
+
+  --color-surface: oklch(0.215 0.014 265);
+  --color-muted-strong: oklch(0.31 0.014 265);
+  --color-foreground-secondary: oklch(0.78 0.006 265);
+  --color-foreground-tertiary: oklch(0.72 0.006 265);
+  --color-placeholder: oklch(0.48 0.006 265);
+  --color-input-border: oklch(0.36 0.012 265);
+  --color-hover: oklch(0.245 0.014 265);
+  --color-destructive-subtle: oklch(0.24 0.05 25);
+  --color-accent-subtle: oklch(0.24 0.03 265);
+}
+
+@theme inline {
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 6px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+*:focus-visible {
+  outline: none;
+}
+
+/* ── Dark mode: native input controls, select arrow, focus ring ──── */
+.dark input::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+.dark select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+.dark *:focus-visible {
+  --tw-ring-offset-color: var(--color-surface);
+}
+
+/* ── Strip focus styles from command input ────────────────────────── */
+[data-slot="command-input"] {
+  border: none;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+  outline: none;
+}
+
+[data-slot="command-input"]:focus,
+[data-slot="command-input"]:focus-visible {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  --tw-ring-shadow: none;
+  --tw-ring-offset-shadow: none;
+}
+
+/* ── Tiptap editor styles ────────────────────────────────────────── */
+.tiptap {
+  outline: none;
+}
+
+.tiptap p {
+  margin: 0.5em 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: 1.6;
+}
+
+.tiptap h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+}
+
+.tiptap h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0.75em 0 0.4em;
+}
+
+.tiptap ul {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+  list-style-type: decimal;
+}
+
+.tiptap li {
+  margin: 0.2em 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: var(--muted-foreground);
+}
+
+/* ── Toast animations ────────────────────────────────────────────── */
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-12px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+}
+
+/* ── Dark mode: Tiptap placeholder ───────────────────────────────── */
+.dark .tiptap p.is-editor-empty:first-child::before {
+  color: var(--color-placeholder) !important;
+}

package/templates/base/src/styles/public.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

package/templates/base/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/templates/cloudflare/astro.config.mjs

@@ -3,7 +3,7 @@ import cloudflare from "@astrojs/cloudflare";
 import react from "@astrojs/react";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
-import cmsIntegration from "./src/cms/integration";
+import cmsIntegration from "@kidecms/core/integration";
 
 // https://astro.build/config
 export default defineConfig({

package/templates/cloudflare/uploads-route.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { getFile } from "@/cms/core/storage";
+import { getFile } from "@/cms/adapters/storage";
 
 export const prerender = false;
 

package/templates/cloudflare/wrangler.toml

@@ -6,6 +6,7 @@ compatibility_flags = ["nodejs_compat"]
 binding = "CMS_DB"
 database_name = "{{PROJECT_NAME}}-db"
 database_id = "" # Run: npx wrangler d1 create {{PROJECT_NAME}}-db
+migrations_dir = "src/cms/migrations"
 
 [triggers]
 crons = ["* * * * *"]  # scheduled publishing — every minute

package/templates/demo/src/cms/cms.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "@kidecms/core";
+import users from "./collections/users";
+import authors from "./collections/authors";
+import posts from "./collections/posts";
+import taxonomies from "./collections/taxonomies";
+import menus from "./collections/menus";
+import frontPage from "./collections/front-page";
+import pages from "./collections/pages";
+
+export default defineConfig({
+  database: { dialect: "sqlite" },
+  locales: {
+    default: "en",
+    supported: ["en", "de"],
+  },
+  collections: [users, authors, posts, taxonomies, menus, frontPage, pages],
+});

package/templates/demo/src/cms/collections/authors.ts

@@ -0,0 +1,20 @@
+import { defineCollection, fields } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "authors",
+  labels: { singular: "Author", plural: "Authors" },
+  labelField: "name",
+  timestamps: true,
+  views: {
+    list: { columns: ["name", "title", "_updatedAt"] },
+  },
+  fields: {
+    name: fields.text({ required: true }),
+    description: fields.text({ translatable: true }),
+    slug: fields.slug({ from: "name", unique: true, admin: { position: "sidebar" } }),
+    title: fields.text({ required: true }),
+    avatar: fields.image({
+      admin: { placeholder: "https://images.example.com/avatar.jpg" },
+    }),
+  },
+});

package/templates/demo/src/cms/collections/front-page.ts

@@ -0,0 +1,37 @@
+import { defineCollection, fields, hasRole } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "front-page",
+  labels: { singular: "Front Page", plural: "Front Page" },
+  singleton: true,
+  preview: "/",
+  timestamps: true,
+  drafts: true,
+  access: {
+    publish: hasRole("admin"),
+  },
+  fields: {
+    blocks: fields.blocks({
+      translatable: true,
+      types: {
+        hero: {
+          eyebrow: fields.text(),
+          heading: fields.text({ required: true }),
+          body: fields.text(),
+          ctaLabel: fields.text(),
+          ctaHref: fields.relation({ collection: "pages" }),
+        },
+        text: {
+          heading: fields.text(),
+          content: fields.richText(),
+        },
+        faq: {
+          heading: fields.text(),
+          items: fields.json({
+            admin: { component: "repeater", help: "Add question and answer pairs" },
+          }),
+        },
+      },
+    }),
+  },
+});

package/templates/demo/src/cms/collections/menus.ts

@@ -0,0 +1,18 @@
+import { defineCollection, fields } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "menus",
+  labels: { singular: "Menu", plural: "Menus" },
+  timestamps: true,
+  views: {
+    list: { columns: ["name", "slug", "_updatedAt"] },
+  },
+  fields: {
+    name: fields.text({ required: true }),
+    slug: fields.slug({ from: "name", unique: true, admin: { position: "sidebar" } }),
+    items: fields.json({
+      translatable: true,
+      admin: { component: "menu-items" },
+    }),
+  },
+});

package/templates/demo/src/cms/collections/pages.ts

@@ -0,0 +1,59 @@
+import { defineCollection, fields, hasRole } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "pages",
+  labels: { singular: "Page", plural: "Pages" },
+  preview: true,
+  timestamps: true,
+  drafts: true,
+  versions: { max: 20 },
+  views: {
+    list: { columns: ["title", "_status", "_updatedAt"] },
+  },
+  fields: {
+    title: fields.text({ required: true, translatable: true }),
+    slug: fields.slug({ from: "title", unique: true, translatable: true, admin: { position: "sidebar" } }),
+    summary: fields.text({
+      translatable: true,
+      admin: { rows: 3 },
+      access: { read: hasRole("admin") },
+    }),
+    image: fields.image(),
+    relatedPosts: fields.relation({ collection: "posts", hasMany: true, admin: { position: "sidebar" } }),
+    seoDescription: fields.text({
+      maxLength: 160,
+      translatable: true,
+      admin: { rows: 3, help: "Meta description for search engines. Max 160 characters.", position: "sidebar" },
+      access: { update: hasRole("admin") },
+    }),
+    blocks: fields.blocks({
+      translatable: true,
+      types: {
+        text: {
+          heading: fields.text(),
+          content: fields.richText(),
+        },
+        image: {
+          images: fields.array({ of: fields.image(), defaultValue: [] }),
+        },
+        faq: {
+          heading: fields.text(),
+          items: fields.json({
+            admin: { component: "repeater", help: "Add question and answer pairs" },
+          }),
+        },
+      },
+    }),
+  },
+  hooks: {
+    afterPublish(doc, context) {
+      context.cache?.invalidate({ tags: ["pages", "home", `page:${doc._id}`] });
+    },
+    afterUpdate(doc, context) {
+      context.cache?.invalidate({ tags: ["pages", `page:${doc._id}`] });
+    },
+    afterDelete(doc, context) {
+      context.cache?.invalidate({ tags: ["pages", "home", `page:${doc._id}`] });
+    },
+  },
+});

package/templates/demo/src/cms/collections/posts.ts

@@ -0,0 +1,55 @@
+import { defineCollection, fields, richTextToPlainText } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "posts",
+  labels: { singular: "Post", plural: "Posts" },
+  pathPrefix: "blog",
+  timestamps: true,
+  drafts: true,
+  versions: { max: 20 },
+  views: {
+    list: { columns: ["title", "category", "_status", "_updatedAt"] },
+  },
+  fields: {
+    title: fields.text({
+      required: true,
+      indexed: true,
+      translatable: true,
+    }),
+    slug: fields.slug({ from: "title", unique: true, translatable: true, admin: { position: "sidebar" } }),
+    excerpt: fields.text({
+      maxLength: 300,
+      translatable: true,
+      admin: { rows: 3 },
+    }),
+    image: fields.image(),
+    body: fields.richText({ translatable: true, admin: { rows: 14 } }),
+    category: fields.text({
+      admin: { component: "taxonomy-select", placeholder: "categories", position: "sidebar" },
+    }),
+    author: fields.relation({ collection: "authors", admin: { position: "sidebar" } }),
+    seoDescription: fields.text({
+      maxLength: 160,
+      translatable: true,
+      admin: { rows: 3, help: "Meta description for search engines. Max 160 characters.", position: "sidebar" },
+    }),
+  },
+  hooks: {
+    beforeCreate(data) {
+      if (!data.excerpt && typeof data.body === "object" && data.body) {
+        const text = richTextToPlainText(data.body as never);
+        if (text) data.excerpt = text.slice(0, 180);
+      }
+      return data;
+    },
+    afterPublish(doc, context) {
+      context.cache?.invalidate({ tags: ["posts", "home", `post:${doc._id}`] });
+    },
+    afterUpdate(doc, context) {
+      context.cache?.invalidate({ tags: ["posts", `post:${doc._id}`] });
+    },
+    afterDelete(doc, context) {
+      context.cache?.invalidate({ tags: ["posts", "home", `post:${doc._id}`] });
+    },
+  },
+});

package/templates/demo/src/cms/collections/taxonomies.ts

@@ -0,0 +1,18 @@
+import { defineCollection, fields } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "taxonomies",
+  labels: { singular: "Taxonomy", plural: "Taxonomies" },
+  timestamps: true,
+  views: {
+    list: { columns: ["name", "slug", "_updatedAt"] },
+  },
+  fields: {
+    name: fields.text({ required: true }),
+    slug: fields.slug({ from: "name", unique: true, admin: { position: "sidebar" } }),
+    terms: fields.json({
+      translatable: true,
+      admin: { component: "taxonomy-terms" },
+    }),
+  },
+});

package/templates/demo/src/cms/collections/users.ts

@@ -0,0 +1,20 @@
+import { defineCollection, fields } from "@kidecms/core";
+
+export default defineCollection({
+  slug: "users",
+  labels: { singular: "User", plural: "Users" },
+  auth: true,
+  timestamps: true,
+  views: {
+    list: { columns: ["name", "email", "role", "_updatedAt"] },
+  },
+  fields: {
+    name: fields.text({ required: true }),
+    email: fields.email({ required: true, unique: true }),
+    role: fields.select({
+      options: ["admin", "editor", "viewer"],
+      defaultValue: "editor",
+    }),
+    password: fields.text({ admin: { hidden: true } }),
+  },
+});