themelia-ui 3.1.0 → 3.2.0

package/docs/generated/components/features--media-library.md

@@ -947,6 +947,74 @@ Kind: interface.
 
 Preview route: Media library — `/media-library`
 
+### Media picking reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useEffect, useMemo, useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+import { MediaLibraryDialog, type MediaLibraryItem, type MediaLibraryFetcher } from "themelia-ui/features/media-library"
+
+import { SAMPLE_MEDIA } from "./reference-data"
+
+export default function MediaPickingReference() {
+	const [open, setOpen] = useState(false)
+	const [scope, setScope] = useState("site")
+	const [fail, setFail] = useState(false)
+	const [selected, setSelected] = useState<string[]>(["unavailable-id"])
+	const [pickerDraft, setPickerDraft] = useState(selected)
+	const [resolved, setResolved] = useState<{ scope: string; ids: string[]; items: MediaLibraryItem[] }>()
+	const [page, setPage] = useState(0)
+	const [query, setQuery] = useState("")
+	const [pending, setPending] = useState(true)
+	const [hasNext, setHasNext] = useState(false)
+	// A saved id is resolved separately from the current browser page, with scope access applied.
+	useEffect(() => {
+		const controller = new AbortController()
+		const timer = setTimeout(() => {
+			if (!controller.signal.aborted) setResolved({ scope, ids: selected, items: SAMPLE_MEDIA.filter(item => selected.includes(item.id) && item.collection === scope) })
+		}, 150)
+		return () => { controller.abort(); clearTimeout(timer) }
+	}, [selected, scope])
+	const chosen = resolved?.scope === scope && resolved.ids === selected ? resolved.items : []
+	const unavailable = resolved?.scope === scope && resolved.ids === selected && chosen.length < selected.length
+	const changeOpen = (next: boolean) => {
+		if (next) setPickerDraft(selected)
+		setOpen(next)
+	}
+	const fetcher = useMemo<MediaLibraryFetcher>(() => async ({ query: search, signal }) => {
+		setPending(true)
+		try {
+			await new Promise(resolve => setTimeout(resolve, 200))
+			if (signal?.aborted) throw new DOMException("Aborted", "AbortError")
+			if (fail) throw new Error("Media lookup unavailable")
+			const matches = SAMPLE_MEDIA.filter(item => item.collection === scope && item.name.toLowerCase().includes(search.toLowerCase()))
+			const window = matches.slice(page, page + 2)
+			setHasNext(window.length > 1)
+			return { items: window.slice(0, 1) }
+		} finally { if (!signal?.aborted) setPending(false) }
+	}, [scope, fail, page])
+	return <Stack>
+		{unavailable && <Text role="alert">The saved asset is unavailable. Choose a replacement; the draft id is retained until then.</Text>}
+		<Stack direction="horizontal" gap="sm" wrap>
+			<MediaLibraryDialog open={open} trigger={<Button>Choose reference media</Button>} onOpenChange={changeOpen} fetcher={fetcher} value={pickerDraft} onValueChange={setPickerDraft} query={query} onQueryChange={next => { setQuery(next); setPage(0); setPending(true) }} selectionMode="single" allowUpload={false}
+				strings={{ showingCount: shown => `${shown} loaded on this page; total unknown` }}
+				slots={{ footer: <Stack direction="horizontal" gap="sm" wrap align="center">
+					<Text>Media page {page + 1}; total unknown</Text>
+					<Button disabled={pending || page === 0} onClick={() => { setPage(value => value - 1); setPending(true) }}>Previous media page</Button>
+					<Button disabled={pending || !hasNext} onClick={() => { setPage(value => value + 1); setPending(true) }}>Next media page</Button>
+				</Stack> }}
+				onConfirm={(items, ids) => { setSelected(ids); setResolved({ scope, ids, items }); setOpen(false) }} />
+			<Button tone="neutral" appearance="outline" onClick={() => setSelected(["image-2"])}>Load saved media draft</Button>
+			<Button tone="neutral" appearance="outline" onClick={() => { setScope(value => value === "site" ? "other" : "site"); setPage(0); setPending(true) }}>Switch media scope</Button>
+			<Button tone="neutral" appearance="outline" onClick={() => { setFail(value => !value); setPending(true) }}>Toggle media failure</Button>
+		</Stack>
+		<Text role="status">{chosen.length ? `Hydrated selection: ${chosen.map(item => `${item.name} — ${item.alt}`).join(", ")}` : `Saved draft ids: ${selected.join(", ")}`}</Text>
+	</Stack>
+}
+```
+
 ### Asset manager
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/features--overlays.md

@@ -34,6 +34,16 @@ A dialog with a generated footer: cancel and confirm in a fixed order, an async-
 form-aware confirm, and a tone for the glyph and the confirm colour. Use the base Dialog when
 the body owns its actions.
 
+**Use when:** A temporary focused task or nested confirmation with explicit completion.
+
+**Avoid when:** Persistent route content or application-owned business policy.
+
+**Compose:** Use controlled open and closeOnAsyncComplete=false when resolved validation can fail; use formId for a native form with one submit owner. Busy confirmation blocks dismissal.
+
+**Capabilities:** nested confirmation; resolved validation failure; async form completion.
+
+**Alternatives:** ActionSheet, ConfirmDialog.
+
 ```text
 ({ width, surfaceStyle, ...props }: ActionDialogProps) => import("react").JSX.Element
 ```
@@ -362,6 +372,50 @@ Kind: interface.
 
 Preview route: Action overlays — `/action-overlays`
 
+### Nested action flow
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useRef, useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { FormField } from "themelia-ui/base/forms"
+import { Stack } from "themelia-ui/base/structure"
+import { Input } from "themelia-ui/base/text-inputs"
+import { Text } from "themelia-ui/base/typography"
+import { ActionDialog } from "themelia-ui/features/overlays"
+
+export default function NestedActionReference() {
+	const [open, setOpen] = useState(false)
+	const [child, setChild] = useState(false)
+	const [name, setName] = useState("Draft record")
+	const [error, setError] = useState<string>()
+	const [saved, setSaved] = useState(0)
+	const session = useRef(0)
+	const changeOpen = (next: boolean) => { session.current++; setOpen(next); setChild(false) }
+	return <Stack>
+		<ActionDialog open={open} trigger={<Button>Inspect draft</Button>} onOpenChange={changeOpen} title="Record inspector" description="The draft remains here after cancellation, validation failure or transport failure." showConfirm={false}>
+			<Stack>
+				<FormField label="Record name" error={error} hint="Use at least three characters. Use offline to simulate a rejected request."><Input value={name} onChange={event => setName(event.target.value)} /></FormField>
+				<ActionDialog open={child} trigger={<Button>Review save</Button>} onOpenChange={setChild} title="Save this draft?" description="A resolved response can contain validation errors. Closure follows business success." closeOnAsyncComplete={false}
+					alertMessage={error} onError={() => setError("Could not save; your draft is still here.")}
+					onAsyncConfirm={async () => {
+						const attempt = session.current
+						await new Promise(resolve => setTimeout(resolve, 300))
+						if (attempt !== session.current) return
+						if (name === "offline") throw new Error("Unavailable")
+						if (name.trim().length < 3) { setError("Enter at least three characters."); return }
+						setError(undefined); setSaved(count => count + 1); changeOpen(false)
+					}}>
+					<Text>{name}</Text>
+				</ActionDialog>
+				{/* A native form can instead use formId: its submit handler owns validation and closure. */}
+				<Text size="xs" type="secondary">Confirmation {child ? "open" : "closed"}</Text>
+			</Stack>
+		</ActionDialog>
+		<Text role="status">Successful saves {saved}</Text>
+	</Stack>
+}
+```
+
 ### ActionDialog
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/features--rich-text-editor.md

