@lybx-leyw/dsh-pages 0.1.0 → 0.1.1

package/DESIGN-ZH.md

@@ -37,6 +37,12 @@
 
 内置 DSH 工作台（`home`）与页面管理（`pages`）和其他页面使用同一注册表，不另建导航状态机。配置中的 home 与 manager 身份必须不同。
 
+页面壳只拥有**导航与页面生命周期，绝不规定页面版式**。它给当前页一块裸的整幅区域，区域内的一切都归页面自己：标题、工具条、返回链接、可读栏宽、空态、图标。曾经的默认图标、「返回工作台」按钮与居中的内容栏，等于让页面壳替所有页面决定版式 —— 复杂页面因此被强行塞进壳的形状里。
+
+图标随注册一起由页面声明：`icon` 组件，或没有图标库时用 `glyph` 字符串。页面壳只渲染页面声明的东西，不做任何替代 —— 漏声明会暴露出来，而不是被相似的默认图形掩盖。
+
+键盘处理遵循同一条边界：页面壳只在按 Escape 时关闭自己的导轨浮层，其余焦点收束、Tab 顺序与 Escape 都留给页面。带编辑器、对话框或「离开本页」手势的页面自己拥有这三件事。
+
 三个显式分组为 `top`、`overflow`（回收组）、`bottom`。回收是用户编排动作，不是空间不足时自动挤出页面。`overflow` 非空时显示 **…**，回收页仍可从中访问。管理页自身也能回收，并从该入口重新打开。
 
 固定是独立状态：回收页面保持 `region: 'overflow'`，以 `pinned` 与 `pinOrder` 控制顶部组 **…** 后追加的快捷入口，同时仍列在回收组。取消固定只移除快捷入口，不会把页面晋升为 `top`。普通排序与固定排序不能混为一谈；`promotePage` 是编排动作，不是固定状态的权威。

package/DESIGN.md

@@ -37,6 +37,12 @@ Settings remain in the native settings panel. Settings contributions are child s
 
 The built-ins are DSH workbench (`home`) and Page manager (`pages`), registered into the same page registry as other pages. They are not a separate navigation state machine. The configured home and manager identities must differ.
 
+The shell owns **navigation and the active-page lifecycle, never page layout**. It allocates a bare full-bleed region for the active page; everything inside that region belongs to the page: headings, toolbars, back links, readable-width columns, empty states, icons. A shell that supplied a default icon, a "back to workbench" button, or a centred content column was deciding page-level UI for every page at once, which is exactly what forces complex pages into a shell-shaped box.
+
+A page contributes its icon as part of its registration — an `icon` component, or a `glyph` string for packages without an icon library. The shell renders what the page declared and substitutes nothing, so a missing icon stays visible instead of being masked by a look-alike default.
+
+Keyboard handling follows the same boundary: the shell closes its own rail popover on Escape and otherwise leaves focus containment, tab order, and Escape to the page. A page with an editor, a dialog, or a "leave this page" gesture owns all three.
+
 The three explicit groups are `top`, `overflow` (recycle), and `bottom`. Recycling is a user arrangement choice, not automatic eviction caused by limited rail space. Nonempty `overflow` displays **…**, so recycled pages remain reachable. The manager itself can be recycled and reopened there.
 
 Pinning is independent state: a recycled page retains `region: 'overflow'`, with `pinned` and `pinOrder` controlling its extra shortcut after **…** in the top group. It remains listed in the recycle group. Unpinning removes that shortcut without promoting the page into `top`. Normal ordering and pin ordering must not be conflated; `promotePage` is an arrangement action, not the pin-state authority.

package/lib/client.js

