- {Content &&
- )
-}
-
-export const ContainerConfig: ComponentConfig
-
-
-
- )
-}
-
-export const HeaderContentConfig: ComponentConfig
- 
- ) : (
-
- - {titleText} -
- - {logoSrc ? ( -Header
- )}
-
-
-
-
- )
-}
-
-
-export const NavigationConfig: ComponentConfig
- {nav.map((group, index) => (
-
-
-
- ))}
-
- {group.label}
-
- {Array.isArray(group.items) && group.items.length > 0 && (
-
-
- )}
-
- {group.items.map((item, itemIdx) => (
-
- {item.label || "Item"}
-
- ))}
-
- - {text} -
- ) - : ( -
- {text}
-
- )
- )
-}
-
-export const ParagraphConfig: ComponentConfig
- {Content &&
- )
-
-}
-
-export const RootContainerConfig: ComponentConfig
-
-}
-export const SplitPaneConfig: ComponentConfig
- {ContentOne &&
-
- {ContentTwo &&
-
+ {columnSlots
+ .slice(0, colCount)
+ .map((Col, i) => Col &&
+ );
+ },
+};
diff --git a/src/components/puck/container.tsx b/src/components/puck/container.tsx
new file mode 100644
index 00000000..a273a62f
--- /dev/null
+++ b/src/components/puck/container.tsx
@@ -0,0 +1,203 @@
+import type { ComponentConfig } from "@puckeditor/core";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import {
+ fields,
+ paddingVariants,
+ gapVariants,
+ alignVariants,
+ bgColorVariants,
+ textColorVariants,
+ radiusVariants,
+ shadowVariants,
+ type Spacing,
+ type Color,
+ type Radius,
+ type Shadow,
+ type Align,
+} from "@/lib/puck/tokens";
+
+const tags = [
+ "div",
+ "section",
+ "article",
+ "header",
+ "footer",
+ "aside",
+ "main",
+ "nav",
+] as const;
+
+type Tag = (typeof tags)[number];
+
+const layoutValues = ["stack", "row"] as const;
+type Layout = (typeof layoutValues)[number];
+
+const justifyValues = ["start", "center", "end", "between"] as const;
+type Justify = (typeof justifyValues)[number];
+
+const widthValues = [
+ "full",
+ "prose",
+ "screen-sm",
+ "screen-md",
+ "screen-lg",
+ "screen-xl",
+] as const;
+type Width = (typeof widthValues)[number];
+
+const containerVariants = cva("", {
+ variants: {
+ layout: {
+ stack: "flex flex-col",
+ row: "flex flex-row flex-wrap",
+ },
+ padding: paddingVariants,
+ gap: gapVariants,
+ align: alignVariants,
+ justify: {
+ start: "justify-start",
+ center: "justify-center",
+ end: "justify-end",
+ between: "justify-between",
+ },
+ width: {
+ full: "w-full",
+ prose: "w-full max-w-prose",
+ "screen-sm": "w-full max-w-screen-sm",
+ "screen-md": "w-full max-w-screen-md",
+ "screen-lg": "w-full max-w-screen-lg",
+ "screen-xl": "w-full max-w-screen-xl",
+ },
+ bgColor: bgColorVariants,
+ textColor: textColorVariants,
+ radius: radiusVariants,
+ shadow: shadowVariants,
+ },
+ defaultVariants: {
+ layout: "stack",
+ padding: "md",
+ gap: "md",
+ align: "left",
+ justify: "start",
+ width: "full",
+ bgColor: "background",
+ textColor: "foreground",
+ radius: "none",
+ shadow: "none",
+ },
+});
+
+type ContainerProps = {
+ content: any;
+ layout: Layout;
+ padding: Spacing;
+ gap: Spacing;
+ align: Align;
+ justify: Justify;
+ width: Width;
+ bgColor: Color;
+ textColor: Color;
+ radius: Radius;
+ shadow: Shadow;
+ tag: Tag;
+};
+
+export const Container: ComponentConfig
+
+ );
+ }
+
+ return (
+
+ 
+
+ );
+ },
+};
diff --git a/src/components/puck/rich-text.tsx b/src/components/puck/rich-text.tsx
new file mode 100644
index 00000000..d35ece15
--- /dev/null
+++ b/src/components/puck/rich-text.tsx
@@ -0,0 +1,50 @@
+import type { ComponentConfig, RichText } from "@puckeditor/core";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { fields, textColorVariants, type Color, type Align } from "@/lib/puck/tokens";
+
+const richTextVariants = cva("prose max-w-none", {
+ variants: {
+ textColor: textColorVariants,
+ align: {
+ left: "text-left",
+ center: "text-center",
+ right: "text-right",
+ },
+ },
+ defaultVariants: {
+ textColor: "foreground",
+ align: "left",
+ },
+});
+
+type RichTextProps = {
+ content: RichText;
+ textColor: Color;
+ align: Align;
+};
+
+export const RichTextComponent: ComponentConfig
+ {content}
+
+ );
+ },
+};
diff --git a/src/lib/puck/tokens.ts b/src/lib/puck/tokens.ts
new file mode 100644
index 00000000..2e6b39ba
--- /dev/null
+++ b/src/lib/puck/tokens.ts
@@ -0,0 +1,151 @@
+export const spacingValues = ["none", "xs", "sm", "md", "lg", "xl", "2xl"] as const;
+export const colorValues = [
+ "background",
+ "foreground",
+ "primary",
+ "primary-foreground",
+ "muted",
+ "muted-foreground",
+ "accent",
+ "accent-foreground",
+ "destructive",
+ "sga-red",
+] as const;
+export const radiusValues = ["none", "sm", "md", "lg", "xl", "full"] as const;
+export const shadowValues = ["none", "sm", "md", "lg", "xl"] as const;
+export const fontSizeValues = [
+ "xs",
+ "sm",
+ "base",
+ "lg",
+ "xl",
+ "2xl",
+ "3xl",
+ "4xl",
+] as const;
+export const fontWeightValues = [
+ "normal",
+ "medium",
+ "semibold",
+ "bold",
+] as const;
+export const alignValues = ["left", "center", "right"] as const;
+
+export type Spacing = (typeof spacingValues)[number];
+export type Color = (typeof colorValues)[number];
+export type Radius = (typeof radiusValues)[number];
+export type Shadow = (typeof shadowValues)[number];
+export type FontSize = (typeof fontSizeValues)[number];
+export type FontWeight = (typeof fontWeightValues)[number];
+export type Align = (typeof alignValues)[number];
+
+// Shared cva variant maps — single source of truth for token-to-class mappings.
+
+export const paddingVariants = {
+ none: "p-0",
+ xs: "p-1",
+ sm: "p-2",
+ md: "p-4",
+ lg: "p-6",
+ xl: "p-8",
+ "2xl": "p-12",
+} as const;
+
+export const gapVariants = {
+ none: "gap-0",
+ xs: "gap-1",
+ sm: "gap-2",
+ md: "gap-4",
+ lg: "gap-6",
+ xl: "gap-8",
+ "2xl": "gap-12",
+} as const;
+
+export const bgColorVariants = {
+ background: "bg-background",
+ foreground: "bg-foreground",
+ primary: "bg-primary",
+ "primary-foreground": "bg-primary-foreground",
+ muted: "bg-muted",
+ "muted-foreground": "bg-muted-foreground",
+ accent: "bg-accent",
+ "accent-foreground": "bg-accent-foreground",
+ destructive: "bg-destructive",
+ "sga-red": "bg-sga-red",
+} as const;
+
+export const textColorVariants = {
+ background: "text-background",
+ foreground: "text-foreground",
+ primary: "text-primary",
+ "primary-foreground": "text-primary-foreground",
+ muted: "text-muted",
+ "muted-foreground": "text-muted-foreground",
+ accent: "text-accent",
+ "accent-foreground": "text-accent-foreground",
+ destructive: "text-destructive",
+ "sga-red": "text-sga-red",
+} as const;
+
+export const radiusVariants = {
+ none: "rounded-none",
+ sm: "rounded-sm",
+ md: "rounded-md",
+ lg: "rounded-lg",
+ xl: "rounded-xl",
+ full: "rounded-full",
+} as const;
+
+export const shadowVariants = {
+ none: "shadow-none",
+ sm: "shadow-sm",
+ md: "shadow-md",
+ lg: "shadow-lg",
+ xl: "shadow-xl",
+} as const;
+
+export const alignVariants = {
+ left: "items-start",
+ center: "items-center",
+ right: "items-end",
+} as const;
+
+export function selectFrom", section: "" });
+
+tag.options // → [{ value: "div", label: "
" }, ...]
+tag.defaultValue // → "div"
+```
+
+When a concept needs multiple CSS properties (e.g. spacing for both padding and gap), define separate tokens:
+
+```ts
+const padding = defineToken({ sm: { label: "Small", classes: "p-2" }, ... });
+const gap = defineToken({ sm: { label: "Small", classes: "gap-2" }, ... });
+```
+
+## Props
+
+`defineProps` wires tokens to Puck editor fields and returns `{ fields, defaultProps }` to spread onto a `ComponentConfig`.
+
+Three field builders handle different cases:
+
+```ts
+const props = defineProps({
+ // Static select / radio — token-backed
+ radius: field.select(radius, { label: "Corners" }),
+ layout: field.radio(layout, { label: "Layout" }),
+
+ // Responsive — per-breakpoint picker, also token-backed
+ padding: responsive.token(padding, { label: "Padding" }),
+
+ // Raw — any Puck field descriptor, no token needed
+ url: field.raw({ type: "text", label: "URL" }, ""),
+ content: field.raw({ type: "slot" }),
+});
+```
+
+`field.raw` passes any Puck field descriptor through unchanged, so the system isn't limited to tokens — text inputs, slots, number fields, custom fields, etc. all work.
+
+The token definition doesn't change between static and responsive use — only the field builder does.
+
+## Rendering
+
+Static values look up the class map directly. Responsive values go through `resolveResponsive`, which prefixes each Tailwind class with its breakpoint:
+
+```ts
+// Static
+radius.classes[r]
+
+// Responsive
+resolveResponsive(padding, paddingToken.classes)
+// { base: "sm", md: "lg" } → "p-2 md:p-6"
+
+resolveResponsive(gap, gapToken.classes)
+// { base: "sm", lg: "md" } → "gap-2 lg:gap-4"
+```
+
+Multi-class values are split and each utility prefixed individually — `"grid-rows-2 auto-rows-[0] overflow-hidden"` becomes `"md:grid-rows-2 md:auto-rows-[0] md:overflow-hidden"`.
+
+## Putting it together
+
+```ts
+// 1. Token defines the choices and their Tailwind classes
+const padding = defineToken({ sm: { label: "Small", classes: "p-2" }, ... });
+
+// 2. defineProps wires tokens to editor fields
+const props = defineProps({
+ padding: responsive.token(padding, { label: "Padding" }),
+});
+
+// 3. Render resolves the responsive value to classes
+cn(resolveResponsive(padding, paddingToken.classes))
+```
+
+`defineProps` only reads `options` + `defaultValue` from a token. The render side only reads `classes`. The two sides never touch each other's data.
diff --git a/prisma/seed.ts b/prisma/seed.ts
index c593af2c..9434ad8e 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,8 +1,9 @@
import "dotenv/config";
-import { Prisma, PrismaClient } from "../src/generated/prisma/client";
+import { PrismaClient } from "../src/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";
import fs from "fs";
import path from "path";
+import type { Prisma } from "../src/generated/prisma/client";
const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL });
const prisma = new PrismaClient({ adapter });
diff --git a/src/app/editor/[id]/[slug]/EditorPage.tsx b/src/app/editor/[id]/[slug]/EditorPage.tsx
index 8fc62b63..af87e050 100644
--- a/src/app/editor/[id]/[slug]/EditorPage.tsx
+++ b/src/app/editor/[id]/[slug]/EditorPage.tsx
@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
import { Client } from "./client";
import { getDocumentById } from "../../../../lib/documents/queries";
import { getEditorSlug, getEditorUrl } from "../../../../lib/editor-url";
+import { createEmptyPuckData } from "../../../../lib/puck/utils";
export default async function EditorPage({
documentId,
@@ -63,5 +64,5 @@ function resolveVersion(
return { data: versions[0].content as Data, versionId: versions[0].id };
}
- return { data: { content: [], root: {} } as Data };
+ return { data: createEmptyPuckData() };
}
diff --git a/src/app/editor/[id]/[slug]/client.tsx b/src/app/editor/[id]/[slug]/client.tsx
index 04130fd3..2182367b 100644
--- a/src/app/editor/[id]/[slug]/client.tsx
+++ b/src/app/editor/[id]/[slug]/client.tsx
@@ -45,13 +45,12 @@ export function Client({
}: {
documentId: number;
documentName: string;
- data: Partial;
+ data: Data;
versionId?: number;
publishedVersionId?: number;
versions: Version[];
isArchived: boolean;
}) {
- const [currentData, setCurrentData] = useState(data as Data);
const [versions, setVersions] = useState(initialVersions);
const [versionId, setVersionId] = useState(initialVersionId);
const [publishedVersionId, setPublishedVersionId] = useState(initialPublishedVersionId);
@@ -67,7 +66,7 @@ export function Client({
>
{
- setCurrentData(data);
- }}
/>
);
diff --git a/src/app/styles.css b/src/app/styles.css
index 93e48b85..63fa5164 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -2,6 +2,13 @@
@import "tw-animate-css";
@import "shadcn/tailwind.css";
+@source inline("{md:,lg:,}p-{0,1,2,4,6,8,12}");
+@source inline("{md:,lg:,}gap-{0,1,2,4,6,8,12}");
+@source inline("{md:,lg:,}grid-cols-{1,2,3,4,5,6}");
+@source inline("{md:,lg:,}grid-rows-{none,1,2,3,4,5,6}");
+@source inline("{md:,lg:,}auto-rows-{auto,[0]}");
+@source inline("{md:,lg:,}overflow-{visible,hidden}");
+
@custom-variant dark (&:is(.dark *));
@theme {
diff --git a/src/components/puck/button.tsx b/src/components/puck/button.tsx
index 896e029f..f0cd7c83 100644
--- a/src/components/puck/button.tsx
+++ b/src/components/puck/button.tsx
@@ -1,19 +1,24 @@
import type { ComponentConfig } from "@puckeditor/core";
import { Button } from "@/components/ui/button";
-import { selectFrom } from "@/lib/puck/tokens";
+import { defineProps, field } from "@/components/puck/define-props";
+import { defineToken, type TokenValue } from "@/lib/puck/tokens";
-const variantOptions = [
- "default",
- "secondary",
- "outline",
- "ghost",
- "destructive",
- "link",
-] as const;
-type Variant = (typeof variantOptions)[number];
+const variant = defineToken({
+ default: "Default",
+ secondary: "Secondary",
+ outline: "Outline",
+ ghost: "Ghost",
+ destructive: "Destructive",
+ link: "Link",
+});
+type Variant = TokenValue;
-const sizeOptions = ["sm", "default", "lg"] as const;
-type Size = (typeof sizeOptions)[number];
+const size = defineToken({
+ sm: "Small",
+ default: "Default",
+ lg: "Large",
+}, "default");
+type Size = TokenValue;
type PuckButtonProps = {
label: string;
@@ -22,31 +27,19 @@ type PuckButtonProps = {
size: Size;
};
+const props = defineProps({
+ label: field.raw({ type: "text", label: "Label" } as const, "Click me"),
+ href: field.raw({ type: "text", label: "Link URL" } as const, ""),
+ variant: field.select(variant, { label: "Variant" }),
+ size: field.select(size, { label: "Size" }),
+});
+
export const PuckButton: ComponentConfig = {
label: "Button",
- fields: {
- label: { type: "text", label: "Label" },
- href: { type: "text", label: "Link URL" },
- variant: selectFrom(variantOptions, "Variant"),
- size: {
- type: "select",
- label: "Size",
- options: [
- { label: "Small", value: "sm" },
- { label: "Default", value: "default" },
- { label: "Large", value: "lg" },
- ],
- },
- },
- defaultProps: {
- label: "Click me",
- href: "",
- variant: "default",
- size: "default",
- },
- render: ({ label, href, variant, size }) => {
+ ...props,
+ render: ({ label, href, variant: v, size: s }) => {
const button = (
-