@imfusion/web-ui 0.8.1-dev.3.g40eaad1c → 0.8.1-dev.31.g7b15b0d3

package/dist/tabs-9d4oaDwZ.js

@@ -0,0 +1,295 @@
+import { t as e } from "./chunk-DmhlhrBa.js";
+import { l as t, u as n } from "./slider-gyIYWSy3.js";
+import { cva as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+import { Children as a, useCallback as o } from "react";
+import { Switch as s } from "@base-ui/react/switch";
+import { Toggle as c } from "@base-ui/react/toggle";
+import { ToggleGroup as l } from "@base-ui/react/toggle-group";
+import { Tabs as u } from "@base-ui/react/tabs";
+var d = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, f = /* @__PURE__ */ e({
+	Root: () => h,
+	Thumb: () => g
+}), p = r(d.root), m = r(d.thumb);
+function h(e) {
+	return /* @__PURE__ */ i(s.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (n) => p({ className: t(e.className, n) })
+	});
+}
+h.displayName = "Switch.Root";
+function g(e) {
+	return /* @__PURE__ */ i(s.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (n) => m({ className: t(e.className, n) })
+	});
+}
+g.displayName = "Switch.Thumb";
+//#endregion
+//#region src/components/toggle/toggle.tsx
+var _ = r({ root: "imf-ui-toggle-module-root" }.root), v = 2;
+function y(e) {
+	let t = 0;
+	return a.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += v);
+	}), t;
+}
+function b({ style: e, children: r, ...a }) {
+	let o = {
+		"--glyph-count": y(r),
+		"--max-glyphs": v
+	};
+	return /* @__PURE__ */ i(c, {
+		...a,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...o,
+			...n(e, t)
+		}),
+		className: (e) => _({ className: t(a.className, e) }),
+		children: r
+	});
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group.tsx
+var x = r({ root: "imf-ui-toggle-group-module-root" }.root);
+function S(e) {
+	return /* @__PURE__ */ i(l, {
+		...e,
+		"data-imf-ui-component": "ToggleGroup",
+		className: (n) => x({ className: t(e.className, n) })
+	});
+}
+var C = {
+	alignCenter: "imf-ui-row-module-alignCenter",
+	alignEnd: "imf-ui-row-module-alignEnd",
+	alignStart: "imf-ui-row-module-alignStart",
+	alignStretch: "imf-ui-row-module-alignStretch",
+	gap1: "imf-ui-row-module-gap1",
+	gap10: "imf-ui-row-module-gap10",
+	gap2: "imf-ui-row-module-gap2",
+	gap3: "imf-ui-row-module-gap3",
+	gap4: "imf-ui-row-module-gap4",
+	gap5: "imf-ui-row-module-gap5",
+	gap6: "imf-ui-row-module-gap6",
+	gap7: "imf-ui-row-module-gap7",
+	gap8: "imf-ui-row-module-gap8",
+	gap9: "imf-ui-row-module-gap9",
+	justifyAround: "imf-ui-row-module-justifyAround",
+	justifyBetween: "imf-ui-row-module-justifyBetween",
+	justifyCenter: "imf-ui-row-module-justifyCenter",
+	justifyEnd: "imf-ui-row-module-justifyEnd",
+	justifyEvenly: "imf-ui-row-module-justifyEvenly",
+	justifyStart: "imf-ui-row-module-justifyStart",
+	root: "imf-ui-row-module-root",
+	wrap: "imf-ui-row-module-wrap"
+}, w = r(C.root, { variants: {
+	gap: {
+		1: C.gap1,
+		2: C.gap2,
+		3: C.gap3,
+		4: C.gap4,
+		5: C.gap5,
+		6: C.gap6,
+		7: C.gap7,
+		8: C.gap8,
+		9: C.gap9,
+		10: C.gap10
+	},
+	align: {
+		start: C.alignStart,
+		center: C.alignCenter,
+		end: C.alignEnd,
+		stretch: C.alignStretch
+	},
+	justify: {
+		start: C.justifyStart,
+		center: C.justifyCenter,
+		end: C.justifyEnd,
+		between: C.justifyBetween,
+		around: C.justifyAround,
+		evenly: C.justifyEvenly
+	},
+	wrap: {
+		true: C.wrap,
+		false: null
+	}
+} });
+function T({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...a }) {
+	return /* @__PURE__ */ i("div", {
+		...a,
+		"data-imf-ui-component": "Row",
+		className: w({
+			gap: e,
+			align: t,
+			justify: n,
+			wrap: r,
+			className: a.className
+		})
+	});
+}
+var E = {
+	alignCenter: "imf-ui-stack-module-alignCenter",
+	alignEnd: "imf-ui-stack-module-alignEnd",
+	alignStart: "imf-ui-stack-module-alignStart",
+	alignStretch: "imf-ui-stack-module-alignStretch",
+	gap0: "imf-ui-stack-module-gap0",
+	gap1: "imf-ui-stack-module-gap1",
+	gap10: "imf-ui-stack-module-gap10",
+	gap2: "imf-ui-stack-module-gap2",
+	gap3: "imf-ui-stack-module-gap3",
+	gap4: "imf-ui-stack-module-gap4",
+	gap5: "imf-ui-stack-module-gap5",
+	gap6: "imf-ui-stack-module-gap6",
+	gap7: "imf-ui-stack-module-gap7",
+	gap8: "imf-ui-stack-module-gap8",
+	gap9: "imf-ui-stack-module-gap9",
+	justifyAround: "imf-ui-stack-module-justifyAround",
+	justifyBetween: "imf-ui-stack-module-justifyBetween",
+	justifyCenter: "imf-ui-stack-module-justifyCenter",
+	justifyEnd: "imf-ui-stack-module-justifyEnd",
+	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
+	justifyStart: "imf-ui-stack-module-justifyStart",
+	root: "imf-ui-stack-module-root"
+}, D = r(E.root, { variants: {
+	gap: {
+		0: E.gap0,
+		1: E.gap1,
+		2: E.gap2,
+		3: E.gap3,
+		4: E.gap4,
+		5: E.gap5,
+		6: E.gap6,
+		7: E.gap7,
+		8: E.gap8,
+		9: E.gap9,
+		10: E.gap10
+	},
+	align: {
+		start: E.alignStart,
+		center: E.alignCenter,
+		end: E.alignEnd,
+		stretch: E.alignStretch
+	},
+	justify: {
+		start: E.justifyStart,
+		center: E.justifyCenter,
+		end: E.justifyEnd,
+		between: E.justifyBetween,
+		around: E.justifyAround,
+		evenly: E.justifyEvenly
+	}
+} });
+function O({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
+	return /* @__PURE__ */ i("div", {
+		...r,
+		"data-imf-ui-component": "Stack",
+		className: D({
+			gap: e,
+			align: t,
+			justify: n,
+			className: r.className
+		})
+	});
+}
+var k = {
+	indicator: "imf-ui-tabs-module-indicator",
+	list: "imf-ui-tabs-module-list",
+	listFill: "imf-ui-tabs-module-listFill",
+	panel: "imf-ui-tabs-module-panel",
+	panelViewport: "imf-ui-tabs-module-panelViewport",
+	root: "imf-ui-tabs-module-root",
+	tab: "imf-ui-tabs-module-tab"
+}, A = /* @__PURE__ */ e({
+	Indicator: () => H,
+	List: () => B,
+	Panel: () => W,
+	PanelViewport: () => U,
+	Root: () => z,
+	Tab: () => V
+}), j = r(k.list, { variants: { fill: {
+	true: k.listFill,
+	false: null
+} } }), M = r(k.root), N = r(k.tab), P = r(k.indicator), F = r(k.panelViewport), I = r(k.panel);
+function L(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function R(e) {
+	let t = new ResizeObserver(() => {
+		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
+		e.toggleAttribute("data-overflowing", t);
+	}), n = () => {
+		t.disconnect(), t.observe(e);
+		for (let n of e.children) t.observe(n);
+	}, r = new MutationObserver(n);
+	return r.observe(e, { childList: !0 }), n(), () => {
+		t.disconnect(), r.disconnect();
+	};
+}
+function z(e) {
+	return /* @__PURE__ */ i(u.Root, {
+		...e,
+		"data-imf-ui-component": "Tabs.Root",
+		className: (n) => M({ className: t(e.className, n) })
+	});
+}
+z.displayName = "Tabs.Root";
+function B({ fill: e = !1, ref: n, ...r }) {
+	let a = o((e) => {
+		if (!e) return;
+		L(n, e);
+		let t = R(e);
+		return () => {
+			t(), L(n, null);
+		};
+	}, [n]);
+	return /* @__PURE__ */ i(u.List, {
+		...r,
+		ref: a,
+		"data-imf-ui-component": "Tabs.List",
+		className: (n) => j({
+			fill: e,
+			className: t(r.className, n)
+		})
+	});
+}
+B.displayName = "Tabs.List";
+function V(e) {
+	return /* @__PURE__ */ i(u.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (n) => N({ className: t(e.className, n) })
+	});
+}
+V.displayName = "Tabs.Tab";
+function H(e) {
+	return /* @__PURE__ */ i(u.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (n) => P({ className: t(e.className, n) })
+	});
+}
+H.displayName = "Tabs.Indicator";
+function U(e) {
+	return /* @__PURE__ */ i("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: F({ className: e.className })
+	});
+}
+U.displayName = "Tabs.PanelViewport";
+function W(e) {
+	return /* @__PURE__ */ i(u.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (n) => I({ className: t(e.className, n) })
+	});
+}
+W.displayName = "Tabs.Panel";
+//#endregion
+export { z as a, O as c, b as d, h as f, U as i, T as l, f as m, B as n, V as o, g as p, W as r, A as s, H as t, S as u };

