@orion-studios/payload-studio 0.5.0-beta.11 → 0.5.0-beta.110

package/dist/studio-pages/index.mjs

@@ -1,20 +1,26 @@
 import {
-  createDefaultStudioDocument,
-  layoutToStudioDocument,
   pageInspectorPanels,
   pageNodeTypes,
   pagePaletteGroups,
   pageStudioModuleManifest,
+  resolveBuilderThemeTokens
+} from "../chunk-GKMBYYXF.mjs";
+import "../chunk-OQSEJXC4.mjs";
+import {
+  createDefaultStudioDocument,
+  defaultBuilderThemeTokens,
+  layoutToStudioDocument,
   studioDocumentToLayout
-} from "../chunk-NESLJZFE.mjs";
-import "../chunk-ETRRXURT.mjs";
+} from "../chunk-PF3EBZXF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,
+  defaultBuilderThemeTokens,
   layoutToStudioDocument,
   pageInspectorPanels,
   pageNodeTypes,
   pagePaletteGroups,
   pageStudioModuleManifest,
+  resolveBuilderThemeTokens,
   studioDocumentToLayout
 };

package/package.json

@@ -1,60 +1,72 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.11",
+  "version": "0.5.0-beta.110",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./admin": {
       "types": "./dist/admin/index.d.ts",
       "require": "./dist/admin/index.js",
-      "import": "./dist/admin/index.mjs"
+      "import": "./dist/admin/index.mjs",
+      "default": "./dist/admin/index.mjs"
     },
     "./admin/client": {
       "types": "./dist/admin/client.d.ts",
       "require": "./dist/admin/client.js",
-      "import": "./dist/admin/client.mjs"
+      "import": "./dist/admin/client.mjs",
+      "default": "./dist/admin/client.mjs"
     },
     "./admin.css": "./dist/admin.css",
     "./admin-app": {
       "types": "./dist/admin-app/index.d.ts",
       "require": "./dist/admin-app/index.js",
-      "import": "./dist/admin-app/index.mjs"
+      "import": "./dist/admin-app/index.mjs",
+      "default": "./dist/admin-app/index.mjs"
     },
     "./admin-app/client": {
       "types": "./dist/admin-app/client.d.ts",
       "require": "./dist/admin-app/client.js",
-      "import": "./dist/admin-app/client.mjs"
+      "import": "./dist/admin-app/client.mjs",
+      "default": "./dist/admin-app/client.mjs"
     },
     "./admin-app/styles.css": "./dist/admin-app/styles.css",
     "./blocks": {
       "types": "./dist/blocks/index.d.ts",
       "require": "./dist/blocks/index.js",
-      "import": "./dist/blocks/index.mjs"
+      "import": "./dist/blocks/index.mjs",
+      "default": "./dist/blocks/index.mjs"
     },
     "./nextjs": {
       "types": "./dist/nextjs/index.d.ts",
       "require": "./dist/nextjs/index.js",
-      "import": "./dist/nextjs/index.mjs"
+      "import": "./dist/nextjs/index.mjs",
+      "default": "./dist/nextjs/index.mjs"
     },
     "./studio": {
       "types": "./dist/studio/index.d.ts",
       "require": "./dist/studio/index.js",
-      "import": "./dist/studio/index.mjs"
+      "import": "./dist/studio/index.mjs",
+      "default": "./dist/studio/index.mjs"
     },
     "./studio-pages": {
       "types": "./dist/studio-pages/index.d.ts",
       "require": "./dist/studio-pages/index.js",
-      "import": "./dist/studio-pages/index.mjs"
+      "import": "./dist/studio-pages/index.mjs",
+      "default": "./dist/studio-pages/index.mjs"
     },
     "./studio-pages/client": {
       "types": "./dist/studio-pages/client.d.ts",
       "require": "./dist/studio-pages/client.js",
-      "import": "./dist/studio-pages/client.mjs"
+      "import": "./dist/studio-pages/client.mjs",
+      "default": "./dist/studio-pages/client.mjs"
     },
     "./studio-pages/builder.css": "./dist/studio-pages/builder.css",
     "./package.json": "./package.json"