@@ -306,6 +306,44 @@ The shape the toolbar renders. Built-ins and consumer items resolve to this.
 
 Preview route: Rich text editor — `/rich-text-editor`
 
+### Website content reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { Card } from "themelia-ui/base/cards"
+import { PillRadioGroup } from "themelia-ui/base/choice-inputs"
+import { FormField } from "themelia-ui/base/forms"
+import { Stack } from "themelia-ui/base/structure"
+import { Input } from "themelia-ui/base/text-inputs"
+import { RichText, Text } from "themelia-ui/base/typography"
+import { MediaLibraryDialog, type MediaLibraryItem } from "themelia-ui/features/media-library"
+import { RichTextEditor } from "themelia-ui/features/rich-text-editor"
+import { SAMPLE_MEDIA } from "../media-library/reference-data"
+
+export default function WebsiteContentReference() {
+	const [locale, setLocale] = useState("en")
+	const [drafts, setDrafts] = useState<Record<string, string>>({ en: "<p>Welcome to our workspace.</p>", ar: "<p>مرحباً بكم</p>" })
+	const [mediaOpen, setMediaOpen] = useState(false)
+	const [image, setImage] = useState<MediaLibraryItem>()
+	const [alt, setAlt] = useState("")
+	const [failed, setFailed] = useState(true)
+	const [pending, setPending] = useState(false)
+	const [message, setMessage] = useState("Drafts are local until saved")
+	return <Card title="Website content" description="Each locale owns a retained draft. Preview sanitizes HTML; the application also validates and sanitizes persisted content.">
+		<Stack>
+			<PillRadioGroup aria-label="Content locale" name="reference-content-locale" value={locale} onValueChange={value => value && setLocale(value)} options={[{ value: "en", label: "English" }, { value: "ar", label: "العربية" }]} />
+			<div dir={locale === "ar" ? "rtl" : "ltr"}><RichTextEditor value={drafts[locale] ?? ""} onValueChange={html => setDrafts(current => ({ ...current, [locale]: html }))} /></div>
+			<MediaLibraryDialog open={mediaOpen} trigger={<Button tone="neutral" appearance="outline">Choose hero media</Button>} onOpenChange={setMediaOpen} items={SAMPLE_MEDIA} selectionMode="single" confirmOnSelect allowUpload={false} onConfirm={items => { const item = items[0]; setImage(item); setAlt(item?.alt ?? ""); setMediaOpen(false) }} />
+			{image && <FormField label="Hero image alternative text" hint={image.name}><Input value={alt} onChange={event => setAlt(event.target.value)} /></FormField>}
+			<Stack direction="horizontal" wrap gap="sm"><Button disabled={pending} onClick={async () => { if (pending) return; setPending(true); await new Promise(resolve => setTimeout(resolve, 250)); setMessage(failed ? "Save failed. All locale drafts and image text remain here." : "Mock website save completed"); setPending(false) }}>Save website content</Button><Button tone="neutral" appearance="outline" onClick={() => setFailed(value => !value)}>Toggle save failure</Button></Stack>
+			<Text role="status">{message}</Text>
+			<RichText html={drafts[locale] ?? ""} />
+		</Stack>
+	</Card>
+}
+```
+
 ### The editor and what comes out
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/layout--app-shell.md

@@ -159,6 +159,37 @@ Kind: type.
 
 Preview route: App shell — `/app-shell`
 
+### Workspace navigation reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Text } from "themelia-ui/base/typography"
+import { TopbarSidebarLayout } from "themelia-ui/layout/app-shell"
+import { AppSidebar, type LinkRenderer } from "themelia-ui/layout/sidebar"
+
+export default function WorkspaceNavigationReference() {
+	const [route, setRoute] = useState("/a/overview")
+	const [navigations, setNavigations] = useState(0)
+	const workspace = route.startsWith("/b/") ? "B" : "A"
+	const renderLink: LinkRenderer = ({ href, children, external, active, disabled, onClick, ...props }) => {
+		void active
+		if (disabled || !href) return <span {...props}>{children}</span>
+		return <a {...props} href={href} target={props.target ?? (external ? "_blank" : undefined)} rel={props.rel ?? (external ? "noopener noreferrer" : undefined)} onClick={event => {
+			onClick?.(event)
+			if (event.defaultPrevented || external || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+			event.preventDefault(); setRoute(href); setNavigations(count => count + 1)
+		}}>{children}</a>
+	}
+	return <div style={{ width: "100%", height: "28rem", minWidth: 0 }}>
+		<TopbarSidebarLayout contained contentRender={<div />} logo="Reference workspace" sidebarProviderProps={{ persist: false, keyboardShortcut: false }} sidebar={<AppSidebar logo={`Workspace ${workspace}`} renderLink={renderLink} currentUrl={route}
+			workspaceLinks={[{ label: "Workspace A home", url: "/a/overview", external: false }, { label: "Workspace B home", url: "/b/overview", external: false }, { label: "External workspace", url: "https://example.com" }]}
+			navigationGroups={{ "": [{ label: `${workspace} overview`, href: `/${workspace.toLowerCase()}/overview` }, { label: `${workspace} settings`, href: `/${workspace.toLowerCase()}/settings` }] }} />}>
+			<Text role="status">Workspace {workspace}; route {route}; navigations {navigations}</Text>
+		</TopbarSidebarLayout>
+	</div>
+}
+```
+
 ### The shell
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/layout--containers.md

