@techrox/page-studio 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 techrox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+# @techrox/page-studio
+
+The editor shell for Page Studio — a drop-in `<PageStudio />` component that gives you a visual page builder backed by [Puck](https://puckeditor.com).
+
+```bash
+pnpm add @techrox/page-studio @techrox/page-studio-blocks
+pnpm add @puckeditor/core antd @ant-design/icons   # peers
+```
+
+## Usage
+
+```jsx
+'use client';
+
+import { PageStudio } from '@techrox/page-studio';
+import '@techrox/page-studio/styles.css';
+import '@techrox/page-studio-blocks/styles.css';
+
+export default function BuilderRoute({ pageKey, initialData }) {
+  return (
+    <PageStudio
+      pageKey={pageKey}
+      initialData={initialData}
+      pageTitle="About us"
+      adapter={{
+        savePage: async (key, data) => api.savePage(key, data),
+        loadPage: async (key) => api.loadPage(key),       // optional if initialData is provided
+        onCreatePage: () => router.push('/admin/pages/new'),  // optional — shows "New page" button
+      }}
+      branding={{
+        name: 'Acme CMS',
+        logo: <SvgLogo />,
+        primaryColor: '#0F766E',
+      }}
+      studio={{ Link, services, site, submitLead, track }}
+      account={{ name: 'Jane', email: 'jane@acme.com' }}
+      onSignOut={() => signOut()}
+      homeHref="/admin/pages"
+      livePath="/about"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Notes |
+|---|---|---|
+| `pageKey` | `string` | **Required.** Logical key for the page; passed to adapter functions. |
+| `initialData` | `PuckData` | Optional. If supplied, `loadPage` is skipped — best for SSR. |
+| `pageTitle` | `string` | Human-readable label shown in the top bar crumb. |
+| `adapter` | `{ loadPage?, savePage?, onCreatePage? }` | Async functions the editor calls. `savePage` is required for publish. If `onCreatePage` is set, a "New page" button appears in the top bar. |
+| `studio` | `StudioValue` | Forwarded to `<PageStudioProvider>` so blocks see `Link`, `services`, `site`, `submitLead`, `subscribeNewsletter`, `track`. See `@techrox/page-studio-blocks`. |
+| `branding` | `{ name?, logo?, primaryColor?, accentColor?, inkColor? }` | Drives the top-bar identity + CSS variables (`--psd-primary`, `--psd-accent`, `--psd-ink`). |
+| `header` | `ReactNode \| (props) => ReactNode` | Fully replace the default top bar. If a function, receives `{ pageKey, pageTitle, account, livePath, savedAt, pending, onPublish, onSignOut, onCreatePage, branding, extraActions, LinkComponent }`. |
+| `headerActions` | `ReactNode` | Extra buttons appended to the default top bar (between View live + Publish). |
+| `account` | `{ name, email }` | If set, an avatar/dropdown appears at the top right. |
+| `onSignOut` | `() => void` | Optional sign-out handler for the account dropdown. |
+| `homeHref` | `string` | If set, the brand mark + "Admin home" menu entry link here. |
+| `livePath` | `string` | If set, a "View live" button opens this path in a new tab. |
+| `config` | `PuckConfig` | Override the Puck config (use `createPuckConfig` from blocks). |
+| `overrides` | `PuckOverrides` | Override Puck overrides (defaults to the block-card drawer item). |
+| `sidebarLabels` | `{ blocks?, layers? }` | Labels for the injected sidebar tabs. Default: "Blocks" / "Layers". |
+| `LinkComponent` | `Component` | Component used for top-bar links (defaults to `<a>`). Pass `next/link` or React Router's `Link` for client-side navigation. |
+
+## What the editor renders
+
+The default top bar shows:
+
+- Brand mark + name on the left (links to `homeHref` if set)
+- Page title crumb in the centre
+- Right side: optional `headerActions`, optional "New page" (if `onCreatePage` set), optional "View live" (if `livePath` set), the **Publish** button, optional account avatar
+
+The sidebar is Puck's, enhanced with:
+
+- A **Blocks / Layers** tab bar at the top
+- A count badge on each component category header
+
+These enhancements live in `BuilderEnhancements.jsx` and are pure post-mount DOM mutations against Puck's emitted classnames — kept resilient to minor Puck version changes by tagging sections via content rather than DOM order.
+
+## Adapter contract
+
+```ts
+type Adapter = {
+  loadPage?:    (pageKey: string) => Promise<PuckData>;
+  savePage?:    (pageKey: string, data: PuckData) => Promise<void>;
+  onCreatePage?: () => void;
+};
+```
+
+- The editor **does not** know how you persist data. JWT, session cookies, signed URLs, anything — `savePage` is your line of integration.
+- Both `loadPage` and `savePage` should throw on failure. The editor turns errors into AntD message toasts.
+- `onCreatePage` is a *callback*, not an adapter function — typically just `router.push('/new')`. The button stays hidden unless the prop is set.
+
+## Customising the top bar
+
+For small additions, use `headerActions` to slot extra buttons next to Publish.
+
+For full control, pass `header` as a render function:
+
+```jsx
+<PageStudio
+  header={({ onPublish, pending, pageTitle }) => (
+    <MyCustomBar title={pageTitle} onPublish={onPublish} saving={pending} />
+  )}
+  // ...
+/>
+```
+
+Your function receives all the same props the default top bar uses, so you can pick and choose what to render.
+
+## Required host CSS
+
+The editor ships:
+
+- `@techrox/page-studio/styles.css` — editor chrome (top bar, sidebar tabs, loading state)
+- `@techrox/page-studio-blocks/styles.css` — block-card picker UI + reveal animations
+
+Block typography classes (`.tps-h1`, `.tps-section`, `.tps-container`, `.tps-lede`, etc.) are **not** in the package — they live in your host stylesheet. The blocks reference these class names but expect the host to define them. See `@techrox/page-studio-blocks` README for the full list.
+
+## License
+
+MIT.

package/dist/index.cjs

@@ -0,0 +1,548 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  BuilderEnhancements: () => BuilderEnhancements,
+  BuilderTopBar: () => BuilderTopBar,
+  PageStudio: () => PageStudio,
+  PageStudioProvider: () => import_page_studio_blocks2.PageStudioProvider,
+  createPuckConfig: () => import_page_studio_blocks2.createPuckConfig,
+  defaultBlocks: () => import_page_studio_blocks2.defaultBlocks,
+  defaultCategories: () => import_page_studio_blocks2.defaultCategories,
+  defaultOverrides: () => import_page_studio_blocks2.defaultOverrides,
+  emptyPuckData: () => import_page_studio_blocks2.emptyPuckData,
+  useStudio: () => import_page_studio_blocks2.useStudio
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PageStudio.jsx
+var import_react2 = require("react");
+var import_core = require("@puckeditor/core");
+var import_antd2 = require("antd");
+var import_page_studio_blocks = require("@techrox/page-studio-blocks");
+
+// src/BuilderEnhancements.jsx
+var import_react = require("react");
+var STORAGE_KEY = "psd.builderTab";
+function BuilderEnhancements({
+  blocksLabel = "Blocks",
+  layersLabel = "Layers",
+  searchPlaceholder = "Search blocks"
+} = {}) {
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    let observer = null;
+    let query = "";
+    const matchesQuery = (card, q) => {
+      if (!q) return true;
+      const name = (card.querySelector(".tps-block-card__name")?.textContent || "").toLowerCase();
+      const desc = (card.querySelector(".tps-block-card__desc")?.textContent || "").toLowerCase();
+      return name.includes(q) || desc.includes(q);
+    };
+    const setAttrIfChanged = (el, name, value) => {
+      const current = el.getAttribute(name);
+      if (value == null) {
+        if (current !== null) el.removeAttribute(name);
+      } else if (current !== value) {
+        el.setAttribute(name, value);
+      }
+    };
+    const updateCounts = (sidebar) => {
+      const headers = sidebar.querySelectorAll('[class*="_ComponentList-title_"]');
+      headers.forEach((header) => {
+        const parent = header.closest('[class*="_ComponentList_"]');
+        if (!parent) return;
+        const list = parent.querySelector('[class*="_ComponentList-content_"]');
+        if (!list) return;
+        const cards = list.querySelectorAll(".tps-block-card");
+        const visible = Array.from(cards).filter(
+          (c) => c.getAttribute("data-psd-hidden") !== "true"
+        ).length;
+        const count = String(visible);
+        let badge = header.querySelector(".psd-cat-count");
+        if (!badge) {
+          badge = document.createElement("span");
+          badge.className = "psd-cat-count";
+          badge.textContent = count;
+          const chevron = header.querySelector('[class*="_ComponentList-titleIcon_"]');
+          if (chevron) {
+            header.insertBefore(badge, chevron);
+          } else {
+            header.appendChild(badge);
+          }
+        } else if (badge.textContent !== count) {
+          badge.textContent = count;
+        }
+      });
+    };
+    const applyFilter = (sidebar) => {
+      const q = query.trim().toLowerCase();
+      const cards = sidebar.querySelectorAll(".tps-block-card");
+      cards.forEach((card) => {
+        const hidden = !matchesQuery(card, q);
+        setAttrIfChanged(card, "data-psd-hidden", hidden ? "true" : null);
+      });
+      const drawers = sidebar.querySelectorAll("[data-puck-drawer]");
+      drawers.forEach((drawer) => {
+        Array.from(drawer.children).forEach((cell) => {
+          const card = cell.querySelector(".tps-block-card");
+          if (!card) {
+            setAttrIfChanged(cell, "data-psd-cell-hidden", null);
+            return;
+          }
+          const hidden = !matchesQuery(card, q);
+          setAttrIfChanged(cell, "data-psd-cell-hidden", hidden ? "true" : null);
+        });
+      });
+      const groups = sidebar.querySelectorAll('[class*="_ComponentList_"]');
+      groups.forEach((g) => {
+        const items = g.querySelectorAll(".tps-block-card");
+        if (!items.length) {
+          setAttrIfChanged(g, "data-psd-empty", null);
+          return;
+        }
+        const allHidden = Array.from(items).every(
+          (c) => c.getAttribute("data-psd-hidden") === "true"
+        );
+        setAttrIfChanged(g, "data-psd-empty", q && allHidden ? "true" : null);
+      });
+      updateCounts(sidebar);
+    };
+    const apply = () => {
+      const sidebar = document.querySelector('[class*="_Sidebar--left"]');
+      if (!sidebar) return;
+      const sections = sidebar.querySelectorAll('[class*="_SidebarSection_"]');
+      if (sections.length < 2) return;
+      sections.forEach((s) => {
+        const isComponents = !!s.querySelector('[class*="_ComponentList_"]');
+        const want = isComponents ? "components" : "outline";
+        if (s.getAttribute("data-psd-section") !== want) {
+          s.setAttribute("data-psd-section", want);
+        }
+      });
+      sections.forEach((s) => {
+        const title = s.querySelector('[class*="_SidebarSection-title_"]');
+        if (title && !title.hasAttribute("data-psd-hidden-title")) {
+          title.setAttribute("data-psd-hidden-title", "true");
+        }
+      });
+      let tabs = sidebar.querySelector(".psd-sidebar-tabs");
+      if (!tabs) {
+        tabs = document.createElement("div");
+        tabs.className = "psd-sidebar-tabs";
+        tabs.innerHTML = `
+          <button type="button" class="psd-sidebar-tab" data-tab="components">${blocksLabel}</button>
+          <button type="button" class="psd-sidebar-tab" data-tab="outline">${layersLabel}</button>
+        `;
+        sidebar.insertBefore(tabs, sidebar.firstChild);
+        const setActive = (which) => {
+          if (sidebar.getAttribute("data-psd-active-tab") === which) return;
+          sidebar.setAttribute("data-psd-active-tab", which);
+          try {
+            sessionStorage.setItem(STORAGE_KEY, which);
+          } catch {
+          }
+          tabs.querySelectorAll("button").forEach((b) => {
+            const active = b.dataset.tab === which;
+            if (b.classList.contains("is-active") !== active) {
+              b.classList.toggle("is-active", active);
+            }
+          });
+        };
+        tabs.addEventListener("click", (e) => {
+          const btn = e.target.closest("button[data-tab]");
+          if (btn) setActive(btn.dataset.tab);
+        });
+        let initial = "components";
+        try {
+          initial = sessionStorage.getItem(STORAGE_KEY) || "components";
+        } catch {
+        }
+        setActive(initial);
+      }
+      let search = sidebar.querySelector(".psd-sidebar-search");
+      if (!search) {
+        search = document.createElement("div");
+        search.className = "psd-sidebar-search";
+        const input = document.createElement("input");
+        input.type = "search";
+        input.className = "psd-sidebar-search__input";
+        input.placeholder = searchPlaceholder;
+        input.setAttribute("aria-label", searchPlaceholder);
+        search.appendChild(input);
+        if (tabs.nextSibling) sidebar.insertBefore(search, tabs.nextSibling);
+        else sidebar.appendChild(search);
+        input.addEventListener("input", () => {
+          query = input.value || "";
+          applyFilter(sidebar);
+        });
+      }
+      const searchInput = search.querySelector("input");
+      if (searchInput && searchInput.value !== query) searchInput.value = query;
+      applyFilter(sidebar);
+    };
+    const safeApply = () => {
+      if (observer) observer.disconnect();
+      try {
+        apply();
+      } catch {
+      }
+      if (observer) observer.observe(document.body, { childList: true, subtree: true });
+    };
+    safeApply();
+    let queued = false;
+    observer = new MutationObserver(() => {
+      if (queued) return;
+      queued = true;
+      requestAnimationFrame(() => {
+        queued = false;
+        safeApply();
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      if (observer) observer.disconnect();
+    };
+  }, [blocksLabel, layersLabel, searchPlaceholder]);
+  return null;
+}
+
+// src/BuilderTopBar.jsx
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DefaultLogo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 20, height: 20, viewBox: "0 0 64 64", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "64", height: "64", rx: "14", fill: "currentColor" }) });
+}
+function BuilderTopBar({
+  pageKey,
+  pageTitle,
+  account,
+  livePath,
+  savedAt,
+  pending,
+  onPublish,
+  onSignOut,
+  onCreatePage,
+  homeHref,
+  branding = {},
+  extraActions,
+  LinkComponent = "a"
+}) {
+  const brand = {
+    name: "Page Studio",
+    logo: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultLogo, {}),
+    primaryColor: "#0F766E",
+    ...branding
+  };
+  const Link = LinkComponent;
+  const accountMenu = account ? {
+    items: [
+      {
+        key: "who",
+        disabled: true,
+        label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 0", minWidth: 200 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13, fontWeight: 600, color: "#0f172a" }, children: account.name }),
+          account.email && account.email !== account.name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: "#94a3b8", marginTop: 2 }, children: account.email })
+        ] })
+      },
+      { type: "divider" },
+      homeHref && {
+        key: "home",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.HomeOutlined, {}),
+        label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { href: homeHref, children: "Admin home" })
+      },
+      onSignOut && {
+        key: "signout",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LogoutOutlined, {}),
+        label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSignOut,
+            style: { all: "unset", cursor: "pointer", width: "100%", display: "block" },
+            children: "Sign out"
+          }
+        )
+      }
+    ].filter(Boolean)
+  } : null;
+  const brandTheme = {
+    algorithm: import_antd.theme.defaultAlgorithm,
+    token: {
+      colorPrimary: brand.primaryColor,
+      colorInfo: brand.primaryColor
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme: brandTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "psd-builder-bar", style: { color: "#fff" }, children: [
+    homeHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Link,
+      {
+        href: homeHref,
+        className: "psd-builder-bar__brand",
+        title: "Back to admin",
+        style: { color: "inherit" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, { style: { fontSize: 12 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: { color: brand.primaryColor, display: "inline-flex" }, children: brand.logo }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: brand.name })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "psd-builder-bar__brand", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, style: { color: brand.primaryColor, display: "inline-flex" }, children: brand.logo }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: brand.name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "psd-builder-bar__crumbs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "psd-builder-bar__current", children: pageTitle || pageKey }),
+      pageKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: 8, opacity: 0.5, fontSize: 11 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 10 }, children: pageKey }) }),
+      savedAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { marginLeft: 12, fontSize: 11, opacity: 0.55 }, children: [
+        "\xB7 Saved ",
+        new Date(savedAt).toLocaleTimeString()
+      ] }),
+      pending && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: 12, fontSize: 11, opacity: 0.55 }, children: "\xB7 Saving\u2026" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 6, className: "psd-builder-bar__actions", children: [
+      extraActions,
+      onCreatePage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusOutlined, {}), onClick: onCreatePage, children: "New page" }),
+      livePath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { href: livePath, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { size: "small", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EyeOutlined, {}), children: "View live" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Button,
+        {
+          type: "primary",
+          size: "small",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RocketOutlined, {}),
+          onClick: onPublish,
+          loading: pending,
+          children: "Publish"
+        }
+      ),
+      account && accountMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown, { menu: accountMenu, placement: "bottomRight", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "text", size: "small", style: { color: "#fff" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Avatar,
+        {
+          size: 22,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, {}),
+          style: { background: brand.primaryColor }
+        }
+      ) }) })
+    ] })
+  ] }) });
+}
+
+// src/PageStudio.jsx
+var import_puck = require("@puckeditor/core/puck.css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PSD_LEGACY_SIDEBAR = (0, import_core.legacySideBarPlugin)();
+var HeaderPropsContext = (0, import_react2.createContext)(null);
+function StableHeaderOverride() {
+  const getPuck = (0, import_core.useGetPuck)();
+  const live = (0, import_react2.useContext)(HeaderPropsContext);
+  if (!live) return null;
+  const props = {
+    pageKey: live.pageKey,
+    pageTitle: live.pageTitle,
+    account: live.account,
+    livePath: live.livePath,
+    homeHref: live.homeHref,
+    savedAt: live.savedAt,
+    pending: live.pending,
+    onPublish: () => live.handlePublish(getPuck().appState.data),
+    onSignOut: live.onSignOut,
+    onCreatePage: live.onCreatePage,
+    branding: live.branding,
+    extraActions: live.headerActions,
+    LinkComponent: live.LinkComponent
+  };
+  if (typeof live.header === "function") return live.header(props);
+  if (live.header) return live.header;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderTopBar, { ...props });
+}
+var NO_OP_ACTIONS = () => null;
+function buildStableOverrides(hostOverrides) {
+  return { ...hostOverrides, header: StableHeaderOverride, headerActions: NO_OP_ACTIONS };
+}
+function setCssVars(branding) {
+  if (typeof document === "undefined" || !branding) return;
+  const root = document.documentElement.style;
+  if (branding.primaryColor) root.setProperty("--tps-primary", branding.primaryColor);
+  if (branding.accentColor) root.setProperty("--tps-accent", branding.accentColor);
+  if (branding.inkColor) root.setProperty("--tps-ink", branding.inkColor);
+  const lines = [];
+  if (branding.primaryColor) lines.push(`--tps-primary: ${branding.primaryColor};`);
+  if (branding.accentColor) lines.push(`--tps-accent: ${branding.accentColor};`);
+  if (branding.inkColor) lines.push(`--tps-ink: ${branding.inkColor};`);
+  if (!lines.length) return;
+  let tag = document.getElementById("tps-brand-vars");
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = "tps-brand-vars";
+    document.head.appendChild(tag);
+  }
+  const next = `:root { ${lines.join(" ")} }`;
+  if (tag.textContent !== next) tag.textContent = next;
+}
+function PageStudio({
+  pageKey,
+  initialData,
+  pageTitle,
+  account,
+  livePath,
+  homeHref,
+  branding,
+  studio,
+  adapter = {},
+  config,
+  blockDefaults,
+  overrides = import_page_studio_blocks.defaultOverrides,
+  header,
+  headerActions,
+  onSignOut,
+  sidebarLabels,
+  LinkComponent,
+  // Forwarded to Puck. Defaults to iframe enabled — Puck v0.20 mounts the
+  // @dnd-kit context inside the canvas iframe; with the iframe disabled,
+  // strict-mode double-mount and Vite HMR can leave the canvas with no live
+  // drop targets, so dropped blocks vanish into an empty content array.
+  // Hosts that need the canvas to share the host document (e.g. to inherit
+  // global CSS without copying it across) can pass { enabled: false }.
+  iframe = { enabled: true }
+}) {
+  const { message } = import_antd2.App.useApp();
+  const [pending, startTransition] = (0, import_react2.useTransition)();
+  const [savedAt, setSavedAt] = (0, import_react2.useState)(null);
+  const [resolvedConfig] = (0, import_react2.useState)(
+    () => config || (0, import_page_studio_blocks.createPuckConfig)({ defaults: blockDefaults })
+  );
+  const [data, setData] = (0, import_react2.useState)(
+    () => initialData && Array.isArray(initialData.content) ? (0, import_page_studio_blocks.applyConfigDefaults)((0, import_page_studio_blocks.normalizePuckData)(initialData), resolvedConfig) : null
+  );
+  const [loading, setLoading] = (0, import_react2.useState)(!data && !!adapter.loadPage);
+  setCssVars(branding);
+  (0, import_react2.useEffect)(() => {
+    if (data || !adapter.loadPage) return;
+    let cancelled = false;
+    setLoading(true);
+    adapter.loadPage(pageKey).then((loaded) => {
+      if (cancelled) return;
+      setData(
+        loaded && Array.isArray(loaded.content) ? (0, import_page_studio_blocks.applyConfigDefaults)((0, import_page_studio_blocks.normalizePuckData)(loaded), resolvedConfig) : import_page_studio_blocks.emptyPuckData
+      );
+    }).catch((err) => {
+      if (cancelled) return;
+      message.error(err?.message || "Could not load page.");
+      setData(import_page_studio_blocks.emptyPuckData);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pageKey, adapter, data, message]);
+  const handlePublish = (nextData) => {
+    if (!adapter.savePage) {
+      message.error("No savePage adapter configured.");
+      return;
+    }
+    startTransition(async () => {
+      try {
+        await adapter.savePage(pageKey, nextData);
+        setSavedAt((/* @__PURE__ */ new Date()).toISOString());
+        message.success("Published.");
+      } catch (err) {
+        message.error(err?.message || "Save failed.");
+      }
+    });
+  };
+  const headerLive = (0, import_react2.useMemo)(() => ({
+    pageKey,
+    pageTitle,
+    account,
+    livePath,
+    homeHref,
+    savedAt,
+    pending,
+    handlePublish,
+    onSignOut,
+    onCreatePage: adapter.onCreatePage,
+    branding,
+    headerActions,
+    LinkComponent,
+    header
+  }), [
+    pageKey,
+    pageTitle,
+    account,
+    livePath,
+    homeHref,
+    savedAt,
+    pending,
+    handlePublish,
+    onSignOut,
+    adapter.onCreatePage,
+    branding,
+    headerActions,
+    LinkComponent,
+    header
+  ]);
+  const mergedOverrides = (0, import_react2.useMemo)(
+    () => buildStableOverrides(overrides),
+    [overrides]
+  );
+  if (loading || !data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "psd-builder-page psd-builder-page--loading", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "psd-builder-loading", children: "Loading editor\u2026" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_page_studio_blocks.PageStudioProvider, { value: studio, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeaderPropsContext.Provider, { value: headerLive, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "psd-builder-page", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      BuilderEnhancements,
+      {
+        blocksLabel: sidebarLabels?.blocks,
+        layersLabel: sidebarLabels?.layers,
+        searchPlaceholder: sidebarLabels?.search
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core.Puck,
+      {
+        config: resolvedConfig,
+        data,
+        overrides: mergedOverrides,
+        onPublish: handlePublish,
+        iframe,
+        plugins: [PSD_LEGACY_SIDEBAR]
+      }
+    )
+  ] }) }) });
+}
+
+// src/index.js
+var import_page_studio_blocks2 = require("@techrox/page-studio-blocks");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BuilderEnhancements,
+  BuilderTopBar,
+  PageStudio,
+  PageStudioProvider,
+  createPuckConfig,
+  defaultBlocks,
+  defaultCategories,
+  defaultOverrides,
+  emptyPuckData,
+  useStudio
+});
+//# sourceMappingURL=index.cjs.map