@brillout/docpress 0.8.11 → 0.8.13-commit-8740149

package/dist/MenuModal.js

@@ -0,0 +1,131 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+export { MenuModal };
+export { toggleMenuModal };
+export { openMenuModal };
+export { closeMenuModal };
+import React from 'react';
+import { usePageContext } from './renderer/usePageContext';
+import { NavigationContent } from './navigation/Navigation';
+import { css } from './utils/css';
+import { containerQueryMobile } from './Layout';
+import { Links } from './Links';
+import { isBrowser } from './utils/isBrowser';
+import { getViewportWidth } from './utils/getViewportWidth';
+initCloseListeners();
+function MenuModal() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, getStyle()),
+        React.createElement("div", { id: "menu-modal", className: "link-hover-animation", style: {
+                position: 'fixed',
+                width: '100%',
+                /* Do this once Firefox supports `dvh`: https://caniuse.com/?search=dvh
+                 * - Then also replace all `vh` values with `dvh` values.
+                 * - https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+                height: '100dh',
+                /*/
+                height: 'calc(100vh - var(--top-nav-height))',
+                //*/
+                top: 'calc(var(--top-nav-height) + var(--block-margin))',
+                left: 0,
+                zIndex: 9999,
+                overflow: 'scroll',
+                background: '#eaeaea',
+                // background: '#ededef',
+                // boxShadow: 'rgba(0, 0, 0, 0.35) 0 0 13px 3px',
+                // boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
+                boxShadow: 'rgb(6 24 44 / 8%) 0px 0px 0px 3px, rgba(6, 24, 44, 0.65) 0px 4px 13px -1px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset',
+                transition: 'opacity 0.3s ease-in-out',
+            }, onMouseEnter: openMenuModal, onMouseLeave: closeMenuModal },
+            React.createElement("div", { style: {
+                    // Place <LinksBottom /> to the bottom
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 'calc(100vh - var(--top-nav-height))',
+                    justifyContent: 'space-between',
+                    // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
+                    containerType: 'inline-size',
+                } },
+                React.createElement(Nav, null)))));
+}
+function Nav() {
+    var pageContext = usePageContext();
+    var navItems = pageContext.navItemsAll;
+    return React.createElement(NavigationContent, { columnLayout: true, navItems: navItems });
+}
+// TODO: remove
+function LinksBottom() {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            justifyContent: 'center',
+        } },
+        React.createElement(Links, { style: { height: 70 } })));
+}
+function getStyle() {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events:none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n  opacity: 0;\n  pointer-events:none;\n}\n// disable scroll of main view\nhtml.menu-modal-show {\n  overflow: hidden !important;\n}\n@container(min-width: ", "px) {\n  #menu-modal .nav-item-level-3 {\n    display: none;\n  }\n}\n"])), containerQueryMobile);
+}
+// TODO: remove?
+function CloseButton() {
+    return (React.createElement("div", { onClick: toggleMenuModal, style: { position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }, "aria-label": 'Escape\nCtrl\xa0+\xa0M', "data-label-shift": true },
+        React.createElement("svg", { width: "48.855", height: "48.855", version: "1.1", viewBox: "0 0 22.901 22.901", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("circle", { cx: "11.45", cy: "11.45", r: "10.607", fill: "#ececec", stroke: "#666", strokeDashoffset: "251.44", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.6875", style: { paintOrder: 'normal' } }),
+            React.createElement("path", { d: "m7.5904 6.2204 3.86 3.86 3.84-3.84a0.92 0.92 0 0 1 0.66-0.29 1 1 0 0 1 1 1 0.9 0.9 0 0 1-0.27 0.66l-3.89 3.84 3.89 3.89a0.9 0.9 0 0 1 0.27 0.61 1 1 0 0 1-1 1 0.92 0.92 0 0 1-0.69-0.27l-3.81-3.86-3.85 3.85a0.92 0.92 0 0 1-0.65 0.28 1 1 0 0 1-1-1 0.9 0.9 0 0 1 0.27-0.66l3.89-3.84-3.89-3.89a0.9 0.9 0 0 1-0.27-0.61 1 1 0 0 1 1-1c0.24 3e-3 0.47 0.1 0.64 0.27z", fill: "#666", stroke: "#666", strokeWidth: ".11719" }))));
+}
+function toggleMenuModal() {
+    document.documentElement.classList.toggle('menu-modal-show');
+    if (document.documentElement.classList.contains('menu-modal-show') && getViewportWidth() < containerQueryMobile) {
+        autoScroll();
+    }
+}
+function autoScroll() {
+    var nav = document.querySelector('#menu-modal .navigation-content');
+    var href = window.location.pathname;
+    var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+}
+function openMenuModal() {
+    document.documentElement.classList.add('menu-modal-show');
+}
+function closeMenuModal() {
+    document.documentElement.classList.remove('menu-modal-show');
+}
+function initCloseListeners() {
+    if (!isBrowser())
+        return;
+    document.addEventListener('click', onLinkClick);
+    // It's redundant (and onLinkClick() is enough), but just to be sure.
+    addEventListener('hashchange', closeMenuModal);
+}
+function onLinkClick(ev) {
+    if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey)
+        return;
+    var linkTag = findLinkTag(ev.target);
+    if (!linkTag)
+        return;
+    var href = linkTag.getAttribute('href');
+    if (!href)
+        return;
+    if (!href.startsWith('/') && !href.startsWith('#'))
+        return;
+    closeMenuModal();
+}
+function findLinkTag(target) {
+    while (target.tagName !== 'A') {
+        var parentNode = target.parentNode;
+        if (!parentNode) {
+            return null;
+        }
+        target = parentNode;
+    }
+    return target;
+}
+var templateObject_1;

package/dist/autoScrollNav.d.ts

@@ -0,0 +1,3 @@
+export { autoScrollNav };
+export declare const autoScrollNav_SSR: string;
+declare function autoScrollNav(): void;

package/dist/autoScrollNav.js

@@ -0,0 +1,35 @@
+export { autoScrollNav };
+export var autoScrollNav_SSR = "autoScrollNav();".concat(autoScrollNav.toString());
+// - We cannot use TypeScript syntax because of autoScrollNav_SSR
+// - We have to save & restore `document.documentElement.scrollTop` because scrollIntoView() scrolls the main view. (I don't know why).
+//   - Failed alternatives:
+//     - scrollIntoViewIfNeeded() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) would work (it doesn't scroll the main view) but Firefox doesn't support it.
+//     - Doesn't work: the scrolling is off by hundreds of px (I guess because this function runs too early while the page is still rendering).
+//       ```js
+//       const offset = navLink.offsetTop - (window.innerHeight / 2)
+//       navigationContainerEl.scrollTop = offset
+//       ```
+//     - Doesn't work: scrollIntoView() still scrolls the main view
+//       ```js
+//       const overflowOriginal = document.documentElement.style.overflow
+//       document.documentElement.style.overflow = 'hidden'
+//       // ...
+//       document.documentElement.style.overflow = overflowOriginal
+//       ```
+function autoScrollNav() {
+    var nav = document.querySelector('#nav-left .navigation-content');
+    if (!nav)
+        return;
+    var href = window.location.pathname;
+    var navLinks = Array.from(nav.querySelectorAll("a[href=\"".concat(href, "\"]")));
+    var navLink = navLinks[0];
+    if (!navLink)
+        return;
+    var scrollTopOriginal = document.documentElement.scrollTop;
+    navLink.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+        inline: 'start',
+    });
+    document.documentElement.scrollTop = scrollTopOriginal;
+}

