@imfusion/web-ui 0.11.1-dev.45.gf7b49f57 → 0.11.1-dev.48.g0fcb0d30

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

@@ -8,15 +8,35 @@ consumed by document metadata or manifests, with a build step that serves the fi
 For the library's favicon set and social sharing image, read `BrandAssets.mdx` through the packaged user-guide route in
 `imf-web-ui`.
 
-## Photographs: WebP
+## Photographs: AVIF and WebP
 
-Convert photographs to WebP before adding them:
+Encode photographs as AVIF and WebP at 800 and 1600px wide. A source narrower than a width skips it, and `srcSet` lists only
+the widths that exist:
 
 ```sh
-magick source.png -resize 2000x -quality 80 -define webp:method=6 src/assets/name.webp
+for w in 800 1600; do
+  magick source.png -resize "${w}x>" -quality 55 src/assets/name-$w.avif
+  magick source.png -resize "${w}x>" -quality 80 -define webp:method=6 src/assets/name-$w.webp
+done
 ```
 
-Keep the long edge at 2000px or less. WebP is supported by the browser floor.
+Render them through `<picture>`: an AVIF `<source>`, then a WebP `<source>`, each with `srcSet` and `sizes`, then an `<img>`
+fallback. The browser takes the first format it supports at the width that fits. Both formats are supported by the browser
+floor.
+
+```tsx
+<picture>
+  <source type="image/avif" srcSet={`${name800Avif} 800w, ${name1600Avif} 1600w`} sizes="(max-width: 40rem) 100vw, 40rem" />
+  <source type="image/webp" srcSet={`${name800Webp} 800w, ${name1600Webp} 1600w`} sizes="(max-width: 40rem) 100vw, 40rem" />
+  <img src={name800Webp} width={800} height={400} alt="…" />
+</picture>
+```
+
+## Loading
+
+Every `<img>` carries `width` and `height` in the source's aspect ratio, so the browser reserves its space before it loads.
+An image below the fold gets `loading="lazy"` and `decoding="async"`. The one image that is the page's largest paint gets
+`fetchpriority="high"` and loads eagerly.
 
 ## Other formats
 

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

@@ -53,3 +53,13 @@ Keep a component's stylesheet, tests, and local types beside the component. A co
 be a layout or dumb component instead.
 
 A route-local component keeps its stylesheet and tests in the route's `-` folder beside it.
+
+## Semantic elements
+
+Inside `AppShell`, the shell's parts render the landmarks: `AppShell.Header` a `<header>`, `AppShell.Navbar` a `<nav>`,
+`AppShell.Aside` an `<aside>`, `AppShell.Main` the page's one `<main>`, and `AppShell.Footer` a `<footer>`. A page puts its
+content inside those parts.
+
+Custom markup uses the element for its meaning: `<section>` and `<article>` for content groups, `<time dateTime>` for a date,
+`Button` for an action, and the router's `Link` for a destination. A page has one `Typo.H1`, and heading levels descend
+without skipping.

package/dist/tabs-CLeLjFNy.js