@@ -30,6 +30,16 @@ outside the package and arrives through the public props, callbacks, slots, or a
 
 Kind: const.
 
+**Use when:** A region needs centred reading width and an inline gutter without a page header.
+
+**Avoid when:** Page or another shell already owns that width and gutter.
+
+**Compose:** Use maxWidth and gutter from the Container contract; its values differ from Stack/Grid widths. It owns no scrolling or heading.
+
+**Capabilities:** reading width; centred content; inline gutter.
+
+**Alternatives:** Page, Stack.
+
 ```text
 React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```
@@ -65,6 +75,16 @@ Extends: `React.ComponentProps<"div">`.
 
 Kind: const.
 
+**Use when:** A bounded app shell needs its single page scroller and query-container boundary.
+
+**Avoid when:** The shell already supplies a scroller, or the document owns scrolling.
+
+**Compose:** Use once at the scroll boundary. Preserve its keyboard focusability; it supplies neither the main landmark nor the page gutter.
+
+**Capabilities:** page scroll owner; keyboard scrolling; inline size containment.
+
+**Alternatives:** Page.
+
 ```text
 React.ForwardRefExoticComponent<Omit<PageViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```
@@ -81,6 +101,16 @@ No own members are present in the normalized public snapshot.
 
 Kind: const.
 
