@imfusion/web-ui 0.10.0 → 0.10.1-dev.11.g9f5bc06e

package/src/llms/llms.gen.txt

@@ -78,6 +78,12 @@ Show-and-hide region for secondary content such as FAQs, settings, or details. A
 Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .copy-button (jq: jq '.copy-button' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Dialog
+- category: Layout, status: experimental
+Modal window over a dimmed page for focused tasks, forms, confirmations, or viewers. Also called a modal; use Drawer for a panel from the screen edge and Popover for content anchored to a trigger.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .dialog (jq: jq '.dialog' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/dialog.md
+
 ## Drawer
 - category: Layout, status: stable
 Off-canvas panel that slides in from a screen edge for navigation, settings, filters, or focused tasks. Also called a sidebar, side panel, or sheet.
@@ -173,6 +179,12 @@ Link as a whole row: optional leading icon, label, optional description line, an
 Horizontal layout primitive for spacing, aligning, and wrapping children. Also called a horizontal stack or flex row.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .row (jq: jq '.row' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## ScrollArea
+- category: Layout, status: experimental
+Scrollable region with the library's overlay scrollbar and edge fades, for lists, panels, and dialog bodies. Also called a scroll container; use it instead of a bare overflow: auto.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .scroll-area (jq: jq '.scroll-area' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/scroll-area.md
+
 ## Select
 - category: Inputs, status: stable
 Dropdown for choosing a value from a known list. Also called a picker; use it for a labeled, keyboard-accessible option list.

package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md

@@ -30,6 +30,7 @@ sections one to one — change a topic's sections and this file follows in the s
 
 - [ ] Layout
 - [ ] Application boundary
+- [ ] Route-local code
 - [ ] Imports
 
 ## React — `react`

package/src/llms/skills/imf-web-ui-conventions/topics/authentication.md

@@ -18,9 +18,8 @@ The file layout is in [project-structure.md](project-structure.md).
 Use one server-backed current-user query as the identity source:
 
 - Put it in `api/auth/queries.ts` and define its key and schema with the [data.md](data.md) pattern.
-- Expose query options as `context.api.auth.getUser()`.
-- Call `queryClient.query({ ...options, staleTime: "static" })` in a loader (see [data.md](data.md)) or a query hook in a
-  component.
+- Expose query options as `context.api.auth.getUser()`, with a numeric `staleTime` set in the factory.
+- Call `queryClient.query(options)` in a loader (see [data.md](data.md)) or a query hook in a component.
 - Keep credentials and access tokens out of React state.
 - Do not infer authentication from local storage, decoded tokens, route flags, or permission-gated UI.
 

package/src/llms/skills/imf-web-ui-conventions/topics/components.md

@@ -29,7 +29,8 @@ export function UserCard({ name, onEdit }: UserCardProps) {
 ## Grouping
 
 Group by component role, such as layout or domain UI, according to the project structure. Do not create a hierarchy before
-the project needs one.
+the project needs one. Components that only one route uses go in that route's `-` folder, not a shared group; see
+[project-structure.md](project-structure.md).
 
 ## One file or a folder
 
@@ -50,3 +51,5 @@ The barrel only re-exports the public pieces.
 
 Keep a component's stylesheet, tests, and local types beside the component. A container that needs styling usually wants to
 be a layout or dumb component instead.
+
+A route-local component keeps its stylesheet and tests in the route's `-` folder beside it.

package/src/llms/skills/imf-web-ui-conventions/topics/data.md

@@ -85,11 +85,17 @@ export function getDetails(options?: QueryOptions<User>) {
 }
 ```
 
-Callers choose `queryClient.query`, `useSuspenseQuery`, or another Query API. A router loader reads the cache with
-`queryClient.query({ ...options, staleTime: "static" })`, not the deprecated `ensureQueryData` or `fetchQuery`. Keep
-`"static"`: without it the factory's `staleTime` applies (default 0), so every loader run waits on the network and the page's
-`useQuery` refetches on mount. Mutation factories likewise return `mutationOptions`, own their mutation key and parsing, and
-are passed to `useMutation`; do not inline those options at the call site.
+Callers choose `queryClient.query`, `useSuspenseQuery`, or another Query API. The factory owns `staleTime` as a number,
+chosen by how fast other people change the data: near zero for data others edit often, minutes for data that rarely changes.
+A router loader reads the cache with `queryClient.query(options)` and no override, not the deprecated `ensureQueryData` or
+`fetchQuery`.
+
+Never set `staleTime: "static"` in a factory or in `defaultOptions`. A query whose observers are all static is never
+refetched, so invalidation after a mutation does nothing. Invalidation marks a query stale even when its `staleTime` is a
+number, so the app's own mutations still refresh the data. Changes made by others show once the window expires.
+
+Mutation factories likewise return `mutationOptions`, own their mutation key and parsing, and are passed to `useMutation`; do
+not inline those options at the call site.
 
 ## Router context access
 

package/src/llms/skills/imf-web-ui-conventions/topics/project-structure.md

@@ -29,6 +29,17 @@ Create the root providers, current-user boundary, and pathless `_public/` and `_
 new app starts `_app/` with a minimal `AppShell` unless it has no persistent authenticated navigation. An established app
 keeps its working shell choice.
 
+## Route-local code
+
+A route file holds its search schema and `validateSearch`, its loaders, and its pending, error, and not-found components.
+Route-local code that outgrows small in-file components (views, forms, hooks, tests) goes in a sibling folder named `-` plus
+the route file's name: `route.tsx` gets `-route/`, `products.tsx` gets `-products/`. TanStack Router ignores files and
+folders with a leading `-` when it builds the route tree, so the folder never becomes a route. The folder holds the route's
+views with their props types, hooks, `.module.css` files, and tests. A component small enough to sit in the route file stays
+there.
+
+`partials/` holds only parts that more than one route uses.
+
 ## Imports
 
 Use `./` for siblings and `#/` for imports elsewhere in `src/`:

package/src/llms/skills/imf-web-ui-conventions/topics/react.md

@@ -5,10 +5,12 @@ looks.
 
 ## Composition: pages (smart containers), partials, dumb components
 
-- **Pages** live in `routes/`. They load data, read URL state, coordinate actions, and compose the view. They do not own
-  component CSS.
-- **Partials** are reusable compositions extracted because they read as a unit. They have light logic and no styling of their
-  own.
+- **Pages** live in `routes/`. They load data, read URL state, coordinate actions, and compose the view. Route files hold the
+  search schema, loaders, and pending, error, and not-found components. They do not own component CSS. Route-local views and
+  forms live in the route's `-` folder, as [project-structure.md](project-structure.md) describes, and that folder's
+  `.module.css` files are component styles.
+- **Partials** are compositions that more than one route uses, extracted because they read as a unit. They have light logic
+  and no styling of their own.
 - **Layout components** arrange content with `Stack`, `Row`, grids, and token gaps, and wrap long-form text in `Prose`.
 - **Dumb components** receive data and callbacks, render UI, and own their styles. They do not fetch, route, or contain
   business rules.

package/src/llms/skills/imf-web-ui-update/SKILL.md

@@ -10,8 +10,8 @@ allowed-tools: Bash Read Grep Skill
 
 # Update Web UI
 
-This workflow has two possible commits: the package/tooling update, then an optional consumer migration. Keep them separate.
-Never overwrite user changes or commit without fresh approval.
+This workflow has two possible commits: the package/tooling update with the fixes its `Breaking` entries require, then an
+optional consumer migration. Keep them separate. Never overwrite user changes or commit without fresh approval.
 
 ## Before you start
 
@@ -20,7 +20,8 @@ Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
 Open with a short orientation, before any command runs, so the person knows the route and when they will be asked:
 
 1. **Preflight**: check the project and stop on uncommitted work.
-2. **Base update**: install the new package, refresh the skills and hooks, verify, then ask to commit.
+2. **Base update**: install the new package, refresh the skills and hooks, fix what the `Breaking` entries require, verify,
+   then ask to commit.
 3. **Migration check**: read what the new releases changed and report what this project needs; changes and their separate
    commit wait for approval.
 4. **Full audit**: offer `imf-web-ui-audit full`, a read-only check of the whole project against the conventions, wider than
@@ -88,16 +89,23 @@ installer-owned entries idempotently into the registration file for the chosen h
 do not stack an event the project already covers.
 
 After the installer command, inspect the installed skill diffs and briefly report any guidance changes; version-marker
-changes alone do not count. Re-read changed skills and references relevant to the remaining work, including this update skill
-if it changed. Continue from the current step using the updated guidance, keeping the original baseline, user choices, and
-completed changes in mind. Check for newly required steps without repeating completed mutations or expanding the approved
-scope.
+changes alone do not count.
+
+Then re-read, in full, every changed skill and reference the remaining work uses, starting with this update skill when it
+changed. A diff shows what moved, not the step order you continue under, so it does not replace the re-read. Continue from
+the current step using the updated guidance, keeping the original baseline, user choices, and completed changes in mind.
+Check for newly required steps without repeating completed mutations or expanding the approved scope.
 
 ## Verify the base update
 
 After every mutating command, compare the status with the preflight snapshot. Stop on an unexpected path or overlapping
 change.
 
+Read every `Breaking` entry and migration step in `node_modules/@imfusion/web-ui/CHANGELOG.md` between the pre-update and the
+new version, keeping for a prerelease baseline only the ones the dist diff in the migration check confirms, and map each to
+its call sites here. Fix the ones with matching code in the base update, so the update commit leaves the app consistent;
+tests do not catch a removed custom property or a moved scroll container.
+
 Run the consumer's documented full verification. Read its scripts first; prefer an aggregate check, otherwise run the
 non-watch format, lint, typecheck, test, and build commands that exist.
 
@@ -110,8 +118,10 @@ Report before the first commit:
 @imfusion/web-ui update report
 Package      : <old> -> <new>
 Skills       : <status>
+Re-read      : <changed skills read in full, or none changed>
 Hooks        : <status>
 Verification : <status>
+Breaking     : <entries fixed here, not applicable, or none>
 Update files : <paths>
 Held back    : <paths or none>
 Conflicts    : <paths or none>
@@ -137,9 +147,9 @@ diff was already in the baseline; report it as present.
 This phase reads and reports: every file stays as it is until the person approves the migration. Open the report with the
 releases read, then report separately:
 
-- migrations: every `Breaking` entry and migration step, mapped to the call sites it affects here and the fix the changelog
-  shows; a step with no matching code is reported as not applicable. A style-only change, such as a removed margin, raises no
-  type error: find its call sites by component usage;
+- migrations: every `Breaking` entry and migration step the base update left open, mapped to the call sites it affects here
+  and the fix the changelog shows; a step with no matching code is reported as not applicable. A style-only change, such as a
+  removed margin, raises no type error: find its call sites by component usage;
 - compatibility fixes required by changed imports or types that the changelog does not cover;
 - existing uses affected by a changed API or documented behavior;
 - suggestions: new features from the highlights and `Added` entries that fit what the project already builds, each with the

package/dist/code-BYkr5k55.js

@@ -1,134 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { Xo as t, ja as n, pM as r } from "./icons-BsK_o-Cb.js";
-import { t as i } from "./meta-V_KyLeGn.js";
-import { cx as a } from "class-variance-authority";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
-import { mergeProps as p } from "@base-ui/react/merge-props";
-import { useRender as m } from "@base-ui/react/use-render";
-//#region src/hooks/use-clipboard.ts
-function h({ timeout: e = 1500 } = {}) {
-	let [t, n] = f(!1), r = d(void 0);
-	return u(() => () => clearTimeout(r.current), []), {
-		copied: t,
-		copy: l((t) => {
-			navigator.clipboard.writeText(t).then(() => {
-				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
-			});
-		}, [e])
-	};
-}
-var g = {
-	block: "imf-ui-code-module-block",
-	copy: "imf-ui-code-module-copy",
-	inline: "imf-ui-code-module-inline",
-	inlineCopy: "imf-ui-code-module-inlineCopy",
-	inlineLink: "imf-ui-code-module-inlineLink",
-	language: "imf-ui-code-module-language",
-	pre: "imf-ui-code-module-pre",
-	separator: "imf-ui-code-module-separator"
-}, _ = /* @__PURE__ */ e({
-	Block: () => b,
-	Inline: () => v,
-	InlineLink: () => y
-});
-function v({ copyable: e = !1, children: i, render: a, ...l }) {
-	let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : t;
-	return m({
-		defaultTagName: "code",
-		render: a,
-		props: {
-			...p(l, {
-				className: g.inline,
-				children: /* @__PURE__ */ c(o, { children: [
-					/* @__PURE__ */ s("span", {
-						ref: _,
-						children: i
-					}),
-					e && /* @__PURE__ */ s("span", { className: g.separator }),
-					e && /* @__PURE__ */ s("button", {
-						type: "button",
-						className: g.inlineCopy,
-						"data-copied": u || void 0,
-						"aria-label": u ? "Copied" : "Copy",
-						onClick: () => f(_.current?.textContent ?? ""),
-						children: /* @__PURE__ */ s(r, {
-							glyph: v,
-							size: 12,
-							strokeWidth: 2,
-							"aria-hidden": !0
-						})
-					})
-				] })
-			}),
-			"data-imf-ui-component": "Code.Inline"
-		}
-	});
-}
-v.displayName = "Code.Inline";
-function y({ kind: e = "external", ...t }) {
-	let n = e === "external" ? {
-		target: "_blank",
-		rel: "noreferrer"
-	} : {};
-	return m({
-		defaultTagName: "a",
-		render: t.render,
-		props: {
-			...p(n, t, {
-				className: a(g.inline, g.inlineLink, t.className),
-				children: t.children
-			}),
-			"data-imf-ui-component": "Code.InlineLink",
-			"data-kind": e
-		}
-	});
-}
-y.displayName = "Code.InlineLink";
-function b({ className: e, language: i, hideCopy: o = !1, children: l, ...u }) {
-	let { copied: f, copy: p } = h(), m = d(null), _ = f ? n : t;
-	return /* @__PURE__ */ c("div", {
-		"data-imf-ui-component": "Code.Block",
-		className: a(g.block, e),
-		children: [
-			i != null && /* @__PURE__ */ s("span", {
-				className: g.language,
-				children: i
-			}),
-			!o && /* @__PURE__ */ s("button", {
-				type: "button",
-				className: g.copy,
-				"data-copied": f || void 0,
-				"aria-label": f ? "Copied" : "Copy",
-				onClick: () => p(m.current?.textContent ?? ""),
-				children: /* @__PURE__ */ s(r, {
-					glyph: _,
-					size: 12,
-					strokeWidth: 2,
-					"aria-hidden": !0
-				})
-			}),
-			/* @__PURE__ */ s("pre", {
-				...u,
-				className: g.pre,
-				children: /* @__PURE__ */ s("code", {
-					ref: m,
-					children: l
-				})
-			})
-		]
-	});
-}
-b.displayName = "Code.Block";
-//#endregion
-//#region src/components/code/code.meta.ts
-var x = {
-	name: "Code",
-	category: i.display,
-	status: "stable",
-	namespace: !0,
-	description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
-	origin: "native"
-};
-//#endregion
-export { _ as a, y as i, b as n, h as o, v as r, x as t };

package/dist/slider-Cqpreglu.js

@@ -1,116 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { cva as t } from "class-variance-authority";
-import { jsx as n } from "react/jsx-runtime";
-import { Slider as r } from "@base-ui/react/slider";
-//#region src/utils/resolve-state-props.ts
-function i(e, t) {
-	return e instanceof Function ? e(t) : e;
-}
-function a(e, t) {
-	return i(e, t);
-}
-function o(e, t) {
-	return i(e, t);
-}
-var s = {
-	control: "imf-ui-slider-module-control",
-	indicator: "imf-ui-slider-module-indicator",
-	label: "imf-ui-slider-module-label",
-	root: "imf-ui-slider-module-root",
-	thumb: "imf-ui-slider-module-thumb",
-	track: "imf-ui-slider-module-track",
-	value: "imf-ui-slider-module-value",
-	variantPosition: "imf-ui-slider-module-variantPosition"
-}, c = /* @__PURE__ */ e({
-	Control: () => y,
-	Indicator: () => x,
-	Label: () => _,
-	Root: () => g,
-	Thumb: () => S,
-	Track: () => b,
-	Value: () => v
-}), l = t(s.root, { variants: { variant: {
-	default: null,
-	position: s.variantPosition
-} } }), u = t(s.label), d = t(s.value), f = t(s.control), p = t(s.track), m = t(s.indicator), h = t(s.thumb);
-function g({ variant: e = "default", value: t, defaultValue: i, onValueChange: o, onValueCommitted: s, min: c = 0, max: u = 100, step: d = 1, largeStep: f = 10, minStepsBetweenValues: p = 0, disabled: m = !1, orientation: h = "horizontal", name: g, form: _, locale: v, thumbAlignment: y = "edge", thumbCollisionBehavior: b = "push", format: x, ...S }) {
-	return /* @__PURE__ */ n(r.Root, {
-		...S,
-		"data-imf-ui-component": "Slider.Root",
-		"data-orientation": h,
-		className: (t) => l({
-			variant: e,
-			className: a(S.className, t)
-		}),
-		value: t,
-		defaultValue: i,
-		onValueChange: o,
-		onValueCommitted: s,
-		min: c,
-		max: u,
-		step: d,
-		largeStep: f,
-		minStepsBetweenValues: p,
-		disabled: m,
-		orientation: h,
-		name: g,
-		form: _,
-		locale: v,
-		thumbAlignment: y,
-		thumbCollisionBehavior: b,
-		format: x
-	});
-}
-g.displayName = "Slider.Root";
-function _(e) {
-	return /* @__PURE__ */ n(r.Label, {
-		...e,
-		"data-imf-ui-component": "Slider.Label",
-		className: (t) => u({ className: a(e.className, t) })
-	});
-}
-_.displayName = "Slider.Label";
-function v({ children: e, ...t }) {
-	return /* @__PURE__ */ n(r.Value, {
-		...t,
-		"data-imf-ui-component": "Slider.Value",
-		className: (e) => d({ className: a(t.className, e) }),
-		children: e
-	});
-}
-v.displayName = "Slider.Value";
-function y(e) {
-	return /* @__PURE__ */ n(r.Control, {
-		...e,
-		"data-imf-ui-component": "Slider.Control",
-		className: (t) => f({ className: a(e.className, t) })
-	});
-}
-y.displayName = "Slider.Control";
-function b(e) {
-	return /* @__PURE__ */ n(r.Track, {
-		...e,
-		"data-imf-ui-component": "Slider.Track",
-		className: (t) => p({ className: a(e.className, t) })
-	});
-}
-b.displayName = "Slider.Track";
-function x(e) {
-	return /* @__PURE__ */ n(r.Indicator, {
-		...e,
-		"data-imf-ui-component": "Slider.Indicator",
-		className: (t) => m({ className: a(e.className, t) })
-	});
-}
-x.displayName = "Slider.Indicator";
-function S({ index: e, ...t }) {
-	return /* @__PURE__ */ n(r.Thumb, {
-		...t,
-		"data-imf-ui-component": "Slider.Thumb",
-		className: (e) => h({ className: a(t.className, e) }),
-		index: e
-	});
-}
-S.displayName = "Slider.Thumb";
-//#endregion
-export { S as a, c, g as i, a as l, x as n, b as o, _ as r, v as s, y as t, o as u };