@imfusion/web-ui 0.11.1-dev.2.g8a30ca7e → 0.11.1-dev.22.gb4cb1d84

package/src/llms/icon-catalog.gen.json

@@ -7571,6 +7571,30 @@
     "origin": "iconoir",
     "file": "regular/laptop-warning.svg"
   },
+  {
+    "name": "LayoutAuto",
+    "category": "Layout",
+    "tags": ["layout", "auto", "masonry", "viewports", "tiles", "grid"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-auto.svg"
+  },
+  {
+    "name": "LayoutFocusPlusRows",
+    "category": "Layout",
+    "tags": ["layout", "focus", "rows", "main viewport", "viewports", "split"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-focus-plus-rows.svg"
+  },
+  {
+    "name": "LayoutFocusPlusStack",
+    "category": "Layout",
+    "tags": ["layout", "focus", "stack", "main viewport", "sidebar", "viewports"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-focus-plus-stack.svg"
+  },
   {
     "name": "LayoutLeft",
     "category": "Layout",
@@ -7587,6 +7611,14 @@
     "origin": "iconoir",
     "file": "regular/layout-right.svg"
   },
+  {
+    "name": "LayoutRows",
+    "category": "Layout",
+    "tags": ["layout", "rows", "viewports", "grid", "2x2", "tiles"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-rows.svg"
+  },
   {
     "name": "Leaderboard",
     "category": "Activities",

package/src/llms/llms.gen.txt

@@ -19,6 +19,12 @@ The signed-in person's account row: the avatar in a lead column, the name or ema
 Application layout shell for a header, sidebars, footer, and scrolling main area. Also called an app layout or dashboard shell; sizing is CSS-driven and sidebars can become sliding panels on small screens.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .app-shell (jq: jq '.app-shell' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Autocomplete
+- category: Inputs, status: experimental
+Text input that suggests options as you type, keeping free text. Also called a typeahead or search suggestions. Use Combobox when the value must come from the list.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .autocomplete (jq: jq '.autocomplete' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/autocomplete.md
+
 ## Avatar
 - category: Display, status: experimental
 Round badge that stands for a person, showing their photo, their initials, or a person glyph. Also called a profile picture or user badge; for a signed-in account row with a name, use AccountCard.
@@ -78,6 +84,12 @@ Show-and-hide region for secondary content such as FAQs, settings, or details. A
 Light, System, and Dark segments that set and remember the page's color scheme. Also called an appearance or theme switch; built on ToggleGroup, which is the choice for any other segmented selection.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .color-scheme-toggle (jq: jq '.color-scheme-toggle' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Combobox
+- category: Inputs, status: experimental
+Text input with a filterable list of options, for choosing one or several from a long list. Also called a searchable select, typeahead, or multi-select. Use Select for short lists and Autocomplete when free text is allowed.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .combobox (jq: jq '.combobox' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/combobox.md
+
 ## CopyButton
 - category: Buttons, status: stable
 Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.

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

@@ -66,9 +66,8 @@ next action is the add from that topic. A Vite config that reads tsconfig `paths
 `vite-tsconfig-paths`) is Broken: it loads the React types package as React once Web UI comes from the registry. The fix is
 to drop it and give the `#/` alias through `imports` in `package.json`. A major or minor mismatch between the project and Web
 UI on a package listed under Aligned runtime packages in the `tooling` topic is a Deviation. Report both versions, with
-`npm install <package>@<Web UI's version>` as the fix. A route-local file that the inline rule in the `project-structure`
-topic says belongs in its route file is a Deviation, and so is a route file over 250 lines that inlines parts the rule would
-keep in its `-` folder. Report the line counts, with the move as the fix.
+`npm install <package>@<Web UI's version>` as the fix. A route file that holds several views inline is a Deviation, and so is
+a route whose only view sits alone in its `-` folder. Name the views, with the move as the fix.
 
 ## Topics
 

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

@@ -37,9 +37,9 @@ the route file's name: `route.tsx` gets `-route/`, `products.tsx` gets `-product
 folders with a leading `-` when it builds the route tree, so the folder never becomes a route. The folder holds the route's
 views with their props types, hooks, `.module.css` files, and tests.
 
-A part used by one route file is inlined into it when it is a component under 50 lines, calls no `use*` hook, has no
-stylesheet or test of its own, and leaves that route file under 250 lines. Every other single-route part goes in the `-`
-folder. The thresholds keep tiny wrappers out of their own files without letting a route file grow into a page of views.
+The route component is the page. When the page is a single view, such as a form, that view is the route component and stays
+in the route file, hooks included. When the page composes several views, each view goes in the `-` folder and the route
+component wires them together. Small presentational helpers stay inline.
 
 `partials/` holds only parts that more than one route uses.
 

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

@@ -54,6 +54,19 @@ hook, not a state flag.
 }
 ```
 
+Your own components follow the same seam. A container that changes a child sets a custom property; the child reads it with
+its own default as the fallback, so it works with or without the container:
+
+```css
+.panel {
+  --panel-row-gap: var(--imf-ui-size-2);
+}
+
+.row {
+  padding-block: var(--panel-row-gap, var(--imf-ui-size-3));
+}
+```
+
 ## Spacing
 
 Web UI components have no outer margin. The parent sets the distance between its children: `Stack` and `Row` gaps in UI,

package/dist/resolve-state-props-DQf9WiGv.js

@@ -1,22 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (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 src/utils/resolve-state-props.ts
-function n(e, t) {
-	return e instanceof Function ? e(t) : e;
-}
-function r(e, t) {
-	return n(e, t);
-}
-function i(e, t) {
-	return n(e, t);
-}
-//#endregion
-export { i as n, t as r, r as t };