+**Use when:** A semantic page section needs consistent rhythm between groups.
+
+**Avoid when:** Only needing passive spacing, or another component already owns the section.
+
+**Compose:** Supply a heading or accessible name; Section supplies the section element and shared group rhythm, not a heading or inset.
+
+**Capabilities:** semantic section; page group rhythm.
+
+**Alternatives:** Stack, ContentBlock.
+
 ```text
 React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<HTMLElement>>
 ```
@@ -97,6 +127,16 @@ No own members are present in the normalized public snapshot.
 
 Kind: const.
 
+**Use when:** Primary work needs a secondary summary with semantic aside and optional spanning header/footer.
+
+**Avoid when:** Needing equal columns or a custom rail width and collapse breakpoint.
+
+**Compose:** The viewport lg step enables two columns; the aside remains second in the DOM. Keep sticky opt-in for content that fits the viewport.
+
+**Capabilities:** main aside layout; responsive summary rail; sticky aside.
+
+**Alternatives:** Split, Grid.
+
 ```text
 React.ForwardRefExoticComponent<Omit<TwoColumnLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>
 ```

package/docs/generated/components/layout--page.md

@@ -7,7 +7,7 @@ A page needs its title, description and primary actions in the standard arrangem
 ## Selection
 
 - **Use when:** A page needs its title, description and primary actions in the standard arrangement.
-- **Avoid when:** The page is a record's index or show view with a fuller shell.
+- **Avoid when:** The task needs standard loading, empty and error presentation already supplied by ResourceIndexShell or ResourceShowShell.
 - **Consider instead:** `features/resource`, `layout/containers`
 - **Stability:** stable.
 
@@ -215,6 +215,35 @@ Extends: `Omit<React.ComponentProps<"div">, "title">`.
 
 Preview route: Page & page header — `/page`
 