package/dist/utils/status-glyphs.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from '../icons';
+export type Status = "info" | "positive" | "warning" | "negative";
+/** The glyph each status shows wherever a component marks it with an icon. */
+export declare const statusGlyphs: Record<Status, IconComponent>;

package/dist/vite.js

@@ -1,4 +1,4 @@
-import { n as e } from "./paths-Oi0v8x-w.js";
+import { n as e } from "./paths-CUyf9wjm.js";
 import { readFileSync as t, readdirSync as n, realpathSync as r } from "node:fs";
 import { dirname as i, join as a, resolve as o, sep as s } from "node:path";
 import { fileURLToPath as c } from "node:url";

package/dist/web-ui-cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { n as e, r as t, t as n } from "./paths-Oi0v8x-w.js";
+import { n as e, r as t, t as n } from "./paths-CUyf9wjm.js";
 import { chmodSync as r, cpSync as i, existsSync as a, lstatSync as o, mkdirSync as s, readFileSync as c, readdirSync as l, readlinkSync as u, realpathSync as d, rmSync as f, symlinkSync as p, writeFileSync as m } from "node:fs";
 import { dirname as h, relative as g, resolve as _ } from "node:path";
 import { Command as ee, Option as te } from "commander";

package/docs/user-guide/AgentTooling.mdx

