@imfusion/web-ui 0.5.1-dev.51.gad24cd6e → 0.5.1-dev.53.gb710322e

package/src/llms/llms.gen.txt

@@ -85,6 +85,11 @@ Semantic grouping for related form controls with a shared legend. Also called a
 - 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
 
+## Icon
+- category: Display, status: stable
+Semantic color wrapper for an icon imported from the Web UI icons entry. Use it when an icon needs a named foreground role instead of the inherited currentColor.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .icon (jq: jq '.icon' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## ImageDisplayOptions
 - category: Inputs, status: experimental
 A panel or toolbar of controls bound to an image dataset's display options.

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

@@ -1,9 +1,9 @@
 ---
 name: imf-web-ui-components
 description:
-  "Look up @imfusion/web-ui component APIs without reading their source: the two-hop lookup (identity index -> prop data),
-  compound components, and integrations. Load when you need the props, sub-components, or defaults of a specific component —
-  not for choosing between components (imf-web-ui-ux) or first-time setup (imf-web-ui-setup library-setup)."
+  "Look up @imfusion/web-ui component APIs and icon glyphs without reading source. Load when you need a component's props,
+  sub-components, defaults, or a supplied icon — not for choosing between components (imf-web-ui-ux) or first-time setup
+  (imf-web-ui-setup library-setup)."
 allowed-tools: Bash
 ---
 
@@ -16,6 +16,8 @@ reading source or checking out the library's repo:
   and a one-sentence description of what it's for and what else it's called.
 - **`node_modules/@imfusion/web-ui/src/docgen/doc.gen.json`** — full prop tables (name, type, default, description) for every
   component, keyed by kebab-case folder name.
+- **`node_modules/@imfusion/web-ui/src/llms/icon-catalog.gen.json`** — searchable icon names, styles, categories, and tags.
+  Read it only when the task needs an icon.
 
 Neither file is reachable through the package's pretty import paths (`@imfusion/web-ui/llms.txt`,
 `@imfusion/web-ui/docgen.json`) — those are Node module-resolution aliases, meaningless to `cat`/`jq`/`grep` reading files
@@ -73,6 +75,56 @@ don't guess at an API — that's a real gap to report, not something to work aro
 maintainer, or file it in the [WEBSDK Jira project](https://imfusion.atlassian.net/browse/WEBSDK) if you have access. If the
 gap is about _which_ component to use rather than a missing one, that's a design question: open `imf-web-ui-ux`.
 
+## Icons
+
+When the task mentions an icon, glyph, symbol, or `@imfusion/web-ui/icons`, query the icon catalog before choosing a name. Do
+not load it for ordinary component work.
+
+Search one relevant term at a time, then read only the matching records:
+
+```sh
+node -e '
+  const q = process.argv[1].toLowerCase();
+  const icons = JSON.parse(
+    require("fs").readFileSync(
+      "node_modules/@imfusion/web-ui/src/llms/icon-catalog.gen.json",
+      "utf8"
+    )
+  );
+  console.log(
+    JSON.stringify(
+      icons
+        .filter(icon => [icon.name, icon.category, ...icon.tags]
+          .join(" ")
+          .toLowerCase()
+          .includes(q))
+        .slice(0, 20),
+      null,
+      2
+    )
+  );
+' "add"
+```
+
+Import the chosen glyph and `Icon` from `@imfusion/web-ui/icons`. Render it through `Icon`, including when it inherits the
+surrounding color:
+
+```tsx
+import { ArrowRight, Icon } from "@imfusion/web-ui/icons";
+
+<Icon glyph={ArrowRight} aria-hidden />;
+```
+
+Use `Icon` for every rendered icon. Pass the component reference, not a rendered element:
+
+```tsx
+import { ArrowRight, Icon } from "@imfusion/web-ui/icons";
+
+<Icon glyph={ArrowRight} size={16} variant="primary" aria-label="Continue" role="img" />;
+```
+
+Never import `iconoir-react` or another icon package directly.
+
 ## Compound components
 
 A component whose docgen entry has a non-empty `subComponents` array is used as a namespace, not a single import — e.g.

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

@@ -7,6 +7,8 @@ The contract between an app and `@imfusion/web-ui`.
 - Never import Base UI (or any other upstream the library wraps) directly — no upstream stylesheets, no upstream components,
   even when upstream docs show it that way: everything a component needs ships in `@imfusion/web-ui`.
 - Library missing something upstream has → report the gap (see `imf-web-ui-components`); don't reach around it.
+- Import icons from `@imfusion/web-ui/icons` and render them through its `Icon` component. Direct imports from
+  `iconoir-react` are outside the library boundary.
 
 ## Wrap primitives when the app has a reason to
 

package/src/llms/tokens.gen.json

@@ -265,11 +265,11 @@
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-dark",
-        "value": "0.8"
+        "value": "0.75"
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-light",
-        "value": "0.65"
+        "value": "0.55"
       },
       {
         "name": "--imf-ui-color-primary-hue",

package/dist/code-B83kAmnS.js

@@ -1,196 +0,0 @@
-import { a as e, r as t, t as n } from "./meta-B8C51eyL.js";
-import { createContext as r, createElement as i, forwardRef as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
-var p = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), m = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), h = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), g = (e) => {
-	let t = h(e);
-	return t.charAt(0).toUpperCase() + t.slice(1);
-}, _ = {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 24,
-	height: 24,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round"
-}, v = (e) => {
-	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
-	return !1;
-}, y = r({}), b = () => s(y), x = a(({ color: e, size: t, strokeWidth: n, absoluteStrokeWidth: r, className: a = "", children: o, iconNode: s, ...c }, l) => {
-	let { size: u = 24, strokeWidth: d = 2, absoluteStrokeWidth: f = !1, color: m = "currentColor", className: h = "" } = b() ?? {}, g = r ?? f ? Number(n ?? d) * 24 / Number(t ?? u) : n ?? d;
-	return i("svg", {
-		ref: l,
-		..._,
-		width: t ?? u ?? _.width,
-		height: t ?? u ?? _.height,
-		stroke: e ?? m,
-		strokeWidth: g,
-		className: p("lucide", h, a),
-		...!o && !v(c) && { "aria-hidden": "true" },
-		...c
-	}, [...s.map(([e, t]) => i(e, t)), ...Array.isArray(o) ? o : [o]]);
-}), S = (e, t) => {
-	let n = a(({ className: n, ...r }, a) => i(x, {
-		ref: a,
-		iconNode: t,
-		className: p(`lucide-${m(g(e))}`, `lucide-${e}`, n),
-		...r
-	}));
-	return n.displayName = g(e), n;
-}, C = S("arrow-right", [["path", {
-	d: "M5 12h14",
-	key: "1ays0h"
-}], ["path", {
-	d: "m12 5 7 7-7 7",
-	key: "xquz4c"
-}]]), w = S("arrow-up-right", [["path", {
-	d: "M7 7h10v10",
-	key: "1tivn9"
-}], ["path", {
-	d: "M7 17 17 7",
-	key: "1vkiza"
-}]]), T = S("check", [["path", {
-	d: "M20 6 9 17l-5-5",
-	key: "1gmf2c"
-}]]), E = S("copy", [["rect", {
-	width: "14",
-	height: "14",
-	x: "8",
-	y: "8",
-	rx: "2",
-	ry: "2",
-	key: "17jyea"
-}], ["path", {
-	d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
-	key: "zix9uf"
-}]]);
-//#endregion
-//#region src/hooks/use-clipboard.ts
-function D({ timeout: e = 1500 } = {}) {
-	let [t, n] = u(!1), r = l(void 0);
-	return c(() => () => clearTimeout(r.current), []), {
-		copied: t,
-		copy: o((t) => {
-			navigator.clipboard.writeText(t).then(() => {
-				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
-			});
-		}, [e])
-	};
-}
-var O = {
-	block: "imf-ui-code-module-block",
-	copy: "imf-ui-code-module-copy",
-	icon: "imf-ui-code-module-icon",
-	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"
-}, k = /* @__PURE__ */ e({
-	Block: () => M,
-	Inline: () => A,
-	InlineLink: () => j
-});
-function A({ className: e, copyable: n = !1, children: r, ...i }) {
-	let { copied: a, copy: o } = D(), s = l(null), c = a ? T : E;
-	return /* @__PURE__ */ f("code", {
-		...i,
-		"data-imf-ui-component": "Code.Inline",
-		className: t(O.inline, e),
-		children: [
-			/* @__PURE__ */ d("span", {
-				ref: s,
-				children: r
-			}),
-			n && /* @__PURE__ */ d("span", { className: O.separator }),
-			n && /* @__PURE__ */ d("button", {
-				type: "button",
-				className: O.inlineCopy,
-				"data-copied": a || void 0,
-				"aria-label": a ? "Copied" : "Copy",
-				onClick: () => o(s.current?.textContent ?? ""),
-				children: /* @__PURE__ */ d(c, {
-					size: 12,
-					strokeWidth: 2,
-					"aria-hidden": !0
-				})
-			})
-		]
-	});
-}
-A.displayName = "Code.Inline";
-function j({ className: e, kind: n = "external", children: r, ...i }) {
-	let a = n === "external" ? w : C;
-	return /* @__PURE__ */ f("a", {
-		...n === "external" ? {
-			target: "_blank",
-			rel: "noreferrer"
-		} : {},
-		...i,
-		"data-imf-ui-component": "Code.InlineLink",
-		"data-kind": n,
-		className: t(O.inline, O.inlineLink, e),
-		children: [
-			r,
-			/* @__PURE__ */ d("span", { className: O.separator }),
-			/* @__PURE__ */ d("span", {
-				className: O.icon,
-				"aria-hidden": !0,
-				children: /* @__PURE__ */ d(a, {
-					size: 12,
-					strokeWidth: 2
-				})
-			})
-		]
-	});
-}
-j.displayName = "Code.InlineLink";
-function M({ className: e, language: n, hideCopy: r = !1, children: i, ...a }) {
-	let { copied: o, copy: s } = D(), c = l(null), u = o ? T : E;
-	return /* @__PURE__ */ f("div", {
-		"data-imf-ui-component": "Code.Block",
-		className: t(O.block, e),
-		children: [
-			n != null && /* @__PURE__ */ d("span", {
-				className: O.language,
-				children: n
-			}),
-			!r && /* @__PURE__ */ d("button", {
-				type: "button",
-				className: O.copy,
-				"data-copied": o || void 0,
-				"aria-label": o ? "Copied" : "Copy",
-				onClick: () => s(c.current?.textContent ?? ""),
-				children: /* @__PURE__ */ d(u, {
-					size: 12,
-					strokeWidth: 2,
-					"aria-hidden": !0
-				})
-			}),
-			/* @__PURE__ */ d("pre", {
-				...a,
-				className: O.pre,
-				children: /* @__PURE__ */ d("code", {
-					ref: c,
-					children: i
-				})
-			})
-		]
-	});
-}
-M.displayName = "Code.Block";
-//#endregion
-//#region src/components/code/code.meta.ts
-var N = {
-	name: "Code",
-	category: n.display,
-	status: "stable",
-	namespace: !0,
-	description: "Displays source code — Code.Inline for a fragment in running text, Code.Block for a fenced block with an optional language label and copy button. Also called a code snippet or code block.",
-	origin: "native"
-};
-//#endregion
-export { k as a, T as c, S as d, j as i, w as l, M as n, D as o, A as r, E as s, N as t, C as u };