@@ -63,10 +75,19 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup && node -e \"const fs=require('fs'); fs.copyFileSync('src/admin/styles/admin.css','dist/admin.css'); fs.mkdirSync('dist/admin-app',{recursive:true}); fs.copyFileSync('src/admin-app/styles/admin-app.css','dist/admin-app/styles.css'); fs.mkdirSync('dist/studio-pages',{recursive:true}); fs.copyFileSync('src/studio-pages/styles/builder.css','dist/studio-pages/builder.css'); fs.mkdirSync('dist/admin',{recursive:true}); fs.copyFileSync('src/admin/client.d.ts','dist/admin/client.d.ts'); fs.copyFileSync('src/admin/client.d.ts','dist/admin/client.d.mts'); fs.copyFileSync('src/studio-pages/client.d.ts','dist/studio-pages/client.d.ts'); fs.copyFileSync('src/studio-pages/client.d.ts','dist/studio-pages/client.d.mts')\"",
+    "build": "tsup && node -e \"const fs=require('fs'); fs.copyFileSync('src/admin/styles/admin.css','dist/admin.css'); fs.mkdirSync('dist/admin-app',{recursive:true}); fs.copyFileSync('src/admin-app/styles/admin-app.css','dist/admin-app/styles.css'); fs.mkdirSync('dist/studio-pages',{recursive:true}); fs.copyFileSync('src/studio-pages/styles/builder.css','dist/studio-pages/builder.css'); fs.mkdirSync('dist/admin',{recursive:true}); fs.copyFileSync('src/admin/client.d.ts','dist/admin/client.d.ts'); fs.copyFileSync('src/admin/client.d.ts','dist/admin/client.d.mts'); fs.copyFileSync('src/admin-app/client.d.ts','dist/admin-app/client.d.ts'); fs.copyFileSync('src/admin-app/client.d.ts','dist/admin-app/client.d.mts'); fs.copyFileSync('src/studio-pages/client.d.ts','dist/studio-pages/client.d.ts'); fs.copyFileSync('src/studio-pages/client.d.ts','dist/studio-pages/client.d.mts')\"",
     "dev": "tsup --watch",
+    "test": "tsx --test src/studio-pages/builder/settings-v2/__tests__/*.test.ts src/studio-pages/__tests__/*.test.ts",
     "typecheck": "tsc --noEmit"
   },
+  "overrides": {
+    "ajv": "^8.18.0",
+    "dompurify": "^3.3.3",
+    "file-type": "^21.3.3",
+    "immutable": "^4.3.8",
+    "rollup": "^4.59.0",
+    "undici": "^7.24.4"
+  },
   "keywords": [
     "payload",
     "cms",
@@ -90,8 +111,9 @@
     "@payloadcms/ui": "3.75.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "next": "16.1.6",
+    "next": "16.2.0",
     "payload": "3.75.0",
+    "tsx": "^4.21.0",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   }

package/dist/chunk-AAOHJDNS.mjs

@@ -1,67 +0,0 @@
-import {
-  __export
-} from "./chunk-6BWS3CLP.mjs";
-
-// src/admin-app/index.ts
-var admin_app_exports = {};
-__export(admin_app_exports, {
-  AdminBreadcrumbs: () => AdminBreadcrumbs,
-  AdminPage: () => AdminPage,
-  navItemIsActive: () => navItemIsActive,
-  roleCanAccessNav: () => roleCanAccessNav
-});
-
-// src/admin-app/components/AdminBreadcrumbs.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function AdminBreadcrumbs({ items }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "orion-admin-breadcrumbs", children: items.map((item, index) => {
-    const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs("span", { children: [
-      item.href && !isLast ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label }),
-      !isLast ? /* @__PURE__ */ jsx("span", { className: "orion-admin-breadcrumb-sep", children: "/" }) : null
-    ] }, `${item.label}-${index}`);
-  }) });
-}
-
-// src/admin-app/components/AdminPage.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AdminPage({ title, description, breadcrumbs, actions, children }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "orion-admin-page", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "orion-admin-page-header", children: [
-      /* @__PURE__ */ jsx2(AdminBreadcrumbs, { items: breadcrumbs }),
-      /* @__PURE__ */ jsxs2("div", { className: "orion-admin-page-title-row", children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2("h1", { children: title }),
-          description ? /* @__PURE__ */ jsx2("p", { children: description }) : null
-        ] }),
-        actions ? /* @__PURE__ */ jsx2("div", { className: "orion-admin-page-actions", children: actions }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "orion-admin-page-content", children })
-  ] });
-}
-
-// src/admin-app/routeRegistry.ts
-var roleCanAccessNav = (role, item) => {
-  if (!item.roles || item.roles.length === 0) {
-    return true;
-  }
-  if (!role) {
-    return false;
-  }
-  return item.roles.includes(role);
-};
-var navItemIsActive = (pathname, item) => {
-  if (item.href === "/admin") {
-    return pathname === "/admin";
-  }
-  return item.matchPrefixes.some((prefix) => pathname.startsWith(prefix));
-};
-
-export {
-  AdminBreadcrumbs,
-  AdminPage,
-  roleCanAccessNav,
-  navItemIsActive,
-  admin_app_exports
-};