@@ -55,8 +55,12 @@ With the hooks installed, the agent is pointed at the router at the start of eve
 picks it up from the skill's description; invoke it by name when it does not.
 
 The router answers library questions from the packaged user guides and hands other tasks to a skill. Setup, audit, and UX
-work from `imf-web-ui-conventions`, a knowledge skill that holds the ImFusion frontend conventions. Solid outlines are the
-skills you run; dashed boxes are knowledge the agent reads:
+work from `imf-web-ui-conventions`, a knowledge skill that holds the ImFusion frontend conventions. Every skill
+you run first reads `imf-web-ui-user-profile`. On the first run it asks a few questions about your name, your
+background, your experience, how much explanation you want, and how you like to work, then saves the answers to
+`~/.config/imfusion/web-ui/consumer-profile.md` if you agree. Say "change my profile" to answer again.
+
+Solid outlines are the skills you run; dashed boxes are knowledge the agent reads:
 
 <ConsumerLlmFrameworkDiagram />
 
@@ -83,7 +87,8 @@ The hooks put the agent on the right skill at the right moment and ask it to ver
 ## Keeping it current
 
 Ask the agent to update the library, for example "Update @imfusion/web-ui". That runs `/imf-web-ui-update`, which installs
-the newer package and refreshes the skills, hook scripts, and registrations to match it.
+the newer package and refreshes the skills, hook scripts, and registrations to match it. It then reports what the new
+releases change for your code and offers `/imf-web-ui-audit full` as a wider check of the project.
 
 To do the same by hand, update the package, then run:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.8.1-dev.3.g40eaad1c",
