shelving 1.231.0 → 1.232.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.231.0",
+	"version": "1.232.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/block/Block.module.css

@@ -18,7 +18,7 @@
 	.scrollable,
 	.prose [role="region"][tabindex="0"] {
 		overflow-x: auto;
-		overscroll-behavior-x: contain;
+		overscroll-behavior: contain;
 
 		&:focus-visible {
 			outline: var(--focus-stroke, var(--stroke-thick)) solid var(--focus-color, var(--color-focus));

package/ui/form/Popover.module.css

@@ -20,7 +20,7 @@
 		z-index: 1000;
 		max-height: var(--popover-max-height, 30vh);
 		overflow-y: auto;
-		overscroll-behavior: none;
+		overscroll-behavior: contain;
 		border-radius: var(--popover-radius, var(--radius-xsmall));
 		border: var(--popover-border, var(--stroke-normal)) solid var(--popover-color-border, var(--color-vivid));
 		padding: var(--popover-padding, var(--space-small));

package/ui/layout/CenteredLayout.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { requireMetaURL } from "../misc/MetaContext.js";
 import { getClass } from "../util/css.js";
 import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
 import { LAYOUT_CLASS } from "./Layout.js";
@@ -7,5 +8,6 @@ import { LAYOUT_CLASS } from "./Layout.js";
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
  */
 export function CenteredLayout({ children, fullWidth = false }) {
-    return (_jsx("main", { className: getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS), children: _jsx("div", { className: CENTERED_LAYOUT_CSS.mainInner, style: fullWidth ? { maxWidth: "none" } : undefined, children: children }) }));
+    const { path } = requireMetaURL();
+    return (_jsx("main", { className: getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS), children: _jsx("div", { className: CENTERED_LAYOUT_CSS.mainInner, style: fullWidth ? { maxWidth: "none" } : undefined, children: children }) }, path));
 }

package/ui/layout/CenteredLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import { requireMetaURL } from "../misc/MetaContext.js";
 import { getClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import CENTERED_LAYOUT_CSS from "./CenteredLayout.module.css";
@@ -13,8 +14,9 @@ export interface CenteredLayoutProps extends OptionalChildProps {
  * - Used for e.g. login/register/error/form pages where the content is the only focus.
  */
 export function CenteredLayout({ children, fullWidth = false }: CenteredLayoutProps): ReactElement {
+	const { path } = requireMetaURL();
 	return (
-		<main className={getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS)}>
+		<main key={path} className={getClass(CENTERED_LAYOUT_CSS.main, LAYOUT_CLASS)}>
 			<div className={CENTERED_LAYOUT_CSS.mainInner} style={fullWidth ? { maxWidth: "none" } : undefined}>
 				{children}
 			</div>

package/ui/layout/Layout.module.css

@@ -40,7 +40,6 @@
 		width: 100dvw;
 		overflow: hidden;
 		overflow-wrap: break-word; /* Break overlong words only as a last resort; `anywhere` would also break mid-word to fit narrow table/flex columns. */
-		overscroll-behavior: none;
 	}
 
 	body:has(.layout) {
@@ -61,6 +60,7 @@
 		/* Own the page's vertical scroll. */
 		overflow: hidden auto;
 		scroll-behavior: smooth;
-		overscroll-behavior: none;
+		/* `contain` keeps the elastic bounce on the layout itself but stops the scroll chain leaking up to the locked body. */
+		overscroll-behavior: contain;
 	}
 }

package/ui/layout/SidebarLayout.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import { use, useEffect, useState } from "react";
-import { useStore } from "../../react/useStore.js";
+import { useEffect, useState } from "react";
 import { Button } from "../form/Button.js";
-import { NavigationContext } from "../router/NavigationContext.js";
+import { requireMetaURL } from "../misc/MetaContext.js";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CLASS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
@@ -16,15 +15,15 @@ import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
  * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }) {
+    const { path } = requireMetaURL();
     const [open, setOpen] = useState(false);
     // Close the drawer whenever navigation changes the URL — covers tapping a link inside the sidebar.
-    const href = useStore(use(NavigationContext))?.href;
     useEffect(() => {
-        if (href)
+        if (path)
             setOpen(false);
-    }, [href]);
+    }, [path]);
     const sidebarEl = (_jsx("nav", { className: getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open), children: sidebar }, "sidebar"));
-    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.toggle, children: _jsx(Button, { fit: true, title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, "content"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("div", { className: SIDEBAR_LAYOUT_CSS.toggle, children: _jsx(Button, { fit: true, title: open ? "Close menu" : "Show menu", onClick: () => setOpen(o => !o), children: open ? _jsx(XMarkIcon, {}) : _jsx(Bars3Icon, {}) }) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, path));
     const overlayEl = open && (_jsx("button", { type: "button", className: SIDEBAR_LAYOUT_CSS.overlay, "aria-label": "Close menu", onClick: () => setOpen(false) }, "overlay"));
     return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CLASS), children: right ? [contentEl, sidebarEl, overlayEl] : [sidebarEl, contentEl, overlayEl] }));
 }

package/ui/layout/SidebarLayout.tsx

@@ -1,8 +1,7 @@
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import { type ReactElement, type ReactNode, use, useEffect, useState } from "react";
-import { useStore } from "../../react/useStore.js";
+import { type ReactElement, type ReactNode, useEffect, useState } from "react";
 import { Button } from "../form/Button.js";
