shelving 1.263.0 → 1.264.1

package/ui/form/index.d.ts

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/form/index.js

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/form/index.ts

@@ -1,17 +1,4 @@
-export * from "./ArrayInput.js";
-export * from "./ArrayRadioInputs.js";
-export * from "./Button.js";
-export * from "./ButtonInput.js";
-export * from "./ButtonInputPopover.js";
-export * from "./ButtonPopover.js";
-export * from "./CheckboxInput.js";
-export * from "./ChoiceRadioInputs.js";
-export * from "./Clickable.js";
-export * from "./DataInput.js";
-export * from "./DateInput.js";
-export * from "./DictionaryInput.js";
 export * from "./Field.js";
-export * from "./FileInput.js";
 export * from "./Form.js";
 export * from "./FormContext.js";
 export * from "./FormFields.js";
@@ -21,14 +8,4 @@ export * from "./FormMessage.js";
 export * from "./FormNotice.js";
 export * from "./FormNotify.js";
 export * from "./FormStore.js";
-export * from "./Input.js";
-export * from "./NumberInput.js";
-export * from "./OutputInput.js";
-export * from "./Popover.js";
 export * from "./Progress.js";
-export * from "./QueryInput.js";
-export * from "./RadioInput.js";
-export * from "./SchemaInput.js";
-export * from "./SelectInput.js";
-export * from "./SubmitButton.js";
-export * from "./TextInput.js";

package/ui/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/index.js

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/index.ts

@@ -1,9 +1,11 @@
 export * from "./app/index.js";
 export * from "./block/index.js";
+export * from "./button/index.js";
 export * from "./dialog/index.js";
 export * from "./docs/index.js";
 export * from "./form/index.js";
 export * from "./inline/index.js";
+export * from "./input/index.js";
 export * from "./layout/index.js";
 export * from "./menu/index.js";
 export * from "./misc/index.js";

