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

package/dist/tabs-EMQSqOk5.js

@@ -0,0 +1,305 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t } from "./utils-J6vbjIt1.js";
+import { cva as n, cx as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as a, useCallback as o, useContext as s } from "react";
+import { Switch as c } from "@base-ui/react/switch";
+import { Tabs as l } from "@base-ui/react/tabs";
+var u = {
+	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 = n(u.root, { variants: {
+	gap: {
+		0: u.gap0,
+		1: u.gap1,
+		2: u.gap2,
+		3: u.gap3,
+		4: u.gap4,
+		5: u.gap5,
+		6: u.gap6,
+		7: u.gap7,
+		8: u.gap8,
+		9: u.gap9,
+		10: u.gap10
+	},
+	align: {
+		start: u.alignStart,
+		center: u.alignCenter,
+		end: u.alignEnd,
+		stretch: u.alignStretch
+	},
+	justify: {
+		start: u.justifyStart,
+		center: u.justifyCenter,
+		end: u.justifyEnd,
+		between: u.justifyBetween,
+		around: u.justifyAround,
+		evenly: u.justifyEvenly
+	}
+} });
+function f({ 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 p = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, m = /* @__PURE__ */ e({
+	Root: () => _,
+	Thumb: () => v
+}), h = n(p.root), g = n(p.thumb);
+function _(e) {
+	return /* @__PURE__ */ i(c.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (n) => h({ className: t(e.className, n) })
+	});
+}
+_.displayName = "Switch.Root";
+function v(e) {
+	return /* @__PURE__ */ i(c.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (n) => g({ className: t(e.className, n) })
+	});
+}
+v.displayName = "Switch.Thumb";
+var y = {
+	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"
+}, b = n(y.root, { variants: {
+	gap: {
+		1: y.gap1,
+		2: y.gap2,
+		3: y.gap3,
+		4: y.gap4,
+		5: y.gap5,
+		6: y.gap6,
+		7: y.gap7,
+		8: y.gap8,
+		9: y.gap9,
+		10: y.gap10
+	},
+	align: {
+		start: y.alignStart,
+		center: y.alignCenter,
+		end: y.alignEnd,
+		stretch: y.alignStretch
+	},
+	justify: {
+		start: y.justifyStart,
+		center: y.justifyCenter,
+		end: y.justifyEnd,
+		between: y.justifyBetween,
+		around: y.justifyAround,
+		evenly: y.justifyEvenly
+	},
+	wrap: {
+		true: y.wrap,
+		false: null
+	}
+} });
+function x({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...a }) {
+	return /* @__PURE__ */ i("div", {
+		...a,
+		"data-imf-ui-component": "Row",
+		className: b({
+			gap: e,
+			align: t,
+			justify: n,
+			wrap: r,
+			className: a.className
+		})
+	});
+}
+var S = {
+	item: "imf-ui-tabs-underline-module-item",
+	rule: "imf-ui-tabs-underline-module-rule"
+}, C = n(S.rule), w = n(S.item), T = {
+	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"
+}, E = /* @__PURE__ */ e({
+	Indicator: () => z,
+	List: () => L,
+	Panel: () => V,
+	PanelViewport: () => B,
+	Root: () => I,
+	Tab: () => R
+}), D = n(T.list, { variants: {
+	fill: {
+		true: T.listFill,
+		false: null
+	},
+	appearance: {
+		boxed: null,
+		underline: r(T.listUnderline, C())
+	}
+} }), O = n(T.root), k = n(null, { variants: { appearance: {
+	boxed: T.tab,
+	underline: r(T.tabUnderline, w())
+} } }), A = n(null, { variants: { appearance: {
+	boxed: T.indicator,
+	underline: T.indicatorUnderline
+} } }), j = n(T.panelViewport, { variants: { appearance: {
+	boxed: null,
+	underline: T.panelViewportUnderline
+} } }), M = n(T.panel, { variants: { appearance: {
+	boxed: null,
+	underline: T.panelUnderline
+} } }), N = a("boxed");
+function P(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function F(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 I({ appearance: e = "boxed", ...n }) {
+	let r = n.orientation === "vertical" ? "boxed" : e;
+	return /* @__PURE__ */ i(N, {
+		value: r,
+		children: /* @__PURE__ */ i(l.Root, {
+			...n,
+			"data-imf-ui-component": "Tabs.Root",
+			className: (e) => O({ className: t(n.className, e) })
+		})
+	});
+}
+I.displayName = "Tabs.Root";
+function L({ fill: e = !1, ref: n, ...r }) {
+	let a = s(N), c = o((e) => {
+		if (!e) return;
+		P(n, e);
+		let t = F(e);
+		return () => {
+			t(), P(n, null);
+		};
+	}, [n]);
+	return /* @__PURE__ */ i(l.List, {
+		...r,
+		ref: c,
+		"data-imf-ui-component": "Tabs.List",
+		className: (n) => D({
+			fill: e,
+			appearance: a,
+			className: t(r.className, n)
+		})
+	});
+}
+L.displayName = "Tabs.List";
+function R(e) {
+	let n = s(N);
+	return /* @__PURE__ */ i(l.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (r) => k({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+R.displayName = "Tabs.Tab";
+function z(e) {
+	let n = s(N);
+	return /* @__PURE__ */ i(l.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (r) => A({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+z.displayName = "Tabs.Indicator";
+function B(e) {
+	let t = s(N);
+	return /* @__PURE__ */ i("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: j({
+			appearance: t,
+			className: e.className
+		})
+	});
+}
+B.displayName = "Tabs.PanelViewport";
+function V(e) {
+	let n = s(N);
+	return /* @__PURE__ */ i(l.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (r) => M({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+V.displayName = "Tabs.Panel";
+//#endregion
+export { I as a, w as c, _ as d, v as f, B as i, C as l, f as m, L as n, R as o, m as p, V as r, E as s, z as t, x as u };

package/dist/toggle-group-Bhb3qicp.js

@@ -0,0 +1,31 @@
+import { t as e } from "./meta-V_KyLeGn.js";
+import "./toggle-group-eGr6_hgQ.js";
+//#region src/components/toggle/toggle.meta.ts
+var t = {
+	name: "Toggle",
+	category: e.inputs,
+	status: "experimental",
+	description: "Two-state button for a pressed or unpressed option. Compose several in ToggleGroup for a segmented control.",
+	origin: "adapted",
+	internalDependencies: ["Kbd"],
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle",
+		llmDocLink: "https://base-ui.com/react/components/toggle.md"
+	}
+}, n = {
+	name: "ToggleGroup",
+	category: e.inputs,
+	status: "experimental",
+	description: "Group of connected Toggle buttons that share a selection. Also called a segmented control; set `multiple` for more than one active option.",
+	origin: "adapted",
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle-group",
+		llmDocLink: "https://base-ui.com/react/components/toggle-group.md"
+	}
+};
+//#endregion
+export { t as n, n as t };

package/dist/toggle-group-eGr6_hgQ.js

@@ -0,0 +1,125 @@
+import { _M as e, mh as t } from "./icons-vc1WZCxX.js";
+import { t as n } from "./meta-V_KyLeGn.js";
+import { a as r, o as i } from "./utils-J6vbjIt1.js";
+import { cva as a } from "class-variance-authority";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Children as c, createContext as l, useContext as u } from "react";
+import { Toggle as d } from "@base-ui/react/toggle";
+import { ToggleGroup as f } from "@base-ui/react/toggle-group";
+var p = {
+	flat: "imf-ui-kbd-module-flat",
+	icon: "imf-ui-kbd-module-icon",
+	primary: "imf-ui-kbd-module-primary",
+	root: "imf-ui-kbd-module-root"
+}, m = a(p.root, { variants: { variant: {
+	default: null,
+	primary: p.primary,
+	flat: p.flat
+} } });
+function h({ variant: n = "default", icon: r = !1, children: i, ...a }) {
+	return /* @__PURE__ */ s("kbd", {
+		...a,
+		"data-imf-ui-component": "Kbd",
+		className: m({
+			variant: n,
+			className: a.className
+		}),
+		children: [r && /* @__PURE__ */ o(e, {
+			glyph: t,
+			strokeWidth: 2,
+			"aria-hidden": !0,
+			className: p.icon
+		}), i]
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.meta.ts
+var g = {
+	name: "Kbd",
+	category: n.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"]
+}, _ = {
+	ctrl: "Control",
+	control: "Control",
+	cmd: "Meta",
+	"⌘": "Meta",
+	meta: "Meta",
+	opt: "Alt",
+	option: "Alt",
+	"⌥": "Alt",
+	alt: "Alt",
+	shift: "Shift",
+	"⇧": "Shift",
+	esc: "Escape",
+	escape: "Escape"
+};
+function v(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	if (t.length !== 0) return t.map((e) => _[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group-size.ts
+var y = l("md"), b = {
+	root: "imf-ui-toggle-module-root",
+	shortcut: "imf-ui-toggle-module-shortcut",
+	sizeSm: "imf-ui-toggle-module-sizeSm"
+}, x = a(b.root, { variants: { size: {
+	sm: b.sizeSm,
+	md: null
+} } }), S = 2;
+function C(e) {
+	let t = 0;
+	return c.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += S);
+	}), t;
+}
+function w({ style: e, shortcut: t, size: n, children: a, ...c }) {
+	let l = u(y), f = {
+		"--glyph-count": C(a),
+		"--max-glyphs": S
+	};
+	return /* @__PURE__ */ s(d, {
+		"aria-keyshortcuts": t ? v(t) : void 0,
+		...c,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...f,
+			...i(e, t)
+		}),
+		className: (e) => x({
+			size: n ?? l,
+			className: r(c.className, e)
+		}),
+		children: [a, t && /* @__PURE__ */ o(h, {
+			variant: "flat",
+			className: b.shortcut,
+			"aria-hidden": !0,
+			children: t
+		})]
+	});
+}
+var T = {
+	root: "imf-ui-toggle-group-module-root",
+	sizeSm: "imf-ui-toggle-group-module-sizeSm"
+}, E = a(T.root, { variants: { size: {
+	sm: T.sizeSm,
+	md: null
+} } });
+function D({ size: e = "md", ...t }) {
+	return /* @__PURE__ */ o(y.Provider, {
+		value: e ?? "md",
+		children: /* @__PURE__ */ o(f, {
+			...t,
+			"data-imf-ui-component": "ToggleGroup",
+			className: (n) => E({
+				size: e,
+				className: r(t.className, n)
+			})
+		})
+	});
+}
+//#endregion
+export { h as a, g as i, w as n, v as r, D as t };

package/dist/{utils-RZJAXfcf.js → utils-J6vbjIt1.js}

@@ -1,28 +1,18 @@
 import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useState as o } from "react";
-//#region \0rolldown/runtime.js
-var s = Object.defineProperty, c = (e, t) => {
-	let n = {};
-	for (var r in e) s(n, r, {
-		get: e[r],
-		enumerable: !0
-	});
-	return t || s(n, Symbol.toStringTag, { value: "Module" }), n;
-};
-//#endregion
 //#region src/utils/resolve-state-props.ts
-function l(e, t) {
+function s(e, t) {
 	return e instanceof Function ? e(t) : e;
 }
-function u(e, t) {
-	return l(e, t);
+function c(e, t) {
+	return s(e, t);
 }
-function d(e, t) {
-	return l(e, t);
+function l(e, t) {
+	return s(e, t);
 }
 //#endregion
 //#region src/utils/item-parts.tsx
-var f = e(null);
-function p() {
+var u = e(null);
+function d() {
 	let e = i(), t = i(), [n, r] = o(!1), [s, c] = o(!1);
 	return {
 		context: a(() => ({
@@ -37,13 +27,13 @@ function p() {
 		}
 	};
 }
-function m(e) {
-	let t = n(f), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
+function f(e) {
+	let t = n(u), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
 	return r(() => (i?.(!0), () => i?.(!1)), [i]), e === "label" ? t?.labelId : t?.descriptionId;
 }
 //#endregion
 //#region src/utils/stable-popup-height.ts
-function h({ ref: e }) {
+function p({ ref: e }) {
 	let [n, r] = o();
 	return {
 		ref: t((t) => {
@@ -53,4 +43,4 @@ function h({ ref: e }) {
 	};
 }
 //#endregion
-export { u as a, p as i, f as n, d as o, m as r, c as s, h as t };
+export { c as a, d as i, u as n, l as o, f as r, p as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.45.gf7b49f57",
+  "version": "0.11.1-dev.48.g0fcb0d30",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -14160,5 +14160,112 @@
       ]
     },
     "subComponents": []
+  },
+  "layout-mode": {
+    "root": {
+      "name": "LayoutMode",
+      "description": "LayoutMode - picks the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows.\n`compact` is a row of icon toggles; `labeled` stacks them vertically with each mode's name beside its icon.\n\nMust render inside `ImFusionReady`, within an `ImFusionProvider`.",
+      "props": [
+        {
+          "name": "autoLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that lets the viewer choose between Rows and Focus + stack."
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ToggleGroupState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the toggle group should ignore user interaction."
+        },
+        {
+          "name": "focusPlusRowsLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that shows one large view with the others in rows beside it."
+        },
+        {
+          "name": "focusPlusStackLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that shows one large view with the others stacked beside it."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Accessible name of the group."
+        },
+        {
+          "name": "loopFocus",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "Orientation",
+          "defaultValue": "horizontal",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "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, ToggleGroupState>",
+          "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": "rowsLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that arranges the views in up to two rows."
+        },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"compact\" | \"labeled\" | null",
+          "defaultValue": null,
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": []
   }
 }

package/src/llms/llms.gen.txt

@@ -157,6 +157,12 @@ Single-line text input for form data entry. Also called a text field; it support
 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.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .kbd (jq: jq '.kbd' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## LayoutMode
+- category: Inputs, status: experimental
+Picker bound to the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows, as a compact icon row or a labeled vertical list. Also called a layout or view arrangement switch; for a segmented choice not tied to the SDK, use ToggleGroup.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .layout-mode (jq: jq '.layout-mode' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Logo
 - category: Display, status: stable
 Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.

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

@@ -46,6 +46,7 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Grouping
 - [ ] One file or a folder
 - [ ] Colocation
+- [ ] Semantic elements
 
 ## TypeScript & code style — `typescript`
 
@@ -127,7 +128,8 @@ sections one to one — change a topic's sections and this file follows in the s
 ## Assets — `assets`
 
 - [ ] Importing
-- [ ] Photographs: WebP
+- [ ] Photographs: AVIF and WebP
+- [ ] Loading
 - [ ] Other formats
 - [ ] Scope