@@ -320,6 +320,17 @@ var styles = `
 [data-pages-manager] .pm-id{display:block;margin-top:2px;font:10px ui-monospace,monospace;color:var(--dsw-alias-label-caption,#8a9099)}
 [data-pages-manager] .pm-actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
 [data-pages-manager] button,[data-pages-manager] select{min-height:32px;max-width:100%;border:1px solid var(--dsw-alias-settings-card-stroke,#0000001f);border-radius:5px;background:var(--dsw-alias-bg-base,#f4f5f7);color:var(--dsw-alias-label-secondary,#4b5058);font:inherit;font-size:12px;padding:4px 8px;cursor:pointer}
+/* A native <select> draws its arrow inside the content box, so Latin-size
+   padding put the arrow on top of CJK labels (\u6C49\u5B57 is about twice as wide as
+   the Latin glyphs the default padding assumed). Reserve the arrow's own space
+   explicitly and draw the arrow ourselves instead of relying on the UA's. */
+[data-pages-manager] select{
+  appearance:none;-webkit-appearance:none;-moz-appearance:none;
+  padding:4px 26px 4px 9px;
+  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
+  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;
+  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
+}
 [data-pages-manager] button{min-width:32px;white-space:normal;overflow-wrap:anywhere}
 [data-pages-manager] button:hover:not(:disabled){background:var(--dsw-alias-button-elevated-fill,#0000000f)}
 [data-pages-manager] :is(button,select):focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2f6fed);outline-offset:2px}
@@ -577,16 +588,6 @@ var secondary = "var(--dsw-alias-label-secondary, #aaa)";
 var border = "1px solid var(--dsw-alias-border-l2, #555)";
 var surface = "var(--dsw-alias-bg-layer-2, #181818)";
 var foreground = "var(--dsw-alias-label-primary, #ddd)";
-var button = {
-  font: "inherit",
-  fontSize: 13,
-  color: foreground,
-  background: surface,
-  border,
-  borderRadius: 6,
-  padding: "9px 14px",
-  cursor: "pointer"
-};
 var layoutCss = (width) => `
 #root:has([data-dsh-pages-shell]) { box-sizing: border-box; padding-left: ${width}px; }
 [data-dsh-pages-rail] button:hover { background: var(--dsw-alias-interactive-bg-hover, #333); }
@@ -605,17 +606,10 @@ function RailIcon({ width, children }) {
     transformOrigin: "center"
   }, children });
 }
-function PageIcon({ entry, home }) {
+function PageIcon({ entry }) {
   if (entry.icon) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(entry.icon, {});
-  if (entry.id === home) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "23", height: "23", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.65", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 10 9-7 9 7M6 9v12h12V9M10 21v-7h4v7" }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "23", height: "23", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.65", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "4", width: "7", height: "7", rx: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "14", y: "4", width: "7", height: "7", rx: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "13", width: "7", height: "7", rx: "1.6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "14", y: "13", width: "7", height: "7", rx: "1.6" })
-  ] });
+  if (typeof entry.glyph === "string" && entry.glyph.length > 0) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: entry.glyph });
+  return null;
 }
 function PageShell(props) {
   const snapshot = props.usePages((value) => value);
@@ -639,7 +633,6 @@ function PageShell(props) {
   const home = props.homePage;
   const open = snapshot.activePage !== home;
   const manager = snapshot.activePage === props.managerPage;
-  const close = (0, import_react2.useRef)(null);
   const shell = (0, import_react2.useRef)(null);
   const moreButton = (0, import_react2.useRef)(null);
   const contentId = (0, import_react2.useId)();
@@ -649,15 +642,6 @@ function PageShell(props) {
   const parked = snapshot.pages.filter((entry) => entry.region === "overflow");
   const menuTop = menu === "more" && moreButton.current !== null ? Math.max(12, Math.min(moreButton.current.getBoundingClientRect().top, globalThis.innerHeight - 260)) : 12;
   const dismiss = () => props.selectPage(home);
-  (0, import_react2.useEffect)(() => {
-    if (!open) return;
-    close.current?.focus();
-    const containFocus = (event) => {
-      if (!shell.current?.contains(event.target)) close.current?.focus();
-    };
-    document.addEventListener("focusin", containFocus);
-    return () => document.removeEventListener("focusin", containFocus);
-  }, [open, snapshot.activePage]);
   (0, import_react2.useEffect)(() => {
     if (menu === null) return void 0;
     const onPointer = (event) => {
@@ -677,15 +661,9 @@ function PageShell(props) {
   const keyDown = (event) => {
     if (!open) return;
     event.stopPropagation();
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && menu !== null) {
       event.preventDefault();
-      dismiss();
-    } else if (event.key === "Tab") {
-      const controls = Array.from(shell.current.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], [tabindex="0"]')).filter((node) => node.getClientRects().length > 0);
-      const index = controls.indexOf(document.activeElement);
-      const next = event.shiftKey ? index <= 0 ? controls.length - 1 : index - 1 : (index + 1) % controls.length;
-      event.preventDefault();
-      (controls[next] || shell.current).focus();
+      setMenu(null);
     }
   };
   const navItem = (entry) => {
@@ -706,7 +684,7 @@ function PageShell(props) {
           background: selected ? "var(--dsw-alias-interactive-bg-hover, #333)" : "transparent",
           boxShadow: selected ? "inset 2px 0 0 currentColor" : "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RailIcon, { width: railWidth, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageIcon, { entry, home }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RailIcon, { width: railWidth, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageIcon, { entry }) })
       },
       entry.id
     );
@@ -820,7 +798,7 @@ function PageShell(props) {
                   background: selected ? "var(--dsw-alias-interactive-bg-hover, #333)" : "transparent"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "grid", placeItems: "center", width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageIcon, { entry, home }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "grid", placeItems: "center", width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageIcon, { entry }) }),
                   label
                 ]
               }
@@ -852,43 +830,45 @@ function PageShell(props) {
             )
           ] }, entry.id);
         }) }),