+### Record detail reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Button } from "themelia-ui/base/buttons"
+import { Card, CardContent, CardHeader } from "themelia-ui/base/cards"
+import { ContentBlock, MetadataList } from "themelia-ui/base/display"
+import { Stack } from "themelia-ui/base/structure"
+import { Text } from "themelia-ui/base/typography"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "themelia-ui/base/table"
+import { Page } from "themelia-ui/layout/page"
+
+export default function RecordDetailReference() {
+	const [activity, setActivity] = useState("No commands yet")
+	return <Page header={{ title: "Record R-104", description: "A record with independent subjects and related records.", actions: <Button onClick={() => setActivity("Route command: export R-104")}>Export record</Button> }}>
+		<Stack>
+			<Card title="Identity" titleLevel={2} headerAction={<Button tone="neutral" appearance="outline" onClick={() => setActivity("Identity command: edit R-104")}>Edit identity</Button>}>
+				<MetadataList items={[{ id: "owner", label: "Owner", value: "Example team" }, { id: "state", label: "State", value: "Active" }]} />
+				<ContentBlock title="Notes" surface="plain"><Text>A long description belongs to prose, while the name and status above are facts. Commands stay beside the subject they affect. Repeated records can each have their own headings without repeating the route heading.</Text></ContentBlock>
+			</Card>
+			<Card><CardHeader title="Related records" titleLevel={2} description="The header is composed from parts; omit Card title props when supplying it." /><CardContent>
+				<Table aria-label="Related records"><TableHeader><TableRow><TableHead>Record</TableHead><TableHead>Relationship</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>R-105</TableCell><TableCell>Follow-up</TableCell></TableRow></TableBody></Table>
+			</CardContent></Card>
+			<Text role="status">{activity}</Text>
+		</Stack>
+	</Page>
+}
+```
+
 ### PageHeader
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/layout--sidebar.md

@@ -260,6 +260,16 @@ Kind: callable.
 The rail’s header as a workspace switcher. The whole header row is the trigger, not a
 chevron beside a decorative name — the name is what a reader aims at.
 
+**Use when:** Workspace destinations from the rail header, including mobile navigation.
+
+**Avoid when:** A logo without destinations or application business switching policy.
+
+**Compose:** Disclosure keeps the sheet open; same-app destination selection dismisses it. The link adapter preserves native external targets.
+
+**Capabilities:** workspace navigation; mobile workspace switcher.
+
+**Alternatives:** SidebarLogo.
+
 ```text
 ({ logo, collapsedLogo, workspaceLinks, renderLink, strings, contentClassName, }: SidebarWorkspaceProps) => import("react").JSX.Element
 ```
@@ -312,6 +322,37 @@ Kind: interface.
 
 Preview route: App shell — `/app-shell`
 
+### Workspace navigation reference
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+import { useState } from "react"
+import { Text } from "themelia-ui/base/typography"
+import { TopbarSidebarLayout } from "themelia-ui/layout/app-shell"
+import { AppSidebar, type LinkRenderer } from "themelia-ui/layout/sidebar"
+
+export default function WorkspaceNavigationReference() {
+	const [route, setRoute] = useState("/a/overview")
+	const [navigations, setNavigations] = useState(0)
+	const workspace = route.startsWith("/b/") ? "B" : "A"
+	const renderLink: LinkRenderer = ({ href, children, external, active, disabled, onClick, ...props }) => {
+		void active
+		if (disabled || !href) return <span {...props}>{children}</span>
+		return <a {...props} href={href} target={props.target ?? (external ? "_blank" : undefined)} rel={props.rel ?? (external ? "noopener noreferrer" : undefined)} onClick={event => {
+			onClick?.(event)
+			if (event.defaultPrevented || external || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+			event.preventDefault(); setRoute(href); setNavigations(count => count + 1)
+		}}>{children}</a>
+	}
+	return <div style={{ width: "100%", height: "28rem", minWidth: 0 }}>
+		<TopbarSidebarLayout contained contentRender={<div />} logo="Reference workspace" sidebarProviderProps={{ persist: false, keyboardShortcut: false }} sidebar={<AppSidebar logo={`Workspace ${workspace}`} renderLink={renderLink} currentUrl={route}
+			workspaceLinks={[{ label: "Workspace A home", url: "/a/overview", external: false }, { label: "Workspace B home", url: "/b/overview", external: false }, { label: "External workspace", url: "https://example.com" }]}
+			navigationGroups={{ "": [{ label: `${workspace} overview`, href: `/${workspace.toLowerCase()}/overview` }, { label: `${workspace} settings`, href: `/${workspace.toLowerCase()}/settings` }] }} />}>
+			<Text role="status">Workspace {workspace}; route {route}; navigations {navigations}</Text>
+		</TopbarSidebarLayout>
+	</div>
+}
+```
+
 ### The shell
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application

package/docs/generated/components/ui-provider.md

