@tristan2828/ui-foundation 4.17.0 → 4.18.0

package/README.md

@@ -22,7 +22,7 @@ than installing this by hand:
 | `@tristan2828/ui-foundation/ui/<name>` | shadcn primitives: badge, button, calendar, card, checkbox, combobox, dialog, empty, field, input, input-group, label, popover, select, separator, sheet, sidebar, skeleton, sonner, spinner, switch, table, textarea, tooltip |
 | `@tristan2828/ui-foundation/gateway` | `safeFetch`, `toAppError`, `networkError` — for an app's `src/api/gateway/` only |
 | `@tristan2828/ui-foundation/mocks` | MSW: `authHandlers`, `environmentHandlers`, `resetMockAuth`, `getMockCurrentUser`, `MOCK_USER`, `exposeMswForE2E` |
-| `@tristan2828/ui-foundation/testing` | Playwright: `defineA11ySuite`, `defineMockModeBannerSuite`, `defineDataEnvironmentBannerSuite`, `forceMswOverride`, `forceLoggedOut`, `waitForMswReady` |
+| `@tristan2828/ui-foundation/testing` | Playwright: `defineA11ySuite`, `defineMockModeBannerSuite`, `defineDataEnvironmentBannerSuite`, `forceMswOverride`, `forceLoggedOut`, `waitForMswReady`, `expectDataViewsLoaded` |
 | `@tristan2828/ui-foundation/eslint` | the lint rules, as a flat config: `export default [...uiFoundation()]` |
 | `@tristan2828/ui-foundation/styles.css` | tokens and base styles, after `@import "tailwindcss";` |
 | `@tristan2828/ui-foundation/openapi.yaml` | the part of an app's API contract the package calls: `/auth/*`, `/environment` (optional) and the error bodies |

package/conventions/docs/add-an-entity.md

@@ -554,6 +554,24 @@ is a filled-in example while the Widgets demo is still here).
   one into `src/` to change it: raise it for the foundation (AGENTS.md
   "Changing the Foundation") and build the screen once the release ships.
 
+## After a commit, in the backend
+
+A router reads who's signed in from the `User` that `get_current_user`
+loaded in the request's own database session. `session.commit()` expires
+every object in that session (`expire_on_commit`, on by default), the user
+included, and reading an expired attribute is a lazy load, which under
+asyncio is a `MissingGreenlet` and a 500.
+
+- **After a commit, read by a `user_id` saved before it, never by the
+  `User`.** Take `user_id = user.id` at the top of the handler and use that
+  from then on; or `await session.refresh(user)` first, as `_start_session`
+  in `routers/auth.py` does to return it.
+- **Test signed in for real.** The backend's `client` fixture
+  (`tests/conftest.py`) holds a `sessions` row and sends its cookie,
+  so the real `get_current_user` runs (`tests/signed_in.py`). Never stand
+  a `User(...)` in for `get_current_user` in an override: a detached user
+  never expires, so the test passes and the route fails live.
+
 ## Deleting
 
 The plan's "Deleting" line says which of three. The Widget reference is the

package/dist/components/app/milkdown-editor.js

@@ -54,7 +54,7 @@ import { Button } from '../ui/button.js';
 import { Field, FieldError, FieldLabel } from '../ui/field.js';
 import { Input } from '../ui/input.js';
 import { Popover, PopoverContent } from '../ui/popover.js';
-import { linkHref } from '../../lib/link-href.js';
+import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { passEscapeThrough } from './escape-passthrough.js';
 import { calloutHandler, remarkCalloutNodes } from '../../lib/markdown-callout.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
@@ -751,7 +751,9 @@ function LinkForm({ box, onApply }) {
     const apply = () => {
         const href = linkHref(typed);
         if (href === null) {
-            setError('Enter a web or email address, like https://example.com.');
+            setError(linkRefusal(typed) === 'whitespace'
+                ? 'An address has no spaces. Remove them, or write each as %20.'
+                : 'Enter a web or email address, like https://example.com.');
             return;
         }
         onApply(href);

package/dist/components/app/row-edit-cells.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLinkIcon } from 'lucide-react';
 import { Input } from '../ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
-import { linkHref } from '../../lib/link-href.js';
+import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { editInPlace } from './edit-in-place.js';
 import { EditableValue } from './editable-value.js';
 /** A name in one line: Enter saves, the form's rule runs first, a taken name's 422 shows in the cell. */
@@ -31,14 +31,17 @@ export function ChoiceCell({ label, value, options, render, save, triggerClassNa
         }), children: render(value) }));
 }
 // A web or email address (`example.com` gains https://), blank for none.