+  "version": "0.8.1-dev.31.g7b15b0d3",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -91,15 +91,15 @@
     "test:stories": "vitest run --project storybook",
     "test:watch": "vitest",
     "skills:eval": "tsx src/llms/evals/runner/run.ts",
-    "skills:eval:dev": "WEB_UI_SKILL_EVAL_ROOT=/private/tmp/web-ui-dev-skill-evals WEB_UI_SKILL_EVAL_RESULTS_DIR=.agents/evals/results WEB_UI_SKILL_EVAL_REPORT_PATH=.agents/evals/REPORT.md WEB_UI_SKILL_EVAL_SKILL_FAMILY=web-ui-dev WEB_UI_SKILL_EVAL_WORKSPACE_LABEL='development repository' tsx src/llms/evals/runner/run.ts --scenarios-dir .agents/evals/scenarios --setup .agents/evals/setup-env.sh",
+    "skills:eval:dev": "WEB_UI_SKILL_EVAL_SCENARIOS_DIR=.agents/evals/scenarios WEB_UI_SKILL_EVAL_SKILLS_DIR=.agents/skills WEB_UI_SKILL_EVAL_ROOT=/private/tmp/web-ui-dev-skill-evals WEB_UI_SKILL_EVAL_RESULTS_DIR=.agents/evals/results WEB_UI_SKILL_EVAL_REPORT_PATH=.agents/evals/REPORT.md WEB_UI_SKILL_EVAL_SKILL_FAMILY=web-ui-dev WEB_UI_SKILL_EVAL_WORKSPACE_LABEL='development repository' tsx src/llms/evals/runner/run.ts --scenarios-dir .agents/evals/scenarios --setup .agents/evals/setup-env.sh",
     "skills:eval:compare": "tsx src/llms/evals/runner/compare.ts",
     "skills:eval:affected": "tsx src/llms/evals/runner/affected.ts",
     "skills:eval:report": "tsx src/llms/evals/runner/report.ts",
     "git:config": "git config core.hooksPath .githooks && git config pull.rebase true && git config merge.ff only"
   },
   "peerDependencies": {
-    "@imfusion/sdk": "^1.0.0 || >=1.1.1-dev.0 <1.1.1",
-    "@imfusion/sdk-react": "^1.0.0 || >=1.1.1-dev.0 <1.1.1",
+    "@imfusion/sdk": "*",
+    "@imfusion/sdk-react": "*",
     "@tanstack/highlight": "^0.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/docgen/doc.gen.json

@@ -499,6 +499,19 @@
             "description": "Width divided by height, or \"auto\" to use the image's intrinsic ratio."
           }
         ]
+      },
+      {
+        "name": "Card.Status",
+        "description": "Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass\nchildren to replace the glyph. Like `Card.Image`, place it first among the slots: a column\nbeside the body in a horizontal card, a band above it in a vertical one. Decorative\n(`aria-hidden`); the card's text carries the status.",
+        "props": [
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| null",
+            "defaultValue": "info",
+            "description": ""
+          }
+        ]
       }
     ]
   },
