npm - @sprintup-cms/sdk - Versions diffs - 1.8.57 → 1.8.62 - Mend

@sprintup-cms/sdk 1.8.57 → 1.8.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -17,7 +17,7 @@ Official SDK for **SprintUp Forge CMS** — typed API client, Next.js App Router
 4. [Verify your connection](#verify-your-connection)
 5. [Adding new pages](#adding-new-pages)
 6. [Custom page layouts](#custom-page-layouts)
-7. [Navigation and footer](#navigation-and-footer)
+7. [Navigation and footer](#navigation-and-footer) — automatically rendered by the SDK via CMS Globals
 8. [Extending with custom blocks](#extending-with-custom-blocks)
 9. [ISR and caching strategy](#isr-and-caching-strategy)
 10. [API reference](#api-reference)
@@ -288,48 +288,60 @@ export default async function Page({ params }: { params: Promise<{ slug: string[
 ## Navigation and footer
-Pull live nav and footer data from the CMS site structure:
+> **As of v1.8.62**, navigation and footer are managed as **CMS Globals** — configured entirely in the CMS Admin under **Globals → Navigation** and **Globals → Footer**. You do not need to write any header or footer code. The SDK renders them automatically.
-```tsx
-// components/layout/header.tsx
-import { cmsClient } from '@sprintup-cms/sdk'
-import type { CMSMenuItem } from '@sprintup-cms/sdk'
-import Link from 'next/link'
+### How it works
-export async function Header() {
-  const structure = await cmsClient.getSiteStructure()
-  const navItems: CMSMenuItem[] = structure?.menus.header ?? []
+`CMSCatchAllPage` (the SDK's catch-all page handler) automatically fetches the active globals for your app and renders:
+- `<CMSHeader>` — a sticky top nav bar with your logo, nav links, and CTA buttons
+- `<CMSFooter>` — a configurable section grid with optional footer bottom bar
-  return (
-    <header className="border-b">
-      <nav className="max-w-5xl mx-auto px-6 py-4 flex gap-6">
-        {navItems.map(item => (
-          <Link key={item.id} href={item.href} target={item.openInNewTab ? '_blank' : undefined}>
-            {item.label}
-          </Link>
-        ))}
-      </nav>
-    </header>
-  )
-}
-```
+**You do not need to create `components/layout/header.tsx` or `components/layout/footer.tsx`.**
+### Configuring navigation in the CMS
+Go to **CMS Admin → Globals → Navigation** and add items:
+| Item type | Rendered as | Options |
+|---|---|---|
+| `link` | Nav link in the centre area | Label, URL, open in new tab |
+| `button` | CTA button, right-aligned | Label, URL, variant: `primary` / `outline` / `ghost` |
+| `dropdown` | Link with children | Label, URL, child links |
+### Configuring footer in the CMS
+Go to **CMS Admin → Globals → Footer** and add sections in any order:
+| Section type | Description |
+|---|---|
+| `brand` | Logo image and tagline |
+| `links` | A column of links with a custom title — add as many as you need |
+| `contact` | Email, phone, address with a custom section title |
+| `social` | Facebook, X, Instagram, LinkedIn, YouTube icons |
+Optionally enable **Footer Bottom** (a full-width legal bar):
+- Copyright text
+- Legal links (Privacy Policy, Terms, etc.)
+### Links: internal vs external
+When adding links inside footer sections, the link input auto-searches your published CMS pages as you type. Select a page to create an internal link, or type a full URL (`https://...`) for an external link. External links open in a new tab automatically.
+### Custom layout: accessing globals manually
+If you are building a custom page outside `CMSCatchAllPage`, you can access globals directly:
 ```tsx
-// app/layout.tsx
-import { Header } from '@/components/layout/header'
+// Only needed for custom layouts — CMSCatchAllPage handles this automatically
+import { cmsClient } from '@sprintup-cms/sdk'
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <Header />
-        {children}
-      </body>
-    </html>
-  )
-}
+const globals = await cmsClient.getGlobals()
+const nav    = globals?.nav     // CMSPage with sectionData.items[]
+const footer = globals?.footer  // CMSPage with sectionData.sections[]
 ```
+> **Deprecated:** `cmsClient.getSiteStructure()` and `menus.header` / `menus.footer` are the old approach and should not be used for navigation or footer.
 ---
 ## Extending with custom blocks
@@ -370,9 +382,10 @@ The `custom` prop is a `Record<blockType, (block: CMSBlock) => React.ReactNode>`
 | Individual page | 60 seconds | `cms-page-{slug}` |
 | All pages list | 60 seconds | `cms-pages-{appId}` |
 | Page type schema | 3600 seconds | `cms-page-type-{id}` |
-| Site structure (nav/footer) | 300 seconds | `site-structure-{appId}` |
+| Globals (nav + footer) | 60 seconds | `cms-globals-{appId}` |
 | Sitemap | 3600 seconds | — |
 | Status check | No cache | — |
+| ~~Site structure~~ | ~~300 seconds~~ | Deprecated — use Globals |
 The revalidation webhook calls `revalidateTag('cms-page-{slug}')` and `revalidatePath('/{slug}')` when the CMS publishes a page, giving you **instant updates** without a full rebuild.
@@ -390,11 +403,12 @@ The revalidation webhook calls `revalidateTag('cms-page-{slug}')` and `revalidat
 | `getEvents()` | Shorthand for `getPages({ type: 'event-page' })` |
 | `getAnnouncements()` | Shorthand for `getPages({ type: 'announcement-page' })` |
 | `getPageType(id)` | Fetch a page type schema by ID |
-| `getSiteStructure()` | Fetch nav, footer, and page tree |
+| `getGlobals()` | Fetch navigation and footer globals — returns `{ nav, footer }`. CMSCatchAllPage calls this automatically. |
 | `getPreviewPage(token)` | Fetch a draft page for preview mode |
 | `getPageWithPreview(slug, token?)` | Fetch page — preview if token present, live otherwise |
 | `getSitemap()` | Fetch all published slugs with sitemap metadata |
 | `getStatus()` | Connectivity check — returns counts and page list |
+| ~~`getSiteStructure()`~~ | **Deprecated.** Used the old Site Structure editor. Navigation and footer are now CMS Globals — use `getGlobals()` or rely on CMSCatchAllPage. |
 ---
@@ -439,6 +453,13 @@ The revalidation webhook calls `revalidateTag('cms-page-{slug}')` and `revalidat
 - `CMS_WEBHOOK_SECRET` on both sides must match exactly.
 - Check your deployment logs for `[sprintup-cms] revalidate error:` messages.
+**Navigation or footer not showing**
+- Go to **CMS Admin → Globals → Navigation** (or Footer) and check that content is published (status = Published).
+- Ensure at least one item/section is added. An empty globals document renders nothing.
+- Changes are cached for 60 seconds. Hard-refresh or wait a moment after publishing.
+- Do not use `getSiteStructure()` — it does not return globals data.
 **Preview mode not working**
 - The `/api/cms-preview/exit` route must exist.

package/dist/next/index.cjs CHANGED Viewed

@@ -1151,100 +1151,154 @@ function ServerProductListBlock({ block }) {
     }) })
   ] }) });
 }
-function parseNavItems(html) {
-  if (!html) return [];
-  const text = html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
-  return text.split(/\r?\n/).filter(Boolean).map((line) => {
-    const [label, url] = line.split("|").map((s) => s.trim());
-    return { label: label || "", url: url || "#" };
-  });
+function getSD(doc) {
+  const structuredBlock = Array.isArray(doc?.blocks) && doc.blocks[0]?.type === "__structured__" ? doc.blocks[0].content : null;
+  return doc?.sectionData ?? structuredBlock ?? null;
 }
 function CMSHeader({ nav }) {
-  if (!nav) return null;
-  const structuredBlock = Array.isArray(nav.blocks) && nav.blocks[0]?.type === "__structured__" ? nav.blocks[0].content : null;
-  const sd = nav.sectionData ?? structuredBlock;
+  const sd = getSD(nav);
   if (!sd) return null;
-  const primary = sd.primary ?? {};
-  const navItems = parseNavItems(primary.nav_items || "");
-  const logoUrl = primary.logo_url || "";
-  const logoAlt = primary.logo_alt || "";
-  if (!logoUrl && !logoAlt && navItems.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: "w-full border-b border-border bg-background/95 backdrop-blur sticky top-0 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-4 h-16 flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("a", { href: "/", className: "flex items-center gap-2 shrink-0", children: [
-      logoUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: logoAlt || "Logo", className: "h-8 w-auto" }),
-      !logoUrl && logoAlt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-base", children: logoAlt })
-    ] }),
-    navItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden md:flex items-center gap-6", children: navItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.url, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: item.label }, i)) })
+  const logoUrl = sd.logo_url?.trim() || "";
+  const logoAlt = sd.logo_alt?.trim() || "";
+  const items = Array.isArray(sd.items) ? sd.items : [];
+  if (!logoUrl && !logoAlt && items.length === 0) return null;
+  const links = items.filter((i) => i.type === "link" || i.type === "dropdown");
+  const buttons = items.filter((i) => i.type === "button");
+  const btnBase = { textDecoration: "none", padding: "0.4rem 1rem", borderRadius: "6px", fontWeight: 600, fontSize: "0.875rem", whiteSpace: "nowrap", transition: "opacity 0.15s" };
+  const btnVariant = (v) => ({
+    primary: { ...btnBase, background: "var(--foreground, #111)", color: "#fff", border: "1px solid transparent" },
+    outline: { ...btnBase, background: "transparent", color: "var(--foreground, #111)", border: "1px solid var(--border, #e5e7eb)" },
+    ghost: { ...btnBase, background: "transparent", color: "var(--muted-foreground, #6b7280)", border: "none", fontWeight: 500 }
+  })[v] ?? btnBase;
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { style: { position: "sticky", top: 0, zIndex: 50, width: "100%", borderBottom: "1px solid var(--border, #e5e7eb)", background: "rgba(255,255,255,0.97)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "0 1.5rem", height: "64px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "2rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", style: { display: "flex", alignItems: "center", gap: "0.5rem", textDecoration: "none", flexShrink: 0 }, children: logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: logoAlt || "Logo", style: { height: "32px", width: "auto", display: "block" } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700, fontSize: "1.125rem", color: "var(--foreground, #111)" }, children: logoAlt }) }),
+    links.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { style: { display: "flex", alignItems: "center", gap: "1.75rem", flex: 1 }, children: links.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.url || "#",
+        target: item.openInNewTab ? "_blank" : void 0,
+        rel: item.openInNewTab ? "noopener noreferrer" : void 0,
+        style: { fontSize: "0.9rem", color: "var(--muted-foreground, #6b7280)", textDecoration: "none", fontWeight: 500 },
+        children: item.label
+      },
+      item.id
+    )) }),
+    buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.625rem", flexShrink: 0 }, children: buttons.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.url || "#",
+        target: item.openInNewTab ? "_blank" : void 0,
+        rel: item.openInNewTab ? "noopener noreferrer" : void 0,
+        style: btnVariant(item.variant || "ghost"),
+        children: item.label
+      },
+      item.id
+    )) })
   ] }) });
 }
