@byline/host-tanstack-start 2.2.6 → 2.2.8

package/dist/admin-shell/chrome/admin-app-bar_module.css

@@ -20,12 +20,15 @@
 }
 
 :is(.left-wd7pIB, .byline-admin-app-bar-left) {
+  flex: auto;
   align-items: center;
   gap: 1rem;
+  min-width: 0;
   display: flex;
 }
 
 :is(.right-w1uns3, .byline-admin-app-bar-right) {
+  flex: none;
   align-items: center;
   gap: 1rem;
   font-size: .875rem;

package/dist/admin-shell/chrome/breadcrumbs/breadcrumbs.d.ts

@@ -1,10 +1,3 @@
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
 import type { Breadcrumb } from './@types.js';
 export declare function Breadcrumbs({ breadcrumbs, className, homeLabel, homePath, }: {
     breadcrumbs: Breadcrumb[];

package/dist/admin-shell/chrome/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,12 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Dropdown, EllipsisIcon } from "@byline/ui/react";
 import classnames from "classnames";
 import { Link } from "../loose-router.js";
 import breadcrumbs_module from "./breadcrumbs.module.js";
+const useIsoLayoutEffect = "u" > typeof window ? useLayoutEffect : useEffect;
+const MAX_LABEL_LENGTH = 20;
 function truncate(str, length, useWordBoundary = true, useSuffix = true) {
     if (null == str || str.length <= length) return str;
     const subString = str.slice(0, length - 2);
@@ -9,69 +14,212 @@ function truncate(str, length, useWordBoundary = true, useSuffix = true) {
     return useSuffix ? `${truncated}...` : truncated;
 }
 function Breadcrumbs({ breadcrumbs, className, homeLabel = 'Home', homePath = '/' }) {
-    return /*#__PURE__*/ jsx("nav", {
+    const navRef = useRef(null);
+    const measureRef = useRef(null);
+    const [visibleIndices, setVisibleIndices] = useState(()=>breadcrumbs.map((_, i)=>i));
+    useIsoLayoutEffect(()=>{
+        setVisibleIndices(breadcrumbs.map((_, i)=>i));
+    }, [
+        breadcrumbs
+    ]);
+    useIsoLayoutEffect(()=>{
+        const nav = navRef.current;
+        const measure = measureRef.current;
+        if (!nav || !measure) return;
+        const compute = ()=>{
+            const children = Array.from(measure.children);
+            if (children.length !== breadcrumbs.length + 2) return;
+            const containerWidth = nav.clientWidth;
+            const homeWidth = children[0].offsetWidth;
+            const triggerWidth = children[children.length - 1].offsetWidth;
+            const itemWidths = children.slice(1, -1).map((el)=>el.offsetWidth);
+            const gap = Number.parseFloat(getComputedStyle(measure).gap) || 4;
+            const n = itemWidths.length;
+            let next;
+            const allTotal = homeWidth + itemWidths.reduce((a, b)=>a + b, 0) + n * gap;
+            if (n <= 2 || allTotal <= containerWidth) next = itemWidths.map((_, i)=>i);
+            else {
+                const visible = new Set([
+                    0,
+                    n - 1
+                ]);
+                const baselineGaps = 4 * gap;
+                let used = homeWidth + itemWidths[0] + triggerWidth + itemWidths[n - 1] + baselineGaps;
+                if (used > containerWidth) {
+                    visible.delete(0);
+                    used = homeWidth + triggerWidth + itemWidths[n - 1] + 3 * gap;
+                }
+                for(let i = n - 2; i >= 1; i--){
+                    if (visible.has(i)) continue;
+                    const cost = itemWidths[i] + gap;
+                    if (used + cost > containerWidth) break;
+                    used += cost;
+                    visible.add(i);
+                }
+                next = [
+                    ...visible
+                ].sort((a, b)=>a - b);
+            }
+            setVisibleIndices((prev)=>{
+                if (prev.length === next.length && prev.every((v, i)=>v === next[i])) return prev;
+                return next;
+            });
+        };
+        compute();
+        const ro = new ResizeObserver(compute);
+        ro.observe(nav);
+        return ()=>ro.disconnect();
+    }, [
+        breadcrumbs
+    ]);
+    const overflowed = useMemo(()=>{
+        const visible = new Set(visibleIndices);
+        return breadcrumbs.filter((_, i)=>!visible.has(i));
+    }, [
+        breadcrumbs,
+        visibleIndices
+    ]);
+    const visibleSet = new Set(visibleIndices);
+    const lastIndex = breadcrumbs.length - 1;
+    let overflowEmitted = false;
+    const rendered = [];
+    for(let i = 0; i < breadcrumbs.length; i++)if (visibleSet.has(i)) rendered.push(renderBreadcrumb(breadcrumbs[i], i === lastIndex));
+    else if (!overflowEmitted) {
+        overflowEmitted = true;
+        rendered.push(/*#__PURE__*/ jsx(OverflowDropdown, {
+            items: overflowed
+        }, "__overflow__"));
+    }
+    return /*#__PURE__*/ jsxs("nav", {
+        ref: navRef,
         "aria-label": "Breadcrumb",
         className: classnames('byline-breadcrumbs', breadcrumbs_module.nav, className),
-        children: /*#__PURE__*/ jsxs("ul", {
-            className: classnames('byline-breadcrumbs-list', breadcrumbs_module.list),
-            children: [
-                /*#__PURE__*/ jsx("li", {
-                    className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
-                    children: /*#__PURE__*/ jsxs(Link, {
-                        to: homePath,
-                        className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
+        children: [
+            /*#__PURE__*/ jsxs("ul", {
+                className: classnames('byline-breadcrumbs-list', breadcrumbs_module.list),
+                children: [
+                    /*#__PURE__*/ jsx(HomeItem, {
+                        homePath: homePath,
+                        homeLabel: homeLabel
+                    }),
+                    rendered
+                ]
+            }),
+            /*#__PURE__*/ jsxs("ul", {
+                ref: measureRef,
+                "aria-hidden": true,
+                className: classnames(breadcrumbs_module.list, breadcrumbs_module.measure),
+                children: [
+                    /*#__PURE__*/ jsx(HomeItem, {
+                        homePath: homePath,
+                        homeLabel: homeLabel
+                    }),
+                    breadcrumbs.map((b, i)=>renderBreadcrumb(b, i === lastIndex)),
+                    /*#__PURE__*/ jsxs("li", {
+                        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
                         children: [
-                            /*#__PURE__*/ jsx("svg", {
-                                role: "presentation",
-                                className: classnames('byline-breadcrumbs-home-icon', breadcrumbs_module.homeIcon),
-                                fill: "currentColor",
-                                viewBox: "0 0 20 20",
-                                xmlns: "http://www.w3.org/2000/svg",
-                                children: /*#__PURE__*/ jsx("path", {
-                                    d: "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+                            /*#__PURE__*/ jsx(ChevronIcon, {}),
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
+                                children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                                    className: classnames('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
                                 })
-                            }),
-                            homeLabel
+                            })
                         ]
                     })
+                ]
+            })
+        ]
+    });
+}
+function renderBreadcrumb(breadcrumb, isLeaf) {
+    return /*#__PURE__*/ jsxs("li", {
+        "aria-current": isLeaf ? 'page' : void 0,
+        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        children: [
+            /*#__PURE__*/ jsx(ChevronIcon, {
+                isLeaf: isLeaf
+            }),
+            isLeaf ? /*#__PURE__*/ jsx("span", {
+                className: classnames('byline-breadcrumbs-leaf', breadcrumbs_module.leaf),
+                children: truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)
+            }) : /*#__PURE__*/ jsx(Link, {
+                to: breadcrumb.href,
+                className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
+                children: truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)
+            })
+        ]
+    }, breadcrumb.href);
+}
+function HomeItem({ homePath, homeLabel }) {
+    return /*#__PURE__*/ jsx("li", {
+        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        children: /*#__PURE__*/ jsxs(Link, {
+            to: homePath,
+            className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
+            children: [
+                /*#__PURE__*/ jsx("svg", {
+                    role: "presentation",
+                    className: classnames('byline-breadcrumbs-home-icon', breadcrumbs_module.homeIcon),
+                    fill: "currentColor",
+                    viewBox: "0 0 20 20",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+                    })
                 }),
-                null != breadcrumbs && breadcrumbs.length > 0 && breadcrumbs.map((breadcrumb, index)=>{
-                    const isLeaf = index === breadcrumbs.length - 1;
-                    return /*#__PURE__*/ jsx("li", {
-                        "aria-current": isLeaf ? 'page' : void 0,
-                        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
-                        children: /*#__PURE__*/ jsxs("div", {
-                            className: classnames('byline-breadcrumbs-item-row', breadcrumbs_module.item),
-                            children: [
-                                /*#__PURE__*/ jsx("svg", {
-                                    role: "presentation",
-                                    className: classnames('byline-breadcrumbs-chevron', breadcrumbs_module.chevron, {
-                                        'byline-breadcrumbs-chevron-current': isLeaf,
-                                        [breadcrumbs_module.chevronCurrent]: isLeaf
-                                    }),
-                                    fill: "currentColor",
-                                    viewBox: "0 0 20 20",
-                                    xmlns: "http://www.w3.org/2000/svg",
-                                    children: /*#__PURE__*/ jsx("path", {
-                                        fillRule: "evenodd",
-                                        d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
-                                        clipRule: "evenodd"
-                                    })
-                                }),
-                                isLeaf ? /*#__PURE__*/ jsx("span", {
-                                    className: classnames('byline-breadcrumbs-leaf', breadcrumbs_module.leaf),
-                                    children: truncate(breadcrumb.label, 20, true)
-                                }) : /*#__PURE__*/ jsx(Link, {
-                                    to: breadcrumb.href,
-                                    className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
-                                    children: truncate(breadcrumb.label, 20, true)
-                                })
-                            ]
-                        })
-                    }, breadcrumb.href);
-                })
+                homeLabel
             ]
         })
     });
 }
+function ChevronIcon({ isLeaf = false }) {
+    return /*#__PURE__*/ jsx("svg", {
+        role: "presentation",
+        className: classnames('byline-breadcrumbs-chevron', breadcrumbs_module.chevron, {
+            'byline-breadcrumbs-chevron-current': isLeaf,
+            [breadcrumbs_module.chevronCurrent]: isLeaf
+        }),
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            fillRule: "evenodd",
+            d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+            clipRule: "evenodd"
+        })
+    });
+}
+function OverflowDropdown({ items }) {
+    return /*#__PURE__*/ jsxs("li", {
+        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        children: [
+            /*#__PURE__*/ jsx(ChevronIcon, {}),
+            /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        "aria-label": "Show hidden breadcrumbs",
+                        className: classnames('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
+                        children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                            className: classnames('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsx(Dropdown.Content, {
+                            sideOffset: 5,
+                            align: "start",
+                            children: items.map((item)=>/*#__PURE__*/ jsx(Dropdown.Item, {
+                                    className: classnames('byline-breadcrumbs-overflow-item', breadcrumbs_module.overflowItem),
+                                    render: /*#__PURE__*/ jsx(Link, {
+                                        to: item.href
+                                    }),
+                                    children: item.label
+                                }, item.href))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
 export { Breadcrumbs };

package/dist/admin-shell/chrome/breadcrumbs/breadcrumbs.module.js

@@ -2,11 +2,15 @@ import "./breadcrumbs_module.css";
 const breadcrumbs_module = {
     nav: "nav-v78C9V",
     list: "list-YJoq_f",
+    measure: "measure-lRWlDd",
     item: "item-BqSVfE",
     link: "link-g18cLE",
     leaf: "leaf-X3Q13H",
     homeIcon: "homeIcon-yUKJfw",
     chevron: "chevron-VWUUs9",
-    chevronCurrent: "chevronCurrent-vgprvC"
+    chevronCurrent: "chevronCurrent-vgprvC",
+    overflowTrigger: "overflowTrigger-Y8XJnz",
+    overflowIcon: "overflowIcon-FMJ1GK",
+    overflowItem: "overflowItem-zVrxKo"
 };
 export default breadcrumbs_module;

package/dist/admin-shell/chrome/breadcrumbs/breadcrumbs_module.css

@@ -1,9 +1,14 @@
 :is(.nav-v78C9V, .byline-breadcrumbs) {
+  flex: auto;
+  min-width: 0;
   display: flex;
+  position: relative;
+  overflow: hidden;
 }
 
 :is(.list-YJoq_f, .byline-breadcrumbs-list) {
-  flex-wrap: wrap;
+  white-space: nowrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: .25rem;
   margin: 0;
@@ -12,7 +17,16 @@
   display: inline-flex;
 }
 
+.measure-lRWlDd {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 :is(.item-BqSVfE, .byline-breadcrumbs-item) {
+  flex: none;
   align-items: center;
   margin: 0;
   padding: 0;
@@ -79,3 +93,85 @@
   color: var(--gray-600);
 }
 
+:is(.overflowTrigger-Y8XJnz, .byline-breadcrumbs-overflow-trigger) {
+  color: var(--gray-700);
+  cursor: pointer;
+  font: inherit;
+  background: none;
+  border: 0;
+  border-radius: .25rem;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0 .125rem;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.overflowTrigger-Y8XJnz:hover {
+  background-color: var(--gray-100);
+  color: var(--gray-900);
+}
+
+.byline-breadcrumbs-overflow-trigger:hover {
+  background-color: var(--gray-100);
+  color: var(--gray-900);
+}
+
+.overflowTrigger-Y8XJnz:focus-visible {
+  outline: 2px solid var(--gray-400);
+  outline-offset: 1px;
+}
+
+.byline-breadcrumbs-overflow-trigger:focus-visible {
+  outline: 2px solid var(--gray-400);
+  outline-offset: 1px;
+}
+
+:is(:is([data-theme="dark"], .dark) .overflowTrigger-Y8XJnz, :is([data-theme="dark"], .dark) .byline-breadcrumbs-overflow-trigger) {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .overflowTrigger-Y8XJnz:hover {
+  background-color: var(--gray-800);
+  color: #fff;
+}
+
+:is([data-theme="dark"], .dark) .byline-breadcrumbs-overflow-trigger:hover {
+  background-color: var(--gray-800);
+  color: #fff;
+}
+
+:is(.overflowIcon-FMJ1GK, .byline-breadcrumbs-overflow-icon) {
+  width: 1rem;
+  height: 1rem;
+}
+
+:is(.overflowItem-zVrxKo, .byline-breadcrumbs-overflow-item) {
+  color: var(--gray-900);
+  cursor: pointer;
+  padding: .375rem .625rem;
+  font-size: .875rem;
+  text-decoration: none;
+}
+
+.overflowItem-zVrxKo:hover {
+  color: var(--gray-900);
+}
+
+.byline-breadcrumbs-overflow-item:hover {
+  color: var(--gray-900);
+}
+
+:is(:is([data-theme="dark"], .dark) .overflowItem-zVrxKo, :is([data-theme="dark"], .dark) .byline-breadcrumbs-overflow-item) {
+  color: var(--gray-300);
+}
+
+:is([data-theme="dark"], .dark) .overflowItem-zVrxKo:hover {
+  color: #fff;
+}
+
+:is([data-theme="dark"], .dark) .byline-breadcrumbs-overflow-item:hover {
+  color: #fff;
+}
+

package/dist/admin-shell/collections/preview-link.js

@@ -20,7 +20,7 @@ const PreviewLink = ({ collectionPath, doc, adminConfig, locale, className })=>{
         setBusy(true);
         try {
             await enablePreviewModeFn();
-            window.open(url, '_blank', 'noopener,noreferrer');
+            window.location.assign(url);
         } catch (err) {
             toastManager.add({
                 title: 'Preview',
@@ -42,7 +42,7 @@ const PreviewLink = ({ collectionPath, doc, adminConfig, locale, className })=>{
         variant: "text",
         disabled: busy,
         onClick: handleClick,
-        "aria-label": "Open preview in new tab",
+        "aria-label": "Open preview",
         title: "Preview",
         children: /*#__PURE__*/ jsx(ExternalLinkIcon, {
             width: "20px",

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -107,12 +107,12 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/auth": "2.2.6",
-    "@byline/client": "2.2.6",
-    "@byline/core": "2.2.6",
-    "@byline/ui": "2.2.6",
-    "@byline/ai": "2.2.6",
-    "@byline/admin": "2.2.6"
+    "@byline/admin": "2.2.8",
+    "@byline/ai": "2.2.8",
+    "@byline/core": "2.2.8",
+    "@byline/auth": "2.2.8",
+    "@byline/ui": "2.2.8",
+    "@byline/client": "2.2.8"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/chrome/admin-app-bar.module.css

@@ -37,6 +37,8 @@
   display: flex;
   align-items: center;
   gap: 1rem;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .right,
@@ -44,6 +46,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
+  flex: 0 0 auto;
   font-size: 0.875rem;
   font-weight: 400;
 }

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs.module.css

@@ -2,23 +2,31 @@
  * Breadcrumbs — admin app-bar trail.
  *
  * Override handles:
- *   .byline-breadcrumbs       — outer <nav>
- *   .byline-breadcrumbs-list  — inline <ul>
- *   .byline-breadcrumbs-item  — each <li>
- *   .byline-breadcrumbs-link  — clickable home + intermediate links
- *   .byline-breadcrumbs-leaf  — current-page (final) span
- *   .byline-breadcrumbs-icon  — chevron / home icons
+ *   .byline-breadcrumbs                  — outer <nav>
+ *   .byline-breadcrumbs-list             — inline <ul>
+ *   .byline-breadcrumbs-item             — each <li>
+ *   .byline-breadcrumbs-link             — clickable home + intermediate links
+ *   .byline-breadcrumbs-leaf             — current-page (final) span
+ *   .byline-breadcrumbs-icon             — chevron / home icons
+ *   .byline-breadcrumbs-overflow-trigger — "…" button shown when items collapse
+ *   .byline-breadcrumbs-overflow-icon    — ellipsis icon inside the trigger
+ *   .byline-breadcrumbs-overflow-item    — each link inside the overflow dropdown
  */
 
 .nav,
 :global(.byline-breadcrumbs) {
   display: flex;
+  position: relative;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
 }
 
 .list,
 :global(.byline-breadcrumbs-list) {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  white-space: nowrap;
   align-items: center;
   list-style: none;
   margin: 0;
@@ -26,12 +34,24 @@
   gap: 0.25rem;
 }
 
+/* Hidden measurement layer: mirrors all items so we can read their widths
+   without affecting layout. Positioned absolutely with visibility hidden so
+   it takes up no flow space and isn't focusable / clickable. */
+.measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .item,
 :global(.byline-breadcrumbs-item) {
   display: inline-flex;
   align-items: center;
   margin: 0;
   padding: 0;
+  flex: 0 0 auto;
 }
 
 .link,
@@ -91,3 +111,67 @@
 :is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-chevron-current) {
   color: var(--gray-600);
 }
+
+.overflowTrigger,
+:global(.byline-breadcrumbs-overflow-trigger) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0 0.125rem;
+  background: transparent;
+  border: 0;
+  border-radius: 0.25rem;
+  color: var(--gray-700);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+}
+.overflowTrigger:hover,
+:global(.byline-breadcrumbs-overflow-trigger:hover) {
+  background-color: var(--gray-100);
+  color: var(--gray-900);
+}
+.overflowTrigger:focus-visible,
+:global(.byline-breadcrumbs-overflow-trigger:focus-visible) {
+  outline: 2px solid var(--gray-400);
+  outline-offset: 1px;
+}
+
+:is([data-theme="dark"], :global(.dark)) .overflowTrigger,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-overflow-trigger) {
+  color: var(--gray-400);
+}
+:is([data-theme="dark"], :global(.dark)) .overflowTrigger:hover,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-overflow-trigger:hover) {
+  background-color: var(--gray-800);
+  color: #ffffff;
+}
+
+.overflowIcon,
+:global(.byline-breadcrumbs-overflow-icon) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.overflowItem,
+:global(.byline-breadcrumbs-overflow-item) {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  color: var(--gray-900);
+  text-decoration: none;
+  cursor: pointer;
+}
+.overflowItem:hover,
+:global(.byline-breadcrumbs-overflow-item:hover) {
+  color: var(--gray-900);
+}
+
+:is([data-theme="dark"], :global(.dark)) .overflowItem,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-overflow-item) {
+  color: var(--gray-300);
+}
+:is([data-theme="dark"], :global(.dark)) .overflowItem:hover,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-overflow-item:hover) {
+  color: #ffffff;
+}

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /**
  * This Source Code is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -6,12 +8,19 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { Dropdown, EllipsisIcon } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { Link } from '../loose-router.js'
 import styles from './breadcrumbs.module.css'
 import type { Breadcrumb } from './@types.js'
 
+const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+const MAX_LABEL_LENGTH = 20
+
 function truncate(str: string, length: number, useWordBoundary = true, useSuffix = true): string {
   if (str == null || str.length <= length) return str
   const subString = str.slice(0, length - 2)
@@ -30,67 +39,219 @@ export function Breadcrumbs({
   homeLabel?: string
   homePath?: string
 }): React.JSX.Element {
+  const navRef = useRef<HTMLElement | null>(null)
+  const measureRef = useRef<HTMLUListElement | null>(null)
+  // visibleIndices = indices into breadcrumbs[] that are shown inline.
+  // Anything missing from this set is rolled into the overflow dropdown.
+  // Default to "all visible" so SSR and pre-measurement paints look right.
+  const [visibleIndices, setVisibleIndices] = useState<number[]>(() => breadcrumbs.map((_, i) => i))
+
+  // Reset visibility when breadcrumbs change; the measurement effect below
+  // will collapse again on the next layout tick if needed.
+  useIsoLayoutEffect(() => {
+    setVisibleIndices(breadcrumbs.map((_, i) => i))
+  }, [breadcrumbs])
+
+  useIsoLayoutEffect(() => {
+    const nav = navRef.current
+    const measure = measureRef.current
+    if (!nav || !measure) return
+
+    const compute = () => {
+      // measurement layer order: [home, ...breadcrumbs..., overflow-trigger]
+      const children = Array.from(measure.children) as HTMLElement[]
+      if (children.length !== breadcrumbs.length + 2) return
+
+      const containerWidth = nav.clientWidth
+      const homeWidth = children[0].offsetWidth
+      const triggerWidth = children[children.length - 1].offsetWidth
+      const itemWidths = children.slice(1, -1).map((el) => el.offsetWidth)
+      const gap = Number.parseFloat(getComputedStyle(measure).gap) || 4
+
+      const n = itemWidths.length
+      let next: number[]
+
+      // n <= 1: just Home + (optional) leaf — never collapse.
+      // n === 2: per design, two-segment trails (Home > Dashboard > Leaf) never collapse.
+      const allTotal = homeWidth + itemWidths.reduce((a, b) => a + b, 0) + n * gap
+      if (n <= 2 || allTotal <= containerWidth) {
+        next = itemWidths.map((_, i) => i)
+      } else {
+        // Always preserve Dashboard (idx 0) and Leaf (idx n-1).
+        // Then add middle items greedily from leaf-adjacent backward.
+        const visible = new Set<number>([0, n - 1])
+        // Gap accounting: between home/dashboard, dashboard/trigger,
+        // trigger/leaf, plus the leading gap before home.
+        const baselineGaps = 4 * gap
+        let used = homeWidth + itemWidths[0] + triggerWidth + itemWidths[n - 1] + baselineGaps
+
+        if (used > containerWidth) {
+          // Even Home + Dashboard + … + Leaf doesn't fit. Push Dashboard
+          // into the overflow too; keep Home + … + Leaf as the minimum.
+          visible.delete(0)
+          used = homeWidth + triggerWidth + itemWidths[n - 1] + 3 * gap
+        }
+
+        for (let i = n - 2; i >= 1; i--) {
+          if (visible.has(i)) continue
+          const cost = itemWidths[i] + gap
+          if (used + cost > containerWidth) break
+          used += cost
+          visible.add(i)
+        }
+        next = [...visible].sort((a, b) => a - b)
+      }
+
+      setVisibleIndices((prev) => {
+        if (prev.length === next.length && prev.every((v, i) => v === next[i])) return prev
+        return next
+      })
+    }
+
+    compute()
+    const ro = new ResizeObserver(compute)
+    ro.observe(nav)
+    return () => ro.disconnect()
+  }, [breadcrumbs])
+
+  const overflowed = useMemo(() => {
+    const visible = new Set(visibleIndices)
+    return breadcrumbs.filter((_, i) => !visible.has(i))
+  }, [breadcrumbs, visibleIndices])
+
+  // Walk source order, emitting visible items inline; the first time we hit
+  // an overflowed index, drop the dropdown trigger in its place.
+  const visibleSet = new Set(visibleIndices)
+  const lastIndex = breadcrumbs.length - 1
+  let overflowEmitted = false
+  const rendered: React.ReactNode[] = []
+  for (let i = 0; i < breadcrumbs.length; i++) {
+    if (visibleSet.has(i)) {
+      rendered.push(renderBreadcrumb(breadcrumbs[i], i === lastIndex))
+    } else if (!overflowEmitted) {
+      overflowEmitted = true
+      rendered.push(<OverflowDropdown key="__overflow__" items={overflowed} />)
+    }
+  }
+
   return (
-    <nav aria-label="Breadcrumb" className={cx('byline-breadcrumbs', styles.nav, className)}>
+    <nav
+      ref={navRef}
+      aria-label="Breadcrumb"
+      className={cx('byline-breadcrumbs', styles.nav, className)}
+    >
       <ul className={cx('byline-breadcrumbs-list', styles.list)}>
+        <HomeItem homePath={homePath} homeLabel={homeLabel} />
+        {rendered}
+      </ul>
+      {/* Hidden measurement layer — always renders every item plus the
+          overflow trigger placeholder so we can read accurate widths. */}
+      <ul ref={measureRef} aria-hidden className={cx(styles.list, styles.measure)}>
+        <HomeItem homePath={homePath} homeLabel={homeLabel} />
+        {breadcrumbs.map((b, i) => renderBreadcrumb(b, i === lastIndex))}
         <li className={cx('byline-breadcrumbs-item', styles.item)}>
-          <Link to={homePath as string} className={cx('byline-breadcrumbs-link', styles.link)}>
-            <svg
-              role="presentation"
-              className={cx('byline-breadcrumbs-home-icon', styles.homeIcon)}
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-            </svg>
-            {homeLabel}
-          </Link>
+          <ChevronIcon />
+          <span className={cx('byline-breadcrumbs-overflow-trigger', styles.overflowTrigger)}>
+            <EllipsisIcon className={cx('byline-breadcrumbs-overflow-icon', styles.overflowIcon)} />
+          </span>
         </li>
-        {breadcrumbs != null &&
-          breadcrumbs.length > 0 &&
-          breadcrumbs.map((breadcrumb, index) => {
-            const isLeaf = index === breadcrumbs.length - 1
-            return (
-              <li
-                key={breadcrumb.href}
-                aria-current={isLeaf ? 'page' : undefined}
-                className={cx('byline-breadcrumbs-item', styles.item)}
-              >
-                <div className={cx('byline-breadcrumbs-item-row', styles.item)}>
-                  <svg
-                    role="presentation"
-                    className={cx('byline-breadcrumbs-chevron', styles.chevron, {
-                      'byline-breadcrumbs-chevron-current': isLeaf,
-                      [styles.chevronCurrent]: isLeaf,
-                    })}
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  {isLeaf ? (
-                    <span className={cx('byline-breadcrumbs-leaf', styles.leaf)}>
-                      {truncate(breadcrumb.label, 20, true)}
-                    </span>
-                  ) : (
-                    <Link
-                      to={breadcrumb.href as string}
-                      className={cx('byline-breadcrumbs-link', styles.link)}
-                    >
-                      {truncate(breadcrumb.label, 20, true)}
-                    </Link>
-                  )}
-                </div>
-              </li>
-            )
-          })}
       </ul>
     </nav>
   )
 }
+
+function renderBreadcrumb(breadcrumb: Breadcrumb, isLeaf: boolean): React.JSX.Element {
+  return (
+    <li
+      key={breadcrumb.href}
+      aria-current={isLeaf ? 'page' : undefined}
+      className={cx('byline-breadcrumbs-item', styles.item)}
+    >
+      <ChevronIcon isLeaf={isLeaf} />
+      {isLeaf ? (
+        <span className={cx('byline-breadcrumbs-leaf', styles.leaf)}>
+          {truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)}
+        </span>
+      ) : (
+        <Link to={breadcrumb.href as string} className={cx('byline-breadcrumbs-link', styles.link)}>
+          {truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)}
+        </Link>
+      )}
+    </li>
+  )
+}
+
+function HomeItem({
+  homePath,
+  homeLabel,
+}: {
+  homePath: string
+  homeLabel: string
+}): React.JSX.Element {
+  return (
+    <li className={cx('byline-breadcrumbs-item', styles.item)}>
+      <Link to={homePath as string} className={cx('byline-breadcrumbs-link', styles.link)}>
+        <svg
+          role="presentation"
+          className={cx('byline-breadcrumbs-home-icon', styles.homeIcon)}
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+        </svg>
+        {homeLabel}
+      </Link>
+    </li>
+  )
+}
+
+function ChevronIcon({ isLeaf = false }: { isLeaf?: boolean }): React.JSX.Element {
+  return (
+    <svg
+      role="presentation"
+      className={cx('byline-breadcrumbs-chevron', styles.chevron, {
+        'byline-breadcrumbs-chevron-current': isLeaf,
+        [styles.chevronCurrent]: isLeaf,
+      })}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+function OverflowDropdown({ items }: { items: Breadcrumb[] }): React.JSX.Element {
+  return (
+    <li className={cx('byline-breadcrumbs-item', styles.item)}>
+      <ChevronIcon />
+      <Dropdown.Root>
+        <Dropdown.Trigger
+          aria-label="Show hidden breadcrumbs"
+          className={cx('byline-breadcrumbs-overflow-trigger', styles.overflowTrigger)}
+        >
+          <EllipsisIcon className={cx('byline-breadcrumbs-overflow-icon', styles.overflowIcon)} />
+        </Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content sideOffset={5} align="start">
+            {items.map((item) => (
+              <Dropdown.Item
+                key={item.href}
+                className={cx('byline-breadcrumbs-overflow-item', styles.overflowItem)}
+                render={<Link to={item.href as string} />}
+              >
+                {item.label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+    </li>
+  )
+}

package/src/admin-shell/collections/preview-link.tsx

@@ -14,8 +14,8 @@
  *      on the admin's session — so the front-end host's viewer client
  *      starts surfacing draft versions for this admin's subsequent
  *      requests.
- *   2. Opens the document's preview URL in a new tab via
- *      `window.open(url, '_blank', 'noopener,noreferrer')`.
+ *   2. Navigates the current tab to the document's preview URL via
+ *      `window.location.assign(url)`.
  *
  * The preview URL comes from `CollectionAdminConfig.preview.url(doc, ctx)`
  * when configured; otherwise it falls back to the conventional
@@ -101,13 +101,11 @@ export const PreviewLink = ({
     if (busy) return
     setBusy(true)
     try {
-      // Enable preview mode for the admin's browser session before opening
-      // the URL. The viewer client on the front-end host reads the cookie
-      // on subsequent requests and elevates the read context.
+      // Enable preview mode for the admin's browser session before
+      // navigating. The viewer client on the front-end host reads the
+      // cookie on subsequent requests and elevates the read context.
       await enablePreviewModeFn()
-      // `noopener,noreferrer` so the opened tab can't reach back into
-      // the admin window via `window.opener`.
-      window.open(url, '_blank', 'noopener,noreferrer')
+      window.location.assign(url)
     } catch (err) {
       toastManager.add({
         title: 'Preview',
@@ -131,7 +129,7 @@ export const PreviewLink = ({
       variant="text"
       disabled={busy}
       onClick={handleClick}
-      aria-label="Open preview in new tab"
+      aria-label="Open preview"
       title="Preview"
     >
       <ExternalLinkIcon width="20px" height="20px" className="byline-preview-link-icon" />