@statsbygg/layout 0.1.12 → 0.1.13

package/dist/index.js

@@ -2,158 +2,113 @@
 
 // src/components/RootLayout/RootLayout.tsx
 import { useEffect as useEffect2 } from "react";
-import clsx4 from "clsx";
+import clsx5 from "clsx";
+import { SkipLink } from "@digdir/designsystemet-react";
 
 // src/components/GlobalHeader/GlobalHeader.tsx
 import { Button as Button2, Link as Link2 } from "@digdir/designsystemet-react";
-import clsx2 from "clsx";
+import { Search as Search2 } from "lucide-react";
+import clsx3 from "clsx";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
+import { useMemo } from "react";
 import { usePathname } from "next/navigation";
 import { Breadcrumbs } from "@digdir/designsystemet-react";
 import clsx from "clsx";
-import styles from "./Breadcrumbs.module.css";
 
 // src/routes.ts
-var ZONE_TREES_INPUT = {
-  sbno: {
-    segment: "",
-    // primary root route, no breadcrumb
-    label: "Hjem",
-    children: [
-      { segment: "nyheter", label: "Nyheter" }
-    ]
-  },
-  lokaler: {
-    segment: "lokaler",
-    label: "Statens eide og leide lokaler",
-    children: [
-      {
-        segment: "lokalbruk",
-        label: "Lokalbruk"
-      },
-      { segment: "veiledning", label: "Veiledning" },
-      { segment: "statlige-eiendommer", label: "Statlige eiendommer" },
-      { segment: "ledig-for-fremleie", label: "Ledig for fremleie" },
-      { segment: "statistikk", label: "Statistikk" }
-    ]
-  }
-};
-var ROUTES_INDEX = {};
-var PARENT_INDEX = /* @__PURE__ */ new Map();
-var ZONE_TREES = {};
-function isSegmentNode(n) {
-  return n.segment !== void 0 && n.path === void 0;
-}
-function isPathNode(n) {
-  return n.path !== void 0;
+function isExternalPath(path) {
+  return path.startsWith("http://") || path.startsWith("https://");
 }
-function joinPath(base, seg) {
-  if (!base) return seg ? `/${seg}` : "/";
-  return seg ? `${base.replace(/\/+$/, "")}/${seg.replace(/^\/+/, "")}` : base || "/";
+function normalizePath(path) {
+  if (path === "/") return "/";
+  return path.replace(/\/+$/, "");
 }
-function normalizeToAbsolute(node, base = "") {
-  var _a;
-  const path = isSegmentNode(node) ? joinPath(base, node.segment) : isPathNode(node) ? node.path === "" ? "/" : node.path : "/";
-  const children = ((_a = node.children) != null ? _a : []).map((c) => normalizeToAbsolute(c, path));
-  return { path, label: node.label, children: children.length ? children : void 0 };
+function formatSegmentLabel(segment) {
+  try {
+    const decoded = decodeURIComponent(segment).replace(/[-_]+/g, " ").trim();
+    return decoded ? decoded.charAt(0).toUpperCase() + decoded.slice(1) : segment;
+  } catch (e) {
+    return segment;
+  }
 }
-(function buildAll() {
-  Object.keys(ZONE_TREES_INPUT).forEach((zone) => {
-    ZONE_TREES[zone] = normalizeToAbsolute(ZONE_TREES_INPUT[zone]);
-  });
-  function walk(zone, node, parentKey) {
-    var _a;
-    const def = { zone, path: node.path, label: node.label };
-    const key = `${zone}:${node.path}`;
-    ROUTES_INDEX[zone].push(def);
-    PARENT_INDEX.set(key, parentKey);
-    for (const child of (_a = node.children) != null ? _a : []) {
-      walk(zone, child, key);
-    }
+function findAppRootWithAncestors(node, ancestors = []) {
+  if (!isExternalPath(node.path)) {
+    return {
+      externalAncestors: ancestors,
+      appRoot: node
+    };
   }
-  Object.keys(ZONE_TREES).forEach((zone) => {
-    ROUTES_INDEX[zone] = [];
-    walk(zone, ZONE_TREES[zone], null);
-  });
-})();
-function findBestMatch(zone, pathname) {
-  var _a;
-  const list = (_a = ROUTES_INDEX[zone]) != null ? _a : [];
-  let best;
-  for (const r of list) {
-    if (pathname === r.path) {
-      best = r;
-      break;
-    }
-    if (pathname.startsWith(r.path.endsWith("/") ? r.path : r.path + "/")) {
-      if (!best || r.path.length > best.path.length) best = r;
+  if (node.children) {
+    for (const child of node.children) {
+      const result = findAppRootWithAncestors(child, [...ancestors, node]);
+      if (result.appRoot) return result;
     }
   }
-  return best != null ? best : list.find((r) => {
-    var _a2;
-    return r.path === ((_a2 = ZONE_TREES[zone]) == null ? void 0 : _a2.path);
-  });
-}
-function getZoneRoot(zone) {
-  var _a;
-  return ((_a = ZONE_TREES[zone]) == null ? void 0 : _a.path) || "/";
-}
-function labelFromSlug(slug) {
-  try {
-    const s = decodeURIComponent(slug).replace(/[-_]+/g, " ").trim();
-    return s ? s.charAt(0).toUpperCase() + s.slice(1) : slug;
-  } catch (e) {
-    return slug;
-  }
+  return { externalAncestors: ancestors, appRoot: null };
 }
-function getBreadcrumbs(zone, pathname) {
-  var _a, _b;
-  const normalizedPathname = pathname === "/" ? pathname : pathname.replace(/\/+$/, "");
-  if (zone === "sbno" && normalizedPathname === "/") return [];
-  const match = findBestMatch(zone, normalizedPathname);
-  if (!match) return [];
-  const chain = [];
-  let key = `${zone}:${match.path}`;
-  while (key) {
-    const parentKey = PARENT_INDEX.get(key);
-    const [z, p] = key.split(":");
-    const def = ((_a = ROUTES_INDEX[z]) != null ? _a : []).find((r) => r.path === p);
-    if (def) chain.unshift(def);
-    key = parentKey != null ? parentKey : void 0;
+function findInternalMatch(node, pathname, ancestors = []) {
+  const nodePath = normalizePath(node.path);
+  if (pathname === nodePath) {
+    return { node, ancestors };
   }
-  const homeRoute = ((_b = ROUTES_INDEX.sbno) != null ? _b : []).find((r) => r.path === "/");
-  if (homeRoute && !(chain.length === 1 && chain[0].zone === "sbno" && chain[0].path === "/") && (chain.length === 0 || chain[0].path !== homeRoute.path)) {
-    chain.unshift(homeRoute);
+  if (node.children) {
+    for (const child of node.children) {
+      if (isExternalPath(child.path)) continue;
+      const result = findInternalMatch(child, pathname, [...ancestors, node]);
+      if (result) return result;
+    }
   }
-  const last = chain[chain.length - 1];
-  if (last && normalizedPathname !== last.path && normalizedPathname.startsWith(last.path.endsWith("/") ? last.path : last.path + "/")) {
-    const segments = normalizedPathname.split("/").filter(Boolean);
-    const tail = segments[segments.length - 1];
-    chain.push({ zone, path: normalizedPathname, label: labelFromSlug(tail) });
+  const pathPrefix = nodePath === "/" ? "/" : nodePath + "/";
+  if (pathname.startsWith(pathPrefix) || pathname === nodePath) {
+    return { node, ancestors };
   }
-  return chain.map((r) => ({ label: r.label, href: r.path }));
+  return null;
 }
-function transformHrefForZone(targetPath, currentZone, options) {
-  const { isDev, prodUrl } = options;
-  const targetZone = getZoneFromPathname(targetPath);
-  const isCrossZone = targetZone !== currentZone;
-  if (isCrossZone && isDev && prodUrl) {
-    return `${prodUrl}${targetPath}`;
+function getBreadcrumbs(routes, pathname) {
+  const normalizedPathname = normalizePath(pathname);
+  const { externalAncestors, appRoot } = findAppRootWithAncestors(routes);
+  if (!appRoot) {
+    return externalAncestors.map((node) => ({
+      label: node.label,
+      href: node.path
+    }));
   }
-  const currentZoneRoot = getZoneRoot(currentZone);
-  if (!isCrossZone && isDev && currentZoneRoot !== "/") {
-    return targetPath.replace(currentZoneRoot, "") || "/";
+  const breadcrumbs = externalAncestors.map((node) => ({
+    label: node.label,
+    href: node.path
+  }));
+  const internalMatch = findInternalMatch(appRoot, normalizedPathname);
+  if (!internalMatch) {
+    breadcrumbs.push({ label: appRoot.label, href: appRoot.path });
+    return breadcrumbs;
   }
-  return targetPath;
-}
-function getZoneFromPathname(pathname) {
-  if (pathname.startsWith("/lokaler")) return "lokaler";
-  return "sbno";
-}
-function getZonePrefixBreadcrumbs(zone) {
-  const zoneRoot = getZoneRoot(zone);
-  return getBreadcrumbs(zone, zoneRoot);
+  for (const ancestor of internalMatch.ancestors) {
+    breadcrumbs.push({
+      label: ancestor.label,
+      href: ancestor.path
+    });
+  }
+  breadcrumbs.push({
+    label: internalMatch.node.label,
+    href: internalMatch.node.path
+  });
+  const matchedPath = normalizePath(internalMatch.node.path);
+  if (normalizedPathname !== matchedPath) {
+    const remainingPath = normalizedPathname.slice(
+      matchedPath === "/" ? 1 : matchedPath.length + 1
+    );
+    const dynamicSegments = remainingPath.split("/").filter(Boolean);
+    let accumulatedPath = matchedPath;
+    for (const segment of dynamicSegments) {
+      accumulatedPath = accumulatedPath === "/" ? `/${segment}` : `${accumulatedPath}/${segment}`;
+      breadcrumbs.push({
+        label: formatSegmentLabel(segment),
+        href: accumulatedPath
+      });
+    }
+  }
+  return breadcrumbs;
 }
 
 // src/store/globalState.ts
@@ -165,7 +120,6 @@ var creator = (set, get) => ({
   theme: "light",
   locale: "no",
   isMenuOpen: false,
-  zone: null,
   breadcrumbs: null,
   setUser: (user) => set({ user }),
   setTheme: (theme) => {
@@ -177,7 +131,6 @@ var creator = (set, get) => ({
   setLocale: (locale) => set({ locale }),
   setIsMenuOpen: (isMenuOpen) => set({ isMenuOpen }),
   toggleMenu: () => set((state) => ({ isMenuOpen: !state.isMenuOpen })),
-  setZone: (zone) => set({ zone }),
   setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
   initialize: () => {
     if (typeof document !== "undefined" && ALLOW_DARK_THEME) {
@@ -226,17 +179,26 @@ function useLayoutTranslation() {
 }
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
+import styles from "./Breadcrumbs.module.css";
 import { jsx } from "react/jsx-runtime";
-function SbBreadcrumbs({ className, zone }) {
+function SbBreadcrumbs({ className, routes }) {
   const pathname = usePathname();
   const manualBreadcrumbs = useGlobalStore((state) => state.breadcrumbs);
-  const isDev = process.env.NODE_ENV === "development";
-  const prodUrl = "https://www.statsbygg.no";
-  const zoneRoot = getZoneRoot(zone);
   const { t } = useLayoutTranslation();
-  const fullPath = isDev && zoneRoot !== "/" && !pathname.startsWith(zoneRoot) ? `${zoneRoot}${pathname}` : pathname;
-  const breadcrumbs = manualBreadcrumbs != null ? manualBreadcrumbs : getBreadcrumbs(zone, fullPath);
-  if (breadcrumbs.length <= 1) {
+  const breadcrumbs = useMemo(() => {
+    if (manualBreadcrumbs) {
+      const { externalAncestors } = findAppRootWithAncestors(routes);
+      const baseBreadcrumbs = externalAncestors.map((node) => ({
+        label: node.label,
+        href: node.path
+      }));
+      const manualHrefs = new Set(manualBreadcrumbs.map((b) => b.href));
+      const uniqueBase = baseBreadcrumbs.filter((b) => !manualHrefs.has(b.href));
+      return [...uniqueBase, ...manualBreadcrumbs];
+    }
+    return getBreadcrumbs(routes, pathname);
+  }, [routes, pathname, manualBreadcrumbs]);
+  if (breadcrumbs.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(
@@ -246,16 +208,15 @@ function SbBreadcrumbs({ className, zone }) {
       className: clsx(styles.breadcrumbs, className),
       children: /* @__PURE__ */ jsx(Breadcrumbs.List, { children: breadcrumbs.map((crumb, index) => {
         const isLast = index === breadcrumbs.length - 1;
-        const href = manualBreadcrumbs ? crumb.href : transformHrefForZone(crumb.href, zone, { isDev, prodUrl });
         return /* @__PURE__ */ jsx(Breadcrumbs.Item, { children: /* @__PURE__ */ jsx(
           Breadcrumbs.Link,
           {
-            href,
+            href: crumb.href,
             "aria-current": isLast ? "page" : void 0,
             className: isLast ? styles.currentLink : styles.link,
             children: crumb.label
           }
-        ) }, crumb.href);
+        ) }, `${crumb.href}-${index}`);
       }) })
     }
   );
@@ -290,9 +251,7 @@ var NAVIGATION_MENU = [
         label: "For leietakere",
         href: "/for-leietakere",
         children: [
-          { label: "Leieveileder", href: "/leietakere/leieveileder" },
-          { label: "Lenke til underside", href: "/leietakere/lenke1" },
-          { label: "Lenke til underside", href: "/leietakere/lenke2" }
+          { label: "Leieveileder", href: "/for-leietakere/leieveileder" }
         ]
       },
       {
@@ -301,8 +260,7 @@ var NAVIGATION_MENU = [
         children: [
           { label: "V\xE5re krav", href: "/byggebransjen/vare-krav" },
           { label: "BIM", href: "/byggebransjen/bim" },
-          { label: "ByggBoks", href: "/byggebransjen/byggboks" },
-          { label: "Lenke til underside", href: "/byggebransjen/lenke" }
+          { label: "ByggBoks", href: "/byggebransjen/byggboks" }
         ]
       },
       {
@@ -385,27 +343,74 @@ var NAVIGATION_MENU = [
 ];
 
 // src/components/NavigationMenuItem/NavigationMenuItem.tsx
-import { Link, List } from "@digdir/designsystemet-react";
+import { List } from "@digdir/designsystemet-react";
 import { ExternalLink } from "lucide-react";
+import { usePathname as usePathname2 } from "next/navigation";
+import clsx2 from "clsx";
+
+// src/components/SmartLink/SmartLink.tsx
+import Link from "next/link";
+import { Link as DsLink } from "@digdir/designsystemet-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SmartLink({
+  href,
+  appBasePath,
+  external = false,
+  className,
+  children
+}) {
+  const isExternalUrl = href.startsWith("http://") || href.startsWith("https://");
+  const isLocalRoute = appBasePath && !isExternalUrl && (href === appBasePath || href.startsWith(`${appBasePath}/`));
+  if (isExternalUrl || external) {
+    return /* @__PURE__ */ jsx2(
+      DsLink,
+      {
+        href,
+        className,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children
+      }
+    );
+  }
+  if (isLocalRoute) {
+    const localHref = href.replace(appBasePath, "") || "/";
+    return /* @__PURE__ */ jsx2(Link, { href: localHref, className, children });
+  }
+  return /* @__PURE__ */ jsx2(DsLink, { href, className, children });
+}
+
+// src/components/NavigationMenuItem/NavigationMenuItem.tsx
 import styles2 from "./NavigationMenuItem.module.css";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function NavigationMenuItem({ item, animationDelay, compact = false }) {
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function NavigationMenuItem({
+  item,
+  animationDelay,
+  compact = false,
+  appBasePath
+}) {
+  const pathname = usePathname2();
+  const isActive = (href) => {
+    if (href === "/") return pathname === "/";
+    return pathname == null ? void 0 : pathname.startsWith(href);
+  };
+  const isParentActive = isActive(item.href);
   if (compact) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "div",
       {
         className: styles2.itemColumn,
         style: { animationDelay: `${animationDelay}ms` },
         children: /* @__PURE__ */ jsxs(
-          Link,
+          SmartLink,
           {
             href: item.href,
-            className: styles2.compactLink,
-            target: item.external ? "_blank" : void 0,
-            rel: item.external ? "noopener noreferrer" : void 0,
+            appBasePath,
+            external: item.external,
+            className: clsx2(styles2.compactLink, isParentActive && styles2.active),
             children: [
               item.label,
-              item.external && /* @__PURE__ */ jsx2(ExternalLink, { size: 16, "aria-hidden": "true" })
+              item.external && /* @__PURE__ */ jsx3(ExternalLink, { size: 16, "aria-hidden": "true" })
             ]
           }
         )
@@ -419,39 +424,42 @@ function NavigationMenuItem({ item, animationDelay, compact = false }) {
       style: { animationDelay: `${animationDelay}ms` },
       children: [
         /* @__PURE__ */ jsxs(
-          Link,
+          SmartLink,
           {
             href: item.href,
-            className: styles2.parentLink,
-            target: item.external ? "_blank" : void 0,
-            rel: item.external ? "noopener noreferrer" : void 0,
+            appBasePath,
+            external: item.external,
+            className: clsx2(styles2.parentLink, isParentActive && styles2.active),
             children: [
               item.label,
-              item.external && /* @__PURE__ */ jsx2(ExternalLink, { size: 20, "aria-hidden": "true" })
+              item.external && /* @__PURE__ */ jsx3(ExternalLink, { size: 20, "aria-hidden": "true" })
             ]
           }
         ),
-        item.children && item.children.length > 0 && /* @__PURE__ */ jsx2(List.Unordered, { className: styles2.childItems, children: item.children.map((child, childIndex) => /* @__PURE__ */ jsx2(
-          List.Item,
-          {
-            className: styles2.childItem,
-            style: { animationDelay: `${animationDelay + 30 + childIndex * 15}ms` },
-            children: /* @__PURE__ */ jsxs(
-              Link,
-              {
-                href: child.href,
-                className: styles2.childLink,
-                target: child.external ? "_blank" : void 0,
-                rel: child.external ? "noopener noreferrer" : void 0,
-                children: [
-                  child.label,
-                  child.external && /* @__PURE__ */ jsx2(ExternalLink, { size: 20, "aria-hidden": "true" })
-                ]
-              }
-            )
-          },
-          childIndex
-        )) })
+        item.children && item.children.length > 0 && /* @__PURE__ */ jsx3(List.Unordered, { className: styles2.childItems, children: item.children.map((child, childIndex) => {
+          const isChildActive = isActive(child.href);
+          return /* @__PURE__ */ jsx3(
+            List.Item,
+            {
+              className: styles2.childItem,
+              style: { animationDelay: `${animationDelay + 30 + childIndex * 15}ms` },
+              children: /* @__PURE__ */ jsxs(
+                SmartLink,
+                {
+                  href: child.href,
+                  appBasePath,
+                  external: child.external,
+                  className: clsx2(styles2.childLink, isChildActive && styles2.active),
+                  children: [
+                    child.label,
+                    child.external && /* @__PURE__ */ jsx3(ExternalLink, { size: 16, "aria-hidden": "true" })
+                  ]
+                }
+              )
+            },
+            childIndex
+          );
+        }) })
       ]
     }
   );
@@ -459,8 +467,8 @@ function NavigationMenuItem({ item, animationDelay, compact = false }) {
 
 // src/components/NavigationMenu/NavigationMenu.tsx
 import styles3 from "./NavigationMenu.module.css";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function NavigationMenu({ zone }) {
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function NavigationMenu({ className, appBasePath }) {
   const [searchValue, setSearchValue] = useState("");
   const isMenuOpen = useGlobalStore((state) => state.isMenuOpen);
   const setIsMenuOpen = useGlobalStore((state) => state.setIsMenuOpen);
@@ -468,19 +476,17 @@ function NavigationMenu({ zone }) {
   const { t } = useLayoutTranslation();
   useEffect(() => {
     if (!isMenuOpen) return;
-    const handleEscape = (event) => {
+    function handleEscape(event) {
       if (event.key === "Escape") {
         setIsMenuOpen(false);
       }
-    };
+    }
     setTimeout(() => {
       var _a;
       (_a = searchInputRef.current) == null ? void 0 : _a.focus();
     }, 100);
     document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-    };
+    return () => document.removeEventListener("keydown", handleEscape);
   }, [setIsMenuOpen, isMenuOpen]);
   function handleBackdropClick(e) {
     if (e.target === e.currentTarget) {
@@ -488,102 +494,67 @@ function NavigationMenu({ zone }) {
     }
   }
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    isMenuOpen && /* @__PURE__ */ jsx3("div", { className: styles3.backdrop, onClick: handleBackdropClick }),
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: `${styles3.menuOverlay} ${!isMenuOpen ? styles3.hidden : ""}`,
-        children: /* @__PURE__ */ jsxs2("div", { className: styles3.container, children: [
-          /* @__PURE__ */ jsxs2("div", { className: styles3.searchSection, children: [
-            /* @__PURE__ */ jsx3(Heading, { level: 1, children: t("menu.helpTitle") }),
-            /* @__PURE__ */ jsxs2(Search, { children: [
-              /* @__PURE__ */ jsx3(
-                Search.Input,
-                {
-                  "aria-label": t("common.search"),
-                  ref: searchInputRef,
-                  value: searchValue,
-                  onChange: (e) => setSearchValue(e.target.value),
-                  placeholder: t("common.search"),
-                  className: styles3.searchField
-                }
-              ),
-              /* @__PURE__ */ jsx3(Search.Clear, {})
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx3(
-            "nav",
+    isMenuOpen && /* @__PURE__ */ jsx4("div", { className: styles3.backdrop, onClick: handleBackdropClick }),
+    /* @__PURE__ */ jsx4("div", { className: `${styles3.menuOverlay} ${!isMenuOpen ? styles3.hidden : ""} ${className != null ? className : ""}`, children: /* @__PURE__ */ jsxs2("div", { className: styles3.container, children: [
+      /* @__PURE__ */ jsxs2("div", { className: styles3.searchSection, children: [
+        /* @__PURE__ */ jsx4(Heading, { level: 1, children: t("menu.helpTitle") }),
+        /* @__PURE__ */ jsxs2(Search, { children: [
+          /* @__PURE__ */ jsx4(
+            Search.Input,
             {
-              className: styles3.menuSections,
-              "aria-label": t("menu.mainMenuLabel"),
-              children: NAVIGATION_MENU.map(
-                (section, sectionIndex) => {
-                  var _a;
-                  return /* @__PURE__ */ jsxs2(
-                    "section",
-                    {
-                      className: styles3.section,
-                      style: { animationDelay: `${0.15 + sectionIndex * 0.06}s` },
-                      children: [
-                        section.layout !== "subsections" && /* @__PURE__ */ jsx3(Heading, { level: 2, className: styles3.sectionHeader, children: section.title }),
-                        section.layout === "subsections" && section.subsections ? /* @__PURE__ */ jsx3("div", { className: styles3.subsectionsGrid, children: section.subsections.map(
-                          (subsection, subsectionIndex) => /* @__PURE__ */ jsxs2(
-                            "div",
-                            {
-                              className: styles3.subsection,
-                              children: [
-                                /* @__PURE__ */ jsx3(
-                                  Heading,
-                                  {
-                                    level: 2,
-                                    className: styles3.subsectionHeader,
-                                    children: subsection.title
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx3("div", { className: styles3.subsectionItems, children: subsection.items.map((item, itemIndex) => /* @__PURE__ */ jsx3(
-                                  NavigationMenuItem,
-                                  {
-                                    item,
-                                    animationDelay: 150 + sectionIndex * 60 + subsectionIndex * 40 + itemIndex * 25,
-                                    compact: true
-                                  },
-                                  itemIndex
-                                )) })
-                              ]
-                            },
-                            subsectionIndex
-                          )
-                        ) }) : /* @__PURE__ */ jsx3(
-                          "div",
-                          {
-                            className: sectionIndex === 2 ? styles3.itemsGridThreeCol : styles3.itemsGrid,
-                            children: (_a = section.items) == null ? void 0 : _a.map((item, itemIndex) => /* @__PURE__ */ jsx3(
-                              NavigationMenuItem,
-                              {
-                                item,
-                                animationDelay: 150 + sectionIndex * 60 + itemIndex * 25
-                              },
-                              itemIndex
-                            ))
-                          }
-                        )
-                      ]
-                    },
-                    sectionIndex
-                  );
-                }
-              )
+              "aria-label": t("common.search"),
+              ref: searchInputRef,
+              value: searchValue,
+              onChange: (e) => setSearchValue(e.target.value),
+              placeholder: t("common.search"),
+              className: styles3.searchField
             }
-          )
+          ),
+          /* @__PURE__ */ jsx4(Search.Clear, {})
         ] })
-      }
-    )
+      ] }),
+      /* @__PURE__ */ jsx4("nav", { className: styles3.menuSections, "aria-label": t("menu.mainMenuLabel"), children: NAVIGATION_MENU.map((section, sectionIndex) => {
+        var _a;
+        return /* @__PURE__ */ jsxs2(
+          "section",
+          {
+            className: styles3.section,
+            style: { animationDelay: `${0.15 + sectionIndex * 0.06}s` },
+            children: [
+              section.layout !== "subsections" && /* @__PURE__ */ jsx4(Heading, { level: 2, className: styles3.sectionHeader, children: section.title }),
+              section.layout === "subsections" && section.subsections ? /* @__PURE__ */ jsx4("div", { className: styles3.subsectionsGrid, children: section.subsections.map((subsection, subsectionIndex) => /* @__PURE__ */ jsxs2("div", { className: styles3.subsection, children: [
+                /* @__PURE__ */ jsx4(Heading, { level: 2, className: styles3.subsectionHeader, children: subsection.title }),
+                /* @__PURE__ */ jsx4("div", { className: styles3.subsectionItems, children: subsection.items.map((item, itemIndex) => /* @__PURE__ */ jsx4(
+                  NavigationMenuItem,
+                  {
+                    item,
+                    animationDelay: 150 + sectionIndex * 60 + subsectionIndex * 40 + itemIndex * 25,
+                    appBasePath,
+                    compact: true
+                  },
+                  itemIndex
+                )) })
+              ] }, subsectionIndex)) }) : /* @__PURE__ */ jsx4("div", { className: sectionIndex === 2 ? styles3.itemsGridThreeCol : styles3.itemsGrid, children: (_a = section.items) == null ? void 0 : _a.map((item, itemIndex) => /* @__PURE__ */ jsx4(
+                NavigationMenuItem,
+                {
+                  item,
+                  animationDelay: 150 + sectionIndex * 60 + itemIndex * 25,
+                  appBasePath
+                },
+                itemIndex
+              )) })
+            ]
+          },
+          sectionIndex
+        );
+      }) })
+    ] }) })
   ] });
 }
 
 // src/components/MenuButton/MenuButton.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function MenuButton({ zone }) {
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function MenuButton({ className, appBasePath }) {
   const isMenuOpen = useGlobalStore((state) => state.isMenuOpen);
   const toggleMenu = useGlobalStore((state) => state.toggleMenu);
   const { t } = useLayoutTranslation();
@@ -595,21 +566,21 @@ function MenuButton({ zone }) {
         onClick: toggleMenu,
         "aria-expanded": isMenuOpen,
         "aria-label": isMenuOpen ? t("menu.closeMenu") : t("menu.openMenu"),
+        className,
         children: [
-          isMenuOpen ? /* @__PURE__ */ jsx4(X, { size: 20, "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(Menu, { size: 20, "aria-hidden": "true" }),
+          isMenuOpen ? /* @__PURE__ */ jsx5(X, { size: 20, "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(Menu, { size: 20, "aria-hidden": "true" }),
           isMenuOpen ? t("common.close") : t("common.menu")
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(NavigationMenu, { zone })
+    /* @__PURE__ */ jsx5(NavigationMenu, { appBasePath })
   ] });
 }
 
 // src/components/GlobalHeader/GlobalHeader.tsx
 import styles4 from "./GlobalHeader.module.css";
-import { Search as Search2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function GlobalHeader({ className, zone }) {
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function GlobalHeader({ className, routes, appBasePath }) {
   const isMenuOpen = useGlobalStore((state) => state.isMenuOpen);
   const setIsMenuOpen = useGlobalStore((state) => state.setIsMenuOpen);
   const setTheme = useGlobalStore((state) => state.setTheme);
@@ -618,12 +589,19 @@ function GlobalHeader({ className, zone }) {
   function toggleDarkMode() {
     setTheme(theme === "dark" ? "light" : "dark");
   }
-  return /* @__PURE__ */ jsx5("header", { className: clsx2(styles4.header, isMenuOpen && styles4.menuOpen, className), children: /* @__PURE__ */ jsxs4("div", { className: styles4.headerContainer, children: [
+  return /* @__PURE__ */ jsx6("header", { className: clsx3(styles4.header, isMenuOpen && styles4.menuOpen, className), children: /* @__PURE__ */ jsxs4("div", { className: styles4.headerContainer, children: [
     /* @__PURE__ */ jsxs4("div", { className: styles4.topBarContainer, children: [
-      /* @__PURE__ */ jsx5(Link2, { href: "https://www.statsbygg.no", children: /* @__PURE__ */ jsx5("img", { src: "https://dok.statsbygg.no/wp-content/uploads/2025/11/Statsbygg_logo.svg", alt: "Logo", className: styles4.logo }) }),
+      /* @__PURE__ */ jsx6(Link2, { href: "https://www.statsbygg.no", children: /* @__PURE__ */ jsx6(
+        "img",
+        {
+          src: "https://dok.statsbygg.no/wp-content/uploads/2025/11/Statsbygg_logo.svg",
+          alt: "Logo",
+          className: styles4.logo
+        }
+      ) }),
       /* @__PURE__ */ jsxs4("div", { className: styles4.actionsContainer, children: [
         !isMenuOpen && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-          ALLOW_DARK_THEME && /* @__PURE__ */ jsx5(Button2, { onClick: toggleDarkMode, className: styles4.themeToggleButton, children: theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}" }),
+          ALLOW_DARK_THEME && /* @__PURE__ */ jsx6(Button2, { onClick: toggleDarkMode, className: styles4.themeToggleButton, children: theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}" }),
           /* @__PURE__ */ jsxs4(
             Button2,
             {
@@ -632,87 +610,64 @@ function GlobalHeader({ className, zone }) {
               className: styles4.searchButton,
               "aria-label": t("common.search"),
               children: [
-                /* @__PURE__ */ jsx5(Search2, { size: 20, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx6(Search2, { size: 20, "aria-hidden": "true" }),
                 t("common.search")
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5(MenuButton, { zone })
+        /* @__PURE__ */ jsx6(MenuButton, { appBasePath })
       ] })
     ] }),
-    /* @__PURE__ */ jsx5(SbBreadcrumbs, { zone })
+    /* @__PURE__ */ jsx6(SbBreadcrumbs, { routes })
   ] }) });
 }
 
 // src/components/GlobalFooter/GlobalFooter.tsx
 import { Paragraph } from "@digdir/designsystemet-react";
-import clsx3 from "clsx";
+import clsx4 from "clsx";
 import styles5 from "./GlobalFooter.module.css";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function GlobalFooter({ className }) {
   const { t } = useLayoutTranslation();
-  return /* @__PURE__ */ jsx6("footer", { className: clsx3(styles5.footer, className), children: /* @__PURE__ */ jsx6("div", { className: styles5.container, children: /* @__PURE__ */ jsx6("div", { className: styles5.content, children: /* @__PURE__ */ jsx6(Paragraph, { children: t("footer.content") }) }) }) });
+  return /* @__PURE__ */ jsx7("footer", { className: clsx4(styles5.footer, className), children: /* @__PURE__ */ jsx7("div", { className: styles5.container, children: /* @__PURE__ */ jsx7("div", { className: styles5.content, children: /* @__PURE__ */ jsx7(Paragraph, { children: t("footer.content") }) }) }) });
 }
 
 // src/components/RootLayout/RootLayout.tsx
 import styles6 from "./RootLayout.module.css";
-import { SkipLink } from "@digdir/designsystemet-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function RootLayout({
-  children,
-  zone,
-  className
-}) {
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function RootLayout({ children, routes, appBasePath, className }) {
   const initialize = useGlobalStore((state) => state.initialize);
-  const setZone = useGlobalStore((state) => state.setZone);
   const isMenuOpen = useGlobalStore((state) => state.isMenuOpen);
   const { t } = useLayoutTranslation();
   useEffect2(() => {
-    setZone(zone);
-  }, [zone, setZone]);
-  useEffect2(() => {
-    try {
-      const maybe = initialize();
-      if (maybe && typeof maybe.then === "function") {
-        maybe.catch((error) => {
-          console.error("Failed to initialize global state:", error);
-        });
-      }
-    } catch (error) {
-      console.error("Failed to initialize global state:", error);
-    }
+    initialize();
   }, [initialize]);
-  return /* @__PURE__ */ jsxs5("div", { className: clsx4(styles6.root, isMenuOpen && styles6.menuOpen, className), "data-zone": zone, children: [
-    /* @__PURE__ */ jsx7(SkipLink, { className: styles6.skipLink, href: "#main-content", children: t("common.skipLink") }),
-    /* @__PURE__ */ jsx7(GlobalHeader, { zone }),
-    /* @__PURE__ */ jsx7("main", { id: "main-content", tabIndex: -1, className: styles6.main, children }),
-    /* @__PURE__ */ jsx7(GlobalFooter, {})
+  return /* @__PURE__ */ jsxs5("div", { className: clsx5(styles6.root, isMenuOpen && styles6.menuOpen, className), children: [
+    /* @__PURE__ */ jsx8(SkipLink, { className: styles6.skipLink, href: "#main-content", children: t("common.skipLink") }),
+    /* @__PURE__ */ jsx8(GlobalHeader, { routes, appBasePath }),
+    /* @__PURE__ */ jsx8("main", { id: "main-content", tabIndex: -1, className: styles6.main, children }),
+    /* @__PURE__ */ jsx8(GlobalFooter, {})
   ] });
 }
 
 // src/hooks/use-breadcrumbs.ts
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useBreadcrumbs(breadcrumbs) {
   const setBreadcrumbs = useGlobalStore((state) => state.setBreadcrumbs);
-  const zone = useGlobalStore((state) => state.zone);
-  const breadcrumbsStringified = JSON.stringify(breadcrumbs);
-  const hasSetBreadcrumbs = useRef2(false);
+  const serialized = JSON.stringify(breadcrumbs);
   useEffect3(() => {
-    if (!zone || hasSetBreadcrumbs.current) return;
-    const zonePrefixBreadcrumbs = getZonePrefixBreadcrumbs(zone);
-    const parsedBreadcrumbs = JSON.parse(breadcrumbsStringified);
-    const fullBreadcrumbs = [...zonePrefixBreadcrumbs, ...parsedBreadcrumbs];
-    setBreadcrumbs(fullBreadcrumbs);
-    hasSetBreadcrumbs.current = true;
+    setBreadcrumbs(JSON.parse(serialized));
     return () => {
       setBreadcrumbs(null);
-      hasSetBreadcrumbs.current = false;
     };
-  }, [zone, breadcrumbsStringified, setBreadcrumbs]);
+  }, [serialized, setBreadcrumbs]);
 }
 export {
   RootLayout,
+  SmartLink,
+  findAppRootWithAncestors,
+  getBreadcrumbs,
   useBreadcrumbs,
   useGlobalStore
 };