package/ui/inline/Link.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { type ClickableProps } from "../form/Clickable.js";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type TypographyVariants } from "../style/Typography.js";
 /**
  * Props for `Link` — `ClickableProps` (`href` for navigation or `onClick` for actions) plus colour and typography variants.

package/ui/inline/Link.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Clickable } from "../form/Clickable.js";
+import { Clickable } from "../button/Clickable.js";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";

package/ui/inline/Link.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { Clickable, type ClickableProps } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { getTypographyClass, type TypographyVariants } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";

package/ui/{form → input}/ArrayInput.js

@@ -5,7 +5,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Column } from "../block/Column.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 export function ArrayInput({ name, 

package/ui/{form → input}/ArrayInput.tsx

@@ -6,7 +6,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { Column } from "../block/Column.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";

package/ui/{form → input}/ButtonInput.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type FlexVariants } from "../style/Flex.js";
-import { type ClickableProps } from "./Clickable.js";
 import { type InputProps, type InputVariants } from "./Input.js";
 /**
  * Props for `ButtonInput`, a clickable element styled to match form inputs.

package/ui/{form → input}/ButtonInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notNullish } from "../../util/null.js";
+import { Clickable } from "../button/Clickable.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { Clickable } from "./Clickable.js";
 import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**

package/ui/{form → input}/ButtonInput.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { Clickable, type ClickableProps } from "./Clickable.js";
 import { getInputClass, type InputProps, type InputVariants } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 

package/ui/{form → input}/ButtonPopover.d.ts

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 import { type ReactElement } from "react";
-import { type ButtonVariants } from "./Button.js";
+import { type ButtonVariants } from "../button/Button.js";
 import { type PopoverChildren } from "./Popover.js";
 /**
  * Props for `ButtonPopover`, a button that toggles an adjacent popover.

package/ui/{form → input}/ButtonPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 import { useState } from "react";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { Popover } from "./Popover.js";
 /**
  * A button that, when clicked, shows a popover next to it when clicked or focused.

package/ui/{form → input}/ButtonPopover.tsx

@@ -2,7 +2,7 @@
 /** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
 
 import { type ReactElement, useState } from "react";
-import { Button, type ButtonVariants } from "./Button.js";
+import { Button, type ButtonVariants } from "../button/Button.js";
 import { Popover, type PopoverChildren } from "./Popover.js";
 
 /**

package/ui/{form → input}/DictionaryInput.js

@@ -5,7 +5,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import { SchemaInput } from "./SchemaInput.js";
 import { TextInput } from "./TextInput.js";

package/ui/{form → input}/DictionaryInput.tsx

@@ -7,7 +7,7 @@ import { splitMessage } from "../../util/error.js";
 import { formatUnit } from "../../util/format.js";
 import { omitProp } from "../../util/object.js";
 import { Row } from "../block/Row.js";
-import { Button } from "./Button.js";
+import { Button } from "../button/Button.js";
 import { ButtonInput } from "./ButtonInput.js";
 import type { ValueInputProps } from "./Input.js";
 import { SchemaInput } from "./SchemaInput.js";

package/ui/{form → input}/SchemaInput.js

@@ -17,13 +17,13 @@ import { getNumber } from "../../util/number.js";
 import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
+import { Field } from "../form/Field.js";
 import { ArrayInput } from "./ArrayInput.js";
 import { CheckboxInput } from "./CheckboxInput.js";
 import { ChoiceRadioInputs } from "./ChoiceRadioInputs.js";
 import { DataInput } from "./DataInput.js";
 import { DateInput } from "./DateInput.js";
 import { DictionaryInput } from "./DictionaryInput.js";
-import { Field } from "./Field.js";
 import { NumberInput } from "./NumberInput.js";
 import { SelectInput } from "./SelectInput.js";
 import { TextInput } from "./TextInput.js";

package/ui/{form → input}/SchemaInput.test.tsx

@@ -1,8 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
-import { StringSchema } from "../../schema/index.js";
-import { PASSTHROUGH } from "../../util/function.js";
-import { StringSchemaInput } from "./SchemaInput.js";
+import { PASSTHROUGH, StringSchema } from "../../index.js";
+import { StringSchemaInput } from "../index.js";
 
 describe("StringSchemaInput", () => {
 	test("formats the initial value to its clean sanitized value", () => {

package/ui/{form → input}/SchemaInput.tsx

@@ -19,6 +19,7 @@ import { getKeys } from "../../util/object.js";
 import { getSource, requireSource } from "../../util/source.js";
 import { getString } from "../../util/string.js";
 import type { ValidatorType } from "../../util/validate.js";
+import { Field } from "../form/Field.js";
 import type { OptionalChildProps } from "../util/props.js";
 import { ArrayInput } from "./ArrayInput.js";
 import { CheckboxInput } from "./CheckboxInput.js";
@@ -26,7 +27,6 @@ import { ChoiceRadioInputs } from "./ChoiceRadioInputs.js";
 import { DataInput } from "./DataInput.js";
 import { DateInput } from "./DateInput.js";
 import { DictionaryInput } from "./DictionaryInput.js";
-import { Field } from "./Field.js";
 import type { ValueInputProps } from "./Input.js";
 import { NumberInput } from "./NumberInput.js";
 import { SelectInput } from "./SelectInput.js";

package/ui/{form → input}/TextInput.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
-import { type InputVariants, type ValueInputProps } from "./Input.js";
+import { type InputVariants, type ValueInputProps } from "../input/Input.js";
 type TextFormatter = (str: string) => string;
 /**
  * Props for `TextInput`, a single- or multi-line text input bound to a `string` value.

package/ui/{form → input}/TextInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PASSTHROUGH } from "../../util/function.js";
+import { getInputClass } from "../input/Input.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { getInputClass } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 /**
  * Text input bound to a `string` value, rendered as an `<input>` or a `<textarea>` when `rows > 1`.

package/ui/{form → input}/TextInput.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, SyntheticEvent } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
 import { PASSTHROUGH } from "../../util/function.js";
+import { getInputClass, type InputVariants, type ValueInputProps } from "../input/Input.js";
 import { getClass, getModuleClass } from "../util/css.js";
-import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
 import INPUT_CSS from "./Input.module.css";
 
 type TextFormatter = (str: string) => string;

package/ui/input/index.d.ts

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/input/index.js

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/input/index.ts

@@ -0,0 +1,20 @@
+export * from "./ArrayInput.js";
+export * from "./ArrayRadioInputs.js";
+export * from "./ButtonInput.js";
+export * from "./ButtonInputPopover.js";
+export * from "./ButtonPopover.js";
+export * from "./CheckboxInput.js";
+export * from "./ChoiceRadioInputs.js";
+export * from "./DataInput.js";
+export * from "./DateInput.js";
+export * from "./DictionaryInput.js";
+export * from "./FileInput.js";
+export * from "./Input.js";
+export * from "./NumberInput.js";
+export * from "./OutputInput.js";
+export * from "./Popover.js";
+export * from "./QueryInput.js";
+export * from "./RadioInput.js";
+export * from "./SchemaInput.js";
+export * from "./SelectInput.js";
+export * from "./TextInput.js";

package/ui/layout/Layout.d.ts

@@ -7,4 +7,4 @@
  * @todo This can be removed once Safari iOS supports interactive-widget viewport property. https://caniuse.com/mdn-html_elements_meta_name_viewport_interactive-widget
  * @see https://shelving.cc/ui/useSafeKeyboardArea
  */