@@ -501,7 +501,7 @@ Kind: callable.
 `<UIScope>` — a region with its own tokens. Nests freely; writes the custom properties
 its merged config names and never touches the document: a region governs its subtree,
 and reaching past it is the root's job, and only when asked. `render` picks the element
-— Base UI's contract, the same one Item and Stack use — e.g. `<UIScope render={<aside />}>`,
+through Base UI's element-substitution contract, e.g. `<UIScope render={<aside />}>`,
 for places a `div` is invalid.
 
 ```text

package/docs/generated/composition-ladder.md

@@ -10,9 +10,9 @@ The rungs are ordinary props; controlled state and callbacks when state exists;
 named slots; render props; exported parts; headless hooks; and complete recipes. Passive
 modules may stop at the first rung. Interaction features normally expose several.
 
-This table is derived from what each module declares, so it cannot describe a seam that
-was removed or miss one that was added. The table focuses on feature modules, where the
-higher rungs are meaningful; the columns start at accessors.
+This table summarizes detected declarations and recipes. It is a discovery aid, not a
+prop contract: open the selected module API for exact signatures and supported seams.
+It focuses on feature modules; the columns start at accessors.
 
 | module | accessors | slots | render props | headless hook | partials | recipe |
 | --- | :-: | :-: | :-: | :-: | :-: | :-: |
@@ -41,7 +41,7 @@ higher rungs are meaningful; the columns start at accessors.
 | `features/table` | ● | ● | · | ● | ● | ● |
 | `features/theme-tweaker` | · | ● | · | ● | ● | ● |
 
-## The four the plan names
+## Four feature examples
 
 Global Search, Filters, Comments and Data View are the demonstration cases, because a
 ladder that only works on a Badge proves nothing. Each is usable at three heights:
@@ -50,7 +50,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `GlobalSearch`, dropped in with props and callbacks.
 
-**Region-customized** — 8 exported parts, so a region can be replaced without copying the whole: `GlobalSearchDialog`, `GlobalSearchEmptyState`, `GlobalSearchFooter`, `GlobalSearchIdleState`, `GlobalSearchInput`, and 2 more.
+**Region-customized** — 7 other public exports to inspect for region customization: `GlobalSearchDialog`, `GlobalSearchEmptyState`, `GlobalSearchFooter`, `GlobalSearchIdleState`, `GlobalSearchInput`, and 2 more.
 
 **Headless** — `useGlobalSearch`, for presentation the parts cannot express.
 
@@ -58,7 +58,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `FilterLayout`, dropped in with props and callbacks.
 
-**Region-customized** — 18 exported parts, so a region can be replaced without copying the whole: `AsyncFilterEditor`, `DateFilterEditor`, `FilterEditor`, `FilterErrorBoundary`, `FilterOperator`, and 12 more.
+**Region-customized** — 17 other public exports to inspect for region customization: `AsyncFilterEditor`, `DateFilterEditor`, `FilterEditor`, `FilterErrorBoundary`, `FilterOperator`, and 12 more.
 
 **Headless** — `useAsyncOptions`, `useFilterCache`, `useFilterGroups`, `useFilters`, for presentation the parts cannot express.
 
@@ -66,7 +66,7 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `Comments`, dropped in with props and callbacks.
 
-**Region-customized** — 6 exported parts, so a region can be replaced without copying the whole: `CommentAttachmentChip`, `CommentComposer`, `CommentContent`, `CommentItem`, `CommentTimeline`.
+**Region-customized** — 5 other public exports to inspect for region customization: `CommentAttachmentChip`, `CommentComposer`, `CommentContent`, `CommentItem`, `CommentTimeline`.
 
 **Headless** — `useAttachmentUpload`, `useComments`, for presentation the parts cannot express.
 
@@ -74,6 +74,6 @@ ladder that only works on a Badge proves nothing. Each is usable at three height
 
 **Ready-made** — `DataView`, dropped in with props and callbacks.
 
-**Region-customized** — 6 exported parts, so a region can be replaced without copying the whole: `DataViewPagination`, `DataViewShell`, `DataViewTableFrame`, `DataViewToolbar`, `SavedViewTabs`.
+**Region-customized** — 5 other public exports to inspect for region customization: `DataViewPagination`, `DataViewShell`, `DataViewTableFrame`, `DataViewToolbar`, `SavedViewTabs`.
 
 **Headless** — `useDataView`, for presentation the parts cannot express.