@orion-studios/payload-studio 0.6.0-beta.21 → 0.6.0-beta.23

package/dist/admin/client.js

@@ -4042,6 +4042,7 @@ function AdminStudioDashboard(rawProps) {
 // src/admin/components/studio/AdminStudioPagesListView.tsx
 var import_react19 = require("react");
 var import_link2 = __toESM(require("next/link"));
+var import_navigation3 = require("next/navigation");
 var import_ui7 = require("@payloadcms/ui");
 
 // src/admin/components/studio/AdminStudioNewPageView.tsx
@@ -4533,13 +4534,7 @@ var getPropString5 = (props, key, fallback) => {
 };
 function AdminStudioPagesListView(props) {
   const adminBasePath = useAdminBasePath();
-  const [pathname, setPathname] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
-    const updatePathname = () => setPathname(window.location.pathname);
-    updatePathname();
-    window.addEventListener("popstate", updatePathname);
-    return () => window.removeEventListener("popstate", updatePathname);
-  }, []);
+  const pathname = (0, import_navigation3.usePathname)();
   const pagesPath = resolveAdminPath(adminBasePath, "/pages");
   const nestedPagePath = pathname && pathname.startsWith(`${pagesPath}/`) ? pathname.slice(`${pagesPath}/`.length).split("/")[0] : "";
   if (nestedPagePath === "new") {
@@ -6897,7 +6892,7 @@ function MediaListItem({
 
 // src/admin-app/components/MediaUploadForm.tsx
 var import_react27 = require("react");
-var import_navigation3 = require("next/navigation");
+var import_navigation4 = require("next/navigation");
 
 // src/shared/clientImageUploadOptimization.ts
 var MAX_DIRECT_UPLOAD_BYTES = 4e6;
@@ -7032,7 +7027,7 @@ var parseUploadError = async (response) => {
   return fallback;
 };
 function MediaUploadForm() {
-  const router = (0, import_navigation3.useRouter)();
+  const router = (0, import_navigation4.useRouter)();
   const fileInputRef = (0, import_react27.useRef)(null);
   const [alt, setAlt] = (0, import_react27.useState)("");
   const [file, setFile] = (0, import_react27.useState)(null);

package/dist/admin/client.mjs

@@ -2669,6 +2669,7 @@ function AdminStudioDashboard(rawProps) {
 // src/admin/components/studio/AdminStudioPagesListView.tsx
 import { useEffect as useEffect9, useMemo as useMemo5, useState as useState10 } from "react";
 import Link2 from "next/link";
+import { usePathname as usePathname3 } from "next/navigation";
 import { useAuth as useAuth5 } from "@payloadcms/ui";
 
 // src/admin/components/studio/AdminStudioNewPageView.tsx
@@ -3160,13 +3161,7 @@ var getPropString5 = (props, key, fallback) => {
 };
 function AdminStudioPagesListView(props) {
   const adminBasePath = useAdminBasePath();
-  const [pathname, setPathname] = useState10(null);
-  useEffect9(() => {
-    const updatePathname = () => setPathname(window.location.pathname);
-    updatePathname();
-    window.addEventListener("popstate", updatePathname);
-    return () => window.removeEventListener("popstate", updatePathname);
-  }, []);
+  const pathname = usePathname3();
   const pagesPath = resolveAdminPath(adminBasePath, "/pages");
   const nestedPagePath = pathname && pathname.startsWith(`${pagesPath}/`) ? pathname.slice(`${pagesPath}/`.length).split("/")[0] : "";
   if (nestedPagePath === "new") {

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
 import {
   admin_exports
 } from "./chunk-JC3UV74N.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
 import "./chunk-W2UOCJDX.mjs";
 import {
   blocks_exports

package/dist/studio-pages/builder.css

@@ -116,6 +116,12 @@ h4 {
   --orion-shell-max: 100%;
 }
 
+@media (max-width: 767px) {
+  .orion-builder-hide-mobile {
+    display: none !important;
+  }
+}
+
 .orion-builder-content {
   width: min(var(--orion-shell-max), calc(100% - (var(--orion-shell-inline) * 2)));
   margin-inline: auto;

package/dist/studio-pages/client.js

@@ -3883,6 +3883,12 @@ function getThemeColorOverride(tokens, colorKey) {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
 }
+function normalizeCustomClassName(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.split(/\s+/).map((className) => className.trim()).filter(Boolean).join(" ");
+}
 var sectionStyleFromBlock = (block, pageDefaults) => {
   const settings = isRecord6(block.settings) ? block.settings : {};
   const layoutSettings = isRecord6(settings.layout) ? settings.layout : {};
@@ -4702,6 +4708,7 @@ function BuilderPageEditor({
     const inheritProjectStyles = options?.inheritProjectStyles === true;
     const shell = sectionStyleFromBlock(block, pageDefaults);
     const blockSettings = isRecord6(block.settings) ? block.settings : {};
+    const blockAdvanced = isRecord6(blockSettings.advanced) ? blockSettings.advanced : {};
     const blockTypography = isRecord6(blockSettings.typography) ? blockSettings.typography : {};
     const blockTheme = isRecord6(blockSettings.theme) ? blockSettings.theme : {};
     const heroBackgroundColor = normalizeText2(block.backgroundColor).trim();
@@ -4719,16 +4726,24 @@ function BuilderPageEditor({
     const headingAlign = blockTypography.headingAlign === "center" || blockTypography.headingAlign === "justify" || blockTypography.headingAlign === "right" ? blockTypography.headingAlign : "left";
     const headingColor = getThemeColorOverride(blockTheme, "headingText") || getThemeColorOverride(pageDefaults.themePage, "headingText") || getThemeColorOverride(siteThemeTokens, "headingText") || heroTextColor || resolvedThemeTokens.colors.headingText;
     const bodyColor = getThemeColorOverride(blockTheme, "bodyText") || getThemeColorOverride(pageDefaults.themePage, "bodyText") || getThemeColorOverride(siteThemeTokens, "bodyText") || heroTextColor || resolvedThemeTokens.colors.bodyText;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    const customClassName = normalizeCustomClassName(blockAdvanced.customClassName ?? block.customClassName);
+    const hideOnMobile = Boolean(blockAdvanced.hideOnMobile ?? block.hideOnMobile);
+    const sectionClassName = [
+      className,
+      shell.sectionClass,
+      customClassName,
+      hideOnMobile ? "orion-builder-hide-mobile" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("section", { className: sectionClassName, style: shell.sectionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: shell.contentClass,
         style: {
           ...shell.contentStyle,
+          "--orion-builder-heading-align": headingAlign,
+          "--orion-builder-body-align": bodyAlign,
+          "--orion-builder-actions-align": bodyAlign === "center" ? "center" : bodyAlign === "right" ? "flex-end" : "flex-start",
           ...inheritProjectStyles ? {} : {
-            "--orion-builder-heading-align": headingAlign,
-            "--orion-builder-body-align": bodyAlign,
-            "--orion-builder-actions-align": bodyAlign === "center" ? "center" : bodyAlign === "right" ? "flex-end" : "flex-start",
             "--orion-builder-heading-color": headingColor,
             color: bodyColor,
             ...typographyStyle

package/dist/studio-pages/client.mjs

@@ -3763,6 +3763,12 @@ function getThemeColorOverride(tokens, colorKey) {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
 }
+function normalizeCustomClassName(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.split(/\s+/).map((className) => className.trim()).filter(Boolean).join(" ");
+}
 var sectionStyleFromBlock = (block, pageDefaults) => {
   const settings = isRecord6(block.settings) ? block.settings : {};
   const layoutSettings = isRecord6(settings.layout) ? settings.layout : {};
@@ -4582,6 +4588,7 @@ function BuilderPageEditor({
     const inheritProjectStyles = options?.inheritProjectStyles === true;
     const shell = sectionStyleFromBlock(block, pageDefaults);
     const blockSettings = isRecord6(block.settings) ? block.settings : {};
+    const blockAdvanced = isRecord6(blockSettings.advanced) ? blockSettings.advanced : {};
     const blockTypography = isRecord6(blockSettings.typography) ? blockSettings.typography : {};
     const blockTheme = isRecord6(blockSettings.theme) ? blockSettings.theme : {};
     const heroBackgroundColor = normalizeText2(block.backgroundColor).trim();
@@ -4599,16 +4606,24 @@ function BuilderPageEditor({
     const headingAlign = blockTypography.headingAlign === "center" || blockTypography.headingAlign === "justify" || blockTypography.headingAlign === "right" ? blockTypography.headingAlign : "left";
     const headingColor = getThemeColorOverride(blockTheme, "headingText") || getThemeColorOverride(pageDefaults.themePage, "headingText") || getThemeColorOverride(siteThemeTokens, "headingText") || heroTextColor || resolvedThemeTokens.colors.headingText;
     const bodyColor = getThemeColorOverride(blockTheme, "bodyText") || getThemeColorOverride(pageDefaults.themePage, "bodyText") || getThemeColorOverride(siteThemeTokens, "bodyText") || heroTextColor || resolvedThemeTokens.colors.bodyText;
-    return /* @__PURE__ */ jsx13("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx13("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx13(
+    const customClassName = normalizeCustomClassName(blockAdvanced.customClassName ?? block.customClassName);
+    const hideOnMobile = Boolean(blockAdvanced.hideOnMobile ?? block.hideOnMobile);
+    const sectionClassName = [
+      className,
+      shell.sectionClass,
+      customClassName,
+      hideOnMobile ? "orion-builder-hide-mobile" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx13("section", { className: sectionClassName, style: shell.sectionStyle, children: /* @__PURE__ */ jsx13("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx13(
       "div",
       {
         className: shell.contentClass,
         style: {
           ...shell.contentStyle,
+          "--orion-builder-heading-align": headingAlign,
+          "--orion-builder-body-align": bodyAlign,
+          "--orion-builder-actions-align": bodyAlign === "center" ? "center" : bodyAlign === "right" ? "flex-end" : "flex-start",
           ...inheritProjectStyles ? {} : {
-            "--orion-builder-heading-align": headingAlign,
-            "--orion-builder-body-align": bodyAlign,
-            "--orion-builder-actions-align": bodyAlign === "center" ? "center" : bodyAlign === "right" ? "flex-end" : "flex-start",
             "--orion-builder-heading-color": headingColor,
             color: bodyColor,
             ...typographyStyle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.21",
+  "version": "0.6.0-beta.23",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",