modern-cms 1.0.0

package/template/packages/shared/src/index.ts

@@ -0,0 +1,9 @@
+export * from "./schema/pageNode.js";
+export * from "./schema/theme.js";
+export * from "./schema/user.js";
+export * from "./schema/media.js";
+export * from "./schema/fields.js";
+export * from "./schema/collections.js";
+export * from "./schema/templates.js";
+export * from "./components.js";
+export * from "./tree.js";

package/template/packages/shared/src/schema/collections.ts

@@ -0,0 +1,70 @@
+import { z } from "zod";
+import { PageNodeSchema, PageStatusSchema } from "./pageNode.js";
+
+export const CollectionSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  slug: z.string(),
+  createdAt: z.string().optional(),
+});
+export type Collection = z.infer<typeof CollectionSchema>;
+
+export const CollectionItemSchema = z.object({
+  id: z.string(),
+  collectionId: z.string(),
+  slug: z.string(),
+  title: z.string(),
+  excerpt: z.string().nullable().optional(),
+  coverImage: z.string().nullable().optional(),
+  seoTitle: z.string().nullable().optional(),
+  seoDescription: z.string().nullable().optional(),
+  ogImage: z.string().nullable().optional(),
+  noIndex: z.boolean().optional(),
+  content: PageNodeSchema,
+  status: PageStatusSchema,
+  publishedAt: z.string().nullable().optional(),
+  locale: z.string().optional(),
+  translationOfId: z.string().nullable().optional(),
+  createdById: z.string().nullable().optional(),
+  createdAt: z.string().optional(),
+  updatedAt: z.string().optional(),
+});
+export type CollectionItem = z.infer<typeof CollectionItemSchema>;
+
+export const CreateCollectionInputSchema = z.object({
+  name: z.string().min(1).max(80),
+  slug: z.string().regex(/^[a-z0-9-]+$/, "Slug must be lowercase letters, numbers, and hyphens"),
+});
+
+export const CreateCollectionItemInputSchema = z.object({
+  title: z.string().min(1),
+  slug: z.string().regex(/^[a-z0-9-]+$/, "Slug must be lowercase letters, numbers, and hyphens"),
+  locale: z.string().min(2).max(20).optional(),
+});
+
+export const UpdateCollectionItemInputSchema = z.object({
+  title: z.string().min(1).optional(),
+  slug: z
+    .string()
+    .regex(/^[a-z0-9-]+$/)
+    .optional(),
+  excerpt: z.string().nullable().optional(),
+  coverImage: z.string().nullable().optional(),
+  seoTitle: z.string().nullable().optional(),
+  seoDescription: z.string().nullable().optional(),
+  ogImage: z.string().nullable().optional(),
+  noIndex: z.boolean().optional(),
+  content: PageNodeSchema.optional(),
+  status: PageStatusSchema.optional(),
+  locale: z.string().min(2).max(20).optional(),
+  translationOfId: z.string().nullable().optional(),
+});
+
+/** The card-level view of an item, as returned by the public list endpoint. */
+export type CollectionItemSummary = {
+  slug: string;
+  title: string;
+  excerpt: string | null;
+  coverImage: string | null;
+  publishedAt: string | null;
+};

package/template/packages/shared/src/schema/fields.ts

@@ -0,0 +1,26 @@
+export type FieldType =
+  | "text"
+  | "textarea"
+  | "richtext"
+  | "image"
+  | "video"
+  | "url"
+  | "number"
+  | "boolean"
+  | "select"
+  | "array"
+  | "datetime"
+  | "color";
+
+export type FieldDescriptor = {
+  key: string;
+  label: string;
+  type: FieldType;
+  default?: unknown;
+  options?: { label: string; value: string }[]; // for "select"
+  itemFields?: FieldDescriptor[]; // for "array" — schema of each item
+  min?: number;
+  max?: number;
+  step?: number; // for "number" — e.g. 0.1 for a speed/opacity slider-style field
+  placeholder?: string;
+};

package/template/packages/shared/src/schema/media.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+export const MediaAssetSchema = z.object({
+  id: z.string(),
+  key: z.string(),
+  url: z.string(),
+  mimeType: z.string(),
+  width: z.number().nullable().optional(),
+  height: z.number().nullable().optional(),
+  size: z.number(),
+  createdAt: z.string().optional(),
+});
+export type MediaAsset = z.infer<typeof MediaAssetSchema>;

package/template/packages/shared/src/schema/pageNode.ts

