@imfusion/web-ui 0.8.1-dev.3.g40eaad1c → 0.8.1-dev.31.g7b15b0d3

package/CHANGELOG.md

@@ -2,13 +2,84 @@
 
 ## [Unreleased]
 
+### Highlights
+
+#### Skills that fit the person
+
+On the first run, the agent asks a few short questions, one at a time: your name, your technical background, how much you
+have built for the web, how comfortable you are with npm and the terminal, how much explanation you want, and how you like to work.
+You can decline any question, and you see the result before anything is saved.
+
+The answers go to `~/.config/imfusion/web-ui/consumer-profile.md`, outside the project. Every skill you run reads that file.
+Someone new to npm gets a plain sentence before each command and a short gloss for a term like lockfile; a seasoned developer
+gets the short version. You can ask for a pause after each step or after each finished piece, and the approvals the
+workflows already ask for stay as they are. Say "change my profile" to answer again.
+
+### Breaking
+
+- **Breaking:** The library supports Safari 17.5, Chrome 123, and Firefox 120 or newer. — Nikolaus Brunner <brunner@imfusion.com>
+  - The stylesheet ships native `light-dark()`; older browsers get no semantic colors.
+  - The JavaScript build targets the same versions.
+
 ### Added
 
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `web-ui-dev-user-profile` keeps a contributor's profile in `dev-profile.md` beside the consumer one;
+    `web-ui-dev-start` and `web-ui-dev-getting-started` read it before any other step.
+  - `web-ui-dev-new-integration` builds a component around a package only some apps install. It runs
+    `web-ui-dev-new-component` with the integration contract, which `docs/component-definition.md` now spells out.
+  - `web-ui-dev-design-system-sync` builds the design system and publishes it to its Claude Design System artifact, with
+    resolved light and dark tokens, a live preview per component, the design language and a cover
+    ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - `Avatar` shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
   - `AccountCard` links to the signed-in person's account: a large title over a quiet subtitle, then the organization and a
     mono role under a rule, with an action such as Log out in its top row. Emails wrap at the `@` and at dots, and
     `AccountCard.Group` lists several cards with the current one marked.
