feat!: v5 (#159)

* chore: testing refactor events

* chore: force install corepack in CI workflow

* chore(deps): bump dependencies to latest versions

* chore: release v4.0.0-next.0

* feat: add pointer events to AnimatedDonnut and update core dependency

* chore: update core and cientos to next

* chore: bump version to 4.1.0-next.0 in package.json

* chore: update @Tresjs dependencies to stable versions and bump @types/three

* chore: update @Tresjs and related dependencies to latest next versions

* chore: release v4.1.0-next.1

* feat!: upgrade Nuxt 4 (#171)

- Updated @nuxt/kit, @nuxt/schema, and nuxt to version 4.0.0-alpha.4.
- Bumped vue to version 3.5.17 and added vue-tsc as a dev dependency.
- Updated pnpm lock files to reflect the changes in dependencies.

* feat: v5-tres-devtools (#172)

* feat!: new devtools

* chore: playground update with nuxt ui and fixed nuxt devtools client

* feat(client): devtools client with nuxt ui

- Introduced `app.config.ts` for UI configuration with color and card styles.
- Added `TheHeader.vue` component for consistent header layout with logo and navigation.
- Updated `nuxt.config.ts` to include UI Pro license configuration.
- Adjusted header height in `main.css` for improved layout.
- Enhanced `index.vue` to utilize `TheHeader` and implement tabs for scene graph and performance monitoring.

* refactor: graph utils and inspector graph

* feat(client): enhance scene graph inspector with inline editing and clipboard functionality

- Introduced reactive state for inline editing of inspector values.
- Added methods for incrementing, decrementing, and updating boolean values.
- Implemented clipboard copy functionality for values and property paths.
- Updated `getInspectorGraph` to include property paths for better context.
- Enhanced `InspectorNode` interface to support full property paths.

* feat(client): enhance scene graph component with improved state management and UI feedback

- Updated `onUpdateModelValue` function to include type annotations for better TypeScript support.
- Introduced `itemsForSceneGraph` computed property to streamline scene graph data handling.
- Added a conditional alert in the template to inform users when no scene is available.
- Enhanced `SceneGraphObject` interface to include a unique `key` property for better identification.
- Updated `getInspectorGraph` function to set `defaultExpanded` property for root nodes, improving UI behavior.
- Refactored `useDevtoolsHook` to handle empty scene cases more gracefully.

* feat(client): add highlight mesh functionality and improve scene graph interaction

- Introduced `createHighlightMesh` function to generate a highlight mesh for selected objects.
- Enhanced `updateSelectedObject` method to manage highlight mesh addition and removal.
- Added `HighlightMesh` class for pulsing effect on highlighted objects.
- Updated scene graph component to improve user interaction with item selection.
- Adjusted template structure for better responsiveness and interaction handling.

* feat(client): add TreeInspector component for enhanced object inspection

- Introduced `TreeInspector.vue` to provide a structured view of inspector nodes with expandable/collapsible functionality.
- Implemented inline editing for various data types, including strings, numbers, and booleans.
- Added clipboard functionality for copying values and paths directly from the inspector.
- Enhanced scene graph interaction by integrating `TreeInspector` into the scene graph component, improving user experience.
- Updated `index.vue` to utilize the new `TreeInspector` for better data representation and interaction.

* feat(client): add TreeGraph component for hierarchical object representation

- Introduced `TreeGraph.vue` to display a hierarchical view of scene graph objects with expandable/collapsible nodes.
- Implemented selection handling for objects, emitting events for parent components.
- Enhanced visual representation with icons and badges for additional object information.
- Updated `index.vue` to integrate `TreeGraph`, improving scene graph interaction and user experience.

* feat(client): enhance PerformanceMonitor component with improved UX and detailed statistics

- Added computed properties for performance and memory status to provide real-time feedback on system performance.
- Refactored the template structure to utilize `UCard` and `UBadge` components for better visual representation.
- Introduced detailed statistics for memory and render performance, including current and peak memory usage.
- Updated `index.vue` to integrate the `PerformanceMonitor`, enhancing the overall user experience in monitoring performance metrics.

* feat: performance tab

* feat(client): add AssetsMonitor component for asset management and visualization

- Introduced `AssetsMonitor.vue` to display and manage assets in the scene, including textures, geometries, and materials.
- Implemented computed properties for asset statistics and grouping by type for better organization.
- Added functionality to generate geometry previews and handle asset changes dynamically.
- Enhanced the template structure with `UCard` components for a visually appealing layout.
- Created utility functions for memory size formatting and asset icon/color retrieval.
- Integrated asset statistics display for improved user feedback on asset usage and memory consumption.

* refactor(client): clean up AssetsMonitor and asset utility functions

- Removed unused geometries extraction logic from `AssetsMonitor.vue` and `assets.ts` to streamline asset management.
- Simplified the template structure in `AssetsMonitor.vue` by eliminating the geometries display section, focusing on memory usage and materials.
- Enhanced code clarity and maintainability by removing redundant functions and comments related to geometries.

* feat(client): enhanced asset monitor

- Updated `@Tresjs/core` dependency to a specific commit URL for better stability.
- Removed the obsolete `global.d.ts` file and replaced it with a new `env.d.ts` file to define the `Window` interface for devtools messaging.
- Refactored `AssetsMonitor.vue` to remove geometry handling and introduced a new `ModelAssetCard` component for better organization of model assets.
- Enhanced asset utility functions to support model types and improved memory formatting.
- Cleaned up unused code and improved type definitions for better maintainability.

* feat(inspector): add GeometryBadge and MaterialBadge components for enhanced property visualization
feat(inspector): implement Props component to display object properties in inspector
feat(inspector): create Tree component for hierarchical object representation
refactor(scene-graph): update inspector integration in scene graph component
refactor(devtools): enhance message handling for performance and context updates
refactor(graph): export iconsMap for better accessibility
refactor(nuxt-stones): clean up unused orbs references in NuxtStones component
feat(simple-page): add a cyan sphere mesh to the simple example page

* refactor(devtools): clean up unused asset handling and update core dependency

* fix(inspector): update value class color from green to primary for consistency

* feat(inspector): integrate EditableNumber component for enhanced value editing in Props and Tree components

* fix(workflow): change build command from prepack to build for consistency

* refactor(devtools): remove unused imports and clean up code in various components

* refactor(components): update input variants to 'soft' for consistency in EditableNumber and Tree components

* feat(inspector): add button for toggling boolean property values in Props component

* feat(inspector): enhance copy functionality in Props and Tree components

* fix(inspector): simplify copy functionality by removing unnecessary type checks for string values

* feat(inspector): implement clipboard copy functionality for Props and Tree components

* feat(inspector): add support for copying values as Euler and enhance handling of Euler and Vector3 objects

* feat(inspector): add support for copying Quaternion values and enhance handling in Props and Tree components

* refactor(inspector): clean up unused code and simplify clipboard functionality in Props and Tree components

* feat(components): add EditableColor component for color editing and enhance Props component to utilize it

* refactor(inspector): remove unused import in Tree component and improve type safety in scene-graph component

* chore(package): add @nuxt/devtools-kit to dependencies for improved development tooling

* chore(workflow): add NUXT_UI_PRO_LICENSE secret to GitHub Actions environment for Nuxt UI Pro license management

* chore: update dependencies to latest stable versions

- Upgraded @nuxt/kit to 4.1.2 and @Tresjs/core to 5.0.0-rc.0.
- Bumped mlly to 1.8.0, pkg-types to 2.3.0, and sirv to 3.0.2.
- Updated devDependencies: @nuxt/devtools to 2.6.4, @nuxt/devtools-ui-kit to 2.6.4, @nuxt/eslint-config to 1.9.0, @nuxt/module-builder to 1.0.2, and @nuxt/schema to 4.1.2.
- Updated vue to 3.5.21 and vue-tsc to 3.0.7.
- Updated types for three to 0.180.0 and @vueuse/nuxt to 13.9.0.
- Adjusted pnpm-lock.yaml to reflect these changes.

* chore: update release hooks and package manager version

- Changed the `after:bump` hook in `.release-it.json` from `pnpm run prepack` to `pnpm run build` for consistency in the release process.
- Updated the `packageManager` version in `package.json` from `[email protected]` to `[email protected]` to utilize the latest features and improvements.

* chore: release v5.0.0-rc.0

* fix: integrate useAttrs composable in TresCanvas component

- Added `useAttrs` import to enhance attribute handling in the `TresCanvas.client.vue` component, allowing for better integration of attributes passed to the component.

* chore: release v5.0.0-rc.1

* chore: update dependencies to latest stable versions

- Upgraded @Tresjs/core and @Tresjs/cientos to version 5.0.0.
- Updated @nuxt/devtools and @nuxt/devtools-ui-kit to version 2.6.5.
- Bumped eslint to version 9.36.0, typescript to version 5.9.2, and playwright to version 1.55.0.
- Adjusted @types/node version to 24.5.2 for compatibility.
- Updated pnpm-lock.yaml to reflect these changes.

Author: alvarosabu

.github/workflows/pkg.pr.new.yml

@@ -9,6 +9,7 @@ on:
 env:
   PNPM_CACHE_FOLDER: .pnpm-store
   HUSKY: 0 # Bypass husky commit hook for CI
+  NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
 
 permissions: {}
 
@@ -34,5 +35,5 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build
-        run: pnpm prepack
+        run: pnpm build
       - run: pnpx pkg-pr-new publish --compact --pnpm

.gitignore

@@ -24,6 +24,8 @@ dist
 .env
 .netlify
 
+**/.env
+
 # Env
 .env
 

.release-it.json

@@ -14,7 +14,7 @@
   },
   "hooks": {
     "before:init": ["pnpm run lint"],
-    "after:bump": "pnpm run prepack",
+    "after:bump": "pnpm run build",
     "after:git:release": "echo After git push, before github release",
     "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
   }

.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "client: chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "server: nuxt",
+      "outputCapture": "std",
+      "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.mjs",
+      "args": [
+        "dev playground"
+      ],
+    }
+  ],
+  "compounds": [
+    {
+      "name": "fullstack: nuxt",
+      "configurations": [
+        "server: nuxt",
+        "client: chrome"
+      ]
+    }
+  ]
+}

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [5.0.0-rc.1](https://github.com/Tresjs/nuxt/compare/5.0.0-rc.0...5.0.0-rc.1) (2025-09-20)
+
+### Bug Fixes
+
+* integrate useAttrs composable in TresCanvas component ([16f12e7](https://github.com/Tresjs/nuxt/commit/16f12e79334c6dcbd3d78412838b41a00a47185d))
+
+## [5.0.0-rc.0](https://github.com/Tresjs/nuxt/compare/4.1.0-next.1...5.0.0-rc.0) (2025-09-20)
+
+### ⚠ BREAKING CHANGES
+
+* upgrade Nuxt 4 (#171)
+
+### Features
+
+* upgrade Nuxt 4 ([#171](https://github.com/Tresjs/nuxt/issues/171)) ([2cb9e6b](https://github.com/Tresjs/nuxt/commit/2cb9e6b624cf1714edaa0b05be768ca99a4d32dc))
+* v5-tres-devtools ([#172](https://github.com/Tresjs/nuxt/issues/172)) ([b86f224](https://github.com/Tresjs/nuxt/commit/b86f224e189f83600646099bef3348f7c7a8a893))
+
+## [4.1.0-next.1](https://github.com/Tresjs/nuxt/compare/4.0.0...4.1.0-next.1) (2025-06-26)
+
+### Features
+
+* add pointer events to AnimatedDonnut and update core dependency ([8b6693f](https://github.com/Tresjs/nuxt/commit/8b6693fc55adc215c3381086e819b9f05489751b))
+## [4.0.0-next.0](https://github.com/Tresjs/nuxt/compare/4.0.0...4.1.0-next.1) (2025-02-22)
+
 ## [4.0.0](https://github.com/Tresjs/nuxt/compare/3.0.8...4.0.0) (2025-05-25)
 
 ### ⚠ BREAKING CHANGES
@@ -14,6 +38,12 @@
 
 * update TypeScript error comments in ProgramsModule.vue for clarity ([3e58130](https://github.com/Tresjs/nuxt/commit/3e58130dfb94b44a1f12323bf432c7cf93bc6220))
 
+## [4.0.0-next.0](https://github.com/tresjs/nuxt/compare/3.0.7...4.0.0-next.0) (2025-02-22)
+
+### Bug Fixes
+
+* **deps:** update dependency @tresjs/nuxt to v3.0.7 ([#106](https://github.com/tresjs/nuxt/issues/106)) ([8a73538](https://github.com/tresjs/nuxt/commit/8a735385edffdeda2fb12fa2cbe51376008ae39f))
+* **deps:** update dependency typescript to v5.6.2 ([#136](https://github.com/tresjs/nuxt/issues/136)) ([a32ec04](https://github.com/tresjs/nuxt/commit/a32ec043fe65e1fb396a42a206eb32b3cb6df6a3))
 ## [3.0.8](https://github.com/Tresjs/nuxt/compare/3.0.7...3.0.8) (2025-02-25)
 
 ### Bug Fixes

client/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

client/app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'teal',
+      accent: 'yellow',
+      neutral: 'zinc',
+    },
+    card: {
+      slots: {
+        root: 'hover:bg-linear-[115deg,#272727 .06%,#171717]',
+        body: 'p-2 sm:p-3',
+      },
+    },
+  },
+})

client/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLayout>
+  <UApp>
     <NuxtPage />
-  </NuxtLayout>
+  </UApp>
 </template>

client/assets/css/main.css

@@ -0,0 +1,61 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme static {
+  --font-display: 'Manrope', sans-serif;
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'Fira Code', monospace;
+  --breakpoint-3xl: 1920px;
+  --ui-pattern-fg: color-mix(in oklab,var(--ui-text)5%,transparent);
+  --ui-pattern-bg: repeating-linear-gradient(315deg,var(--ui-pattern-fg)0,var(--ui-pattern-fg)1px,transparent 0,transparent 50%);
+
+  /* Technical blueprint styles */
+  --ui-line-gap: 5px;
+  --ui-line-width: 1px;
+  --ui-line-offset: 172px;
+  --ui-line-color: var(--color-gray-200);
+
+  /* Teal Palette */
+  --color-teal-50: #f2fbf8;
+  --color-teal-100: #d3f4ea;
+  --color-teal-200: #a6e9d6;
+  --color-teal-300: #82dbc5;
+  --color-teal-400: #44bda2;
+  --color-teal-500: #2ba189;
+  --color-teal-600: #20816f;
+  --color-teal-700: #1d685b;
+  --color-teal-800: #1c534b;
+  --color-teal-900: #1b463f;
+  --color-teal-950: #0a2925;
+
+  /* Yellow/Brown Palette */
+  --color-yellow-50: #fff8eb;
+  --color-yellow-100: #feeac7;
+  --color-yellow-200: #fdd48a;
+  --color-yellow-300: #fbb03b;
+  --color-yellow-400: #fa9e25;
+  --color-yellow-500: #f47a0c;
+  --color-yellow-600: #b85607;
+  --color-yellow-700: #b3390a;
+  --color-yellow-800: #922b0e;
+  --color-yellow-900: #78250f;
+  --color-yellow-950: #451003;
+}
+
+:root {
+  --ui-header-height: 49px;
+}
+
+.dark {
+  --ui-line-color: var(--color-gray-800);
+}
+
+.pattern-bg {
+  background-image: var(--ui-pattern-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
+
+.noise-bg {
+  background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}