package/dist/components/EditPageNote.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export { EditPageNote };
+declare function EditPageNote({ pageContext }: {
+    pageContext: {
+        urlPathname: string;
+    };
+}): React.JSX.Element;

package/dist/components/EditPageNote.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RepoLink } from './RepoLink';
+export { EditPageNote };
+function EditPageNote(_a) {
+    var pageContext = _a.pageContext;
+    var text = (React.createElement(React.Fragment, null,
+        React.createElement("span", { style: { fontFamily: 'emoji' } }, "\u270D"),
+        " Edit this page"));
+    return (React.createElement("div", { style: { marginTop: 50 } },
+        React.createElement(RepoLink, { path: '/docs/pages' + pageContext.urlPathname + '/+Page.mdx', text: text, editMode: true })));
+}

package/dist/config/resolveHeadingsData.d.ts

@@ -10,6 +10,5 @@ declare function resolveHeadingsData(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    columnLayouts: number[][];
     activeCategory: string;
 };

package/dist/config/resolveHeadingsData.js

@@ -23,7 +23,7 @@ import { assert, isBrowser, jsxToTextContent } from '../utils/server';
 import { getConfig } from './getConfig';
 import pc from '@brillout/picocolors';
 import { parseTitle } from '../parseTitle';
-import { determineColumnLayoutEntries } from '../renderer/getStyleColumnLayout';
+import { determineColumnEntries } from '../renderer/determineColumnEntries';
 assert(!isBrowser());
 function resolveHeadingsData(pageContext) {
     var config = getConfig();
@@ -41,14 +41,12 @@ function resolveHeadingsData(pageContext) {
     // TODO/refactor: remove navItems
     var navItems;
     var navItemsAll;
-    var columnLayouts;
     {
         var navItemsPageSections = pageSectionsResolved
             .filter(function (pageSection) { return pageSection.pageSectionLevel === 2; })
             .map(pageSectionToNavItem);
         navItemsAll = headingsResolved.map(headingToNavItem);
-        var res = determineColumnLayoutEntries(navItemsAll);
-        columnLayouts = res.columnLayouts;
+        determineColumnEntries(navItemsAll);
         if (isDetachedPage) {
             navItems = __spreadArray([headingToNavItem(activeHeading)], navItemsPageSections, true);
         }
@@ -70,8 +68,6 @@ function resolveHeadingsData(pageContext) {
         pageTitle: pageTitle,
         documentTitle: documentTitle,
         // TODO: don't pass to client-side
-        columnLayouts: columnLayouts,
-        // TODO: don't pass to client-side
         activeCategory: activeCategory,
     };
     return pageContextAddendum;

package/dist/config/resolvePageContext.d.ts

@@ -17,7 +17,6 @@ declare function resolvePageContext(pageContext: PageContextOriginal): {
     isLandingPage: boolean;
     pageTitle: string | null;
     documentTitle: string;
-    columnLayouts: number[][];
     activeCategory: string;
 } & {
     urlPathname: string;

package/dist/docsearch/SearchLink.d.ts

@@ -0,0 +1,4 @@
+export { SearchLink };
+import React from 'react';
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>;
+declare function SearchLink(props: PropsAnchor): React.JSX.Element;

package/dist/docsearch/SearchLink.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export { SearchLink };
+import React from 'react';
+import { openDocsearchModal } from './toggleDocsearchModal';
+function SearchLink(props) {
+    return (React.createElement("a", __assign({}, props, { style: __assign({ height: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer' }, props.style), className: "colorize-on-hover", onClick: function (ev) {
+            ev.preventDefault();
+            openDocsearchModal();
+        }, "aria-label": 'Ctrl\xa0+\xa0K' }),
+        React.createElement(SearchIcon, null),
+        "Search"));
+}
+function SearchIcon() {
+    return (React.createElement("span", { style: { marginRight: 'var(--icon-text-padding)', fontSize: '1.1em' }, className: "decolorize-7" }, "\uD83D\uDD0D"));
+}

package/dist/docsearch/toggleDocsearchModal.d.ts

@@ -0,0 +1,4 @@
+export { closeDocsearchModal };
+export { openDocsearchModal };
+declare function closeDocsearchModal(): void;
+declare function openDocsearchModal(): void;

package/dist/docsearch/toggleDocsearchModal.js

@@ -0,0 +1,26 @@
+export { closeDocsearchModal };
+export { openDocsearchModal };
+import { assert } from '../utils/client';
+function closeDocsearchModal() {
+    if (isClosed())
+        return;
+    toggle();
+}
+function openDocsearchModal() {
+    if (!isClosed())
+        return;
+    toggle();
+}
+// There doesn't seem be an official API to open/close the DocSearch modal:
+// - https://github.com/algolia/docsearch/issues/2321
+// - https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/DocSearch.tsx#L52
+function toggle() {
+    // Trigger https://github.com/algolia/docsearch/blob/90f3c6aabbc324fe49e9a1dfe0906fcd4d90f27b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L71
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }));
+}
+function isClosed() {
+    var test1 = !document.body.classList.contains('DocSearch--active');
+    var test2 = document.getElementsByClassName('DocSearch-Modal').length === 0;
+    assert(test1 === test2);
+    return test1 || test2;
+}

package/dist/navigation/Navigation.d.ts

@@ -14,10 +14,11 @@ type NavItem = {
     menuModalFullWidth?: true;
 };
 type NavItemAll = NavItem & {
-    isColumnLayoutElement?: true;
+    isColumnEntry?: ColumnMap;
 };
 declare function NavigationContent(props: {
     navItems: NavItem[];
     showOnlyRelevant?: true;
     columnLayout?: true;
 }): React.JSX.Element;
+type ColumnMap = Record<number, number>;

package/dist/navigation/Navigation.js

@@ -11,13 +11,15 @@ var __assign = (this && this.__assign) || function () {
 };
 // TODO/refactor: rename file and/or component
 export { NavigationContent };
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { assert, assertWarning, jsxToTextContent } from '../utils/server';
 import './Navigation.css';
 import { parseTitle } from '../parseTitle';
 import { usePageContext } from '../renderer/usePageContext';
 import '@docsearch/css';
 import '../global.d.ts';
+import { getViewportWidth } from '../utils/getViewportWidth';
+import { navWidthMax, navWidthMin } from '../Layout';
 function NavigationContent(props) {
     var pageContext = usePageContext();
     var navItemsWithComputed = getNavItemsWithComputed(props.navItems, pageContext.urlPathname);
@@ -29,38 +31,46 @@ function NavigationContent(props) {
     }
     else {
         assert(!props.showOnlyRelevant);
-        var navItemsColumnLayout = groupByColumnLayout(navItemsWithComputed);
-        var paddingBottom_1 = 40;
-        navContent = (React.createElement(React.Fragment, null, navItemsColumnLayout.map(function (_a, i) {
-            var navItemsColumnEntries = _a.navItemsColumnEntries, isFullWidth = _a.isFullWidth;
-            return (React.createElement("div", { key: i, style: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                } },
-                React.createElement("div", { className: "column-layout-".concat(i) + (!isFullWidth ? '' : ' nav-category nav-category-full-width'), style: {
-                        flexGrow: 1,
-                        columnGap: 20,
-                        paddingBottom: isFullWidth ? paddingBottom_1 : undefined,
-                    } },
-                    navItemsColumnEntries.map(function (navItemColumnEntry, j) { return (React.createElement("div", { key: j, className: 'column-layout-entry' + (isFullWidth ? '' : ' nav-category'), style: {
-                            breakInside: 'avoid',
-                            paddingBottom: !isFullWidth ? paddingBottom_1 : undefined,
-                            paddingTop: isFullWidth ? undefined : 0,
-                            width: '100%',
-                        } },
-                        React.createElement(NavItemComponent, { navItem: navItemColumnEntry }),
-                        navItemColumnEntry.navItemChilds.map(function (navItem, k) { return (React.createElement(NavItemComponent, { navItem: navItem, key: k })); }),
-                        React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItemColumnEntry, paddingBottom: paddingBottom_1 }))); }),
-                    React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : navItemsColumnEntries[0], paddingBottom: paddingBottom_1 }))));
-        })));
+        navContent = React.createElement(NavigationColumnLayout, { navItemsWithComputed: navItemsWithComputed });
     }
     return (React.createElement("div", { className: "navigation-content", style: { marginTop: 10 } }, navContent));
 }