-// Another scheme (`javascript:`) is refused before anything is sent.
+// Another scheme (`javascript:`) or a space inside the address is refused
+// before anything is sent.
 const LINK_RULE = {
     safeParse: (value) => {
-        const href = linkHref(String(value ?? ''));
+        const typed = String(value ?? '');
+        const href = linkHref(typed);
         if (href === '')
             return { success: true, data: null };
         if (href === null) {
-            return { success: false, error: { issues: [{ message: 'Use a web or email address' }] } };
+            const message = linkRefusal(typed) === 'whitespace' ? 'An address has no spaces' : 'Use a web or email address';
+            return { success: false, error: { issues: [{ message }] } };
         }
         return { success: true, data: href };
     },

package/dist/lib/link-href.d.ts

@@ -1,2 +1,4 @@
 /** The `href` to save, `''` to remove the link, or `null` when it's refused. */
 export declare function linkHref(typed: string): string | null;
+/** Why `linkHref` refused what was typed, for the message shown with it. */
+export declare function linkRefusal(typed: string): 'whitespace' | 'scheme';

package/dist/lib/link-href.js

@@ -3,12 +3,16 @@
 // `https://example.com` and a bare `name@example.com` a `mailto:`; a path
 // on this site (`/x`, never `//x`) or a heading (`#x`) is kept. Any other scheme
 // (`javascript:`, `data:`, `file:`) is refused, so a link can't run code
-// or reach a local file.
+// or reach a local file. An address with whitespace inside it
+// (`example wiki`, `https://a b`) is refused too: it isn't a working link,
+// and adding https:// to two words would save one that looks like it is.
 /** The `href` to save, `''` to remove the link, or `null` when it's refused. */
 export function linkHref(typed) {
     const value = typed.trim();
     if (value === '')
         return '';
+    if (/\s/.test(value))
+        return null;
     if (/^(https?:\/\/|mailto:|tel:)/i.test(value))
         return value;
     // A scheme of its own (`javascript:`), not a port (`example.com:8080`).
@@ -24,3 +28,7 @@ export function linkHref(typed) {
         return `mailto:${value}`;
     return `https://${value}`;
 }
+/** Why `linkHref` refused what was typed, for the message shown with it. */
+export function linkRefusal(typed) {
+    return /\s/.test(typed.trim()) ? 'whitespace' : 'scheme';
+}

package/dist/testing/index.d.ts

@@ -55,6 +55,18 @@ export type A11ySuiteOptions = {
      */
     nav?: readonly NavEntry[];
 };
+/**
+ * Every data view on the page has loaded: at least one shows its data (or,
+ * with `{ success: false }`, the page has its screen up), and none still
+ * shows its skeleton. A page may hold several (two `DataTable`s, an
+ * `EntityView` over a table of its sub-records), so this never waits on a
+ * locator that matches each of them: Playwright's strict mode refuses
+ * `expect(page.locator('[data-state="success"]')).toBeVisible()` as soon
+ * as two match. Use it before reading or scanning a screen.
+ */
+export declare function expectDataViewsLoaded(page: Page, { success }?: {
+    success?: boolean;
+}): Promise<void>;
 /**
  * Accessibility of the real screens in light and dark mode: every page in
  * the Primary nav (one test each from `nav`, or discovered in the sidebar

package/dist/testing/index.js

@@ -107,11 +107,31 @@ const NAV_PAGE_BUDGET_MS = 10_000;
 function navEntryRoutes(nav) {
     return [...new Set(nav.flatMap((entry) => (isNavSection(entry) ? entry.items : [entry]).map((item) => item.to)))];
 }
+/**
+ * Every data view on the page has loaded: at least one shows its data (or,
+ * with `{ success: false }`, the page has its screen up), and none still
+ * shows its skeleton. A page may hold several (two `DataTable`s, an
+ * `EntityView` over a table of its sub-records), so this never waits on a
+ * locator that matches each of them: Playwright's strict mode refuses
+ * `expect(page.locator('[data-state="success"]')).toBeVisible()` as soon
+ * as two match. Use it before reading or scanning a screen.
+ */
+export async function expectDataViewsLoaded(page, { success = true } = {}) {
+    if (success)
+        await expect(page.locator('[data-state="success"]').first()).toBeVisible();
+    // A data view renders its skeleton from its first paint, so once the
+    // screen is up every one of them is either loading or settled.
+    else
+        await expect(page.getByRole('main').first()).toBeVisible();
+    await expect(page.locator('[data-state="loading"]')).toHaveCount(0);
+}
 async function expectNavPageAccessible(page, route, colorScheme) {
     await page.goto(route);
     await expect(page.locator('html')).toHaveClass(colorScheme);
-    // Wait for data, not the loading skeleton, so the real UI is checked.
-    await expect(page.locator('[data-state="loading"]')).toHaveCount(0);
+    // Wait for data, not the loading skeleton, so the real UI is checked. A
+    // nav page may have no data view, or only an empty one, so none has to
+    // show data.
+    await expectDataViewsLoaded(page, { success: false });
     await expectNoAxeViolations(page);
 }
 /**
@@ -163,8 +183,9 @@ export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes,
             for (const route of viewRoutes) {
                 test(`${route} has zero axe violations`, async ({ page }) => {
                     await page.goto(route);
-                    // EntityView's loaded state, not its skeleton or an error.
-                    await expect(page.locator('[data-state="success"]')).toBeVisible();
+                    // EntityView's loaded state, not its skeleton or an error, and
+                    // every other data view on the page loaded too.
+                    await expectDataViewsLoaded(page);
                     await expectNoAxeViolations(page);
                 });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {