@trebired/frontend 25.1.0 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 25.2.0
+
+- The page outline is part of the page rather than a rail floating over it. `PageOutlineLayout` takes the same `items` as `PageOutline` plus the page content and puts the list in a column on the left of the text, where it sticks to the top of the viewport as the reader scrolls, so nothing is covered and the list sits where a reader of a long document looks for it. It appears from 1024px, where there is room beside the content, and below that the layout is a single column. Called with no items it renders the content alone, so a page short enough to need no outline needs no branch at the call site.
+
 ## 25.1.0
 
 - A text document declares how it is presented. `parts: disclosure` in front matter asks for an accordion and `prose`, the default, for articles, so a consumer renders what the document says it is instead of mapping a slug to a layout in its own code. Sections and parts carry an `id` slugged from the heading, with diacritics folded, and the paragraphs before the first section are the document's `lead`.

package/README.md

@@ -153,7 +153,7 @@ parts: disclosure
 
 ### Page Outline
 
-`PageOutline` takes `items` of `{ id, label }` and renders a fixed rail beside the page, listing the sections and marking the one being read. A click scrolls smoothly to the section, instantly under reduced motion, moves focus to it so the keyboard carries on from there, and replaces the fragment in the address bar rather than stacking a history entry per jump. It appears from 1280px, where there is room beside the content, and otherwise renders nothing: the page is still read by scrolling.
+`PageOutline` takes `items` of `{ id, label }`, lists the sections of a page and marks the one being read. `PageOutlineLayout` takes the same `items` and the page content, and lays them out side by side: the list in a column on the left, the content beside it, the column sticking to the top of the viewport while the reader scrolls. A click scrolls smoothly to the section, instantly under reduced motion, moves focus to it so the keyboard carries on from there, and replaces the fragment in the address bar rather than stacking a history entry per jump. The column appears from 1024px, where there is room beside the content; below that the layout is a single column and the list renders nothing, because the page is still read by scrolling. Called with no items the layout renders the content alone.
 
 
 ### Site Footer

package/dist/layout/components/outline.d.ts

@@ -8,7 +8,11 @@ type PageOutlineProps = {
     items: PageOutlineItem[];
     label?: string;
 };
+type PageOutlineLayoutProps = PageOutlineProps & {
+    children: ReactNode;
+};
 declare function PageOutline(props: PageOutlineProps): import("react").JSX.Element;
-export { PageOutline };
-export type { PageOutlineItem, PageOutlineProps };
+declare function PageOutlineLayout(props: PageOutlineLayoutProps): import("react").JSX.Element;
+export { PageOutline, PageOutlineLayout };
+export type { PageOutlineItem, PageOutlineLayoutProps, PageOutlineProps };
 //# sourceMappingURL=outline.d.ts.map

package/dist/layout/components/outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA2B3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,sBAAsB,GAAG,gBAAgB,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA8DF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA2B3C;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAYvD;AAED,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/layout/components/outline.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { classNames } from "../../components/index.js";
 import { frontendClassName, frontendElementClass } from "../../namespace/index.js";
 import { motionReduced } from "./../../a11y/attributes.js";
 const block = "page-outline";
+const layoutBlock = "page-outline-layout";
 const ACTIVE_LINE = 0.3;
 function activeId(items) {
     let current = "";
@@ -72,5 +73,11 @@ function PageOutline(props) {
                         scrollToSection(item.id);
                     }, children: item.label }) }, item.id))) }) }));
 }
-export { PageOutline };
+function PageOutlineLayout(props) {
+    const { children, className, items, label } = props;
+    if (items.length === 0)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: classNames(frontendClassName(layoutBlock), className), children: [_jsx("div", { className: frontendElementClass(layoutBlock, "rail"), children: _jsx(PageOutline, { items: items, label: label }) }), _jsx("div", { className: frontendElementClass(layoutBlock, "content"), children: children })] }));
+}
+export { PageOutline, PageOutlineLayout };
 //# sourceMappingURL=outline.js.map

package/dist/layout/components/outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"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"}

package/dist/layout/styles/outline.scss

@@ -4,8 +4,10 @@
   @return var(#{ns.css-var("shell-outline-" + $name)}, $fallback);
 }
 
+$anchor: var(#{ns.css-var("anchor-offset")}, var(#{ns.css-var("layout-top-offset")}, 0px));
+
 #{ns.class("page-outline")} {
-  display: none;
+  display: block;
 }
 
 #{ns.element-class("page-outline", "list")} {
@@ -22,7 +24,7 @@
 
 #{ns.element-class("page-outline", "link")} {
   display: block;
-  max-width: token("max-width", 11rem);
+  max-width: token("max-width", 100%);
   padding-block: token("link-py", 0.15rem);
   padding-inline-start: token("link-px", 0.75rem);
   border-inline-start: token("link-border", 2px solid transparent);
@@ -44,13 +46,31 @@
   color: token("link-active-color", currentColor);
 }
 