@@ -0,0 +1,255 @@
+import { z } from "zod";
+
+export const NodeStyleSchema = z.object({
+  backgroundColor: z.string().optional(),
+  backgroundImage: z.string().optional(),
+  backgroundVideo: z.string().optional(),
+  backgroundOverlay: z.string().optional(),
+  textColor: z.string().optional(),
+  fontFamily: z.string().optional(),
+  fontSize: z.string().optional(),
+  fontWeight: z.string().optional(),
+  paddingY: z.string().optional(),
+  paddingX: z.string().optional(),
+  // Individual sides win over the Y/X pair when both are set.
+  paddingTop: z.string().optional(),
+  paddingRight: z.string().optional(),
+  paddingBottom: z.string().optional(),
+  paddingLeft: z.string().optional(),
+  marginY: z.string().optional(),
+  marginTop: z.string().optional(),
+  marginBottom: z.string().optional(),
+  // Flex/grid child alignment — applied by Container (grid) and Column (flex column).
+  alignItems: z.enum(["start", "center", "end", "stretch"]).optional(),
+  justifyContent: z.enum(["start", "center", "end", "between"]).optional(),
+  // A Grid Cell's own placement within its parent Grid — how many of the Grid's
+  // declared column/row tracks this cell occupies. 1 (or unset) is a normal single
+  // cell; the parent Grid's row/column *counts* live in its own props, not here.
+  gridColumnSpan: z.number().optional(),
+  gridRowSpan: z.number().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+  // Full dimension control — all six accept any CSS length (px, %, rem, vw, vh...).
+  // Drag-resize writes width/height when set, else maxWidth/minHeight, preserving
+  // whichever unit the value already uses.
+  width: z.string().optional(),
+  height: z.string().optional(),
+  minWidth: z.string().optional(),
+  minHeight: z.string().optional(),
+  maxHeight: z.string().optional(),
+  borderRadius: z.string().optional(),
+  maxWidth: z.string().optional(),
+  borderWidth: z.string().optional(),
+  borderStyle: z.enum(["none", "solid", "dashed", "dotted", "double"]).optional(),
+  borderColor: z.string().optional(),
+  boxShadow: z.enum(["none", "sm", "md", "lg", "xl"]).optional(),
+  opacity: z.number().optional(),
+  // A Container's grid track size for one of its Columns — distinct from `maxWidth`
+  // (which constrains content *within* a track) because CSS Grid track width can't be
+  // driven by a child's own max-width; the Container reads this per-child to build its
+  // own grid-template-columns. Unset means "share remaining space equally" (1fr).
+  columnWidth: z.string().optional(),
+  // Universal animation, applied to any node type by Renderer.tsx via GSAP. "none"
+  // is the off switch — every other field below is ignored when animationType is
+  // unset or "none".
+  animationType: z
+    .enum([
+      "none",
+      "fadeIn",
+      "slideUp",
+      "slideDown",
+      "slideLeft",
+      "slideRight",
+      "zoomIn",
+      "scrollReveal",
+      "rotateIn",
+      "pulse",
+      "blurIn",
+      "flipIn",
+      "bounceIn",
+    ])
+    .optional(),
+  // onLoad/onScroll play once automatically (a reveal); onHover/onFocus play forward
+  // and reverse back out on mouse-leave/blur (a toggle); onClick replays from the start
+  // on every click (a tap acknowledgement).
+  animationTrigger: z.enum(["onLoad", "onScroll", "onHover", "onFocus", "onClick"]).optional(),
+  animationDuration: z.number().optional(),
+  animationDelay: z.number().optional(),
+  animationEasing: z.string().optional(),
+  // Only meaningful for onLoad/onScroll — repeats the reveal indefinitely, alternating
+  // direction each pass, for continuous decorative motion instead of a one-time reveal.
+  animationLoop: z.boolean().optional(),
+  // Only meaningful for onLoad/onScroll — instead of revealing the whole section as one
+  // block, its inner items (cards, paragraphs, buttons) reveal one after another,
+  // this many seconds apart.
+  animationStagger: z.number().optional(),
+  // Continuous scroll-linked drift: the section translates vertically as it moves
+  // through the viewport (-1..1, negative = drifts up against the scroll). Independent
+  // of the entrance animation.
+  parallaxSpeed: z.number().optional(),
+  // Always-on pointer effect, independent of animationType/Trigger — a modern card
+  // feel: lift (rise + shadow), tilt (3D follow the pointer), glow, or scale.
+  hoverEffect: z.enum(["none", "lift", "tilt", "glow", "scale"]).optional(),
+  // Glassmorphism: translucent frosted-glass panel (backdrop blur + soft border).
+  glass: z.boolean().optional(),
+  // Gradient-filled headings (background-clip: text) — set both to activate.
+  textGradientFrom: z.string().optional(),
+  textGradientTo: z.string().optional(),
+  // Escape hatch for anything not covered by a dedicated style field — arbitrary CSS
+  // properties (camelCase, merged into the node's inline style) and arbitrary HTML
+  // attributes (kebab-case, spread onto the rendered element) that a content editor can
+  // add without needing a code change.
+  customCss: z.record(z.string(), z.string()).optional(),
+  customAttributes: z.record(z.string(), z.string()).optional(),
+});
+export type NodeStyle = z.infer<typeof NodeStyleSchema>;
+
+// Recursive PageNode type: id + component type + arbitrary content props + style + children.
+// styleTablet/styleMobile are sparse per-breakpoint overrides merged over `style`:
+// tablet applies ≤1023px, mobile applies ≤767px (on top of tablet).
+export type PageNode = {
+  id: string;
+  type: string;
+  props: Record<string, unknown>;
+  style: NodeStyle;
+  styleTablet?: NodeStyle;
+  styleMobile?: NodeStyle;
+  children: PageNode[];
+};
+
+export const PageNodeSchema: z.ZodType<PageNode> = z.lazy(() =>
+  z.object({
+    id: z.string(),
+    type: z.string(),
+    props: z.record(z.string(), z.unknown()),
+    style: NodeStyleSchema,
+    styleTablet: NodeStyleSchema.optional(),
+    styleMobile: NodeStyleSchema.optional(),
+    children: z.array(PageNodeSchema),
+  })
+);
+
+export type Breakpoint = "desktop" | "tablet" | "mobile";
+
+export const BREAKPOINT_MAX_WIDTH: Record<Exclude<Breakpoint, "desktop">, number> = {
+  tablet: 1023,
+  mobile: 767,
+};
+
+/** The style a node effectively has at a breakpoint: base, with the tablet override
+ * applied for tablet AND mobile, and the mobile override applied on top for mobile —
+ * mirroring how the emitted max-width media queries cascade on the public site. */
+export function resolveNodeStyle(node: PageNode, breakpoint: Breakpoint): NodeStyle {
+  if (breakpoint === "desktop") return node.style;
+  if (breakpoint === "tablet") return { ...node.style, ...node.styleTablet };
+  return { ...node.style, ...node.styleTablet, ...node.styleMobile };
+}
+
+export const PageStatusSchema = z.enum(["DRAFT", "PUBLISHED"]);
+export type PageStatus = z.infer<typeof PageStatusSchema>;
+
+export const PageSchema = z.object({
+  id: z.string(),
+  slug: z.string(),
+  title: z.string(),
+  status: PageStatusSchema,
+  content: PageNodeSchema,
+  seoTitle: z.string().nullable().optional(),
+  seoDescription: z.string().nullable().optional(),
+  ogImage: z.string().nullable().optional(),
+  noIndex: z.boolean().optional(),
+  previewToken: z.string().optional(),
+  publishAt: z.string().nullable().optional(),
+  locale: z.string().optional(),
+  translationOfId: z.string().nullable().optional(),
+  createdById: z.string().nullable().optional(),
+  createdAt: z.string().optional(),
+  updatedAt: z.string().optional(),
+});
+export type Page = z.infer<typeof PageSchema>;
+
+/** Locales offered in the page-settings dropdown. `label` is the language's own name
+ * (how switchers conventionally show it); any BCP-47 tag typed into the API works too. */
+export const SUPPORTED_LOCALES: { code: string; label: string; rtl?: boolean }[] = [
+  { code: "en", label: "English" },
+  { code: "es", label: "Español" },
+  { code: "fr", label: "Français" },
+  { code: "de", label: "Deutsch" },
+  { code: "pt", label: "Português" },
+  { code: "it", label: "Italiano" },
+  { code: "bn", label: "বাংলা" },
+  { code: "hi", label: "हिन्दी" },
+  { code: "zh", label: "中文" },
+  { code: "ja", label: "日本語" },
+  { code: "ar", label: "العربية", rtl: true },
+  { code: "he", label: "עברית", rtl: true },
+  { code: "fa", label: "فارسی", rtl: true },
+  { code: "ur", label: "اردو", rtl: true },
+];
+
+const RTL_PREFIXES = new Set(["ar", "he", "fa", "ur", "ps", "sd", "ckb", "dv", "yi"]);
+
+/** Whether a locale is written right-to-left — drives dir="rtl" on the page wrapper. */
+export function isRtlLocale(locale: string | undefined): boolean {
+  if (!locale) return false;
+  return RTL_PREFIXES.has(locale.toLowerCase().split(/[-_]/)[0]);
+}
+
+/** One entry of a page's translation group, as returned by the public translations
+ * endpoint — everything a language switcher needs. */
+export type PageTranslationInfo = { locale: string; slug: string; title: string };
+
+export const CreatePageInputSchema = z.object({
+  title: z.string().min(1),
+  slug: z
+    .string()
+    .regex(/^[a-z0-9/-]*$/, "Slug must be lowercase letters, numbers, hyphens, and slashes only"),
+  locale: z.string().min(2).max(20).optional(),
+  // When set, the new page's content is seeded from this PageTemplate (deep-cloned
+  // with fresh node ids) instead of starting blank.
+  templateId: z.string().optional(),
+});
+export type CreatePageInput = z.infer<typeof CreatePageInputSchema>;
+
+export const UpdatePageInputSchema = z.object({
+  title: z.string().min(1).optional(),
+  slug: z
+    .string()
+    // Allow "/" so localized slugs can be path-prefixed, e.g. "es/servicios".
+    .regex(/^[a-z0-9/-]*$/)
+    .optional(),
+  content: PageNodeSchema.optional(),
+  status: PageStatusSchema.optional(),
+  seoTitle: z.string().nullable().optional(),
+  seoDescription: z.string().nullable().optional(),
+  ogImage: z.string().nullable().optional(),
+  noIndex: z.boolean().optional(),
+  publishAt: z.string().nullable().optional(),
+  locale: z.string().min(2).max(20).optional(),
+  translationOfId: z.string().nullable().optional(),
+});
+export type UpdatePageInput = z.infer<typeof UpdatePageInputSchema>;
+
+export const PageRevisionSchema = z.object({
+  id: z.string(),
+  pageId: z.string(),
+  title: z.string(),
+  content: PageNodeSchema,
+  createdAt: z.string(),
+});
+export type PageRevision = z.infer<typeof PageRevisionSchema>;
+
+/** Whether a page is actually visible to the public right now — PUBLISHED alone isn't
+ * enough if a future publishAt has been set (scheduled publishing). Accepts Date
+ * objects from Prisma as well as ISO strings from the API JSON layer. */
+export function isPagePubliclyVisible(page: {
+  status: string;
+  publishAt?: string | Date | null;
+}): boolean {
+  if (page.status !== "PUBLISHED") return false;
+  if (!page.publishAt) return true;
+  const at =
+    page.publishAt instanceof Date
+      ? page.publishAt.getTime()
+      : new Date(page.publishAt).getTime();
+  return at <= Date.now();
+}