package/dist/meta-B8C51eyL.js

@@ -1,74 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = (t, n) => {
-	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
-		enumerable: !0
-	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-};
-//#endregion
-//#region node_modules/clsx/dist/clsx.mjs
-function r(e) {
-	var t, n, i = "";
-	if (typeof e == "string" || typeof e == "number") i += e;
-	else if (typeof e == "object") if (Array.isArray(e)) {
-		var a = e.length;
-		for (t = 0; t < a; t++) e[t] && (n = r(e[t])) && (i && (i += " "), i += n);
-	} else for (n in e) e[n] && (i && (i += " "), i += n);
-	return i;
-}
-function i() {
-	for (var e, t, n = 0, i = "", a = arguments.length; n < a; n++) (e = arguments[n]) && (t = r(e)) && (i && (i += " "), i += t);
-	return i;
-}
-//#endregion
-//#region node_modules/class-variance-authority/dist/index.mjs
-var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e, t) => (n) => {
-	if (t?.variants == null) return o(e, n?.class, n?.className);
-	let { variants: r, defaultVariants: i } = t, s = Object.keys(r).map((e) => {
-		let t = n?.[e], o = i?.[e];
-		if (t === null) return null;
-		let s = a(t) || a(o);
-		return r[e][s];
-	}), c = n && Object.entries(n).reduce((e, t) => {
-		let [n, r] = t;
-		return r === void 0 || (e[n] = r), e;
-	}, {});
-	return o(e, s, t?.compoundVariants?.reduce((e, t) => {
-		let { class: n, className: r, ...a } = t;
-		return Object.entries(a).every((e) => {
-			let [t, n] = e;
-			return Array.isArray(n) ? n.includes({
-				...i,
-				...c
-			}[t]) : {
-				...i,
-				...c
-			}[t] === n;
-		}) ? [
-			...e,
-			n,
-			r
-		] : e;
-	}, []), n?.class, n?.className);
-}, c = {
-	buttons: {
-		id: "buttons",
-		label: "Buttons"
-	},
-	inputs: {
-		id: "inputs",
-		label: "Inputs"
-	},
-	layout: {
-		id: "layout",
-		label: "Layout"
-	},
-	display: {
-		id: "display",
-		label: "Display"
-	}
-};
-//#endregion
-export { n as a, t as i, s as n, o as r, c as t };