@viax.io/uxm 4.43.0 → 4.43.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [4.43.1](https://github.com/viax-io/uxm/compare/v4.43.0...v4.43.1) (2026-09-21)
+
+
+### Bug Fixes
+
+* **app-sidebar:** hide the closed mobile drawer, not just translate it ([b397ee0](https://github.com/viax-io/uxm/commit/b397ee088c4431b8e4306fe27cfe371dc88a8bc3))
+* **app-sidebar:** ship the mobile-drawer CSS the markup already assumed ([8f02e21](https://github.com/viax-io/uxm/commit/8f02e21218133e344690115914e03616e4804848))
+
 # [4.43.0](https://github.com/viax-io/uxm/compare/v4.42.0...v4.43.0) (2026-09-16)
 
 

package/README.md

@@ -104,6 +104,100 @@ import { ButtonPrimary, themeTokens } from '@viax.io/uxm';
 | `@viax.io/uxm/studio/generate-css` | `generateOverridesCss` + the CSS sanitizers — turn saved studio overrides and a `BrandConfig` into a stylesheet on the server, without pulling in the workbench UI. |
 | `@viax.io/uxm/studio.css` | Tailwind utilities for the studio shell + token declarations. Does **not** bundle the atom CSS — a studio host imports `ui.css` alongside it. |
 
+## CDN usage
+
+For pages that can't run npm at all — prototypes, CodePen repros, embeds in someone else's site — every release also publishes a handful of self-contained `<script>`/`<link>`-ready bundles, built by `npm run build:cdn` and uploaded automatically on release.
+
+> **If your project has a bundler, this is not what you want.** Use [`npm i @viax.io/uxm`](#install) — the CDN bundles below exist specifically for pages that can't.
+
+All files live at `https://uxm.viax.io/<version>/<file>` — versioned and immutable (`Cache-Control: public, max-age=31536000, immutable`). There is no `/latest/`: pin an exact version, and use the same version across every file you load on one page.
+
+| File | Format | React | For |
+|---|---|---|---|
+| `uxm.esm.js` | ESM, `react` / `react-dom` / `react/jsx-runtime` **external** | the host page's, via import map | pages that already have React 19 |
+| `uxm.standalone.js` | IIFE, `window.UXM`, React **bundled in** | its own, inside the bundle | pages with **no** React at all |
+| `uxm.css` | flattened `tokens.css` + `ui.css` | — | both |
+| `uxm-generate-css.esm.js` | ESM, no deps | — | only if you need `generateOverridesCss` (the theming applier) |
+| `uxm.esm.d.ts` / `uxm-generate-css.esm.d.ts` | bundled `.d.ts` per JS artifact | needs `@types/react` | editor/type-check support |
+| `cdn-manifest.json` | byte size, gzip size, `sha384` SRI hash per file | — | verify what you fetched |
+
+⚠️ **React 19 ships no UMD build.** The classic "two `<script>` tags from a CDN plus our UMD on top" isn't possible — that's why there are two separate formats above instead of one.
+
+### ESM — page that already has React 19
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@19",
+    "react-dom/client": "https://esm.sh/react-dom@19/client",
+    "@viax.io/uxm/ui": "https://uxm.viax.io/4.43.0/uxm.esm.js"
+  }
+}
+</script>
+<link rel="stylesheet" href="https://uxm.viax.io/4.43.0/uxm.css" />
+<script type="module">
+  import { ButtonPrimary } from '@viax.io/uxm/ui';
+  import { createElement } from 'react';
+  import { createRoot } from 'react-dom/client';
+
+  createRoot(document.getElementById('root')).render(createElement(ButtonPrimary, null, 'Hello UXM'));
+</script>
+```
+
+### Standalone — page with no React
+
+```html
+<link rel="stylesheet" href="https://uxm.viax.io/4.43.0/uxm.css" />
+<script src="https://uxm.viax.io/4.43.0/uxm.standalone.js"></script>
+<script>
+  const { React, createRoot, ButtonPrimary } = window.UXM;
+  createRoot(document.getElementById('root')).render(React.createElement(ButtonPrimary, null, 'Hello UXM'));
+</script>
+```
+
+⚠️ **Never load `uxm.standalone.js` on a page that already has another React instance** — two copies of React break hooks and context. If the page has React, use the ESM build above instead.
+
+### Required host baseline
+
+A CDN page gets none of the resets a bundler-based app inherits from its own global stylesheet. Add this once, after `uxm.css` — skip it and the app renders in Times New Roman with inputs overflowing their containers. This is the same baseline npm consumers need; see `skills/viax-uxm/references/quick-recipes.md` (recipe 0) for the full version and why each line is load-bearing.
+
+```css
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #root { height: 100%; }
+:root { --font-sans: var(--font-inter, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); }
+html, body, #root { font-family: var(--brand-font, var(--font-sans)); }
+button, input, select, textarea { font: inherit; }
+```
+
+### Types
+
+The `.d.ts` bundles need `@types/react` in your project — they extend React's own prop types (`ButtonHTMLAttributes` and friends), which aren't ours to inline. Fetch one alongside your CDN import and map it in `tsconfig.json`:
+
+```sh
+UXM=4.43.0
+curl -fsSL -o types/uxm.esm.d.ts https://uxm.viax.io/$UXM/uxm.esm.d.ts
+```
+
+```json
+{ "compilerOptions": { "paths": { "@viax.io/uxm/ui": ["./types/uxm.esm.d.ts"] } } }
+```
+
+If your project can take even a dev-only npm dependency, `npm i -D @viax.io/uxm@<version>` is simpler and gives every subpath's types at once — the curl route above exists for projects that can't.
+
+### Verifying what you fetched (SRI)
+
+`cdn-manifest.json` next to every version's files lists a `sha384` hash per file — pass it as `integrity` on the `<script>` tag:
+
+```html
+<script
+  type="module"
+  src="https://uxm.viax.io/4.43.0/uxm.esm.js"
+  integrity="sha384-X5wmfaVzW+An31gN2SpznF1F6UxTbD4SsCynzec/bElec2EneSTZf2l0O81YHLVt"
+  crossorigin="anonymous"
+></script>
+```
+
 ## Component catalog
 
 Every component folder ships a `README.md` documenting props, CSS variables, MODO-configurable design tokens, states/variants, and accessibility. Click through any name for the full reference.

package/dist/ui/app-sidebar/app-sidebar.css

@@ -185,4 +185,89 @@
 }
 .uxm-app-sidebar__footer--collapsed {
   font-size: inherit;
+}
+
+/* ── Mobile drawer ──────────────────────────────────────────────────────────
+   The 768px line is `AppTopBar`'s: its `__menu` hamburger is hidden at
+   min-width 768px, so below that a hamburger is on screen driving `mobileOpen`.
+   `app-sidebar.tsx` has always emitted `--mobile-open` and `__mobile-backdrop`
+   for it (and its comment promised "CSS hides both `--mobile-*` chrome at
+   min-width: 768px"), but the stylesheet never carried the matching rules — the
+   classes rendered and nothing reacted, so the 256px rail stayed in flow and
+   pushed the page sideways. These three rules are that missing half.
+
+   Physical `left` + `translateX`, not the logical pair: nothing in `src/ui`
+   handles `[dir]` today, and a logical inset with a physical transform would
+   anchor the drawer to the inline-start edge in RTL while still sliding it the
+   other way. When the library takes on RTL, both move together.
+   ──────────────────────────────────────────────────────────────────────────── */
+@media (max-width: 767px) {
+  .uxm-app-sidebar {
+    /* Out of flow, so the shell's row collapses to the content column and the
+       page stops overflowing horizontally. */
+    bottom: 0;
+    box-shadow: var(--uxm-app-sidebar-drawer-shadow, var(--shadow-lg));
+    left: 0;
+    position: fixed;
+    top: 0;
+    /* Closed by default at this width — `--mobile-open` is what slides it in,
+       so a consumer that never wires `mobileOpen` gets a hidden drawer rather
+       than a rail parked over its content. */
+    transform: translateX(-100%);
+    /* `width` stays in the transition: the collapse toggle is still reachable
+       here. `visibility` is stepped, not eased — delayed by the slide duration
+       when closing so the drawer is still painted while it leaves, and
+       immediate when opening so it is visible from the first frame. */
+    transition: transform 0.2s ease, width 0.2s ease, visibility 0s linear 0.2s;
+    /* Translating alone would leave the closed drawer VISIBLE-but-off-screen:
+       its nav rows stay keyboard tab stops with no focus indicator anywhere on
+       screen, screen readers announce the landmark as present, and its
+       box-shadow — zero x-offset, 20px blur, right edge resting exactly on x=0
+       — bleeds a grey strip down the left of every page. `hidden` takes it out
+       of the tab order and the a11y tree, and stops it painting. */
+    visibility: hidden;
+    /* Below `--z-dialog` (60) and `--z-toast` (80): a dialog opened from a nav
+       row, and any toast, must still cover the drawer. */
+    z-index: var(--z-drawer, 40);
+  }
+  .uxm-app-sidebar--mobile-open {
+    transform: translateX(0);
+    transition: transform 0.2s ease, width 0.2s ease, visibility 0s;
+    visibility: visible;
+  }
+  .uxm-app-sidebar__mobile-backdrop {
+    /* Matches `.uxm-dialog__backdrop` — same scrim knobs, so an app that
+       retints one gets the other for free. */
+    backdrop-filter: blur(var(--backdrop-blur, 4px));
+    -webkit-backdrop-filter: blur(var(--backdrop-blur, 4px));
+    background-color: var(--backdrop-color, rgba(0, 0, 0, 0.5));
+    border: none;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    /* It is a <button>, so the UA padding has to go or it inflates the hit
+       area's box beyond the viewport. */
+    padding: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: calc(var(--z-drawer, 40) - 1);
+  }
+}
+/* The backdrop only renders while `mobileOpen` is true, and a consumer holding
+   that flag through a resize past the breakpoint would otherwise be left with a
+   full-viewport scrim over an in-flow sidebar. */
+@media (min-width: 768px) {
+  .uxm-app-sidebar__mobile-backdrop {
+    display: none;
+  }
+}
+/* A full-height panel flying in from the edge is exactly the motion a reduced-
+   motion preference is about; the drawer still opens and closes, it just
+   arrives. First such guard in `src/ui` — the pattern to copy when another
+   atom needs one. */
+@media (prefers-reduced-motion: reduce) {
+  .uxm-app-sidebar {
+    transition: none;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viax.io/uxm",
-  "version": "4.43.0",
+  "version": "4.43.1",
   "description": "Viax UXM — React 19 UI primitives and design tokens.",
   "license": "MIT",
   "private": false,