@poodle64/ui 2026.8.13 → 2026.8.15

package/README.md

@@ -751,7 +751,11 @@ node harness/additivity.mjs ui-v2026.8.3
 Tailwind chain, exactly as a consuming app wires it — a class that generates no
 rule, a colour that resolves to nothing, a registered theme key nothing reads, a
 variant whose selector cannot match the DOM, and a sizing utility that has
-silently changed meaning all fail there rather than shipping.
+silently changed meaning all fail there rather than shipping. It also sweeps the
+source for the one craft defect none of those can see — a content container that
+draws a border and declares no surface, so it computes transparent and the page
+shows through it (`src/test/bordered-surface.test.ts`, which carries its own
+limits at the foot of the file).
 
 `pnpm run test:browser` is the leg nothing else can stand in for: jsdom applies
 no stylesheet and returns unresolved `var(…)` literals, so it passes just as

package/dist/components/ui/document-detail/document-detail.svelte

@@ -69,17 +69,28 @@
 		<EmptyState title={notFoundTitle} description={notFoundDescription} />
 	{:else}
 		<DetailPanel eyebrow="Document" title={document.title} titleFace="display" footer={actions}>
-			<div class="grid gap-4 sm:grid-cols-2">
+			<!-- min-w-0 on the grid AND on every cell and value below: a grid or
+			     flex item defaults to min-width:auto, so it grows to its widest
+			     child and `truncate` can never shrink it. A 64-character content
+			     hash and a filesystem path therefore took this card to 1,124px
+			     inside a 390px screen and pushed every VALUE off the side, leaving
+			     the labels alone on it. -->
+			<div class="grid min-w-0 gap-4 sm:grid-cols-2">
 				{#if document.fields?.length}
-					<div>
+					<div class="min-w-0">
 						<h3 class="text-muted-foreground text-2xs mb-2 font-semibold tracking-wide uppercase">
 							Details
 						</h3>
 						<dl class="space-y-1 text-sm">
 							{#each document.fields as field (field.label)}
 								<div class="flex justify-between gap-4">
-									<dt class="text-muted-foreground">{field.label}</dt>
-									<dd class={field.mono ? 'truncate font-mono text-xs' : 'text-right'}>
+									<dt class="text-muted-foreground shrink-0">{field.label}</dt>
+									<dd
+										class={field.mono
+											? 'min-w-0 truncate font-mono text-xs'
+											: 'min-w-0 truncate text-right'}
+										title={field.value}
+									>
 										{field.value}
 									</dd>
 								</div>
@@ -89,14 +100,16 @@
 				{/if}
 
 				{#if document.locations?.length}
-					<div>
+					<div class="min-w-0">
 						<h3 class="text-muted-foreground text-2xs mb-2 font-semibold tracking-wide uppercase">
 							Locations
 						</h3>
 						<ul class="space-y-1 text-sm">
 							{#each document.locations as location (location.path)}
 								<li class="flex items-center justify-between gap-2">
-									<span class="truncate font-mono text-xs">{location.path}</span>
+									<span class="min-w-0 truncate font-mono text-xs" title={location.path}
+										>{location.path}</span
+									>
 									<div class="flex shrink-0 items-center gap-1">
 										{#if location.primary}
 											<Badge variant="secondary">primary</Badge>
@@ -112,7 +125,7 @@
 				{/if}
 
 				{#if document.tags?.length}
-					<div>
+					<div class="min-w-0">
 						<h3 class="text-muted-foreground text-2xs mb-2 font-semibold tracking-wide uppercase">
 							Tags
 						</h3>
@@ -125,7 +138,7 @@
 				{/if}
 
 				{#if document.memberships?.length}
-					<div>
+					<div class="min-w-0">
 						<h3 class="text-muted-foreground text-2xs mb-2 font-semibold tracking-wide uppercase">
 							Collections
 						</h3>

package/dist/components/ui/library-browse/document-table.svelte

@@ -4,6 +4,13 @@
 	// a consumer that passes no `collections` never sees an empty column —
 	// which is what lets one table serve both the whole-catalogue view and a
 	// single collection's slice.
+	//
+	// Columns also come and go with the VIEWPORT. The title is the only column
+	// a phone has room for, so the secondary ones drop by breakpoint rather
+	// than pushing the table into its own horizontal scroller — measured on a
+	// real catalogue at 390px, where four columns of full-length titles, tag
+	// lists and collection lists took the table to 1,612px and every row
+	// scrolled sideways.
 	import {
 		Table as TableRoot,
 		TableBody,
@@ -31,16 +38,28 @@
 	const hasBadges = $derived(documents.some((d) => d.badges?.length));
 </script>
 
-<div class="rounded-md border">
+<!-- The card surface, not a bare border. This wrapper holds CONTENT, so it has
+     to paint one: with `border` alone the table and every ancestor computed
+     rgba(0,0,0,0) at 1440x900 in both themes, so the page background showed
+     straight through a container sitting beside opaque cards. `bg-card
+     border-border ds-edge` is the same trio Panel, StatCard, StatList,
+     DetailPanel, EmptyState and DataTableTanstack use — and `border-border`
+     matters on its own: a bare `border` resolves to currentColor, which was
+     drawing this hairline in full-strength foreground rather than the border
+     token. `overflow-hidden` comes with the surface, as it does on every
+     sibling: a row's `hover:bg-muted/50` otherwise paints square corners over
+     the wrapper's radius now that there is a surface to paint over.
+     Gated by src/test/bordered-surface.test.ts. -->
+<div class="bg-card border-border ds-edge overflow-hidden rounded-md border">
 	<TableRoot>
 		<TableHeader>
 			<TableRow>
 				<TableHead>Title</TableHead>
 				{#if hasTags}
-					<TableHead class="w-40">Tags</TableHead>
+					<TableHead class="hidden w-40 xl:table-cell">Tags</TableHead>
 				{/if}
 				{#if hasCollections}
-					<TableHead class="w-40">Collections</TableHead>
+					<TableHead class="hidden w-40 lg:table-cell">Collections</TableHead>
 				{/if}
 				{#if hasBadges}
 					<TableHead class="w-40 text-center">Status</TableHead>
@@ -50,11 +69,16 @@
 		<TableBody>
 			{#each documents as doc (doc.id)}
 				<TableRow>
-					<TableCell>
+					<!-- max-w-0 + truncate, together: TableCell sets whitespace-nowrap, so
+					     without a width bound this column stretches the table to its widest
+					     title, and with a bound but no truncate the text overflows UNDER the
+					     next cell — which then swallows the link's clicks. -->
+					<TableCell class="max-w-0">
 						{#if documentHref}
 							<a
 								href={documentHref(doc)}
-								class="font-medium hover:underline"
+								title={doc.title}
+								class="block truncate font-medium hover:underline"
 								onclick={() => onOpen?.(doc)}
 							>
 								{doc.title}
@@ -62,22 +86,29 @@
 						{:else if onOpen}
 							<button
 								type="button"
-								class="text-left font-medium hover:underline"
+								title={doc.title}
+								class="block w-full truncate text-left font-medium hover:underline"
 								onclick={() => onOpen(doc)}
 							>
 								{doc.title}
 							</button>
 						{:else}
-							<span class="font-medium">{doc.title}</span>
+							<span class="block truncate font-medium" title={doc.title}>{doc.title}</span>
 						{/if}
 					</TableCell>
 					{#if hasTags}
-						<TableCell class="text-muted-foreground text-xs">
+						<TableCell
+							class="text-muted-foreground hidden max-w-40 truncate text-xs xl:table-cell"
+							title={doc.tags?.join(', ')}
+						>
 							{doc.tags?.join(', ') || '—'}
 						</TableCell>
 					{/if}
 					{#if hasCollections}
-						<TableCell class="text-muted-foreground text-xs">
+						<TableCell
+							class="text-muted-foreground hidden max-w-40 truncate text-xs lg:table-cell"
+							title={doc.collections?.join(', ')}
+						>
 							{doc.collections?.join(', ') || '—'}
 						</TableCell>
 					{/if}

package/dist/components/ui/library-browse/library-browse.svelte

@@ -15,6 +15,7 @@
 	import { cn, type WithElementRef } from '../../../utils.js';
 	import Search from '@lucide/svelte/icons/search';
 	import LibraryIcon from '@lucide/svelte/icons/library';
+	import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
 	import X from '@lucide/svelte/icons/x';
 	import { Input } from '../input/index.js';
 	import Button from '../button/button.svelte';
@@ -110,6 +111,15 @@
 		}
 	}
 
+	/**
+	 * Whether the facet rail is revealed below `md`. The only state this
+	 * component owns, and deliberately so: it is a disclosure, not a filter.
+	 * The rail used to be `hidden md:block` with nothing to reveal it, so on a
+	 * phone the whole of filtering was simply absent — no drawer, no
+	 * disclosure, no way to reach it at all.
+	 */
+	let facetsOpen = $state(false);
+
 	const shownTotal = $derived(total ?? documents.length);
 	// Floored at 1 so a consumer's limit: 0 cannot put Infinity in the pager.
 	const pageSize = $derived(Math.max(1, limit));
@@ -161,11 +171,24 @@
 		</div>
 	{/if}
 
+	{#if facets.length > 0}
+		<Button
+			variant="outline"
+			size="sm"
+			class="w-fit md:hidden"
+			aria-expanded={facetsOpen}
+			onclick={() => (facetsOpen = !facetsOpen)}
+		>
+			<SlidersHorizontal class="size-4" />
+			{facetsOpen ? 'Hide filters' : 'Filters'}
+		</Button>
+	{/if}
+
 	<div
 		class={facets.length > 0 ? 'grid gap-6 md:grid-cols-[220px_minmax(0,1fr)]' : 'grid gap-6'}
 	>
 		{#if facets.length > 0}
-			<aside class="hidden md:block" aria-label="Filters">
+			<aside class={facetsOpen ? 'block' : 'hidden md:block'} aria-label="Filters">
 				<FacetRail {facets} onChange={onFacetChange} />
 			</aside>
 		{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poodle64/ui",
-  "version": "2026.8.13",
+  "version": "2026.8.15",
   "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,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.8.13",
+		"version": "2026.8.15",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 54,

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.8.13`. 54 components, 14 situations.
+Generated from `@poodle64/ui@2026.8.15`. 54 components, 14 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.