-export declare function useSafeKeyboardArea(): (() => void) | undefined;
+export declare function useSafeKeyboardArea(): void;

package/ui/layout/Layout.js

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 /**
  * Track the dynamic viewport height so layout safe-area insets follow the on-screen keyboard.
  *
@@ -8,6 +9,9 @@
  * @see https://shelving.cc/ui/useSafeKeyboardArea
  */
 export function useSafeKeyboardArea() {
+    useEffect(_safeKeyboardArea, []);
+}
+function _safeKeyboardArea() {
     const vv = window.visualViewport;
     if (!vv)
         return;

package/ui/layout/Layout.ts

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 /**
  * Track the dynamic viewport height so layout safe-area insets follow the on-screen keyboard.
  *
@@ -8,6 +10,10 @@
  * @see https://shelving.cc/ui/useSafeKeyboardArea
  */
 export function useSafeKeyboardArea() {
+	useEffect(_safeKeyboardArea, []);
+}
+
+function _safeKeyboardArea() {
 	const vv = window.visualViewport;
 	if (!vv) return;
 	const onResize = () => {

package/ui/layout/SidebarLayout.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
-import { Button } from "../form/Button.js";
+import { Button } from "../button/Button.js";
 import { requireMetaURL } from "../misc/MetaContext.js";
 import { RouteCache } from "../router/RouteCache.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/layout/SidebarLayout.tsx

@@ -1,6 +1,6 @@
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { type ReactElement, type ReactNode, useEffect, useState } from "react";
-import { Button } from "../form/Button.js";
+import { Button } from "../button/Button.js";
 import { requireMetaURL } from "../misc/MetaContext.js";
 import { RouteCache } from "../router/RouteCache.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/menu/Menu.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { type ClickableProps } from "../form/Clickable.js";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants } from "../style/Block.js";
 import type { OptionalChildProps } from "../util/props.js";
 /**

package/ui/menu/Menu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isArray } from "../../util/array.js";
 import { getLink, isURLActive, isURLProud } from "../../util/index.js";
-import { Clickable } from "../form/Clickable.js";
+import { Clickable } from "../button/Clickable.js";
 import { requireMeta } from "../misc/MetaContext.js";
 import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/menu/Menu.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { isArray } from "../../util/array.js";
 import { getLink, isURLActive, isURLProud } from "../../util/index.js";
-import { Clickable, type ClickableProps } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { requireMeta } from "../misc/MetaContext.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/misc/Catcher.d.ts

@@ -1,25 +1,8 @@
 import { Component, type ReactElement, type ReactNode } from "react";
 import type { Callback } from "../../util/function.js";
-import { type ButtonVariants } from "../form/Button.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
-/**
- * Props for `<RetryButton>` — `<Button>` variants plus optional `children` to override the default "Retry" label.
- *
- * @see https://shelving.cc/ui/RetryButtonProps
- */
-export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {
-}
-/**
- * Button that retries the nearest `<Catcher>` error boundary when clicked.
- *
- * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
- * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
- *
- * @kind component
- * @see https://shelving.cc/ui/RetryButton
- */
-export declare function RetryButton({ children, ...props }: RetryButtonProps): ReactElement | null;
+import type { ChildProps } from "../util/props.js";
 /**
+import { RetryButton, RetryContext } from "../button/RetryButton.js";
  * Props for a component that renders a caught error `reason`.
  *
  * @see https://shelving.cc/ui/ErrorProps

package/ui/misc/Catcher.js

@@ -1,30 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowPathIcon } from "@heroicons/react/24/solid";
-import { Component, createContext, use } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
 import { getMessage } from "../../util/error.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Button } from "../form/Button.js";
+import { RetryButton, RetryContext } from "../button/RetryButton.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
-const RetryContext = createContext(undefined);
-RetryContext.displayName = "RetryContext";
-const RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
-/**
- * Button that retries the nearest `<Catcher>` error boundary when clicked.
- *
- * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
- * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
- *
- * @kind component
- * @see https://shelving.cc/ui/RetryButton
- */
-export function RetryButton({ children = RETRY_CHILDREN, ...props }) {
-    const retry = use(RetryContext);
-    if (!retry)
-        return null;
-    return (_jsx(Button, { onClick: retry, ...props, children: children }));
-}
 /**
  * React error boundary that renders a fallback component when any descendant throws.
  *

package/ui/misc/Catcher.tsx

@@ -1,51 +1,15 @@
-import { ArrowPathIcon } from "@heroicons/react/24/solid";
-import { Component, createContext, type ReactElement, type ReactNode, use } from "react";
+import { Component, type ReactElement, type ReactNode } from "react";
 import { getMessage } from "../../util/error.js";
 import type { Callback } from "../../util/function.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Button, type ButtonVariants } from "../form/Button.js";
+import { RetryButton, RetryContext } from "../button/RetryButton.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
-
-const RetryContext = createContext<Callback | undefined>(undefined);
-RetryContext.displayName = "RetryContext";
-
-/**
- * Props for `<RetryButton>` — `<Button>` variants plus optional `children` to override the default "Retry" label.
- *
- * @see https://shelving.cc/ui/RetryButtonProps
- */
-export interface RetryButtonProps extends ButtonVariants, OptionalChildProps {}
-
-const RETRY_CHILDREN = (
-	<>
-		<ArrowPathIcon />
-		Retry
-	</>
-);
-
-/**
- * Button that retries the nearest `<Catcher>` error boundary when clicked.
- *
- * - Reads the retry callback from `<Catcher>`'s private context, so it renders `null` when there is no boundary above it to retry.
- * - Defaults to an "Retry" label with a refresh icon; pass `children` to override.
- *
- * @kind component
- * @see https://shelving.cc/ui/RetryButton
- */
-export function RetryButton({ children = RETRY_CHILDREN, ...props }: RetryButtonProps): ReactElement | null {
-	const retry = use(RetryContext);
-	if (!retry) return null;
-	return (
-		<Button onClick={retry} {...props}>
-			{children}
-		</Button>
-	);
-}
+import type { ChildProps } from "../util/props.js";
 
 /**
+import { RetryButton, RetryContext } from "../button/RetryButton.js";
  * Props for a component that renders a caught error `reason`.
  *
  * @see https://shelving.cc/ui/ErrorProps

package/ui/misc/Icon.module.css

@@ -5,9 +5,11 @@
 @layer defaults {
 	.icon {
 		/* Box */
+		display: block;
 		width: 1em;
 		height: 1em;
-		margin: 0;
+		margin-inline: auto;
+		margin-block: 0;
 		padding: 0;
 
 		/* Style */