-import { NavigationContext } from "../router/NavigationContext.js";
+import { requireMetaURL } from "../misc/MetaContext.js";
 import { getClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { LAYOUT_CLASS } from "./Layout.js";
@@ -24,13 +23,13 @@ export interface SidebarLayoutProps extends OptionalChildProps {
  * - Use the `--sidebar-layout-width`, `--sidebar-layout-bg`, `--sidebar-layout-border`, and `--sidebar-layout-color-border` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement {
+	const { path } = requireMetaURL();
 	const [open, setOpen] = useState(false);
 
 	// Close the drawer whenever navigation changes the URL — covers tapping a link inside the sidebar.
-	const href = useStore(use(NavigationContext))?.href;
 	useEffect(() => {
-		if (href) setOpen(false);
-	}, [href]);
+		if (path) setOpen(false);
+	}, [path]);
 
 	const sidebarEl = (
 		<nav key="sidebar" className={getClass(SIDEBAR_LAYOUT_CSS.sidebar, open && SIDEBAR_LAYOUT_CSS.open)}>
@@ -38,7 +37,7 @@ export function SidebarLayout({ sidebar, children, right = false }: SidebarLayou
 		</nav>
 	);
 	const contentEl = (
-		<div key="content" className={getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content)}>
+		<div key={path} className={getClass(LAYOUT_CLASS, SIDEBAR_LAYOUT_CSS.content)}>
 			<div className={SIDEBAR_LAYOUT_CSS.toggle}>
 				<Button fit title={open ? "Close menu" : "Show menu"} onClick={() => setOpen(o => !o)}>
 					{open ? <XMarkIcon /> : <Bars3Icon />}

package/ui/router/Navigation.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
 import type { PossibleMeta } from "../util/index.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
+import type { OptionalChildProps } from "../util/props.js";
 export interface NavigationProps extends PossibleMeta, OptionalChildProps {
 }
 /**
@@ -15,10 +15,3 @@ export interface NavigationProps extends PossibleMeta, OptionalChildProps {
  * TODO: switch click/popstate handling to the browser Navigation API when broadly supported.
  */
 export declare function Navigation({ children, ...meta }: NavigationProps): ReactElement;
-export interface NavigationIsolateProps extends ChildProps {
-}
-/**
- * Force a full remount of children whenever the navigation URL changes.
- * - Use to reset stateful sub-trees on navigation.
- */
-export declare function NavigationIsolate({ children }: NavigationIsolateProps): ReactElement;

package/ui/router/Navigation.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment, useEffect } from "react";
+import { useEffect } from "react";
 import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
-import { NavigationContext, requireNavigation } from "./NavigationContext.js";
+import { NavigationContext } from "./NavigationContext.js";
 import { NavigationStore } from "./NavigationStore.js";
 /**
  * Top-level navigation provider.
@@ -46,11 +46,3 @@ export function Navigation({ children, ...meta }) {
     }, [nav]);
     return (_jsx(NavigationContext, { value: nav, children: _jsx(MetaContext, { value: { url: nav.value, root, ...merged }, children: children }) }));
 }
-/**
- * Force a full remount of children whenever the navigation URL changes.
- * - Use to reset stateful sub-trees on navigation.
- */
-export function NavigationIsolate({ children }) {
-    const nav = useStore(requireNavigation());
-    return _jsx(Fragment, { children: children }, nav.href);
-}

package/ui/router/Navigation.tsx

@@ -1,10 +1,10 @@
-import { Fragment, type ReactElement, useEffect } from "react";
+import { type ReactElement, useEffect } from "react";
 import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
 import type { PossibleMeta } from "../util/index.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
-import { NavigationContext, requireNavigation } from "./NavigationContext.js";
+import type { OptionalChildProps } from "../util/props.js";
+import { NavigationContext } from "./NavigationContext.js";
 import { NavigationStore } from "./NavigationStore.js";
 
 export interface NavigationProps extends PossibleMeta, OptionalChildProps {}
@@ -59,14 +59,3 @@ export function Navigation({ children, ...meta }: NavigationProps): ReactElement
 		</NavigationContext>
 	);
 }
-
-export interface NavigationIsolateProps extends ChildProps {}
-
-/**
- * Force a full remount of children whenever the navigation URL changes.
- * - Use to reset stateful sub-trees on navigation.
- */
-export function NavigationIsolate({ children }: NavigationIsolateProps): ReactElement {
-	const nav = useStore(requireNavigation());
-	return <Fragment key={nav.href}>{children}</Fragment>;
-}

package/ui/router/Router.js

@@ -41,7 +41,7 @@ function _matchRoute(routes, fallback, meta, path = meta.path, depth = 0) {
         if (typeof Route !== "function")
             return Route;
         // Component — render with merged URL query params and route placeholders as props (placeholders win on conflict).
-        _jsx(Route, { ...meta.params, ...placeholders }, path);
+        return _jsx(Route, { ...meta.params, ...placeholders }, path);
     }
     // No match, try the fallback.
     if (fallback !== undefined)

package/ui/router/Router.tsx

@@ -61,7 +61,7 @@ function _matchRoute(
 		if (typeof Route !== "function") return Route;
 
 		// Component — render with merged URL query params and route placeholders as props (placeholders win on conflict).
-		<Route key={path} {...meta.params} {...placeholders} />;
+		return <Route key={path} {...meta.params} {...placeholders} />;
 	}
 
 	// No match, try the fallback.