@imfusion/web-ui 0.5.1-dev.53.gb710322e → 0.5.1-dev.6.g9d275fa8

package/src/docgen/doc.gen.json

@@ -177,7 +177,7 @@
       },
       {
         "name": "Callout.Icon",
-        "description": "Callout.Icon — the leading status glyph. With no children it renders the\nvariant's default local icon; pass a custom icon as children to override.\n`aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits\nthe status colour via `currentColor`.",
+        "description": "Callout.Icon — the leading status glyph. With no children it renders the\nvariant's default lucide icon; pass a custom icon as children to override.\n`aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits\nthe status colour via `currentColor`.",
         "props": []
       },
       {
@@ -448,7 +448,7 @@
   "chip-link": {
     "root": {
       "name": "ChipLink",
-      "description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).",
+      "description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(Lucide `ArrowUpRight` for external, `ArrowRight` for internal).",
       "props": [
         {
           "name": "appearance",
@@ -491,14 +491,14 @@
     "subComponents": [
       {
         "name": "Code.Block",
-        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in. The\ncopy button copies the rendered text.",
+        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in.\nDumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). Children\nmust be a string so the copy button has clean text to copy.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "ReactNode",
+            "type": "string",
             "defaultValue": null,
-            "description": "Code content shown in the block. The copy button copies its rendered text."
+            "description": "The code to display, as a raw string — also the value copied by the copy button."
           },
           {
             "name": "hideCopy",
@@ -507,6 +507,13 @@
             "defaultValue": "false",
             "description": "Hide the copy button."
           },
+          {
+            "name": "highlighted",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
+          },
           {
             "name": "language",
             "required": false,
@@ -518,14 +525,14 @@
       },
       {
         "name": "Code.Inline",
-        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. `Typo.InlineCode` renders this under the hood so inline-code chrome is\ndefined in one place. The copy button copies the rendered text.",
+        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. Dumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`\nrenders this under the hood so inline-code chrome is defined in one place.\nChildren must be a string so an opted-in copy button has clean text to copy.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "ReactNode",
+            "type": "string",
             "defaultValue": null,
-            "description": "Code content shown in the chip. The copy button copies its rendered text."
+            "description": "The inline code, as a raw string — also the value copied when `copyable`."
           },
           {
             "name": "copyable",
@@ -533,6 +540,13 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
+          },
+          {
+            "name": "highlighted",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -1180,363 +1194,6 @@
       }
     ]
   },
-  "field": {
-    "root": {
-      "name": "Field.Root",
-      "description": "Field.Root — groups a label, control, validation state, and supporting copy.",
-      "props": [
-        {
-          "name": "actionsRef",
-          "required": false,
-          "type": "RefObject<FieldRootActions | null>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "className",
-          "required": false,
-          "type": "string | ((state: FieldRootState) => string)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "dirty",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "disabled",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": ""
-        },
-        {
-          "name": "invalid",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "name",
-          "required": false,
-          "type": "string",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "render",
-          "required": false,
-          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldRootState>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "style",
-          "required": false,
-          "type": "| CSSProperties\n| ((state: FieldRootState) => CSSProperties)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "touched",
-          "required": false,
-          "type": "boolean",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "validate",
-          "required": false,
-          "type": "(\n  value: unknown,\n  formValues: Record<string, any>\n) =>\n  | string\n  | string[]\n  | Promise<string | string[] | null>\n  | null",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "validationDebounceTime",
-          "required": false,
-          "type": "number",
-          "defaultValue": "0",
-          "description": ""
-        },
-        {
-          "name": "validationMode",
-          "required": false,
-          "type": "FormValidationMode",
-          "defaultValue": "onSubmit",
-          "description": ""
-        }
-      ]
-    },
-    "subComponents": [
-      {
-        "name": "Field.Control",
-        "description": "Field.Control — a native input control with Field labeling and validation.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldControlState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "defaultValue",
-            "required": false,
-            "type": "string | number | readonly string[]",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "onValueChange",
-            "required": false,
-            "type": "(\n  value: string,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldControlState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldControlState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Description",
-        "description": "Field.Description — supporting information for a field.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "| string\n| ((state: FieldDescriptionState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldDescriptionState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldDescriptionState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Error",
-        "description": "Field.Error — an inline validation message shown when its match condition fails.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldErrorState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "match",
-            "required": false,
-            "type": "boolean | keyof ValidityState",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldErrorState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldErrorState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Item",
-        "description": "Field.Item — groups one checkable option with its label and description.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldItemState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "disabled",
-            "required": false,
-            "type": "boolean",
-            "defaultValue": "false",
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldItemState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldItemState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Label",
-        "description": "Field.Label — an accessible label automatically associated with the control.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldLabelState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "nativeLabel",
-            "required": false,
-            "type": "boolean",
-            "defaultValue": "true",
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldLabelState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldLabelState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      },
-      {
-        "name": "Field.Validity",
-        "description": "Field.Validity — renderless access to the field validity data for custom messages.\nIts function child owns the rendered element and therefore its identity and styling.",
-        "props": []
-      }
-    ]
-  },
-  "fieldset": {
-    "root": {
-      "name": "Fieldset.Root",
-      "description": "Fieldset.Root — semantic grouping for related form controls and a shared legend.",
-      "props": [
-        {
-          "name": "className",
-          "required": false,
-          "type": "string | ((state: FieldsetRootState) => string)",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "render",
-          "required": false,
-          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetRootState>",
-          "defaultValue": null,
-          "description": ""
-        },
-        {
-          "name": "style",
-          "required": false,
-          "type": "| CSSProperties\n| ((state: FieldsetRootState) => CSSProperties)",
-          "defaultValue": null,
-          "description": ""
-        }
-      ]
-    },
-    "subComponents": [
-      {
-        "name": "Fieldset.Legend",
-        "description": "Fieldset.Legend — the accessible label for its related controls.",
-        "props": [
-          {
-            "name": "className",
-            "required": false,
-            "type": "string | ((state: FieldsetLegendState) => string)",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "render",
-            "required": false,
-            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetLegendState>",
-            "defaultValue": null,
-            "description": ""
-          },
-          {
-            "name": "style",
-            "required": false,
-            "type": "| CSSProperties\n| ((state: FieldsetLegendState) => CSSProperties)",
-            "defaultValue": null,
-            "description": ""
-          }
-        ]
-      }
-    ]
-  },
-  "icon": {
-    "root": {
-      "name": "Icon",
-      "description": "Icon — renders an icon component with a semantic Web UI foreground color.",
-      "props": [
-        {
-          "name": "glyph",
-          "required": true,
-          "type": "IconComponent",
-          "defaultValue": null,
-          "description": "Icon component imported from `@imfusion/web-ui/icons`."
-        },
-        {
-          "name": "size",
-          "required": false,
-          "type": "string | number",
-          "defaultValue": null,
-          "description": "Sets both SVG dimensions unless `width` or `height` is provided."
-        },
-        {
-          "name": "variant",
-          "required": false,
-          "type": "| \"inherit\"\n| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"positive\"\n| \"negative\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
-          "defaultValue": "inherit",
-          "description": ""
-        }
-      ]
-    },
-    "subComponents": []
-  },
   "input": {
     "root": {
       "name": "Input",
@@ -1549,13 +1206,6 @@
           "defaultValue": null,
           "description": ""
         },
-        {
-          "name": "onClear",
-          "required": false,
-          "type": "() => void",
-          "defaultValue": null,
-          "description": "Called when the search input's clear button is pressed."
-        },
         {
           "name": "onValueChange",
           "required": false,
@@ -4794,9 +4444,9 @@
           {
             "name": "children",
             "required": true,
-            "type": "ReactNode",
+            "type": "string",
             "defaultValue": null,
-            "description": "Code content shown in the chip. The copy button copies its rendered text."
+            "description": "The inline code, as a raw string — also the value copied when `copyable`."
           },
           {
             "name": "copyable",
@@ -4804,6 +4454,13 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
+          },
+          {
+            "name": "highlighted",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -4829,7 +4486,7 @@
       },
       {
         "name": "Typo.Link",
-        "description": "Typo.Link — inline anchor. Auto-appends a local Web UI directional icon (`ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links.",
+        "description": "Typo.Link — inline anchor. Auto-appends a directional icon (Lucide `ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links.",
         "props": [
           {
             "name": "kind",
@@ -4931,14 +4588,14 @@
     "subComponents": [
       {
         "name": "CodeHighlight.Block",
-        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens rendered inside.",
+        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens filling its `highlighted` slot.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
+            "description": "The code to display, as a raw string — also the value copied by the copy button."
           },
           {
             "name": "hideCopy",
@@ -4952,20 +4609,20 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": ""
+            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
           }
         ]
       },
       {
         "name": "CodeHighlight.Inline",
-        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens rendered inside.",
+        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens filling its `highlighted` slot.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
+            "description": "The inline code, as a raw string — also the value copied when `copyable`."
           },
           {
             "name": "copyable",
@@ -4979,7 +4636,7 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": ""
+            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
           }
         ]
       },

package/src/llms/llms.gen.txt

@@ -73,23 +73,6 @@ Off-canvas panel that slides in from a screen edge. Use for mobile navigation, s
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .drawer (jq: jq '.drawer' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/drawer.md
 
-## Field
-- category: Inputs, status: stable
-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.
-- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .field (jq: jq '.field' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
-- further reading (usage/anatomy, not props): https://base-ui.com/react/components/field.md
-
-## Fieldset
-- category: Inputs, status: stable
-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.
-- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
-- further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
-
-## Icon
-- category: Display, status: stable
-Semantic color wrapper for an icon imported from the Web UI icons entry. Use it when an icon needs a named foreground role instead of the inherited currentColor.
-- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .icon (jq: jq '.icon' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
-
 ## ImageDisplayOptions
 - category: Inputs, status: experimental
 A panel or toolbar of controls bound to an image dataset's display options.

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

@@ -2,8 +2,8 @@
 name: imf-web-ui
 description:
   "Entry point for UI work in a project that depends on @imfusion/web-ui. Decides whether guidance is needed at all, then
-  routes to the right companion skill — component reference, UX guidance, or frontend conventions. Load when adding or
-  editing UI in a consumer repo."
+  routes to the right companion skill — component reference, UX guidance, or frontend patterns. Load when adding or editing
+  UI in a consumer repo."
 ---
 
 # imf-web-ui
@@ -24,17 +24,16 @@ Guidance skills exist to fill gaps, not to add ceremony to clear tasks.
 
 ## Routing
 
-| The task at hand                                                                                      | Open                                    |
-| ----------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| Using a specific component; checking props, sub-components, or defaults                               | `imf-web-ui-components`                 |
-| First-time setup, adding a library dependency, or components rendering unstyled/broken                | `imf-web-ui-setup` (`library-setup`)    |
-| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states  | `imf-web-ui-ux`                         |
-| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing     | `imf-web-ui-conventions`                |
-| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure | `imf-web-ui-setup` / `imf-web-ui-audit` |
-| Installing or checking agent tooling: vendored skills, lifecycle hooks, registrations, and staleness  | `imf-web-ui-setup` / `imf-web-ui-audit` |
-
-The two setup rows are narrow on purpose. They're for "what is this project missing?" — a question about the repo as a whole.
-Being asked to add one config file is just that edit; make it, and don't open a skill to do so.
+| The task at hand                                                                                      | Open                                 |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| Using a specific component; checking props, sub-components, or defaults                               | `imf-web-ui-components`              |
+| First-time setup, adding a library dependency, or components rendering unstyled/broken                | `imf-web-ui-setup`                   |
+| Building/reshaping a screen or flow; choosing between components; layout, density, hierarchy, states  | `imf-web-ui-ux`                      |
+| Writing wrappers or custom UI; styling beyond defaults; adding files; TypeScript, naming, testing     | `imf-web-ui-frontend-patterns`       |
+| Setting up or auditing an **ImFusion** repo's tooling: formatting, linting, hooks, scripts, structure | `imf-web-ui-imfusion-frontend-setup` |
+
+The last row is narrow on purpose. It's for "what is this project missing?" — a question about the repo as a whole. Being
+asked to add one config file is just that edit; make it, and don't open a skill to do so.
 
 Tasks routinely span two: building a screen usually means `imf-web-ui-ux` for the shape and `imf-web-ui-components` for the
 APIs. That's normal — open both, in that order.