+function NavigationColumnLayout(props) {
+    var _a = useState(), viewportWidth = _a[0], setViewportWidth = _a[1];
+    var updateviewportwidth = function () { return setViewportWidth(getViewportWidth()); };
+    useEffect(function () {
+        updateviewportwidth();
+        window.addEventListener('resize', updateviewportwidth, { passive: true });
+    });
+    var navItemsByColumnLayouts = getNavItemsByColumnLayouts(props.navItemsWithComputed, viewportWidth);
+    var margin = 40;
+    return (React.createElement(React.Fragment, null, navItemsByColumnLayouts.map(function (_a, i) {
+        var columns = _a.columns, isFullWidth = _a.isFullWidth;
+        return (React.createElement("div", { key: i, style: {
+                display: 'flex',
+                width: columns.length * (navWidthMax + 20),
+                justifyContent: 'space-between',
+                maxWidth: '100%',
+                margin: 'auto',
+                marginTop: i === 0 ? -1 * margin : undefined,
+                marginBottom: margin,
+            } },
+            columns.map(function (columnEntry, j) { return (React.createElement("div", { key: j, style: {
+                    flexGrow: 1,
+                    maxWidth: navWidthMax,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingTop: isFullWidth && j !== 0 ? 36 : undefined,
+                } }, columnEntry.map(function (navItems, k) { return (React.createElement("div", { key: k, style: { marginTop: isFullWidth ? undefined : margin } },
+                navItems.map(function (navItem, l) { return (React.createElement(NavItemComponent, { navItem: navItem, key: l })); }),
+                React.createElement(CategoryBorder, { navItemLevel1: isFullWidth ? undefined : navItems[0] }))); }))); }),
+            React.createElement(CategoryBorder, { navItemLevel1: !isFullWidth ? undefined : columns[0][0][0] })));
+    })));
+}
 function CategoryBorder(_a) {
-    var navItemLevel1 = _a.navItemLevel1, paddingBottom = _a.paddingBottom;
+    var navItemLevel1 = _a.navItemLevel1;
     return !navItemLevel1 ? null : (React.createElement("div", { className: "category-border", style: {
             background: navItemLevel1.color,
-            height: "calc(100% - ".concat(paddingBottom, "px - 53px)"),
         } }));
 }
 function NavItemComponent(_a) {
@@ -108,33 +118,54 @@ function NavItemComponent(_a) {
         return React.createElement("span", __assign({}, props));
     }
 }
