@imfusion/web-ui 0.11.1-dev.1.g5777bd0b → 0.11.1-dev.16.g726f3414

package/CHANGELOG.md

@@ -2,11 +2,53 @@
 
 ## [Unreleased]
 
+### Added
+
+- `minWidth` and the `BreakpointName` type are exported, so `useMediaQuery(minWidth("md"))` works as the `styling` topic
+  shows. — Nikolaus Brunner <brunner@imfusion.com>
+- `@imfusion/web-ui/icons` adds four viewport layout icons in the Layout category: `LayoutAuto`, `LayoutRows`,
+  `LayoutFocusPlusStack`, and `LayoutFocusPlusRows`. [Iconography](src/icons/iconography.stories.tsx#Iconography)
+  — Stephan Wenninger <wenninger@imfusion.com>
+- `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
+  [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
+
 ### Changed
 
+- `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Callout.Root` defaults to `maxWidth="lg"`, keeps a minimum width of 15rem, and spaces its title, description, and list
+  items more evenly. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
   - `imf-web-ui-conventions` exempts React components from the explicit return type on exported functions.
+  - The `project-structure` topic keeps a route's only view, such as a form, in the route file and moves views to the `-`
+    folder only when the page composes several. `imf-web-ui-audit` reports by views, not line counts.
   - The `imf-web-ui-conventions` audit checklist names the assets box "Photographs: WebP", like its topic heading.
+  - `web-ui-dev-new-component`, `web-ui-dev-update-component`, and `web-ui-dev-design-component` draft on the shared
+    Web UI Component Drafts canvas: a block per component on its Storybook group's page, one row per fidelity rung.
+  - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas
+    before writing the plan.
+  - Agents verify visual work on their own Storybook, started with `npm run dev`, against the approved canvas design.
+  - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
+    its own default as the fallback.
+  - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
+- Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - `docs/design-system.md` describes the Web UI Component Drafts canvas, and `AGENTS.md` links it. A shipped component
+    keeps its block under an "Implemented" note that names its story.
+  - `docs/conventions.md` shows how a component declares its default as a custom-property fallback that a container
+    overrides.
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The Controls table lists a component's own props first, then the props it inherits from Base UI or React.
+
+### Fixed
+
+- Typo inside `Callout.Description`, such as `Typo.UnorderedList` or `Typo.P`, matches the description's size and takes
+  the variant's colour. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.RowLink` covers its whole row: a click anywhere in the row follows the link, while buttons, checkboxes, switches,
+  links, and form fields in the row keep their own click. — Nikolaus Brunner <brunner@imfusion.com>
+- `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
+  <brunner@imfusion.com>
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
 
 ---
 

package/dist/{code-NTcddiYk.js → code-Cl9AzRyF.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./resolve-state-props-DQf9WiGv.js";
-import { Xo as t, ja as n, pM as r } from "./icons-BsK_o-Cb.js";
+import { Xo as t, _M as n, ja as r } from "./icons-vc1WZCxX.js";
 import { t as i } from "./meta-V_KyLeGn.js";
 import { a, i as o, n as s, o as c, s as l } from "./scroll-area-z9Lf9uIk.js";
 import { cx as u } from "class-variance-authority";
@@ -34,7 +34,7 @@ var x = {
 	InlineLink: () => w
 });
 function C({ copyable: e = !1, children: i, render: a, ...o }) {
-	let { copied: s, copy: c } = b(), l = g(null), u = s ? n : t;
+	let { copied: s, copy: c } = b(), l = g(null), u = s ? r : t;
 	return y({
 		defaultTagName: "code",
 		render: a,
@@ -53,7 +53,7 @@ function C({ copyable: e = !1, children: i, render: a, ...o }) {
 						"data-copied": s || void 0,
 						"aria-label": s ? "Copied" : "Copy",
 						onClick: () => c(l.current?.textContent ?? ""),
-						children: /* @__PURE__ */ f(r, {
+						children: /* @__PURE__ */ f(n, {
 							glyph: u,
 							size: 12,
 							strokeWidth: 2,
@@ -87,7 +87,7 @@ function w({ kind: e = "external", ...t }) {
 }
 w.displayName = "Code.InlineLink";
 function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
-	let { copied: _, copy: v } = b(), y = g(null), S = _ ? n : t;
+	let { copied: _, copy: v } = b(), y = g(null), S = _ ? r : t;
 	return /* @__PURE__ */ p("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: u(x.block, e),
@@ -102,7 +102,7 @@ function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
 				"data-copied": _ || void 0,
 				"aria-label": _ ? "Copied" : "Copy",
 				onClick: () => v(y.current?.textContent ?? ""),
-				children: /* @__PURE__ */ f(r, {
+				children: /* @__PURE__ */ f(n, {
 					glyph: S,
 					size: 12,
 					strokeWidth: 2,

package/dist/components/typo/typo.d.ts

@@ -9,6 +9,10 @@ type WeightProps = {
     /** Font weight. Omit to keep the member's default; `medium` firms up short body text on cards. */
     weight?: "regular" | "medium" | "strong";
 };
+type MarkerProps = {
+    /** Colour of the dash. Omit to follow the text colour. */
+    markerVariant?: TypoProps["variant"];
+};
 type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
 type LongHeadingProps = HeadingProps & {
     /** Whether lines after the first use a translucent text color. */
@@ -99,7 +103,7 @@ export declare namespace OrderedList {
     var displayName: string;
 }
 /** Typo.UnorderedList — bulleted list. */
-export declare function UnorderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, markerVariant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps & MarkerProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }

package/dist/docgen/component-sources.d.ts

@@ -4,4 +4,8 @@ export type ComponentSource = {
     componentFile: string;
     metaFile: string;
 };
+/**
+ * A component folder is public when the package index exports it; an unexported folder is internal.
+ * Integrations ship through their own entry points and are always public.
+ */
 export declare function publicComponentSources(srcDir: string): ComponentSource[];

package/dist/icons/catalog.gen.d.ts

@@ -6011,6 +6011,27 @@ export declare const ICON_CATALOG: readonly [{
     readonly style: "regular";
     readonly origin: "iconoir";
     readonly file: "regular/laptop-warning.svg";
+}, {
+    readonly name: "LayoutAuto";
+    readonly category: "Layout";
+    readonly tags: readonly ["layout", "auto", "masonry", "viewports", "tiles", "grid"];
+    readonly style: "regular";
+    readonly origin: "imfusion";
+    readonly file: "regular/layout-auto.svg";
+}, {
+    readonly name: "LayoutFocusPlusRows";
+    readonly category: "Layout";
+    readonly tags: readonly ["layout", "focus", "rows", "main viewport", "viewports", "split"];
+    readonly style: "regular";
+    readonly origin: "imfusion";
+    readonly file: "regular/layout-focus-plus-rows.svg";
+}, {
+    readonly name: "LayoutFocusPlusStack";
+    readonly category: "Layout";
+    readonly tags: readonly ["layout", "focus", "stack", "main viewport", "sidebar", "viewports"];
+    readonly style: "regular";
+    readonly origin: "imfusion";
+    readonly file: "regular/layout-focus-plus-stack.svg";
 }, {
     readonly name: "LayoutLeft";
     readonly category: "Layout";
@@ -6025,6 +6046,13 @@ export declare const ICON_CATALOG: readonly [{
     readonly style: "regular";
     readonly origin: "iconoir";
     readonly file: "regular/layout-right.svg";
+}, {
+    readonly name: "LayoutRows";
+    readonly category: "Layout";
+    readonly tags: readonly ["layout", "rows", "viewports", "grid", "2x2", "tiles"];
+    readonly style: "regular";
+    readonly origin: "imfusion";
+    readonly file: "regular/layout-rows.svg";
 }, {
     readonly name: "Leaderboard";
     readonly category: "Activities";

package/dist/icons/icons.gen.d.ts

@@ -857,8 +857,12 @@ export declare const LaptopCharging: import('.').IconComponent;
 export declare const LaptopDevMode: import('.').IconComponent;
 export declare const LaptopFix: import('.').IconComponent;
 export declare const LaptopWarning: import('.').IconComponent;
+export declare const LayoutAuto: import('.').IconComponent;
+export declare const LayoutFocusPlusRows: import('.').IconComponent;
+export declare const LayoutFocusPlusStack: import('.').IconComponent;
 export declare const LayoutLeft: import('.').IconComponent;
 export declare const LayoutRight: import('.').IconComponent;
+export declare const LayoutRows: import('.').IconComponent;
 export declare const Leaderboard: import('.').IconComponent;
 export declare const LeaderboardStar: import('.').IconComponent;
 export declare const Leaf: import('.').IconComponent;