package/dist/chunk-ETRRXURT.mjs

@@ -1,141 +0,0 @@
-// src/blocks/blocks/sectionStyleFields.ts
-var sectionStyleDefaults = {
-  contentBackgroundColor: "#ffffff",
-  contentBackgroundMode: "none",
-  contentGradientAngle: "135",
-  contentGradientFrom: "#ffffff",
-  contentGradientPreset: "none",
-  contentGradientTo: "#f4f6f2",
-  contentWidth: "inherit",
-  sectionBackgroundColor: "#ffffff",
-  sectionBackgroundMode: "none",
-  sectionGradientAngle: "135",
-  sectionGradientFrom: "#124a37",
-  sectionGradientPreset: "forest",
-  sectionGradientTo: "#1f684f",
-  sectionPaddingY: "md",
-  sectionWidth: "content"
-};
-var sectionStyleFields = () => [
-  {
-    name: "sectionWidth",
-    type: "select",
-    defaultValue: sectionStyleDefaults.sectionWidth,
-    options: [
-      { label: "Content", value: "content" },
-      { label: "Wide", value: "wide" },
-      { label: "Full", value: "full" }
-    ]
-  },
-  {
-    name: "contentWidth",
-    type: "select",
-    defaultValue: sectionStyleDefaults.contentWidth,
-    options: [
-      { label: "Inherit", value: "inherit" },
-      { label: "Narrow", value: "narrow" },
-      { label: "Content", value: "content" },
-      { label: "Wide", value: "wide" },
-      { label: "Full", value: "full" }
-    ]
-  },
-  {
-    name: "sectionPaddingY",
-    type: "select",
-    defaultValue: sectionStyleDefaults.sectionPaddingY,
-    options: [
-      { label: "Small", value: "sm" },
-      { label: "Medium", value: "md" },
-      { label: "Large", value: "lg" }
-    ]
-  },
-  {
-    name: "sectionBackgroundMode",
-    type: "select",
-    defaultValue: sectionStyleDefaults.sectionBackgroundMode,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Color", value: "color" },
-      { label: "Gradient", value: "gradient" }
-    ]
-  },
-  {
-    name: "sectionBackgroundColor",
-    type: "text",
-    defaultValue: sectionStyleDefaults.sectionBackgroundColor
-  },
-  {
-    name: "sectionGradientPreset",
-    type: "select",
-    defaultValue: sectionStyleDefaults.sectionGradientPreset,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Forest", value: "forest" },
-      { label: "Moss", value: "moss" },
-      { label: "Cream", value: "cream" },
-      { label: "Slate", value: "slate" }
-    ]
-  },
-  {
-    name: "sectionGradientFrom",
-    type: "text",
-    defaultValue: sectionStyleDefaults.sectionGradientFrom
-  },
-  {
-    name: "sectionGradientTo",
-    type: "text",
-    defaultValue: sectionStyleDefaults.sectionGradientTo
-  },
-  {
-    name: "sectionGradientAngle",
-    type: "text",
-    defaultValue: sectionStyleDefaults.sectionGradientAngle
-  },
-  {
-    name: "contentBackgroundMode",
-    type: "select",
-    defaultValue: sectionStyleDefaults.contentBackgroundMode,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Color", value: "color" },
-      { label: "Gradient", value: "gradient" }
-    ]
-  },
-  {
-    name: "contentBackgroundColor",
-    type: "text",
-    defaultValue: sectionStyleDefaults.contentBackgroundColor
-  },
-  {
-    name: "contentGradientPreset",
-    type: "select",
-    defaultValue: sectionStyleDefaults.contentGradientPreset,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Cloud", value: "cloud" },
-      { label: "Sand", value: "sand" },
-      { label: "Mint", value: "mint" },
-      { label: "Night", value: "night" }
-    ]
-  },
-  {
-    name: "contentGradientFrom",
-    type: "text",
-    defaultValue: sectionStyleDefaults.contentGradientFrom
-  },
-  {
-    name: "contentGradientTo",
-    type: "text",
-    defaultValue: sectionStyleDefaults.contentGradientTo
-  },
-  {
-    name: "contentGradientAngle",
-    type: "text",
-    defaultValue: sectionStyleDefaults.contentGradientAngle
-  }
-];
-
-export {
-  sectionStyleDefaults,
-  sectionStyleFields
-};

package/dist/chunk-J7W5EE3B.mjs