-function groupByColumnLayout(navItems) {
-    var navItemsColumnLayout = [];
-    var navItemsColumnEntries = [];
+function getNavItemsByColumnLayouts(navItems, viewportWidth) {
+    if (viewportWidth === void 0) { viewportWidth = 0; }
+    var navItemsByColumnEntries = getNavItemsByColumnEntries(navItems);
+    var numberOfColumnsMax = Math.floor(viewportWidth / navWidthMin) || 1;
+    var navItemsByColumnLayouts = navItemsByColumnEntries.map(function (_a) {
+        var columnEntries = _a.columnEntries, isFullWidth = _a.isFullWidth;
+        var numberOfColumns = Math.min(numberOfColumnsMax, columnEntries.length);
+        var columns = [];
+        columnEntries.forEach(function (columnEntry) {
+            var _a;
+            var idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns];
+            assert(idx >= 0);
+            (_a = columns[idx]) !== null && _a !== void 0 ? _a : (columns[idx] = []);
+            columns[idx].push(columnEntry.navItems);
+        });
+        var navItemsByColumnLayout = { columns: columns, isFullWidth: isFullWidth };
+        return navItemsByColumnLayout;
+    });
+    return navItemsByColumnLayouts;
+}
+function getNavItemsByColumnEntries(navItems) {
+    var navItemsByColumnEntries = [];
+    var columnEntries = [];
+    var columnEntry;
     var isFullWidth;
     navItems.forEach(function (navItem) {
         if (navItem.level === 1) {
             var isFullWidthPrevious = isFullWidth;
             isFullWidth = !!navItem.menuModalFullWidth;
             if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-                navItemsColumnLayout.push({ navItemsColumnEntries: navItemsColumnEntries, isFullWidth: isFullWidthPrevious });
-                navItemsColumnEntries = [];
+                navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidthPrevious });
+                columnEntries = [];
             }
         }
         assert(isFullWidth !== undefined);
