@imfusion/web-ui 0.6.4-dev.8.g41d03f2f → 0.7.0

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

@@ -18,30 +18,51 @@ Never overwrite user changes or commit without fresh approval.
 1. Work from the frontend package root. In a monorepo, find the package that owns the Web UI dependency.
 2. Read its `package.json`, lockfile, and repository instructions. npm with `package-lock.json` is the expected setup; stop
    if another lockfile is the active one.
-3. Record `git status --short`, the installed Web UI version, the installed skill targets, hooks, registrations, and
+3. Record `git status --short`, the installed Web UI version, the installed skill harness(es), hooks, registrations, and
    `AGENTS.md` fence.
-4. Check for another npm process and stop on a conflict. A dirty file this workflow needs is also a conflict. Do not reset,
-   clean, restore, or hide it.
+4. Check for another npm process and stop on a conflict. Uncommitted work is also a conflict: report it and stop before the
+   first mutating command, even if it looks unrelated to this workflow: what the update touches is only known once it runs,
+   and the person can commit, stash, or wave it through in one reply. Never reset, clean, restore, or hide it.
 5. With `--dry-run`, stop after reporting what would happen. Do not install, format, stage, commit, or ask for commit
    approval.
 
 ## Update the base
 
-Run from the consumer package root:
+Before installing, query the registry from the consumer package root:
 
 ```sh
-npm install @imfusion/web-ui
-npx web-ui-install
-npx web-ui-install --hooks
+npm view @imfusion/web-ui dist-tags --json
 ```
 
-Use `npm install @imfusion/web-ui@<version>` when the user supplied an explicit version. Stop on install failure. Preserve
-the installer's existing target. Do not use `--force` or `--legacy-peer-deps`.
+Honor an explicitly requested version or tag. Otherwise, target `latest`; if the installed version is a prerelease, ask
+whether to use `latest` or `dev` before proceeding. Resolve the selected tag or version with
+`npm view @imfusion/web-ui@<selected-tag-or-version> version --json` and record the exact target version. Stop if the
+registry lookup fails. Report "already current" only when the pre-update version matches this resolved target; npm's "up to
+date" message alone does not prove that.
 
-The installer owns the vendored skills, its `AGENTS.md` fence, and hook scripts. Run both installer commands after the
-package update even when the existing registrations look complete: they refresh scripts, prune retired registrations, and
-merge installer-owned entries idempotently into `.claude/settings.json` and `.codex/hooks.json`. Stop on malformed settings
-or installer conflicts. Read existing host registrations first and do not stack an event the project already covers.
+Install the resolved version, then refresh the existing installer harness (run `install hooks` too only if the project
+already has hooks installed):
+
+```sh
+npm install @imfusion/web-ui@<resolved-version>
+npx web-ui install skills
+npx web-ui install hooks
+```
+
+Both commands reuse the recorded harness. An install from the old `web-ui-install` has no record: pass the project's existing
+harness once, e.g. `--harness=all`. Stop on install failure. Do not use `--force` or `--legacy-peer-deps`.
+
+The installer owns the vendored skills, its `AGENTS.md` fence, and hook scripts. Run the installer commands after the package
+update even when the existing registrations look complete: they refresh scripts, prune retired registrations, and merge
+installer-owned entries idempotently into the registration file for the chosen harness (`.claude/settings.json`,
+`.codex/hooks.json`, or both). Stop on malformed settings or installer conflicts. Read existing host registrations first and
+do not stack an event the project already covers.
+
+After the installer command, inspect the installed skill diffs and briefly report any guidance changes; version-marker
+changes alone do not count. Re-read changed skills and references relevant to the remaining work, including this update skill
+if it changed. Continue from the current step using the updated guidance, keeping the original baseline, user choices, and
+completed changes in mind. Check for newly required steps without repeating completed mutations or expanding the approved
+scope.
 
 ## Verify the base update
 
@@ -51,7 +72,8 @@ change.
 Run the consumer's documented full verification. Read its scripts first; prefer an aggregate check, otherwise run the
 non-watch format, lint, typecheck, test, and build commands that exist.
 
-Check the dependency and lockfile, skill markers, `AGENTS.md` fence, hook registrations, and final update-owned path list.
+Verify that the installed package, manifest, and lockfile match the recorded target version. A mismatch is a base-update
+conflict. Check skill markers, the `AGENTS.md` fence, hook registrations, and the final update-owned path list.
 
 Report before the first commit:
 
@@ -72,14 +94,20 @@ commit workflow.
 
 ## Audit the consumer migration
 
-Start this phase only after the base update commit exists. Use the pre-update package metadata as the comparison baseline;
-don't assume a changelog exists. Compare the old and new package metadata, current generated docs, types, and examples. Run
-the full verification again.
+Start this phase only after the base update commit exists. Read `node_modules/@imfusion/web-ui/CHANGELOG.md`: every release
+section after the pre-update version, up to and including the new one. Each section's highlights, migration guide, and
+`Breaking` entries are the release's own account of what changed. Then compare the old and new package metadata, current
+generated docs, types, and examples, and run the full verification again.
 
