@poodle64/ui 2026.9.21 → 2026.9.23

package/README.md

@@ -1411,6 +1411,6 @@ non-zero and naming the field on any difference.
 1. Change a component; bump `version` in `package.json` (CalVer).
 2. `pnpm build`, which runs `svelte-package` then `publint` (package.json/exports sanity).
 3. Commit, tag `ui-v<version>`, push the tag.
-4. `.github/workflows/publish.yaml` runs on that push and publishes via npm
-   OIDC trusted publishing: `gh run list --workflow=publish.yaml`.
+4. `.github/workflows/publish-kit-typescript.yaml` (repo root) runs on that push and publishes via npm
+   OIDC trusted publishing: `gh run list -R radar-hooves/app-factory --workflow=publish-kit-typescript.yaml`.
    Confirm with `npm view @poodle64/ui version`.

package/dist/components/feedback/report-widget.svelte

@@ -24,6 +24,8 @@
 	// components/ui — it is app machinery the layout mounts once (alongside
 	// initBrowserTelemetry), not page chrome a route composes from, so it does
 	// not sit in the situation→component registry either.
+	// A page control that shares its corner sets `--ds-report-clearance` on the
+	// document to lift the trigger clear of it (the librarian composer does).
 
 	let {
 		/** Where the report POSTs. The app's own route, defaulting to the one every household app serves. */
@@ -105,7 +107,7 @@
 <button
 	type="button"
 	onclick={() => (open = true)}
-	class="border-border bg-card text-muted-foreground hover:text-foreground ds-edge fixed right-4 bottom-[calc(1rem+env(safe-area-inset-bottom))] z-50 grid size-11 flex-none place-items-center rounded-full border transition-colors"
+	class="border-border bg-card text-muted-foreground hover:text-foreground ds-edge fixed right-4 bottom-[calc(1rem+var(--ds-report-clearance,0px)+env(safe-area-inset-bottom))] z-50 grid size-11 flex-none place-items-center rounded-full border transition-colors"
 	aria-label="Report a problem"
 >
 	<MessageSquarePlus class="size-4.5" />

package/dist/components/ui/data-table-tanstack/data-table-tanstack.svelte

@@ -150,98 +150,115 @@
 			class="flex-1 rounded-none border-0"
 		/>
 	{:else}
-		<div class="min-h-0 flex-1 overflow-auto">
-			<TableRoot class="w-full">
-				<TableHeader class="bg-card sticky top-0 z-10">
-					{#each headerGroups as headerGroup (headerGroup.id)}
-						<TableRow class="border-0 hover:bg-transparent">
-							{#if selectable}
-								<TableHead class="border-border w-10 border-b px-3 py-1.5">
-									<Checkbox
-										checked={allSelected}
-										indeterminate={someSelected}
-										onCheckedChange={toggleAll}
-										aria-label="Select all rows"
+		<!-- containerClass targets table.svelte's own scroll container (`data-slot=
+		     table-container`), which otherwise carries only `overflow-x-auto` — and
+		     `overflow-x` other than visible forces `overflow-y` to compute `auto`
+		     too, making that div a scroll container in its own right even though it
+		     never actually scrolls (it is always sized to its own content). A
+		     `position: sticky` header's containing block is its NEAREST ancestor
+		     scroll container, so with no override here the header (radar-hooves/
+		     godswood, 30/09/2026) sticks to that inert box and never visibly pins,
+		     in every engine, not only WebKit — confirmed with this repo's own
+		     Playwright (chromium and webkit) driving the unmodified component.
+		     Folding this component's own intended scroll region into that SAME box
+		     (rather than wrapping a second one around it) makes it the one thing
+		     that actually scrolls, so sticky has a real ancestor to pin against. -->
+		<TableRoot class="w-full" containerClass="min-h-0 flex-1 overflow-y-auto">
+			<!-- Sticky lives on each `<th>`, not on `<thead>`: WebKit has a long
+			     history of not reliably keeping `position: sticky` on a table-section
+			     box (`<thead>`) pinned, while sticky on the `<th>` cells — which
+			     participate in table layout as ordinary boxes — sticks correctly. -->
+			<TableHeader>
+				{#each headerGroups as headerGroup (headerGroup.id)}
+					<TableRow class="border-0 hover:bg-transparent">
+						{#if selectable}
+							<TableHead
+								class="border-border bg-card sticky top-0 z-10 w-10 border-b px-3 py-1.5"
+							>
+								<Checkbox
+									checked={allSelected}
+									indeterminate={someSelected}
+									onCheckedChange={toggleAll}
+									aria-label="Select all rows"
+								/>
+							</TableHead>
+						{/if}
+						{#each headerGroup.headers as header (header.id)}
+							{@const meta = header.column.columnDef.meta}
+							<TableHead
+								class={cn(
+									'text-muted-foreground border-border bg-card sticky top-0 z-10 text-2xs tracking-eyebrow border-b px-3 py-1.5 text-left font-medium whitespace-nowrap uppercase',
+									meta?.class,
+									meta?.headClass
+								)}
+							>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
 									/>
-								</TableHead>
-							{/if}
-							{#each headerGroup.headers as header (header.id)}
-								{@const meta = header.column.columnDef.meta}
-								<TableHead
-									class={cn(
-										'text-muted-foreground border-border text-2xs tracking-eyebrow border-b px-3 py-1.5 text-left font-medium whitespace-nowrap uppercase',
-										meta?.class,
-										meta?.headClass
-									)}
-								>
-									{#if !header.isPlaceholder}
-										<FlexRender
-											content={header.column.columnDef.header}
-											context={header.getContext()}
-										/>
-									{/if}
-								</TableHead>
-							{/each}
-						</TableRow>
-					{/each}
-				</TableHeader>
+								{/if}
+							</TableHead>
+						{/each}
+					</TableRow>
+				{/each}
+			</TableHeader>
 
-				<TableBody>
-					{#each rows as row (row.id)}
-						{@const originalRow = row.original}
-						{@const rowId = getRowId(originalRow)}
-						{@const isSelected = rowId === selectedId}
-						{@const isChecked = selectedSet.has(rowId)}
-						{@const extraStyle = getRowStyle ? getRowStyle(originalRow) : ''}
-						<TableRow
-							data-state={isSelected ? 'selected' : undefined}
-							class="border-border/60 border-b last:border-0 {onSelect
-								? 'cursor-pointer hover:bg-[color-mix(in_oklch,var(--foreground)_4%,transparent)]'
-								: ''} {isSelected ? 'bg-[color-mix(in_oklch,var(--primary)_10%,transparent)]' : ''}"
-							style="{extraStyle}{isSelected ? ' ' + selectedShadow : ''}"
-							onclick={onSelect ? () => onSelect(rowId) : undefined}
-							onkeydown={onSelect
-								? (e) => {
-										if (e.key === 'Enter' || e.key === ' ') {
-											e.preventDefault();
-											onSelect(rowId);
-										}
+			<TableBody>
+				{#each rows as row (row.id)}
+					{@const originalRow = row.original}
+					{@const rowId = getRowId(originalRow)}
+					{@const isSelected = rowId === selectedId}
+					{@const isChecked = selectedSet.has(rowId)}
+					{@const extraStyle = getRowStyle ? getRowStyle(originalRow) : ''}
+					<TableRow
+						data-state={isSelected ? 'selected' : undefined}
+						class="border-border/60 border-b last:border-0 {onSelect
+							? 'cursor-pointer hover:bg-[color-mix(in_oklch,var(--foreground)_4%,transparent)]'
+							: ''} {isSelected ? 'bg-[color-mix(in_oklch,var(--primary)_10%,transparent)]' : ''}"
+						style="{extraStyle}{isSelected ? ' ' + selectedShadow : ''}"
+						onclick={onSelect ? () => onSelect(rowId) : undefined}
+						onkeydown={onSelect
+							? (e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										onSelect(rowId);
 									}
-								: undefined}
-							tabindex={onSelect ? 0 : undefined}
-						>
-							{#if selectable}
-								<TableCell class="w-10 px-3 py-1.5">
-									<!-- The wrapper ONLY stops the event reaching the row, so ticking a
-									     checkbox never also opens the master-detail. The checkbox's own
-									     onCheckedChange is the single source of the selection change —
-									     handling the click here as well would toggle twice per click and
-									     net out to no selection at all. -->
-									<div
-										role="presentation"
-										onclick={(e) => e.stopPropagation()}
-										onkeydown={(e) => e.stopPropagation()}
-									>
-										<Checkbox
-											checked={isChecked}
-											onCheckedChange={(v) => setRowSelected(rowId, v)}
-											aria-label="Select row"
-										/>
-									</div>
-								</TableCell>
-							{/if}
-							{#each row.getVisibleCells() as cell (cell.id)}
-								{@const meta = cell.column.columnDef.meta}
-								<TableCell
-									class={cn('px-3 py-1.5 text-sm whitespace-nowrap', meta?.class, meta?.cellClass)}
+								}
+							: undefined}
+						tabindex={onSelect ? 0 : undefined}
+					>
+						{#if selectable}
+							<TableCell class="w-10 px-3 py-1.5">
+								<!-- The wrapper ONLY stops the event reaching the row, so ticking a
+								     checkbox never also opens the master-detail. The checkbox's own
+								     onCheckedChange is the single source of the selection change —
+								     handling the click here as well would toggle twice per click and
+								     net out to no selection at all. -->
+								<div
+									role="presentation"
+									onclick={(e) => e.stopPropagation()}
+									onkeydown={(e) => e.stopPropagation()}
 								>
-									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-								</TableCell>
-							{/each}
-						</TableRow>
-					{/each}
-				</TableBody>
-			</TableRoot>
-		</div>
+									<Checkbox
+										checked={isChecked}
+										onCheckedChange={(v) => setRowSelected(rowId, v)}
+										aria-label="Select row"
+									/>
+								</div>
+							</TableCell>
+						{/if}
+						{#each row.getVisibleCells() as cell (cell.id)}
+							{@const meta = cell.column.columnDef.meta}
+							<TableCell
+								class={cn('px-3 py-1.5 text-sm whitespace-nowrap', meta?.class, meta?.cellClass)}
+							>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+							</TableCell>
+						{/each}
+					</TableRow>
+				{/each}
+			</TableBody>
+		</TableRoot>
 	{/if}
 </div>

package/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.9.21",
+	"version": "2026.9.23",
 	"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",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/radar-hooves/design-system.git"
+		"url": "git+https://github.com/radar-hooves/app-factory.git",
+		"directory": "kits/typescript/packages/ui"
 	},
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org",
 		"access": "public",
-		"provenance": false
+		"provenance": true
 	},
 	"files": [
 		"bin",

package/registry/component-map.json

@@ -1,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.9.21",
+		"version": "2026.9.23",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 61,

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.9.21`. 61 components, 17 situations.
+Generated from `@poodle64/ui@2026.9.23`. 61 components, 17 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.