-        if (navItem.isColumnLayoutElement) {
+        if (navItem.isColumnEntry) {
             assert(navItem.level === 1 || navItem.level === 4);
-            var navItemColumnEntry = __assign(__assign({}, navItem), { navItemChilds: [] });
-            navItemsColumnEntries.push(navItemColumnEntry);
+            columnEntry = { navItems: [navItem], columnMap: navItem.isColumnEntry };
+            columnEntries.push(columnEntry);
         }
         else {
             assert(navItem.level !== 1);
-            navItemsColumnEntries[navItemsColumnEntries.length - 1].navItemChilds.push(navItem);
+            columnEntry.navItems.push(navItem);
         }
     });
     assert(isFullWidth !== undefined);
-    navItemsColumnLayout.push({ navItemsColumnEntries: navItemsColumnEntries, isFullWidth: isFullWidth });
-    return navItemsColumnLayout;
+    navItemsByColumnEntries.push({ columnEntries: columnEntries, isFullWidth: isFullWidth });
+    return navItemsByColumnEntries;
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
     var navItemIdx;

package/dist/renderer/determineColumnEntries.d.ts

@@ -0,0 +1,3 @@
+export { determineColumnEntries };
+import { type NavItemAll } from '../navigation/Navigation';
+declare function determineColumnEntries(navItems: NavItemAll[]): undefined;