-Report separately:
+This phase reads and reports: every file stays as it is until the person approves the migration. Open the report with the
+releases read, then report separately:
 
-- compatibility fixes required by changed imports or types;
+- migrations: every `Breaking` entry and migration step, mapped to the call sites it affects here and the fix the changelog
+  shows; a step with no matching code is reported as not applicable;
+- compatibility fixes required by changed imports or types that the changelog does not cover;
 - existing uses affected by a changed API or documented behavior;
+- suggestions: new features from the highlights and `Added` entries that fit what the project already builds, each with the
+  project code it would serve; a suggestion stays a proposal until the person asks for it;
 - custom components that overlap with a current Web UI primitive, with evidence and any behavior to preserve.
 
 Do not infer a replacement from a name. Inspect the implementation, styles, and call sites. If there are no findings, say so

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

@@ -15,7 +15,9 @@ when it is used across many call sites so API movement stays local.
 
 ## Ask only what matters
 
-If the request is vague and a human can answer, ask these questions one at a time and stop once the choice is clear:
+When the request is vague and a human is there to answer, the first reply is a question and nothing else. No default, no
+options table, no recommendation held in reserve: any of those end the conversation, because the person now has an answer and
+no reason to reply. Ask one at a time, and stop once the choice is clear:
 
 1. Who uses the screen, and how often?
 2. What is its one primary action?
@@ -23,8 +25,9 @@ If the request is vague and a human can answer, ask these questions one at a tim
 4. What should users see when it is empty, loading, or failing?
 5. Is it a full page or part of another flow?
 
-If the prompt already answers a question, do not ask it again. If nobody can answer, make the conservative choice and state
-the assumption.
+A request that names the component, where it goes, and its initial state is specified: build it with no question. If the
+prompt already answers a question, do not ask it again. Only when nobody is there to answer, or a question has gone
+unanswered, make the conservative choice and state the assumption.
 
 ## Choose a surface
 

package/src/llms/tokens.gen.json

@@ -153,7 +153,7 @@
       },
       {
         "name": "--imf-ui-color-bg-minor",
-        "value": "light-dark( oklch( calc(var(--imf-ui-color-surface-bg-luma-light) - 0.04) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-minor-hue) ), oklch( calc(var(--imf-ui-color-surface-bg-luma-dark) + 0.04) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-minor-hue) ) )"
+        "value": "light-dark( oklch( calc(var(--imf-ui-color-surface-bg-luma-light) - 0.05) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-minor-hue) ), oklch( calc(var(--imf-ui-color-surface-bg-luma-dark) + 0.05) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-minor-hue) ) )"
       },
       {
         "name": "--imf-ui-color-bg-negative",
@@ -177,7 +177,7 @@
       },
       {
         "name": "--imf-ui-color-bg-support",
-        "value": "light-dark( oklch( calc(var(--imf-ui-color-surface-bg-luma-light) - 0.02) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-support-hue) ), oklch( calc(var(--imf-ui-color-surface-bg-luma-dark) + 0.02) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-support-hue) ) )"
+        "value": "light-dark( oklch( calc(var(--imf-ui-color-surface-bg-luma-light) - 0.025) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-support-hue) ), oklch( calc(var(--imf-ui-color-surface-bg-luma-dark) + 0.025) var(--imf-ui-color-surface-chroma) var(--imf-ui-color-surface-support-hue) ) )"
       },
       {
         "name": "--imf-ui-color-bg-warning",
@@ -253,7 +253,7 @@
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-dark",
-        "value": "0.65"
+        "value": "0.6"
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-light",
@@ -265,7 +265,7 @@
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-dark",
-        "value": "0.75"
+        "value": "0.8"
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-light",
@@ -313,7 +313,7 @@
       },
       {
         "name": "--imf-ui-color-surface-bg-luma-dark",
-        "value": "0.205"
+        "value": "0.35"
       },
       {
         "name": "--imf-ui-color-surface-bg-luma-light",
@@ -487,6 +487,22 @@
         "name": "--imf-ui-font-family-ui",
         "value": "var(--imf-ui-font-family-sans)"
       },
+      {
+        "name": "--imf-ui-font-letterspacing-body",
+        "value": "clamp(-0.0125rem, -0.0094rem - 0.0026vw, -0.01rem)"
+      },
+      {
+        "name": "--imf-ui-font-letterspacing-brand",
+        "value": "-0.02em"
+      },
+      {
+        "name": "--imf-ui-font-letterspacing-display",
+        "value": "clamp(-0.18rem, -0.0323rem - 0.1231vw, -0.06rem)"
+      },
+      {
+        "name": "--imf-ui-font-letterspacing-hero",
+        "value": "-0.04em"
+      },
       {
         "name": "--imf-ui-font-letterspacing-loose",
         "value": "0.1em"
@@ -499,6 +515,10 @@
         "name": "--imf-ui-font-letterspacing-tight",
         "value": "-0.025em"
       },
+      {
+        "name": "--imf-ui-font-letterspacing-title",
+        "value": "clamp(-0.04rem, -0.0062rem - 0.0282vw, -0.0125rem)"
+      },
       {
         "name": "--imf-ui-font-letterspacing-wide",
         "value": "0.06em"
@@ -531,6 +551,30 @@
         "name": "--imf-ui-font-lineheight-5",
         "value": "2"
       },
