@imfusion/web-ui 0.6.1-dev.12.ge86ac0a1 → 0.6.1-dev.15.g5d565e65

package/dist/index.js

@@ -1,7 +1,7 @@
 import { t as e } from "./chunk-DmhlhrBa.js";
 import { t } from "./meta-CySnRuVp.js";
-import { At as n, GT as r, Kv as i, Ma as a, Na as o, Pm as s, Qt as c, Qv as l, RA as u, Wk as d, Xo as ee, aE as f, hn as p, iv as te, r as m, sn as ne, t as re, zk as ie } from "./icons-wBmF0U2x.js";
-import { a as ae, o as oe, r as se, t as ce } from "./code-Blo48PGr.js";
+import { At as n, GT as r, Kv as i, Ma as a, Na as o, Pm as s, Qt as c, Qv as l, RA as u, Wk as d, Xo as ee, aE as f, hn as p, iv as te, r as m, sn as ne, t as re, zk as ie } from "./icons-Cy1HAosO.js";
+import { a as ae, o as oe, r as se, t as ce } from "./code-C_56u-Vk.js";
 import { S as le, c as ue, d as de, l as fe, m as pe, s as me, u as he } from "./tabs-CMKvMF4E.js";
 import { Button as ge } from "@base-ui/react/button";
 import { cva as _e, cva as h, cx as ve, cx as g } from "class-variance-authority";
