@imfusion/web-ui 0.10.1-dev.3.gc9ea991e → 0.10.1-dev.33.g8275f59f

package/src/llms/llms.gen.txt

@@ -11,7 +11,7 @@ props, which always live in the docgen file above.
 
 ## AccountCard
 - category: Display, status: experimental
-Card linking to the signed-in person's account: avatar, a large name or email, a quiet line under it, and organization and role at its foot, with a trailing action such as Log out. Also called an ID card or user row; for a bare person badge, use Avatar.
+The signed-in person's account row: the avatar in a lead column, the name or email, a quiet line under it, and organization and role below, with a trailing action such as Log out. Also called an ID card or user row; for a bare person badge, use Avatar.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .account-card (jq: jq '.account-card' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
 ## AppShell
@@ -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-audit/SKILL.md

@@ -23,15 +23,20 @@ it low, and do not let it crowd the sections a consumer has to act on.
 
 Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
 
-1. Resolve the argument. Bare means `full`; an unknown topic is an error, not a reason to widen the scope.
+1. Resolve the argument. Bare means `full`; an unknown topic is an error, not a reason to widen the scope. Then check that
+   `node_modules/@imfusion/web-ui/package.json` exists. Without it, token, installed-version, and installed-type checks can
+   only come back Unverified, so tell the human before dispatch and ask whether to install dependencies first or continue
+   with those checks unverified.
 2. Enter plan mode unless this audit is being called as verification by another skill or the host has no plan mode.
 3. Read the report template and existing reviewer notes, then dispatch one investigator per in-scope topic. Tell each
-   investigator to use only `Read`, `Glob`, and `Grep`, with no shell commands or writes. An investigator checks every
-   section in that topic and writes nothing. Once dispatch starts, the host performs no repository inspection: the returned
-   reports are the evidence, and the host merges them without reading or searching the files again. Gathering the evidence
-   twice spends context on the second pass and reports what the host still remembers. Inspect a topic inline only after its
-   dispatch has been tried and refused, and say which attempt failed. A `full` audit also dispatches one marker investigator;
-   a named-topic audit gives that search to the topic's investigator. See [Deferred-work markers](#deferred-work-markers).
+   investigator to inspect statically: `Read` plus the host's file search (`Glob` and `Grep`, or a read-only search tool when
+   the host has no `Glob` or `Grep`), with no shell commands or writes. An investigator checks every section in that topic
+   across the whole frontend tree and writes nothing; one without any search tool says so and stops instead of auditing only
+   the paths it already knows. Once dispatch starts, the host performs no repository inspection: the returned reports are the
+   evidence, and the host merges them without reading or searching the files again. Gathering the evidence twice spends
+   context on the second pass and reports what the host still remembers. Inspect a topic inline only after its dispatch has
+   been tried and refused, and say which attempt failed. A `full` audit also dispatches one marker investigator; a
+   named-topic audit gives that search to the topic's investigator. See [Deferred-work markers](#deferred-work-markers).
 4. Merge the evidence into the shared report format in
    [`templates/REPORT.md`](../imf-web-ui-conventions/templates/REPORT.md). Before presenting or writing it, check that every
    Broken, Missing, Deviation, and Unverified entry has a severity, evidence, impact, and next action; do not compact
@@ -90,6 +95,6 @@ text; do not run installers or hooks.
 
 ## Safety
 
-Use only `Read`, `Glob`, `Grep`, and equivalent static inspection. Do not run Git, shells, Node, npm, npx, package scripts,
-linters, tests, builds, hooks, or imported config. Report runtime state as unverified. Investigators inherit this
-restriction.
+Use only `Read`, the host's read-only file search, and equivalent static inspection. Do not run Git, shells, Node, npm, npx,
+package scripts, linters, tests, builds, hooks, or imported config. Report runtime state as unverified. Investigators inherit
+this restriction.

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

@@ -14,7 +14,7 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Stay behind the library
 - [ ] Wrap primitives when the app has a reason to
 - [ ] Lock a field: read-only or disabled
-- [ ] Derive types, don't import them
+- [ ] Derive types, don't copy them
 - [ ] Integrations own their peers
 - [ ] Styling crosses the boundary through seams
 
@@ -89,6 +89,7 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Topic registry and key factory
 - [ ] Options factories and naming
 - [ ] Router context access
+- [ ] Loading states
 - [ ] Automatic invalidation
 - [ ] Testing the data layer
 

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

@@ -102,6 +102,19 @@ not inline those options at the call site.
 Put the API object and `QueryClient` in router context. Loaders use `context.api.<topic>.<fn>()`; route components read the
 same context with `Route.useRouteContext()`. Direct imports are for plain utilities and tests outside the route tree.
 
