@imfusion/web-ui 0.10.1-dev.6.gf715361a → 0.10.1-dev.61.g9d1000b8

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

@@ -6,9 +6,9 @@ validation. These rules cover structure and feedback.
 ## Structure
 
 - Remove fields that can be derived or asked later.
-- Use one column by default. Put short, inseparable values such as city and postal code in a `Row`.
-- Group related fields in a `Stack` and separate groups with more space.
-- Use a labeled `Fieldset` or heading for each group.
+- Use one column by default. Put short, inseparable values such as city and postal code on one row.
+- Group related fields with tight spacing and separate groups with more space.
+- Use a labeled fieldset or heading for each group.
 - Match a field's size to the value it expects.
 
 ## Labels
@@ -21,10 +21,10 @@ hints near the field before the user starts typing.
 Validate when the user finishes a field, except where live feedback genuinely helps, such as password requirements. Keep the
 error next to the field and use more than color to show it.
 
-An error says what is wrong and how to fix it. Keep the user's input. A server or form-level failure belongs in a `Callout`
-near the actions; field-level failures stay with their fields.
+An error says what is wrong and how to fix it. Keep the user's input. A server or form-level failure belongs in an in-place
+status message near the actions; field-level failures stay with their fields.
 
 ## Submission
 
-Use one primary `Button` whose label names the result, such as `Create project`. While submitting, keep the form visible and
+Use one primary button whose label names the result, such as `Create project`. While submitting, keep the form visible and
 show progress. A failed submission must leave the user's input on screen.

package/src/llms/skills/imf-web-ui-ux/references/usability-heuristics.md

@@ -5,12 +5,12 @@ user research.
 
 1. **Show system status.** Give async actions visible progress and confirmation.
 2. **Use the user's language.** Labels and ordering should match the domain, not an API's private names.
-3. **Provide an exit.** Drawers and popovers need clear dismissal; destructive actions need confirmation or undo.
+3. **Provide an exit.** Side panels and floating panels need clear dismissal; destructive actions need confirmation or undo.
 4. **Be consistent.** Reuse the library's established components and semantics.
 5. **Prevent errors.** Constrain known choices and disable actions that cannot work.
 6. **Support recognition.** Keep relevant options and context visible instead of making users remember them.
 7. **Support frequent users.** Add keyboard shortcuts or dense layouts when the task is frequent and data-heavy.
 8. **Remove decoration without a job.** Every element should support the action or the data.
 9. **Make errors recoverable.** Say what failed and what to do next, near the problem.
-10. **Keep help contextual.** Prefer a short hint beside a control to essential information hidden in a tooltip or separate
-    page.
+10. **Keep help contextual.** Prefer a short hint beside a control to essential information hidden in a hover hint or
+    separate page.

package/src/llms/skills/imf-web-ui-ux/references/visual-design.md

@@ -7,12 +7,12 @@ Use this when a screen works but still looks wrong. Decide the hierarchy before
 Write the intended order of attention: title, primary action, content, and supporting details. Use contrast and scale to make
 that order visible. Keep variation limited; if everything is loud, nothing leads.
 
-Reserve saturated status colors for meaning. The primary `Button` should be the strongest action treatment on the screen.
+Reserve saturated status colors for meaning. The primary button should be the strongest action treatment on the screen.
 
 ## Grouping
 
-Use proximity first: tight gaps inside a group, larger gaps between groups. `Stack` gap values encode this relationship. Use
-a shared `Card` or bordered region only when spacing alone does not make the relationship clear.
+Use proximity first: tight gaps inside a group, larger gaps between groups. Spacing values encode this relationship. Use a
+shared card or bordered region only when spacing alone does not make the relationship clear.
 
 Similarity helps related elements stay recognisable across a layout. It supports proximity; it does not replace it.
 

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",
@@ -493,7 +493,7 @@
       },
       {
         "name": "--imf-ui-font-letterspacing-brand",
-        "value": "-0.02em"
+        "value": "clamp(-0.035rem, -0.0081rem - 0.0224vw, -0.0131rem)"
       },
       {
         "name": "--imf-ui-font-letterspacing-display",
@@ -501,7 +501,7 @@
       },
       {
         "name": "--imf-ui-font-letterspacing-hero",
-        "value": "-0.04em"
+        "value": "clamp(-0.225rem, -0.0312rem - 0.1615vw, -0.0675rem)"
       },
       {
         "name": "--imf-ui-font-letterspacing-loose",
@@ -689,7 +689,7 @@
       },
       {
         "name": "--imf-ui-font-weight-strong",
-        "value": "600"
+        "value": "500"
       }
     ],
     "inner-*": [
@@ -913,6 +913,14 @@
         "name": "--imf-ui-size-9",
         "value": "4rem"
       },
+      {
+        "name": "--imf-ui-size-backdrop-band-height",
+        "value": "30dvh"
+      },
+      {
+        "name": "--imf-ui-size-backdrop-edge",
+        "value": "38%"
+      },
       {
         "name": "--imf-ui-size-content-1",
         "value": "20ch"
@@ -947,5 +955,5 @@
       }
     ]
   },
-  "count": 231
+  "count": 233
 }

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

package/src/llms/install-templates/hooks/baseline-staleness.sh

@@ -1,24 +0,0 @@
-#!/usr/bin/env sh
-# Advisory baseline-staleness check, meant to be called from the repo's pre-commit hook.
-# Compares the installed imf-web-ui skill markers against the installed package version
-# and warns on drift. Always exits 0 — staleness never blocks a commit.
-PKG=node_modules/@imfusion/web-ui/package.json
-[ -f "$PKG" ] || exit 0
-CURRENT=$(node -p "require('./$PKG').version" 2>/dev/null) || exit 0
-
-# .claude/skills may be a symlink to .agents/skills; skip markers already read.
-seen=""
-for marker in .agents/skills/imf-web-ui*/.imf-web-ui-skill-version.json .claude/skills/imf-web-ui*/.imf-web-ui-skill-version.json; do
-  [ -f "$marker" ] || continue
-  real=$(cd "$(dirname "$marker")" && pwd -P)/$(basename "$marker")
-  case " $seen " in
-    *" $real "*) continue ;;
-  esac
-  seen="$seen $real"
-  INSTALLED=$(node -p "require('./$marker').version" 2>/dev/null) || continue
-  if [ "$INSTALLED" != "$CURRENT" ]; then
-    echo "imf-web-ui skills are stale ($INSTALLED installed, package is $CURRENT) — run /imf-web-ui-update, or: npx web-ui install skills && npx web-ui install hooks"
-    break
-  fi
-done
-exit 0