-@media (min-width: 1280px) {
-  #{ns.class("page-outline")} {
-    position: fixed;
-    z-index: token("z-index", var(#{ns.css-var("z-header")}, 920));
+#{ns.class("page-outline-layout")} {
+  display: grid;
+  gap: token("layout-gap", var(#{ns.css-var("gap-lg")}, 32px));
+  grid-template-columns: minmax(0, 1fr);
+}
+
+#{ns.element-class("page-outline-layout", "rail")} {
+  display: none;
+}
+
+#{ns.element-class("page-outline-layout", "content")} {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  #{ns.class("page-outline-layout")} {
+    grid-template-columns: token("layout-column", 13rem) minmax(0, 1fr);
+  }
+
+  #{ns.element-class("page-outline-layout", "rail")} {
+    position: sticky;
     display: block;
-    inset-block-start: 50%;
-    inset-inline-end: token("offset", 1.5rem);
-    transform: translateY(-50%);
+    align-self: start;
+    inset-block-start: calc(#{$anchor} + token("offset", 1.5rem));
+    overflow-y: auto;
+    max-block-size: calc(100vh - #{$anchor} - token("offset", 1.5rem) * 2);
   }
 }

package/dist/src/layout/components/outline.d.ts

@@ -8,7 +8,11 @@ type PageOutlineProps = {
     items: PageOutlineItem[];
     label?: string;
 };
+type PageOutlineLayoutProps = PageOutlineProps & {
+    children: ReactNode;
+};
 declare function PageOutline(props: PageOutlineProps): import("react").JSX.Element;
-export { PageOutline };
-export type { PageOutlineItem, PageOutlineProps };
+declare function PageOutlineLayout(props: PageOutlineLayoutProps): import("react").JSX.Element;
+export { PageOutline, PageOutlineLayout };
+export type { PageOutlineItem, PageOutlineLayoutProps, PageOutlineProps };
 //# sourceMappingURL=outline.d.ts.map

package/dist/src/layout/components/outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA2B3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,sBAAsB,GAAG,gBAAgB,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA8DF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA2B3C;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAYvD;AAED,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/layout/components/outline.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { classNames } from "../../../components/index.js";
 import { frontendClassName, frontendElementClass } from "../../../namespace/index.js";
 import { motionReduced } from "./../../a11y/attributes.js";
 const block = "page-outline";
+const layoutBlock = "page-outline-layout";
 const ACTIVE_LINE = 0.3;
 function activeId(items) {
     let current = "";
@@ -72,5 +73,11 @@ function PageOutline(props) {
                         scrollToSection(item.id);
                     }, children: item.label }) }, item.id))) }) }));
 }
-export { PageOutline };
+function PageOutlineLayout(props) {
+    const { children, className, items, label } = props;
+    if (items.length === 0)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("div", { className: classNames(frontendClassName(layoutBlock), className), children: [_jsx("div", { className: frontendElementClass(layoutBlock, "rail"), children: _jsx(PageOutline, { items: items, label: label }) }), _jsx("div", { className: frontendElementClass(layoutBlock, "content"), children: children })] }));
+}
+export { PageOutline, PageOutlineLayout };
 //# sourceMappingURL=outline.js.map

package/dist/src/layout/components/outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAa3D,MAAM,KAAK,GAAG,cAAc,CAAC;AAC7B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,SAAS,QAAQ,CAAC,KAAwB;IACxC,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,OAAO,GAAG,CAAC,QAAQ,CAAC;IACxB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;IAC7D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,OAAO;YAAE,SAAS;QACvB,MAAM,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAChD,IAAI,GAAG,GAAG,IAAI,IAAI,GAAG,IAAI,OAAO;YAAE,SAAS;QAC3C,OAAO,GAAG,GAAG,CAAC;QACd,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;IACpB,CAAC;IACD,OAAO,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC;AACvC,CAAC;AAED,SAAS,eAAe,CAAC,EAAU;IACjC,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACtC,MAAM,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IACzF,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;AAClD,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAwB;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAET,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,GAAG,GAAG,GAAG,EAAE;YACf,KAAK,GAAG,CAAC,CAAC;YACV,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,KAAK;gBAAE,KAAK,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;QACjD,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,OAAO,GAAG,EAAE;YACV,IAAI,KAAK;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;YACvC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAC/C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAErB,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,WAAW,CAAC,KAAuB;IAC1C,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpC,OAAO,CACL,4BAAiB,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAClF,aAAI,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,YACjD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACf,uBACA,4BACc,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EAC9C,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;wBACf,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ;4BAAE,OAAO;wBAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC7B,CAAC,YAEA,IAAI,CAAC,KAAK,GACP,IAZK,IAAI,CAAC,EAAE,CAaX,CACV,CAAC,GACG,GACC,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../../../src/layout/components/outline.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -8,7 +8,7 @@
     }
   },
   "name": "@trebired/frontend",
-  "version": "25.1.0",
+  "version": "25.2.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,