package/dist/renderer/{getStyleColumnLayout.js → determineColumnEntries.js}

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,14 +18,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-export { getStyleColumnLayout };
-export { determineColumnLayoutEntries };
-import { css } from '../utils/css';
+export { determineColumnEntries };
 import { assert, assertUsage, isBrowser } from '../utils/server';
 assert(!isBrowser());
-var columnWidthMin = 300;
-var columnWidthMax = 350;
-function determineColumnLayoutEntries(navItems) {
+function determineColumnEntries(navItems) {
     var navItemsWithLength = navItems.map(function (navItem) { return (__assign(__assign({}, navItem), { numberOfHeadings: navItem.level === 1 || navItem.level === 4 ? 0 : null })); });
     var navItemLevel1;
     var navItemLevel4;
@@ -54,7 +46,7 @@ function determineColumnLayoutEntries(navItems) {
         }
     });
     var columnLayouts = [];
-    var columns = [];
+    var columnEntries = [];
     var isFullWidth;
     navItemsWithLength.forEach(function (navItem, i) {
         var isFullWidthBegin = false;
@@ -64,8 +56,8 @@ function determineColumnLayoutEntries(navItems) {
             if (isFullWidth)
                 isFullWidthBegin = true;
             if (isFullWidthPrevious !== undefined && isFullWidthPrevious !== isFullWidth) {
-                columnLayouts.push(columns);
-                columns = [];
+                columnLayouts.push(columnEntries);
+                columnEntries = [];
             }
         }
         var navItemPrevious = navItemsWithLength[i - 1];
@@ -87,64 +79,25 @@ function determineColumnLayoutEntries(navItems) {
                 assert(navItemNext.numberOfHeadings);
                 numberOfHeadings = navItemNext.numberOfHeadings;
             }
-            columns.push(numberOfHeadings);
-            navItems[i].isColumnLayoutElement = true;
+            columnEntries.push({ navItemLeader: navItems[i], numberOfEntries: numberOfHeadings });
         }
     });
