@poodle64/ui 2026.10.17 → 2026.10.18

package/dist/components/ui/page-section/page-section.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+     * A section of a page, under its PageHeader: a heading, an optional line of
+     * explanation, trailing actions, and the section's content at one distance
+     * below them.
+     *
+     * One app had five recipes for this one role, from an 11px uppercase kicker
+     * to a 20px display heading, and each page spaced its content from the
+     * heading differently. The heading and the gap under it are this
+     * component's, because those are the halves that drift.
+     *
+     * Level 2 is a section, in the display face one step under the page title.
+     * Level 3 is a subsection, in the body face at a Panel title's size, so a
+     * titled card and a subsection read as the same rank. There is no uppercase
+     * kicker form: a small caps label above content is the column head of a
+     * table or a nav group, never a heading.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title'> & {
+    title: string;
+    /** 2, a section of the page; 3, a section within one. */
+    level?: 2 | 3;
+    /** A sentence or two under the heading. It wraps. */
+    description?: string;
+    /** How many things the section holds, set beside the heading. */
+    count?: number;
+    /** Controls for the section, trailing the heading. */
+    actions?: Snippet;
+    children?: Snippet;
+    /** The heading's id, for a link to the section. One is generated otherwise. */
+    id?: string;
+};
+declare const PageSection: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/components/ui/sheet/index.d.ts

@@ -0,0 +1,13 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants, type SheetSide } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

package/dist/components/ui/sheet/index.js

@@ -0,0 +1,15 @@
+import Root from './sheet.svelte';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Portal from './sheet-portal.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Body from './sheet-body.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+export { sheetVariants } from './sheet-content.svelte';
+export { Root, Trigger, Close, Portal, Overlay, Content, Header, Body, Footer, Title, Description, 
+//
+Root as Sheet, Trigger as SheetTrigger, Close as SheetClose, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Body as SheetBody, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription };

package/dist/components/ui/sheet/sheet-body.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<!-- The part that scrolls, so the header and footer stay put. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-body"
+	class={cn('min-h-0 flex-1 overflow-y-auto p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sheet/sheet-body.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const SheetBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SheetBody = ReturnType<typeof SheetBody>;
+export default SheetBody;

package/dist/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="sheet-close" {type} {...restProps} />

package/dist/components/ui/sheet/sheet-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const SheetClose: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type SheetClose = ReturnType<typeof SheetClose>;
+export default SheetClose;

package/dist/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	// A sheet stands on the hairline-and-ladder depth every other kit surface
+	// uses (README §Depth): an edge border against the dimmed page, no shadow.
+	// A side sheet takes a phone's whole width: a sliver of dimmed page beside
+	// it is too narrow to read and too narrow to aim at.
+	export const sheetVariants = tv({
+		base: 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150',
+		variants: {
+			side: {
+				right: 'data-closed:slide-out-to-right data-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-sm',
+				left: 'data-closed:slide-out-to-left data-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-sm',
+				bottom: 'data-closed:slide-out-to-bottom data-open:slide-in-from-bottom inset-x-0 bottom-0 max-h-[85%] rounded-t-xl border-t',
+				top: 'data-closed:slide-out-to-top data-open:slide-in-from-top inset-x-0 top-0 max-h-[85%] rounded-b-xl border-b'
+			}
+		},
+		defaultVariants: { side: 'right' }
+	});
+
+	export type SheetSide = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import { Button } from '../button/index.js';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import SheetPortal from './sheet-portal.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		showCloseButton = true,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		side?: SheetSide;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPortal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPortal>

package/dist/components/ui/sheet/sheet-content.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150", {
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+}, undefined, "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out border-border fixed z-50 flex flex-col text-sm outline-none duration-200 ease-out data-closed:duration-150", unknown, unknown, undefined>>;
+export type SheetSide = VariantProps<typeof sheetVariants>['side'];
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { ComponentProps, Snippet } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import SheetPortal from './sheet-portal.svelte';
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    side?: SheetSide;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    showCloseButton?: boolean;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/components/ui/sheet/sheet-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const SheetDescription: import("svelte").Component<DialogPrimitive.DescriptionProps, {}, "ref">;
+type SheetDescription = ReturnType<typeof SheetDescription>;
+export default SheetDescription;

package/dist/components/ui/sheet/sheet-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn(
+		'bg-muted/50 mt-auto flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sheet/sheet-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const SheetFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SheetFooter = ReturnType<typeof SheetFooter>;
+export default SheetFooter;

package/dist/components/ui/sheet/sheet-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<!-- pr-12 keeps the title clear of the content's close button. -->
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex shrink-0 flex-col gap-1.5 border-b p-4 pr-12', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/sheet/sheet-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const SheetHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type SheetHeader = ReturnType<typeof SheetHeader>;
+export default SheetHeader;

package/dist/components/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const SheetOverlay: import("svelte").Component<DialogPrimitive.OverlayProps, {}, "ref">;
+type SheetOverlay = ReturnType<typeof SheetOverlay>;
+export default SheetOverlay;

package/dist/components/ui/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

package/dist/components/ui/sheet/sheet-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SheetPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type SheetPortal = ReturnType<typeof SheetPortal>;
+export default SheetPortal;

package/dist/components/ui/sheet/sheet-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<!-- AppDialog's title treatment, so a sheet and a dialogue name themselves alike. -->
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn(
+		'font-display text-lg leading-tight font-semibold tracking-[var(--ds-font-display-tracking,-0.025em)]',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetTitle: import("svelte").Component<SheetPrimitive.TitleProps, {}, "ref">;
+type SheetTitle = ReturnType<typeof SheetTitle>;
+export default SheetTitle;

package/dist/components/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="sheet-trigger" {type} {...restProps} />

package/dist/components/ui/sheet/sheet-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+declare const SheetTrigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type SheetTrigger = ReturnType<typeof SheetTrigger>;
+export default SheetTrigger;

package/dist/components/ui/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

package/dist/components/ui/sheet/sheet.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/ui/skeleton/skeleton.svelte

@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-muted animate-pulse rounded-md', className)}
+	class={cn('bg-muted animate-pulse rounded-md motion-reduce:animate-none', className)}
 	{...restProps}
 ></div>

package/dist/styles.css

@@ -296,11 +296,19 @@
 	/* Eyebrow / column-head tracking — pairs with text-2xs + uppercase. */
 	--tracking-eyebrow: 0.06em;
 
+	/* The type scale, by role (README §The type scale). An app sets none of
+	   these; a role with no key here is set in the component that owns it. */
+
 	/* Page-title and large-readout size (PageHeader, StatCard). */
 	--text-display: 1.75rem;
 	--text-display--line-height: 2.125rem;
 	--text-display--letter-spacing: -0.02em;
 
+	/* A section of a page, under its title (PageSection). */
+	--text-section: 1.25rem;
+	--text-section--line-height: 1.75rem;
+	--text-section--letter-spacing: -0.015em;
+
 	/* Panel/card heading size — one step above the sm body default. */
 	--text-body: 0.9375rem;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.10.17",
+	"version": "2026.10.18",
 	"description": "Household shared component layer: shadcn-svelte primitives (bits-ui) plus the composed page chrome every app builds its routes from, restyled by each app's @poodle64/design-tokens alias layer. One fix reaches every app.",
 	"type": "module",
 	"license": "MIT",

package/registry/component-map.json

@@ -1,10 +1,10 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.10.17",
+		"version": "2026.10.18",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
-		"componentCount": 70,
+		"componentCount": 76,
 		"situationCount": 20
 	},
 	"situations": [
@@ -291,7 +291,7 @@
 		{
 			"key": "library-data",
 			"title": "Library data the app fetched",
-			"description": "The estate's shared document-library surfaces — a faceted catalogue, one collection's detail, one document's detail, a ranked search answer — rendered from plain props the app maps its own API responses into. The package never fetches and never routes: the app owns the query, the offset and every link. Configuration is the schema-driven half (SchemaForm); library data is fixed components because its shape is stable.",
+			"description": "The estate's shared document-library surfaces — a faceted catalogue, one collection's detail, one document's detail, a document to read with its contents, a ranked search answer — rendered from plain props the app maps its own API responses into. The package never fetches and never routes: the app owns the query, the offset and every link. Configuration is the schema-driven half (SchemaForm); library data is fixed components because its shape is stable.",
 			"components": [
 				{
 					"name": "LibraryBrowse",
@@ -314,6 +314,13 @@
 					"props": "document, loading?, error?, collectionHref?, onOpenCollection?, actions?, children?",
 					"insteadOf": "a bespoke document page: identity dl, locations, tags and memberships hand-laid-out per app"
 				},
+				{
+					"name": "DocumentReader",
+					"dir": "document-reader",
+					"import": "@poodle64/ui/document-reader",
+					"props": "title?, subtitle?, breadcrumbs?, meta?, actions?, html?, children?, contents?, contentsLabel?, aside?, footer?, loading?, error?, onRetry?",
+					"insteadOf": "a hand-built markdown page: its own h1, back row, table of contents, scroll-spy and max-w-4xl; or a document body in a box under DocumentDetail"
+				},
 				{
 					"name": "SearchResults",
 					"dir": "search-results",
@@ -361,7 +368,7 @@
 		{
 			"key": "page-frame",
 			"title": "The frame every route shares",
-			"description": "The standing chrome — the app shell and its nav, the one page-title treatment, the persistent right-hand context column, a foldable working list beside the page's own content.",
+			"description": "The standing chrome — the app shell and its nav, the one page-title treatment and its trail, the page's own container and sections, the persistent right-hand context column, a foldable working list beside the page's own content.",
 			"components": [
 				{
 					"name": "AppShell",
@@ -391,6 +398,27 @@
 					"props": "title?, eyebrow?, breadcrumbs?, icon?, subtitle?, info?, meta?, actions?",
 					"insteadOf": "a hand-written <h1> and title bar (the drift gate fails this)"
 				},
+				{
+					"name": "Breadcrumbs",
+					"dir": "breadcrumbs",
+					"import": "@poodle64/ui/breadcrumbs",
+					"props": "items, label?",
+					"insteadOf": "a hand-written chevron trail in PageHeader's breadcrumbs snippet; PageHeader takes the same items as `breadcrumbs={[…]}`"
+				},
+				{
+					"name": "PageContainer",
+					"dir": "page-container",
+					"import": "@poodle64/ui/page-container",
+					"props": "children",
+					"insteadOf": "a per-page wrapper picking its own vertical rhythm (space-y-6, gap-10, …)"
+				},
+				{
+					"name": "PageSection",
+					"dir": "page-section",
+					"import": "@poodle64/ui/page-section",
+					"props": "title, level?, description?, count?, actions?, children?, id?",
+					"insteadOf": "a hand-styled section heading (an uppercase kicker, text-lg font-semibold, a display h2) and its own gap to the content under it"
+				},
 				{
 					"name": "RecordSwitcher",
 					"dir": "record-switcher",
@@ -503,6 +531,13 @@
 					"props": "message?",
 					"insteadOf": "a bare spinner or 'Loading…' you place by hand"
 				},
+				{
+					"name": "ContentSkeleton",
+					"dir": "content-skeleton",
+					"import": "@poodle64/ui/content-skeleton",
+					"props": "shape?, count?, label?",
+					"insteadOf": "bare Skeleton boxes sized by hand (h-44 rounded-xl, h-24) standing in for a list, tiles or a document body while the page's header is already drawn"
+				},
 				{
 					"name": "ErrorState",
 					"dir": "error-state",
@@ -590,6 +625,10 @@
 			"dir": "separator",
 			"import": "@poodle64/ui/separator"
 		},
+		{
+			"dir": "sheet",
+			"import": "@poodle64/ui/sheet"
+		},
 		{
 			"dir": "skeleton",
 			"import": "@poodle64/ui/skeleton"

package/registry/component-map.md

@@ -1,7 +1,7 @@
 # @poodle64/ui — situation → component map
 
 <!-- GENERATED by scripts/generate-registry.mjs from scripts/situations.json + package source. DO NOT EDIT. -->
-Generated from `@poodle64/ui@2026.10.17`. 70 components, 20 situations.
+Generated from `@poodle64/ui@2026.10.18`. 76 components, 20 situations.
 
 **Read this before writing a `<div>`.** Find the SITUATION you are in below, then compose the component named for it — do not hand-build it from raw `Card` or utility classes. Import is `import { Name } from '<import path>'`. Props marked `?` are optional. This map is the retrieval step the [`frontend-design` skill] makes mandatory; the [CHI 2026 study] measured composing-from-a-registry at 95% design-system compliance against 71% for writing the CSS from a prose style guide.
 
@@ -128,13 +128,14 @@ _A config object whose shape arrives at runtime as a JSON Schema plus a JSON For
 
 ## Library data the app fetched
 
-_The estate's shared document-library surfaces — a faceted catalogue, one collection's detail, one document's detail, a ranked search answer — rendered from plain props the app maps its own API responses into. The package never fetches and never routes: the app owns the query, the offset and every link. Configuration is the schema-driven half (SchemaForm); library data is fixed components because its shape is stable._
+_The estate's shared document-library surfaces — a faceted catalogue, one collection's detail, one document's detail, a document to read with its contents, a ranked search answer — rendered from plain props the app maps its own API responses into. The package never fetches and never routes: the app owns the query, the offset and every link. Configuration is the schema-driven half (SchemaForm); library data is fixed components because its shape is stable._
 
 | Component | Import | Key props | Reach for it instead of |
 | --- | --- | --- | --- |
 | `LibraryBrowse` | `@poodle64/ui/library-browse` | `documents, facets?, query?, total?, offset?, limit?, loading?, error?, onQueryChange?, onFacetChange?, onPageChange?, documentHref?, onOpenDocument?, toolbar?` | a hand-built catalogue page: search box, facet rail, filter chips, results table and pager re-derived per app |
 | `CollectionDetail` | `@poodle64/ui/collection-detail` | `collection, stats?, documents?, documentsTotal?, loading?, error?, documentsLoading?, documentsError?, onPageChange?, documentHref?, onOpenDocument?, actions?, children?` | a bespoke collection page assembled from raw Card, a hand-built table and its own stat rows |
 | `DocumentDetail` | `@poodle64/ui/document-detail` | `document, loading?, error?, collectionHref?, onOpenCollection?, actions?, children?` | a bespoke document page: identity dl, locations, tags and memberships hand-laid-out per app |
+| `DocumentReader` | `@poodle64/ui/document-reader` | `title?, subtitle?, breadcrumbs?, meta?, actions?, html?, children?, contents?, contentsLabel?, aside?, footer?, loading?, error?, onRetry?` | a hand-built markdown page: its own h1, back row, table of contents, scroll-spy and max-w-4xl; or a document body in a box under DocumentDetail |
 | `SearchResults` | `@poodle64/ui/search-results` | `results, query?, total?, loading?, error?, resultHref?, onOpen?, onRetry?` | a hand-built ranked hit list minting its own highlight and relevance styling |
 
 ## A document a machine read, with evidence outlined
@@ -156,7 +157,7 @@ _People, organisations, sources or any entities as nodes and their relations as
 
 ## The frame every route shares
 
-_The standing chrome — the app shell and its nav, the one page-title treatment, the persistent right-hand context column, a foldable working list beside the page's own content._
+_The standing chrome — the app shell and its nav, the one page-title treatment and its trail, the page's own container and sections, the persistent right-hand context column, a foldable working list beside the page's own content._
 
 | Component | Import | Key props | Reach for it instead of |
 | --- | --- | --- | --- |
@@ -164,6 +165,9 @@ _The standing chrome — the app shell and its nav, the one page-title treatment
 | `ShellControls` | `@poodle64/ui/app-shell` | `children` | a scope row (entity, financial year, chart/table) hand-placed above the page body; the shell's top bar carries it |
 | `Segmented` | `@poodle64/ui/segmented` | `value, options, label, size?` | a hand-built row of aria-pressed buttons for a small fixed choice |
 | `PageHeader` | `@poodle64/ui/page-header` | `title?, eyebrow?, breadcrumbs?, icon?, subtitle?, info?, meta?, actions?` | a hand-written <h1> and title bar (the drift gate fails this) |
+| `Breadcrumbs` | `@poodle64/ui/breadcrumbs` | `items, label?` | a hand-written chevron trail in PageHeader's breadcrumbs snippet; PageHeader takes the same items as `breadcrumbs={[…]}` |
+| `PageContainer` | `@poodle64/ui/page-container` | `children` | a per-page wrapper picking its own vertical rhythm (space-y-6, gap-10, …) |
+| `PageSection` | `@poodle64/ui/page-section` | `title, level?, description?, count?, actions?, children?, id?` | a hand-styled section heading (an uppercase kicker, text-lg font-semibold, a display h2) and its own gap to the content under it |
 | `RecordSwitcher` | `@poodle64/ui/record-switcher` | `name, groups, current?, noun?, placeholder?, icon?, all?, pages?, separator?` | a bare record name beside a small chevrons button in the top bar, and a dropdown of names with no search, groups or thumbnails; the record's own page tabs come with it |
 | `ContextColumn` | `@poodle64/ui/context-column` | `stats?, statsTitle?, statsInfo?, detail?, title?, subtitle?, onClose?, children?, documentPane?, ariaLabel?` | a hand-built right-hand <aside> with a stat card and a detail pane; on a record page, the one opened item (title, close, an inner scroll) and its DocumentPane, in the column's place or beside it once the page's row has room |
 | `ListShell` | `@poodle64/ui/list-shell` | `title, children, label?, open?, actions?` | a module hand-rolling its own foldable second column beside the rail — a queue, an inbox, a working list |
@@ -198,11 +202,12 @@ _A surface with nothing to show yet, still loading, or that failed to load — t
 | --- | --- | --- | --- |
 | `EmptyState` | `@poodle64/ui/empty-state` | `title, icon?, description?, action?` | a hand-centred 'Nothing here' message |
 | `LoadingState` | `@poodle64/ui/loading-state` | `message?` | a bare spinner or 'Loading…' you place by hand |
+| `ContentSkeleton` | `@poodle64/ui/content-skeleton` | `shape?, count?, label?` | bare Skeleton boxes sized by hand (h-44 rounded-xl, h-24) standing in for a list, tiles or a document body while the page's header is already drawn |
 | `ErrorState` | `@poodle64/ui/error-state` | `message, action?` | a hand-built error message with a retry button |
 
 ## Primitives you already know
 
 _Standard shadcn-svelte / bits-ui primitives — reach for them the same way; no situation lookup needed. Import each from its path below._
 
-`@poodle64/ui/alert` · `@poodle64/ui/alert-dialog` · `@poodle64/ui/avatar` · `@poodle64/ui/badge` · `@poodle64/ui/button` · `@poodle64/ui/card` · `@poodle64/ui/checkbox` · `@poodle64/ui/command` · `@poodle64/ui/data-table` · `@poodle64/ui/dialog` · `@poodle64/ui/dropdown-menu` · `@poodle64/ui/input` · `@poodle64/ui/input-group` · `@poodle64/ui/label` · `@poodle64/ui/password-input` · `@poodle64/ui/popover` · `@poodle64/ui/progress` · `@poodle64/ui/select` · `@poodle64/ui/separator` · `@poodle64/ui/skeleton` · `@poodle64/ui/sonner` · `@poodle64/ui/switch` · `@poodle64/ui/table` · `@poodle64/ui/tabs` · `@poodle64/ui/textarea` · `@poodle64/ui/tooltip`
+`@poodle64/ui/alert` · `@poodle64/ui/alert-dialog` · `@poodle64/ui/avatar` · `@poodle64/ui/badge` · `@poodle64/ui/button` · `@poodle64/ui/card` · `@poodle64/ui/checkbox` · `@poodle64/ui/command` · `@poodle64/ui/data-table` · `@poodle64/ui/dialog` · `@poodle64/ui/dropdown-menu` · `@poodle64/ui/input` · `@poodle64/ui/input-group` · `@poodle64/ui/label` · `@poodle64/ui/password-input` · `@poodle64/ui/popover` · `@poodle64/ui/progress` · `@poodle64/ui/select` · `@poodle64/ui/separator` · `@poodle64/ui/sheet` · `@poodle64/ui/skeleton` · `@poodle64/ui/sonner` · `@poodle64/ui/switch` · `@poodle64/ui/table` · `@poodle64/ui/tabs` · `@poodle64/ui/textarea` · `@poodle64/ui/tooltip`