@crapthings/run3d 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +3 -2
  2. package/package.json +4 -2
  3. package/template/AGENTS.md +18 -6
  4. package/template/docs/headless-ui.md +35 -0
  5. package/template/index.html +3 -1
  6. package/template/package.json +11 -10
  7. package/template/pnpm-lock.yaml +303 -281
  8. package/template/public/favicon.ico +0 -0
  9. package/template/public/favicon.svg +8 -0
  10. package/template/src/App.jsx +2 -1
  11. package/template/src/Scenes/index.jsx +28 -32
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # run3d
2
2
 
3
- Create a 3D project in one command. The starter scene has a grid and a box ready to edit.
3
+ Create a 3D project in one command. The starter scene recreates the run3d icon with a green cube and speed lines, ready to edit.
4
4
 
5
5
  As models like GPT-6 Astra grow more capable at building 3D experiences, the distance from an idea to a working prototype keeps shrinking. I have new ideas every day, and I want to spend that energy creating. run3d brings my go-to tools for brainstorming and experimentation into one ready-to-use starter, so I can jump straight into building, testing ideas, and discovering what works.
6
6
 
7
7
  ## Usage
8
8
 
9
- Requires Node.js `^20.19.0 || >=22.12.0` and pnpm.
9
+ Requires Node.js `>=24` and pnpm.
10
10
 