-    columnLayouts.push(columns);
-    return { columnLayouts: columnLayouts };
-}
-function getStyleColumnLayout(columnLayouts) {
-    var style = '\n' + css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n.column-layout-entry {\n  break-before: avoid;\n}\n"], ["\n.column-layout-entry {\n  break-before: avoid;\n}\n"])));
-    style += '\n';
-    columnLayouts.forEach(function (columns, i) {
+    assert(columnEntries);
+    columnLayouts.push(columnEntries);
+    columnLayouts.forEach(function (columnEntries) {
         var _loop_1 = function (numberOfColumns) {
-            var styleGivenNumberOfColumns = [];
-            styleGivenNumberOfColumns.push(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n.column-layout-", " {\n  column-count: ", ";\n  max-width: min(100%, ", "px);\n}\n"], ["\n.column-layout-", " {\n  column-count: ", ";\n  max-width: min(100%, ", "px);\n}\n"])), i, numberOfColumns, columnWidthMax * numberOfColumns));
-            var columnsIdMap = determineColumns(columns, numberOfColumns);
-            var columnBreakPoints = determineColumnBreakPoints(columnsIdMap);
-            columnBreakPoints.forEach(function (columnBreakPoint, columnUngroupedId) {
-                if (!columnBreakPoint)
-                    return;
-                styleGivenNumberOfColumns.push(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n.column-layout-", " .column-layout-entry:nth-child(", ") {\n  break-before: column;\n  padding-top: 36px;\n}\n"], ["\n.column-layout-", " .column-layout-entry:nth-child(", ") {\n  break-before: column;\n  padding-top: 36px;\n}\n"])), i, columnUngroupedId + 1));
+            var columnsIdMap = determineColumns(columnEntries.map(function (columnEntry) { return columnEntry.numberOfEntries; }), numberOfColumns);
+            columnEntries.forEach(function (columnEntry, i) {
+                var _a;
+                var _b;
+                (_a = (_b = columnEntry.navItemLeader).isColumnEntry) !== null && _a !== void 0 ? _a : (_b.isColumnEntry = {});
+                columnEntry.navItemLeader.isColumnEntry[numberOfColumns] = columnsIdMap[i];
             });
-            {
-                assert(styleGivenNumberOfColumns.length > 0);
-                var getMaxWidth = function (columns) { return (columns + 1) * columnWidthMin - 1; };
-                var isFirst = numberOfColumns === 1;
-                var isLast = numberOfColumns === columns.length;
-                var query = [
-                    !isFirst && "(min-width: ".concat(getMaxWidth(numberOfColumns - 1) + 1, "px)"),
-                    !isLast && "(max-width: ".concat(getMaxWidth(numberOfColumns), "px)"),
-                ]
-                    .filter(Boolean)
-                    .join(' and ');
-                if (query) {
-                    styleGivenNumberOfColumns = __spreadArray(__spreadArray(["@container ".concat(query, " {")], styleGivenNumberOfColumns, true), ["}"], false);
-                }
-            }
-            style += styleGivenNumberOfColumns.join('\n') + '\n';
         };
-        for (var numberOfColumns = columns.length; numberOfColumns >= 1; numberOfColumns--) {
+        for (var numberOfColumns = columnEntries.length; numberOfColumns >= 1; numberOfColumns--) {
             _loop_1(numberOfColumns);
         }
     });
-    return style;
-}
-function determineColumnBreakPoints(columnsIdMap) {
-    assert(columnsIdMap[0] === 0);
-    var columnGroupedIdBefore = 0;
-    var columnBreakPoints = columnsIdMap.map(function (columnGroupedId) {
-        assert([
-            //
-            columnGroupedIdBefore,
-            columnGroupedIdBefore + 1,
-        ].includes(columnGroupedId));
-        var val = columnGroupedId !== columnGroupedIdBefore;
-        columnGroupedIdBefore = columnGroupedId;
-        return val;
-    });
-    return columnBreakPoints;
 }
 function determineColumns(columnsUnmerged, numberOfColumns) {
     assert(numberOfColumns <= columnsUnmerged.length);
@@ -188,4 +141,3 @@ function mergeColumns(columnsMerging, numberOfColumns) {
     assert(columnsMergingMod.length === columnsMerging.length - 1);
     return mergeColumns(columnsMergingMod, numberOfColumns);
 }
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/utils/PassTrough.d.ts

@@ -0,0 +1,3 @@
+export { PassThrough };
+import React from 'react';
+declare function PassThrough({ children }: any): React.JSX.Element;

package/dist/utils/PassTrough.js

@@ -0,0 +1,6 @@
+export { PassThrough };
+import React from 'react';
+function PassThrough(_a) {
+    var children = _a.children;
+    return React.createElement(React.Fragment, null, children);
+}

package/dist/utils/getViewportWidth.d.ts

@@ -0,0 +1 @@
+export declare function getViewportWidth(): number;

package/dist/utils/getViewportWidth.js

@@ -0,0 +1,4 @@
+export function getViewportWidth() {
+    // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+    return document.documentElement.clientWidth;
+}