-function parseFooterColumns(html) {
-  if (!html) return [];
-  const text = html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
-  const lines = text.split(/\r?\n/).filter(Boolean);
-  const cols = [];
-  let current = null;
-  for (const line of lines) {
-    const parts = line.split("|").map((s) => s.trim());
-    if (parts.length === 1) {
-      if (current) cols.push(current);
-      current = { title: parts[0], links: [] };
-    } else if (parts.length >= 2) {
-      if (!current) current = { title: "", links: [] };
-      current.links.push({ label: parts[0], url: parts[1] || "#" });
-    }
+var SOCIAL_ICONS = [
+  { key: "facebook", label: "Facebook", d: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" },
+  { key: "twitter", label: "X", d: "M18 6L6 18M6 6l12 12" },
+  { key: "instagram", label: "Instagram", d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zm1.5-4.87h.01M6.5 2h11A4.5 4.5 0 0 1 22 6.5v11A4.5 4.5 0 0 1 17.5 22h-11A4.5 4.5 0 0 1 2 17.5v-11A4.5 4.5 0 0 1 6.5 2z" },
+  { key: "linkedin", label: "LinkedIn", d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zm2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" },
+  { key: "youtube", label: "YouTube", d: "M22.54 6.42a2.78 2.78 0 0 0-1.94-1.96C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.94 1.96C5.12 20 12 20 12 20s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z" }
+];
+function renderFooterSection(sec, mutedLink) {
+  if (sec.type === "brand") {
+    if (!sec.logo_url && !sec.tagline) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+      sec.logo_url && /* @__PURE__ */ jsxRuntime.jsx("img", { src: sec.logo_url, alt: "Logo", style: { height: "32px", width: "auto", objectFit: "contain" } }),
+      sec.tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "var(--muted-foreground, #6b7280)", lineHeight: 1.6, margin: 0 }, children: sec.tagline })
+    ] });
   }
-  if (current) cols.push(current);
-  return cols;
-}
-function parseLegalLinks(html) {
-  if (!html) return [];
-  const text = html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
-  return text.split(/\r?\n/).filter(Boolean).map((line) => {
-    const [label, url] = line.split("|").map((s) => s.trim());
-    return { label: label || "", url: url || "#" };
-  });
+  if (sec.type === "links") {
+    const links = (sec.links || []).filter((l) => l.label);
+    if (!links.length && !sec.title) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      sec.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontWeight: 600, fontSize: "0.875rem", margin: "0 0 0.875rem", color: "var(--foreground, #111)" }, children: sec.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: link.url || "#",
+          target: link.external ? "_blank" : void 0,
+          rel: link.external ? "noopener noreferrer" : void 0,
+          style: mutedLink,
+          children: link.label
+        }
+      ) }, link.id || link.label)) })
+    ] });
+  }
+  if (sec.type === "contact") {
+    if (!sec.email && !sec.phone && !sec.address) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      sec.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontWeight: 600, fontSize: "0.875rem", margin: "0 0 0.875rem", color: "var(--foreground, #111)" }, children: sec.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.4rem" }, children: [
+        sec.email && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${sec.email}`, style: mutedLink, children: sec.email }),
+        sec.phone && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${sec.phone}`, style: mutedLink, children: sec.phone }),
+        sec.address && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...mutedLink, whiteSpace: "pre-line", margin: 0 }, children: sec.address })
+      ] })
+    ] });
+  }
+  if (sec.type === "social") {
+    const active = SOCIAL_ICONS.filter((s) => sec[s.key]?.trim());
+    if (!active.length) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      sec.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontWeight: 600, fontSize: "0.875rem", margin: "0 0 0.875rem", color: "var(--foreground, #111)" }, children: sec.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.625rem" }, children: active.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: sec[s.key],
+          target: "_blank",
+          rel: "noopener noreferrer",
+          "aria-label": s.label,
+          style: { display: "flex", alignItems: "center", justifyContent: "center", width: "34px", height: "34px", borderRadius: "8px", border: "1px solid var(--border, #e5e7eb)", color: "var(--muted-foreground, #6b7280)", textDecoration: "none" },
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: s.d }) })
+        },
+        s.key
+      )) })
+    ] });
+  }
+  return null;
 }
 function CMSFooter({ footer }) {
-  if (!footer) return null;
-  const structuredBlock = Array.isArray(footer.blocks) && footer.blocks[0]?.type === "__structured__" ? footer.blocks[0].content : null;
-  const sd = footer.sectionData ?? structuredBlock;
+  const sd = getSD(footer);
   if (!sd) return null;
-  const c = sd.content ?? {};
-  const contact = sd.contact ?? {};
-  const social = sd.social ?? {};
-  const legal = sd.legal ?? {};
-  const columns = parseFooterColumns(c.columns || "");
-  const legalLinks = parseLegalLinks(legal.legal_links || "");
-  const hasSocial = social.facebook || social.twitter || social.instagram || social.linkedin || social.youtube;
-  const isEmpty = !c.tagline && !c.logo_url && columns.length === 0 && !contact.email && !contact.phone && !hasSocial && !legal.copyright && legalLinks.length === 0;
-  if (isEmpty) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "border-t border-border bg-muted/30 pt-12 pb-6 mt-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
-    (c.tagline || c.logo_url || columns.length > 0 || contact.email) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid gap-8 mb-10 grid-cols-1 sm:grid-cols-2 ${columns.length > 0 ? "lg:grid-cols-4" : "lg:grid-cols-2"}`, children: [
-      (c.logo_url || c.tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        c.logo_url && /* @__PURE__ */ jsxRuntime.jsx("img", { src: c.logo_url, alt: "Logo", className: "h-8 w-auto" }),
-        c.tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: c.tagline })
-      ] }),
-      columns.map((col, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        col.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm mb-3", children: col.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: col.links.map((link, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.url, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: link.label }) }, j)) })
-      ] }, i)),
-      (contact.email || contact.phone || contact.address) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm mb-3", children: "Contact" }),
-        contact.email && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: contact.email }),
-        contact.phone && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: contact.phone }),
-        contact.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-line", children: contact.address })
-      ] })
-    ] }),
-    hasSocial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4 mb-6", children: [
-      social.facebook && /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.facebook, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: "Facebook" }),
-      social.twitter && /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.twitter, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: "X" }),
-      social.instagram && /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.instagram, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: "Instagram" }),
-      social.linkedin && /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.linkedin, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: "LinkedIn" }),
-      social.youtube && /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.youtube, className: "text-sm text-muted-foreground hover:text-foreground transition-colors", children: "YouTube" })
-    ] }),
-    (legal.copyright || legalLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 pt-6 border-t border-border", children: [
-      legal.copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: legal.copyright }),
-      legalLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-4", children: legalLinks.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.url, className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: link.label }, i)) })
+  const sections = Array.isArray(sd.sections) ? sd.sections : [];
+  let renderSections = sections;
+  if (renderSections.length === 0 && (sd.brand || sd.columns || sd.contact || sd.social || sd.legal)) {
+    renderSections = [];
+    if (sd.brand?.logo_url || sd.brand?.tagline) renderSections.push({ id: "b", type: "brand", ...sd.brand });
+    (sd.columns || []).forEach((col) => renderSections.push({ id: col.id || col.title, type: "links", title: col.title, links: col.links }));
+    if (sd.contact?.email || sd.contact?.phone) renderSections.push({ id: "c", type: "contact", ...sd.contact });
+    if (Object.values(sd.social || {}).some(Boolean)) renderSections.push({ id: "s", type: "social", ...sd.social });
+  }
+  const legalSec = sd.sections ? sd.sections.find((s) => s.type === "legal") : sd.legal;
+  const mainSections = renderSections.filter((s) => s.type !== "legal");
+  if (mainSections.length === 0 && !legalSec) return null;
+  const gridCount = mainSections.length;
+  const gridCols = gridCount <= 1 ? "1fr" : gridCount === 2 ? "repeat(2,1fr)" : gridCount === 3 ? "repeat(3,1fr)" : "repeat(4,1fr)";
+  const mutedLink = { fontSize: "0.875rem", color: "var(--muted-foreground, #6b7280)", textDecoration: "none" };
+  const copyright = legalSec?.copyright || "";
+  const legalLinks = legalSec?.legal_links || legalSec?.links || [];
+  const hasBottom = copyright || legalLinks.filter((l) => l.label).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { style: { borderTop: "1px solid var(--border, #e5e7eb)", background: "var(--muted, #f9fafb)", marginTop: "4rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "3rem 1.5rem 1.5rem" }, children: [
+    mainSections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: gridCols, gap: "2.5rem", marginBottom: hasBottom ? "2.5rem" : 0 }, children: mainSections.map((sec) => {
+      const rendered = renderFooterSection(sec, mutedLink);
+      return rendered ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: rendered }, sec.id) : null;
+    }) }),
+    hasBottom && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderTop: "1px solid var(--border, #e5e7eb)", paddingTop: "1.25rem", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: "1rem" }, children: [
+      copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground, #6b7280)", margin: 0 }, children: copyright }),
+      legalLinks.filter((l) => l.label).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "1.25rem" }, children: legalLinks.filter((l) => l.label).map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: link.url || "#",
+          target: link.external ? "_blank" : void 0,
+          rel: link.external ? "noopener noreferrer" : void 0,
+          style: { fontSize: "0.8rem", color: "var(--muted-foreground, #6b7280)", textDecoration: "none" },
+          children: link.label
+        },
+        link.id || link.label
+      )) })
     ] })
   ] }) });
 }