@poodle64/ui 2026.10.2 → 2026.10.4

package/README.md

@@ -911,9 +911,11 @@ Settled here, the same in every module, and not props:
   above its card; figures in the body face with tabular numerals, money out
   bracketed and money in green (`formatCurrency(v, { negative: 'brackets' })`).
 - **Sorting and the groups' one control.** Click a column head to sort by it,
-  largest or newest first; click again to reverse. A sorted list is one flat
-  run with no group heads and shows the Date column even by day. Until the
-  viewer sorts, rows sit newest first in their groups. A chevron in the head's
+  largest or newest first; click again to reverse; a third click returns to the
+  default order. A sort orders rows inside the grouping the viewer chose (the
+  groups stay newest first); grouped by none, the list is one flat run. The
+  head shows its state: a down chevron descending, an up chevron ascending,
+  none at rest. Until the viewer sorts, rows sit newest first. A chevron in the head's
   gutter opens or closes every group at once; where rows tick, the gutter
   widens to hold it beside the select-all checkbox.
 - **The Columns menu** holds every column as a tick, the three fixed ones

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

@@ -26,6 +26,9 @@
 	// 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).
+	// Every other page gets the trigger's footprint, net of that lift, as
+	// `--ds-report-reserve`: the shell ends its padded content with that much
+	// room, so a control under the corner can always scroll clear.
 
 	let {
 		/** Where the report POSTs. The app's own route, defaulting to the one every household app serves. */
@@ -50,6 +53,15 @@
 	const messageId = `feedback-message-${uid}`;
 	const screenshotId = `feedback-screenshot-${uid}`;
 
+	// The trigger's top edge sits 3.75rem up (1rem offset, 2.75rem disc); 4.5rem
+	// leaves a gap above it. Resolved on the document, so a lift set or cleared
+	// later moves it too.
+	$effect(() => {
+		const root = document.documentElement;
+		root.style.setProperty('--ds-report-reserve', 'calc(4.5rem - var(--ds-report-clearance, 0px))');
+		return () => root.style.removeProperty('--ds-report-reserve');
+	});
+
 	async function submit() {
 		phase = 'submitting';
 

package/dist/components/ui/app-shell/app-shell.svelte

@@ -720,8 +720,13 @@
 	{/if}
 
 	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+		<!-- The bar wraps when crowded, at every width, and pads top and bottom
+		     alike so a second row clears both edges. Kept to one row, it shrank
+		     `context` below its own content and the next item painted over it, so
+		     the app's own control under the overlap could not be clicked
+		     (mission-command's workspace menu, 04/10/2026). -->
 		<header
-			class="ds-shell-bar bg-shell/80 text-shell-foreground border-border sticky top-0 z-20 flex min-h-14 flex-none flex-wrap items-center gap-2 border-b px-3 pt-[env(safe-area-inset-top)] backdrop-blur sm:gap-3 sm:px-5 xl:flex-nowrap"
+			class="ds-shell-bar bg-shell/80 text-shell-foreground border-border sticky top-0 z-20 flex min-h-14 flex-none flex-wrap items-center gap-2 border-b px-3 pt-[calc(0.5rem+env(safe-area-inset-top))] pb-2 backdrop-blur sm:gap-3 sm:px-5"
 		>
 			{#if hasNav}
 				<!-- `aria-controls` names the region this toggle opens. It is present
@@ -773,7 +778,7 @@
 					class={cn(
 						'flex min-w-0 items-center gap-2 sm:gap-3',
 						controls.content
-							? 'order-last basis-full pb-2 xl:order-none xl:basis-auto xl:pb-0'
+							? 'order-last basis-full xl:order-none xl:basis-auto'
 							: 'hidden md:flex'
 					)}
 					data-testid="ds-shell-location"

package/dist/components/ui/app-shell/padding.d.ts

@@ -16,5 +16,11 @@
  *
  * The bottom pad carries `env(safe-area-inset-bottom)` so the last row of a page
  * clears a home-indicator gesture bar.
+ *
+ * The trailing `::after` is `--ds-report-reserve`, the footprint the mounted
+ * report widget declares, so a page's last row can scroll clear of the button
+ * floating over its corner. An element rather than padding: a page taller than
+ * the content area overflows this box, which leaves its padding behind at the
+ * area's foot, while a last flex item follows the overflow to its end.
  */
-export declare const CONTENT_PADDING = "px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] sm:px-6 md:px-8 md:pt-7 md:pb-[calc(1.75rem+env(safe-area-inset-bottom))] 2xl:px-12";
+export declare const CONTENT_PADDING = "px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] sm:px-6 md:px-8 md:pt-7 md:pb-[calc(1.75rem+env(safe-area-inset-bottom))] 2xl:px-12 after:block after:flex-none after:h-[var(--ds-report-reserve,0px)]";

package/dist/components/ui/app-shell/padding.js

@@ -16,5 +16,11 @@
  *
  * The bottom pad carries `env(safe-area-inset-bottom)` so the last row of a page
  * clears a home-indicator gesture bar.
+ *
+ * The trailing `::after` is `--ds-report-reserve`, the footprint the mounted
+ * report widget declares, so a page's last row can scroll clear of the button
+ * floating over its corner. An element rather than padding: a page taller than
+ * the content area overflows this box, which leaves its padding behind at the
+ * area's foot, while a last flex item follows the overflow to its end.
  */
-export const CONTENT_PADDING = 'px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] sm:px-6 md:px-8 md:pt-7 md:pb-[calc(1.75rem+env(safe-area-inset-bottom))] 2xl:px-12';
+export const CONTENT_PADDING = 'px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] sm:px-6 md:px-8 md:pt-7 md:pb-[calc(1.75rem+env(safe-area-inset-bottom))] 2xl:px-12 after:block after:flex-none after:h-[var(--ds-report-reserve,0px)]';

package/dist/components/ui/ledger/ledger.svelte

@@ -220,9 +220,9 @@
 	/** What a column sorts by; the running balance depends on the order, so never it. */
 	const sorter = (c: { key: string; sort?: LedgerColumn<R>['sort']; text?: LedgerColumn<R>['text'] }) =>
 		c.key === 'balance' ? undefined : (c.sort ?? c.text);
-	/** Click a head to sort by it, largest or newest first; again to reverse. */
+	/** Click a head to sort by it, largest or newest first; again to reverse; a third time back to the default order. */
 	function sortBy(key: string) {
-		sort = sort?.key === key ? { key, dir: sort.dir === 1 ? -1 : 1 } : { key, dir: -1 };
+		sort = sort?.key !== key ? { key, dir: -1 } : sort.dir === -1 ? { key, dir: 1 } : null;
 	}
 	/** The sort in force: a column the viewer has since unticked no longer sorts. */
 	const activeSort = $derived.by(() => {
@@ -231,8 +231,8 @@
 			? sort
 			: null;
 	});
-	/** Until the viewer sorts, rows sit newest first in their period's groups. */
-	const grouped = $derived(prefs.period !== 'none' && !activeSort);
+	/** A sort orders rows inside their period's groups; only `none` is the flat list. */
+	const grouped = $derived(prefs.period !== 'none');
 	const BY_DAY = $derived(grouped && prefs.period === 'day');
 
 	const shown = $derived(
@@ -262,8 +262,9 @@
 	});
 	const groups = $derived.by(() => {
 		const by = activeSort && sorter(resolved.find((c) => c.key === activeSort.key)!);
-		if (activeSort && by) return [{ key: '', rows: sortRows(rows, by, activeSort.dir) }];
-		return groupRows(rows, prefs.period, fy);
+		const base = groupRows(rows, prefs.period, fy);
+		if (!activeSort || !by) return base;
+		return base.map((g) => ({ key: g.key, rows: sortRows(g.rows, by, activeSort.dir) }));
 	});
 	/** Closed groups, keyed with their period so a new period starts open. */
 	const closed = new SvelteSet<string>();
@@ -923,7 +924,7 @@
 									mine && 'text-foreground'
 								)}
 								aria-label={mine
-									? `Sorted by ${c.label}, ${mine.dir === -1 ? 'descending' : 'ascending'}. Click to reverse`
+									? `Sorted by ${c.label}, ${mine.dir === -1 ? 'descending' : 'ascending'}. Click ${mine.dir === -1 ? 'to reverse' : 'for the default order'}`
 									: `Sort by ${c.label}`}
 								onclick={() => sortBy(c.key)}
 								data-slot="ledger-sort"

package/package.json

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

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.2`. 62 components, 18 situations.
+Generated from `@poodle64/ui@2026.10.4`. 62 components, 18 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.