@delmaredigital/payload-puck 0.1.0 → 0.1.2

package/dist/render/index.js

@@ -4,7 +4,7 @@ var puck = require('@measured/puck');
 var jsxRuntime = require('react/jsx-runtime');
 var AnimatedWrapper = require('../AnimatedWrapper');
 var React = require('react');
-var iconsReact = require('@tabler/icons-react');
+var lucideReact = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -480,7 +480,7 @@ function transformValueToCSS(transform) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 var BREAKPOINTS = [
-  { key: "base", label: "Base", minWidth: null },
+  { key: "xs", label: "XS", minWidth: null },
   { key: "sm", label: "SM", minWidth: 640 },
   { key: "md", label: "MD", minWidth: 768 },
   { key: "lg", label: "LG", minWidth: 1024 },
@@ -488,7 +488,7 @@ var BREAKPOINTS = [
 ];
 function isResponsiveValue(value) {
   if (!value || typeof value !== "object") return false;
-  return "base" in value;
+  return "xs" in value;
 }
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -514,7 +514,7 @@ function responsiveValueToCSS(value, converter, uniqueId) {
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
-    if (bp.key === "base") {
+    if (bp.key === "xs") {
       baseStyles = cssProps;
     } else {
       const styleString = cssPropertiesToString(cssProps);
@@ -530,24 +530,41 @@ function responsiveValueToCSS(value, converter, uniqueId) {
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
   const mediaQueries = [];
-  if (visibility.base === false) {
-    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  const breakpointWidths = {
+    xs: null,
+    // 0px
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+  };
+  const getNextBreakpointWidth = (bp) => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const index = order.indexOf(bp);
+    if (index === -1 || index === order.length - 1) return null;
+    return breakpointWidths[order[index + 1]];
+  };
+  if (visibility.xs === false) {
+    const nextWidth = getNextBreakpointWidth("xs");
+    if (nextWidth) {
+      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
+    } else {
+      mediaQueries.push(`.${uniqueId} { display: none; }`);
+    }
   }
-  let lastVisibility = visibility.base;
   BREAKPOINTS.slice(1).forEach((bp) => {
-    const bpValue = visibility[bp.key];
-    if (bpValue === void 0) return;
-    if (bpValue !== lastVisibility) {
-      if (bpValue === false) {
+    if (visibility[bp.key] === false) {
+      const minWidth = breakpointWidths[bp.key];
+      const maxWidth = getNextBreakpointWidth(bp.key);
+      if (minWidth && maxWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
         );
-      } else {
+      } else if (minWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
         );
       }
-      lastVisibility = bpValue;
     }
   });
   return mediaQueries.join("\n");
@@ -1585,7 +1602,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
         }
       )
     ] }),

package/dist/render/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatedWrapper } from '../AnimatedWrapper';
 import * as React from 'react';
 import { memo, useCallback, createElement } from 'react';
-import { IconX } from '@tabler/icons-react';
+import { X } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -458,7 +458,7 @@ function transformValueToCSS(transform) {
   return Object.keys(style).length > 0 ? style : void 0;
 }
 var BREAKPOINTS = [
-  { key: "base", label: "Base", minWidth: null },
+  { key: "xs", label: "XS", minWidth: null },
   { key: "sm", label: "SM", minWidth: 640 },
   { key: "md", label: "MD", minWidth: 768 },
   { key: "lg", label: "LG", minWidth: 1024 },
@@ -466,7 +466,7 @@ var BREAKPOINTS = [
 ];
 function isResponsiveValue(value) {
   if (!value || typeof value !== "object") return false;
-  return "base" in value;
+  return "xs" in value;
 }
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
@@ -492,7 +492,7 @@ function responsiveValueToCSS(value, converter, uniqueId) {
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
-    if (bp.key === "base") {
+    if (bp.key === "xs") {
       baseStyles = cssProps;
     } else {
       const styleString = cssPropertiesToString(cssProps);
@@ -508,24 +508,41 @@ function responsiveValueToCSS(value, converter, uniqueId) {
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
   const mediaQueries = [];
-  if (visibility.base === false) {
-    mediaQueries.push(`.${uniqueId} { display: none; }`);
+  const breakpointWidths = {
+    xs: null,
+    // 0px
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280
+  };
+  const getNextBreakpointWidth = (bp) => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const index = order.indexOf(bp);
+    if (index === -1 || index === order.length - 1) return null;
+    return breakpointWidths[order[index + 1]];
+  };
+  if (visibility.xs === false) {
+    const nextWidth = getNextBreakpointWidth("xs");
+    if (nextWidth) {
+      mediaQueries.push(`@media (max-width: ${nextWidth - 1}px) { .${uniqueId} { display: none; } }`);
+    } else {
+      mediaQueries.push(`.${uniqueId} { display: none; }`);
+    }
   }
-  let lastVisibility = visibility.base;
   BREAKPOINTS.slice(1).forEach((bp) => {
-    const bpValue = visibility[bp.key];
-    if (bpValue === void 0) return;
-    if (bpValue !== lastVisibility) {
-      if (bpValue === false) {
+    if (visibility[bp.key] === false) {
+      const minWidth = breakpointWidths[bp.key];
+      const maxWidth = getNextBreakpointWidth(bp.key);
+      if (minWidth && maxWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: none; } }`
+          `@media (min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px) { .${uniqueId} { display: none; } }`
         );
-      } else {
+      } else if (minWidth) {
         mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { display: block; } }`
+          `@media (min-width: ${minWidth}px) { .${uniqueId} { display: none; } }`
         );
       }
-      lastVisibility = bpValue;
     }
   });
   return mediaQueries.join("\n");
@@ -1563,7 +1580,7 @@ function SizeFieldInner({
           onClick: handleClear,
           className: "text-muted-foreground hover:text-destructive",
           title: "Reset to default",
-          children: /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
     ] }),

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.2",
   "description": "Puck visual page builder plugin for Payload CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -79,13 +79,20 @@
   },
   "files": [
     "dist",
+    "!dist/**/*.map",
     "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 +103,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 +156,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"
+}