-        open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { id: contentId, "aria-labelledby": contentId, style: {
+        open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { id: contentId, "aria-label": props.resolveLabel(active?.label ?? ""), style: {
+          // A bare full-bleed area. Everything a page shows inside it — headings,
+          // toolbars, a back button, its own padding — belongs to the page. The
+          // shell provides the region and the lifecycle, never the layout.
           position: "absolute",
           inset: `0 0 0 ${railWidth}px`,
-          overflow: "auto",
           boxSizing: "border-box",
           pointerEvents: "auto",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          minWidth: 0,
+          minHeight: 0,
           background: surface,
-          color: foreground,
-          fontSize: 14,
-          lineHeight: 1.6,
-          padding: "24px clamp(16px, 5vw, 80px)"
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { style: { borderBottom: border, paddingBottom: 24, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", ref: close, style: button, onClick: dismiss, children: [
-              "\u2190 ",
-              props.t("back")
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: secondary, fontSize: 11, letterSpacing: "0.12em" }, children: props.resolveLabel(active?.label ?? "") })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { maxWidth: 760, margin: "clamp(32px, 8vh, 100px) auto" }, children: manager ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            PageManager,
-            {
-              entries: snapshot.pages,
-              railWidth,
-              resolveLabel: (entry) => props.resolveLabel(entry.label),
-              t: props.t,
-              actions: {
-                selectPage: props.selectPage,
-                setPageRegion: props.setPageRegion,
-                setPagePinned: props.setPagePinned,
-                setRailWidth: props.setRailWidth,
-                setPageOrder: props.setPageOrder,
-                promotePage: props.promotePage
-              }
+          color: foreground
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-dsh-pages-content": "", style: {
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          overflow: "auto",
+          display: "flex",
+          flexDirection: "column"
+        }, children: manager ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          PageManager,
+          {
+            entries: snapshot.pages,
+            railWidth,
+            resolveLabel: (entry) => props.resolveLabel(entry.label),
+            t: props.t,
+            actions: {
+              selectPage: props.selectPage,
+              setPageRegion: props.setPageRegion,
+              setPagePinned: props.setPagePinned,
+              setRailWidth: props.setRailWidth,
+              setPageOrder: props.setPageOrder,
+              promotePage: props.promotePage
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.default.Fragment, { children: props.renderSlot(props.pageSlot, {}, { entryKey: snapshot.activePage }) }, snapshot.activePage) })
-        ] })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.default.Fragment, { children: props.renderSlot(props.pageSlot, {}, { entryKey: snapshot.activePage }) }, snapshot.activePage) }) })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lybx-leyw/dsh-pages",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Product pages on top of DeepSeek Harness: a page slot tree that hosts the native workbench as one page",
     "private": false,
     "license": "MIT",

package/src/page-manager.jsx

