@botlr/next 0.1.0 → 0.3.0

package/dist/index.js

@@ -8,7 +8,11 @@ var BOTLR_ENV = {
   apiUrl: "BOTLR_API_URL",
   apiKey: "BOTLR_API_KEY",
   appId: "BOTLR_APP_ID",
-  pat: "BOTLR_PAT"
+  pat: "BOTLR_PAT",
+  orgSlug: "BOTLR_ORG_SLUG",
+  projectSlug: "BOTLR_PROJECT_SLUG",
+  appInstanceSlug: "BOTLR_APP_INSTANCE_SLUG",
+  environment: "BOTLR_ENVIRONMENT"
 };
 var DEFAULT_API_URL = "http://localhost:8888";
 function env(name) {
@@ -28,6 +32,18 @@ function configFromEnv(overrides = {}) {
     personalToken: overrides.personalToken ?? env(BOTLR_ENV.pat)
   };
 }
+function environmentFromEnv(fallback = "production") {
+  return env(BOTLR_ENV.environment) ?? env("ENVIRONMENT") ?? env("NODE_ENV") ?? fallback;
+}
+function scopeFromEnv(overrides) {
+  return {
+    orgSlug: env(BOTLR_ENV.orgSlug) ?? "",
+    projectSlug: env(BOTLR_ENV.projectSlug) ?? "",
+    appInstanceSlug: env(BOTLR_ENV.appInstanceSlug) ?? "",
+    appInstanceId: env(BOTLR_ENV.appId) ?? "",
+    ...overrides
+  };
+}
 
 // src/locale.ts
 function localeFromAcceptLanguage(header, fallback = "en") {
@@ -48,7 +64,8 @@ async function getBotlrForRoute(params = {}) {
       previewToken: params.previewToken,
       locale,
       preview: params.preview,
-      fetch: params.fetch
+      fetch: params.fetch,
+      retry: params.retry
     })
   );
 }
@@ -57,19 +74,559 @@ function createBotlrFromEnv(overrides = {}) {
   return createBotlrClient(configFromEnv(overrides));
 }
 