@@ -1,278 +0,0 @@
-import {
-  __export,
-  __require
-} from "./chunk-6BWS3CLP.mjs";
-
-// src/admin/index.ts
-var admin_exports = {};
-__export(admin_exports, {
-  configureAdmin: () => configureAdmin,
-  createThemePreferenceField: () => createThemePreferenceField,
-  themePreferenceField: () => themePreferenceField,
-  withTooltips: () => withTooltips
-});
-
-// src/admin/helpers/configureAdmin.ts
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-// src/admin/fields/themePreference.ts
-var createThemePreferenceField = (defaultTheme = "brand-light") => ({
-  name: "themePreference",
-  type: "select",
-  defaultValue: defaultTheme,
-  options: [
-    { label: "Light", value: "light" },
-    { label: "Dark", value: "dark" },
-    { label: "Brand Light", value: "brand-light" },
-    { label: "Brand Dark", value: "brand-dark" }
-  ],
-  admin: {
-    position: "sidebar",
-    condition: () => false
-  }
-});
-var themePreferenceField = createThemePreferenceField("brand-light");
-
-// src/admin/helpers/configureAdmin.ts
-function getPkgDistDir() {
-  try {
-    if (typeof import.meta?.url === "string") {
-      return path.dirname(fileURLToPath(import.meta.url));
-    }
-  } catch {
-  }
-  if (typeof __dirname === "string") {
-    return __dirname;
-  }
-  try {
-    const pkgJson = __require.resolve("@orion-studios/payload-studio/package.json");
-    return path.resolve(path.dirname(pkgJson), "dist");
-  } catch {
-    return process.cwd();
-  }
-}
-function configureAdmin(config) {
-  const {
-    brandName,
-    brandPrimary = "#3b82f6",
-    brandSecondary = "#8b5cf6",
-    defaultTheme = "brand-light",
-    logoUrl
-  } = config;
-  const studioEnabled = Boolean(config.studio?.enabled);
-  const pagesCollectionSlug = config.studio?.pages?.collectionSlug || "pages";
-  const mediaCollectionSlug = config.studio?.media?.collectionSlug || "media";
-  const globals = config.studio?.globals || [
-    { slug: "site-settings", label: "Website Settings" },
-    { slug: "header", label: "Header & Navigation" },
-    { slug: "footer", label: "Footer" }
-  ];
-  let cssPath;
-  const pkgDist = getPkgDistDir();
-  const sourceCssPath = path.resolve(pkgDist, "admin.css");
-  if (config.basePath && fs.existsSync(sourceCssPath)) {
-    let css = fs.readFileSync(sourceCssPath, "utf-8");
-    css = css.replace("--brand-primary: #3b82f6;", `--brand-primary: ${brandPrimary};`);
-    css = css.replace("--brand-secondary: #8b5cf6;", `--brand-secondary: ${brandSecondary};`);
-    const genDir = path.resolve(config.basePath, ".generated");
-    if (!fs.existsSync(genDir)) {
-      fs.mkdirSync(genDir, { recursive: true });
-    }
-    const genPath = path.resolve(genDir, "admin.css");
-    fs.writeFileSync(genPath, css);
-    cssPath = genPath;
-  } else {
-    cssPath = sourceCssPath;
-  }
-  const clientPath = "@orion-studios/payload-studio/admin/client";
-  return {
-    admin: {
-      css: cssPath,
-      components: {
-        ...studioEnabled ? {
-          Nav: {
-            exportName: "AdminStudioNav",
-            path: clientPath,
-            clientProps: {
-              brandName,
-              logoUrl,
-              globalsBasePath: "/admin/studio-globals",
-              mediaCollectionSlug,
-              pagesCollectionSlug
-            }
-          }
-        } : {},
-        graphics: {
-          Logo: {
-            exportName: "Logo",
-            path: clientPath,
-            clientProps: {
-              brandName,
-              logoUrl
-            }
-          },
-          Icon: {
-            exportName: "Icon",
-            path: clientPath,
-            clientProps: {
-              brandName,
-              logoUrl
-            }
-          }
-        },
-        views: {
-          dashboard: {
-            Component: {
-              exportName: studioEnabled ? "AdminStudioDashboard" : "Dashboard",
-              path: clientPath,
-              clientProps: {
-                brandName,
-                logoUrl,
-                globalsBasePath: "/admin/studio-globals",
-                mediaCollectionSlug,
-                pagesCollectionSlug
-              }
-            }
-          },
-          ...studioEnabled ? {
-            studioGlobals: {
-              path: "/studio-globals",
-              Component: {
-                exportName: "AdminStudioGlobalsView",
-                path: clientPath,
-                clientProps: {
-                  globals,
-                  globalsBasePath: "/admin/studio-globals"
-                }
-              }
-            }
-          } : {}
-        },
-        providers: [
-          {
-            exportName: "ThemeProvider",
-            path: clientPath,
-            clientProps: {
-              defaultTheme
-            }
-          }
-        ],
-        afterNavLinks: [
-          {
-            exportName: "ThemeSwitcher",
-            path: clientPath,
-            clientProps: {
-              defaultTheme
-            }
-          }
-        ]
-      },
-      meta: {
-        titleSuffix: ` \u2014 ${brandName}`
-      }
-    },
-    brandName,
-    brandPrimary,
-    brandSecondary,
-    defaultTheme,
-    wrapUsers(usersCollection) {
-      const existingFields = usersCollection.fields || [];
-      const hasThemePreference = existingFields.some(
-        (field) => typeof field === "object" && field !== null && "name" in field && field.name === "themePreference"
-      );
-      return {
-        ...usersCollection,
-        fields: hasThemePreference ? existingFields : [...existingFields, createThemePreferenceField(defaultTheme)]
-      };
-    },
-    wrapGlobals(globals2) {
-      const labelMap = {
-        header: { group: "Site Design", label: "Header & Navigation" },
-        footer: { group: "Site Design", label: "Footer" },
-        "site-settings": { group: "Site Design", label: "Website Settings" }
-      };
-      return globals2.map((global) => {
-        const mapping = labelMap[global.slug];
-        if (!mapping) return global;
-        return {
-          ...global,
-          admin: {
-            ...global.admin,
-            group: mapping.group
-          },
-          label: mapping.label
-        };
-      });
-    }
-  };
-}
-
-// src/admin/helpers/withTooltips.ts
-var defaultTooltips = {
-  title: "The main title displayed on this page.",
-  slug: 'The URL-friendly name for this page (e.g., "about-us"). This appears in the web address.',
-  template: "Choose a layout template. This controls the overall structure of the page.",
-  parent: "Select a parent page to nest this page under. This affects the URL path.",
-  path: "The full URL path for this page. This is automatically generated from the slug and parent.",
-  layout: "Add and arrange content sections on your page. Each section is a building block.",
-  metaTitle: "The title shown in search engine results and browser tabs. Keep under 60 characters.",
-  metaDescription: "A brief summary shown in search results. Keep under 160 characters for best results.",
-  canonicalUrl: "The preferred URL for this page. Used to prevent duplicate content in search engines.",
-  ogImage: "The image shown when this page is shared on social media (Facebook, LinkedIn, etc.).",
-  noIndex: "When enabled, search engines will not list this page in results.",
-  noFollow: "When enabled, search engines will not follow links on this page.",
-  publishedAt: "The date and time this page was first published.",
-  alt: "Describe this image for screen readers and search engines. Be specific and concise.",
-  navItems: "The links shown in your website's navigation menu.",
-  copyright: "The copyright text displayed in your website footer.",
-  contactEmail: "The email address displayed in your footer and contact sections.",
-  contactPhone: "The phone number displayed in your footer and contact sections.",
-  siteName: "Your website's name. Appears in browser tabs and search results.",
-  tagline: "A short phrase describing your business. Used in SEO and site metadata.",
-  canonicalBaseUrl: 'The base URL of your website (e.g., "https://example.com"). Used for generating canonical URLs.'
-};
-function withTooltips(fields, customTooltips) {
-  const tooltips = { ...defaultTooltips, ...customTooltips };
-  return fields.map((field) => addTooltipToField(field, tooltips));
-}
-function addTooltipToField(field, tooltips) {
-  if ("name" in field && field.name && tooltips[field.name]) {
-    const tooltip = tooltips[field.name];
-    const admin = field.admin;
-    if (!admin?.description) {
-      return {
-        ...field,
-        admin: {
-          ...admin,
-          description: tooltip
-        }
-      };
-    }
-  }
-  if ("fields" in field && Array.isArray(field.fields)) {
-    return {
-      ...field,
-      fields: field.fields.map((f) => addTooltipToField(f, tooltips))
-    };
-  }
-  if ("tabs" in field && Array.isArray(field.tabs)) {
-    return {
-      ...field,
-      tabs: field.tabs.map((tab) => ({
-        ...tab,
-        fields: tab.fields ? tab.fields.map((f) => addTooltipToField(f, tooltips)) : tab.fields
-      }))
-    };
-  }
-  return field;
-}
-
-export {
-  createThemePreferenceField,
-  themePreferenceField,
-  configureAdmin,
-  withTooltips,
-  admin_exports
-};