package/template/packages/shared/src/schema/templates.ts

@@ -0,0 +1,20 @@
+import { z } from "zod";
+import { PageNodeSchema } from "./pageNode.js";
+
+export const PageTemplateSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  category: z.string(),
+  thumbnail: z.string().nullable().optional(),
+  content: PageNodeSchema,
+  createdAt: z.string().optional(),
+});
+export type PageTemplate = z.infer<typeof PageTemplateSchema>;
+
+export const CreatePageTemplateInputSchema = z.object({
+  name: z.string().min(1).max(80),
+  category: z.string().min(1).max(40).optional(),
+  thumbnail: z.string().nullable().optional(),
+  content: PageNodeSchema,
+});
+export type CreatePageTemplateInput = z.infer<typeof CreatePageTemplateInputSchema>;

package/template/packages/shared/src/schema/theme.ts

@@ -0,0 +1,69 @@
+import { z } from "zod";
+
+export const SiteThemeSchema = z.object({
+  id: z.string().optional(),
+  primaryColor: z.string().default("#2563eb"),
+  secondaryColor: z.string().default("#0f172a"),
+  backgroundColor: z.string().default("#ffffff"),
+  textColor: z.string().default("#111827"),
+  headingFont: z.string().default("Poppins"),
+  bodyFont: z.string().default("Inter"),
+  logoUrl: z.string().nullable().optional(),
+  faviconUrl: z.string().nullable().optional(),
+  siteName: z.string().default("My Site"),
+  customCss: z.string().nullable().optional(),
+  darkModeEnabled: z.boolean().default(false),
+  primaryColorDark: z.string().nullable().optional(),
+  backgroundColorDark: z.string().nullable().optional(),
+  textColorDark: z.string().nullable().optional(),
+  analyticsProvider: z.enum(["none", "ga4", "plausible", "custom"]).default("none"),
+  analyticsId: z.string().nullable().optional(),
+  analyticsCustomScript: z.string().nullable().optional(),
+});
+export type SiteTheme = z.infer<typeof SiteThemeSchema>;
+
+export const UpdateThemeInputSchema = SiteThemeSchema.partial();
+export type UpdateThemeInput = z.infer<typeof UpdateThemeInputSchema>;
+
+export const FONT_OPTIONS = [
+  "Inter",
+  "Poppins",
+  "Roboto",
+  "Montserrat",
+  "Playfair Display",
+  "Merriweather",
+  "Lato",
+  "Nunito",
+  "Oswald",
+  "Raleway",
+] as const;
+
+export const NavItemSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+  href: z.string(),
+  order: z.number(),
+  parentId: z.string().nullable().optional(),
+});
+export type NavItem = z.infer<typeof NavItemSchema>;
+
+export const UpsertNavItemInputSchema = z.object({
+  label: z.string().min(1),
+  href: z.string().min(1),
+  order: z.number().default(0),
+  parentId: z.string().nullable().optional(),
+});
+export type UpsertNavItemInput = z.infer<typeof UpsertNavItemInputSchema>;
+
+export type NavItemWithChildren = NavItem & { children: NavItem[] };
+
+/** Groups flat nav items into top-level entries with their submenu items attached,
+ * each sorted by `order`. Only one level deep — a submenu item's own children (if any
+ * exist from bad data) are ignored, matching typical site nav patterns. */
+export function buildNavTree(items: NavItem[]): NavItemWithChildren[] {
+  const topLevel = items.filter((n) => !n.parentId).sort((a, b) => a.order - b.order);
+  return topLevel.map((item) => ({
+    ...item,
+    children: items.filter((n) => n.parentId === item.id).sort((a, b) => a.order - b.order),
+  }));
+}