+// src/resolve-page.ts
+import { cache as cache2 } from "react";
+var DEFAULT_CONTENT_SECTIONS = { article: "article" };
+async function resolvePage(client, slug, locale, options = {}) {
+  try {
+    const result = await client.resolveUrl(slug, locale);
+    if (result.kind === "404") return { kind: "404" };
+    if (result.kind === "redirect" && result.redirect) {
+      return { kind: "redirect", destination: result.redirect.destination };
+    }
+    if (!result.data) return { kind: "404" };
+    const data = result.data;
+    const layout = data.layout ?? {};
+    const content = data.content ?? {};
+    const contentType = content["type"] ?? data.type ?? null;
+    if (contentType && contentType !== "page") {
+      const sectionType = (options.contentSections ?? DEFAULT_CONTENT_SECTIONS)[contentType];
+      if (sectionType) {
+        const section = {
+          _key: `${sectionType}-${content["id"] ?? data.id}`,
+          mode: "inline",
+          sectionType,
+          props: content,
+          status: "published"
+        };
+        layout["main"] = [section, ...layout["main"] ?? []];
+      } else {
+        console.warn("Unknown content type:", contentType);
+      }
+    }
+    return {
+      kind: "page",
+      pageData: {
+        id: data.id,
+        name: data.name,
+        slug: data.slug || "",
+        full_slug: data.full_slug || "",
+        layout,
+        status: data.status,
+        theme: data.theme,
+        page_template: data.page_template,
+        seo_meta: data.seo_meta,
+        alternate_translations: result.alternate_translations ?? [],
+        breadcrumbs: result.breadcrumbs ?? []
+      }
+    };
+  } catch (error) {
+    return {
+      kind: "error",
+      message: error instanceof Error ? error.message : "Unknown error",
+      cause: error
+    };
+  }
+}
+function createPageResolver(client, options = {}) {
+  return cache2((slug, locale) => resolvePage(client, slug, locale, options));
+}
+
+// src/page-metadata.ts
+function buildPageMetadata(pageData, options = {}) {
+  const seo = pageData.seo_meta || {};
+  const title = seo.title || pageData.name;
+  const alternates = pageData.alternate_translations || [];
+  const siteUrl = options.siteUrl?.replace(/\/+$/, "");
+  const folder = options.folder ? `/${options.folder.replace(/^\/+|\/+$/g, "")}` : "";
+  const metadata = { title };
+  if (seo.description) metadata.description = seo.description;
+  if (seo.keywords) metadata.keywords = seo.keywords;
+  const ogImage = seo.ogImage?.url || seo.ogImage?.filename;
+  const description = seo.ogDescription || seo.description;
+  metadata.openGraph = {
+    title: seo.ogTitle || title,
+    ...description ? { description } : {},
+    ...seo.ogType ? { type: seo.ogType } : {},
+    ...ogImage ? { images: [ogImage] } : {}
+  };
+  if (seo.twitterCard) {
+    metadata.twitter = {
+      card: seo.twitterCard,
+      title: seo.ogTitle || title,
+      ...description ? { description } : {},
+      ...ogImage ? { images: [ogImage] } : {}
+    };
+  }
+  if (seo.noindex !== void 0 || seo.nofollow !== void 0 || seo.robots) {
+    metadata.robots = seo.robots ?? { index: !seo.noindex, follow: !seo.nofollow };
+  }
+  if (seo.canonical) {
+    metadata.alternates = { canonical: seo.canonical };
+  } else if (siteUrl) {
+    const canonical = pageData.full_slug ? `${siteUrl}${folder}/${pageData.full_slug}` : `${siteUrl}${folder}`;
+    metadata.alternates = { canonical };
+  }
+  if (siteUrl && alternates.length > 0) {
+    const languages = {};
+    for (const alt of alternates) {
+      languages[alt.locale] = `${siteUrl}${alt.full_slug}`;
+    }
+    metadata.alternates = { ...metadata.alternates, languages };
+  }
+  return metadata;
+}
+
+// src/render-cms-page.tsx
+import parse from "html-react-parser";
+import {
+  SectionRenderer,
+  filterVisibleNodesRecursive
+} from "@botlr/react";
+
+// src/theme-css.ts
+var COLOR_KEYS = [
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "accent",
+  "accentForeground",
+  "background",
+  "foreground",
+  "muted",
+  "mutedForeground",
+  "border",
+  "input",
+  "ring",
+  "destructive",
+  "destructiveForeground",
+  "success",
+  "successForeground",
+  "warning",
+  "warningForeground",
+  "info",
+  "infoForeground"
+];
+var COMMON_GROUPS = [
+  [["typography", "fontFamily"], "--font", ["heading", "body", "ui", "code", "sans", "serif", "mono"]],
+  [["typography", "fontSize"], "--font-size", ["h1", "h2", "h3", "h4", "h5", "h6", "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl"]],
+  [["typography", "fontWeight"], "--font-weight", ["normal", "medium", "semibold", "bold"]],
+  [["typography", "lineHeight"], "--line-height", ["tight", "normal", "relaxed"]],
+  [["spacing"], "--spacing", ["xs", "sm", "md", "lg", "xl", "2xl"]],
+  [["borderRadius"], "--radius", ["none", "sm", "md", "lg", "xl", "full"]],
+  [["shadows"], "--shadow", ["sm", "md", "lg", "xl"]],
+  [["layout"], "-", ["containerMaxWidth", "sidebarWidth", "headerHeight", "footerHeight"]]
+];
+var kebab = (key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+function colorVars(colors) {
+  if (!colors) return [];
+  const vars = [];
+  for (const key of COLOR_KEYS) {
+    const value = colors[key];
+    if (value) vars.push(`--color-${kebab(key)}: ${value};`);
+  }
+  return vars;
+}
+function pick(settings, path) {
+  let current = settings;
+  for (const segment of path) {
+    current = current?.[segment];
+    if (!current) return void 0;
+  }
+  return current;
+}
+function themeSettingsToCss(settings) {
+  if (!settings) return "";
+  const s = settings;
+  const lightVars = colorVars(s.colors?.light);
+  const darkVars = colorVars(s.colors?.dark);
+  const commonVars = [];
+  for (const [path, prefix, keys] of COMMON_GROUPS) {
+    const group = pick(settings, path);
+    if (!group) continue;
+    for (const key of keys) {
+      const value = group[key];
+      if (value) commonVars.push(`${prefix}-${kebab(key)}: ${value};`);
+    }
+  }
+  const cssBlocks = [];
+  if (commonVars.length > 0) {
+    cssBlocks.push(`:root {
+  ${commonVars.join("\n  ")}
+}`);
+  }
+  if (lightVars.length > 0) {
+    cssBlocks.push(`:root {
+  ${lightVars.join("\n  ")}
+}`);
+  }
+  if (darkVars.length > 0) {
+    cssBlocks.push(`@media (prefers-color-scheme: dark) {
+  :root {
+    ${darkVars.join("\n    ")}
+  }
+}`);
+    cssBlocks.push(`.dark {
+  ${darkVars.join("\n  ")}
+}`);
+  }
+  return cssBlocks.join("\n\n");
+}
+
+// src/render-cms-page.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TEMPLATE = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>__PAGE_TITLE__</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    </style>
+    __THEME_CSS__
+</head>
+<body>
+    <main>
+        __REGION_MAIN__
+    </main>
+</body>
+</html>`;
+function extractBodyContent(html) {
+  const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  return bodyMatch?.[1] ? bodyMatch[1].trim() : html;
+}
+function collectSharedSectionIds(nodes) {
+  const ids = [];
+  for (const node of nodes) {
+    if ("mode" in node && node.mode === "shared" && node.sharedSectionId) {
+      ids.push(node.sharedSectionId);
+    }
+    if ("type" in node && node.type === "grid-container" && Array.isArray(node.columns)) {
+      for (const column of node.columns) {
+        if (Array.isArray(column.sections)) ids.push(...collectSharedSectionIds(column.sections));
+      }
+    }
+  }
+  return ids;
+}
+function prepareTemplate(templateHtml, pageData, templateCss, locale) {
+  let prepared = templateHtml.replace(/\{\{page_title\}\}/g, pageData.name).replace(/\{\{page_lang\}\}/g, locale).replace(/\{\{page_description\}\}/g, "");
+  prepared = prepared.replace(/\{\{\{theme_css\}\}\}/g, templateCss ? `<style>${templateCss}</style>` : "");
+  prepared = prepared.replace(/\{\{\{([A-Z_]+)\}\}\}/g, "__REGION_$1__");
+  prepared = prepared.replace(/\{\{#if\s+([A-Z_]+)\}\}/g, "");
+  prepared = prepared.replace(/\{\{\/if\}\}/g, "");
+  return extractBodyContent(prepared);
+}
+function mergeTemplateLayout(pageData) {
+  const merged = {};
+  const regions = /* @__PURE__ */ new Set([...Object.keys(pageData.layout), ...Object.keys(pageData.page_template?.layout ?? {})]);
+  for (const region of regions) {
+    merged[region] = [...pageData.page_template?.layout?.[region] ?? [], ...pageData.layout[region] ?? []];
+  }
+  return merged;
+}
+var errorBox = (heading, message) => /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+  /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.5rem" }, children: heading }),
+  /* @__PURE__ */ jsx("p", { style: { opacity: 0.7 }, children: message })
+] }) });
+async function renderCmsPage({
+  pageData,
+  scope,
+  componentRegistry,
+  mode = "published",
+  locale = scope.locale,
+  environment = environmentFromEnv(),
+  client,
+  fetchSharedSection,
+  showModeBadge = false,
+  renderError
+}) {
+  let templateHtml;
+  let templateCss = "";
+  if (pageData.page_template?.template_html) {
+    templateHtml = pageData.page_template.template_html;
+    templateCss = pageData.page_template.template_css || "";
+  } else if (pageData.theme?.default_template_html) {
+    templateHtml = pageData.theme.default_template_html;
+    templateCss = pageData.theme.default_template_css || "";
+  } else {
+    templateHtml = DEFAULT_TEMPLATE;
+  }
+  const preparedTemplate = prepareTemplate(templateHtml, pageData, templateCss, locale);
+  const pageScope = {
+    id: pageData.id,
+    kind: "page",
+    name: pageData.name,
+    slug: pageData.slug || "",
+    breadcrumbs: pageData.breadcrumbs || []
+  };
+  const visibilityContext = {
+    pageId: pageData.id,
+    currentPath: "/" + (pageData.slug || ""),
+    locale,
+    environment
+  };
+  const filteredLayout = {};
+  for (const [region, sections] of Object.entries(mergeTemplateLayout(pageData))) {
+    filteredLayout[region] = filterVisibleNodesRecursive(sections, visibilityContext);
+  }
+  const fetchShared = fetchSharedSection ?? (client ? (id) => client.getPageBySlug(id, locale) : void 0);
+  const sharedSectionIds = Object.values(filteredLayout).flatMap(collectSharedSectionIds);
+  const sharedSectionsMap = /* @__PURE__ */ new Map();
+  if (sharedSectionIds.length > 0) {
+    if (!fetchShared) {
+      throw new Error("@botlr/next: renderCmsPage needs `client` or `fetchSharedSection` to render shared sections");
+    }
+    const results = await Promise.all(
+      [...new Set(sharedSectionIds)].map(async (id) => {
+        try {
+          const data = await fetchShared(id);
+          const main = data?.layout?.["main"];
+          if (Array.isArray(main) && main.length > 0) return { id, sections: main };
+        } catch (err) {
+          console.error(`Error fetching shared section ${id}:`, err);
+        }
+        return null;
+      })
+    );
+    for (const result of results) {
+      if (result) sharedSectionsMap.set(result.id, result.sections);
+    }
+  }
+  const parseOptions = {
+    replace: (domNode) => {
+      if (!("data" in domNode) || typeof domNode.data !== "string") return;
+      const regionMatch = domNode.data.match(/__REGION_([A-Z_]+)__/);
+      if (!regionMatch?.[1]) return;
+      const regionKey = regionMatch[1].toLowerCase();
+      const regionSections = filteredLayout[regionKey] ?? [];
+      if (regionSections.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+      const templateSectionKeys = new Set(
+        (pageData.page_template?.layout?.[regionKey] ?? []).map((section) => section._key)
+      );
+      return /* @__PURE__ */ jsx(Fragment, { children: regionSections.map((section) => /* @__PURE__ */ jsx(
+        SectionRenderer,
+        {
+          section,
+          componentRegistry,
+          mode,
+          sharedSectionsData: sharedSectionsMap,
+          scope,
+          pageScope,
+          fromTemplate: templateSectionKeys.has(section._key)
+        },
+        section._key
+      )) });
+    }
+  };
+  const themeSettingsCss = themeSettingsToCss(pageData.theme?.settings);
+  try {
+    const renderedContent = parse(preparedTemplate, parseOptions);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      themeSettingsCss && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: themeSettingsCss } }),
+      templateCss && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: templateCss } }),
+      renderedContent,
+      showModeBadge && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: "1rem",
+            right: "1rem",
+            padding: "0.5rem 1rem",
+            borderRadius: "0.5rem",
+            background: "#111",
+            color: "#fff",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+            zIndex: 50
+          },
+          children: mode === "draft" ? "Draft preview" : "Published preview"
+        }
+      )
+    ] });
+  } catch (error) {
+    console.error("Error rendering template:", error);
+    if (renderError) return /* @__PURE__ */ jsx(Fragment, { children: renderError(error) });
+    return errorBox("Template Error", error instanceof Error ? error.message : "Failed to render template");
+  }
+}
+
+// src/static-text-file.ts
+import { filterVisibleNodesRecursive as filterVisibleNodesRecursive2 } from "@botlr/react";
+function collectSections(nodes, sectionType) {
+  const result = [];
+  for (const node of nodes) {
+    if ("mode" in node && node.mode === "inline" && node.sectionType === sectionType) {
+      result.push(node);
+    } else if ("type" in node && node.type === "grid-container" && Array.isArray(node.columns)) {
+      for (const column of node.columns) {
+        result.push(...collectSections(column.sections ?? [], sectionType));
+      }
+    }
+  }
+  return result;
+}
+var TEXT_PLAIN = { "Content-Type": "text/plain; charset=utf-8" };
+async function serveStaticTextFile(client, slug, defaultContent, options = {}) {
+  const locale = options.locale ?? client.config.locale ?? "en";
+  const environment = options.environment ?? environmentFromEnv();
+  const sectionType = options.sectionType ?? "text";
+  const propKeys = options.propKeys ?? ["content", "body", "text"];
+  try {
+    const page = await client.getPageBySlug(slug, locale);
+    if (page?.layout) {
+      const visibilityContext = { locale, environment };
+      const sections = [];
+      for (const region of Object.values(page.layout)) {
+        if (Array.isArray(region)) {
+          sections.push(...collectSections(filterVisibleNodesRecursive2(region, visibilityContext), sectionType));
+        }
+      }
+      const content = sections.map((section) => {
+        const props = "props" in section ? section.props ?? {} : {};
+        const value = propKeys.map((key) => props[key]).find((v) => typeof v === "string" && v);
+        return typeof value === "string" ? value : "";
+      }).filter(Boolean).join("\n\n");
+      if (content) return new Response(content, { headers: TEXT_PLAIN });
+    }
+  } catch {
+  }
+  return new Response(defaultContent, { headers: TEXT_PLAIN });
+}
+function defaultRobotsContent(environment = environmentFromEnv()) {
+  return environment === "production" ? "User-agent: *\nAllow: /\n" : "User-agent: *\nDisallow: /\n";
+}
+
+// src/locale-page.tsx
+import { notFound, permanentRedirect, redirect } from "next/navigation";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+async function pageSlugFromParams(params) {
+  const slug = (await params).slug ?? [];
+  return slug.length > 0 ? slug.join("/") : "index";
+}
+function createLocalePage(config) {
+  const { locale, client, componentRegistry } = config;
+  const folder = config.folder ? `/${config.folder.replace(/^\/+|\/+$/g, "")}` : "";
+  const scope = scopeFromEnv({ locale, localePrefix: folder.replace(/^\//, ""), ...config.scope });
+  const resolvePage2 = createPageResolver(client, config.resolveOptions);
+  const sendRedirect = config.redirect === "temporary" ? redirect : permanentRedirect;
+  async function generateStaticParams() {
+    const response = await client.getPageSlugList({ locale, limit: config.staticParamsLimit ?? 1e3 });
+    return (response.data ?? []).map((path) => ({ slug: path ? path.split("/") : [] }));
+  }
+  async function generateMetadata({ params }) {
+    const resolved = await resolvePage2(await pageSlugFromParams(params), locale);
+    if (resolved.kind !== "page") return {};
+    return buildPageMetadata(resolved.pageData, { siteUrl: config.siteUrl, folder });
+  }
+  async function Page({ params }) {
+    const slug = await pageSlugFromParams(params);
+    const resolved = await resolvePage2(slug, locale);
+    if (resolved.kind === "error") {
+      const mode = config.resolveErrors ?? (process.env.NODE_ENV === "development" ? "render" : "throw");
+      if (mode === "throw") {
+        throw new Error(`@botlr/next: could not resolve "${slug}" (${locale}): ${resolved.message}`, {
+          cause: resolved.cause
+        });
+      }
+      if (config.renderError) return /* @__PURE__ */ jsx2(Fragment2, { children: config.renderError(resolved.message) });
+      return errorBox("Error Loading Page", resolved.message);
+    }
+    if (resolved.kind === "404") notFound();
+    if (resolved.kind === "redirect") sendRedirect(`${folder}${resolved.destination}`);
+    const { pageData } = resolved;
+    if (pageData.status !== "published") notFound();
+    return renderCmsPage({
+      pageData,
+      scope,
+      componentRegistry,
+      mode: "published",
+      locale,
+      environment: config.environment ?? environmentFromEnv(),
+      client
+    });
+  }
+  return { generateStaticParams, generateMetadata, Page, resolvePage: resolvePage2, scope };
+}
+function createLocaleAliasPage(targetFolder) {
+  return async function AliasPage({ params }) {
+    const slug = (await params).slug ?? [];
+    permanentRedirect(`${targetFolder}/${slug.join("/")}`);
+  };
+}
+
+// src/rate-limit.ts
+var store = /* @__PURE__ */ new Map();
+function rateLimit(key, config) {
+  const now = Date.now();
+  const windowMs = config.window * 1e3;
+  let entry = store.get(key);
+  if (!entry || now >= entry.resetAt) {
+    entry = { count: 1, resetAt: now + windowMs };
+    store.set(key, entry);
+    return { allowed: true, remaining: config.limit - 1, resetAt: entry.resetAt };
+  }
+  entry.count++;
+  const allowed = entry.count <= config.limit;
+  return {
+    allowed,
+    remaining: Math.max(0, config.limit - entry.count),
+    resetAt: entry.resetAt
+  };
+}
+function getClientIp(request) {
+  return request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() || request.headers.get("x-real-ip") || "unknown";
+}
+
 // src/index.ts
 export * from "@botlr/react";
-import { BotlrError, BotlrConflictError, createBotlrClient as createBotlrClient2 } from "@botlr/sdk";
+import {
+  BotlrError,
+  BotlrConflictError,
+  createBotlrClient as createBotlrClient2,
+  getAssetUrl,
+  createAssetUrl,
+  getAssetId,
+  getAssetFilename,
+  isAssetData
+} from "@botlr/sdk";
 export {
   BOTLR_ENV,
   BotlrConflictError,
   BotlrError,
   DEFAULT_API_URL,
+  buildPageMetadata,
+  collectSharedSectionIds,
   configFromEnv,
+  createAssetUrl,
   createBotlrClient2 as createBotlrClient,
   createBotlrFromEnv,
+  createLocaleAliasPage,
+  createLocalePage,
+  createPageResolver,
+  defaultRobotsContent,
+  environmentFromEnv,
+  getAssetFilename,
+  getAssetId,
+  getAssetUrl,
   getBotlrForRoute,
   getCachedBotlr,
-  localeFromAcceptLanguage
+  getClientIp,
+  isAssetData,
+  localeFromAcceptLanguage,
+  mergeTemplateLayout,
+  pageSlugFromParams,
+  prepareTemplate,
+  rateLimit,
+  renderCmsPage,
+  resolvePage,
+  scopeFromEnv,
+  serveStaticTextFile,
+  themeSettingsToCss
 };
 //# sourceMappingURL=index.js.map