@@ -1,423 +0,0 @@
-import { a as e, o as t, s as n } from "./utils-RZJAXfcf.js";
-import { _M as r, mh as i } from "./icons-vc1WZCxX.js";
-import { t as a } from "./meta-V_KyLeGn.js";
-import { cva as o, cx as s } from "class-variance-authority";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Children as u, createContext as d, useCallback as f, useContext as p } from "react";
-import { Toggle as ee } from "@base-ui/react/toggle";
-import { ToggleGroup as te } from "@base-ui/react/toggle-group";
-import { Switch as m } from "@base-ui/react/switch";
-import { Tabs as h } from "@base-ui/react/tabs";
-var g = {
-	flat: "imf-ui-kbd-module-flat",
-	icon: "imf-ui-kbd-module-icon",
-	primary: "imf-ui-kbd-module-primary",
-	root: "imf-ui-kbd-module-root"
-}, _ = o(g.root, { variants: { variant: {
-	default: null,
-	primary: g.primary,
-	flat: g.flat
-} } });
-function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
-	return /* @__PURE__ */ l("kbd", {
-		...a,
-		"data-imf-ui-component": "Kbd",
-		className: _({
-			variant: e,
-			className: a.className
-		}),
-		children: [t && /* @__PURE__ */ c(r, {
-			glyph: i,
-			strokeWidth: 2,
-			"aria-hidden": !0,
-			className: g.icon
-		}), n]
-	});
-}
-//#endregion
-//#region src/components/kbd/kbd.meta.ts
-var y = {
-	name: "Kbd",
-	category: a.display,
-	status: "experimental",
-	description: "Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.",
-	origin: "native",
-	internalDependencies: ["Icon"]
-}, ne = {
-	ctrl: "Control",
-	control: "Control",
-	cmd: "Meta",
-	"⌘": "Meta",
-	meta: "Meta",
-	opt: "Alt",
-	option: "Alt",
-	"⌥": "Alt",
-	alt: "Alt",
-	shift: "Shift",
-	"⇧": "Shift",
-	esc: "Escape",
-	escape: "Escape"
-};
-function b(e) {
-	let t = e.trim().split(/\s+/).filter(Boolean);
-	if (t.length !== 0) return t.map((e) => ne[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
-}
-//#endregion
-//#region src/components/toggle-group/toggle-group-size.ts
-var x = d("md"), S = {
-	root: "imf-ui-toggle-module-root",
-	shortcut: "imf-ui-toggle-module-shortcut",
-	sizeSm: "imf-ui-toggle-module-sizeSm"
-}, re = o(S.root, { variants: { size: {
-	sm: S.sizeSm,
-	md: null
-} } }), C = 2;
-function ie(e) {
-	let t = 0;
-	return u.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += C);
-	}), t;
-}
-function w({ style: n, shortcut: r, size: i, children: a, ...o }) {
-	let s = p(x), u = {
-		"--glyph-count": ie(a),
-		"--max-glyphs": C
-	};
-	return /* @__PURE__ */ l(ee, {
-		"aria-keyshortcuts": r ? b(r) : void 0,
-		...o,
-		"data-imf-ui-component": "Toggle",
-		style: (e) => ({
-			...u,
-			...t(n, e)
-		}),
-		className: (t) => re({
-			size: i ?? s,
-			className: e(o.className, t)
-		}),
-		children: [a, r && /* @__PURE__ */ c(v, {
-			variant: "flat",
-			className: S.shortcut,
-			"aria-hidden": !0,
-			children: r
-		})]
-	});
-}
-var T = {
-	root: "imf-ui-toggle-group-module-root",
-	sizeSm: "imf-ui-toggle-group-module-sizeSm"
-}, E = o(T.root, { variants: { size: {
-	sm: T.sizeSm,
-	md: null
-} } });
-function D({ size: t = "md", ...n }) {
-	return /* @__PURE__ */ c(x.Provider, {
-		value: t ?? "md",
-		children: /* @__PURE__ */ c(te, {
-			...n,
-			"data-imf-ui-component": "ToggleGroup",
-			className: (r) => E({
-				size: t,
-				className: e(n.className, r)
-			})
-		})
-	});
-}
-var O = {
-	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"
-}, k = o(O.root, { variants: {
-	gap: {
-		0: O.gap0,
-		1: O.gap1,
-		2: O.gap2,
-		3: O.gap3,
-		4: O.gap4,
-		5: O.gap5,
-		6: O.gap6,
-		7: O.gap7,
-		8: O.gap8,
-		9: O.gap9,
-		10: O.gap10
-	},
-	align: {
-		start: O.alignStart,
-		center: O.alignCenter,
-		end: O.alignEnd,
-		stretch: O.alignStretch
-	},
-	justify: {
-		start: O.justifyStart,
-		center: O.justifyCenter,
-		end: O.justifyEnd,
-		between: O.justifyBetween,
-		around: O.justifyAround,
-		evenly: O.justifyEvenly
-	}
-} });
-function ae({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
-	return /* @__PURE__ */ c("div", {
-		...r,
-		"data-imf-ui-component": "Stack",
-		className: k({
-			gap: e,
-			align: t,
-			justify: n,
-			className: r.className
-		})
-	});
-}
-var A = {
-	root: "imf-ui-switch-module-root",
-	thumb: "imf-ui-switch-module-thumb"
-}, oe = /* @__PURE__ */ n({
-	Root: () => j,
-	Thumb: () => M
-}), se = o(A.root), ce = o(A.thumb);
-function j(t) {
-	return /* @__PURE__ */ c(m.Root, {
-		...t,
-		"data-imf-ui-component": "Switch.Root",
-		className: (n) => se({ className: e(t.className, n) })
-	});
-}
-j.displayName = "Switch.Root";
-function M(t) {
-	return /* @__PURE__ */ c(m.Thumb, {
-		...t,
-		"data-imf-ui-component": "Switch.Thumb",
-		className: (n) => ce({ className: e(t.className, n) })
-	});
-}
-M.displayName = "Switch.Thumb";
-var N = {
-	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"
-}, P = o(N.root, { variants: {
-	gap: {
-		1: N.gap1,
-		2: N.gap2,
-		3: N.gap3,
-		4: N.gap4,
-		5: N.gap5,
-		6: N.gap6,
-		7: N.gap7,
-		8: N.gap8,
-		9: N.gap9,
-		10: N.gap10
-	},
-	align: {
-		start: N.alignStart,
-		center: N.alignCenter,
-		end: N.alignEnd,
-		stretch: N.alignStretch
-	},
-	justify: {
-		start: N.justifyStart,
-		center: N.justifyCenter,
-		end: N.justifyEnd,
-		between: N.justifyBetween,
-		around: N.justifyAround,
-		evenly: N.justifyEvenly
-	},
-	wrap: {
-		true: N.wrap,
-		false: null
-	}
-} });
-function F({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...i }) {
-	return /* @__PURE__ */ c("div", {
-		...i,
-		"data-imf-ui-component": "Row",
-		className: P({
-			gap: e,
-			align: t,
-			justify: n,
-			wrap: r,
-			className: i.className
-		})
-	});
-}
-var I = {
-	item: "imf-ui-tabs-underline-module-item",
-	rule: "imf-ui-tabs-underline-module-rule"
-}, L = o(I.rule), R = o(I.item), z = {
-	indicator: "imf-ui-tabs-module-indicator",
-	indicatorUnderline: "imf-ui-tabs-module-indicatorUnderline",
-	list: "imf-ui-tabs-module-list",
-	listFill: "imf-ui-tabs-module-listFill",
-	listUnderline: "imf-ui-tabs-module-listUnderline",
-	panel: "imf-ui-tabs-module-panel",
-	panelUnderline: "imf-ui-tabs-module-panelUnderline",
-	panelViewport: "imf-ui-tabs-module-panelViewport",
-	panelViewportUnderline: "imf-ui-tabs-module-panelViewportUnderline",
-	root: "imf-ui-tabs-module-root",
-	tab: "imf-ui-tabs-module-tab",
-	tabUnderline: "imf-ui-tabs-module-tabUnderline"
-}, B = /* @__PURE__ */ n({
-	Indicator: () => Z,
-	List: () => Y,
-	Panel: () => $,
-	PanelViewport: () => Q,
-	Root: () => J,
-	Tab: () => X
-}), V = o(z.list, { variants: {
-	fill: {
-		true: z.listFill,
-		false: null
-	},
-	appearance: {
-		boxed: null,
-		underline: s(z.listUnderline, L())
-	}
-} }), H = o(z.root), U = o(null, { variants: { appearance: {
-	boxed: z.tab,
-	underline: s(z.tabUnderline, R())
-} } }), W = o(null, { variants: { appearance: {
-	boxed: z.indicator,
-	underline: z.indicatorUnderline
-} } }), G = o(z.panelViewport, { variants: { appearance: {
-	boxed: null,
-	underline: z.panelViewportUnderline
-} } }), le = o(z.panel, { variants: { appearance: {
-	boxed: null,
-	underline: z.panelUnderline
-} } }), K = d("boxed");
-function q(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-function ue(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 J({ appearance: t = "boxed", ...n }) {
-	let r = n.orientation === "vertical" ? "boxed" : t;
-	return /* @__PURE__ */ c(K, {
-		value: r,
-		children: /* @__PURE__ */ c(h.Root, {
-			...n,
-			"data-imf-ui-component": "Tabs.Root",
-			className: (t) => H({ className: e(n.className, t) })
-		})
-	});
-}
-J.displayName = "Tabs.Root";
-function Y({ fill: t = !1, ref: n, ...r }) {
-	let i = p(K), a = f((e) => {
-		if (!e) return;
-		q(n, e);
-		let t = ue(e);
-		return () => {
-			t(), q(n, null);
-		};
-	}, [n]);
-	return /* @__PURE__ */ c(h.List, {
-		...r,
-		ref: a,
-		"data-imf-ui-component": "Tabs.List",
-		className: (n) => V({
-			fill: t,
-			appearance: i,
-			className: e(r.className, n)
-		})
-	});
-}
-Y.displayName = "Tabs.List";
-function X(t) {
-	let n = p(K);
-	return /* @__PURE__ */ c(h.Tab, {
-		...t,
-		"data-imf-ui-component": "Tabs.Tab",
-		className: (r) => U({
-			appearance: n,
-			className: e(t.className, r)
-		})
-	});
-}
-X.displayName = "Tabs.Tab";
-function Z(t) {
-	let n = p(K);
-	return /* @__PURE__ */ c(h.Indicator, {
-		...t,
-		"data-imf-ui-component": "Tabs.Indicator",
-		className: (r) => W({
-			appearance: n,
-			className: e(t.className, r)
-		})
-	});
-}
-Z.displayName = "Tabs.Indicator";
-function Q(e) {
-	let t = p(K);
-	return /* @__PURE__ */ c("div", {
-		...e,
-		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: G({
-			appearance: t,
-			className: e.className
-		})
-	});
-}
-Q.displayName = "Tabs.PanelViewport";
-function $(t) {
-	let n = p(K);
-	return /* @__PURE__ */ c(h.Panel, {
-		...t,
-		"data-imf-ui-component": "Tabs.Panel",
-		className: (r) => le({
-			appearance: n,
-			className: e(t.className, r)
-		})
-	});
-}
-$.displayName = "Tabs.Panel";
-//#endregion
-export { b as _, J as a, R as c, j as d, M as f, w as g, D as h, Q as i, L as l, ae as m, Y as n, X as o, oe as p, $ as r, B as s, Z as t, F as u, y as v, v as y };