@@ -25,6 +25,17 @@ const styles = `
 [data-pages-manager] .pm-id{display:block;margin-top:2px;font:10px ui-monospace,monospace;color:var(--dsw-alias-label-caption,#8a9099)}
 [data-pages-manager] .pm-actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
 [data-pages-manager] button,[data-pages-manager] select{min-height:32px;max-width:100%;border:1px solid var(--dsw-alias-settings-card-stroke,#0000001f);border-radius:5px;background:var(--dsw-alias-bg-base,#f4f5f7);color:var(--dsw-alias-label-secondary,#4b5058);font:inherit;font-size:12px;padding:4px 8px;cursor:pointer}
+/* A native <select> draws its arrow inside the content box, so Latin-size
+   padding put the arrow on top of CJK labels (汉字 is about twice as wide as
+   the Latin glyphs the default padding assumed). Reserve the arrow's own space
+   explicitly and draw the arrow ourselves instead of relying on the UA's. */
+[data-pages-manager] select{
+  appearance:none;-webkit-appearance:none;-moz-appearance:none;
+  padding:4px 26px 4px 9px;
+  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
+  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;
+  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
+}
 [data-pages-manager] button{min-width:32px;white-space:normal;overflow-wrap:anywhere}
 [data-pages-manager] button:hover:not(:disabled){background:var(--dsw-alias-button-elevated-fill,#0000000f)}
 [data-pages-manager] :is(button,select):focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2f6fed);outline-offset:2px}

package/src/page-shell.jsx

@@ -25,10 +25,6 @@ const secondary = 'var(--dsw-alias-label-secondary, #aaa)';
 const border = '1px solid var(--dsw-alias-border-l2, #555)';
 const surface = 'var(--dsw-alias-bg-layer-2, #181818)';
 const foreground = 'var(--dsw-alias-label-primary, #ddd)';
-const button = {
-  font: 'inherit', fontSize: 13, color: foreground,
-  background: surface, border, borderRadius: 6, padding: '9px 14px', cursor: 'pointer',
-};
 // Explicit shell geometry, not discovery or relocation of native slots. Removing
 // this component removes the rule and restores the original geometry.
 const layoutCss = width => `
@@ -46,12 +42,15 @@ function RailIcon({ width, children }) {
 }
 
 /** Icons for the pages this shell itself registers. */
