From ff0a70381e238e7799b2bcfd09e479c76b037270 Mon Sep 17 00:00:00 2001 From: Austin Pickett Date: Tue, 19 May 2026 07:47:55 -0400 Subject: [PATCH] fix(web): consume bundled design system assets (#26391) * fix: update design system package, replace bg image, remove sync assets * fix(web): update bundled asset metadata * fix(web): normalize npm lockfile metadata * fix(nix): refresh npm lockfile hashes * chore(ci): trigger PR checks * fix(web): declare motion peer dependency * fix(nix): refresh npm lockfile hashes * chore(ci): trigger PR checks after dependency update * fix(web): restore cross-platform lockfile entries * fix(nix): refresh npm lockfile hashes * chore(ci): trigger PR checks after lockfile restore --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- nix/web.nix | 2 +- web/package-lock.json | 115 ++++++++++++++++++++++++++++---- web/package.json | 6 +- web/scripts/sync-assets.mjs | 27 -------- web/src/components/Backdrop.tsx | 6 +- 5 files changed, 108 insertions(+), 48 deletions(-) delete mode 100644 web/scripts/sync-assets.mjs diff --git a/nix/web.nix b/nix/web.nix index f335bb9fa9c..690acb7e370 100644 --- a/nix/web.nix +++ b/nix/web.nix @@ -4,7 +4,7 @@ let src = ../web; npmDeps = pkgs.fetchNpmDeps { inherit src; - hash = "sha256-H98reD4N++WroZOQ9NFrKtC5aiHj6KqaYDzUOiZA2bE="; + hash = "sha256-FL2E8Vv8gyeClEa5b/pHn/ekWoHWTd4YwzV6zhLEos4="; }; npm = hermesNpmLib.mkNpmPassthru { folder = "web"; attr = "web"; pname = "hermes-web"; }; diff --git a/web/package-lock.json b/web/package-lock.json index 149aa24e422..171ccf9e0bc 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,7 +8,7 @@ "name": "web", "version": "0.0.0", "dependencies": { - "@nous-research/ui": "^0.10.0", + "@nous-research/ui": "0.14.0", "@observablehq/plot": "^0.6.17", "@react-three/fiber": "^9.6.0", "@tailwindcss/vite": "^4.2.1", @@ -23,6 +23,7 @@ "gsap": "^3.15.0", "leva": "^0.10.1", "lucide-react": "^0.577.0", + "motion": "^12.38.0", "react": "^19.2.4", "react-dom": "^19.2.4", "react-router-dom": "^7.14.1", @@ -1080,17 +1081,17 @@ } }, "node_modules/@nous-research/ui": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@nous-research/ui/-/ui-0.10.0.tgz", - "integrity": "sha512-gzB7rjzW4F9C1YkILR9EvCk6Ul6cWhqEeb2HzuRJK4NiC1gHeQ2D2Pr+15qbMghV4SuTLJmwLSLvbH76nRA5Jw==", + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@nous-research/ui/-/ui-0.14.0.tgz", + "integrity": "sha512-tfpE6jGOxE5oVBab/dTSepOudy/+Xep3gJ6NCFriYJvdtQBGXcqsi4mCaVPiNNaS/ZFf4/10dnl/oJTb6DtLKg==", "license": "MIT", "dependencies": { - "@nanostores/react": "^1.0.0", + "@nanostores/react": "^1.1.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "nanostores": "^1.0.1", - "sanitize-html": "^2.16.0", - "tailwind-merge": "^3.3.1", + "nanostores": "^1.3.0", + "sanitize-html": "^2.17.4", + "tailwind-merge": "^3.6.0", "tw-animate-css": "^1.4.0", "unicode-animations": "^1.0.3" }, @@ -1099,6 +1100,7 @@ "@react-three/fiber": "^9.4.0", "gsap": "^3.13.0", "leva": "^0.10.1", + "motion": "^12.38.0", "react": "^19.0.0", "react-dom": "^19.0.0", "three": "^0.180.0" @@ -5393,15 +5395,16 @@ "license": "MIT" }, "node_modules/sanitize-html": { - "version": "2.17.3", - "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.3.tgz", - "integrity": "sha512-Kn4srCAo2+wZyvCNKCSyB2g8RQ8IkX/gQs2uqoSRNu5t9I2qvUyAVvRDiFUVAiX3N3PNuwStY0eNr+ooBHVWEg==", + "version": "2.17.4", + "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.4.tgz", + "integrity": "sha512-2HW7v2ol/uAM7sX4hbD8Z59OGWmAPrvjL8E71UWlBcj6m+kcF6ilQBLny+cIgY214QJeJT5tQuxKKqX0SQqjGQ==", "license": "MIT", "dependencies": { "deepmerge": "^4.2.2", "escape-string-regexp": "^4.0.0", "htmlparser2": "^10.1.0", "is-plain-object": "^5.0.0", + "launder": "^1.7.1", "parse-srcset": "^1.0.2", "postcss": "^8.3.11" } @@ -5554,9 +5557,9 @@ } }, "node_modules/tailwind-merge": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz", - "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz", + "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==", "license": "MIT", "funding": { "type": "github", @@ -5935,6 +5938,90 @@ "optional": true } } + }, + "node_modules/dayjs": { + "version": "1.11.20", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz", + "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==", + "license": "MIT" + }, + "node_modules/framer-motion": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz", + "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.38.0", + "motion-utils": "^12.36.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/launder": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/launder/-/launder-1.7.1.tgz", + "integrity": "sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==", + "license": "MIT", + "dependencies": { + "dayjs": "^1.11.7" + } + }, + "node_modules/motion": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz", + "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==", + "license": "MIT", + "peer": true, + "dependencies": { + "framer-motion": "^12.38.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz", + "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.36.0" + } + }, + "node_modules/motion-utils": { + "version": "12.36.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz", + "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==", + "license": "MIT" } } } diff --git a/web/package.json b/web/package.json index 04cbe290b37..b8608499f8c 100644 --- a/web/package.json +++ b/web/package.json @@ -4,16 +4,13 @@ "version": "0.0.0", "type": "module", "scripts": { - "sync-assets": "node scripts/sync-assets.mjs", - "predev": "npm run sync-assets", - "prebuild": "npm run sync-assets", "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { - "@nous-research/ui": "^0.10.0", + "@nous-research/ui": "0.14.0", "@observablehq/plot": "^0.6.17", "@react-three/fiber": "^9.6.0", "@tailwindcss/vite": "^4.2.1", @@ -28,6 +25,7 @@ "gsap": "^3.15.0", "leva": "^0.10.1", "lucide-react": "^0.577.0", + "motion": "^12.38.0", "react": "^19.2.4", "react-dom": "^19.2.4", "react-router-dom": "^7.14.1", diff --git a/web/scripts/sync-assets.mjs b/web/scripts/sync-assets.mjs deleted file mode 100644 index 19b0bafb6aa..00000000000 --- a/web/scripts/sync-assets.mjs +++ /dev/null @@ -1,27 +0,0 @@ -#!/usr/bin/env node -// Cross-platform replacement for the previous shell pipeline: -// -// rm -rf public/fonts public/ds-assets -// && cp -r node_modules/@nous-research/ui/dist/fonts public/fonts -// && cp -r node_modules/@nous-research/ui/dist/assets public/ds-assets -// -// `rm -rf` / `cp -r` don't exist on Windows cmd.exe, so `npm run build` -// (invoked from Python via subprocess → cmd.exe) failed before Vite ran. -// Using Node's stdlib fs keeps this dependency-free and platform-neutral. - -import { cpSync, rmSync } from "node:fs"; -import { dirname, resolve } from "node:path"; -import { fileURLToPath } from "node:url"; - -const webRoot = resolve(dirname(fileURLToPath(import.meta.url)), ".."); -const uiDist = resolve(webRoot, "node_modules", "@nous-research", "ui", "dist"); - -const targets = [ - { from: resolve(uiDist, "fonts"), to: resolve(webRoot, "public", "fonts") }, - { from: resolve(uiDist, "assets"), to: resolve(webRoot, "public", "ds-assets") }, -]; - -for (const { from, to } of targets) { - rmSync(to, { recursive: true, force: true }); - cpSync(from, to, { recursive: true }); -} diff --git a/web/src/components/Backdrop.tsx b/web/src/components/Backdrop.tsx index 93d18fa92ac..d7471c4c2f8 100644 --- a/web/src/components/Backdrop.tsx +++ b/web/src/components/Backdrop.tsx @@ -1,5 +1,7 @@ import { useGpuTier } from "@nous-research/ui/hooks/use-gpu-tier"; +import fillerBgUrl from "@nous-research/ui/assets/filler-bg0.webp"; + /** * Replicates the visual layer stack of `` from * `@nous-research/ui` without pulling in its leva / gsap / three peer deps. @@ -10,7 +12,7 @@ import { useGpuTier } from "@nous-research/ui/hooks/use-gpu-tier"; * `ThemeProvider` can repaint the stack without remounting. * * z-1 bg = `var(--background-base)`, mix-blend-mode: difference - * z-2 filler-bg jpeg, inverted, opacity 0.033, difference + * z-2 bundled filler-bg WebP, inverted, opacity 0.033, difference * z-99 warm top-left vignette (`var(--warm-glow)`), opacity 0.22, lighten * z-101 noise grain (SVG, ~55% opacity × `--noise-opacity-mul`, * color-dodge) — gated on GPU tier @@ -58,7 +60,7 @@ export function Backdrop() { alt="" className="h-[150dvh] w-auto min-w-[100dvw] object-cover object-top-left invert theme-default-filler" fetchPriority="low" - src="/ds-assets/filler-bg0.jpg" + src={fillerBgUrl} />