+## Loading states
+
+Pick the Skeleton part by how the data loads:
+
+- Data read with `useSuspenseQuery` inside a Suspense boundary uses `Skeleton.Suspense`, with the bones as its `fallback`.
+  Content fades in when the fallback showed; cached data mounts without a fade.
+- Secondary data read with `useQuery` that may arrive later uses `Skeleton.Root` with `loading={isPending}` around the real
+  content, which cross-fades when the data lands.
+- A route whose loader blocks navigation until the data is cached shows its `pendingComponent`. The router unmounts it, so
+  nothing reveals.
+
+A layout that reads suspending data needs its own boundary. Otherwise a suspension blanks the whole layout.
+
 ## Automatic invalidation
 
 Mutation keys start with the topic they change. The shared `MutationCache` invalidates that topic after success by default.

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

@@ -7,12 +7,15 @@ Use the repository's tracked configuration and keep verification scopes clear.
 Run once in a clone:
 
 ```sh
-git config core.hooksPath .githooks
+git config core.hooksPath .vite-hooks/_
+vp config --no-agent
 git config pull.rebase true
 git config merge.ff only
 ```
 
-The hooks are tracked in `.githooks/`. Check both the Git setting and the directory; a missing hook path fails silently.
+Vite+ manages the hooks. The hook scripts are tracked in `.vite-hooks/`; `vp config` installs the dispatcher into the
+git-ignored `.vite-hooks/_/`. `vp config` leaves a `core.hooksPath` that points elsewhere alone, so set it first. Every clone
+and worktree needs its own dispatcher. Check both with `vp hooks status`; a missing dispatcher skips the hooks silently.
 
 ## Verify scopes
 

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

@@ -9,7 +9,9 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
 - Nest states, pseudo-elements, and child selectors under the root.
 - Write declarations before nested rules; browsers before Chrome 130, Firefox 132, and Safari 18 move later ones above them.
 - Do not nest under a selector list whose selectors differ in specificity. The nested rule takes the highest one.
-- Lift repeated values into custom properties, especially when a state or variant changes several descendants.
+- Lift a value into a custom property on the component's root when it repeats within that stylesheet, or when a state or
+  variant changes several descendants. A value that only recurs across files stays a literal in each; when those files show
+  one design element, a shared component owns it. Never define component values on `:root`.
 - Keep structurally different rules explicit; not every repeated value needs an abstraction.
 
 ```css

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

@@ -49,7 +49,7 @@ from `vite-plus/test`. It needs Node `^22.22.1 || ^24.11 || >=26` and Git 2.32 o
 `vp <command>` is a built-in; `vp run <script>` runs a package script.
 
 Move an existing Vite, Vitest, ESLint, or Prettier project with `vp migrate --no-hooks` (`vp help migrate` lists its
-options), then check the result against this topic. The hook lives in `.githooks/`, as `git.md` describes.
+options), then check the result against this topic. The hook lives in `.vite-hooks/`, as `git.md` describes.
 
 ## Oxfmt
 
@@ -106,7 +106,7 @@ Use strict TypeScript with bundler module resolution, `verbatimModuleSyntax`, un
 
 ## Pre-commit checks
 
-`.githooks/pre-commit` runs `vp staged --hide-unstaged --fail-on-changes --revert --diff-filter=ACMRD` with `set -e`. Those
+`.vite-hooks/pre-commit` runs `vp staged --hide-unstaged --fail-on-changes --revert --diff-filter=ACMRD` with `set -e`. Those
 flags make the checks see only the staged state, include deletion-only commits, fail the commit when a check would change a
 file, and restore the tree afterwards, so the hook never rewrites or stages files. The `staged` block in `vite.config.ts` is
 a function returning path-free commands such as `npm run --silent verify:lint`, so each project-wide check runs once. Use

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

@@ -6,6 +6,8 @@ Prefer pure functions, immutable values, and side effects at the edges.
 
 - Do not use `any`. Accept `unknown` at an untrusted boundary and narrow it.
 - Infer local values; give exported functions explicit return types.
+  - TanStack options factories (`queryOptions`, `mutationOptions`, and similar) return their helper's inferred type. Spelling
+    it out loses the typed query key (`DataTag`) or repeats the helper's own generics.
 - Model states directly instead of filling a nullable value later.
 - Derive types from their source. Use `z.infer` for schemas and `React.ComponentProps` for Web UI components.
 - Avoid `as`. Keep an assertion only at an untyped third-party boundary where it is the honest boundary.

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

@@ -70,7 +70,8 @@ reason.
 Plan these states with the loaded view:
 
 - **Empty**: say what belongs here and what the user can do next.
-- **Loading**: use `Spinner` or a stable skeleton; keep the frame from jumping.
+- **Loading**: use `Spinner` or a stable skeleton; keep the frame from jumping. The `imf-web-ui-conventions` data topic says
+  which Skeleton part fits each way the data loads.
 - **Error**: explain what failed and the next action in a `Callout` near the problem.
 - **Loaded**: the normal view.
 

package/src/llms/tokens.gen.json

@@ -477,7 +477,7 @@
       },
       {
         "name": "--imf-ui-font-family-mono",
-        "value": "\"CoFo Sans Mono\", ui-monospace, monospace"
+        "value": "\"Paper Mono\", ui-monospace, monospace"
       },
       {
         "name": "--imf-ui-font-family-sans",

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 };