@imfusion/web-ui 0.8.1-dev.2.g74f81c31 → 0.8.1-dev.20.g50b02289

package/CHANGELOG.md

@@ -2,11 +2,61 @@
 
 ## [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.
+
 ### 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.
 - 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 with an avatar, a title, a description, and a trailing action.
+  - `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 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.
+
+### Fixed
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
 
 ---
 

package/README.md

@@ -70,23 +70,23 @@ 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-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.           |
 
 ### Work on it from a consumer app
 

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

@@ -4,20 +4,26 @@ import * as AvatarParts from '../avatar/avatar';
 declare const root: (props?: ({
     context?: "default" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = useRender.ComponentProps<"a"> & VariantProps<typeof root>;
+type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>;
 /**
- * AccountCard.Root — the link to the signed-in person's account, holding `AccountCard.Avatar`, `AccountCard.Title`, and
- * `AccountCard.Description`. Pass a router link through `render`. `aria-current="page"` marks it current with a tint and
- * an inset rule. Its accessible name is the title and description; the avatar stays decorative.
- *
- * Place `AccountCard.Action` beside the root, not inside it: a link cannot contain a button.
+ * AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The
+ * action sits beside the link, not inside it, since a link cannot contain a button.
  */
 declare function Root({ 
 /** Explicit saturated-surface context; this is never inferred from an ancestor. */
-context, render, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+context, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
+/**
+ * AccountCard.Link — the link to the account, holding `AccountCard.Avatar`, `AccountCard.Title`,
+ * `AccountCard.Subtitle`, `AccountCard.Description`, and `AccountCard.Role`. Pass a router link through `render`. Its
+ * accessible name is its text; the avatar stays decorative.
+ */
+declare function Link({ render, ...props }: useRender.ComponentProps<"a">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare namespace Link {
+    var displayName: string;
+}
 type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
     /** The person's photo. Until it loads, and when it fails, the initials or the person glyph show instead. */
     src?: string;
@@ -32,22 +38,46 @@ declare function Avatar({ src, size, children, ...props }: AvatarProps): import(
 declare namespace Avatar {
     var displayName: string;
 }
-/** AccountCard.Title — the account's name, or its email until a name exists. Truncates to one line. */
-declare function Title(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before
+ * an `@` and after a dot.
+ */
+declare function Title({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
-/** AccountCard.Description — a second line such as organization and role. Truncates to one line. */
+/**
+ * AccountCard.Subtitle — the quiet line under the title: the email's domain, or the whole email once the title is a
+ * name. Text wraps before an `@` and after a dot.
+ */
+declare function Subtitle({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Subtitle {
+    var displayName: string;
+}
+/** AccountCard.Description — the organization, under a rule at the foot of the card. */
 declare function Description(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }
+/** AccountCard.Role — a mono uppercase label beside the description, such as the person's role. */
+declare function Role(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Role {
+    var displayName: string;
+}
 /**
- * AccountCard.Action — a trailing slot beside `AccountCard.Root`, such as a ghost icon `Button` that logs out. The
+ * AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The
  * button carries its own `aria-label` and its own `context`.
  */
 declare function Action(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Action {
     var displayName: string;
 }
-export { Root, Avatar, Title, Description, Action };
+/**
+ * AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current="page"`
+ * shows as current; a standalone card is always the signed-in account and shows no current state.
+ */
+declare function Group(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Group {
+    var displayName: string;
+}
+export { Root, Link, Avatar, Title, Subtitle, Description, Role, Action, Group };

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;
 }