shelving 1.231.0 → 1.233.0

package/package.json

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

package/schema/EmailSchema.js

@@ -1,3 +1,4 @@
+import { sanitizeWord } from "../util/string.js";
 import { NULLABLE } from "./NullableSchema.js";
 import { StringSchema } from "./StringSchema.js";
 const R_MATCH = /^[a-z0-9](?:[a-zA-Z0-9._+-]{0,62}[a-zA-Z0-9])?@(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.){1,3}(?:[a-z]{2,63}|xn--[a-z0-9-]{0,58}[a-z0-9])$/;
@@ -32,7 +33,8 @@ export class EmailSchema extends StringSchema {
         });
     }
     sanitize(str) {
-        return super.sanitize(str).toLowerCase();
+        // Email addresses never contain whitespace, so strip it entirely, then lowercase (RFC says addresses should be case-insensitive).
+        return sanitizeWord(str).toLowerCase();
     }
 }
 /** Valid email, e.g. `test@test.com` */

package/schema/URISchema.d.ts

@@ -14,6 +14,7 @@ export declare class URISchema extends StringSchema {
     readonly schemes: URISchemes;
     constructor({ one, title, schemes, ...options }: URISchemaOptions);
     validate(unsafeValue: unknown): URIString;
+    sanitize(str: string): string;
     format(value: string): string;
 }
 /** Valid URI string, e.g. `https://www.google.com` */

package/schema/URISchema.js

@@ -1,4 +1,5 @@
 import { formatURI } from "../util/format.js";
+import { sanitizeWord } from "../util/string.js";
 import { getURI, HTTP_SCHEMES } from "../util/uri.js";
 import { NULLABLE } from "./NullableSchema.js";
 import { StringSchema } from "./StringSchema.js";
@@ -31,6 +32,10 @@ export class URISchema extends StringSchema {
             throw `Invalid ${this.one} scheme`;
         return uri.href;
     }
+    sanitize(str) {
+        // URIs never contain whitespace (a real space must be `%20`-encoded), so strip it entirely.
+        return sanitizeWord(str);
+    }
     format(value) {
         return formatURI(value, this.format);
     }

package/schema/URLSchema.d.ts

@@ -17,6 +17,7 @@ export declare class URLSchema extends StringSchema {
     readonly schemes: URISchemes;
     constructor({ one, title, base, schemes, ...options }: URLSchemaOptions);
     validate(unsafeValue: unknown): URLString;
+    sanitize(str: string): string;
     format(value: string): string;
 }
 /** Valid URL string, e.g. `https://www.google.com` */

package/schema/URLSchema.js

@@ -1,4 +1,5 @@
 import { formatURL } from "../util/format.js";
+import { sanitizeWord } from "../util/string.js";
 import { HTTP_SCHEMES } from "../util/uri.js";
 import { getURL } from "../util/url.js";
 import { NULLABLE } from "./NullableSchema.js";
@@ -34,6 +35,10 @@ export class URLSchema extends StringSchema {
             throw `Invalid ${this.one} scheme`;
         return url.href;
     }
+    sanitize(str) {
+        // URLs never contain whitespace (a real space must be `%20`-encoded), so strip it entirely.
+        return sanitizeWord(str);
+    }
     format(value) {
         return formatURL(value, this.base, this.format);
     }

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.

package/util/string.d.ts

@@ -42,6 +42,15 @@ export declare function joinStrings(strs: Iterable<string> & NotString, joiner?:
  * @example santizeString("\x00Nice!   "); // Returns `"Nice!"`
  */
 export declare function sanitizeText(str: string): string;
+/**
+ * Sanitize a single word of text.
+ * - Used when you're sanitising a value that can never contain whitespace, e.g. an email address or token.
+ * - Remove all control characters (like `sanitizeText()`).
+ * - Strip all whitespace entirely (rather than collapsing runs to a single space like `sanitizeText()`).
+ *
+ * @example sanitizeWord("\x00 a b c "); // Returns `"abc"`
+ */
+export declare function sanitizeWord(str: string): string;
 /**
  * Sanitize multiple lines of text.
  * - Used when you're sanitising a multi-line input, e.g. a description for something.

package/util/string.js

@@ -69,6 +69,19 @@ export function sanitizeText(str) {
         .replace(/\s+/gu, " ") // Normalise runs of whitespace to one ` ` space.
         .trim(); // Trim whitespace from the start and end of the string.
 }
+/**
+ * Sanitize a single word of text.
+ * - Used when you're sanitising a value that can never contain whitespace, e.g. an email address or token.
+ * - Remove all control characters (like `sanitizeText()`).
+ * - Strip all whitespace entirely (rather than collapsing runs to a single space like `sanitizeText()`).
+ *
+ * @example sanitizeWord("\x00 a b c "); // Returns `"abc"`
+ */
+export function sanitizeWord(str) {
+    return str
+        .replace(/[^\P{C}\s]/gu, "") // Strip control characters (except whitespace).
+        .replace(/\s+/gu, ""); // Strip all whitespace entirely.
+}
 /**
  * Sanitize multiple lines of text.
  * - Used when you're sanitising a multi-line input, e.g. a description for something.