-function PageIcon({ entry, home }) {
+function PageIcon({ entry }) {
+  // The page owns its icon. The shell renders exactly what the page declared —
+  // an `icon` component, or a `glyph` string for dependency-free packages — and
+  // never substitutes an icon of its own. A shell-invented default made every
+  // page that forgot an icon look identical, which hid the omission instead of
+  // surfacing it.
   if (entry.icon) return <entry.icon/>;
-  if (entry.id === home) {
-    return <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65" aria-hidden="true"><path d="m3 10 9-7 9 7M6 9v12h12V9M10 21v-7h4v7"/></svg>;
-  }
-  return <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65" aria-hidden="true"><rect x="3" y="4" width="7" height="7" rx="1.6"/><rect x="14" y="4" width="7" height="7" rx="1.6"/><rect x="3" y="13" width="7" height="7" rx="1.6"/><rect x="14" y="13" width="7" height="7" rx="1.6"/></svg>;
+  if (typeof entry.glyph === 'string' && entry.glyph.length > 0) return <span aria-hidden="true">{entry.glyph}</span>;
+  return null;
 }
 
 /**
@@ -75,7 +74,6 @@ export function PageShell(props) {
   const home = props.homePage;
   const open = snapshot.activePage !== home;
   const manager = snapshot.activePage === props.managerPage;
-  const close = useRef(null);
   const shell = useRef(null);
   const moreButton = useRef(null);
   const contentId = useId();
@@ -93,15 +91,6 @@ export function PageShell(props) {
     ? Math.max(12, Math.min(moreButton.current.getBoundingClientRect().top, globalThis.innerHeight - 260))
     : 12;
   const dismiss = () => props.selectPage(home);
-  useEffect(() => {
-    if (!open) return;
-    close.current?.focus();
-    const containFocus = event => {
-      if (!shell.current?.contains(event.target)) close.current?.focus();
-    };
-    document.addEventListener('focusin', containFocus);
-    return () => document.removeEventListener('focusin', containFocus);
-  }, [open, snapshot.activePage]);
   // A popover left open while its group empties would strand the panel; closing on
   // outside pointer input keeps it a transient view.
   useEffect(() => {
@@ -120,18 +109,14 @@ export function PageShell(props) {
   }, [menu]);
   const keyDown = event => {
     if (!open) return;
-    // Native document-capture shortcuts stay with the host.
+    // Only the rail's own popover is a shell concern. Escape inside page content,
+    // tab order and focus containment belong to the page: a shell that trapped
+    // focus here also took Escape away from editors, dialogs and their own
+    // "leave this page" gestures.
     event.stopPropagation();
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      dismiss();
-    } else if (event.key === 'Tab') {
-      const controls = Array.from(shell.current.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], [tabindex="0"]'))
-        .filter(node => node.getClientRects().length > 0);
-      const index = controls.indexOf(document.activeElement);
-      const next = event.shiftKey ? (index <= 0 ? controls.length - 1 : index - 1) : (index + 1) % controls.length;
+    if (event.key === 'Escape' && menu !== null) {
       event.preventDefault();
-      (controls[next] || shell.current).focus();
+      setMenu(null);
     }
   };
   const navItem = entry => {
@@ -145,7 +130,7 @@ export function PageShell(props) {
         color: selected ? foreground : secondary,
         background: selected ? 'var(--dsw-alias-interactive-bg-hover, #333)' : 'transparent',
         boxShadow: selected ? 'inset 2px 0 0 currentColor' : 'none',
-      }}><RailIcon width={railWidth}><PageIcon entry={entry} home={home}/></RailIcon></button>;
+      }}><RailIcon width={railWidth}><PageIcon entry={entry}/></RailIcon></button>;
   };
   return <div ref={shell} data-dsh-pages-shell="" data-active-page={snapshot.activePage}
     role={open ? 'dialog' : undefined} aria-modal={open ? true : undefined}
@@ -193,7 +178,7 @@ export function PageShell(props) {
               padding: '0 10px', border: 'none', borderRadius: 7, cursor: 'pointer', font: 'inherit',
               textAlign: 'left', color: selected ? foreground : secondary,
               background: selected ? 'var(--dsw-alias-interactive-bg-hover, #333)' : 'transparent',
-            }}><span style={{ display: 'grid', placeItems: 'center', width: 20, height: 20 }}><PageIcon entry={entry} home={home}/></span>{label}</button>
+            }}><span style={{ display: 'grid', placeItems: 'center', width: 20, height: 20 }}><PageIcon entry={entry}/></span>{label}</button>
           <button type="button" title={props.t(entry.pinned ? 'unpin' : 'pin')} aria-label={`${props.t(entry.pinned ? 'unpin' : 'pin')} ${label}`}
             data-dsh-pages-pin="" aria-pressed={Boolean(entry.pinned)} onClick={() => props.setPagePinned(entry.id, !entry.pinned)}
             style={{
@@ -204,15 +189,17 @@ export function PageShell(props) {
         </div>;
       })}
     </div>}
-    {open && <section id={contentId} aria-labelledby={contentId} style={{
-      position: 'absolute', inset: `0 0 0 ${railWidth}px`, overflow: 'auto', boxSizing: 'border-box', pointerEvents: 'auto',
-      background: surface, color: foreground, fontSize: 14, lineHeight: 1.6, padding: '24px clamp(16px, 5vw, 80px)',
+    {open && <section id={contentId} aria-label={props.resolveLabel(active?.label ?? '')} style={{
+      // A bare full-bleed area. Everything a page shows inside it — headings,
+      // toolbars, a back button, its own padding — belongs to the page. The
+      // shell provides the region and the lifecycle, never the layout.
+      position: 'absolute', inset: `0 0 0 ${railWidth}px`, boxSizing: 'border-box', pointerEvents: 'auto',
+      overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0,
+      background: surface, color: foreground,
     }}>
-      <header style={{ borderBottom: border, paddingBottom: 24, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
-        <button type="button" ref={close} style={button} onClick={dismiss}>← {props.t('back')}</button>
-        <span style={{ color: secondary, fontSize: 11, letterSpacing: '0.12em' }}>{props.resolveLabel(active?.label ?? '')}</span>
-      </header>
-      <div style={{ maxWidth: 760, margin: 'clamp(32px, 8vh, 100px) auto' }}>
+      <div data-dsh-pages-content="" style={{
+        flex: 1, minWidth: 0, minHeight: 0, overflow: 'auto', display: 'flex', flexDirection: 'column',
+      }}>
         {manager
           ? <PageManager entries={snapshot.pages} railWidth={railWidth}
               resolveLabel={entry => props.resolveLabel(entry.label)} t={props.t}