@delmaredigital/payload-puck 0.1.0 → 0.1.1

package/dist/{shared-DMAF1AcH.d.mts → shared-DeNKN95N.d.mts}

@@ -340,13 +340,13 @@ declare const DEFAULT_TRANSFORM: TransformValue;
  * Convert TransformValue to CSS properties object
  */
 declare function transformValueToCSS(transform: TransformValue | null | undefined): React__default.CSSProperties | undefined;
-type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Responsive value that can have different values at different breakpoints.
- * Base is required, other breakpoints are optional overrides.
+ * XS (extra small) is required, other breakpoints are optional overrides.
  */
 interface ResponsiveValue<T> {
-    base: T;
+    xs: T;
     sm?: T;
     md?: T;
     lg?: T;
@@ -407,9 +407,9 @@ declare function responsiveValueToCSS<T>(value: ResponsiveValue<T> | T | null |
  * Visibility value for show/hide per breakpoint
  */
 interface VisibilityValue {
-    /** Base visibility - true = visible, false = hidden (default: true) */
-    base: boolean;
-    /** Override for small screens (640px+) */
+    /** XS (extra small) visibility - true = visible, false = hidden (default: true) */
+    xs: boolean;
+    /** Small screens (640px+) */
     sm?: boolean;
     /** Override for medium screens (768px+) */
     md?: boolean;
@@ -424,6 +424,7 @@ interface VisibilityValue {
 declare const DEFAULT_VISIBILITY: VisibilityValue;
 /**
  * Converts a VisibilityValue to CSS with display: none media queries.
+ * Each breakpoint is independent - generates targeted media queries for hidden breakpoints.
  *
  * @param visibility - The visibility settings per breakpoint
  * @param uniqueId - Unique class name for targeting in media queries

package/dist/{shared-DMAF1AcH.d.ts → shared-DeNKN95N.d.ts}

@@ -340,13 +340,13 @@ declare const DEFAULT_TRANSFORM: TransformValue;
  * Convert TransformValue to CSS properties object
  */
 declare function transformValueToCSS(transform: TransformValue | null | undefined): React__default.CSSProperties | undefined;
-type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Responsive value that can have different values at different breakpoints.
- * Base is required, other breakpoints are optional overrides.
+ * XS (extra small) is required, other breakpoints are optional overrides.
  */
 interface ResponsiveValue<T> {
-    base: T;
+    xs: T;
     sm?: T;
     md?: T;
     lg?: T;
@@ -407,9 +407,9 @@ declare function responsiveValueToCSS<T>(value: ResponsiveValue<T> | T | null |
  * Visibility value for show/hide per breakpoint
  */
 interface VisibilityValue {
-    /** Base visibility - true = visible, false = hidden (default: true) */
-    base: boolean;
-    /** Override for small screens (640px+) */
+    /** XS (extra small) visibility - true = visible, false = hidden (default: true) */
+    xs: boolean;
+    /** Small screens (640px+) */
     sm?: boolean;
     /** Override for medium screens (768px+) */
     md?: boolean;
@@ -424,6 +424,7 @@ interface VisibilityValue {
 declare const DEFAULT_VISIBILITY: VisibilityValue;
 /**
  * Converts a VisibilityValue to CSS with display: none media queries.
+ * Each breakpoint is independent - generates targeted media queries for hidden breakpoints.
  *
  * @param visibility - The visibility settings per breakpoint
  * @param uniqueId - Unique class name for targeting in media queries

package/examples/README.md

@@ -17,6 +17,8 @@ examples/
 ├── app/
 │   ├── (frontend)/
 │   │   └── page.tsx                  # Homepage route (root "/")
+│   ├── (manage)/
+│   │   └── layout.tsx                # Editor layout (imports Tailwind CSS)
 │   ├── pages/
 │   │   └── [id]/
 │   │       └── edit/
@@ -65,14 +67,19 @@ export default buildConfig({
 cp -r node_modules/@delmaredigital/payload-puck/examples/api/puck src/app/api/
 ```
 
-### 3. Copy Editor Page
+### 3. Copy Editor Page & Layout
 
 ```bash
-# Adjust the destination path as needed for your route structure
+# Create route group and copy layout (REQUIRED for Tailwind styles)
 mkdir -p src/app/\(manage\)/pages/\[id\]/edit
+cp node_modules/@delmaredigital/payload-puck/examples/app/\(manage\)/layout.tsx src/app/\(manage\)/
+
+# Copy editor page
 cp node_modules/@delmaredigital/payload-puck/examples/app/pages/\[id\]/edit/page.tsx src/app/\(manage\)/pages/\[id\]/edit/
 ```
 
+> **Important:** The layout file imports Tailwind CSS. Without it, the editor will be completely unstyled. Update the CSS import path in `layout.tsx` to match your project's globals.css location.
+
 ### 4. Copy Frontend Routes
 
 ```bash

package/examples/app/(manage)/layout.tsx

@@ -0,0 +1,31 @@
+/**
+ * Layout for Puck Editor routes
+ *
+ * IMPORTANT: This layout must import your Tailwind CSS for the editor to be styled.
+ * Update the import path to match your project's globals.css location.
+ */
+
+// Import your Tailwind CSS - adjust path as needed
+import '@/app/(frontend)/globals.css'
+// Or if your globals.css is elsewhere:
+// import '@/styles/globals.css'
+// import '../globals.css'
+
+export const metadata = {
+  title: 'Puck Editor',
+  description: 'Visual page editor',
+}
+
+export default function ManageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    // NOTE: data-theme="light" is required if your CSS uses opacity:0 until theme is set
+    // (common FOUC prevention pattern). Adjust to match your theme system.
+    <html lang="en" data-theme="light">
+      <body>{children}</body>
+    </html>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Puck visual page builder plugin for Payload CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -82,10 +82,16 @@
     "examples",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "@measured/puck": ">=0.20.0",
     "@payloadcms/ui": ">=3.0.0",
-    "next": ">=15.4.0",
+    "next": ">=15.4.8",
     "payload": ">=3.0.0",
     "react": ">=18.0.0"
   },
@@ -96,11 +102,12 @@
   },
   "dependencies": {
     "@measured/puck-plugin-heading-analyzer": "^0.20.2",
+    "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
-    "@tabler/icons-react": "^3.36.1",
+    "lucide-react": "^0.469.0",
     "@tiptap/core": "^3.14.0",
     "@tiptap/extension-color": "^3.14.0",
     "@tiptap/extension-highlight": "^3.14.0",
@@ -148,10 +155,5 @@
   "bugs": {
     "url": "https://github.com/delmaredigital/payload-puck/issues"
   },
-  "homepage": "https://delmaredigital.com/developers",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
-  }
-}
+  "homepage": "https://delmaredigital.com/developers"
+}