11
11
  ```bash
12
12
  npx @crapthings/run3d my-project
@@ -42,6 +42,7 @@ Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit `src/Scenes
42
42
  - [Navcat](https://github.com/isaac-mason/navcat) — builds and queries navmeshes in pure JavaScript, with Three.js helpers.
43
43
  - [FastNoiseLite](https://github.com/Auburn/FastNoiseLite) — generates procedural 2D and 3D noise.
44
44
  - [Three Hex Tiling](https://github.com/Ameobea/three-hex-tiling) — reduces visible repetition in tiled textures.
45
+ - [TSL Hex Tiling](https://github.com/crapthings/tsl-hex-tiling) — reduces texture repetition with Three.js TSL for WebGPU and WebGL 2.
45
46
 
46
47
  ### Data and state
47
48
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.2.5",
6
+ "version": "0.2.7",
7
7
  "description": "From idea to interactive 3D prototype in one command. A JavaScript starter with Vite, React Three Fiber, and tools for creative experimentation.",
8
8
  "type": "module",
9
9
  "bin": {
@@ -12,17 +12,19 @@
12
12
  "files": [
13
13
  "bin",
14
14
  "template/AGENTS.md",
15
+ "template/docs",
15
16
  "template/gitignore",
16
17
  "template/index.html",
17
18
  "template/jsconfig.json",
18
19
  "template/npmrc",
19
20
  "template/package.json",
20
21
  "template/pnpm-lock.yaml",
22
+ "template/public",
21
23
  "template/src",
22
24
  "template/vite.config.js"
23
25
  ],
24
26
  "engines": {
25
- "node": "^20.19.0 || >=22.12.0"
27
+ "node": ">=24"
26
28
  },
27
29
  "scripts": {
28
30
  "lint": "standard \"bin/**/*.js\" \"scripts/**/*.js\" \"test/**/*.js\" \"template/src/**/*.{js,jsx}\" template/vite.config.js",
package/template/AGENTS.md CHANGED
@@ -1,17 +1,29 @@
1
1
  # Rules
2
2
 
3
- ## Commands
3
+ ## Architectural Geometry
4
+
5
+ - Use geometric unions or equivalent cleanup at wall intersections and floor/ceiling junctions to remove overlapping coplanar and internal faces, producing a closed shell that avoids Z-fighting; merging meshes alone is insufficient.
6
+
7
+ ## Scene Lighting
8
+
9
+ - Avoid ambient lighting by default. Only add ambient lighting (such as `AmbientLight` or `HemisphereLight`) when explicitly requested by the user.
4
10
 
5
- - Only run `pnpm build`, `pnpm lint`, or `pnpm test` when explicitly requested by the user, and never run `pnpm dev`.
11
+ ## Texture Maps
12
+
13
+ - Reduce visible texture repetition with hex tiling: use `three-hex-tiling` for `MeshStandardMaterial` and `MeshPhysicalMaterial` with `WebGLRenderer`, and `tsl-hex-tiling` for TSL node materials with `WebGPURenderer` (including its WebGL 2 fallback).
6
14
 
7
15
  ## Code Style
8
16
 
9
17
  - Follow JavaScript Standard Style (standard.js) when writing `.js` and `.jsx` files.
18
+ - Explain each top-level declaration's purpose in a one-sentence comment; split it if one sentence cannot explain it clearly.
19
+ - Avoid overengineering: question whether each solution or abstraction is needed for current requirements before implementing it.
20
+ - Write component styles inline with Tailwind utilities in `className`, using arbitrary values when needed; use CSS files only for global setup or styles Tailwind cannot express.
21
+ - Use Zustand for shared state and actions; avoid prop drilling.
10
22
 
11
- ## Scene Lighting
23
+ ## UI Components
12
24
 
13
- - Avoid ambient lighting by default. Only add ambient lighting (such as `AmbientLight` or `HemisphereLight`) when explicitly requested by the user.
25
+ - For menus, dialogs, popovers, tabs, and form controls, consult [docs/headless-ui.md](docs/headless-ui.md) and its official Headless UI links before implementation.
14
26
 
15
- ## Texture Maps
27
+ ## Commands
16
28
 
17
- - When using texture maps, process them with the installed `three-hex-tiling` package to reduce visible texture repetition instead of relying on basic repeating UV tiling alone.
29
+ - Run `pnpm build/lint/test` only on explicit user request; never run `pnpm dev`.
package/template/docs/headless-ui.md ADDED
@@ -0,0 +1,35 @@
1
+ # Headless UI
2
+
3
+ Use the installed `@headlessui/react` package for accessible, unstyled React components. Style them with Tailwind CSS. Read the linked official documentation for component composition, keyboard behavior, and API details before implementing a matching interface.
4
+
5
+ ## Component guide
6
+
7
+ | Interface | Component and official documentation |
8
+ | --- | --- |
9
+ | Action menu | [Menu](https://headlessui.com/react/menu) |
10
+ | Modal, confirmation, or modal drawer | [Dialog](https://headlessui.com/react/dialog) |
11
+ | Floating panel with interactive content | [Popover](https://headlessui.com/react/popover) |
12
+ | Collapsible section | [Disclosure](https://headlessui.com/react/disclosure) |
13
+ | Tabbed panels | [Tabs](https://headlessui.com/react/tabs) |
14
+ | Searchable selection | [Combobox](https://headlessui.com/react/combobox) |
15
+ | Custom selection list | [Listbox](https://headlessui.com/react/listbox) |
16
+ | Native selection control | [Select](https://headlessui.com/react/select) |
17
+ | Mutually exclusive choices | [Radio Group](https://headlessui.com/react/radio-group) |
18
+ | Checked or mixed state | [Checkbox](https://headlessui.com/react/checkbox) |
19
+ | On/off toggle | [Switch](https://headlessui.com/react/switch) |
20
+ | Text entry | [Input](https://headlessui.com/react/input), [Textarea](https://headlessui.com/react/textarea) |
21
+ | Form grouping and labels | [Fieldset](https://headlessui.com/react/fieldset) |
22
+ | Button states | [Button](https://headlessui.com/react/button) |
23
+ | Enter/leave animation | [Transition](https://headlessui.com/react/transition) |
24
+
25
+ ## Implementation
26
+
27
+ - Import named components from `@headlessui/react` and follow each page's component structure.
28
+ - Use `Menu` for actions, `Listbox` for choosing values, and `Combobox` for searchable choices.
29
+ - Provide accessible labels and visible focus states. Style supported states through documented `data-*` attributes or render props.
30
+ - For dialogs, supply `open`, `onClose`, and a `DialogTitle`. Let Headless UI manage focus trapping and dismissal; follow the [Dialog guide](https://headlessui.com/react/dialog) for backdrops, portals, and initial focus.
31
+ - Use the documented `anchor` API for supported floating panels. See [Popover positioning](https://headlessui.com/react/popover#positioning-the-panel).
32
+ - Keep shared values and actions in Zustand; read them where needed. Let Headless UI manage internal interaction state when external control is unnecessary.
33
+ - When rendering custom elements with `as`, forward the props and ref required by Headless UI. See [Menu custom elements](https://headlessui.com/react/menu#rendering-as-different-elements).
34
+
35
+ These links target the official React documentation. Verify APIs against the installed package when documentation and package versions differ.
package/template/index.html CHANGED
@@ -3,7 +3,9 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta name="theme-color" content="#e8edf3" />
6
+ <meta name="theme-color" content="#0f172a" />
7
+ <link rel="icon" href="%BASE_URL%favicon.ico" sizes="any" />
8
+ <link rel="icon" href="%BASE_URL%favicon.svg" type="image/svg+xml" />
7
9
  <title>Run3D</title>
8
10
  </head>
9
11
  <body>
package/template/package.json CHANGED
@@ -3,9 +3,9 @@
3
3
  "private": true,
4
4
  "version": "0.0.0",
5
5
  "type": "module",
6
- "packageManager": "pnpm@12.4.1",
6
+ "packageManager": "pnpm@12.14.0",
7
7
  "engines": {
8
- "node": "^20.19.0 || >=22.12.0"
8
+ "node": ">=24"
9
9
  },
10
10
  "scripts": {
11
11
  "dev": "vite",
@@ -16,9 +16,9 @@
16
16
  "@floating-ui/react": "^0.27.20",
17
17
  "@gsap/react": "^2.1.2",
18
18
  "@headlessui/react": "^2.2.10",
19
- "@react-three/drei": "^10.7.8",
20
- "@react-three/fiber": "^9.7.0",
21
- "@react-three/postprocessing": "^3.1.1",
19
+ "@react-three/drei": "^10.7.9",
20
+ "@react-three/fiber": "^9.8.2",
21
+ "@react-three/postprocessing": "^3.2.0",
22
22
  "@react-three/rapier": "^2.2.0",
23
23
  "@recast-navigation/three": "^0.43.1",
24
24
  "d3": "^7.9.0",
@@ -27,22 +27,23 @@
27
27
  "koota": "^0.6.6",
28
28
  "math": "0.1.0",
29
29
  "navcat": "^0.4.1",
30
- "p5": "^2.3.3",
30
+ "p5": "^2.3.4",
31
31
  "postprocessing": "^6.39.5",
32
32
  "react": "19.2.8",
33
33
  "react-dom": "19.2.8",
34
34
  "react-hotkeys-hook": "^5.3.3",
35
- "react-router": "^7.18.3",
35
+ "react-router": "^8.4.0",
36
36
  "recast-navigation": "^0.43.1",
37
- "three": "^0.186.0",
37
+ "three": "^0.186.1",
38
38
  "three-hex-tiling": "^0.1.5",
39
+ "tsl-hex-tiling": "^0.1.1",
39
40
  "zustand": "^5.0.15"
40
41
  },
41
42
  "devDependencies": {
42
43
  "@tailwindcss/vite": "^4.3.3",
43
- "@vitejs/plugin-react": "^6.1.1",
44
+ "@vitejs/plugin-react": "^6.1.2",
44
45
  "r3f-perf": "^7.2.3",
45
46
  "tailwindcss": "^4.3.3",
46
- "vite": "^8.3.0"
47
+ "vite": "^8.3.4"
47
48
  }
48
49
  }