+      {
+        "name": "--imf-ui-font-lineheight-body",
+        "value": "clamp(1.5rem, 1.4135rem + 0.3846vw, 1.875rem)"
+      },
+      {
+        "name": "--imf-ui-font-lineheight-display",
+        "value": "clamp(2rem, 1.4231rem + 2.5641vw, 4.5rem)"
+      },
+      {
+        "name": "--imf-ui-font-lineheight-hero",
+        "value": "1"
+      },
+      {
+        "name": "--imf-ui-font-lineheight-lead",
+        "value": "1.3"
+      },
+      {
+        "name": "--imf-ui-font-lineheight-metadata",
+        "value": "1.15"
+      },
+      {
+        "name": "--imf-ui-font-lineheight-title",
+        "value": "clamp(2.0125rem, 1.8134rem + 0.8846vw, 2.5875rem)"
+      },
       {
         "name": "--imf-ui-font-size-0",
         "value": "0.75rem"
@@ -575,9 +619,13 @@
         "name": "--imf-ui-font-size-8",
         "value": "3.5rem"
       },
+      {
+        "name": "--imf-ui-font-size-body",
+        "value": "clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem)"
+      },
       {
         "name": "--imf-ui-font-size-fluid-0",
-        "value": "clamp(1.125rem, 4.5vw, 1.25rem)"
+        "value": "clamp(1.125rem, 4.5vw, 1.3125rem)"
       },
       {
         "name": "--imf-ui-font-size-fluid-1",
@@ -585,11 +633,15 @@
       },
       {
         "name": "--imf-ui-font-size-fluid-2",
-        "value": "clamp(1.25rem, 6vw, 1.875rem)"
+        "value": "clamp(1.75rem, 1.5769rem + 0.7692vw, 2.25rem)"
       },
       {
         "name": "--imf-ui-font-size-fluid-3",
-        "value": "clamp(2rem, 9vw, 2.75rem)"
+        "value": "clamp(2rem, 1.1154rem + 2.8205vw, 4.5rem)"
+      },
+      {
+        "name": "--imf-ui-font-size-hero",
+        "value": "clamp(3rem, 1.8rem + 6vw, 9rem)"
       },
       {
         "name": "--imf-ui-font-weight-1",
@@ -626,6 +678,18 @@
       {
         "name": "--imf-ui-font-weight-9",
         "value": "900"
+      },
+      {
+        "name": "--imf-ui-font-weight-medium",
+        "value": "500"
+      },
+      {
+        "name": "--imf-ui-font-weight-regular",
+        "value": "450"
+      },
+      {
+        "name": "--imf-ui-font-weight-strong",
+        "value": "600"
       }
     ],
     "inner-*": [
@@ -717,23 +781,23 @@
       },
       {
         "name": "--imf-ui-shadow-2",
-        "value": "calc(4px * var(--imf-ui-shadow-x)) calc(4px * var(--imf-ui-shadow-y)) calc(4px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 1%), transparent)"
+        "value": "calc(4px * var(--imf-ui-shadow-x)) calc(4px * var(--imf-ui-shadow-y)) calc(4px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-3",
-        "value": "calc(6px * var(--imf-ui-shadow-x)) calc(6px * var(--imf-ui-shadow-y)) calc(6px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 2%), transparent)"
+        "value": "calc(6px * var(--imf-ui-shadow-x)) calc(6px * var(--imf-ui-shadow-y)) calc(6px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-4",
-        "value": "calc(8px * var(--imf-ui-shadow-x)) calc(8px * var(--imf-ui-shadow-y)) calc(8px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 3%), transparent)"
+        "value": "calc(8px * var(--imf-ui-shadow-x)) calc(8px * var(--imf-ui-shadow-y)) calc(8px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-5",
-        "value": "calc(12px * var(--imf-ui-shadow-x)) calc(12px * var(--imf-ui-shadow-y)) calc(12px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 4%), transparent)"
+        "value": "calc(12px * var(--imf-ui-shadow-x)) calc(12px * var(--imf-ui-shadow-y)) calc(12px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-6",
-        "value": "calc(16px * var(--imf-ui-shadow-x)) calc(16px * var(--imf-ui-shadow-y)) calc(16px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity) + 5%), transparent)"
+        "value": "calc(16px * var(--imf-ui-shadow-x)) calc(16px * var(--imf-ui-shadow-y)) calc(16px * var(--imf-ui-shadow-blur-scale)) var(--imf-ui-shadow-spread) color-mix(in oklch, var(--imf-ui-shadow-color) calc(var(--imf-ui-shadow-intensity)), transparent)"
       },
       {
         "name": "--imf-ui-shadow-angle",
@@ -753,7 +817,7 @@
       },
       {
         "name": "--imf-ui-shadow-intensity",
-        "value": "12%"
+        "value": "15%"
       },
       {
         "name": "--imf-ui-shadow-softness",
@@ -883,5 +947,5 @@
       }
     ]
   },
-  "count": 215
+  "count": 231
 }