@@ -102,7 +102,7 @@ var Me = {
 	name: "Button",
 	category: t.buttons,
 	status: "stable",
-	description: "Triggers an action — submit, confirm, cancel, navigate, or destructive operations. Six semantic variants (primary, secondary, positive, negative, outline, ghost) communicate intent across four sizes (sm, md, lg, hero). The brand's chamfered shape; hover inverts fill and label. An optional endIcon slot aligns the label left and pins the icon right. Also called a CTA or action.",
+	description: "Triggers an action such as submit, confirm, cancel, navigate, or delete. Also called a CTA or action button; variants and sizes communicate its importance.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -190,7 +190,7 @@ var Ie = {
 	name: "ChipLink",
 	category: t.buttons,
 	status: "stable",
-	description: "Inline link styled as a chip — a small labeled anchor that auto-appends a directional icon. Use for external doc references and source attribution (opens in a new tab) or in-app navigation badges (stays in the current tab). Also called a link chip or link badge.",
+	description: "Link styled as a compact chip, with a directional icon for external references or in-app navigation. Also called a link chip or link badge.",
 	origin: "native"
 }, Le = { root: "imf-ui-copy-button-module-root" }, Re = 1500;
 function ze({ value: e, label: t = "Copy", copiedLabel: n = "Copied", variant: r = "secondary", size: i = "sm", className: o, ...s }) {
@@ -218,7 +218,7 @@ var Be = {
 	name: "CopyButton",
 	category: t.buttons,
 	status: "stable",
-	description: "Button that copies a value to the clipboard and shows a transient confirmation. Also called a copy-to-clipboard button. Composes Button; commonly paired with Code.Block.",
+	description: "Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.",
 	origin: "native",
 	internalDependencies: ["Button"]
 }, k = {
@@ -270,7 +270,7 @@ var Ke = {
 	name: "Checkbox",
 	category: t.inputs,
 	status: "stable",
-	description: "Binary form control for opt-in choices — accept terms, select table rows, pick list items. Supports an indeterminate state for parent/child selection. Also called a check box or tick box; for immediate on/off preferences, prefer Switch.",
+	description: "Binary form control for submitted choices such as terms, table rows, or list items. Also called a check box; it supports an indeterminate parent state.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -352,7 +352,7 @@ var st = {
 	name: "Field",
 	category: t.inputs,
 	status: "stable",
-	description: "Accessible field composition for a label, form control, supporting description, and inline validation message. Use it to associate a control such as Input, Checkbox, or Select with field state including valid, invalid, dirty, touched, filled, and focused.",
+	description: "Accessible field composition for a label, control, supporting text, and validation message. Use it with Input, Checkbox, Select, and other form controls.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -389,7 +389,7 @@ var mt = {
 	name: "Fieldset",
 	category: t.inputs,
 	status: "stable",
-	description: "Semantic grouping for related form controls with a shared legend. Also called a form group; use it to communicate a common topic and propagate disabled state without introducing a decorative container.",
+	description: "Semantic group for related form controls with a shared legend. Also called a form group; it can propagate a disabled state to the group.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -459,7 +459,7 @@ var _t = {
 	name: "Input",
 	category: t.inputs,
 	status: "stable",
-	description: "Single-line text input for form data entry. Also called a text field or input field. Supports controlled and uncontrolled modes, and integrates with Base UI's Field context for validation state (valid, invalid, dirty, touched, filled, focused).",
+	description: "Single-line text input for form data entry. Also called a text field; it supports controlled values and Field validation state.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -677,7 +677,7 @@ var nn = {
 	name: "Select",
 	category: t.inputs,
 	status: "stable",
-	description: "Single-choice dropdown — pick one value from a known list. Keyboard-accessible listbox with a labelled trigger and a portalled popup. Best for short, fixed option sets (status, role, country). Also called a dropdown or picker.",
+	description: "Dropdown for choosing a value from a known list. Also called a picker; use it for a labeled, keyboard-accessible option list.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -689,7 +689,7 @@ var nn = {
 	name: "Slider",
 	category: t.inputs,
 	status: "stable",
-	description: "Drag a thumb along a track to pick a numeric value or range. Use for continuous or stepped numeric input where magnitude matters — volume, brightness, opacity, price ranges. Also called a range input.",
+	description: "Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -701,7 +701,7 @@ var nn = {
 	name: "Switch",
 	category: t.inputs,
 	status: "stable",
-	description: "Two-state toggle for immediate on/off preferences — enable a feature, mute audio, toggle dark mode. Takes effect right away (no submit step); for form-submission booleans, a checkbox is more conventional. Also called a toggle.",
+	description: "Two-state control for an on/off setting that takes effect immediately. Also called a toggle; use Checkbox for a submitted choice.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -713,7 +713,7 @@ var nn = {
 	name: "Toggle",
 	category: t.inputs,
 	status: "experimental",
-	description: "A two-state button that can be on or off. Compose several inside a ToggleGroup for a segmented control.",
+	description: "Two-state button for a pressed or unpressed option. Compose several in ToggleGroup for a segmented control.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -725,7 +725,7 @@ var nn = {
 	name: "ToggleGroup",
 	category: t.inputs,
 	status: "experimental",
-	description: "A set of connected Toggle buttons sharing one value: single-select by default (a segmented control), or multi-select with `multiple`. Compose one Toggle per segment, each with a value. Also called a segmented control or segmented button.",
+	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",
@@ -815,7 +815,7 @@ var Cn = {
 	name: "AppShell",
 	category: t.layout,
 	status: "stable",
-	description: "Application layout shell — a fixed header, collapsible navbar/aside sidebars, an optional footer, and a scrolling main area. The classic dashboard frame; also called an app layout, application frame, dashboard shell, or sidebar layout. Sizing is CSS-driven and sidebars collapse to sliding overlays on small screens.",
+	description: "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.",
 	origin: "native"
 }, P = {
 	content: "imf-ui-card-module-content",
@@ -934,7 +934,7 @@ var jn = {
 	category: t.layout,
 	status: "stable",
 	namespace: !0,
-	description: "Surface container — groups related content on a tonal background. Composed from slots: Card.Root wraps an optional edge-to-edge Card.Image plus padded Card.Header, Card.Content, and Card.Footer. Tonal or coloured `variant`, opt-in shadow and radius, and a `density` scale. Also called a panel, tile, or paper.",
+	description: "Surface container for related content on a tonal background. Also called a panel or tile; compose it from optional image, header, content, and footer parts.",
 	origin: "native"
 }, F = {
 	backdrop: "imf-ui-drawer-module-backdrop",
@@ -1119,7 +1119,7 @@ var or = {
 	name: "Drawer",
 	category: t.layout,
 	status: "stable",
-	description: "Off-canvas panel that slides in from a screen edge. Use for mobile navigation, secondary nav, settings trays, filter sidebars, or any side sheet. Also called a sidebar, side panel, off-canvas, or sheet.",
+	description: "Off-canvas panel that slides in from a screen edge for navigation, settings, filters, or focused tasks. Also called a sidebar, side panel, or sheet.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -1298,7 +1298,7 @@ var Mr = {
 	name: "Popover",
 	category: t.display,
 	status: "stable",
-	description: "Floating panel anchored to a trigger element. Use for contextual menus, tooltips-with-actions, rich hover cards, quick-edit forms, or any non-modal detail overlay. Also called a popup, flyout, or floating menu.",
+	description: "Floating panel anchored to a trigger for contextual content, quick forms, or actions. Also called a popup or flyout; use Tooltip for hints without interaction.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -1310,7 +1310,7 @@ var Mr = {
 	name: "Row",
 	category: t.layout,
 	status: "stable",
-	description: "Horizontal layout primitive — children are arranged left-to-right with configurable spacing, alignment, and optional wrapping. Also called hstack, horizontal stack, flex row.",
+	description: "Horizontal layout primitive for spacing, aligning, and wrapping children. Also called a horizontal stack or flex row.",
 	origin: "native"
 }, L = {
 	root: "imf-ui-separator-module-root",
@@ -1339,7 +1339,7 @@ var Ir = {
 	name: "Separator",
 	category: t.layout,
 	status: "stable",
-	description: "Thin line that visually divides content into groups — section break, list item rule, sidebar division. Also called a divider, hr, or horizontal / vertical rule.",
+	description: "Line that divides content horizontally or vertically. Also called a divider or rule.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -1351,7 +1351,7 @@ var Ir = {
 	name: "Stack",
 	category: t.layout,
 	status: "stable",
-	description: "Vertical layout primitive — children stack top-to-bottom with configurable spacing and alignment. Use it instead of writing flex column layouts by hand. Also called a vstack or column.",
+	description: "Vertical layout primitive for spacing and aligning children. Also called a vertical stack or column.",
 	origin: "native"
 }, R = {
 	description: "imf-ui-callout-module-description",
@@ -1455,7 +1455,7 @@ var Kr = {
 	category: t.display,
 	status: "stable",
 	namespace: !0,
-	description: "Inline status banner — a persistent, non-interactive message that sits in the content flow to convey info, success, warning, or error state. Composed from slots: Callout.Root wraps a Callout.Icon (status glyph), an optional Callout.Title, and a Callout.Description. Tonal `variant` (info/positive/warning/negative) tints the surface and colours the icon and text. Also called an alert, callout, or inline notice. Not a Toast (transient) or Alert Dialog (modal).",
+	description: "Persistent, in-place status message for information, success, warnings, and errors. Also called an inline alert or notice; it is not a transient toast or modal dialog.",
 	origin: "native"
 };
 //#endregion
@@ -1479,7 +1479,7 @@ var Jr = {
 	name: "Chip",
 	category: t.display,
 	status: "stable",
-	description: "Compact inline label for tags, status, categories, counts, or metadata. Also known as a badge, tag, or pill. Two dimensions — a color variant for semantic role and a shape variant for visual appearance, including an inline form that sits naturally in flowing body text.",
+	description: "Compact label for tags, status, categories, counts, and metadata. Also called a badge or tag; its color and appearance are independent choices.",
 	origin: "native"
 }, z = {
 	iconClosed: "imf-ui-collapsible-module-iconClosed",
@@ -1552,7 +1552,7 @@ var ni = {
 	name: "Collapsible",
 	category: t.display,
 	status: "stable",
-	description: "Toggleable show/hide region for progressive disclosure — FAQ entries, expandable settings, detail toggles. A trigger button drives an animated open/close panel; multiple stacked form an accordion. Also called a disclosure or expand/collapse.",
+	description: "Show-and-hide region for secondary content such as FAQs, settings, or details. Also called a disclosure or expand/collapse.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -1622,7 +1622,7 @@ var ai = {
 	name: "Logo",
 	category: t.display,
 	status: "stable",
-	description: "Brand mark display primitive — renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark, brand icon, or logotype.",
+	description: "Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.",
 	origin: "native"
 };
 //#endregion
@@ -2046,7 +2046,7 @@ var ea = /* @__PURE__ */ e({
 	category: t.display,
 	status: "experimental",
 	namespace: !0,
-	description: "Navigation menu — a horizontal (or vertical) strip of triggers that open flat, anchored flyout panels for site or app wayfinding, with multi-column mega-menu content and a viewport-responsive inline master/detail submenu. Composed from slots: NavigationMenu.Root, List, Item, Trigger, Icon, Content, Link, FlyoutLink, LinkList, LinkCard, InlineSubmenu, Portal, Positioner, Popup, Viewport, Arrow, Backdrop. Also called a nav bar, menu bar, or mega menu.",
+	description: "Navigation menu with horizontal or vertical triggers and anchored flyout panels. Also called a menu bar or mega menu; it supports links, rich cards, and nested navigation.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -2159,7 +2159,7 @@ var fa = {
 	name: "Spinner",
 	category: t.display,
 	status: "stable",
-	description: "Loading indicator built from the animated ImFusion glyph. Also called a loader, progress spinner, or activity indicator; signals indeterminate loading.",
+	description: "Indeterminate loading indicator. Also called a loader or progress spinner.",
 	origin: "native"
 }, q = {
 	body: "imf-ui-table-module-body",
@@ -2273,14 +2273,14 @@ var ja = {
 	name: "Table",
 	category: t.display,
 	status: "stable",
-	description: "Styled, static building blocks for tabular data — Root, Header, Body, Row, HeaderCell, Cell, HeaderButton, SortableHeaderCell. Also called a data grid anatomy. Purely presentational with no data logic; for a full data grid, drive these parts with a headless table library (TanStack Table recommended) that you install yourself.",
+	description: "Presentational table parts for static tabular data. Pair them with a headless table library for sorting, pagination, or selection.",
 	origin: "native"
 }, Ma = {
 	name: "Tabs",
 	category: t.display,
 	status: "stable",
 	namespace: !0,
-	description: "Tabbed navigation — switches between panels of content within one view via a horizontal (or vertical) strip of labels with a sliding active-state underline. Composed from slots: Tabs.Root, Tabs.List, Tabs.Tab, Tabs.Indicator, Tabs.Panel. Also called a tab strip or tab bar.",
+	description: "Switches between related panels within one view. Also called a tab strip or tab bar; it supports horizontal and vertical layouts.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -2570,7 +2570,7 @@ var xo = {
 	name: "Tooltip",
 	category: t.display,
 	status: "stable",
-	description: "Hover- or focus-triggered floating label giving terse contextual help for a control or term. Use for icon-button descriptions, truncated-text reveals, and field hints. Also called a hint, hovercard, or info bubble; for click-triggered panels with actions use Popover instead.",
+	description: "Hover- or focus-triggered label for brief help about a control or term. Also called a hint; use Popover for a panel with actions.",
 	origin: "adapted",
 	upstream: {
 		name: "Base UI",
@@ -2817,7 +2817,7 @@ var Lo = {
 	category: t.display,
 	status: "stable",
 	namespace: !0,
-	description: "Typographic primitives — a family of heading (H1–H4), paragraph (P, Lead), and inline accent (InlineCode, Highlight, Link) components. Most support a color role — main, support, or minor — plus the standard HTML attributes for its element; InlineCode is a fixed neutral chip (it renders Code.Inline).",
+	description: "Semantic text primitives for headings, paragraphs, lists, quotes, links, and inline code. The namespace uses native HTML elements and token-based text roles.",
 	origin: "native"
 }, Ro = xe({
 	color: "currentColor",

package/dist/integrations/code-highlight.js

@@ -1,6 +1,6 @@
 import { t as e } from "../chunk-DmhlhrBa.js";
 import { t } from "../meta-CySnRuVp.js";
-import { i as n, n as r, r as i } from "../code-Blo48PGr.js";
+import { i as n, n as r, r as i } from "../code-C_56u-Vk.js";
 import { jsx as a } from "react/jsx-runtime";
 import { cloneElement as o, useMemo as s } from "react";
 import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";
@@ -222,7 +222,7 @@ var R = {
 	category: t.display,
 	status: "experimental",
 	namespace: !0,
-	description: "Syntax-highlighted drop-in for the Code parts — the same Code.Block and Code.Inline, with TanStack Highlight token coloring that follows the color scheme. Imported from @imfusion/web-ui/integrations/code-highlight; requires the @tanstack/highlight peer.",
+	description: "Syntax-highlighted Code parts powered by TanStack Highlight. Import from the integration entry and install the optional @tanstack/highlight peer.",
 	origin: "adapted",
 	internalDependencies: ["Code"],
 	upstream: {

package/dist/integrations/image-display-options.js

@@ -297,7 +297,7 @@ var U = {
 	name: "ImageDisplayOptions",
 	category: e.inputs,
 	status: "experimental",
-	description: "A panel or toolbar of controls bound to an image dataset's display options.",
+	description: "Panel and toolbar controls for an image dataset's display options, including window, level, gamma, and invert settings.",
 	origin: "adapted",
 	internalDependencies: [
 		"Tabs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.6.1-dev.12.ge86ac0a1",
+  "version": "0.6.1-dev.15.g5d565e65",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "license": "UNLICENSED",
@@ -92,8 +92,8 @@
     "git:config": "git config core.hooksPath .githooks && git config pull.rebase true && git config merge.ff only"
   },
   "peerDependencies": {
-    "@imfusion/sdk": "^1.0.0",
-    "@imfusion/sdk-react": "^1.0.0",
+    "@imfusion/sdk": "^1.0.0 || >=1.1.1-dev.0 <1.1.1",
+    "@imfusion/sdk-react": "^1.0.0 || >=1.1.1-dev.0 <1.1.1",
     "@tanstack/highlight": "^0.0.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/llms/install-templates/AGENTS.md

@@ -1,34 +1,31 @@
-# AGENTS.md
+# Agent instructions
 
-<Keep this file lean — target ~50 lines. Decision test for every line: would the agent make a costly mistake without it? If
-it would just need to read a file first, cut it. Dev commands, path aliases, and tool config are discoverable from the files
-themselves.>
+<Keep this file short. Include only rules that prevent a costly mistake. Point to the repository's own docs for everything
+else.>
 
-<One paragraph: what the app is and the stack in one line.>
+<One paragraph describing the app, its package, and its stack.>
 
-Scripts, deps, and setup: [`README.md`](./README.md) and [`package.json`](./package.json) are the source of truth. Check the
-`package.json` scripts before running or suggesting a command — don't infer one exists by pattern-matching a sibling.
+Setup and commands: [`README.md`](./README.md) and [`package.json`](./package.json). Read the package scripts before running
+or suggesting a command.
 
-## Read before you write
+## Read before writing
 
-<One bullet per doc in docs/, each with when to read it, e.g.:>
+<Add one pointer for each repository-specific document.>
 
-- [`docs/<topic>.md`](./docs/<topic>.md) — <what it covers>. Read before <the change it governs>.
+- [`docs/<topic>.md`](./docs/<topic>.md) — <what it covers and when to read it>.
 
-[`docs/index.md`](./docs/index.md) registers all of them.
+[`docs/index.md`](./docs/index.md) lists the documents.
 
 ## Working here
 
-<The fenced block below is the only part of this file `npx web-ui-install` touches: its content comes from this template and
-is refreshed on every skills install. Everything else in the file is scaffolded once by the setup skill and then owned by the
-repo.>
+<The installer owns only the fenced block below. It refreshes that block on every install; the rest belongs to the project.>
 
 <!-- imf-web-ui:begin — managed by `npx web-ui-install`; edits inside the fence are overwritten -->
 
-`.agents/skills/imf-web-ui-*` is vendored from `@imfusion/web-ui` and resynced with `npx web-ui-install`. Don't edit it and
-don't put repo conventions there. Load the matching `imf-web-ui-*` skill before writing code, styles, data fetching, or docs;
-repo docs hold only what is unique to this repo.
+`.agents/skills/imf-web-ui-*` is vendored from `@imfusion/web-ui` and resynced with `npx web-ui-install`. Do not edit the
+vendored copy or put project-specific conventions there. Load the matching skill before changing UI, styles, data, tests, or
+docs.
 
 <!-- imf-web-ui:end -->
 
-<Repo-specific agent guidance: generated files that are committed, tools to verify APIs against, things never to touch.>
+<Add project-specific rules here: generated files, API lookup tools, and paths the agent must not touch.>