@@ -1963,7 +1976,7 @@
       },
       {
         "name": "Field.Error",
-        "description": "Field.Error — an inline validation message shown when its match condition fails.",
+        "description": "Field.Error — an inline validation message shown when its match condition fails.\nIt announces itself with `role=\"alert\"`; pass another `role` to quiet it.",
         "props": [
           {
             "name": "className",
@@ -5556,7 +5569,7 @@
   "slider": {
     "root": {
       "name": "Slider.Root",
-      "description": "Slider.Root — value selector along a continuous or stepped track.",
+      "description": "Slider.Root — value selector along a continuous or stepped track.\n\n`variant=\"position\"` draws a scrollbar-like trough and bar thumb for picking one position\nbetween `min` and `max`, such as a slice or frame; `onValueChange` reports the position.",
       "props": [
         {
           "name": "className",
@@ -5704,6 +5717,13 @@
           "type": "number | readonly number[]",
           "defaultValue": null,
           "description": "The value of the slider.\nFor ranged sliders, provide an array with two values."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"default\" | \"position\" | null",
+          "defaultValue": "default",
+          "description": ""
         }
       ]
     },
@@ -7787,6 +7807,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "support",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -7814,6 +7841,40 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
+          }
+        ]
+      },
+      {
+        "name": "Typo.Eyebrow",
+        "description": "Typo.Eyebrow — short uppercase label above a heading. Also called a kicker or overline.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLHeadingElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
+            "defaultValue": "support",
+            "description": ""
           }
         ]
       },
@@ -7997,6 +8058,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "oncolor",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8058,6 +8126,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8092,6 +8167,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "primary",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8119,6 +8201,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8146,6 +8235,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8173,6 +8269,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "minor",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       },
@@ -8200,6 +8303,13 @@
             "type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
             "defaultValue": "main",
             "description": ""
+          },
+          {
+            "name": "weight",
+            "required": false,
+            "type": "\"strong\" | \"regular\" | \"medium\"",
+            "defaultValue": null,
+            "description": "Font weight. Omit to keep the member's default; `medium` firms up short body text on cards."
           }
         ]
       }
@@ -8309,6 +8419,43 @@
       }
     ]
   },
+  "frame-selection": {
+    "root": {
+      "name": "FrameSelection",
+      "description": "FrameSelection - a position slider bound to the focused frame of the multi-frame image sets in `data`.\nEvery matching image set follows the slider, and a `{focus} | {count}` readout sits beside it.\nRenders nothing when `data` holds no multi-frame image set.\n\nMust render inside an `ImFusionProvider`.",
+      "props": [
+        {
+          "name": "data",
+          "required": true,
+          "type": "HandleArray<Data>",
+          "defaultValue": null,
+          "description": "Datasets to scan, for example from `useVisibleData()`. Non-image data, single-frame image sets, and image sets whose\nframe count differs from the first multi-frame set are ignored."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the slider ignores user interaction."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Frame",
+          "description": "Accessible name of the slider thumb."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "\"horizontal\" | \"vertical\"",
+          "defaultValue": "horizontal",
+          "description": "Direction of the slider; the vertical layout stacks the readout under it."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "image-display-options": {
     "root": {
       "name": "ImageDisplayOptions",

package/src/llms/llms.gen.txt

@@ -38,7 +38,7 @@ Persistent, in-place status message for information, success, warnings, and erro
 
 ## Card
 - category: Layout, status: stable
-Surface container for related content on a tonal background. Also called a panel or tile; compose it from optional image, header, content, and footer parts.
+Surface container for related content on a tonal background. Also called a panel or tile; compose it from optional image, status, header, content, and footer parts.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .card (jq: jq '.card' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
 ## Checkbox
@@ -96,6 +96,12 @@ Semantic group for related form controls with a shared legend. Also called a for
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
 
+## FrameSelection
+- category: Inputs, status: experimental
+Frame or slice picker bound to the focused frame of ImFusion image sets, with a focus and count readout. For a position picker not tied to the SDK, use Slider with variant="position".
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .frame-selection (jq: jq '.frame-selection' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Icon
 - category: Display, status: stable
 Renders a Web UI icon with an optional semantic foreground color. The default inherits the surrounding currentColor.
@@ -160,7 +166,7 @@ Line that divides content horizontally or vertically. Also called a divider or r
 
 ## Slider
 - category: Inputs, status: stable
-Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters.
+Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters. The position variant is a scrubber for picking one slice or frame.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .slider (jq: jq '.slider' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/slider.md
 

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

@@ -11,6 +11,8 @@ description:
 Start here for UI work and library questions in a project that uses `@imfusion/web-ui`. This skill is a map, not a second
 copy of every convention.
 
+Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
+
 ## 1. Decide whether guidance is needed
 
 Skip a companion when the task is explicit and small, an existing local pattern already solves it in the file being changed,