package/template/packages/shared/src/schema/user.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const UserRoleSchema = z.enum(["ADMIN", "EDITOR", "AUTHOR"]);
+export type UserRole = z.infer<typeof UserRoleSchema>;
+
+export const UserSchema = z.object({
+  id: z.string(),
+  email: z.string().email(),
+  role: UserRoleSchema,
+  createdAt: z.string().optional(),
+});
+export type User = z.infer<typeof UserSchema>;
+
+export const LoginInputSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(1),
+});
+export type LoginInput = z.infer<typeof LoginInputSchema>;
+
+export const CreateUserInputSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+  role: UserRoleSchema.default("EDITOR"),
+});
+export type CreateUserInput = z.infer<typeof CreateUserInputSchema>;

package/template/packages/shared/src/tree.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import {
+  createNode,
+  createEmptyPage,
+  insertNode,
+  removeNode,
+  moveNode,
+  duplicateNode,
+  findNode,
+  findParent,
+  cloneWithNewIds,
+} from "./tree.js";
+
+describe("tree helpers", () => {
+  it("creates an empty root page", () => {
+    const page = createEmptyPage();
+    expect(page.type).toBe("root");
+    expect(page.children).toEqual([]);
+  });
+
+  it("inserts and finds a node", () => {
+    const page = createEmptyPage();
+    const hero = createNode("hero");
+    const next = insertNode(page, page.id, hero, 0);
+    expect(findNode(next, hero.id)?.type).toBe("hero");
+  });
+
+  it("removes a node", () => {
+    const page = createEmptyPage();
+    const hero = createNode("hero");
+    const withHero = insertNode(page, page.id, hero, 0);
+    const without = removeNode(withHero, hero.id);
+    expect(findNode(without, hero.id)).toBeNull();
+  });
+
+  it("moves a node between parents", () => {
+    const page = createEmptyPage();
+    const container = createNode("container");
+    const col = container.children[0];
+    const hero = createNode("hero");
+    const cta = createNode("cta");
+    let tree = insertNode(page, page.id, container, 0);
+    tree = insertNode(tree, page.id, hero, 0);
+    tree = insertNode(tree, col.id, cta, 0);
+    tree = moveNode(tree, hero.id, col.id, 0);
+    expect(findParent(tree, hero.id)?.parent.id).toBe(col.id);
+  });
+
+  it("duplicates a subtree with fresh ids", () => {
+    const page = createEmptyPage();
+    const hero = createNode("hero");
+    const tree = insertNode(page, page.id, hero, 0);
+    const duped = duplicateNode(tree, hero.id);
+    const allHeroes = duped.children.filter((c) => c.type === "hero");
+    expect(allHeroes.length).toBe(2);
+    expect(allHeroes[0].id).not.toBe(allHeroes[1].id);
+  });
+
+  it("cloneWithNewIds produces independent copies", () => {
+    const hero = createNode("hero");
+    const copy = cloneWithNewIds(hero);
+    expect(copy.id).not.toBe(hero.id);
+    expect(copy.type).toBe("hero");
+  });
+});