@poodle64/ui 2026.9.4 → 2026.9.5

package/README.md

@@ -1164,4 +1164,18 @@ 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; CI publishes to public npm.
+3. Commit, tag `ui-v<version>`, push the tag.
+4. `.github/workflows/publish.yaml` runs on that push and should publish via
+   npm OIDC trusted publishing: check it with
+   `gh run list --workflow=publish.yaml`. As of 2026.9.4 every run since
+   `ui-v2026.9.2` fails at the `npm publish` step with
+   `E404 Not Found - PUT .../@poodle64%2fui` (an OIDC/trusted-publisher
+   binding issue, since `Build and test package` passes first). Until that
+   is diagnosed and fixed, publish manually from `packages/ui/`:
+   ```bash
+   printf '//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}\n' > .npmrc
+   signet exec --identity huginn-claude --broker https://portcullis.godswood.au \
+     --credential npm-publish-token --env-var NODE_AUTH_TOKEN -- npm publish
+   rm -f .npmrc
+   ```
+   Confirm with `npm view @poodle64/ui version`.

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

@@ -575,7 +575,19 @@
 				{@render brandLockup(true)}
 			</span>
 
-			{#if context}{@render context()}{/if}
+			<!-- `min-w-0` is what lets a leading `context` snippet (a workspace
+			     switcher, a breadcrumb) actually shrink under crowding — a flex
+			     item's automatic `min-width: auto` otherwise floors it at its own
+			     min-content size, so with search, actions and identity all also
+			     competing for the bar the FIRST thing to run out of room was
+			     whichever trailing control happened to sit last in source order
+			     (theme, identity) — pushed edge-to-edge past the header's own
+			     right edge and, with no horizontal scroll on the bar, permanently
+			     unreachable rather than merely cramped (design-system#111). The
+			     wordmark and the search button already carry their own shrink
+			     behaviour (hiding text, going icon-only); `context` is the one
+			     leading slot that never had to. -->
+			{#if context}<div class="min-w-0">{@render context()}</div>{/if}
 
 			{#if onSearch && searchPlacement === 'leading'}
 				{@render searchButton(

package/dist/styles.css

@@ -624,6 +624,15 @@
 	.ds-nav {
 		--ds-nav-ink: var(--ds-nav-chrome-ink, var(--foreground));
 		--ds-nav-ink-muted: var(--ds-nav-chrome-ink-muted, var(--muted-foreground));
+		/* Specified rather than left `visible` (the default): `overflow-y: auto`
+		   otherwise forces the computed value of an unspecified overflow-x to
+		   `auto` too (CSSOM's "if one axis is visible and the other is not, the
+		   visible one becomes auto" rule), so a row wider than the nav — a long
+		   label, a wide badge — got its own sideways scrollbar inside the drawer.
+		   The drawer scrolls vertically only; a row that doesn't fit truncates
+		   (`.ds-nav-item`'s label already carries `.truncate`) rather than
+		   growing a second scroll axis on top of the menu's own (design-system#111). */
+		overflow-x: hidden;
 	}
 
 	.ds-shell-rail,
@@ -847,6 +856,21 @@
 		padding-inline: 0;
 	}
 
+	/* A hard ceiling on the whole shell, in the one unit that names the actual
+	   drawn surface rather than a percentage of an ancestor. `.ds-shell` is
+	   already `flex` with `overflow-hidden` in the component markup, which
+	   clips an ordinary descendant that outgrows it — but a `position: fixed`
+	   descendant (the open drawer, below) is excused from an ancestor's
+	   `overflow: hidden` by definition, fixed positioning escapes every
+	   clipping ancestor that is not itself a containing block for fixed
+	   elements, and `.ds-shell` is not one. This is the backstop for that
+	   whole class of leak: whatever grows past the shell's own box, on
+	   whichever descendant, the SHELL still cannot be asked to draw wider than
+	   the viewport it is actually in (design-system#111). */
+	.ds-shell {
+		max-width: 100dvw;
+	}
+
 	/* The rail is ONE element in two states, not two elements (see the comment in
 	   app-shell.svelte): below md it is hidden until `data-drawer` turns it into
 	   an overlay; at md and up it is the permanent column and `data-drawer` means
@@ -871,16 +895,35 @@
 	   the last nav row at its bottom sit exactly where a notch or a home
 	   indicator gesture bar would cover them. The rail's own sticky state
 	   never needs this — it starts below the page's own top edge in normal
-	   flow, not against the physical screen edge. */
+	   flow, not against the physical screen edge.
+
+	   The width is a `min()` against the true viewport (`100dvw`, less the
+	   left inset a landscape notch carves out of it) rather than the old
+	   `max-width: 82vw` — `vw` is the LAYOUT viewport, which on a phone stays
+	   the largest size the page could ever occupy whether or not the browser
+	   chrome is actually showing, while `dvw` is the viewport the page is
+	   ACTUALLY drawn into right now. The two rarely disagree on width the way
+	   `vh`/`dvh` disagree on height, but disagreeing on principle was already
+	   enough to make this the one place on the drawer that named the wrong
+	   viewport (design-system#111): every other rule the drawer carries reads
+	   `dvh`/`env(safe-area-inset-*)`, so `82vw` was the one dimension still
+	   trusting a unit this component elsewhere treats as untrustworthy on a
+	   phone. `min()` over `--ds-shell-rail-width` keeps the drawer at its
+	   ordinary width on anything bigger than a narrow phone, and only the
+	   viewport term binds below that — so the drawer can never be asked to be
+	   wider than the screen it is drawn on, at any width, by construction
+	   rather than by testing every content shape that could have pushed it
+	   there. */
 	.ds-shell-rail[data-drawer='true'] {
 		display: flex;
 		position: fixed;
 		inset-block: 0;
 		left: 0;
 		z-index: 50;
-		max-width: 82vw;
+		width: min(var(--ds-shell-rail-width), 82dvw, 100dvw - env(safe-area-inset-left, 0px));
 		padding-top: env(safe-area-inset-top);
 		padding-bottom: env(safe-area-inset-bottom);
+		padding-left: env(safe-area-inset-left);
 		box-shadow:
 			0 10px 15px -3px oklch(0 0 0 / 0.1),
 			0 4px 6px -4px oklch(0 0 0 / 0.1);
@@ -896,9 +939,10 @@
 		.ds-shell-rail[data-drawer='true'] {
 			position: sticky;
 			z-index: auto;
-			max-width: none;
+			width: var(--ds-shell-rail-width);
 			padding-top: 0;
 			padding-bottom: 0;
+			padding-left: 0;
 			box-shadow: none;
 			animation: none;
 		}

package/package.json

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

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.4`. 56 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.5`. 56 components, 15 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.