+  - `Typo.Eyebrow` sets a short mono, uppercase label above a heading, in the quiet `support` color by default.
+  - `Card.Status` marks a card's outcome with a tinted column or band and the `info`, `positive`, `warning`, or `negative`
+    glyph that `Callout` uses for the same status.
+  - `Typo` body members (`P`, `Lead`, `Detail`, `Small`, `Blockquote`, `Highlight`, `Link`, and the lists) take an
+    optional `weight` of `regular`, `medium`, or `strong`, for short body text on cards that reads thin at the regular weight.
+- Components — Stephan Wenninger <wenninger@imfusion.com>
+  - `Slider.Root` has a `variant="position"` that draws a scrollbar-like trough and bar thumb for picking one position in a
+    range.
+  - `FrameSelection`, from `@imfusion/web-ui/integrations/frame-selection`, steps through the frames of ImFusion Web SDK
+    image sets with a position slider and a current-of-total readout.
+
+### Changed
+
+- Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - The `CodeHighlight` install section names TanStack Highlight 0.1.x and the 0.1.0 build it is tested against.
+  - The consumer agent tooling diagram groups the skills you run in one lane, so the router and the profile each reach them
+    with a single edge.
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `imf-web-ui-conventions` declares named functions, local component helpers included, with `function`, and keeps
+    inline callbacks as arrows.
+  - `imf-web-ui-conventions` loads route data with `queryClient.query({ ...options, staleTime: "static" })` in place of the
+    deprecated `ensureQueryData`.
+  - `imf-web-ui-update` opens with the route and its decision points, and names the optional `imf-web-ui-audit full` in
+    the report and its closing offer.
+  - `web-ui-dev-changelog` gives every new component, and every visibly changed one, a light and a dark screenshot of its
+    story in the release highlights.
+  - `imf-web-ui-update` checks for a running npm process by PID and working directory, and shows a command line only for
+    a process in the package being updated.
+  - `web-ui-dev-eval-consumer-skills` records every run's benchmark, and skips the record only when the user asks for it.
+  - `web-ui-dev-claude-design-sync-legacy` uploads to the standalone Claude Design site until it closes on 2026-12-14
+    ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
+
+### Fixed
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
+  - `WebUIProvider` and the components under it render on React 18, the runtime Claude's design canvases use.
+- Peer dependencies — Nikolaus Brunner <brunner@imfusion.com>
+  - The `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included. The
+    `FrameSelection` and `ImageDisplayOptions` install sections name SDK 1.x and the 1.0.0 build they are tested against.
+- CI and verification — Nikolaus Brunner <brunner@imfusion.com>
+  - The dev skill eval report scores the dev scenarios and lists only the `web-ui-dev-*` skills.
+- Token defaults — Nikolaus Brunner <brunner@imfusion.com>
+  - `data-imf-ui-color-scheme` on a nested element switches the semantic colors for that element's subtree.
 
 ---
 

package/README.md

@@ -70,23 +70,25 @@ npm run git:config
 
 The main development skills are:
 
-| Skill                              | Use it for                                       |
-| ---------------------------------- | ------------------------------------------------ |
-| `/web-ui-dev-getting-started`      | Route a first task based on experience and goal. |
-| `/web-ui-dev-start`                | Establish task context and working location.     |
-| `/web-ui-dev-new-component`        | Add a primitive.                                 |
-| `/web-ui-dev-update-component`     | Change an existing primitive.                    |
-| `/web-ui-dev-design-component`     | Apply the ImFusion brand to a component.         |
-| `/web-ui-dev-story`                | Author a Storybook story.                        |
-| `/web-ui-dev-commit`               | Verify and commit a change.                      |
-| `/web-ui-dev-changelog`            | Write the changelog entry or curate a release.   |
-| `/web-ui-dev-release`              | Prepare and ship a release.                      |
-| `/web-ui-dev-audit-docs`           | Check docs for drift before a commit.            |
-| `/web-ui-dev-llm-framework`        | Keep the LLM framework diagrams in sync.         |
-| `/web-ui-dev-eval-consumer-skills` | Evaluate the shipped consumer skills.            |
-| `/web-ui-dev-claude-design-sync`   | Update the design system in Claude Design.       |
-| `/web-ui-dev-teardown-worktree`    | Remove a finished worktree.                      |
-| `/web-ui-dev-mcp`                  | Recover one optional MCP capability.             |
+| Skill                                   | Use it for                                     |
+| --------------------------------------- | ---------------------------------------------- |
+| `/web-ui-dev-getting-started`           | Route a first task based on profile and goal.  |
+| `/web-ui-dev-start`                     | Establish task context and working location.   |
+| `/web-ui-dev-new-component`             | Add a primitive.                               |
+| `/web-ui-dev-new-integration`           | Add an integration with an optional peer.      |
+| `/web-ui-dev-update-component`          | Change an existing primitive.                  |
+| `/web-ui-dev-design-component`          | Apply the ImFusion brand to a component.       |
+| `/web-ui-dev-story`                     | Author a Storybook story.                      |
+| `/web-ui-dev-commit`                    | Verify and commit a change.                    |
+| `/web-ui-dev-changelog`                 | Write the changelog entry or curate a release. |
+| `/web-ui-dev-release`                   | Prepare and ship a release.                    |
+| `/web-ui-dev-audit-docs`                | Check docs for drift before a commit.          |
+| `/web-ui-dev-llm-framework`             | Keep the LLM framework diagrams in sync.       |
+| `/web-ui-dev-eval-consumer-skills`      | Evaluate the shipped consumer skills.          |
+| `/web-ui-dev-design-system-sync`        | Publish the design system to Claude.           |
+| `/web-ui-dev-claude-design-sync-legacy` | Upload to the standalone Claude Design site.   |
+| `/web-ui-dev-teardown-worktree`         | Remove a finished worktree.                    |
+| `/web-ui-dev-mcp`                       | Recover one optional MCP capability.           |
 
 ### Work on it from a consumer app
 

package/dist/components/card/card.d.ts

@@ -42,6 +42,20 @@ declare function Image({ alt, aspectRatio, style, ...props }: ImageProps): impor
 declare namespace Image {
     var displayName: string;
 }
+declare const status: (props?: ({
+    variant?: "positive" | "negative" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type StatusProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof status>;
+/**
+ * Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass
+ * children to replace the glyph. Like `Card.Image`, place it first among the slots: a column
+ * beside the body in a horizontal card, a band above it in a vertical one. Decorative
+ * (`aria-hidden`); the card's text carries the status.
+ */
+declare function Status({ variant, children, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Status {
+    var displayName: string;
+}
 type SlotProps = React.HTMLAttributes<HTMLDivElement>;
 /** Card.Header — the padded title region at the top of the card body. */
 declare function Header(props: SlotProps): import("react/jsx-runtime").JSX.Element;
@@ -62,4 +76,4 @@ declare function Footer(props: SlotProps): import("react/jsx-runtime").JSX.Eleme
 declare namespace Footer {
     var displayName: string;
 }
-export { Root, Image, Header, Content, Footer };
+export { Root, Image, Status, Header, Content, Footer };

package/dist/components/field/field.d.ts

@@ -29,8 +29,11 @@ export declare function Control(props: React.ComponentProps<typeof FieldPrimitiv
 export declare namespace Control {
     var displayName: string;
 }
-/** Field.Error — an inline validation message shown when its match condition fails. */
-export declare function Error(props: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Field.Error — an inline validation message shown when its match condition fails.
+ * It announces itself with `role="alert"`; pass another `role` to quiet it.
+ */
+export declare function Error({ role, ...props }: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Error {
     var displayName: string;
 }

package/dist/components/slider/slider.d.ts

@@ -1,11 +1,20 @@
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { VariantProps } from 'class-variance-authority';
+declare const sliderRoot: (props?: ({
+    variant?: "default" | "position" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface RootProps extends React.ComponentProps<typeof SliderPrimitive.Root>, VariantProps<typeof sliderRoot> {
+}
 /**
  * Slider.Root — value selector along a continuous or stepped track.
  *
+ * `variant="position"` draws a scrollbar-like trough and bar thumb for picking one position
+ * between `min` and `max`, such as a slice or frame; `onValueChange` reports the position.
+ *
  * @doc https://base-ui.com/react/components/slider
  * @llm https://base-ui.com/react/components/slider.md
  */
-export declare function Root({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, minStepsBetweenValues, disabled, orientation, name, form, locale, thumbAlignment, thumbCollisionBehavior, format, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ variant, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, minStepsBetweenValues, disabled, orientation, name, form, locale, thumbAlignment, thumbCollisionBehavior, format, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
@@ -39,3 +48,4 @@ export declare function Thumb({ index, ...props }: React.ComponentProps<typeof S
 export declare namespace Thumb {
     var displayName: string;
 }
+export {};

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

@@ -5,14 +5,18 @@ declare const typo: (props?: ({
     variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TypoProps = VariantProps<typeof typo>;
+type WeightProps = {
+    /** Font weight. Omit to keep the member's default; `medium` firms up short body text on cards. */
+    weight?: "regular" | "medium" | "strong";
+};
 type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
 type LongHeadingProps = HeadingProps & {
     /** Whether lines after the first use a translucent text color. */
     fadeAfterFirstLine?: boolean;
 };
-type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps;
+type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps & WeightProps;
 export type TypoLinkKind = "external" | "internal";
-type LinkProps = useRender.ComponentProps<"a"> & TypoProps & {
+type LinkProps = useRender.ComponentProps<"a"> & TypoProps & WeightProps & {
     /** Link target scope. `"external"` (default) opens in a new tab; `"internal"` stays in the current tab. */
     kind?: TypoLinkKind;
 };
@@ -42,27 +46,32 @@ export declare namespace H4 {
     var displayName: string;
 }
 /** Typo.P — body paragraph. */
-export declare function P({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function P({ variant, weight, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace P {
     var displayName: string;
 }
 /** Typo.Lead — emphasised intro paragraph. */
-export declare function Lead({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Lead({ variant, weight, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Lead {
     var displayName: string;
 }
 /** Typo.Detail — compact UI text, between Small (12px) and P (16px). */
-export declare function Detail({ variant, render, ...props }: useRender.ComponentProps<"p"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Detail({ variant, weight, render, ...props }: useRender.ComponentProps<"p"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Detail {
     var displayName: string;
 }
 /** Typo.Small — fine print. */
-export declare function Small({ variant, render, ...props }: useRender.ComponentProps<"small"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Small({ variant, weight, render, ...props }: useRender.ComponentProps<"small"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Small {
     var displayName: string;
 }
+/** Typo.Eyebrow — short uppercase label above a heading. Also called a kicker or overline. */
+export declare function Eyebrow({ variant, render, ...props }: useRender.ComponentProps<"p"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace Eyebrow {
+    var displayName: string;
+}
 /** Typo.Blockquote — pulled quotation. */
-export declare function Blockquote({ variant, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Blockquote({ variant, weight, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Blockquote {
     var displayName: string;
 }
@@ -75,22 +84,22 @@ export declare namespace InlineCode {
     var displayName: string;
 }
 /** Typo.Highlight — inline mark/highlight. */
-export declare function Highlight({ variant, render, ...props }: useRender.ComponentProps<"mark"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Highlight({ variant, weight, render, ...props }: useRender.ComponentProps<"mark"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Highlight {
     var displayName: string;
 }
 /** Typo.Link — inline anchor with an optional local Web UI directional icon. */
-export declare function Link({ variant, kind, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Link({ variant, weight, kind, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Link {
     var displayName: string;
 }
 /** Typo.OrderedList — numbered list. */
-export declare function OrderedList({ variant, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function OrderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace OrderedList {
     var displayName: string;
 }
 /** Typo.UnorderedList — bulleted list. */
-export declare function UnorderedList({ variant, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }