From 139a4f66d7fe74e8583c2e8fa10c8ce6eee7b193 Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Thu, 20 Aug 2026 16:57:59 -0400 Subject: [PATCH 1/4] chore: rename npm scopes to @mattermix and @shaders --- .changeset/config.json | 4 +- .changeset/stable-hash-backend-parity.md | 2 +- .../resolve-coderabbit-feedback/SKILL.md | 4 +- .github/workflows/ci.yml | 2 +- AGENTS.md | 14 +++---- README.md | 22 +++++----- apps/docs-tests/package.json | 4 +- apps/docs-tests/playwright.config.ts | 4 +- apps/docs-tests/tsconfig.json | 2 +- apps/docs/content/docs/changelog.mdx | 22 +++++----- apps/docs/content/docs/cli.mdx | 10 ++--- apps/docs/content/docs/examples.mdx | 2 +- apps/docs/content/docs/getting-started.mdx | 6 +-- apps/docs/content/docs/guides/animation.mdx | 4 +- apps/docs/content/docs/guides/color.mdx | 2 +- apps/docs/content/docs/guides/perf.mdx | 8 ++-- .../content/docs/guides/shared-scenes.mdx | 2 +- apps/docs/content/docs/react/api.mdx | 20 +++++----- .../docs/react/guides/ssr-and-fallbacks.mdx | 14 +++---- .../content/docs/react/guides/three-r3f.mdx | 4 +- apps/docs/content/docs/reference/matter.mdx | 18 ++++----- apps/docs/next.config.ts | 2 +- apps/docs/package.json | 10 ++--- apps/docs/src/app/components/aurora/params.ts | 2 +- apps/docs/src/app/components/aurora/scene.tsx | 4 +- apps/docs/src/app/components/blobs/params.ts | 2 +- apps/docs/src/app/components/blobs/scene.tsx | 8 ++-- .../app/components/conic-gradient/params.ts | 2 +- .../app/components/conic-gradient/scene.tsx | 4 +- apps/docs/src/app/components/dither/params.ts | 2 +- apps/docs/src/app/components/dither/scene.tsx | 6 +-- .../src/app/components/dot-field/scene.tsx | 4 +- .../src/app/components/fractal-noise/page.tsx | 4 +- .../app/components/fractal-noise/params.ts | 6 +-- .../app/components/fractal-noise/scene.tsx | 6 +-- .../src/app/components/god-rays/scene.tsx | 4 +- apps/docs/src/app/components/grain/params.ts | 2 +- apps/docs/src/app/components/grain/scene.tsx | 6 +-- .../app/components/linear-gradient/params.ts | 2 +- .../app/components/linear-gradient/scene.tsx | 4 +- .../app/components/mesh-gradient/params.ts | 2 +- .../app/components/mesh-gradient/scene.tsx | 4 +- .../app/components/radial-gradient/params.ts | 2 +- .../app/components/radial-gradient/scene.tsx | 4 +- .../src/app/components/simplex-noise/page.tsx | 2 +- .../app/components/simplex-noise/params.ts | 2 +- .../app/components/simplex-noise/scene.tsx | 6 +-- .../src/app/components/vignette/params.ts | 2 +- .../src/app/components/vignette/scene.tsx | 6 +-- .../docs/src/app/components/voronoi/params.ts | 2 +- .../docs/src/app/components/voronoi/scene.tsx | 6 +-- .../src/app/components/wave-lines/params.ts | 2 +- .../src/app/components/wave-lines/scene.tsx | 6 +-- .../app/dev/color-space-probe/ProbeGrid.tsx | 6 +-- .../dev/dot-field-stack-probe/probe-scene.tsx | 6 +-- .../src/app/dev/gamut-probe/ProbeGrid.tsx | 4 +- .../src/app/dev/hsl-gamut-probe/ProbeGrid.tsx | 4 +- .../src/app/dev/hue-arc-probe/ProbeGrid.tsx | 8 ++-- .../src/app/dev/voronoi-probe/probe-scene.tsx | 4 +- apps/docs/src/app/palette/LightnessGrid.tsx | 2 +- apps/docs/src/app/primitives/page.tsx | 6 +-- apps/docs/src/app/recipes/_builds.ts | 2 +- apps/docs/src/components/DemoPoster.tsx | 2 +- apps/docs/src/components/PrimitiveScene.tsx | 4 +- apps/docs/src/components/RecipeScene.tsx | 2 +- .../src/components/controls/ColorInput.tsx | 2 +- .../controls/ColorPopoverContents.tsx | 4 +- .../controls/color/ChannelSlider.tsx | 2 +- .../src/components/controls/color/oklch.ts | 2 +- apps/docs/src/data/primitives.ts | 2 +- apps/docs/src/data/recipes.ts | 6 +-- apps/docs/src/lib/VisualTestPause.tsx | 6 +-- apps/docs/src/lib/meshUtils.ts | 2 +- apps/docs/src/lib/palette.test.ts | 6 +-- apps/docs/src/lib/palette.ts | 2 +- apps/docs/vitest.config.ts | 6 +-- apps/editor/next.config.ts | 2 +- apps/editor/package.json | 8 ++-- apps/editor/src/app/parity/generated.gen.tsx | 10 +++-- .../editor/src/app/parity/generated/scene.tsx | 2 +- apps/editor/src/app/parity/runtime/scene.tsx | 2 +- .../src/controls/ColorPopoverContents.tsx | 4 +- .../src/controls/color/ChannelSlider.tsx | 2 +- apps/editor/src/controls/color/oklch.ts | 2 +- apps/editor/src/editor/canvas/CardParams.tsx | 2 +- .../src/editor/canvas/OutputPreview.tsx | 6 +-- apps/editor/src/editor/graph/compile.ts | 4 +- apps/editor/src/editor/graph/emit.test.ts | 4 +- apps/editor/src/editor/graph/emit.ts | 6 +-- apps/editor/src/editor/graph/parity.test.ts | 8 ++-- apps/editor/src/editor/params/RampParam.tsx | 2 +- apps/editor/src/editor/preset/flow-preset.ts | 2 +- apps/editor/src/editor/preset/preset.ts | 2 +- apps/editor/src/lib/VisualTestPause.tsx | 6 +-- docs/development/visual-regression.md | 4 +- eslint.config.js | 12 +++--- package.json | 14 +++---- packages/matter-cli/CHANGELOG.md | 10 ++--- packages/matter-cli/README.md | 16 ++++---- packages/matter-cli/package.json | 18 ++++----- packages/matter-cli/src/commands/init.test.ts | 2 +- .../src/config/matterConfig.test.ts | 4 +- .../matter-cli/src/config/matterConfig.ts | 2 +- packages/matter-cli/src/harness/index.tsx | 2 +- packages/matter-cli/src/harness/tsconfig.json | 2 +- packages/matter-cli/src/poster/bundle.ts | 11 ++--- packages/matter-cli/src/poster/projectRoot.ts | 2 +- .../posters/aurora-with-time.tsx | 4 +- .../posters/gradient-plus-grain.tsx | 6 +-- .../test-fixtures/posters/named-export.tsx | 4 +- .../posters/single-linear-gradient.tsx | 4 +- .../src/transforms/rewriteImports.test.ts | 6 +-- packages/matter-cli/tsconfig.json | 2 +- packages/matter-cli/tsconfig.tooling.json | 2 +- packages/matter-cli/vitest.config.ts | 2 +- packages/matter-react/CHANGELOG.md | 26 ++++++------ packages/matter-react/README.md | 16 ++++---- packages/matter-react/package.json | 16 ++++---- .../shader-monitor/shader-monitor.test.tsx | 2 +- .../shader-poster/poster-context.ts | 4 +- .../shader-scene/shader-scene.test.tsx | 6 +-- .../components/shader-scene/shader-scene.tsx | 2 +- .../src/context/shader-context.ts | 2 +- .../matter-react/src/errors/matter-error.ts | 2 +- packages/matter-react/src/gamut.test.ts | 2 +- packages/matter-react/src/gamut.ts | 2 +- .../use-animatable-point.test.tsx | 2 +- .../use-animatable-speed.test.tsx | 4 +- .../use-animatable-speed.ts | 4 +- .../use-animatable-uniform.test.tsx | 2 +- .../src/hooks/use-cursor/use-cursor.ts | 2 +- .../use-display-gamut/use-display-gamut.ts | 2 +- .../use-static-hint/use-static-hint.test.tsx | 2 +- packages/matter-react/src/index.ts | 2 +- packages/matter-react/src/poster.test.ts | 2 +- packages/matter-react/src/poster.ts | 2 +- packages/matter-react/tsconfig.json | 2 +- packages/matter-react/tsup.config.ts | 2 +- packages/matter-react/vitest.config.ts | 2 +- packages/matter/CHANGELOG.md | 30 +++++++------- packages/matter/README.md | 14 +++---- packages/matter/package.json | 12 +++--- packages/matter/src/color.test.ts | 2 +- packages/matter/src/color.ts | 2 +- packages/matter/src/index.ts | 2 +- .../src/primitives/color-ramp/color-ramp.ts | 2 +- .../primitives/color-space/cpu-transfer.ts | 2 +- packages/matter/src/primitives/noise/noise.ts | 2 +- packages/matter/src/primitives/time/time.ts | 2 +- packages/matter/tsconfig.json | 2 +- packages/matter/vitest.config.ts | 2 +- pnpm-lock.yaml | 40 +++++++++---------- registry/aurora/aurora.tsx | 4 +- registry/aurora/shader.tsx | 9 ++++- registry/blobs/blobs.tsx | 4 +- registry/blobs/shader.tsx | 4 +- registry/conic-gradient/conic-gradient.tsx | 4 +- registry/conic-gradient/shader.tsx | 4 +- registry/dither/dither.tsx | 2 +- registry/dither/shader.tsx | 6 +-- registry/dot-field/dot-field.tsx | 2 +- registry/dot-field/shader.tsx | 4 +- registry/fractal-noise/fractal-noise.tsx | 4 +- registry/fractal-noise/shader.tsx | 4 +- registry/god-rays/god-rays.tsx | 2 +- registry/god-rays/shader.tsx | 2 +- registry/grain/grain.tsx | 2 +- registry/grain/shader.tsx | 4 +- registry/linear-gradient/linear-gradient.tsx | 4 +- registry/linear-gradient/shader.tsx | 4 +- registry/mesh-gradient/mesh-gradient.tsx | 4 +- registry/mesh-gradient/shader.tsx | 4 +- registry/package.json | 10 ++--- registry/radial-gradient/radial-gradient.tsx | 4 +- registry/radial-gradient/shader.tsx | 4 +- registry/registry.json | 30 +++++++------- registry/registry.schema.json | 4 +- registry/simplex-noise/shader.tsx | 4 +- registry/simplex-noise/simplex-noise.tsx | 4 +- registry/tsconfig.json | 2 +- registry/utils/color.ts | 2 +- registry/vignette/shader.tsx | 6 +-- registry/vignette/vignette.tsx | 4 +- registry/voronoi/shader.tsx | 4 +- registry/voronoi/voronoi.tsx | 4 +- registry/wave-lines/shader.tsx | 4 +- registry/wave-lines/wave-lines.tsx | 4 +- scripts/build-posters.sh | 2 +- scripts/smoke-test-cli.mjs | 10 ++--- scripts/snap.sh | 4 +- tooling/tsconfig/package.json | 2 +- 191 files changed, 504 insertions(+), 494 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index fca9d48f..faede07a 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -2,12 +2,12 @@ "$schema": "https://unpkg.com/@changesets/config@3.1.4/schema.json", "changelog": "@changesets/cli/changelog", "commit": false, - "fixed": [["@lovo/matter", "@lovo/matter-react", "@lovo/matter-cli"]], + "fixed": [["@mattermix/shaders", "@mattermix/shaders-react", "@mattermix/shaders-cli"]], "linked": [], "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": ["@matter/registry", "@matter/tsconfig", "@matter/docs", "@matter/docs-tests"], + "ignore": ["@shaders/registry", "@shaders/tsconfig", "@shaders/docs", "@shaders/docs-tests"], "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { "onlyUpdatePeerDependentsWhenOutOfRange": true } diff --git a/.changeset/stable-hash-backend-parity.md b/.changeset/stable-hash-backend-parity.md index 2a3decaf..e1efcec1 100644 --- a/.changeset/stable-hash-backend-parity.md +++ b/.changeset/stable-hash-backend-parity.md @@ -1,5 +1,5 @@ --- -'@lovo/matter': minor +'@mattermix/shaders': minor --- Seeded randomness now renders the same pattern on the WebGPU and WebGL2 backends. three's TSL `hash()` writes its PCG constants as float literals, which GLSL rounds to a different hash than WGSL computes, so the same `seed` produced a different Voronoi layout in Safari than in Chrome. The new `stableHash` and `stableHashUint` exports run the same PCG with integer-typed constants and chain hash streams u32-to-u32, and `voronoiCells`, `grain`, `metaballs`, and `ditherPattern` now draw from them. diff --git a/.claude/skills/resolve-coderabbit-feedback/SKILL.md b/.claude/skills/resolve-coderabbit-feedback/SKILL.md index 7945d51f..93d4b8da 100644 --- a/.claude/skills/resolve-coderabbit-feedback/SKILL.md +++ b/.claude/skills/resolve-coderabbit-feedback/SKILL.md @@ -267,7 +267,7 @@ pnpm test --filter Four repo traps apply here: -- If a fix changed source under `packages/matter` or `packages/matter-react`, run `pnpm --filter @lovo/matter build`. The docs site consumes `dist`, so an unbuilt fix looks like no fix at all. +- If a fix changed source under `packages/matter` or `packages/matter-react`, run `pnpm --filter @mattermix/shaders build`. The docs site consumes `dist`, so an unbuilt fix looks like no fix at all. - If a fix changed a dependency in any `package.json`, commit the updated `pnpm-lock.yaml` with it, and check that the lockfile still pins `node@runtime` at `version: 22.22.2` with `hasBin: true`. Every pnpm resolution step rewrites that entry to `0.0.0`, and CI then dies at install in every job. - Never run `pnpm snap` as part of this workflow. Ask first. It needs Docker and Node 22, it takes a long time, and it corrupts a running docs or editor dev server. - If you ran Playwright or `pnpm snap` for any reason, tell the user to restart the dev server before trusting the browser. The procedure is in `AGENTS.md` under the environment gotchas. @@ -296,7 +296,7 @@ Pick `` from the file class the approved fixes touched, and add no AI attr | A workflow under `.github/` | `ci` | | Tests, tooling config, or a lockfile on its own | `chore` | -The command above supplies the colon, so these values carry none. Scope is the package name without the `@lovo/` prefix. When a run spans classes, name the class that carries the substantive fix, so a code fix that drags a lockfile with it stays `fix()`. The user already saw the commit line in the Step 6 preview, so change it there rather than asking again here. +The command above supplies the colon, so these values carry none. Scope is the package name without the `@mattermix/` prefix. When a run spans classes, name the class that carries the substantive fix, so a code fix that drags a lockfile with it stays `fix()`. The user already saw the commit line in the Step 6 preview, so change it there rather than asking again here. ## Step 10: Reply and resolve the threads diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 67b7da53..e860c795 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -94,7 +94,7 @@ jobs: cache: pnpm - run: pnpm install --frozen-lockfile - run: pnpm build - - run: pnpm --filter @matter/docs-tests test:visual + - run: pnpm --filter @shaders/docs-tests test:visual - name: Upload visual diffs on failure if: failure() uses: actions/upload-artifact@v4 diff --git a/AGENTS.md b/AGENTS.md index faeab49c..786b785b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -18,7 +18,7 @@ Milestone history lives in git tags and `docs/superpowers/plans/`. Don't trust a ## Project shape (30-second version) - **Three-tier model.** Tier 1 is the polished components such as ``, delivered by shadcn-style CLI copy-paste from `registry/`. Tier 2 is the TSL primitives in the engine package, such as `fractalNoise` and `voronoi`. Tier 3 is recipes: TSL snippets in the docs site. -- **Three packages.** `@lovo/matter` is the framework-agnostic engine, `@lovo/matter-react` is the React binding, and `@lovo/matter-cli` handles copy-paste delivery. Two apps sit alongside them: `@matter/docs` is the docs site, and `@matter/editor` is the node editor from MAT-94. The editor is a React Flow canvas over the same Tier 2 primitives, with an eject-to-code emitter. A permanent parity gate pixel-compares that emitter's output against the live compiler. +- **Three packages.** `@mattermix/shaders` is the framework-agnostic engine, `@mattermix/shaders-react` is the React binding, and `@mattermix/shaders-cli` handles copy-paste delivery. Two apps sit alongside them: `@shaders/docs` is the docs site, and `@shaders/editor` is the node editor from MAT-94. The editor is a React Flow canvas over the same Tier 2 primitives, with an eject-to-code emitter. A permanent parity gate pixel-compares that emitter's output against the live compiler. - **The editor app is layered by dependency direction**, not by file type. `src/editor/graph/` is the framework-free core, holding the node registry, graph model, param store, live TSL compiler, and code emitter. `src/editor/preset/` handles save, load, undo, and copy-paste, and is also React-free. `src/editor/state/` is the React Flow glue. `canvas/`, `params/`, and `panels/` are UI. Dependencies point one way, toward `graph/`. Siblings import each other as `./x` and everything else as `@/editor//`. `vitest.config.ts` has to declare that `@` alias itself, because Vitest doesn't read tsconfig `paths`. - **Two rendering modes**, with no auto-detection of `@react-three/fiber`. In Mode 1 every Tier 1 component is bare and requires an explicit `` wrap, and you compose by stacking children in one scene. In Mode 2 you call `useShaderMaterial` inside your own r3f ``. @@ -37,7 +37,7 @@ Read the spec for architecture, public APIs, the component catalog, and the anim - **Rejected alternatives only when a reviewer would otherwise propose them.** Dead ends you hit along the way are session debrief. PR #93 spent a paragraph on a rejected triangle wave and another on PNG versus JPEG byte counts, and neither changes an approve or request-changes call. - **Anything already recorded in the diff gets a clause, not a section.** If the reasoning is in a code comment, in AGENTS.md, or in a changeset this PR adds, write "documented in X" and stop. Restating it makes a second copy that drifts from the first. - **Run user-facing prose through the `technical-writing` skill**, which also applies `unslop` for the slop-pattern catalog. Look for the skill in the repo's `.claude/skills/` first, then in whatever directory your harness keeps skills in, which is `~/.claude/skills/` for Claude Code. PR bodies, commit messages, changelog entries, release notes, and docs get a pass before the PR opens or the text ships. The skill sets `disable-model-invocation: true`, so an agent that honors that field never loads it on its own. Read its `SKILL.md` and work the review checklist at the end. Its first rule is to cut every word that does no work, so it pulls toward the PR word budget rather than against it. Diátaxis mode selection is the one layer a PR body skips. -- **Commit messages use Conventional Commits**, such as `feat(scope): …`, `fix(scope): …`, `chore: …`, `docs: …`, and `ci: …`. Scope is the package name without the `@lovo/` prefix. +- **Commit messages use Conventional Commits**, such as `feat(scope): …`, `fix(scope): …`, `chore: …`, `docs: …`, and `ci: …`. Scope is the package name without the `@mattermix/` prefix. ## Shader development process @@ -85,10 +85,10 @@ These rules exist because Matter doubles as a shader-learning project for its au ## Environment and build gotchas - **Node 22, exactly.** The docs production build (`next build`, static export) **silently fails on Node 23**. It exits 0 and writes no `out/`, and that missing directory then breaks pagefind and `pnpm snap`. The fix is environmental, so run the pinned Node 22 rather than changing config. `.node-version` at 22.22.2 is the source of truth. `.nvmrc` at 22 is the loose duplicate fnm actually honors. -- **The docs site consumes built `dist`, not source**, for `@lovo/matter` and `@lovo/matter-react`. `@matter/registry` is the exception, and reaches the site as raw `.tsx` via `transpilePackages`. After you edit engine or binding source, run `pnpm --filter @lovo/matter build` AND restart the docs dev server, or a correct fix looks like a no-op. Before you re-debug a "fix that didn't work," check `dist` mtime against `src`. +- **The docs site consumes built `dist`, not source**, for `@mattermix/shaders` and `@mattermix/shaders-react`. `@shaders/registry` is the exception, and reaches the site as raw `.tsx` via `transpilePackages`. After you edit engine or binding source, run `pnpm --filter @mattermix/shaders build` AND restart the docs dev server, or a correct fix looks like a no-op. Before you re-debug a "fix that didn't work," check `dist` mtime against `src`. - **CI runs more than package-scoped checks.** Five traps: 1. `pnpm install --frozen-lockfile` runs first in every job. Any `package.json` dep change must ship with the updated `pnpm-lock.yaml`, or every job dies at install, and `ERR_PNPM_OUTDATED_LOCKFILE` masquerades as "everything failing". **Read the lockfile diff before you commit it.** Any resolution step (`pnpm add`, `pnpm remove`, `pnpm install --lockfile-only`) also rewrites the `node@runtime` entry from `version: 22.22.2` and `hasBin: true` to `version: 0.0.0`. That entry is the resolved form of the root `devEngines` pin, the thing that makes every `pnpm` script run Node 22, so restore those two lines by hand and re-check `pnpm install --frozen-lockfile` before committing. This has slipped through twice. - 2. CI runs whole-repo Prettier through root `pnpm format:check`, not just lint. The import-sort plugin orders React and external imports before `@lovo/*` and `@matter/*`. Run Prettier on changed files before you commit. + 2. CI runs whole-repo Prettier through root `pnpm format:check`, not just lint. The import-sort plugin orders React and external imports before `@mattermix/*` and `@shaders/*`. Run Prettier on changed files before you commit. 3. Visual regression screenshots the canvas itself, through `page.locator('canvas').first()`, not the full page and not the `[data-shader-demo]` container. A change that resizes or repositions the canvas invalidates baselines. A change confined to the control panel's own styling does not. That wasn't always true. Before the panel moved into a sidebar outside `[data-shader-demo]`, it sat absolutely positioned inside the canvas's bounding box, so any panel change showed up in the shot too. It no longer does, so you can restyle the panel freely without regenerating anything. But `.demo-layout`'s grid columns and padding are CSS that sizes the canvas, so layout changes there still invalidate baselines, and `DemoPoster`'s poster image sits inside `[data-shader-demo]` but outside the canvas, so nothing captures it either way. @@ -115,7 +115,7 @@ These rules exist because Matter doubles as a shader-learning project for its au - `turbo.json`'s `build` task declares `INCLUDE_DEV_ROUTES` under `env`, because turbo 2 runs strict env mode and would otherwise drop the variable before `next build` ever sees it. Verify a change by building both ways and checking whether `apps/docs/out/dev/` exists. This is also the convention a throwaway prototype route must follow. The `prototype` skill's default advice is to hide a variant switcher behind `process.env.NODE_ENV !== 'production'`, and that check does not work here for the same reason: Playwright builds the production bundle. -- **`apps/docs/tsconfig.json` uses a relative `extends` on purpose.** It points at `../../tooling/tsconfig/base.json` rather than the `@matter/tsconfig` package form every other workspace uses. Fallow's resolver drops `paths` when `extends` goes through a workspace package. Don't "normalize" it. +- **`apps/docs/tsconfig.json` uses a relative `extends` on purpose.** It points at `../../tooling/tsconfig/base.json` rather than the `@shaders/tsconfig` package form every other workspace uses. Fallow's resolver drops `paths` when `extends` goes through a workspace package. Don't "normalize" it. ## Technical gotchas (read before touching TSL or the build) @@ -126,8 +126,8 @@ These rules exist because Matter doubles as a shader-learning project for its au 5. **`uniform(vec2(...))` loses the Vector2 mutator API.** Use `uniform(new Vector2(...))` when you need `.set()`. 6. **`setClearColor` accepts only `Color` in three 0.170 and later.** Convert with `new Color(...)`. 7. **Vitest exits 1 with no test files.** Set `passWithNoTests: true` in per-package configs. -8. **The docs site needs `@matter/registry` plus `transpilePackages`** to import raw `.tsx` from a workspace dep. -9. **`three/webgpu` references `self` at module load, so it cannot SSR.** Anything that genuinely reaches the renderer needs `next/dynamic` with `{ ssr: false }`, and all eight component pages load their `scene.tsx` that way. Scalar code that merely ships in the same package does not, and each piece has an import path that never pulls in three: CPU color math at `@lovo/matter/color`, and `useDisplayGamut` at `@lovo/matter-react/gamut`. A `no-restricted-imports` rule scoped to `apps/docs/**` rejects both roots for those names, so the wrong import fails at lint rather than at render, and each subpath carries a `// @vitest-environment node` test that throws if three creeps back into its graph. Reach for a subpath before you reach for `ssr: false`. +8. **The docs site needs `@shaders/registry` plus `transpilePackages`** to import raw `.tsx` from a workspace dep. +9. **`three/webgpu` references `self` at module load, so it cannot SSR.** Anything that genuinely reaches the renderer needs `next/dynamic` with `{ ssr: false }`, and all eight component pages load their `scene.tsx` that way. Scalar code that merely ships in the same package does not, and each piece has an import path that never pulls in three: CPU color math at `@mattermix/shaders/color`, and `useDisplayGamut` at `@mattermix/shaders-react/gamut`. A `no-restricted-imports` rule scoped to `apps/docs/**` rejects both roots for those names, so the wrong import fails at lint rather than at render, and each subpath carries a `// @vitest-environment node` test that throws if three creeps back into its graph. Reach for a subpath before you reach for `ssr: false`. 10. **`tweakpane@4` ships a broken `@tweakpane/core` reference.** Add published `@tweakpane/core` 2.x as a devDep for typecheck. 11. **Consume vec-typed `uniform(...)` as an argument, not a chained receiver, in TSL math.** `uv().sub(cursorUniform)` works. Chaining methods off a raw vec2 or vec3 uniform node silently produces wrong GPU values despite typechecking. Build expressions from `uv()` and `vec2(...)`, and pass vec uniforms as args. Scalar float uniforms are safe as chained receivers. wave-lines chains them throughout and seven visual gates validated it. 12. **three ships two standalone bundles**, `three.module.js` and `three.webgpu.js`. Importing both duplicates three core, which shows up as `Cannot read properties of undefined (reading 'usedTimes')` on dispose. Alias all three subpaths to the webgpu bundle. See `apps/docs/next.config.ts`. diff --git a/README.md b/README.md index 484e97fd..b71e1bd7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ React shader components powered by WebGPU and Three.js TSL. -> **Status:** v0.1.0 shipped to npm. `npm install -D @lovo/matter-cli && npx matter-cli init && npx matter-cli add linear-gradient` to scaffold your first component. +> **Status:** v0.1.0 shipped to npm. `npm install -D @mattermix/shaders-cli && npx matter-cli init && npx matter-cli add linear-gradient` to scaffold your first component. ## What is Matter? @@ -12,15 +12,15 @@ Matter is a React component library for shader-driven backgrounds and interactiv ``` apps/ -├── docs/ # @matter/docs — Next.js docs site (Tweakpane-driven demos) -└── playground/ # @matter/playground — Vite app with M1 manual harnesses +├── docs/ # @shaders/docs — Next.js docs site (Tweakpane-driven demos) +└── playground/ # @shaders/playground — Vite app with M1 manual harnesses packages/ -├── matter/ # @lovo/matter — engine: TSL primitives, renderer, scheduler -├── matter-react/ # @lovo/matter-react — React binding -└── matter-cli/ # @lovo/matter-cli — copy-paste CLI +├── matter/ # @mattermix/shaders — engine: TSL primitives, renderer, scheduler +├── matter-react/ # @mattermix/shaders-react — React binding +└── matter-cli/ # @mattermix/shaders-cli — copy-paste CLI -registry/ # @matter/registry — Tier 1 component source files (CLI consumes) +registry/ # @shaders/registry — Tier 1 component source files (CLI consumes) tooling/ ├── eslint-config/ # shared ESLint flat config @@ -41,20 +41,20 @@ pnpm install pnpm build # build all packages + apps pnpm typecheck # typecheck all packages + apps pnpm lint # lint all packages + apps -pnpm test # run all tests (Vitest in @lovo/matter) +pnpm test # run all tests (Vitest in @mattermix/shaders) # Live shader demo -pnpm --filter @matter/docs dev # Next.js docs at http://localhost:3000 +pnpm --filter @shaders/docs dev # Next.js docs at http://localhost:3000 # Engine playground (per-phase manual harnesses) -pnpm --filter @matter/playground dev # Vite at http://localhost:5173 +pnpm --filter @shaders/playground dev # Vite at http://localhost:5173 ``` ## Roadmap - ✅ **Milestone 0** — Repo bootstrap - ✅ **Milestone 1** — Vertical slice: `` end-to-end -- ✅ **Milestone 2** — `@lovo/matter-cli` (copy-paste delivery) +- ✅ **Milestone 2** — `@mattermix/shaders-cli` (copy-paste delivery) - ✅ **Milestone 3** — The other 5 v1 components (MeshGradient, Aurora, DotField, NoiseField, Waves) - ✅ **Milestone 4** — Docs site polish - ✅ **Milestone 5** — Performance, testing, accessibility diff --git a/apps/docs-tests/package.json b/apps/docs-tests/package.json index d515dddd..550170ca 100644 --- a/apps/docs-tests/package.json +++ b/apps/docs-tests/package.json @@ -1,5 +1,5 @@ { - "name": "@matter/docs-tests", + "name": "@shaders/docs-tests", "version": "0.0.0", "private": true, "type": "module", @@ -12,7 +12,7 @@ }, "devDependencies": { "@axe-core/playwright": "^4.10.0", - "@matter/tsconfig": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@playwright/test": "^1.48.0", "@types/node": "^22", "typescript": "^5" diff --git a/apps/docs-tests/playwright.config.ts b/apps/docs-tests/playwright.config.ts index 032746a8..f2bd2ed7 100644 --- a/apps/docs-tests/playwright.config.ts +++ b/apps/docs-tests/playwright.config.ts @@ -24,7 +24,7 @@ export default defineConfig({ // than running the dev server, so without the flag those specs 404. The // deploy build omits it, which is the point — see next.config.ts. command: - 'INCLUDE_DEV_ROUTES=1 pnpm turbo run build --filter=@matter/docs --force && pnpm --filter @matter/docs preview', + 'INCLUDE_DEV_ROUTES=1 pnpm turbo run build --filter=@shaders/docs --force && pnpm --filter @shaders/docs preview', url: 'http://localhost:3000', reuseExistingServer: !process.env.CI, timeout: 180_000, @@ -34,7 +34,7 @@ export default defineConfig({ // build as the docs entry above, and the same dev-routes flag, which is // what puts the parity routes in the bundle these specs load. command: - 'INCLUDE_DEV_ROUTES=1 pnpm turbo run build --filter=@matter/editor --force && pnpm --filter @matter/editor preview', + 'INCLUDE_DEV_ROUTES=1 pnpm turbo run build --filter=@shaders/editor --force && pnpm --filter @shaders/editor preview', url: 'http://localhost:3010', reuseExistingServer: !process.env.CI, timeout: 180_000, diff --git a/apps/docs-tests/tsconfig.json b/apps/docs-tests/tsconfig.json index 3eb0c40c..0bf5e15e 100644 --- a/apps/docs-tests/tsconfig.json +++ b/apps/docs-tests/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/library.json", + "extends": "@shaders/tsconfig/library.json", "compilerOptions": { "noEmit": true, "module": "ESNext", diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index 9d2910d8..fce59083 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -7,7 +7,7 @@ order: 30 # Changelog -Matter ships as three coordinated npm packages: `@lovo/matter` (engine), `@lovo/matter-react` (React binding), and `@lovo/matter-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo; this page summarizes the headline changes. +Matter ships as three coordinated npm packages: `@mattermix/shaders` (engine), `@mattermix/shaders-react` (React binding), and `@mattermix/shaders-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo; this page summarizes the headline changes. ## Unreleased @@ -43,24 +43,24 @@ Same copy-paste rule: installed copies keep rendering as before; re-add `waves` ## 0.2.0 -**Breaking change — `@lovo/matter` no longer re-exports pure TSL primitives.** +**Breaking change — `@mattermix/shaders` no longer re-exports pure TSL primitives.** -The following 15 nodes are no longer exported by `@lovo/matter`. Import them directly from `three/tsl`: +The following 15 nodes are no longer exported by `@mattermix/shaders`. Import them directly from `three/tsl`: `uv`, `vec2`, `vec3`, `vec4`, `uniform`, `mix`, `smoothstep`, `mod`, `sin`, `cos`, `length`, `dot`, `normalize`, `max`, `min` ```ts // Before (0.1.x) -import { vec3, uv, time } from '@lovo/matter' +import { vec3, uv, time } from '@mattermix/shaders' // After (0.2.0) import { vec3, uv } from 'three/tsl' -import { time } from '@lovo/matter' // still here — reduced-motion-gated +import { time } from '@mattermix/shaders' // still here — reduced-motion-gated ``` -`time` continues to be exported from `@lovo/matter` because Matter owns its semantics (reduced-motion gating). For raw uncapped time, import from `three/tsl` directly. +`time` continues to be exported from `@mattermix/shaders` because Matter owns its semantics (reduced-motion gating). For raw uncapped time, import from `three/tsl` directly. -All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@lovo/matter` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@lovo/matter` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). +All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). **Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths — no rename, no added docs, no future-swap benefit. Dropping them clarifies the layer boundary: Matter ships value-add primitives, TSL provides the math. See the [matter engine reference](/reference/matter) for the current public surface. @@ -68,7 +68,7 @@ All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle` The first public release of Matter — React shader components on WebGPU + Three.js TSL. -### `@lovo/matter` +### `@mattermix/shaders` Framework-agnostic engine. Exports: @@ -77,7 +77,7 @@ Framework-agnostic engine. Exports: - **Runtime:** `createRenderer`, `MatterScheduler`, visibility/intersection watchers, reduced-motion policy. - **Inputs:** `CursorInput` (framework-agnostic cursor source). -### `@lovo/matter-react` +### `@mattermix/shaders-react` React binding for the engine. Exports: @@ -87,7 +87,7 @@ React binding for the engine. Exports: - Animation glue — `useAnimatableUniform`, accepts any MotionValue-shaped signal. - Fallback / dev utilities — `FallbackBoundary`, `useStaticHint`, `MatterMonitor`. -### `@lovo/matter-cli` +### `@mattermix/shaders-cli` shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. The default registry tracks the CLI's published version tag (`v0.1.0`), so the component source you copy is stable per release. @@ -102,5 +102,5 @@ Available via `matter-cli add `: `linear-gradient`, `mesh-gradient`, `auro - React ^19, Three.js ^0.170. - Detailed per-package changelogs live in the repo: [`packages/matter/CHANGELOG.md`](https://github.com/lovo-hq/matter/blob/main/packages/matter/CHANGELOG.md), [`packages/matter-react/CHANGELOG.md`](https://github.com/lovo-hq/matter/blob/main/packages/matter-react/CHANGELOG.md), [`packages/matter-cli/CHANGELOG.md`](https://github.com/lovo-hq/matter/blob/main/packages/matter-cli/CHANGELOG.md). + Detailed per-package changelogs live in the repo: [`packages/matter/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter/CHANGELOG.md), [`packages/matter-react/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter-react/CHANGELOG.md), [`packages/matter-cli/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter-cli/CHANGELOG.md). diff --git a/apps/docs/content/docs/cli.mdx b/apps/docs/content/docs/cli.mdx index f8fa9bf5..3103dc26 100644 --- a/apps/docs/content/docs/cli.mdx +++ b/apps/docs/content/docs/cli.mdx @@ -1,18 +1,18 @@ --- title: CLI -description: Copy components from the Matter registry into your project with @lovo/matter-cli. +description: Copy components from the Matter registry into your project with @mattermix/shaders-cli. section: overview order: 20 --- # CLI -`@lovo/matter-cli` copies polished shader components from the Matter registry directly into your project. It's a shadcn-style copy-paste workflow — once a component is in your repo, it's yours to edit. There's no runtime CLI dependency; you only need it installed during development. +`@mattermix/shaders-cli` copies polished shader components from the Matter registry directly into your project. It's a shadcn-style copy-paste workflow — once a component is in your repo, it's yours to edit. There's no runtime CLI dependency; you only need it installed during development. ## Install ```bash -pnpm add -D @lovo/matter-cli +pnpm add -D @mattermix/shaders-cli ``` Requires Node 22+. @@ -32,7 +32,7 @@ Default config: ```json { "componentsDir": "src/components/matter", - "registryUrl": "https://raw.githubusercontent.com/lovo-hq/matter/${ref}/registry", + "registryUrl": "https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry", "aliases": { "@/": "src/" }, "tsx": true } @@ -68,7 +68,7 @@ Without `--force`, `update` refuses to overwrite a file you've modified — you ## Why not a runtime dependency? -Tier 1 components (``, ``, etc.) aren't published to npm. They live in [the registry](https://github.com/lovo-hq/matter/tree/main/registry) and get copied into your project, where you can edit the shader, swap props, or refactor the JSX freely. The two packages you do depend on at runtime — `@lovo/matter` and `@lovo/matter-react` — provide the primitives, hooks, and `` that those components call into. +Tier 1 components (``, ``, etc.) aren't published to npm. They live in [the registry](https://github.com/mattermix/shaders/tree/main/registry) and get copied into your project, where you can edit the shader, swap props, or refactor the JSX freely. The two packages you do depend on at runtime — `@mattermix/shaders` and `@mattermix/shaders-react` — provide the primitives, hooks, and `` that those components call into. There is no hosted registry endpoint. The CLI fetches sources from GitHub raw URLs at the pinned `${ref}`. If you want to host your own fork, change `registryUrl` in `matter.config.json` to point at your fork's raw URL. diff --git a/apps/docs/content/docs/examples.mdx b/apps/docs/content/docs/examples.mdx index de80c43c..0d32af57 100644 --- a/apps/docs/content/docs/examples.mdx +++ b/apps/docs/content/docs/examples.mdx @@ -16,4 +16,4 @@ In the meantime: - The [primitives pages](/primitives) show the lower-level TSL building blocks. If you want to write your own shader, start there. - The [Shared scenes guide](/guides/shared-scenes) shows how to combine multiple Matter components inside one ``. -If you build something with Matter, [open a PR on GitHub](https://github.com/lovo-hq/matter) — selected examples will land on this page. +If you build something with Matter, [open a PR on GitHub](https://github.com/mattermix/shaders) — selected examples will land on this page. diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx index f4ec6afa..d67c1ef8 100644 --- a/apps/docs/content/docs/getting-started.mdx +++ b/apps/docs/content/docs/getting-started.mdx @@ -18,8 +18,8 @@ Matter is a React component library for WebGPU shaders built on Three.js TSL. Co Add the engine and the React binding to your app, and the CLI as a dev dependency: ```bash -pnpm add @lovo/matter @lovo/matter-react -pnpm add -D @lovo/matter-cli +pnpm add @mattermix/shaders @mattermix/shaders-react +pnpm add -D @mattermix/shaders-cli ``` Requirements: @@ -64,7 +64,7 @@ Requirements: Every Matter component is bare — it needs a `` parent to provide the WebGPU canvas. The simplest valid usage: ```tsx -import { ShaderScene } from '@lovo/matter-react' +import { ShaderScene } from '@mattermix/shaders-react' import { LinearGradient } from '@/components/matter/linear-gradient' export function Hero() { diff --git a/apps/docs/content/docs/guides/animation.mdx b/apps/docs/content/docs/guides/animation.mdx index e8de4b64..f9ef9567 100644 --- a/apps/docs/content/docs/guides/animation.mdx +++ b/apps/docs/content/docs/guides/animation.mdx @@ -34,7 +34,7 @@ The animation engine doesn't run on the CPU per-frame — values flow straight i ```tsx import { useMotionValue, useTransform, useScroll } from 'motion/react' -import { ShaderScene } from '@lovo/matter-react' +import { ShaderScene } from '@mattermix/shaders-react' import { DotField } from '@/components/matter/dot-field' export function Hero() { @@ -60,7 +60,7 @@ Matter ships three React hooks that produce ready-to-use signals — they handle - `useResize()` — returns a `ResizeSignal` with current canvas dimensions. ```tsx -import { ShaderScene, useCursor } from '@lovo/matter-react' +import { ShaderScene, useCursor } from '@mattermix/shaders-react' function App() { return ( diff --git a/apps/docs/content/docs/guides/color.mdx b/apps/docs/content/docs/guides/color.mdx index 5aa63d3a..7fd1efc3 100644 --- a/apps/docs/content/docs/guides/color.mdx +++ b/apps/docs/content/docs/guides/color.mdx @@ -74,4 +74,4 @@ Think of it as a pipeline, one control per stage: They compose independently. A wide-gamut `oklch()` input blended in `oklab` and written to a `p3` framebuffer is the common case, and none of those three choices constrains the others. Reaching for `colorSpace` to fix a color that looks dull on a wide display is the usual mistake — that's stage 3's job. -For the CPU-side functions behind stage 1 — `parseColorString`, the conversions, the gamut helpers — see [the engine reference](/reference/matter#color-math--lovomattercolor). They come from `@lovo/matter/color`, which has no path to three, so you can call them wherever you need them: in the browser, or during a server render where the root entry would crash. +For the CPU-side functions behind stage 1 — `parseColorString`, the conversions, the gamut helpers — see [the engine reference](/reference/matter#color-math--lovomattercolor). They come from `@mattermix/shaders/color`, which has no path to three, so you can call them wherever you need them: in the browser, or during a server render where the root entry would crash. diff --git a/apps/docs/content/docs/guides/perf.mdx b/apps/docs/content/docs/guides/perf.mdx index ebf75afd..0a4feddd 100644 --- a/apps/docs/content/docs/guides/perf.mdx +++ b/apps/docs/content/docs/guides/perf.mdx @@ -42,19 +42,19 @@ Matter reads `prefers-reduced-motion: reduce` on mount and respects the user's c - `'ignore'` — Matter ignores the OS hint entirely. ```ts -import { setReducedMotionPolicy } from '@lovo/matter' +import { setReducedMotionPolicy } from '@mattermix/shaders' setReducedMotionPolicy('slow') ``` -This is global to the page and runs once at module init. The hook `useStaticSceneHint` from `@lovo/matter-react` can read the current scale per-render if you need to swap visuals based on it. +This is global to the page and runs once at module init. The hook `useStaticSceneHint` from `@mattermix/shaders-react` can read the current scale per-render if you need to swap visuals based on it. ## Static / render-on-demand For decorative shaders that don't actually need to animate every frame, you can hint to Matter that the scene is "static" — it renders once on mount, then only on prop / signal changes. ```tsx -import { ShaderScene, useStaticSceneHint } from '@lovo/matter-react' +import { ShaderScene, useStaticSceneHint } from '@mattermix/shaders-react' function Hero() { useStaticSceneHint(true) @@ -77,7 +77,7 @@ Beyond intersection-based pausing, `` also listens to `document.vis Drop `` into your dev pages to get a corner overlay showing FPS, active component count, and scheduler state. It's a dev tool — not for production — and tree-shakes out when guarded behind `import.meta.env.DEV` or similar. ```tsx -import { ShaderMonitor } from '@lovo/matter-react' +import { ShaderMonitor } from '@mattermix/shaders-react' {process.env.NODE_ENV === 'development' && } ``` diff --git a/apps/docs/content/docs/guides/shared-scenes.mdx b/apps/docs/content/docs/guides/shared-scenes.mdx index fd722602..6575faf6 100644 --- a/apps/docs/content/docs/guides/shared-scenes.mdx +++ b/apps/docs/content/docs/guides/shared-scenes.mdx @@ -12,7 +12,7 @@ Every Matter component renders to a WebGPU canvas owned by its parent `` The scene wrapper. Owns the WebGPU canvas, creates the renderer, runs the scheduler. Every Tier 1 Matter component must render inside one. ```tsx -import { ShaderScene } from '@lovo/matter-react' +import { ShaderScene } from '@mattermix/shaders-react' ` from `@react-three/fiber`. Use this when you want Matter primitives inside your own r3f scene — see [Three / r3f](/react/guides/three-r3f). ```tsx -import { useShaderMaterial } from '@lovo/matter-react' +import { useShaderMaterial } from '@mattermix/shaders-react' import { uv } from 'three/tsl' -import { fractalNoise } from '@lovo/matter' +import { fractalNoise } from '@mattermix/shaders' function Plane() { const material = useShaderMaterial({ @@ -69,7 +69,7 @@ All three are Strict-Mode-safe (no leaked listeners on dev double-mount) and mus Low-level animation glue. Pass an animatable prop — a static value or a signal — and get back a stable TSL uniform node that tracks it: ```tsx -import { useAnimatableUniform, type AnimatableProp } from '@lovo/matter-react' +import { useAnimatableUniform, type AnimatableProp } from '@mattermix/shaders-react' function Inner({ reach }: { reach: AnimatableProp }) { const reachUniform = useAnimatableUniform(reach) @@ -84,7 +84,7 @@ The returned node keeps its identity for the component's lifetime, so a material The `[x, y]` sibling, for props like `center`. Same contract — static pair or signal in, one stable `vec2` uniform out, backed by a single `Vector2` mutated in place: ```tsx -import { useAnimatablePoint, type AnimatableProp } from '@lovo/matter-react' +import { useAnimatablePoint, type AnimatableProp } from '@mattermix/shaders-react' function Inner({ center }: { center: AnimatableProp }) { const centerUniform = useAnimatablePoint(center, { screenOrigin: true }) @@ -99,7 +99,7 @@ function Inner({ center }: { center: AnimatableProp } The animation glue behind every registry component's `speed` prop. It does not return a speed uniform — it returns a scalar **phase** uniform, integrating speed over time on the CPU: ```tsx -import { useAnimatableSpeed, type AnimatableProp } from '@lovo/matter-react' +import { useAnimatableSpeed, type AnimatableProp } from '@mattermix/shaders-react' function Inner({ speed }: { speed: AnimatableProp }) { const phaseUniform = useAnimatableSpeed(speed) @@ -132,7 +132,7 @@ A static stand-in shown until the shader's first content frame is on screen, and Imported from its own entry point, which has no path to three and so server-renders: ```tsx -import { ShaderPoster } from '@lovo/matter-react/poster' +import { ShaderPoster } from '@mattermix/shaders-react/poster' }> @@ -146,7 +146,7 @@ import { ShaderPoster } from '@lovo/matter-react/poster' Resolves a gamut preference to what the display can actually show. Pass `'srgb'` or `'p3'` to fix it, or `'auto'` to query `(color-gamut: p3)` and re-resolve when the window moves to another monitor. ```tsx -import { useDisplayGamut } from '@lovo/matter-react/gamut' +import { useDisplayGamut } from '@mattermix/shaders-react/gamut' const gamut = useDisplayGamut('auto') // 'srgb' | 'p3' ``` diff --git a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx index e90a142a..a6cd5f33 100644 --- a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx +++ b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx @@ -24,13 +24,13 @@ Some of what Matter ships is plain arithmetic that never touches the GPU: parsin | Import from | Instead of | For | | --- | --- | --- | -| `@lovo/matter/color` | `@lovo/matter` | `parseColorString`, the OKLab/OKLCH conversions, the gamut helpers, the sRGB transfer functions | -| `@lovo/matter-react/gamut` | `@lovo/matter-react` | `useDisplayGamut` | -| `@lovo/matter-react/poster` | `@lovo/matter-react` | `` | +| `@mattermix/shaders/color` | `@mattermix/shaders` | `parseColorString`, the OKLab/OKLCH conversions, the gamut helpers, the sRGB transfer functions | +| `@mattermix/shaders-react/gamut` | `@mattermix/shaders-react` | `useDisplayGamut` | +| `@mattermix/shaders-react/poster` | `@mattermix/shaders-react` | `` | ```tsx // Server-renders fine — no path to three. -import { parseColorString, linearSrgbToOklch } from '@lovo/matter/color' +import { parseColorString, linearSrgbToOklch } from '@mattermix/shaders/color' export default function Swatch({ color }: { color: string }) { const [lightness] = linearSrgbToOklch(...parseColorString(color)) @@ -57,7 +57,7 @@ export default function Page() { } ``` -`Hero` is a regular client component that imports `@lovo/matter-react` and the registry component. The page itself can stay an RSC. +`Hero` is a regular client component that imports `@mattermix/shaders-react` and the registry component. The page itself can stay an RSC. ## Webpack alias for three (Next 14+) @@ -94,7 +94,7 @@ This forces every `three` import to resolve to the unified bundle. Same idea app Some browsers (Firefox stable, Safari < 18, older Chrome) don't ship WebGPU yet. Wrap any Matter subtree in ``: ```tsx -import { FallbackBoundary, ShaderScene } from '@lovo/matter-react' +import { FallbackBoundary, ShaderScene } from '@mattermix/shaders-react' import { Aurora } from '@/components/matter/aurora' export function Hero() { @@ -132,6 +132,6 @@ To show something in its place, wrap it in ``: the poster stays up If you wrap a scene in `next/dynamic` with `ssr: false`, nothing from that subtree ships in the server HTML — which is right, because a canvas has nothing useful to say before it has a GPU. The fallback inside `` is what users see during hydration and on unsupported browsers. -The subpaths are the exception, and worth remembering when you reach for `ssr: false` reflexively. A page that reads colors with `@lovo/matter/color`, or checks the display gamut with `@lovo/matter-react/gamut`, or shows a `` while the scene loads, renders all of that on the server normally. Only the scene itself has to wait. +The subpaths are the exception, and worth remembering when you reach for `ssr: false` reflexively. A page that reads colors with `@mattermix/shaders/color`, or checks the display gamut with `@mattermix/shaders-react/gamut`, or shows a `` while the scene loads, renders all of that on the server normally. Only the scene itself has to wait. If you have SEO-critical content that's currently hidden behind a Matter component, lift it out into the surrounding RSC. Matter is for decoration; the surrounding page is for content. diff --git a/apps/docs/content/docs/react/guides/three-r3f.mdx b/apps/docs/content/docs/react/guides/three-r3f.mdx index ffd079a8..371c06a0 100644 --- a/apps/docs/content/docs/react/guides/three-r3f.mdx +++ b/apps/docs/content/docs/react/guides/three-r3f.mdx @@ -20,8 +20,8 @@ Mode 2 doesn't auto-detect r3f — it's an explicit opt-in via the `useShaderMat ```tsx import { Canvas } from '@react-three/fiber' -import { useShaderMaterial } from '@lovo/matter-react' -import { fractalNoise, uv, vec3, mix } from '@lovo/matter' +import { useShaderMaterial } from '@mattermix/shaders-react' +import { fractalNoise, uv, vec3, mix } from '@mattermix/shaders' function ShaderPlane() { const material = useShaderMaterial({ diff --git a/apps/docs/content/docs/reference/matter.mdx b/apps/docs/content/docs/reference/matter.mdx index b0d1f03e..e800acff 100644 --- a/apps/docs/content/docs/reference/matter.mdx +++ b/apps/docs/content/docs/reference/matter.mdx @@ -1,13 +1,13 @@ --- title: Engine API -description: '@lovo/matter — primitives, runtime, inputs, and reduced-motion-gated time.' +description: '@mattermix/shaders — primitives, runtime, inputs, and reduced-motion-gated time.' section: reference order: 10 --- # Engine API -`@lovo/matter` is the framework-agnostic engine. This page lists everything it exports. A generated TypeDoc reference replaces this hand-written page post-launch. +`@mattermix/shaders` is the framework-agnostic engine. This page lists everything it exports. A generated TypeDoc reference replaces this hand-written page post-launch. ## Tier 2 primitives @@ -31,17 +31,17 @@ Matter sits on top of Three.js's TSL. Pure TSL primitives (`uv`, `vec2`, `vec3`, import { uv, vec3, uniform, mix } from 'three/tsl' ``` -Matter exports one TSL node of its own: **`elapsedTime`**. It's the TSL built-in `time` multiplied by an engine-owned reduced-motion scale uniform, so every component that animates against `elapsedTime` from `@lovo/matter` automatically respects `prefers-reduced-motion` and the policy override set via `setReducedMotionPolicy`. +Matter exports one TSL node of its own: **`elapsedTime`**. It's the TSL built-in `time` multiplied by an engine-owned reduced-motion scale uniform, so every component that animates against `elapsedTime` from `@mattermix/shaders` automatically respects `prefers-reduced-motion` and the policy override set via `setReducedMotionPolicy`. ```ts -import { elapsedTime } from '@lovo/matter' +import { elapsedTime } from '@mattermix/shaders' // → equivalent to three/tsl's `time.mul(reducedMotionScale)` // If you specifically want raw uncapped time (e.g. a debug overlay): import { time as rawTime } from 'three/tsl' ``` -> **Migrating from 0.1.x?** Before 0.2.0, `@lovo/matter` re-exported the TSL primitives listed above as a convenience. They're gone in 0.2.0 — replace `import { vec3, uv, … } from '@lovo/matter'` with `import { vec3, uv, … } from 'three/tsl'`. `elapsedTime` (named `time` before 0.5.0) is the only carry-over and stays imported from `@lovo/matter`. +> **Migrating from 0.1.x?** Before 0.2.0, `@mattermix/shaders` re-exported the TSL primitives listed above as a convenience. They're gone in 0.2.0 — replace `import { vec3, uv, … } from '@mattermix/shaders'` with `import { vec3, uv, … } from 'three/tsl'`. `elapsedTime` (named `time` before 0.5.0) is the only carry-over and stays imported from `@mattermix/shaders`. ## Runtime @@ -51,7 +51,7 @@ import { time as rawTime } from 'three/tsl' ## Inputs -- **`CursorInput`** — framework-agnostic cursor source. `useCursor()` in `@lovo/matter-react` wraps it; in Mode 2 or non-React contexts, you instantiate it directly. +- **`CursorInput`** — framework-agnostic cursor source. `useCursor()` in `@mattermix/shaders-react` wraps it; in Mode 2 or non-React contexts, you instantiate it directly. ## Reduced motion @@ -60,14 +60,14 @@ import { time as rawTime } from 'three/tsl' - **`getReducedMotionTimeScale()`** — get the current animation time scale (0, 0.3, or 1). - **`createReducedMotionWatcher()`** — subscribe to policy changes. -## Color math — `@lovo/matter/color` +## Color math — `@mattermix/shaders/color` CPU-side color conversion, run once in JavaScript when a prop is parsed. The GPU only ever sees the resulting numbers. These are also exported from the root entry, but prefer the subpath: it has no path to three, so it can be imported during a server render, where the root entry cannot. See [SSR and fallbacks](/react/guides/ssr-and-fallbacks#the-three-free-subpaths). ```ts -import { parseColorString, linearSrgbToOklch } from '@lovo/matter/color' +import { parseColorString, linearSrgbToOklch } from '@mattermix/shaders/color' ``` - `parseColorString(input)` → extended linear-sRGB. Accepts `#rrggbb`, `#rrggbbaa` (alpha dropped), `oklab(L a b)`, and `oklch(L C H)`. Throws on anything else, including components that aren't numbers. @@ -83,5 +83,5 @@ import { parseColorString, linearSrgbToOklch } from '@lovo/matter/color' The engine exports types for everything above: `GpuRenderer`, `CreateRendererOptions`, `GpuBackend`, `SchedulerTick`, `SchedulerClient`, `CursorInputOptions`, `Vector2`, `ColorRampStop`, `TSLNode`, `FractalNoiseOptions`, `FractalFold`, `CursorRippleOptions`, `ReducedMotionPolicy`, `ReducedMotionWatcher`, `VisibilityWatcher`, `IntersectionWatcher`, `OutputGamut`, `ColorSpace`, `HueInterpolation`. - For React-specific exports (``, hooks, ``), see [the React API](/react/api). This page only covers `@lovo/matter`. + For React-specific exports (``, hooks, ``), see [the React API](/react/api). This page only covers `@mattermix/shaders`. diff --git a/apps/docs/next.config.ts b/apps/docs/next.config.ts index 8e0df4de..c95efce9 100644 --- a/apps/docs/next.config.ts +++ b/apps/docs/next.config.ts @@ -38,7 +38,7 @@ const nextConfig: NextConfig = { // `next build` lint too just runs the same rules a second time. Turning it off // here is not a way of skipping the check — it is saying where the check lives. eslint: { ignoreDuringBuilds: true }, - transpilePackages: ['@lovo/matter', '@lovo/matter-react', '@matter/registry'], + transpilePackages: ['@mattermix/shaders', '@mattermix/shaders-react', '@shaders/registry'], webpack(config: WebpackConfig): WebpackConfig { config.resolve = config.resolve ?? {}; const webgpuBundle = resolve(threeDir, 'build/three.webgpu.js'); diff --git a/apps/docs/package.json b/apps/docs/package.json index b335c6e8..078d817f 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -1,5 +1,5 @@ { - "name": "@matter/docs", + "name": "@shaders/docs", "version": "0.0.0", "private": true, "type": "module", @@ -14,9 +14,9 @@ }, "dependencies": { "@base-ui/react": "^1.6.0", - "@lovo/matter": "workspace:*", - "@lovo/matter-react": "workspace:*", - "@matter/registry": "workspace:*", + "@mattermix/shaders": "workspace:*", + "@mattermix/shaders-react": "workspace:*", + "@shaders/registry": "workspace:*", "@xyflow/react": "^12.11.2", "github-slugger": "^2.0.0", "gray-matter": "^4.0.3", @@ -38,7 +38,7 @@ "zod": "^4.4.3" }, "devDependencies": { - "@matter/tsconfig": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@tweakpane/core": "^2.0.5", "@types/culori": "^4.0.1", "@types/node": "^22.7.0", diff --git a/apps/docs/src/app/components/aurora/params.ts b/apps/docs/src/app/components/aurora/params.ts index 0cd84eee..68841657 100644 --- a/apps/docs/src/app/components/aurora/params.ts +++ b/apps/docs/src/app/components/aurora/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/aurora/scene.tsx b/apps/docs/src/app/components/aurora/scene.tsx index 81b1f7f6..5b99d2d6 100644 --- a/apps/docs/src/app/components/aurora/scene.tsx +++ b/apps/docs/src/app/components/aurora/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { Aurora, type ColorStop } from '@matter/registry/aurora'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { Aurora, type ColorStop } from '@shaders/registry/aurora'; import { type AuroraParams, INITIAL } from './params'; diff --git a/apps/docs/src/app/components/blobs/params.ts b/apps/docs/src/app/components/blobs/params.ts index 0a7aa6b8..3f121f5c 100644 --- a/apps/docs/src/app/components/blobs/params.ts +++ b/apps/docs/src/app/components/blobs/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/blobs/scene.tsx b/apps/docs/src/app/components/blobs/scene.tsx index 9a62d112..431033cf 100644 --- a/apps/docs/src/app/components/blobs/scene.tsx +++ b/apps/docs/src/app/components/blobs/scene.tsx @@ -2,10 +2,10 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { Blobs } from '@matter/registry/blobs'; -import type { ColorStop } from '@matter/registry/blobs'; -import { LinearGradient } from '@matter/registry/linear-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { Blobs } from '@shaders/registry/blobs'; +import type { ColorStop } from '@shaders/registry/blobs'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/conic-gradient/params.ts b/apps/docs/src/app/components/conic-gradient/params.ts index fc592de4..f2e24160 100644 --- a/apps/docs/src/app/components/conic-gradient/params.ts +++ b/apps/docs/src/app/components/conic-gradient/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/conic-gradient/scene.tsx b/apps/docs/src/app/components/conic-gradient/scene.tsx index 5289d4d9..f5104e67 100644 --- a/apps/docs/src/app/components/conic-gradient/scene.tsx +++ b/apps/docs/src/app/components/conic-gradient/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { ConicGradient } from '@matter/registry/conic-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { ConicGradient } from '@shaders/registry/conic-gradient'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/dither/params.ts b/apps/docs/src/app/components/dither/params.ts index cf1e257b..d0a887f9 100644 --- a/apps/docs/src/app/components/dither/params.ts +++ b/apps/docs/src/app/components/dither/params.ts @@ -1,4 +1,4 @@ -import type { DitherPattern } from '@matter/registry/dither'; +import type { DitherPattern } from '@shaders/registry/dither'; export interface DitherParams { pixelSize: number; diff --git a/apps/docs/src/app/components/dither/scene.tsx b/apps/docs/src/app/components/dither/scene.tsx index 0727b2ea..2f3915c4 100644 --- a/apps/docs/src/app/components/dither/scene.tsx +++ b/apps/docs/src/app/components/dither/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { Dither } from '@matter/registry/dither'; -import { MeshGradient } from '@matter/registry/mesh-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { Dither } from '@shaders/registry/dither'; +import { MeshGradient } from '@shaders/registry/mesh-gradient'; import { type DitherParams, INITIAL } from './params'; diff --git a/apps/docs/src/app/components/dot-field/scene.tsx b/apps/docs/src/app/components/dot-field/scene.tsx index cec58122..16ee5351 100644 --- a/apps/docs/src/app/components/dot-field/scene.tsx +++ b/apps/docs/src/app/components/dot-field/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { DotField } from '@matter/registry/dot-field'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { DotField } from '@shaders/registry/dot-field'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/fractal-noise/page.tsx b/apps/docs/src/app/components/fractal-noise/page.tsx index a0e890f9..22a4cb68 100644 --- a/apps/docs/src/app/components/fractal-noise/page.tsx +++ b/apps/docs/src/app/components/fractal-noise/page.tsx @@ -8,8 +8,8 @@ import dynamic from 'next/dynamic'; import { useEffect, useMemo, useRef } from 'react'; -import type { FractalNoiseStyle } from '@matter/registry/fractal-noise'; -import { STYLE_DIAL_DEFAULTS } from '@matter/registry/fractal-noise/style-dial-defaults'; +import type { FractalNoiseStyle } from '@shaders/registry/fractal-noise'; +import { STYLE_DIAL_DEFAULTS } from '@shaders/registry/fractal-noise/style-dial-defaults'; import { COLOR_SPACE_OPTIONS, diff --git a/apps/docs/src/app/components/fractal-noise/params.ts b/apps/docs/src/app/components/fractal-noise/params.ts index 0f1e3bed..0bc349ac 100644 --- a/apps/docs/src/app/components/fractal-noise/params.ts +++ b/apps/docs/src/app/components/fractal-noise/params.ts @@ -1,6 +1,6 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { FractalNoiseStyle } from '@matter/registry/fractal-noise'; -import { STYLE_DIAL_DEFAULTS } from '@matter/registry/fractal-noise/style-dial-defaults'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { FractalNoiseStyle } from '@shaders/registry/fractal-noise'; +import { STYLE_DIAL_DEFAULTS } from '@shaders/registry/fractal-noise/style-dial-defaults'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/fractal-noise/scene.tsx b/apps/docs/src/app/components/fractal-noise/scene.tsx index 134e27b1..ba4ae5cd 100644 --- a/apps/docs/src/app/components/fractal-noise/scene.tsx +++ b/apps/docs/src/app/components/fractal-noise/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { FractalNoise } from '@matter/registry/fractal-noise'; -import type { ColorStop } from '@matter/registry/fractal-noise'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { FractalNoise } from '@shaders/registry/fractal-noise'; +import type { ColorStop } from '@shaders/registry/fractal-noise'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/god-rays/scene.tsx b/apps/docs/src/app/components/god-rays/scene.tsx index 89465c0c..b51d4848 100644 --- a/apps/docs/src/app/components/god-rays/scene.tsx +++ b/apps/docs/src/app/components/god-rays/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { GodRays } from '@matter/registry/god-rays'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { GodRays } from '@shaders/registry/god-rays'; import { type GodRaysParams, INITIAL } from './params'; diff --git a/apps/docs/src/app/components/grain/params.ts b/apps/docs/src/app/components/grain/params.ts index 6b20f074..8d892546 100644 --- a/apps/docs/src/app/components/grain/params.ts +++ b/apps/docs/src/app/components/grain/params.ts @@ -1,4 +1,4 @@ -import type { GrainBlend } from '@matter/registry/grain'; +import type { GrainBlend } from '@shaders/registry/grain'; export interface GrainParams { intensity: number; diff --git a/apps/docs/src/app/components/grain/scene.tsx b/apps/docs/src/app/components/grain/scene.tsx index c37d89f7..961b0620 100644 --- a/apps/docs/src/app/components/grain/scene.tsx +++ b/apps/docs/src/app/components/grain/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { Grain } from '@matter/registry/grain'; -import { LinearGradient } from '@matter/registry/linear-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { Grain } from '@shaders/registry/grain'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; import { type GrainParams, INITIAL } from './params'; diff --git a/apps/docs/src/app/components/linear-gradient/params.ts b/apps/docs/src/app/components/linear-gradient/params.ts index 09f6fc14..dd1121d3 100644 --- a/apps/docs/src/app/components/linear-gradient/params.ts +++ b/apps/docs/src/app/components/linear-gradient/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/linear-gradient/scene.tsx b/apps/docs/src/app/components/linear-gradient/scene.tsx index 91cbf0fe..33476b37 100644 --- a/apps/docs/src/app/components/linear-gradient/scene.tsx +++ b/apps/docs/src/app/components/linear-gradient/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { LinearGradient } from '@matter/registry/linear-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/mesh-gradient/params.ts b/apps/docs/src/app/components/mesh-gradient/params.ts index a3a88283..1c260be2 100644 --- a/apps/docs/src/app/components/mesh-gradient/params.ts +++ b/apps/docs/src/app/components/mesh-gradient/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/mesh-gradient/scene.tsx b/apps/docs/src/app/components/mesh-gradient/scene.tsx index 4f05bed2..c30efa35 100644 --- a/apps/docs/src/app/components/mesh-gradient/scene.tsx +++ b/apps/docs/src/app/components/mesh-gradient/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { MeshGradient, type Palette } from '@matter/registry/mesh-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { MeshGradient, type Palette } from '@shaders/registry/mesh-gradient'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/radial-gradient/params.ts b/apps/docs/src/app/components/radial-gradient/params.ts index 51aaa680..ab8666b8 100644 --- a/apps/docs/src/app/components/radial-gradient/params.ts +++ b/apps/docs/src/app/components/radial-gradient/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/radial-gradient/scene.tsx b/apps/docs/src/app/components/radial-gradient/scene.tsx index b37052dd..580a443d 100644 --- a/apps/docs/src/app/components/radial-gradient/scene.tsx +++ b/apps/docs/src/app/components/radial-gradient/scene.tsx @@ -2,8 +2,8 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { RadialGradient } from '@matter/registry/radial-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { RadialGradient } from '@shaders/registry/radial-gradient'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/simplex-noise/page.tsx b/apps/docs/src/app/components/simplex-noise/page.tsx index 34ffc68e..6fdc83b0 100644 --- a/apps/docs/src/app/components/simplex-noise/page.tsx +++ b/apps/docs/src/app/components/simplex-noise/page.tsx @@ -104,7 +104,7 @@ export default function SimplexNoisePage() { fontSize: '0.85rem', }} > - {`import { ShaderScene } from '@lovo/matter-react' + {`import { ShaderScene } from '@mattermix/shaders-react' import { SimplexNoise } from '@/components/matter/simplex-noise' diff --git a/apps/docs/src/app/components/simplex-noise/params.ts b/apps/docs/src/app/components/simplex-noise/params.ts index 1729b060..eacb4f4e 100644 --- a/apps/docs/src/app/components/simplex-noise/params.ts +++ b/apps/docs/src/app/components/simplex-noise/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/simplex-noise/scene.tsx b/apps/docs/src/app/components/simplex-noise/scene.tsx index 86e4c467..c3b6df79 100644 --- a/apps/docs/src/app/components/simplex-noise/scene.tsx +++ b/apps/docs/src/app/components/simplex-noise/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { SimplexNoise } from '@matter/registry/simplex-noise'; -import type { ColorStop } from '@matter/registry/simplex-noise'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { SimplexNoise } from '@shaders/registry/simplex-noise'; +import type { ColorStop } from '@shaders/registry/simplex-noise'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/vignette/params.ts b/apps/docs/src/app/components/vignette/params.ts index c6993a69..b1d65ab3 100644 --- a/apps/docs/src/app/components/vignette/params.ts +++ b/apps/docs/src/app/components/vignette/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; export interface VignetteParams { intensity: number; diff --git a/apps/docs/src/app/components/vignette/scene.tsx b/apps/docs/src/app/components/vignette/scene.tsx index 9df2b51f..eb00dc02 100644 --- a/apps/docs/src/app/components/vignette/scene.tsx +++ b/apps/docs/src/app/components/vignette/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { LinearGradient } from '@matter/registry/linear-gradient'; -import { Vignette } from '@matter/registry/vignette'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; +import { Vignette } from '@shaders/registry/vignette'; import { INITIAL, type VignetteParams } from './params'; diff --git a/apps/docs/src/app/components/voronoi/params.ts b/apps/docs/src/app/components/voronoi/params.ts index 3a8cce6d..38783482 100644 --- a/apps/docs/src/app/components/voronoi/params.ts +++ b/apps/docs/src/app/components/voronoi/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/voronoi/scene.tsx b/apps/docs/src/app/components/voronoi/scene.tsx index c71878c1..6d65da71 100644 --- a/apps/docs/src/app/components/voronoi/scene.tsx +++ b/apps/docs/src/app/components/voronoi/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { Voronoi } from '@matter/registry/voronoi'; -import type { ColorStop } from '@matter/registry/voronoi'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { Voronoi } from '@shaders/registry/voronoi'; +import type { ColorStop } from '@shaders/registry/voronoi'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/components/wave-lines/params.ts b/apps/docs/src/app/components/wave-lines/params.ts index 20fb3865..d4395972 100644 --- a/apps/docs/src/app/components/wave-lines/params.ts +++ b/apps/docs/src/app/components/wave-lines/params.ts @@ -1,4 +1,4 @@ -import type { ColorSpace } from '@lovo/matter'; +import type { ColorSpace } from '@mattermix/shaders'; import { paletteOklch } from '../../../lib/palette'; diff --git a/apps/docs/src/app/components/wave-lines/scene.tsx b/apps/docs/src/app/components/wave-lines/scene.tsx index aee98982..c495a707 100644 --- a/apps/docs/src/app/components/wave-lines/scene.tsx +++ b/apps/docs/src/app/components/wave-lines/scene.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; -import { WaveLines } from '@matter/registry/wave-lines'; -import type { WaveLine } from '@matter/registry/wave-lines'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { WaveLines } from '@shaders/registry/wave-lines'; +import type { WaveLine } from '@shaders/registry/wave-lines'; import { INITIAL, type Params } from './params'; diff --git a/apps/docs/src/app/dev/color-space-probe/ProbeGrid.tsx b/apps/docs/src/app/dev/color-space-probe/ProbeGrid.tsx index 0ed4b181..ea6324ee 100644 --- a/apps/docs/src/app/dev/color-space-probe/ProbeGrid.tsx +++ b/apps/docs/src/app/dev/color-space-probe/ProbeGrid.tsx @@ -2,9 +2,9 @@ import { useEffect } from 'react'; -import type { ColorSpace } from '@lovo/matter'; -import { mixColor } from '@lovo/matter'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; +import type { ColorSpace } from '@mattermix/shaders'; +import { mixColor } from '@mattermix/shaders'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; import { mix, step, uv, vec3, vec4 } from 'three/tsl'; import { addPlaneMesh } from '@/lib/meshUtils'; diff --git a/apps/docs/src/app/dev/dot-field-stack-probe/probe-scene.tsx b/apps/docs/src/app/dev/dot-field-stack-probe/probe-scene.tsx index f41016f3..7004b4ae 100644 --- a/apps/docs/src/app/dev/dot-field-stack-probe/probe-scene.tsx +++ b/apps/docs/src/app/dev/dot-field-stack-probe/probe-scene.tsx @@ -6,9 +6,9 @@ // the canvas shows the page background (black) there instead. The paired // spec (visual/dot-field-stack.spec.ts) asserts pixel-color fractions, so // there is no screenshot baseline to regenerate. -import { ShaderScene } from '@lovo/matter-react'; -import { DotField } from '@matter/registry/dot-field'; -import { LinearGradient } from '@matter/registry/linear-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { DotField } from '@shaders/registry/dot-field'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; import { VisualTestPause } from '@/lib/visualTestHooks'; diff --git a/apps/docs/src/app/dev/gamut-probe/ProbeGrid.tsx b/apps/docs/src/app/dev/gamut-probe/ProbeGrid.tsx index a14ad01d..7f0604c8 100644 --- a/apps/docs/src/app/dev/gamut-probe/ProbeGrid.tsx +++ b/apps/docs/src/app/dev/gamut-probe/ProbeGrid.tsx @@ -2,8 +2,8 @@ import { useEffect } from 'react'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; -import { oklchToLinearSrgb } from '@lovo/matter/color'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; +import { oklchToLinearSrgb } from '@mattermix/shaders/color'; import { vec3, vec4 } from 'three/tsl'; import { addPlaneMesh } from '@/lib/meshUtils'; diff --git a/apps/docs/src/app/dev/hsl-gamut-probe/ProbeGrid.tsx b/apps/docs/src/app/dev/hsl-gamut-probe/ProbeGrid.tsx index 70ab2431..48c9ef5b 100644 --- a/apps/docs/src/app/dev/hsl-gamut-probe/ProbeGrid.tsx +++ b/apps/docs/src/app/dev/hsl-gamut-probe/ProbeGrid.tsx @@ -1,7 +1,7 @@ 'use client'; -import { ShaderScene } from '@lovo/matter-react'; -import { LinearGradient } from '@matter/registry/linear-gradient'; +import { ShaderScene } from '@mattermix/shaders-react'; +import { LinearGradient } from '@shaders/registry/linear-gradient'; import { VisualTestPause } from '@/lib/visualTestHooks'; diff --git a/apps/docs/src/app/dev/hue-arc-probe/ProbeGrid.tsx b/apps/docs/src/app/dev/hue-arc-probe/ProbeGrid.tsx index 3bd18aed..60255f3b 100644 --- a/apps/docs/src/app/dev/hue-arc-probe/ProbeGrid.tsx +++ b/apps/docs/src/app/dev/hue-arc-probe/ProbeGrid.tsx @@ -2,10 +2,10 @@ import { useEffect } from 'react'; -import type { HueInterpolation } from '@lovo/matter'; -import { colorRamp } from '@lovo/matter'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; -import { srgbChannelToLinear } from '@lovo/matter/color'; +import type { HueInterpolation } from '@mattermix/shaders'; +import { colorRamp } from '@mattermix/shaders'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; +import { srgbChannelToLinear } from '@mattermix/shaders/color'; import type { ShaderNodeObject } from 'three/tsl'; import { mix, step, uv, vec3, vec4 } from 'three/tsl'; import type { Node } from 'three/webgpu'; diff --git a/apps/docs/src/app/dev/voronoi-probe/probe-scene.tsx b/apps/docs/src/app/dev/voronoi-probe/probe-scene.tsx index 9dbfd1b1..f2498e25 100644 --- a/apps/docs/src/app/dev/voronoi-probe/probe-scene.tsx +++ b/apps/docs/src/app/dev/voronoi-probe/probe-scene.tsx @@ -7,8 +7,8 @@ // bisector distance works. Swap the colorNode lines below to isolate fields. import { useEffect } from 'react'; -import { voronoiCells } from '@lovo/matter'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; +import { voronoiCells } from '@mattermix/shaders'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; import { smoothstep, uniform, uv, vec3 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/apps/docs/src/app/palette/LightnessGrid.tsx b/apps/docs/src/app/palette/LightnessGrid.tsx index 8982f180..87e26a5e 100644 --- a/apps/docs/src/app/palette/LightnessGrid.tsx +++ b/apps/docs/src/app/palette/LightnessGrid.tsx @@ -7,7 +7,7 @@ // rather than snapped to the neutral ladder, which is now a formality for the // accents — every one of them sits on a tick — but still matters for limeScale, // whose ramp has a ladder of its own. -import { linearSrgbToOklch, parseColorString } from '@lovo/matter/color'; +import { linearSrgbToOklch, parseColorString } from '@mattermix/shaders/color'; import { palette, paletteOklch } from '@/lib/palette'; diff --git a/apps/docs/src/app/primitives/page.tsx b/apps/docs/src/app/primitives/page.tsx index b72af3e6..a6cbe56d 100644 --- a/apps/docs/src/app/primitives/page.tsx +++ b/apps/docs/src/app/primitives/page.tsx @@ -5,7 +5,7 @@ import { PRIMITIVES } from '@/data/primitives'; export const metadata = { title: 'Primitives', description: - 'Tier 2 — pure TSL functions exported from @lovo/matter. Compose them into your own shaders.', + 'Tier 2 — pure TSL functions exported from @mattermix/shaders. Compose them into your own shaders.', }; export default function PrimitivesIndex() { @@ -13,8 +13,8 @@ export default function PrimitivesIndex() {

Primitives

- Tier 2 — pure TSL functions exported from @lovo/matter. Use them inside your - own shaders or compose them into Tier 1 components. + Tier 2 — pure TSL functions exported from @mattermix/shaders. Use them inside + your own shaders or compose them into Tier 1 components.

    {PRIMITIVES.map((p) => ( diff --git a/apps/docs/src/app/recipes/_builds.ts b/apps/docs/src/app/recipes/_builds.ts index 93b2ddb1..09922193 100644 --- a/apps/docs/src/app/recipes/_builds.ts +++ b/apps/docs/src/app/recipes/_builds.ts @@ -5,7 +5,7 @@ import { fractalNoise, quantize, voronoi, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import type UniformNode from 'three/src/nodes/core/UniformNode.js'; import { length, max, sin, smoothstep, uv, vec2, vec3, vec4 } from 'three/tsl'; import type { ShaderNodeObject } from 'three/tsl'; diff --git a/apps/docs/src/components/DemoPoster.tsx b/apps/docs/src/components/DemoPoster.tsx index 5f343714..031eacb6 100644 --- a/apps/docs/src/components/DemoPoster.tsx +++ b/apps/docs/src/components/DemoPoster.tsx @@ -3,7 +3,7 @@ import Image from 'next/image'; import type { ReactNode } from 'react'; -import { ShaderPoster } from '@lovo/matter-react/poster'; +import { ShaderPoster } from '@mattermix/shaders-react/poster'; export interface DemoPosterProps { src: string; diff --git a/apps/docs/src/components/PrimitiveScene.tsx b/apps/docs/src/components/PrimitiveScene.tsx index a8b834e6..b98bbfc8 100644 --- a/apps/docs/src/components/PrimitiveScene.tsx +++ b/apps/docs/src/components/PrimitiveScene.tsx @@ -14,8 +14,8 @@ import { signedDistanceFieldCircle, simplexNoise, voronoi, -} from '@lovo/matter'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; +} from '@mattermix/shaders'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; import type { ShaderNodeObject } from 'three/tsl'; import { mix, sin, smoothstep, uniform, uv, vec2, vec3, vec4 } from 'three/tsl'; import { Vector2 } from 'three/webgpu'; diff --git a/apps/docs/src/components/RecipeScene.tsx b/apps/docs/src/components/RecipeScene.tsx index 77c4ccca..01810601 100644 --- a/apps/docs/src/components/RecipeScene.tsx +++ b/apps/docs/src/components/RecipeScene.tsx @@ -2,7 +2,7 @@ import { useEffect, useMemo } from 'react'; -import { ShaderScene, useCursor, useShaderContext } from '@lovo/matter-react'; +import { ShaderScene, useCursor, useShaderContext } from '@mattermix/shaders-react'; import { uniform } from 'three/tsl'; import { Vector2 } from 'three/webgpu'; diff --git a/apps/docs/src/components/controls/ColorInput.tsx b/apps/docs/src/components/controls/ColorInput.tsx index 5ffa3c51..16dcff1f 100644 --- a/apps/docs/src/components/controls/ColorInput.tsx +++ b/apps/docs/src/components/controls/ColorInput.tsx @@ -8,7 +8,7 @@ * This used to load the popover through `next/dynamic` with `ssr: false`, * because reaching the color math meant importing three/webgpu, which reads * `self` at module load. Both halves of that now come from three-free subpaths - * (`@lovo/matter/color` and `@lovo/matter-react/gamut`), so it is a plain + * (`@mattermix/shaders/color` and `@mattermix/shaders-react/gamut`), so it is a plain * import. */ import { Popover } from '@base-ui/react/popover'; diff --git a/apps/docs/src/components/controls/ColorPopoverContents.tsx b/apps/docs/src/components/controls/ColorPopoverContents.tsx index 00c3b685..d0f23485 100644 --- a/apps/docs/src/components/controls/ColorPopoverContents.tsx +++ b/apps/docs/src/components/controls/ColorPopoverContents.tsx @@ -8,8 +8,8 @@ */ import { type ChangeEvent, useEffect, useRef, useState } from 'react'; -import { useDisplayGamut } from '@lovo/matter-react/gamut'; -import { oklchInGamut, oklchToGamut } from '@lovo/matter/color'; +import { useDisplayGamut } from '@mattermix/shaders-react/gamut'; +import { oklchInGamut, oklchToGamut } from '@mattermix/shaders/color'; import { ChannelSlider } from './color/ChannelSlider'; import { formatOklch, type OklchColor, parseToOklch } from './color/oklch'; diff --git a/apps/docs/src/components/controls/color/ChannelSlider.tsx b/apps/docs/src/components/controls/color/ChannelSlider.tsx index 36a6be74..e310dcbe 100644 --- a/apps/docs/src/components/controls/color/ChannelSlider.tsx +++ b/apps/docs/src/components/controls/color/ChannelSlider.tsx @@ -24,7 +24,7 @@ import { linearSrgbToLinearDisplayP3, oklchInGamut, oklchToLinearSrgb, -} from '@lovo/matter/color'; +} from '@mattermix/shaders/color'; import { MAX_CHROMA, type OklchColor } from './oklch'; diff --git a/apps/docs/src/components/controls/color/oklch.ts b/apps/docs/src/components/controls/color/oklch.ts index be2abf36..01162e3a 100644 --- a/apps/docs/src/components/controls/color/oklch.ts +++ b/apps/docs/src/components/controls/color/oklch.ts @@ -5,7 +5,7 @@ * oklab(), and throws on anything else, so emitting rgb() or hsl() would crash * the shader. */ -import { linearSrgbToOklch, parseColorString } from '@lovo/matter/color'; +import { linearSrgbToOklch, parseColorString } from '@mattermix/shaders/color'; /** * OKLCH in one line: lightness is how bright (0 black, 1 white), chroma is how diff --git a/apps/docs/src/data/primitives.ts b/apps/docs/src/data/primitives.ts index 19d8a6a1..238d085c 100644 --- a/apps/docs/src/data/primitives.ts +++ b/apps/docs/src/data/primitives.ts @@ -165,7 +165,7 @@ interface CursorRippleOptions { signature: `const elapsedTime: TSLNode // Equals three/tsl's built-in time * reducedMotionScale. Honors // prefers-reduced-motion and any setReducedMotionPolicy override. -// Import from '@lovo/matter'. For raw uncapped time, import from +// Import from '@mattermix/shaders'. For raw uncapped time, import from // 'three/tsl' directly.`, usedBy: ['linear-gradient', 'simplex-noise', 'wave-lines', 'mesh-gradient', 'aurora'], controls: [], diff --git a/apps/docs/src/data/recipes.ts b/apps/docs/src/data/recipes.ts index c6d0c35e..edfd0f29 100644 --- a/apps/docs/src/data/recipes.ts +++ b/apps/docs/src/data/recipes.ts @@ -21,7 +21,7 @@ export const RECIPES: readonly RecipeEntry[] = [ 'Warm/cool vertical bands that scroll horizontally. Simplest combination of sin, time, and colorRamp.', primitivesUsed: ['time', 'color-ramp'], source: `import { uv, vec3, vec4, sin } from 'three/tsl' -import { elapsedTime, colorRamp } from '@lovo/matter' +import { elapsedTime, colorRamp } from '@mattermix/shaders' const stripe = sin(uv().x.mul(20).add(elapsedTime.mul(2))) const normalizedStripe = stripe.mul(0.5).add(0.5).clamp(0, 1) @@ -87,7 +87,7 @@ material.colorNode = vec4(glow, glow.mul(0.7), glow.mul(1.5), 1)`, description: 'FBM-driven color swirl. The canonical "shader-y" look from one primitive.', primitivesUsed: ['fbm', 'time', 'color-ramp'], source: `import { uv, vec2, vec3, vec4 } from 'three/tsl' -import { elapsedTime, fractalNoise, colorRamp } from '@lovo/matter' +import { elapsedTime, fractalNoise, colorRamp } from '@mattermix/shaders' const scrolledTime = elapsedTime.mul(0.3) const samplePosition = uv().mul(2).add(vec2(scrolledTime, scrolledTime)) @@ -118,7 +118,7 @@ material.colorNode = vec4(colorRamp(noiseValue, stops), 1)`, 'Voronoi cells flattened into 4 discrete sepia bands — a mosaic / stained-glass / low-poly aesthetic. Use as a hand-crafted-feeling background where each region renders one solid color rather than a gradient.', primitivesUsed: ['voronoi', 'quantize', 'color-ramp'], source: `import { uv, vec4 } from 'three/tsl' -import { voronoi, quantize } from '@lovo/matter' +import { voronoi, quantize } from '@mattermix/shaders' const cells = voronoi(uv().mul(8)) const tiered = quantize(cells, 4) diff --git a/apps/docs/src/lib/VisualTestPause.tsx b/apps/docs/src/lib/VisualTestPause.tsx index 67d89fae..684f59e8 100644 --- a/apps/docs/src/lib/VisualTestPause.tsx +++ b/apps/docs/src/lib/VisualTestPause.tsx @@ -2,9 +2,9 @@ import { useEffect } from 'react'; -import { resetRendererClock, setReducedMotionPolicy } from '@lovo/matter'; -import type { ReducedMotionPolicy, SchedulerTick } from '@lovo/matter'; -import { useShaderContext } from '@lovo/matter-react'; +import { resetRendererClock, setReducedMotionPolicy } from '@mattermix/shaders'; +import type { ReducedMotionPolicy, SchedulerTick } from '@mattermix/shaders'; +import { useShaderContext } from '@mattermix/shaders-react'; const TARGET_FRAME = 2; diff --git a/apps/docs/src/lib/meshUtils.ts b/apps/docs/src/lib/meshUtils.ts index fd61bcb7..d84dc245 100644 --- a/apps/docs/src/lib/meshUtils.ts +++ b/apps/docs/src/lib/meshUtils.ts @@ -1,4 +1,4 @@ -import type { ShaderContextValue } from '@lovo/matter-react'; +import type { ShaderContextValue } from '@mattermix/shaders-react'; import type { ShaderNodeObject } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; import type { Node } from 'three/webgpu'; diff --git a/apps/docs/src/lib/palette.test.ts b/apps/docs/src/lib/palette.test.ts index 97e3262a..ebb1939a 100644 --- a/apps/docs/src/lib/palette.test.ts +++ b/apps/docs/src/lib/palette.test.ts @@ -1,8 +1,8 @@ // Guards the brand palette against the two mistakes that produced the 2026-07-26 // correction: colors no display can show, and neutral scales drifting off their -// intended tint. Reads L/C/h back through @lovo/matter's own conversions rather +// intended tint. Reads L/C/h back through @mattermix/shaders's own conversions rather // than parsing strings, so the assertions use the same math the renderer does. -import { linearSrgbToOklch, oklchInGamut, parseColorString } from '@lovo/matter/color'; +import { linearSrgbToOklch, oklchInGamut, parseColorString } from '@mattermix/shaders/color'; import { readFileSync } from 'node:fs'; import { dirname, join } from 'node:path'; import { fileURLToPath } from 'node:url'; @@ -409,7 +409,7 @@ describe('brand palette', () => { // `keeps globals.css hex literals in sync`, aimed at that second surface. const registryRoot = join( dirname(fileURLToPath(import.meta.url)), - '../../node_modules/@matter/registry', + '../../node_modules/@shaders/registry', ); const registryFiles = [ 'aurora/aurora.tsx', diff --git a/apps/docs/src/lib/palette.ts b/apps/docs/src/lib/palette.ts index ff8b4ad7..1c579906 100644 --- a/apps/docs/src/lib/palette.ts +++ b/apps/docs/src/lib/palette.ts @@ -23,7 +23,7 @@ * it. Before the 2026-07-26 pass, the accent then called `sky.dark` asked for * 0.145 chroma where P3 allows 0.109, and clipping landed it 14.7 degrees off * its stated hue. So: keep every oklch value inside P3 (`oklchInGamut` from - * `@lovo/matter` is the check), and derive the hex from it with + * `@mattermix/shaders` is the check), and derive the hex from it with * `oklchToGamut(..., 'srgb')` rather than by clipping. */ import { accents } from './accents'; diff --git a/apps/docs/vitest.config.ts b/apps/docs/vitest.config.ts index 5e48f563..b8b59dc9 100644 --- a/apps/docs/vitest.config.ts +++ b/apps/docs/vitest.config.ts @@ -8,10 +8,10 @@ export default defineConfig({ test: { // No DOM environment on purpose. These tests are pure color math, and // running them in plain Node means a future test that imports root - // @lovo/matter fails here — three/webgpu reads `self` at module load — the + // @mattermix/shaders fails here — three/webgpu reads `self` at module load — the // same way it would fail in a server render. Import from - // @lovo/matter/color instead. - name: '@matter/docs', + // @mattermix/shaders/color instead. + name: '@shaders/docs', include: ['src/**/*.test.{ts,tsx}'], passWithNoTests: true, }, diff --git a/apps/editor/next.config.ts b/apps/editor/next.config.ts index 53da2a24..4e5b7de8 100644 --- a/apps/editor/next.config.ts +++ b/apps/editor/next.config.ts @@ -38,7 +38,7 @@ const nextConfig: NextConfig = { // `next build` lint too just runs the same rules a second time. Turning it off // here is not a way of skipping the check — it is saying where the check lives. eslint: { ignoreDuringBuilds: true }, - transpilePackages: ['@lovo/matter', '@lovo/matter-react'], + transpilePackages: ['@mattermix/shaders', '@mattermix/shaders-react'], webpack(config: WebpackConfig): WebpackConfig { config.resolve = config.resolve ?? {}; const webgpuBundle = resolve(threeDir, 'build/three.webgpu.js'); diff --git a/apps/editor/package.json b/apps/editor/package.json index cfbd2af9..26ad0cf8 100644 --- a/apps/editor/package.json +++ b/apps/editor/package.json @@ -1,5 +1,5 @@ { - "name": "@matter/editor", + "name": "@shaders/editor", "version": "0.0.0", "private": true, "type": "module", @@ -14,8 +14,8 @@ }, "dependencies": { "@base-ui/react": "^1.6.0", - "@lovo/matter": "workspace:*", - "@lovo/matter-react": "workspace:*", + "@mattermix/shaders": "workspace:*", + "@mattermix/shaders-react": "workspace:*", "@xyflow/react": "^12.11.2", "next": "^15.5.18", "react": "^19.0.0", @@ -23,7 +23,7 @@ "three": "^0.170.0" }, "devDependencies": { - "@matter/tsconfig": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@types/node": "^22.7.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/apps/editor/src/app/parity/generated.gen.tsx b/apps/editor/src/app/parity/generated.gen.tsx index d1451806..a6116a68 100644 --- a/apps/editor/src/app/parity/generated.gen.tsx +++ b/apps/editor/src/app/parity/generated.gen.tsx @@ -6,9 +6,13 @@ // as a prop with the editor's value as its default. import { useEffect } from 'react'; -import { colorRamp, displace, simplexNoise } from '@lovo/matter'; -import { useAnimatableSpeed, useAnimatableUniform, useShaderContext } from '@lovo/matter-react'; -import { parseColorString } from '@lovo/matter/color'; +import { colorRamp, displace, simplexNoise } from '@mattermix/shaders'; +import { + useAnimatableSpeed, + useAnimatableUniform, + useShaderContext, +} from '@mattermix/shaders-react'; +import { parseColorString } from '@mattermix/shaders/color'; import { clamp, cos, diff --git a/apps/editor/src/app/parity/generated/scene.tsx b/apps/editor/src/app/parity/generated/scene.tsx index d74bf794..4611286b 100644 --- a/apps/editor/src/app/parity/generated/scene.tsx +++ b/apps/editor/src/app/parity/generated/scene.tsx @@ -6,7 +6,7 @@ // full-viewport ShaderScene. The visual spec drives this and /parity/runtime // to the same screenshot baseline; parity.test.ts keeps the file honest // against the emitter. -import { ShaderScene } from '@lovo/matter-react'; +import { ShaderScene } from '@mattermix/shaders-react'; import VisualTestPause from '@/lib/VisualTestPause'; diff --git a/apps/editor/src/app/parity/runtime/scene.tsx b/apps/editor/src/app/parity/runtime/scene.tsx index 1155abc3..945c1428 100644 --- a/apps/editor/src/app/parity/runtime/scene.tsx +++ b/apps/editor/src/app/parity/runtime/scene.tsx @@ -8,7 +8,7 @@ // see page.dev.tsx beside this file. import { useMemo } from 'react'; -import { ShaderScene } from '@lovo/matter-react'; +import { ShaderScene } from '@mattermix/shaders-react'; import { CompiledMesh } from '@/editor/canvas/OutputPreview'; import { structuralKeyOf } from '@/editor/graph/graph'; diff --git a/apps/editor/src/controls/ColorPopoverContents.tsx b/apps/editor/src/controls/ColorPopoverContents.tsx index 85d191c1..68a1c5b9 100644 --- a/apps/editor/src/controls/ColorPopoverContents.tsx +++ b/apps/editor/src/controls/ColorPopoverContents.tsx @@ -20,8 +20,8 @@ */ import { type ChangeEvent, useEffect, useRef, useState } from 'react'; -import { useDisplayGamut } from '@lovo/matter-react/gamut'; -import { oklchInGamut, oklchToGamut } from '@lovo/matter/color'; +import { useDisplayGamut } from '@mattermix/shaders-react/gamut'; +import { oklchInGamut, oklchToGamut } from '@mattermix/shaders/color'; import { ChannelSlider } from './color/ChannelSlider'; import { formatOklch, type OklchColor, parseToOklch } from './color/oklch'; diff --git a/apps/editor/src/controls/color/ChannelSlider.tsx b/apps/editor/src/controls/color/ChannelSlider.tsx index f30d46d3..b1f9e00f 100644 --- a/apps/editor/src/controls/color/ChannelSlider.tsx +++ b/apps/editor/src/controls/color/ChannelSlider.tsx @@ -28,7 +28,7 @@ import { linearSrgbToLinearDisplayP3, oklchInGamut, oklchToLinearSrgb, -} from '@lovo/matter/color'; +} from '@mattermix/shaders/color'; import { MAX_CHROMA, type OklchColor } from './oklch'; diff --git a/apps/editor/src/controls/color/oklch.ts b/apps/editor/src/controls/color/oklch.ts index fa0432d4..8f6ee43e 100644 --- a/apps/editor/src/controls/color/oklch.ts +++ b/apps/editor/src/controls/color/oklch.ts @@ -10,7 +10,7 @@ * wiring around it was left behind (ColorInput/ColorPopoverContents here take * plain value/onChange/onCommit props instead). */ -import { linearSrgbToOklch, parseColorString } from '@lovo/matter/color'; +import { linearSrgbToOklch, parseColorString } from '@mattermix/shaders/color'; /** * OKLCH in one line: lightness is how bright (0 black, 1 white), chroma is how diff --git a/apps/editor/src/editor/canvas/CardParams.tsx b/apps/editor/src/editor/canvas/CardParams.tsx index 6c9d0ab8..5ea51494 100644 --- a/apps/editor/src/editor/canvas/CardParams.tsx +++ b/apps/editor/src/editor/canvas/CardParams.tsx @@ -5,7 +5,7 @@ // one place that writes node data) and passes it down here. Split out of // CardNode.tsx (MAT-94 Task 11.5) so the card shell stays under the // 300-line bar. -import { parseColorString } from '@lovo/matter/color'; +import { parseColorString } from '@mattermix/shaders/color'; import { ColorInput } from '@/controls/ColorInput'; import { colorParamOf, rampStopsOf } from '@/editor/graph/graph'; diff --git a/apps/editor/src/editor/canvas/OutputPreview.tsx b/apps/editor/src/editor/canvas/OutputPreview.tsx index 788390de..930263a5 100644 --- a/apps/editor/src/editor/canvas/OutputPreview.tsx +++ b/apps/editor/src/editor/canvas/OutputPreview.tsx @@ -6,9 +6,9 @@ // graph's STRUCTURE changes — drags and selections never recompile. import { useEffect } from 'react'; -import { getReducedMotionTimeScale } from '@lovo/matter'; -import type { SchedulerTick } from '@lovo/matter'; -import { ShaderScene, useShaderContext } from '@lovo/matter-react'; +import { getReducedMotionTimeScale } from '@mattermix/shaders'; +import type { SchedulerTick } from '@mattermix/shaders'; +import { ShaderScene, useShaderContext } from '@mattermix/shaders-react'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; import { compileOutputColor } from '@/editor/graph/compile'; diff --git a/apps/editor/src/editor/graph/compile.ts b/apps/editor/src/editor/graph/compile.ts index 51429cf9..a7ee848d 100644 --- a/apps/editor/src/editor/graph/compile.ts +++ b/apps/editor/src/editor/graph/compile.ts @@ -17,8 +17,8 @@ import { mixColor, simplexNoise, voronoiCells, -} from '@lovo/matter'; -import { parseColorString } from '@lovo/matter/color'; +} from '@mattermix/shaders'; +import { parseColorString } from '@mattermix/shaders/color'; import { add, clamp, diff --git a/apps/editor/src/editor/graph/emit.test.ts b/apps/editor/src/editor/graph/emit.test.ts index 85387b48..87096a1a 100644 --- a/apps/editor/src/editor/graph/emit.test.ts +++ b/apps/editor/src/editor/graph/emit.test.ts @@ -142,7 +142,7 @@ describe('emitComponentSource on the starter graph', () => { it('animates speed through useAnimatableSpeed, outside the effect deps', () => { // The generated component is a fixed graph, so hooks are callable — one // per speed dial, placed before the effect. - expect(source).toContain("from '@lovo/matter-react'"); + expect(source).toContain("from '@mattermix/shaders-react'"); expect(source).toContain('const noiseSpeedPhase = useAnimatableSpeed(noiseSpeed);'); // The phase uniform absorbs speed changes, so the speed prop must NOT // rebuild the material: it stays out of the deps array. @@ -163,7 +163,7 @@ describe('emitComponentSource on the starter graph', () => { expect(source).toContain("{ position: 0.5, color: vec3(...parseColorString('#7C3AED')) }"); expect(source).toContain("{ position: 1, color: vec3(...parseColorString('#F472B6')) }"); expect(source).not.toContain('stops?:'); - expect(source).toContain("from '@lovo/matter/color'"); + expect(source).toContain("from '@mattermix/shaders/color'"); }); it('routes the ramp color into the material', () => { diff --git a/apps/editor/src/editor/graph/emit.ts b/apps/editor/src/editor/graph/emit.ts index 87186518..19a9f47a 100644 --- a/apps/editor/src/editor/graph/emit.ts +++ b/apps/editor/src/editor/graph/emit.ts @@ -956,9 +956,9 @@ function assembleFile(emission: Emission, finalColorExpr: string): string { }; const matterImportLine = - sortedMatter.length > 0 ? `${importLineOf(sortedMatter, '@lovo/matter')}\n` : ''; + sortedMatter.length > 0 ? `${importLineOf(sortedMatter, '@mattermix/shaders')}\n` : ''; const parseColorLine = emission.usesParseColor - ? `import { parseColorString } from '@lovo/matter/color';\n` + ? `import { parseColorString } from '@mattermix/shaders/color';\n` : ''; return `'use client'; @@ -969,7 +969,7 @@ function assembleFile(emission: Emission, finalColorExpr: string): string { // as a prop with the editor's value as its default. import { useEffect } from 'react'; -${matterImportLine}${importLineOf(sortedMatterReact, '@lovo/matter-react')} +${matterImportLine}${importLineOf(sortedMatterReact, '@mattermix/shaders-react')} ${parseColorLine}${importLineOf(sortedTsl, 'three/tsl')} import type { ShaderNodeObject } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/apps/editor/src/editor/graph/parity.test.ts b/apps/editor/src/editor/graph/parity.test.ts index 4cd4f7ff..71940e96 100644 --- a/apps/editor/src/editor/graph/parity.test.ts +++ b/apps/editor/src/editor/graph/parity.test.ts @@ -4,8 +4,8 @@ // generator, never by hand-edit. // // Two modes, same test: -// check (default): pnpm --filter @matter/editor test parity -// regenerate: REGEN_PARITY=1 pnpm --filter @matter/editor test parity +// check (default): pnpm --filter @shaders/editor test parity +// regenerate: REGEN_PARITY=1 pnpm --filter @shaders/editor test parity // // The pixel half lives in apps/docs-tests/visual/editor-parity.spec.ts, // which drives /parity/runtime (the editor's live compiler) and @@ -44,14 +44,14 @@ describe('eject parity (source half)', () => { } catch { throw new Error( `generated.gen.tsx is missing — regenerate it:\n` + - ` REGEN_PARITY=1 pnpm --filter @matter/editor test parity`, + ` REGEN_PARITY=1 pnpm --filter @shaders/editor test parity`, ); } expect( checkedIn, `generated.gen.tsx drifted from the emitter. If the emitter change is intentional, regenerate:\n` + - ` REGEN_PARITY=1 pnpm --filter @matter/editor test parity`, + ` REGEN_PARITY=1 pnpm --filter @shaders/editor test parity`, ).toBe(source); }); }); diff --git a/apps/editor/src/editor/params/RampParam.tsx b/apps/editor/src/editor/params/RampParam.tsx index 7d33bca3..11bdfa59 100644 --- a/apps/editor/src/editor/params/RampParam.tsx +++ b/apps/editor/src/editor/params/RampParam.tsx @@ -8,7 +8,7 @@ // compiled mix chain's arity (structuralKeyOf, graph.ts), so adding or // removing a stop is expected to rebuild; that only happens on the add/remove // buttons, never mid-drag. -import { parseColorString } from '@lovo/matter/color'; +import { parseColorString } from '@mattermix/shaders/color'; import { ColorInput } from '@/controls/ColorInput'; import type { ColorStop } from '@/editor/graph/registry'; diff --git a/apps/editor/src/editor/preset/flow-preset.ts b/apps/editor/src/editor/preset/flow-preset.ts index 0dfee0db..14630636 100644 --- a/apps/editor/src/editor/preset/flow-preset.ts +++ b/apps/editor/src/editor/preset/flow-preset.ts @@ -12,7 +12,7 @@ // must serialize byte-identically to `p`, because that identity is what stops // an undo from recording itself as a fresh history entry (see // use-editor-history.ts). -import { parseColorString } from '@lovo/matter/color'; +import { parseColorString } from '@mattermix/shaders/color'; import type { Edge } from '@xyflow/react'; import type { CardNodeType } from '@/editor/canvas/CardNode'; diff --git a/apps/editor/src/editor/preset/preset.ts b/apps/editor/src/editor/preset/preset.ts index e6ce9a94..120a081a 100644 --- a/apps/editor/src/editor/preset/preset.ts +++ b/apps/editor/src/editor/preset/preset.ts @@ -8,7 +8,7 @@ // spec's default instead of failing the whole load. Kept dependency-free // (hand-rolled validation, no schema library) so every consumer -- including // the code emitter, which stays three-free -- can pull it in cheaply. -import { parseColorString } from '@lovo/matter/color'; +import { parseColorString } from '@mattermix/shaders/color'; import type { ColorStop, ParamSpec, ParamValue, SpecId } from '@/editor/graph/registry'; import { NODE_SPECS, xyKeysOf } from '@/editor/graph/registry'; diff --git a/apps/editor/src/lib/VisualTestPause.tsx b/apps/editor/src/lib/VisualTestPause.tsx index 55e91ce2..65e2d7bd 100644 --- a/apps/editor/src/lib/VisualTestPause.tsx +++ b/apps/editor/src/lib/VisualTestPause.tsx @@ -7,9 +7,9 @@ // Mounted inside the parity scenes' ShaderScene trees. import { useEffect } from 'react'; -import { resetRendererClock, setReducedMotionPolicy } from '@lovo/matter'; -import type { ReducedMotionPolicy, SchedulerTick } from '@lovo/matter'; -import { useShaderContext } from '@lovo/matter-react'; +import { resetRendererClock, setReducedMotionPolicy } from '@mattermix/shaders'; +import type { ReducedMotionPolicy, SchedulerTick } from '@mattermix/shaders'; +import { useShaderContext } from '@mattermix/shaders-react'; const TARGET_FRAME = 2; diff --git a/docs/development/visual-regression.md b/docs/development/visual-regression.md index a96c594e..0a8d47a4 100644 --- a/docs/development/visual-regression.md +++ b/docs/development/visual-regression.md @@ -75,7 +75,7 @@ docker run --rm \ corepack enable && corepack prepare "$(node -p "require(\"./package.json\").packageManager")" --activate && pnpm install --frozen-lockfile && - pnpm --filter @matter/docs-tests exec playwright test \ + pnpm --filter @shaders/docs-tests exec playwright test \ --update-snapshots --grep "Aurora" ' ``` @@ -117,7 +117,7 @@ future runs match it. Run natively, no Docker: ```bash -pnpm --filter @matter/docs-tests exec playwright test \ +pnpm --filter @shaders/docs-tests exec playwright test \ --update-snapshots --grep "Aurora" ``` diff --git a/eslint.config.js b/eslint.config.js index 26a168ee..4c3430cc 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -172,8 +172,8 @@ export default defineConfig([ // reaches three/webgpu — the engine's through the renderer, the binding's // through ShaderScene. three/webgpu reads `self` at module load, so the // wrong import crashes at render time, which is far too late to notice. - // Each has a three-free subpath carrying the same code: @lovo/matter/color - // and @lovo/matter-react/gamut. + // Each has a three-free subpath carrying the same code: @mattermix/shaders/color + // and @mattermix/shaders-react/gamut. // // Banning the names rather than the specifiers is deliberate: it lets /dev // playgrounds keep importing colorRamp, ShaderScene and friends from the @@ -186,7 +186,7 @@ export default defineConfig([ { paths: [ { - name: '@lovo/matter', + name: '@mattermix/shaders', importNames: [ 'linearChannelToSrgb', 'linearSrgbToLinearDisplayP3', @@ -200,14 +200,14 @@ export default defineConfig([ ], allowTypeImports: true, message: - "Import CPU color math from '@lovo/matter/color'. The root entry pulls in three/webgpu, which reads `self` at module load and crashes any server render.", + "Import CPU color math from '@mattermix/shaders/color'. The root entry pulls in three/webgpu, which reads `self` at module load and crashes any server render.", }, { - name: '@lovo/matter-react', + name: '@mattermix/shaders-react', importNames: ['useDisplayGamut'], allowTypeImports: true, message: - "Import useDisplayGamut from '@lovo/matter-react/gamut'. The root entry re-exports ShaderScene and so pulls in three/webgpu, which reads `self` at module load and crashes any server render.", + "Import useDisplayGamut from '@mattermix/shaders-react/gamut'. The root entry re-exports ShaderScene and so pulls in three/webgpu, which reads `self` at module load and crashes any server render.", }, ], }, diff --git a/package.json b/package.json index 5ebebb80..806a7845 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "matter-monorepo", + "name": "shaders-monorepo", "version": "0.0.0", "private": true, "description": "Monorepo root for Matter — React shader components on WebGPU + TSL", @@ -15,12 +15,12 @@ "smoke": "node scripts/smoke-test-cli.mjs", "format": "prettier --write .", "format:check": "prettier --check .", - "dev:docs": "turbo run dev --filter=@matter/docs", - "build:docs": "turbo run build --filter=@matter/docs", - "preview:docs": "turbo run preview --filter=@matter/docs", - "dev:editor": "turbo run dev --filter=@matter/editor", - "build:editor": "turbo run build --filter=@matter/editor", - "preview:editor": "turbo run preview --filter=@matter/editor", + "dev:docs": "turbo run dev --filter=@shaders/docs", + "build:docs": "turbo run build --filter=@shaders/docs", + "preview:docs": "turbo run preview --filter=@shaders/docs", + "dev:editor": "turbo run dev --filter=@shaders/editor", + "build:editor": "turbo run build --filter=@shaders/editor", + "preview:editor": "turbo run preview --filter=@shaders/editor", "test:visual": "turbo run test:visual", "test:visual:update": "turbo run test:visual:update", "snap": "bash scripts/snap.sh", diff --git a/packages/matter-cli/CHANGELOG.md b/packages/matter-cli/CHANGELOG.md index 0eaf173a..08937f94 100644 --- a/packages/matter-cli/CHANGELOG.md +++ b/packages/matter-cli/CHANGELOG.md @@ -1,4 +1,4 @@ -# @lovo/matter-cli +# @mattermix/shaders-cli ## 3.9.0 @@ -90,7 +90,7 @@ ### Minor Changes -- No API changes. Bumped alongside `@lovo/matter` 0.2.0 because the three packages ship as a fixed version group. See [`@lovo/matter`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. +- No API changes. Bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. ## 0.1.0 @@ -98,11 +98,11 @@ - Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - **`@lovo/matter`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. + **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - **`@lovo/matter-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). + **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). - **`@lovo/matter-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. diff --git a/packages/matter-cli/README.md b/packages/matter-cli/README.md index 6068fd3d..fc43604e 100644 --- a/packages/matter-cli/README.md +++ b/packages/matter-cli/README.md @@ -1,12 +1,12 @@ -# @lovo/matter-cli +# @mattermix/shaders-cli shadcn-style copy-paste CLI for **Matter** — fetch polished shader components from the registry into your project, where they're yours to edit. ## Install ```bash -npm install -D @lovo/matter-cli -# or run ad-hoc: npx @lovo/matter-cli +npm install -D @mattermix/shaders-cli +# or run ad-hoc: npx @mattermix/shaders-cli ``` Requires Node 22+. @@ -24,7 +24,7 @@ Writes `matter.config.json` to your project root with sensible defaults: ```json { "componentsDir": "src/components/matter", - "registryUrl": "https://raw.githubusercontent.com/lovo-hq/matter/${ref}/registry", + "registryUrl": "https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry", "aliases": { "@/": "src/" } } ``` @@ -112,7 +112,7 @@ npx matter-cli poster --source ./aurora.tsx --output ./public/aurora.jpg --quali Wire it up: ```tsx -import { ShaderPoster } from '@lovo/matter-react/poster'; +import { ShaderPoster } from '@mattermix/shaders-react/poster'; }> @@ -131,15 +131,15 @@ import { ShaderPoster } from '@lovo/matter-react/poster'; `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, `wave-lines`. -Each component depends on `@lovo/matter` and `@lovo/matter-react`, which you install separately: +Each component depends on `@mattermix/shaders` and `@mattermix/shaders-react`, which you install separately: ```bash -npm install @lovo/matter @lovo/matter-react three +npm install @mattermix/shaders @mattermix/shaders-react three ``` ## Docs - + ## License diff --git a/packages/matter-cli/package.json b/packages/matter-cli/package.json index 81dad716..8e21dee4 100644 --- a/packages/matter-cli/package.json +++ b/packages/matter-cli/package.json @@ -1,5 +1,5 @@ { - "name": "@lovo/matter-cli", + "name": "@mattermix/shaders-cli", "version": "3.9.0", "description": "CLI for Matter — copy-paste components from the registry into your project.", "keywords": [ @@ -10,15 +10,15 @@ "shadcn", "shader" ], - "homepage": "https://github.com/lovo-hq/matter#readme", + "homepage": "https://github.com/mattermix/shaders#readme", "bugs": { - "url": "https://github.com/lovo-hq/matter/issues" + "url": "https://github.com/mattermix/shaders/issues" }, "license": "MIT", - "author": "lovo-hq", + "author": "mattermix", "repository": { "type": "git", - "url": "git+https://github.com/lovo-hq/matter.git", + "url": "git+https://github.com/mattermix/shaders.git", "directory": "packages/matter-cli" }, "bin": { @@ -46,10 +46,10 @@ "esbuild": "^0.27.0" }, "devDependencies": { - "@lovo/matter": "workspace:*", - "@lovo/matter-react": "workspace:*", - "@matter/registry": "workspace:*", - "@matter/tsconfig": "workspace:*", + "@mattermix/shaders": "workspace:*", + "@mattermix/shaders-react": "workspace:*", + "@shaders/registry": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@types/node": "^22.7.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/packages/matter-cli/src/commands/init.test.ts b/packages/matter-cli/src/commands/init.test.ts index 5e7d0aeb..0ed0d012 100644 --- a/packages/matter-cli/src/commands/init.test.ts +++ b/packages/matter-cli/src/commands/init.test.ts @@ -22,7 +22,7 @@ describe('runInit', () => { const matterConfig = JSON.parse(raw); expect(matterConfig.componentsDir).toBe('src/components/matter'); - expect(matterConfig.registryUrl).toContain('lovo-hq/matter'); + expect(matterConfig.registryUrl).toContain('mattermix/shaders'); }); it('refuses to overwrite an existing config without --force', async () => { diff --git a/packages/matter-cli/src/config/matterConfig.test.ts b/packages/matter-cli/src/config/matterConfig.test.ts index 9c012a11..177f9c4c 100644 --- a/packages/matter-cli/src/config/matterConfig.test.ts +++ b/packages/matter-cli/src/config/matterConfig.test.ts @@ -11,8 +11,8 @@ import { } from './matterConfig.js'; describe('DEFAULT_MATTER_CONFIG.registryUrl', () => { - it('points at the lovo-hq/matter org (NOT lovo/matter — that is a 404)', () => { - expect(DEFAULT_MATTER_CONFIG.registryUrl).toContain('/lovo-hq/matter/'); + it('points at the mattermix/shaders org (NOT lovo/matter — that is a 404)', () => { + expect(DEFAULT_MATTER_CONFIG.registryUrl).toContain('/mattermix/shaders/'); expect(DEFAULT_MATTER_CONFIG.registryUrl).not.toMatch(/\/lovo\/matter\//); }); diff --git a/packages/matter-cli/src/config/matterConfig.ts b/packages/matter-cli/src/config/matterConfig.ts index c566a371..a31fe4e8 100644 --- a/packages/matter-cli/src/config/matterConfig.ts +++ b/packages/matter-cli/src/config/matterConfig.ts @@ -17,7 +17,7 @@ export interface MatterConfig { export const DEFAULT_MATTER_CONFIG: MatterConfig = { componentsDir: 'src/components/matter', - registryUrl: 'https://raw.githubusercontent.com/lovo-hq/matter/${ref}/registry', + registryUrl: 'https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry', aliases: { '@/': 'src/' }, }; diff --git a/packages/matter-cli/src/harness/index.tsx b/packages/matter-cli/src/harness/index.tsx index c8481b2b..6bb03fc4 100644 --- a/packages/matter-cli/src/harness/index.tsx +++ b/packages/matter-cli/src/harness/index.tsx @@ -5,7 +5,7 @@ // watcher the screenshot side polls for. import type React from 'react'; -import { setReducedMotionPolicy } from '@lovo/matter'; +import { setReducedMotionPolicy } from '@mattermix/shaders'; import { createRoot } from 'react-dom/client'; import { installFrameReadyWatcher } from './frameReady.js'; diff --git a/packages/matter-cli/src/harness/tsconfig.json b/packages/matter-cli/src/harness/tsconfig.json index ed474aeb..48760e75 100644 --- a/packages/matter-cli/src/harness/tsconfig.json +++ b/packages/matter-cli/src/harness/tsconfig.json @@ -1,6 +1,6 @@ { "$schema": "https://json.schemastore.org/tsconfig", - "extends": "@matter/tsconfig/react-library.json", + "extends": "@shaders/tsconfig/react-library.json", "compilerOptions": { "rootDir": ".", "outDir": "../../dist/harness", diff --git a/packages/matter-cli/src/poster/bundle.ts b/packages/matter-cli/src/poster/bundle.ts index 2fef3b90..6da47774 100644 --- a/packages/matter-cli/src/poster/bundle.ts +++ b/packages/matter-cli/src/poster/bundle.ts @@ -30,7 +30,7 @@ export interface BundlePosterResult { // `dist/index.tsx` instead of `dist/harness/index.tsx`. // // The fix: walk up the directory tree from `import.meta.url` until we find a `package.json` -// with `name === '@lovo/matter-cli'`, then try `dist/harness` then `src/harness` in order. +// with `name === '@mattermix/shaders-cli'`, then try `dist/harness` then `src/harness` in order. // This is robust to any output chunk location tsup chooses. let harnessDirPromise: Promise | undefined; @@ -48,7 +48,7 @@ async function locateHarnessDir(): Promise { name?: string; }; - if (packageJson.name === '@lovo/matter-cli') { + if (packageJson.name === '@mattermix/shaders-cli') { for (const candidate of ['dist/harness', 'src/harness']) { const harnessPath = join(dir, candidate); @@ -61,14 +61,14 @@ async function locateHarnessDir(): Promise { } } throw new Error( - `Found @lovo/matter-cli at ${dir} but neither dist/harness nor src/harness contains index.html`, + `Found @mattermix/shaders-cli at ${dir} but neither dist/harness nor src/harness contains index.html`, ); } } catch (caughtError) { // Re-throw if we found the package but harness is missing if ( caughtError instanceof Error && - caughtError.message.startsWith('Found @lovo/matter-cli') + caughtError.message.startsWith('Found @mattermix/shaders-cli') ) { throw caughtError; } @@ -78,7 +78,8 @@ async function locateHarnessDir(): Promise { if (parent === dir) { throw new Error( - 'Could not locate @lovo/matter-cli package root from ' + fileURLToPath(import.meta.url), + 'Could not locate @mattermix/shaders-cli package root from ' + + fileURLToPath(import.meta.url), ); } dir = parent; diff --git a/packages/matter-cli/src/poster/projectRoot.ts b/packages/matter-cli/src/poster/projectRoot.ts index 86ad011f..e1df4d89 100644 --- a/packages/matter-cli/src/poster/projectRoot.ts +++ b/packages/matter-cli/src/poster/projectRoot.ts @@ -5,7 +5,7 @@ import { dirname, resolve } from 'node:path'; * Nearest package.json above the user's source file = their project root. * The poster pipeline resolves everything against it: esbuild pulls the * component's dependencies from the USER's node_modules (their react, their - * @lovo/matter), and playwright is looked up there too. + * @mattermix/shaders), and playwright is looked up there too. */ export async function findProjectRoot(fromPath: string): Promise { let dir = dirname(resolve(fromPath)); diff --git a/packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx b/packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx index e001ac45..71dd17af 100644 --- a/packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx +++ b/packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx @@ -1,5 +1,5 @@ -import { ShaderScene } from '@lovo/matter-react' -import { Aurora } from '@matter/registry/aurora' +import { ShaderScene } from '@mattermix/shaders-react' +import { Aurora } from '@shaders/registry/aurora' export default function AuroraWithTime() { return ( diff --git a/packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx b/packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx index 6f2ebeb6..f1225a67 100644 --- a/packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx +++ b/packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx @@ -1,6 +1,6 @@ -import { ShaderScene } from '@lovo/matter-react' -import { Grain } from '@matter/registry/grain' -import { LinearGradient } from '@matter/registry/linear-gradient' +import { ShaderScene } from '@mattermix/shaders-react' +import { Grain } from '@shaders/registry/grain' +import { LinearGradient } from '@shaders/registry/linear-gradient' export default function GradientPlusGrain() { return ( diff --git a/packages/matter-cli/src/test-fixtures/posters/named-export.tsx b/packages/matter-cli/src/test-fixtures/posters/named-export.tsx index 83eb7418..f16dcc76 100644 --- a/packages/matter-cli/src/test-fixtures/posters/named-export.tsx +++ b/packages/matter-cli/src/test-fixtures/posters/named-export.tsx @@ -1,5 +1,5 @@ -import { ShaderScene } from '@lovo/matter-react' -import { LinearGradient } from '@matter/registry/linear-gradient' +import { ShaderScene } from '@mattermix/shaders-react' +import { LinearGradient } from '@shaders/registry/linear-gradient' export function NamedExport() { return ( diff --git a/packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx b/packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx index 8dcf3adc..bf8461af 100644 --- a/packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx +++ b/packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx @@ -1,5 +1,5 @@ -import { ShaderScene } from '@lovo/matter-react' -import { LinearGradient } from '@matter/registry/linear-gradient' +import { ShaderScene } from '@mattermix/shaders-react' +import { LinearGradient } from '@shaders/registry/linear-gradient' export default function SingleLinearGradient() { return ( diff --git a/packages/matter-cli/src/transforms/rewriteImports.test.ts b/packages/matter-cli/src/transforms/rewriteImports.test.ts index c7b4da83..14b70f1f 100644 --- a/packages/matter-cli/src/transforms/rewriteImports.test.ts +++ b/packages/matter-cli/src/transforms/rewriteImports.test.ts @@ -26,16 +26,16 @@ describe('rewriteImports', () => { it('leaves unrelated imports alone', () => { const src = - `import { LinearGradient } from '@lovo/matter-react'\n` + + `import { LinearGradient } from '@mattermix/shaders-react'\n` + `import { foo } from '@matter-internal/lib'\n`; const out = rewriteImports(src, { '@matter-internal/': '@/lib/matter/' }); - expect(out).toContain(`import { LinearGradient } from '@lovo/matter-react'`); + expect(out).toContain(`import { LinearGradient } from '@mattermix/shaders-react'`); expect(out).toContain(`import { foo } from '@/lib/matter/lib'`); }); it('is a no-op when no alias matches', () => { - const src = `import { LinearGradient } from '@lovo/matter-react'\n`; + const src = `import { LinearGradient } from '@mattermix/shaders-react'\n`; const out = rewriteImports(src, { '@/': 'src/' }); expect(out).toBe(src); diff --git a/packages/matter-cli/tsconfig.json b/packages/matter-cli/tsconfig.json index 702022b4..e182b897 100644 --- a/packages/matter-cli/tsconfig.json +++ b/packages/matter-cli/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/library.json", + "extends": "@shaders/tsconfig/library.json", "compilerOptions": { "rootDir": "./src", "outDir": "dist", diff --git a/packages/matter-cli/tsconfig.tooling.json b/packages/matter-cli/tsconfig.tooling.json index a847c70b..0c392a2f 100644 --- a/packages/matter-cli/tsconfig.tooling.json +++ b/packages/matter-cli/tsconfig.tooling.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/base.json", + "extends": "@shaders/tsconfig/base.json", "compilerOptions": { "composite": true, "emitDeclarationOnly": true, diff --git a/packages/matter-cli/vitest.config.ts b/packages/matter-cli/vitest.config.ts index 2592fa2f..2a918291 100644 --- a/packages/matter-cli/vitest.config.ts +++ b/packages/matter-cli/vitest.config.ts @@ -4,7 +4,7 @@ export default defineConfig({ // @ts-expect-error -- oxc is not in UserConfig types yet; this is the documented workaround oxc: { tsconfig: { compilerOptions: { verbatimModuleSyntax: true } } }, test: { - name: '@lovo/matter-cli', + name: '@mattermix/shaders-cli', environment: 'node', include: ['src/**/*.test.ts'], passWithNoTests: true, diff --git a/packages/matter-react/CHANGELOG.md b/packages/matter-react/CHANGELOG.md index 7be0f625..83ca90d8 100644 --- a/packages/matter-react/CHANGELOG.md +++ b/packages/matter-react/CHANGELOG.md @@ -1,4 +1,4 @@ -# @lovo/matter-react +# @mattermix/shaders-react ## 3.9.0 @@ -44,9 +44,9 @@ ### Minor Changes -- 0d924ce: Adds `@lovo/matter-react/gamut`, a second entry point carrying `useDisplayGamut` with no path to three. The root entry re-exports `ShaderScene`, which imports `three/webgpu`, and that reads `self` at module load, so a server-rendered page that only wanted to know whether the display can show P3 had to load the renderer to ask. The hook itself never needed it. +- 0d924ce: Adds `@mattermix/shaders-react/gamut`, a second entry point carrying `useDisplayGamut` with no path to three. The root entry re-exports `ShaderScene`, which imports `three/webgpu`, and that reads `self` at module load, so a server-rendered page that only wanted to know whether the display can show P3 had to load the renderer to ask. The hook itself never needed it. - Same idea as `@lovo/matter/color`, and this package already shipped `./poster` on the same reasoning. Both subpaths now have a test that imports them under a bare Node environment, so three creeping back into either one fails there rather than in someone's server render. + Same idea as `@mattermix/shaders/color`, and this package already shipped `./poster` on the same reasoning. Both subpaths now have a test that imports them under a bare Node environment, so three creeping back into either one fails there rather than in someone's server render. ## 3.1.0 @@ -54,7 +54,7 @@ ### Major Changes -- 1b0bbcb: Remove `ShaderScene`'s `fallback` prop (breaking). Use the new `ShaderPoster` component from `@lovo/matter-react/poster` instead — it renders in the initial HTML (SSR-safe, no three import) and dismisses when the wrapped `ShaderScene` paints its first frame. +- 1b0bbcb: Remove `ShaderScene`'s `fallback` prop (breaking). Use the new `ShaderPoster` component from `@mattermix/shaders-react/poster` instead — it renders in the initial HTML (SSR-safe, no three import) and dismisses when the wrapped `ShaderScene` paints its first frame. ## 2.0.0 @@ -68,7 +68,7 @@ ### Minor Changes -- 35274c3: Rename ambiguous `@lovo/matter-react` public exports to clearer names (BREAKING, pre-1.0): +- 35274c3: Rename ambiguous `@mattermix/shaders-react` public exports to clearer names (BREAKING, pre-1.0): - `useOverlayPass` → `usePostProcessPass` (and the paired type `OverlayTransform` → `PostProcessTransform`) - `useStaticHint` → `useStaticSceneHint` @@ -84,7 +84,7 @@ - 1c69220: Rename public API symbols to domain-accurate names. - New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@lovo/matter`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@lovo/matter-react`). + New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@mattermix/shaders`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@mattermix/shaders-react`). Old names (`MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, `MatterSignal`, `MatterBackend`) are deprecated with `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. @@ -99,7 +99,7 @@ **New: `useOverlayPass(transform, deps)` hook** ```ts - import { useAnimatableUniform, useOverlayPass } from '@lovo/matter-react'; + import { useAnimatableUniform, useOverlayPass } from '@mattermix/shaders-react'; export function MyOverlay({ intensity }) { const intensityU = useAnimatableUniform(intensity); @@ -113,7 +113,7 @@ Mount the component inside any `` and it composes onto the pipeline; multiple overlays chain in mount order. Uniforms captured inside `transform` update in place and don't need to be in `deps` — only put structural changes (mode toggles, etc.) in `deps` so the transform gets re-registered. - **Registry-side ships (delivered via `@lovo/matter-cli` copy-paste):** + **Registry-side ships (delivered via `@mattermix/shaders-cli` copy-paste):** - `` — additive or subtractive grain overlay. - `` — radial edge darkening, aspect-corrected so the mask is a circle on widescreen. @@ -122,13 +122,13 @@ ### Patch Changes - Updated dependencies [3856367] - - @lovo/matter@0.3.0 + - @mattermix/shaders@0.3.0 ## 0.2.0 ### Minor Changes -- No API changes. Bumped alongside `@lovo/matter` 0.2.0 because the three packages ship as a fixed version group. See [`@lovo/matter`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. +- No API changes. Bumped alongside `@mattermix/shaders` 0.2.0 because the three packages ship as a fixed version group. See [`@mattermix/shaders`'s 0.2.0 changelog](../matter/CHANGELOG.md#020) for the engine-level breaking change. ## 0.1.0 @@ -136,11 +136,11 @@ - Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - **`@lovo/matter`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. + **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - **`@lovo/matter-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). + **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). - **`@lovo/matter-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. diff --git a/packages/matter-react/README.md b/packages/matter-react/README.md index 333a88f3..99f4af16 100644 --- a/packages/matter-react/README.md +++ b/packages/matter-react/README.md @@ -1,16 +1,16 @@ -# @lovo/matter-react +# @mattermix/shaders-react React binding for **Matter** — shader components on WebGPU + Three.js TSL. -This package wraps the engine ([`@lovo/matter`](https://www.npmjs.com/package/@lovo/matter)) with React-friendly primitives: a shared `` canvas, a `useShaderMaterial` hook for `@react-three/fiber` integration, and input hooks (`useCursor`, `useScroll`). +This package wraps the engine ([`@mattermix/shaders`](https://www.npmjs.com/package/@mattermix/shaders)) with React-friendly primitives: a shared `` canvas, a `useShaderMaterial` hook for `@react-three/fiber` integration, and input hooks (`useCursor`, `useScroll`). ## Install ```bash -npm install @lovo/matter @lovo/matter-react react three +npm install @mattermix/shaders @mattermix/shaders-react react three ``` -`react` (^19), `@lovo/matter`, and `three` (^0.170) are peer dependencies. +`react` (^19), `@mattermix/shaders`, and `three` (^0.170) are peer dependencies. ## Three rendering modes @@ -23,8 +23,8 @@ Matter components work in three configurations: ## Minimal usage (Mode 2: shared scene) ```tsx -import { ShaderScene } from '@lovo/matter-react' -// LinearGradient is copy-pasted into your project via @lovo/matter-cli +import { ShaderScene } from '@mattermix/shaders-react' +// LinearGradient is copy-pasted into your project via @mattermix/shaders-cli import { LinearGradient } from '@/components/matter/linear-gradient' export default function Hero() { @@ -41,7 +41,7 @@ export default function Hero() { Polished drop-in components (``, ``, ``, ``, ``, ``) ship via the shadcn-style copy-paste CLI. Install it once: ```bash -npm install -D @lovo/matter-cli +npm install -D @mattermix/shaders-cli npx matter-cli init npx matter-cli add linear-gradient ``` @@ -50,7 +50,7 @@ The component lands in `src/components/matter/linear-gradient.tsx` and is yours ## Docs - + ## Migration from 0.3.x diff --git a/packages/matter-react/package.json b/packages/matter-react/package.json index 22aef5c9..dd239ca4 100644 --- a/packages/matter-react/package.json +++ b/packages/matter-react/package.json @@ -1,5 +1,5 @@ { - "name": "@lovo/matter-react", + "name": "@mattermix/shaders-react", "version": "3.9.0", "description": "React binding for Matter — MatterScene, useShaderMaterial, input hooks.", "keywords": [ @@ -13,15 +13,15 @@ "tsl", "webgpu" ], - "homepage": "https://github.com/lovo-hq/matter#readme", + "homepage": "https://github.com/mattermix/shaders#readme", "bugs": { - "url": "https://github.com/lovo-hq/matter/issues" + "url": "https://github.com/mattermix/shaders/issues" }, "license": "MIT", - "author": "lovo-hq", + "author": "mattermix", "repository": { "type": "git", - "url": "git+https://github.com/lovo-hq/matter.git", + "url": "git+https://github.com/mattermix/shaders.git", "directory": "packages/matter-react" }, "files": [ @@ -63,8 +63,8 @@ "clean": "rm -rf dist .turbo *.tsbuildinfo" }, "devDependencies": { - "@lovo/matter": "workspace:*", - "@matter/tsconfig": "workspace:*", + "@mattermix/shaders": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.2", @@ -80,7 +80,7 @@ "vitest": "catalog:" }, "peerDependencies": { - "@lovo/matter": "workspace:>=0.2.0", + "@mattermix/shaders": "workspace:>=0.2.0", "react": "^19.0.0", "three": "^0.170.0" } diff --git a/packages/matter-react/src/components/shader-monitor/shader-monitor.test.tsx b/packages/matter-react/src/components/shader-monitor/shader-monitor.test.tsx index d13f734a..5b3c904a 100644 --- a/packages/matter-react/src/components/shader-monitor/shader-monitor.test.tsx +++ b/packages/matter-react/src/components/shader-monitor/shader-monitor.test.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; -import { FrameScheduler } from '@lovo/matter'; +import { FrameScheduler } from '@mattermix/shaders'; import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; diff --git a/packages/matter-react/src/components/shader-poster/poster-context.ts b/packages/matter-react/src/components/shader-poster/poster-context.ts index 042281aa..772c3f7d 100644 --- a/packages/matter-react/src/components/shader-poster/poster-context.ts +++ b/packages/matter-react/src/components/shader-poster/poster-context.ts @@ -21,9 +21,9 @@ export interface PosterContextValue { // package, `PosterContextValue`'s shape is a forever-contract for the // lifetime of this key: any future change to it must stay backward-compatible // with older copies reading/writing the same global slot, or the key itself -// must be bumped (e.g. to `@lovo/matter-react:poster-context/v2`) so +// must be bumped (e.g. to `@mattermix/shaders-react:poster-context/v2`) so // incompatible shapes don't collide. -const POSTER_CONTEXT_KEY = Symbol.for('@lovo/matter-react:poster-context'); +const POSTER_CONTEXT_KEY = Symbol.for('@mattermix/shaders-react:poster-context'); const globalRegistry = globalThis as Record; diff --git a/packages/matter-react/src/components/shader-scene/shader-scene.test.tsx b/packages/matter-react/src/components/shader-scene/shader-scene.test.tsx index f955e641..2c7f3f2f 100644 --- a/packages/matter-react/src/components/shader-scene/shader-scene.test.tsx +++ b/packages/matter-react/src/components/shader-scene/shader-scene.test.tsx @@ -1,5 +1,5 @@ -import type * as MatterModule from '@lovo/matter'; -import { createRenderer } from '@lovo/matter'; +import type * as MatterModule from '@mattermix/shaders'; +import { createRenderer } from '@mattermix/shaders'; import { render, waitFor } from '@testing-library/react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; @@ -7,7 +7,7 @@ import { MatterError } from '../../errors/matter-error.js'; import { PosterContext } from '../shader-poster/poster-context.js'; import { ShaderScene } from './shader-scene.js'; -vi.mock('@lovo/matter', async (importOriginal) => { +vi.mock('@mattermix/shaders', async (importOriginal) => { const actual = await importOriginal(); return { diff --git a/packages/matter-react/src/components/shader-scene/shader-scene.tsx b/packages/matter-react/src/components/shader-scene/shader-scene.tsx index d61d11e0..cb38861b 100644 --- a/packages/matter-react/src/components/shader-scene/shader-scene.tsx +++ b/packages/matter-react/src/components/shader-scene/shader-scene.tsx @@ -16,7 +16,7 @@ import { dither, FrameScheduler, resetRendererClock, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import { OrthographicCamera, Scene } from 'three'; import type { ShaderNodeObject } from 'three/tsl'; import { pass, passTexture, renderOutput, uv, vec4 } from 'three/tsl'; diff --git a/packages/matter-react/src/context/shader-context.ts b/packages/matter-react/src/context/shader-context.ts index e9d5be78..405e6569 100644 --- a/packages/matter-react/src/context/shader-context.ts +++ b/packages/matter-react/src/context/shader-context.ts @@ -1,6 +1,6 @@ import { createContext } from 'react'; -import type { FrameScheduler, GpuRenderer } from '@lovo/matter'; +import type { FrameScheduler, GpuRenderer } from '@mattermix/shaders'; import type { Camera, Scene } from 'three'; import type { ShaderNodeObject } from 'three/tsl'; import type { Node } from 'three/webgpu'; diff --git a/packages/matter-react/src/errors/matter-error.ts b/packages/matter-react/src/errors/matter-error.ts index 316af3b3..99768ddb 100644 --- a/packages/matter-react/src/errors/matter-error.ts +++ b/packages/matter-react/src/errors/matter-error.ts @@ -5,7 +5,7 @@ export type MatterErrorCode = 'renderer-init'; /** - * A typed error surfaced by @lovo/matter-react. The original thrown value is + * A typed error surfaced by @mattermix/shaders-react. The original thrown value is * always available on `cause`. */ export class MatterError extends Error { diff --git a/packages/matter-react/src/gamut.test.ts b/packages/matter-react/src/gamut.test.ts index 3df1ed8f..a85bf6dc 100644 --- a/packages/matter-react/src/gamut.test.ts +++ b/packages/matter-react/src/gamut.test.ts @@ -10,7 +10,7 @@ import { describe, expect, it } from 'vitest'; import { useDisplayGamut } from './gamut.js'; -describe('@lovo/matter-react/gamut', () => { +describe('@mattermix/shaders-react/gamut', () => { it('imports with no DOM globals present', () => { // Guards the guard. If the environment docblock above is ever removed, the // package's happy-dom default would supply `self` and this file would go on diff --git a/packages/matter-react/src/gamut.ts b/packages/matter-react/src/gamut.ts index 84767556..bed35895 100644 --- a/packages/matter-react/src/gamut.ts +++ b/packages/matter-react/src/gamut.ts @@ -1,4 +1,4 @@ -// @lovo/matter-react/gamut — display-gamut detection, SSR-safe. +// @mattermix/shaders-react/gamut — display-gamut detection, SSR-safe. // // Deliberately shipped as its own entry point, for the same reason as // ./poster: the main barrel re-exports ShaderScene, which imports diff --git a/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx b/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx index 07c06cf0..ea829b35 100644 --- a/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx +++ b/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; -import { FrameScheduler } from '@lovo/matter'; +import { FrameScheduler } from '@mattermix/shaders'; import { renderHook } from '@testing-library/react'; import type { Vector2 } from 'three/webgpu'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; diff --git a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx b/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx index 7b0eb6ab..78d64b4d 100644 --- a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx +++ b/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx @@ -1,7 +1,7 @@ import { type ReactNode, StrictMode } from 'react'; -import { getReducedMotionTimeScale } from '@lovo/matter'; -import type { SchedulerClient, SchedulerTick } from '@lovo/matter'; +import { getReducedMotionTimeScale } from '@mattermix/shaders'; +import type { SchedulerClient, SchedulerTick } from '@mattermix/shaders'; import { renderHook } from '@testing-library/react'; import { beforeEach, describe, expect, it, vi } from 'vitest'; diff --git a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts b/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts index 2263e8c1..606f6469 100644 --- a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts +++ b/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts @@ -9,8 +9,8 @@ // smoothly from wherever it is (MAT-66). import { useEffect, useMemo, useRef } from 'react'; -import { getReducedMotionTimeScale } from '@lovo/matter'; -import type { SchedulerTick } from '@lovo/matter'; +import { getReducedMotionTimeScale } from '@mattermix/shaders'; +import type { SchedulerTick } from '@mattermix/shaders'; import { uniform } from 'three/tsl'; import { type AnimatableProp, isSignal } from '../animatable-signal/animatable-signal.js'; diff --git a/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx b/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx index 22151d44..47f8d76b 100644 --- a/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx +++ b/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; -import { FrameScheduler } from '@lovo/matter'; +import { FrameScheduler } from '@mattermix/shaders'; import { renderHook } from '@testing-library/react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; diff --git a/packages/matter-react/src/hooks/use-cursor/use-cursor.ts b/packages/matter-react/src/hooks/use-cursor/use-cursor.ts index 947a9182..4b159b99 100644 --- a/packages/matter-react/src/hooks/use-cursor/use-cursor.ts +++ b/packages/matter-react/src/hooks/use-cursor/use-cursor.ts @@ -10,7 +10,7 @@ // instance — collapsed into one effect, each cycle cleans up after itself. import { useEffect, useState } from 'react'; -import { CursorInput, type CursorInputOptions, type Vector2 } from '@lovo/matter'; +import { CursorInput, type CursorInputOptions, type Vector2 } from '@mattermix/shaders'; import { useShaderContext } from '../use-shader-context/use-shader-context.js'; diff --git a/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts b/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts index 1aaa1829..1adc6d24 100644 --- a/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts +++ b/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import type { OutputGamut } from '@lovo/matter'; +import type { OutputGamut } from '@mattermix/shaders'; /** What the consumer asks for: a fixed gamut, or 'auto' to detect the display. */ export type GamutPreference = 'auto' | OutputGamut; diff --git a/packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx b/packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx index 4417fd9c..0aca7074 100644 --- a/packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx +++ b/packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; -import { FrameScheduler } from '@lovo/matter'; +import { FrameScheduler } from '@mattermix/shaders'; import { renderHook } from '@testing-library/react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; diff --git a/packages/matter-react/src/index.ts b/packages/matter-react/src/index.ts index 2720e39c..2ff1c9f7 100644 --- a/packages/matter-react/src/index.ts +++ b/packages/matter-react/src/index.ts @@ -1,4 +1,4 @@ -// @lovo/matter-react — React binding for Matter. +// @mattermix/shaders-react — React binding for Matter. export * from './components/index.js'; export * from './hooks/index.js'; diff --git a/packages/matter-react/src/poster.test.ts b/packages/matter-react/src/poster.test.ts index 9b1c0866..6678e8d8 100644 --- a/packages/matter-react/src/poster.test.ts +++ b/packages/matter-react/src/poster.test.ts @@ -9,7 +9,7 @@ import { describe, expect, it } from 'vitest'; import { ShaderPoster } from './poster.js'; -describe('@lovo/matter-react/poster', () => { +describe('@mattermix/shaders-react/poster', () => { it('imports with no DOM globals present', () => { expect(typeof self).toBe('undefined'); }); diff --git a/packages/matter-react/src/poster.ts b/packages/matter-react/src/poster.ts index 9b93e340..72dd14fb 100644 --- a/packages/matter-react/src/poster.ts +++ b/packages/matter-react/src/poster.ts @@ -1,4 +1,4 @@ -// @lovo/matter-react/poster — SSR-safe poster boundary. +// @mattermix/shaders-react/poster — SSR-safe poster boundary. // // Deliberately shipped as its own entry point: the main barrel imports // three/webgpu, which references `self` at module load and crashes SSR. This diff --git a/packages/matter-react/tsconfig.json b/packages/matter-react/tsconfig.json index cedfae42..de9e2aca 100644 --- a/packages/matter-react/tsconfig.json +++ b/packages/matter-react/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/react-library.json", + "extends": "@shaders/tsconfig/react-library.json", "compilerOptions": { "rootDir": "./src", "outDir": "dist" diff --git a/packages/matter-react/tsup.config.ts b/packages/matter-react/tsup.config.ts index 75b1d7a2..f084b401 100644 --- a/packages/matter-react/tsup.config.ts +++ b/packages/matter-react/tsup.config.ts @@ -6,6 +6,6 @@ export default defineConfig({ dts: true, sourcemap: true, clean: true, - external: ['react', 'three', '@lovo/matter'], + external: ['react', 'three', '@mattermix/shaders'], banner: { js: "'use client';" }, }); diff --git a/packages/matter-react/vitest.config.ts b/packages/matter-react/vitest.config.ts index 9c353585..069d85b6 100644 --- a/packages/matter-react/vitest.config.ts +++ b/packages/matter-react/vitest.config.ts @@ -6,7 +6,7 @@ export default defineConfig({ // @ts-expect-error -- oxc is not in UserConfig types yet; this is the documented workaround oxc: { tsconfig: { compilerOptions: { verbatimModuleSyntax: true } } }, test: { - name: '@lovo/matter-react', + name: '@mattermix/shaders-react', environment: 'happy-dom', globals: false, include: ['src/**/*.test.ts', 'src/**/*.test.tsx'], diff --git a/packages/matter/CHANGELOG.md b/packages/matter/CHANGELOG.md index 40b8d864..22fffb71 100644 --- a/packages/matter/CHANGELOG.md +++ b/packages/matter/CHANGELOG.md @@ -1,4 +1,4 @@ -# @lovo/matter +# @mattermix/shaders ## 3.9.0 @@ -44,7 +44,7 @@ ### Minor Changes -- dd8f99b: Adds `@lovo/matter/color`, a second entry point for the CPU-side color math: `parseColorString`, the OKLab and OKLCH conversions, the gamut helpers, and the sRGB transfer functions. The root entry still exports all of them, so nothing has to move. The difference is that the subpath has no path to three, so it can be imported during a server render. The root entry cannot, because it reaches the renderer and `three/webgpu` reads `self` at module load. +- dd8f99b: Adds `@mattermix/shaders/color`, a second entry point for the CPU-side color math: `parseColorString`, the OKLab and OKLCH conversions, the gamut helpers, and the sRGB transfer functions. The root entry still exports all of them, so nothing has to move. The difference is that the subpath has no path to three, so it can be imported during a server render. The root entry cannot, because it reaches the renderer and `three/webgpu` reads `self` at module load. `parseColorString` now throws on input it used to mangle. Components that aren't numbers ran through `parseFloat` to NaN and came back as `[NaN, NaN, NaN]`, which reached the GPU as a blank shader with a clean console. Hex is checked for format now too: it takes `#rrggbb` and `#rrggbbaa` (alpha parsed and dropped, the same way `oklch()` and `oklab()` already handle it) and throws on anything else. `#abcdefgh` used to slice its first six digits and return a confidently wrong color. @@ -75,11 +75,11 @@ ```ts // Before - import { filmGrain } from '@lovo/matter'; + import { filmGrain } from '@mattermix/shaders'; const g = filmGrain(0.08); // After - import { grain } from '@lovo/matter'; + import { grain } from '@mattermix/shaders'; const g = grain(0.08); ``` @@ -123,7 +123,7 @@ - 1c69220: Rename public API symbols to domain-accurate names. - New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@lovo/matter`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@lovo/matter-react`). + New primary names: `FrameScheduler`, `GpuRenderer`, `GpuBackend` (`@mattermix/shaders`); `ShaderScene`, `ShaderSceneProps`, `ShaderContext`, `ShaderContextValue`, `useShaderContext`, `ShaderMonitor`, `ShaderMonitorProps`, `AnimatableSignal` (`@mattermix/shaders-react`). Old names (`MatterScheduler`, `MatterRenderer`, `MatterBackend`, `MatterScene`, `MatterSceneProps`, `MatterContext`, `MatterContextValue`, `useMatterContext`, `MatterMonitor`, `MatterMonitorProps`, `MatterSignal`, `MatterBackend`) are deprecated with `@deprecated` JSDoc and continue to work. They will be removed no earlier than 0.5.0. @@ -136,7 +136,7 @@ - 3856367: Add `grain` primitive — hash-based, centered film grain for shader compositions. ```ts - import { grain, time } from "@lovo/matter"; + import { grain, time } from "@mattermix/shaders"; import { uv } from "three/tsl"; // Static grain: @@ -159,24 +159,24 @@ ### Minor Changes -- Drop pure TSL re-exports from `@lovo/matter` public API. +- Drop pure TSL re-exports from `@mattermix/shaders` public API. - The following 15 nodes are no longer exported by `@lovo/matter`. Import them directly from `three/tsl`: + The following 15 nodes are no longer exported by `@mattermix/shaders`. Import them directly from `three/tsl`: `uv`, `vec2`, `vec3`, `vec4`, `uniform`, `mix`, `smoothstep`, `mod`, `sin`, `cos`, `length`, `dot`, `normalize`, `max`, `min` ```ts // Before (0.1.x) - import { vec3, uv, time } from "@lovo/matter"; + import { vec3, uv, time } from "@mattermix/shaders"; // After (0.2.0) import { vec3, uv } from "three/tsl"; - import { time } from "@lovo/matter"; // still here — reduced-motion-gated + import { time } from "@mattermix/shaders"; // still here — reduced-motion-gated ``` - The Matter-owned `time` (reduced-motion gated) continues to be exported from `@lovo/matter` unchanged. For raw uncapped time, import from `three/tsl` directly. + The Matter-owned `time` (reduced-motion gated) continues to be exported from `@mattermix/shaders` unchanged. For raw uncapped time, import from `three/tsl` directly. - All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@lovo/matter` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@lovo/matter` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). + All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). **Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths. Dropping them clarifies the layer boundary — Matter ships value-add primitives; TSL provides the math. @@ -186,11 +186,11 @@ - Initial public release of Matter — React shader components on WebGPU + Three.js TSL. - **`@lovo/matter`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. + **`@mattermix/shaders`** — Framework-agnostic engine: TSL primitives (`fbm`, `voronoi`, `colorRamp`, `quantize`, …), WebGPU renderer wrapper, visibility/intersection-aware scheduler. - **`@lovo/matter-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). + **`@mattermix/shaders-react`** — React binding: `` (shared canvas), `useShaderMaterial` (r3f-compatible), input hooks (`useCursor`, `useScroll`). - **`@lovo/matter-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. + **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. diff --git a/packages/matter/README.md b/packages/matter/README.md index f65c9179..6e622431 100644 --- a/packages/matter/README.md +++ b/packages/matter/README.md @@ -1,14 +1,14 @@ -# @lovo/matter +# @mattermix/shaders Framework-agnostic engine for **Matter** — React shader components on WebGPU + Three.js TSL. -This package contains the TSL primitives, the renderer, and the scheduler. It has no React dependency. If you're using React, install [`@lovo/matter-react`](https://www.npmjs.com/package/@lovo/matter-react) alongside this package — it adds React-friendly wrappers (a shared ``, input hooks, and `@react-three/fiber` integration) on top of this engine. +This package contains the TSL primitives, the renderer, and the scheduler. It has no React dependency. If you're using React, install [`@mattermix/shaders-react`](https://www.npmjs.com/package/@mattermix/shaders-react) alongside this package — it adds React-friendly wrappers (a shared ``, input hooks, and `@react-three/fiber` integration) on top of this engine. ## Install ```bash -npm install @lovo/matter three -# or: pnpm add @lovo/matter three +npm install @mattermix/shaders three +# or: pnpm add @mattermix/shaders three ``` `three` is a peer dependency. Matter targets `three@^0.170.0` and uses the WebGPU TSL API exclusively. @@ -22,7 +22,7 @@ npm install @lovo/matter three ## Minimal usage ```typescript -import { fractalNoise, colorRamp } from '@lovo/matter' +import { fractalNoise, colorRamp } from '@mattermix/shaders' import { uv, vec3, time } from 'three/tsl' // Inside your TSL fragment graph: @@ -33,11 +33,11 @@ const color = colorRamp(noise, [ ]) ``` -For polished drop-in components like `` and ``, install [`@lovo/matter-cli`](https://www.npmjs.com/package/@lovo/matter-cli) and copy them into your project. +For polished drop-in components like `` and ``, install [`@mattermix/shaders-cli`](https://www.npmjs.com/package/@mattermix/shaders-cli) and copy them into your project. ## Docs -Full docs and live demos: +Full docs and live demos: ## Migration from 0.3.x diff --git a/packages/matter/package.json b/packages/matter/package.json index c99df059..e681909f 100644 --- a/packages/matter/package.json +++ b/packages/matter/package.json @@ -1,5 +1,5 @@ { - "name": "@lovo/matter", + "name": "@mattermix/shaders", "version": "3.9.0", "description": "Engine for Matter — TSL primitives, renderer, scheduler. Framework-agnostic.", "keywords": [ @@ -13,15 +13,15 @@ "tsl", "webgpu" ], - "homepage": "https://github.com/lovo-hq/matter#readme", + "homepage": "https://github.com/mattermix/shaders#readme", "bugs": { - "url": "https://github.com/lovo-hq/matter/issues" + "url": "https://github.com/mattermix/shaders/issues" }, "license": "MIT", - "author": "lovo-hq", + "author": "mattermix", "repository": { "type": "git", - "url": "git+https://github.com/lovo-hq/matter.git", + "url": "git+https://github.com/mattermix/shaders.git", "directory": "packages/matter" }, "files": [ @@ -58,7 +58,7 @@ "clean": "rm -rf dist .turbo *.tsbuildinfo" }, "devDependencies": { - "@matter/tsconfig": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@types/three": "^0.170.0", "happy-dom": "^15.0.0", "three": "^0.170.0", diff --git a/packages/matter/src/color.test.ts b/packages/matter/src/color.test.ts index 5aa6c914..d2441d88 100644 --- a/packages/matter/src/color.test.ts +++ b/packages/matter/src/color.test.ts @@ -10,7 +10,7 @@ import { describe, expect, it } from 'vitest'; import { linearSrgbToOklch, parseColorString, srgbChannelToLinear } from './color.js'; -describe('@lovo/matter/color', () => { +describe('@mattermix/shaders/color', () => { it('runs with no DOM globals present', () => { // Guards the guard. If the environment docblock above is ever removed or // changed, this fails loudly rather than the file quietly becoming diff --git a/packages/matter/src/color.ts b/packages/matter/src/color.ts index f9cfcda8..2ce408d6 100644 --- a/packages/matter/src/color.ts +++ b/packages/matter/src/color.ts @@ -1,4 +1,4 @@ -// @lovo/matter/color — the CPU-only half of the color system, published as its +// @mattermix/shaders/color — the CPU-only half of the color system, published as its // own entry point. Everything here is plain scalar arithmetic with no path to // three, which makes this module safe to import during a server render; the // root entry is not, because its barrel reaches the renderer and three/webgpu diff --git a/packages/matter/src/index.ts b/packages/matter/src/index.ts index 05c1f4dd..3dad58d8 100644 --- a/packages/matter/src/index.ts +++ b/packages/matter/src/index.ts @@ -1,4 +1,4 @@ -// @lovo/matter — engine package public API. +// @mattermix/shaders — engine package public API. export { createRenderer } from './runtime/create-renderer/create-renderer.js'; export type { diff --git a/packages/matter/src/primitives/color-ramp/color-ramp.ts b/packages/matter/src/primitives/color-ramp/color-ramp.ts index 96e50a2b..6613f055 100644 --- a/packages/matter/src/primitives/color-ramp/color-ramp.ts +++ b/packages/matter/src/primitives/color-ramp/color-ramp.ts @@ -7,7 +7,7 @@ import { colorSpaces } from '../color-space/registry.js'; import type { ColorSpace, HueInterpolation } from '../color-space/types.js'; /** - * Canonical TSL-node *input* shape used throughout `@lovo/matter`. + * Canonical TSL-node *input* shape used throughout `@mattermix/shaders`. * * Stays as the broad `Node | ShaderNodeObject` union so callers can * pass uniform-typed nodes (e.g. `ShaderNodeObject>`) diff --git a/packages/matter/src/primitives/color-space/cpu-transfer.ts b/packages/matter/src/primitives/color-space/cpu-transfer.ts index fd3d4e4e..374a0d90 100644 --- a/packages/matter/src/primitives/color-space/cpu-transfer.ts +++ b/packages/matter/src/primitives/color-space/cpu-transfer.ts @@ -2,7 +2,7 @@ // linearly: sRGB channels are gamma-encoded so more precision goes to dark // tones, where eyes are most sensitive. Color MATH only works right on linear // values (where 0.5 really is half the light of 1.0), so these convert each way. -// This file imports nothing on purpose — it is the reason `@lovo/matter/color` +// This file imports nothing on purpose — it is the reason `@mattermix/shaders/color` // can be imported during a server render. The TSL node versions of the same two // curves live next door in transfer.ts, behind a three import. diff --git a/packages/matter/src/primitives/noise/noise.ts b/packages/matter/src/primitives/noise/noise.ts index c133054e..8f27b822 100644 --- a/packages/matter/src/primitives/noise/noise.ts +++ b/packages/matter/src/primitives/noise/noise.ts @@ -14,7 +14,7 @@ import type { TSLNode } from '../color-ramp/color-ramp.js'; * place — see the simplex-noise registry component). * * Built on top of three's `mx_noise_float`; we wrap it so consumers have a - * stable import path through `@lovo/matter` and we can swap the + * stable import path through `@mattermix/shaders` and we can swap the * implementation if a different noise primitive proves better in practice. * * Returns `ShaderNodeObject` (chainable) rather than the broader diff --git a/packages/matter/src/primitives/time/time.ts b/packages/matter/src/primitives/time/time.ts index 3c60fe00..27879b8f 100644 --- a/packages/matter/src/primitives/time/time.ts +++ b/packages/matter/src/primitives/time/time.ts @@ -1,5 +1,5 @@ // Engine-gated `time` — equals the TSL built-in `time` multiplied by the -// reduced-motion scale uniform. Components consuming `time` from `@lovo/matter` +// reduced-motion scale uniform. Components consuming `time` from `@mattermix/shaders` // automatically respect `prefers-reduced-motion` and the policy override set // via `setReducedMotionPolicy`. // diff --git a/packages/matter/tsconfig.json b/packages/matter/tsconfig.json index 945f1882..07fcda71 100644 --- a/packages/matter/tsconfig.json +++ b/packages/matter/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/library.json", + "extends": "@shaders/tsconfig/library.json", "compilerOptions": { "rootDir": "./src", "outDir": "dist" diff --git a/packages/matter/vitest.config.ts b/packages/matter/vitest.config.ts index cd4ca7ed..900677f3 100644 --- a/packages/matter/vitest.config.ts +++ b/packages/matter/vitest.config.ts @@ -6,7 +6,7 @@ export default defineConfig({ // @ts-expect-error -- oxc is not in UserConfig types yet; this is the documented workaround oxc: { tsconfig: { compilerOptions: { verbatimModuleSyntax: true } } }, test: { - name: '@lovo/matter', + name: '@mattermix/shaders', environment: 'happy-dom', include: ['src/**/*.test.ts'], passWithNoTests: true, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c75ac18a..dd271160 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,13 +101,13 @@ importers: '@base-ui/react': specifier: ^1.6.0 version: 1.6.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) - '@lovo/matter': + '@mattermix/shaders': specifier: workspace:* version: link:../../packages/matter - '@lovo/matter-react': + '@mattermix/shaders-react': specifier: workspace:* version: link:../../packages/matter-react - '@matter/registry': + '@shaders/registry': specifier: workspace:* version: link:../../registry '@xyflow/react': @@ -168,7 +168,7 @@ importers: specifier: ^4.4.3 version: 4.4.3 devDependencies: - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig '@tweakpane/core': @@ -207,12 +207,12 @@ importers: '@axe-core/playwright': specifier: ^4.10.0 version: 4.11.3(playwright-core@1.59.1) - '@matter/tsconfig': - specifier: workspace:* - version: link:../../tooling/tsconfig '@playwright/test': specifier: ^1.48.0 version: 1.59.1 + '@shaders/tsconfig': + specifier: workspace:* + version: link:../../tooling/tsconfig '@types/node': specifier: ^22 version: 22.19.17 @@ -225,10 +225,10 @@ importers: '@base-ui/react': specifier: ^1.6.0 version: 1.6.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) - '@lovo/matter': + '@mattermix/shaders': specifier: workspace:* version: link:../../packages/matter - '@lovo/matter-react': + '@mattermix/shaders-react': specifier: workspace:* version: link:../../packages/matter-react '@xyflow/react': @@ -247,7 +247,7 @@ importers: specifier: ^0.170.0 version: 0.170.0 devDependencies: - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig '@types/node': @@ -274,7 +274,7 @@ importers: packages/matter: devDependencies: - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig '@types/three': @@ -308,16 +308,16 @@ importers: specifier: ^0.27.0 version: 0.27.7 devDependencies: - '@lovo/matter': + '@mattermix/shaders': specifier: workspace:* version: link:../matter - '@lovo/matter-react': + '@mattermix/shaders-react': specifier: workspace:* version: link:../matter-react - '@matter/registry': + '@shaders/registry': specifier: workspace:* version: link:../../registry - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig '@types/node': @@ -353,10 +353,10 @@ importers: packages/matter-react: devDependencies: - '@lovo/matter': + '@mattermix/shaders': specifier: workspace:* version: link:../matter - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig '@testing-library/dom': @@ -401,10 +401,10 @@ importers: registry: dependencies: - '@lovo/matter': + '@mattermix/shaders': specifier: workspace:* version: link:../packages/matter - '@lovo/matter-react': + '@mattermix/shaders-react': specifier: workspace:* version: link:../packages/matter-react react: @@ -414,7 +414,7 @@ importers: specifier: ^0.170.0 version: 0.170.0 devDependencies: - '@matter/tsconfig': + '@shaders/tsconfig': specifier: workspace:* version: link:../tooling/tsconfig '@types/react': diff --git a/registry/aurora/aurora.tsx b/registry/aurora/aurora.tsx index 65e4f394..78640e29 100644 --- a/registry/aurora/aurora.tsx +++ b/registry/aurora/aurora.tsx @@ -5,8 +5,8 @@ // glowing curtain ribbons by marching a virtual view ray through a noise // field. The aurora emits light over a transparent background — stack it // above a dark layer inside a . -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { AuroraShader } from './shader'; diff --git a/registry/aurora/shader.tsx b/registry/aurora/shader.tsx index 6ce4854c..4bfaaf46 100644 --- a/registry/aurora/shader.tsx +++ b/registry/aurora/shader.tsx @@ -2,14 +2,19 @@ import { useEffect, useMemo } from 'react'; -import { colorRamp, type ColorSpace, type HueInterpolation, type TSLNode } from '@lovo/matter'; +import { + colorRamp, + type ColorSpace, + type HueInterpolation, + type TSLNode, +} from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, useResize, useShaderContext, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { cos, dot, diff --git a/registry/blobs/blobs.tsx b/registry/blobs/blobs.tsx index dc1d6b50..cd7ff51d 100644 --- a/registry/blobs/blobs.tsx +++ b/registry/blobs/blobs.tsx @@ -5,8 +5,8 @@ // metaball field over roaming blob centers and thresholds it into merging, // splitting shapes. Render it inside a , typically stacked // over a background layer — the space between blobs is transparent. -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { BlobsShader } from './shader'; diff --git a/registry/blobs/shader.tsx b/registry/blobs/shader.tsx index f367ee82..a2aaabe7 100644 --- a/registry/blobs/shader.tsx +++ b/registry/blobs/shader.tsx @@ -8,7 +8,7 @@ // supplies the props. import { useEffect, useMemo } from 'react'; -import { colorRamp, type ColorSpace, type HueInterpolation, metaballs } from '@lovo/matter'; +import { colorRamp, type ColorSpace, type HueInterpolation, metaballs } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, @@ -17,7 +17,7 @@ import { useResize, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { add, clamp, fwidth, smoothstep, sub, uniform, uv, vec2, vec4 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/registry/conic-gradient/conic-gradient.tsx b/registry/conic-gradient/conic-gradient.tsx index 499e7af5..5cd5c7f0 100644 --- a/registry/conic-gradient/conic-gradient.tsx +++ b/registry/conic-gradient/conic-gradient.tsx @@ -4,8 +4,8 @@ // and their default values, then hands everything to ConicGradientShader // (./shader.tsx), which does the actual GPU work. Render it inside a // — the component draws nothing on its own. -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { ConicGradientShader } from './shader'; diff --git a/registry/conic-gradient/shader.tsx b/registry/conic-gradient/shader.tsx index 7d911a75..f15934b7 100644 --- a/registry/conic-gradient/shader.tsx +++ b/registry/conic-gradient/shader.tsx @@ -8,7 +8,7 @@ // fraction of a full turn? That fraction picks a color from the ramp. import { useEffect, useMemo } from 'react'; -import { colorRamp, type ColorSpace, type HueInterpolation } from '@lovo/matter'; +import { colorRamp, type ColorSpace, type HueInterpolation } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, @@ -17,7 +17,7 @@ import { useResize, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { atan2, fract, uniform, uv, vec2 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/registry/dither/dither.tsx b/registry/dither/dither.tsx index eb7f4eb3..f71f7544 100644 --- a/registry/dither/dither.tsx +++ b/registry/dither/dither.tsx @@ -4,7 +4,7 @@ // defaults, then delegates to DitherShader (./shader.tsx). Dither is a // post-process layer — stack it after other components inside a // and it pixelates and posterizes everything beneath it. -import type { AnimatableProp } from '@lovo/matter-react'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { type DitherPattern, DitherShader } from './shader'; diff --git a/registry/dither/shader.tsx b/registry/dither/shader.tsx index a19881ef..9fa39942 100644 --- a/registry/dither/shader.tsx +++ b/registry/dither/shader.tsx @@ -7,7 +7,7 @@ // the level math. import { useEffect, useMemo } from 'react'; -import { type DitherPattern, ditherThreshold, quantize } from '@lovo/matter'; +import { type DitherPattern, ditherThreshold, quantize } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableUniform, @@ -15,10 +15,10 @@ import { usePostProcessPass, useResize, useShaderContext, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { floor, mix, screenCoordinate, screenSize, step, uniform, vec3, vec4 } from 'three/tsl'; -export type { DitherPattern } from '@lovo/matter'; +export type { DitherPattern } from '@mattermix/shaders'; export interface DitherShaderProps { /** diff --git a/registry/dot-field/dot-field.tsx b/registry/dot-field/dot-field.tsx index f6d31792..2aba8c56 100644 --- a/registry/dot-field/dot-field.tsx +++ b/registry/dot-field/dot-field.tsx @@ -5,7 +5,7 @@ // pixel-spaced grid of dots and ripples them outward from a center point. // Render it inside a ; the gaps between dots are transparent, // so it can sit over other layers. -import type { AnimatableProp } from '@lovo/matter-react'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { DotFieldShader } from './shader'; diff --git a/registry/dot-field/shader.tsx b/registry/dot-field/shader.tsx index d115ff59..3874124c 100644 --- a/registry/dot-field/shader.tsx +++ b/registry/dot-field/shader.tsx @@ -8,7 +8,7 @@ // the canvas resolution to convert between pixels and cell units. import { useEffect, useMemo } from 'react'; -import { displace, signedDistanceFieldCircle, type TSLNode } from '@lovo/matter'; +import { displace, signedDistanceFieldCircle, type TSLNode } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, @@ -16,7 +16,7 @@ import { useAnimatableUniform, useResize, useShaderContext, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { exp, length, round, sin, smoothstep, uniform, uv, vec2, vec3, vec4 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry, Vector2 } from 'three/webgpu'; diff --git a/registry/fractal-noise/fractal-noise.tsx b/registry/fractal-noise/fractal-noise.tsx index 3432077c..91869ee2 100644 --- a/registry/fractal-noise/fractal-noise.tsx +++ b/registry/fractal-noise/fractal-noise.tsx @@ -4,8 +4,8 @@ // their defaults, then delegates to FractalNoiseShader (./shader.tsx), which // sums several octaves of noise per pixel and maps the result onto a color // ramp. Render it inside a . -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { FractalNoiseShader, type FractalNoiseStyle } from './shader'; diff --git a/registry/fractal-noise/shader.tsx b/registry/fractal-noise/shader.tsx index 4c73961a..d745dc26 100644 --- a/registry/fractal-noise/shader.tsx +++ b/registry/fractal-noise/shader.tsx @@ -16,14 +16,14 @@ import { fractalNoise, type HueInterpolation, quantize, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { clamp, float, mix, uniform, uv, vec3 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry, Vector2 } from 'three/webgpu'; diff --git a/registry/god-rays/god-rays.tsx b/registry/god-rays/god-rays.tsx index e4840aef..640c23a7 100644 --- a/registry/god-rays/god-rays.tsx +++ b/registry/god-rays/god-rays.tsx @@ -6,7 +6,7 @@ // noise fields — one decorrelated layer of rays per entry in `colors`. The // rays emit light over a transparent background — stack them above a dark // layer inside a . -import type { AnimatableProp } from '@lovo/matter-react'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { GodRaysShader } from './shader'; diff --git a/registry/god-rays/shader.tsx b/registry/god-rays/shader.tsx index e007fa02..459f74b2 100644 --- a/registry/god-rays/shader.tsx +++ b/registry/god-rays/shader.tsx @@ -21,7 +21,7 @@ import { useResize, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { abs, atan2, diff --git a/registry/grain/grain.tsx b/registry/grain/grain.tsx index 200b5f40..58534231 100644 --- a/registry/grain/grain.tsx +++ b/registry/grain/grain.tsx @@ -4,7 +4,7 @@ // defaults, then delegates to GrainShader (./shader.tsx). Grain is a // post-process layer — stack it after other components inside a // and it textures whatever rendered beneath it. -import type { AnimatableProp } from '@lovo/matter-react'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { type GrainBlend, GrainShader } from './shader'; diff --git a/registry/grain/shader.tsx b/registry/grain/shader.tsx index 294e534d..6e54adb3 100644 --- a/registry/grain/shader.tsx +++ b/registry/grain/shader.tsx @@ -4,14 +4,14 @@ // the engine's grain() primitive (a screen-position hash); this file decides // the two things layered on top of it: how often the pattern re-rolls // (speed) and how the noise combines with the image underneath (blend). -import { grain } from '@lovo/matter'; +import { grain } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, usePostProcessPass, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { floor, vec4 } from 'three/tsl'; export type GrainBlend = 'additive' | 'subtractive'; diff --git a/registry/linear-gradient/linear-gradient.tsx b/registry/linear-gradient/linear-gradient.tsx index 1ca51882..cf2f73b7 100644 --- a/registry/linear-gradient/linear-gradient.tsx +++ b/registry/linear-gradient/linear-gradient.tsx @@ -4,8 +4,8 @@ // and their default values, then hands everything to LinearGradientShader // (./shader.tsx), which does the actual GPU work. Render it inside a // — the component draws nothing on its own. -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { LinearGradientShader } from './shader'; diff --git a/registry/linear-gradient/shader.tsx b/registry/linear-gradient/shader.tsx index 2624993c..57fba970 100644 --- a/registry/linear-gradient/shader.tsx +++ b/registry/linear-gradient/shader.tsx @@ -8,7 +8,7 @@ // color from the ramp. import { useEffect } from 'react'; -import { colorRamp, type ColorSpace, type HueInterpolation } from '@lovo/matter'; +import { colorRamp, type ColorSpace, type HueInterpolation } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, @@ -16,7 +16,7 @@ import { useAnimatableUniform, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { cos, fract, mix, sin, smoothstep, sub, uv, vec2 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/registry/mesh-gradient/mesh-gradient.tsx b/registry/mesh-gradient/mesh-gradient.tsx index d5ebbd39..996599fa 100644 --- a/registry/mesh-gradient/mesh-gradient.tsx +++ b/registry/mesh-gradient/mesh-gradient.tsx @@ -5,8 +5,8 @@ // anchors four colors near the canvas corners, melts the boundaries with a // noise-driven warp, and cross-fades the whole thing between two palettes. // Render it inside a . -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { Palette } from '../utils/color'; import { MeshGradientShader } from './shader'; diff --git a/registry/mesh-gradient/shader.tsx b/registry/mesh-gradient/shader.tsx index fb09acba..22b8f61b 100644 --- a/registry/mesh-gradient/shader.tsx +++ b/registry/mesh-gradient/shader.tsx @@ -15,14 +15,14 @@ import { type HueInterpolation, mixColor, simplexNoise, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, useResize, useShaderContext, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { abs, cos, pow, sign, sin, smoothstep, uniform, uv, vec2, vec4 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry, Vector3 } from 'three/webgpu'; diff --git a/registry/package.json b/registry/package.json index 218a7987..5eaa27bd 100644 --- a/registry/package.json +++ b/registry/package.json @@ -1,8 +1,8 @@ { - "name": "@matter/registry", + "name": "@shaders/registry", "version": "0.0.0", "private": true, - "description": "Source-of-truth Tier 1 components shipped via the @lovo/matter-cli copy-paste flow. Not published to npm.", + "description": "Source-of-truth Tier 1 components shipped via the @mattermix/shaders-cli copy-paste flow. Not published to npm.", "type": "module", "exports": { "./linear-gradient": "./linear-gradient/linear-gradient.tsx", @@ -27,13 +27,13 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@lovo/matter": "workspace:*", - "@lovo/matter-react": "workspace:*", + "@mattermix/shaders": "workspace:*", + "@mattermix/shaders-react": "workspace:*", "react": "^19.0.0", "three": "^0.170.0" }, "devDependencies": { - "@matter/tsconfig": "workspace:*", + "@shaders/tsconfig": "workspace:*", "@types/react": "^19.0.0", "@types/three": "^0.170.0", "typescript": "^5.6.0" diff --git a/registry/radial-gradient/radial-gradient.tsx b/registry/radial-gradient/radial-gradient.tsx index e7b7f284..f1aa1076 100644 --- a/registry/radial-gradient/radial-gradient.tsx +++ b/registry/radial-gradient/radial-gradient.tsx @@ -4,8 +4,8 @@ // and their default values, then hands everything to RadialGradientShader // (./shader.tsx), which does the actual GPU work. Render it inside a // — the component draws nothing on its own. -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { RadialGradientShader } from './shader'; diff --git a/registry/radial-gradient/shader.tsx b/registry/radial-gradient/shader.tsx index 137bce5f..9551a6b1 100644 --- a/registry/radial-gradient/shader.tsx +++ b/registry/radial-gradient/shader.tsx @@ -8,7 +8,7 @@ // a color from the ramp. import { useEffect, useMemo } from 'react'; -import { colorRamp, type ColorSpace, type HueInterpolation } from '@lovo/matter'; +import { colorRamp, type ColorSpace, type HueInterpolation } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, @@ -17,7 +17,7 @@ import { useResize, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { clamp, cos, fract, length, mix, sin, step, uniform, uv, vec2 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu'; diff --git a/registry/registry.json b/registry/registry.json index e9ddcb3c..8d586886 100644 --- a/registry/registry.json +++ b/registry/registry.json @@ -6,7 +6,7 @@ "file": "linear-gradient/linear-gradient.tsx", "files": ["linear-gradient/shader.tsx", "utils/color.ts"], "description": "Animated linear gradient. The simplest, foundational Matter component.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": ["colorRamp", "mix", "uv", "vec2", "vec3", "uniform"], "tier": 1 }, @@ -14,7 +14,7 @@ "file": "simplex-noise/simplex-noise.tsx", "files": ["simplex-noise/shader.tsx", "utils/color.ts"], "description": "Evolving 3D simplex noise with color ramp, contour bands, and brightness/contrast histogram shaping.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "colorRamp", "simplexNoise", @@ -31,7 +31,7 @@ "file": "dot-field/dot-field.tsx", "files": ["dot-field/shader.tsx", "utils/color.ts"], "description": "Tiled dot field with center-anchored ripple displacement \u2014 the architecturally-validating Matter component.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "signedDistanceFieldCircle", "displace", @@ -51,7 +51,7 @@ "file": "grain/grain.tsx", "files": ["grain/shader.tsx"], "description": "Additive or subtractive film grain overlay. Stacks on top of any base component inside .", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": ["grain", "uv", "vec4", "uniform", "floor"], "tier": 1 }, @@ -59,7 +59,7 @@ "file": "wave-lines/wave-lines.tsx", "files": ["wave-lines/shader.tsx", "utils/color.ts"], "description": "Coherent wave-line bundle: translucent ribbon bodies wrapped in additive halo light. Lines share one wave and braid, breathe, and fray wide toward the canvas edges, with per-line flat or gradient color.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "sin", "uv", @@ -83,7 +83,7 @@ "file": "mesh-gradient/mesh-gradient.tsx", "files": ["mesh-gradient/shader.tsx", "utils/color.ts"], "description": "Warped 4-color fluid gradient with time-cycling palette and film grain. Linear/Stripe marketing-page style.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "simplexNoise", "elapsedTime", @@ -105,7 +105,7 @@ "file": "aurora/aurora.tsx", "files": ["aurora/shader.tsx", "utils/color.ts"], "description": "Four color-seeded noise curtains sharing one atmospheric noise field, layered over a dusk sky.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "simplexNoise", "smoothstep", @@ -122,7 +122,7 @@ "file": "vignette/vignette.tsx", "files": ["vignette/shader.tsx", "utils/color.ts"], "description": "Radial darkening at the canvas edges. Stacks on top of any base component inside .", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": ["uv", "vec2", "vec3", "vec4", "mix", "smoothstep", "length", "uniform"], "tier": 1 }, @@ -130,7 +130,7 @@ "file": "radial-gradient/radial-gradient.tsx", "files": ["radial-gradient/shader.tsx", "utils/color.ts"], "description": "A color ramp radiating from a point, with an elliptical shape control and repeating concentric rings. The radial counterpart to LinearGradient.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "colorRamp", "clamp", @@ -148,7 +148,7 @@ "file": "god-rays/god-rays.tsx", "files": ["god-rays/shader.tsx", "utils/color.ts"], "description": "Layered soft light rays radiating from a controllable origin: two flowing noise fields multiplied per color, with patchiness, diffusion, and an interactive source glow.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "abs", "atan2", @@ -174,7 +174,7 @@ "file": "conic-gradient/conic-gradient.tsx", "files": ["conic-gradient/shader.tsx", "utils/color.ts"], "description": "A color ramp sweeping clockwise around a center point, with pinwheel repeats and rotation. Completes the CSS gradient trio with LinearGradient and RadialGradient.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": ["colorRamp", "atan2", "fract", "uv", "vec2", "uniform"], "tier": 1 }, @@ -182,7 +182,7 @@ "file": "dither/dither.tsx", "files": ["dither/shader.tsx"], "description": "Retro ordered dithering: pixelates the scene into chunky cells and posterizes its colors. Stacks on top of any base component inside .", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "ditherThreshold", "quantize", @@ -197,7 +197,7 @@ "file": "voronoi/voronoi.tsx", "files": ["voronoi/shader.tsx", "utils/color.ts"], "description": "Cellular mosaic \u2014 flat color patches around drifting seed points, with crisp constant-width borders.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "voronoiCells", "colorRamp", @@ -224,7 +224,7 @@ "utils/color.ts" ], "description": "Layered fractal noise \u2014 multi-octave texture with a style dial from soft clouds to crisp vein networks.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "fractalNoise", "colorRamp", @@ -241,7 +241,7 @@ "file": "blobs/blobs.tsx", "files": ["blobs/shader.tsx", "utils/color.ts"], "description": "Soft gooey blobs \u2014 colored metaballs drifting around the center, merging and splitting over a transparent background.", - "dependencies": ["@lovo/matter", "@lovo/matter-react", "react", "three"], + "dependencies": ["@mattermix/shaders", "@mattermix/shaders-react", "react", "three"], "uses_primitives": [ "metaballs", "colorRamp", diff --git a/registry/registry.schema.json b/registry/registry.schema.json index 2e93bf84..0ba70430 100644 --- a/registry/registry.schema.json +++ b/registry/registry.schema.json @@ -1,8 +1,8 @@ { "$schema": "http://json-schema.org/draft-07/schema#", - "$id": "https://github.com/lovo-hq/matter/blob/main/registry/registry.schema.json", + "$id": "https://github.com/mattermix/shaders/blob/main/registry/registry.schema.json", "title": "Matter registry index", - "description": "The index @lovo/matter-cli reads to copy Tier 1 components into a user's project.", + "description": "The index @mattermix/shaders-cli reads to copy Tier 1 components into a user's project.", "type": "object", "required": ["version", "components"], "additionalProperties": false, diff --git a/registry/simplex-noise/shader.tsx b/registry/simplex-noise/shader.tsx index cfb47460..e1cf6d02 100644 --- a/registry/simplex-noise/shader.tsx +++ b/registry/simplex-noise/shader.tsx @@ -13,14 +13,14 @@ import { type HueInterpolation, quantize, simplexNoise, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { clamp, mix, uniform, uv, vec3 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry, Vector2 } from 'three/webgpu'; diff --git a/registry/simplex-noise/simplex-noise.tsx b/registry/simplex-noise/simplex-noise.tsx index 8f9b2a9d..49274dae 100644 --- a/registry/simplex-noise/simplex-noise.tsx +++ b/registry/simplex-noise/simplex-noise.tsx @@ -4,8 +4,8 @@ // their defaults, then delegates to SimplexNoiseShader (./shader.tsx), which // samples a noise field per pixel and maps the result onto a color ramp. // Render it inside a . -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { SimplexNoiseShader } from './shader'; diff --git a/registry/tsconfig.json b/registry/tsconfig.json index 45ac64a2..0929fc16 100644 --- a/registry/tsconfig.json +++ b/registry/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@matter/tsconfig/react-library.json", + "extends": "@shaders/tsconfig/react-library.json", "compilerOptions": { "noEmit": true, "moduleResolution": "Bundler", diff --git a/registry/utils/color.ts b/registry/utils/color.ts index 7df4ae5b..9b39e0dc 100644 --- a/registry/utils/color.ts +++ b/registry/utils/color.ts @@ -3,7 +3,7 @@ // user-facing ColorStop[] props into the engine's ColorRampStop[] shape. // This file ships alongside each component the CLI copies out, so it stays // dependency-light (engine + TSL only). -import { type ColorRampStop, parseColorString } from '@lovo/matter'; +import { type ColorRampStop, parseColorString } from '@mattermix/shaders'; import { vec3 } from 'three/tsl'; /** diff --git a/registry/vignette/shader.tsx b/registry/vignette/shader.tsx index 54ef2f29..057b967e 100644 --- a/registry/vignette/shader.tsx +++ b/registry/vignette/shader.tsx @@ -6,15 +6,15 @@ // props; the engine's mixColor() does the color-space-aware blending. import { useEffect, useMemo } from 'react'; -import { mixColor } from '@lovo/matter'; -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; +import { mixColor } from '@mattermix/shaders'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatablePoint, useAnimatableUniform, usePostProcessPass, useResize, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { length, smoothstep, uniform, uv, vec2, vec4 } from 'three/tsl'; import { Vector3 } from 'three/webgpu'; diff --git a/registry/vignette/vignette.tsx b/registry/vignette/vignette.tsx index fe44964a..c3081a9e 100644 --- a/registry/vignette/vignette.tsx +++ b/registry/vignette/vignette.tsx @@ -4,8 +4,8 @@ // defaults, then delegates to VignetteShader (./shader.tsx). The vignette is // a post-process layer — stack it after other components inside a // and it blends the image toward `color` at the edges. -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { VignetteShader } from './shader'; diff --git a/registry/voronoi/shader.tsx b/registry/voronoi/shader.tsx index 45d5ba93..ed1c7b31 100644 --- a/registry/voronoi/shader.tsx +++ b/registry/voronoi/shader.tsx @@ -15,7 +15,7 @@ import { mixColor, quantize, voronoiCells, -} from '@lovo/matter'; +} from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, @@ -23,7 +23,7 @@ import { useResize, useShaderContext, useStaticSceneHint, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { clamp, float, fwidth, mix, pow, select, smoothstep, uniform, uv, vec2 } from 'three/tsl'; import { Mesh, MeshBasicNodeMaterial, PlaneGeometry, Vector2, Vector3 } from 'three/webgpu'; diff --git a/registry/voronoi/voronoi.tsx b/registry/voronoi/voronoi.tsx index aea60361..2437f262 100644 --- a/registry/voronoi/voronoi.tsx +++ b/registry/voronoi/voronoi.tsx @@ -4,8 +4,8 @@ // defaults, then delegates to VoronoiShader (./shader.tsx), which carves the // canvas into cells around scattered seed points and colors each cell from // the ramp. Render it inside a . -import type { ColorSpace, HueInterpolation } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace, HueInterpolation } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import type { ColorStop } from '../utils/color'; import { VoronoiShader } from './shader'; diff --git a/registry/wave-lines/shader.tsx b/registry/wave-lines/shader.tsx index 7a68a13e..7802ab74 100644 --- a/registry/wave-lines/shader.tsx +++ b/registry/wave-lines/shader.tsx @@ -9,13 +9,13 @@ // (./wave-lines.tsx) supplies the props. import { useEffect } from 'react'; -import { colorRamp, type ColorSpace } from '@lovo/matter'; +import { colorRamp, type ColorSpace } from '@mattermix/shaders'; import { type AnimatableProp, useAnimatableSpeed, useAnimatableUniform, useShaderContext, -} from '@lovo/matter-react'; +} from '@mattermix/shaders-react'; import { float, fract, diff --git a/registry/wave-lines/wave-lines.tsx b/registry/wave-lines/wave-lines.tsx index 40fb0519..925674ea 100644 --- a/registry/wave-lines/wave-lines.tsx +++ b/registry/wave-lines/wave-lines.tsx @@ -5,8 +5,8 @@ // bundle of waving ribbons — each a solid body plus an additive light halo — // sharing one wave so they move as a coherent group. Render it inside a // . -import type { ColorSpace } from '@lovo/matter'; -import type { AnimatableProp } from '@lovo/matter-react'; +import type { ColorSpace } from '@mattermix/shaders'; +import type { AnimatableProp } from '@mattermix/shaders-react'; import { WaveLinesShader } from './shader'; diff --git a/scripts/build-posters.sh b/scripts/build-posters.sh index 5200fc93..23bb74e1 100755 --- a/scripts/build-posters.sh +++ b/scripts/build-posters.sh @@ -15,7 +15,7 @@ WIDTH=1080 HEIGHT=720 if [ ! -f packages/matter-cli/dist/index.js ]; then - echo "error: CLI not built. Run: pnpm --filter @lovo/matter-cli build" >&2 + echo "error: CLI not built. Run: pnpm --filter @mattermix/shaders-cli build" >&2 exit 1 fi diff --git a/scripts/smoke-test-cli.mjs b/scripts/smoke-test-cli.mjs index 3deaa1ca..604ea128 100755 --- a/scripts/smoke-test-cli.mjs +++ b/scripts/smoke-test-cli.mjs @@ -30,7 +30,7 @@ let exitCode = 0; try { step('Build the CLI'); - run('pnpm --filter @lovo/matter-cli build', { cwd: repoRoot }); + run('pnpm --filter @mattermix/shaders-cli build', { cwd: repoRoot }); step(`Pack the CLI from ${cliDir}`); const packOutput = runQuiet(`pnpm pack --pack-destination "${smokeDir}"`, { @@ -51,7 +51,7 @@ try { run(`npm install --no-save "${tarball}"`, { cwd: smokeDir }); step(`Run \`matter-cli init\``); - run(`node node_modules/@lovo/matter-cli/dist/index.js init`, { + run(`node node_modules/@mattermix/shaders-cli/dist/index.js init`, { cwd: smokeDir, }); @@ -62,12 +62,12 @@ try { writeFileSync(cfgPath, JSON.stringify(cfg, null, 2) + '\n'); step(`Run \`matter-cli list\``); - run(`node node_modules/@lovo/matter-cli/dist/index.js list`, { + run(`node node_modules/@mattermix/shaders-cli/dist/index.js list`, { cwd: smokeDir, }); step(`Run \`matter-cli add linear-gradient\``); - run(`node node_modules/@lovo/matter-cli/dist/index.js add linear-gradient`, { + run(`node node_modules/@mattermix/shaders-cli/dist/index.js add linear-gradient`, { cwd: smokeDir, }); @@ -90,7 +90,7 @@ try { join(smokeDir, 'src/components/matter/linear-gradient/linear-gradient.tsx'), 'export const stale = true\n', ); - run(`node node_modules/@lovo/matter-cli/dist/index.js update linear-gradient --force`, { + run(`node node_modules/@mattermix/shaders-cli/dist/index.js update linear-gradient --force`, { cwd: smokeDir, }); const refreshed = readFileSync( diff --git a/scripts/snap.sh b/scripts/snap.sh index 9b960531..f594ef0a 100755 --- a/scripts/snap.sh +++ b/scripts/snap.sh @@ -23,7 +23,7 @@ if ! docker info >/dev/null 2>&1; then fi echo "==> macOS baseline (native)" -pnpm --filter @matter/docs-tests exec playwright test "${PW_ARGS[@]}" +pnpm --filter @shaders/docs-tests exec playwright test "${PW_ARGS[@]}" echo echo "==> Linux baseline (Docker)" @@ -72,7 +72,7 @@ docker run --rm \ corepack enable && corepack prepare ${PNPM_SPEC} --activate && pnpm install --frozen-lockfile && - pnpm --filter @matter/docs-tests exec playwright test${PW_ARGS_INNER} + pnpm --filter @shaders/docs-tests exec playwright test${PW_ARGS_INNER} " echo diff --git a/tooling/tsconfig/package.json b/tooling/tsconfig/package.json index 1d67c609..85e015e7 100644 --- a/tooling/tsconfig/package.json +++ b/tooling/tsconfig/package.json @@ -1,5 +1,5 @@ { - "name": "@matter/tsconfig", + "name": "@shaders/tsconfig", "version": "0.0.0", "private": true, "files": [ From b14a0daf050e603c84bb5644b4f1ae4e636c3966 Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Thu, 20 Aug 2026 17:21:25 -0400 Subject: [PATCH 2/4] chore: rename directories, ShadersError, and the CLI to shaders --- .../resolve-coderabbit-feedback/SKILL.md | 2 +- .fallowrc.json | 2 +- .prettierignore | 2 +- AGENTS.md | 4 +- README.md | 8 +-- apps/docs-tests/visual/gamut.spec.ts | 2 +- apps/docs/content/docs/changelog.mdx | 6 +- apps/docs/content/docs/cli.mdx | 16 ++--- apps/docs/content/docs/getting-started.mdx | 8 +-- apps/docs/content/docs/react/api.mdx | 2 +- .../docs/react/guides/ssr-and-fallbacks.mdx | 2 +- apps/docs/src/app/components/page.tsx | 4 +- apps/docs/vitest.config.ts | 2 +- eslint.config.js | 6 +- .../src/config/matterConfig.test.ts | 71 ------------------- packages/matter-react/src/errors/index.ts | 2 - .../matter-react/src/errors/matter-error.ts | 19 ----- .../.tsbuildinfo-tooling | 0 .../{matter-cli => shaders-cli}/CHANGELOG.md | 6 +- packages/{matter-cli => shaders-cli}/LICENSE | 0 .../{matter-cli => shaders-cli}/README.md | 22 +++--- .../{matter-cli => shaders-cli}/package.json | 4 +- .../src/commands/add.test.ts | 10 +-- .../src/commands/add.ts | 17 +++-- .../src/commands/init.test.ts | 22 +++--- .../src/commands/init.ts | 14 ++-- .../src/commands/list.test.ts | 15 ++-- .../src/commands/list.ts | 16 +++-- .../src/commands/poster.test.ts | 0 .../src/commands/poster.ts | 2 +- .../src/commands/update.test.ts | 14 ++-- .../src/commands/update.ts | 14 ++-- .../src/config/shadersConfig.test.ts | 71 +++++++++++++++++++ .../src/config/shadersConfig.ts} | 26 +++---- .../src/config/validate.ts | 6 +- .../src/fs/writeFileNoFollow.test.ts | 0 .../src/fs/writeFileNoFollow.ts | 0 .../src/harness/frameReady.ts | 0 .../src/harness/index.html | 0 .../src/harness/index.tsx | 0 .../src/harness/tsconfig.json | 0 .../{matter-cli => shaders-cli}/src/index.ts | 14 ++-- .../src/poster/bundle.test.ts | 2 +- .../src/poster/bundle.ts | 0 .../src/poster/e2e.test.ts | 0 .../src/poster/playwright.test.ts | 2 +- .../src/poster/playwright.ts | 0 .../src/poster/projectRoot.test.ts | 0 .../src/poster/projectRoot.ts | 0 .../src/poster/server.test.ts | 0 .../src/poster/server.ts | 0 .../src/registry/fetchRegistry.test.ts | 0 .../src/registry/fetchRegistry.ts | 0 .../src/registry/readUrl.test.ts | 0 .../src/registry/readUrl.ts | 0 .../src/registry/ref.test.ts | 0 .../src/registry/ref.ts | 0 .../src/registry/registryManifest.test.ts | 0 .../src/test-fixtures/README.md | 0 .../posters/aurora-with-time.tsx | 0 .../posters/gradient-plus-grain.tsx | 0 .../test-fixtures/posters/named-export.tsx | 0 .../posters/single-linear-gradient.tsx | 0 .../src/test-fixtures/posters/trivial.tsx | 0 .../nested-component/nested-component.tsx | 0 .../registry/nested-component/shader.tsx | 0 .../src/test-fixtures/registry/registry.json | 4 +- .../registry/sibling-component/shader.tsx | 0 .../sibling-component/sibling-component.tsx | 0 .../registry/synthetic-component.tsx | 0 .../src/test-fixtures/registry/utils/color.ts | 0 .../src/transforms/rewriteImports.test.ts | 0 .../src/transforms/rewriteImports.ts | 2 +- .../{matter-cli => shaders-cli}/tsconfig.json | 0 .../tsconfig.tooling.json | 0 .../tsup.config.ts | 0 .../vitest.config.ts | 0 .../CHANGELOG.md | 2 +- .../{matter-react => shaders-react}/LICENSE | 0 .../{matter-react => shaders-react}/README.md | 4 +- .../package.json | 2 +- .../fallback-boundary.test.tsx | 0 .../fallback-boundary/fallback-boundary.tsx | 0 .../src/components/index.ts | 0 .../shader-monitor/shader-monitor.test.tsx | 0 .../shader-monitor/shader-monitor.tsx | 0 .../shader-poster/poster-context.test.ts | 0 .../shader-poster/poster-context.ts | 0 .../shader-poster/shader-poster.test.tsx | 0 .../shader-poster/shader-poster.tsx | 0 .../shader-scene/shader-scene.test.tsx | 8 +-- .../components/shader-scene/shader-scene.tsx | 8 +-- .../src/context/shader-context.ts | 0 packages/shaders-react/src/errors/index.ts | 2 + .../src/errors/shaders-error.test.ts} | 10 +-- .../shaders-react/src/errors/shaders-error.ts | 19 +++++ .../src/gamut.test.ts | 0 .../src/gamut.ts | 0 .../animatable-signal/animatable-signal.ts | 0 .../src/hooks/index.ts | 0 .../use-animatable-point.test.tsx | 0 .../use-animatable-point.ts | 0 .../use-animatable-speed.test.tsx | 0 .../use-animatable-speed.ts | 0 .../use-animatable-uniform.test.tsx | 0 .../use-animatable-uniform.ts | 0 .../use-base-pass-uv.test.tsx | 0 .../use-base-pass-uv/use-base-pass-uv.ts | 0 .../src/hooks/use-cursor/use-cursor.test.tsx | 0 .../src/hooks/use-cursor/use-cursor.ts | 0 .../use-display-gamut.test.ts | 0 .../use-display-gamut/use-display-gamut.ts | 0 .../use-overlay-pass.test.tsx | 0 .../use-overlay-pass/use-overlay-pass.ts | 0 .../src/hooks/use-resize/use-resize.test.ts | 0 .../src/hooks/use-resize/use-resize.ts | 0 .../src/hooks/use-scroll/use-scroll.test.ts | 0 .../src/hooks/use-scroll/use-scroll.ts | 0 .../use-shader-context/use-shader-context.ts | 0 .../use-shader-material.test.tsx | 0 .../use-shader-material.ts | 0 .../use-static-hint/use-static-hint.test.tsx | 0 .../hooks/use-static-hint/use-static-hint.ts | 0 .../src/index.ts | 0 .../src/internal/create-signal.ts | 0 .../src/poster.test.ts | 0 .../src/poster.ts | 0 .../src/test-setup.ts | 0 .../tsconfig.json | 0 .../tsup.config.ts | 0 .../vitest.config.ts | 0 packages/{matter => shaders}/CHANGELOG.md | 2 +- packages/{matter => shaders}/LICENSE | 0 packages/{matter => shaders}/README.md | 0 packages/{matter => shaders}/package.json | 2 +- .../{matter => shaders}/src/color.test.ts | 0 packages/{matter => shaders}/src/color.ts | 0 packages/{matter => shaders}/src/index.ts | 0 .../inputs/cursor-input/cursor-input.test.ts | 0 .../src/inputs/cursor-input/cursor-input.ts | 0 .../primitives/color-ramp/color-ramp.test.ts | 0 .../src/primitives/color-ramp/color-ramp.ts | 0 .../color-space/color-space-export.test.ts | 0 .../color-space/cpu-convert.test.ts | 0 .../src/primitives/color-space/cpu-convert.ts | 0 .../color-space/cpu-transfer.test.ts | 0 .../primitives/color-space/cpu-transfer.ts | 0 .../src/primitives/color-space/hsl.ts | 0 .../src/primitives/color-space/hsv.ts | 0 .../src/primitives/color-space/hue.ts | 0 .../src/primitives/color-space/index.ts | 0 .../src/primitives/color-space/lch.ts | 0 .../src/primitives/color-space/linear.ts | 0 .../primitives/color-space/mix-color.test.ts | 0 .../src/primitives/color-space/mix-color.ts | 0 .../src/primitives/color-space/oklab.ts | 0 .../src/primitives/color-space/oklch.ts | 0 .../src/primitives/color-space/registry.ts | 0 .../primitives/color-space/transfer.test.ts | 0 .../src/primitives/color-space/transfer.ts | 0 .../src/primitives/color-space/types.ts | 0 .../cursor-ripple/cursor-ripple.test.ts | 0 .../primitives/cursor-ripple/cursor-ripple.ts | 0 .../src/primitives/displace/displace.ts | 0 .../dither-pattern/blue-noise-tile.ts | 0 .../dither-pattern/dither-pattern.test.ts | 0 .../dither-pattern/dither-pattern.ts | 0 .../src/primitives/dither/dither.test.ts | 0 .../src/primitives/dither/dither.ts | 0 .../src/primitives/fbm/fbm.test.ts | 0 .../src/primitives/fbm/fbm.ts | 0 .../src/primitives/grain/grain.test.ts | 0 .../src/primitives/grain/grain.ts | 0 .../primitives/metaballs/metaballs.test.ts | 0 .../src/primitives/metaballs/metaballs.ts | 0 .../src/primitives/noise/noise.test.ts | 0 .../src/primitives/noise/noise.ts | 0 .../src/primitives/quantize/quantize.test.ts | 0 .../src/primitives/quantize/quantize.ts | 0 .../primitives/sdf-circle/sdf-circle.test.ts | 0 .../src/primitives/sdf-circle/sdf-circle.ts | 0 .../stable-hash/stable-hash.test.ts | 0 .../src/primitives/stable-hash/stable-hash.ts | 0 .../src/primitives/time/time.test.ts | 0 .../src/primitives/time/time.ts | 0 .../primitives/voronoi/voronoi-cells.test.ts | 0 .../src/primitives/voronoi/voronoi-cells.ts | 0 .../src/primitives/voronoi/voronoi.test.ts | 0 .../src/primitives/voronoi/voronoi.ts | 0 .../src/runtime/clock/reset-clock.test.ts | 0 .../src/runtime/clock/reset-clock.ts | 0 .../create-renderer/create-renderer.ts | 0 .../src/runtime/create-renderer/gamut.test.ts | 0 .../src/runtime/create-renderer/gamut.ts | 0 .../frame-scheduler/frame-scheduler.test.ts | 0 .../frame-scheduler/frame-scheduler.ts | 0 .../runtime/intersection/intersection.test.ts | 0 .../src/runtime/intersection/intersection.ts | 0 .../reduced-motion/reduced-motion.test.ts | 0 .../runtime/reduced-motion/reduced-motion.ts | 0 .../runtime-integration.test.ts | 0 .../src/runtime/visibility/visibility.test.ts | 0 .../src/runtime/visibility/visibility.ts | 0 packages/{matter => shaders}/tsconfig.json | 0 packages/{matter => shaders}/tsup.config.ts | 0 packages/{matter => shaders}/vitest.config.ts | 0 pnpm-lock.yaml | 24 +++---- scripts/build-posters.sh | 4 +- scripts/generate-blue-noise.mjs | 4 +- scripts/smoke-test-cli.mjs | 18 ++--- scripts/snap.sh | 4 +- 211 files changed, 281 insertions(+), 273 deletions(-) delete mode 100644 packages/matter-cli/src/config/matterConfig.test.ts delete mode 100644 packages/matter-react/src/errors/index.ts delete mode 100644 packages/matter-react/src/errors/matter-error.ts rename packages/{matter-cli => shaders-cli}/.tsbuildinfo-tooling (100%) rename packages/{matter-cli => shaders-cli}/CHANGELOG.md (95%) rename packages/{matter-cli => shaders-cli}/LICENSE (100%) rename packages/{matter-cli => shaders-cli}/README.md (89%) rename packages/{matter-cli => shaders-cli}/package.json (95%) rename packages/{matter-cli => shaders-cli}/src/commands/add.test.ts (97%) rename packages/{matter-cli => shaders-cli}/src/commands/add.ts (93%) rename packages/{matter-cli => shaders-cli}/src/commands/init.test.ts (59%) rename packages/{matter-cli => shaders-cli}/src/commands/init.ts (63%) rename packages/{matter-cli => shaders-cli}/src/commands/list.test.ts (79%) rename packages/{matter-cli => shaders-cli}/src/commands/list.ts (74%) rename packages/{matter-cli => shaders-cli}/src/commands/poster.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/commands/poster.ts (98%) rename packages/{matter-cli => shaders-cli}/src/commands/update.test.ts (90%) rename packages/{matter-cli => shaders-cli}/src/commands/update.ts (87%) create mode 100644 packages/shaders-cli/src/config/shadersConfig.test.ts rename packages/{matter-cli/src/config/matterConfig.ts => shaders-cli/src/config/shadersConfig.ts} (70%) rename packages/{matter-cli => shaders-cli}/src/config/validate.ts (83%) rename packages/{matter-cli => shaders-cli}/src/fs/writeFileNoFollow.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/fs/writeFileNoFollow.ts (100%) rename packages/{matter-cli => shaders-cli}/src/harness/frameReady.ts (100%) rename packages/{matter-cli => shaders-cli}/src/harness/index.html (100%) rename packages/{matter-cli => shaders-cli}/src/harness/index.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/harness/tsconfig.json (100%) rename packages/{matter-cli => shaders-cli}/src/index.ts (91%) rename packages/{matter-cli => shaders-cli}/src/poster/bundle.test.ts (96%) rename packages/{matter-cli => shaders-cli}/src/poster/bundle.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/e2e.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/playwright.test.ts (91%) rename packages/{matter-cli => shaders-cli}/src/poster/playwright.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/projectRoot.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/projectRoot.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/server.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/poster/server.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/fetchRegistry.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/fetchRegistry.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/readUrl.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/readUrl.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/ref.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/ref.ts (100%) rename packages/{matter-cli => shaders-cli}/src/registry/registryManifest.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/README.md (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/posters/aurora-with-time.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/posters/gradient-plus-grain.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/posters/named-export.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/posters/single-linear-gradient.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/posters/trivial.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/nested-component/nested-component.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/nested-component/shader.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/registry.json (80%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/sibling-component/shader.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/sibling-component/sibling-component.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/synthetic-component.tsx (100%) rename packages/{matter-cli => shaders-cli}/src/test-fixtures/registry/utils/color.ts (100%) rename packages/{matter-cli => shaders-cli}/src/transforms/rewriteImports.test.ts (100%) rename packages/{matter-cli => shaders-cli}/src/transforms/rewriteImports.ts (93%) rename packages/{matter-cli => shaders-cli}/tsconfig.json (100%) rename packages/{matter-cli => shaders-cli}/tsconfig.tooling.json (100%) rename packages/{matter-cli => shaders-cli}/tsup.config.ts (100%) rename packages/{matter-cli => shaders-cli}/vitest.config.ts (100%) rename packages/{matter-react => shaders-react}/CHANGELOG.md (98%) rename packages/{matter-react => shaders-react}/LICENSE (100%) rename packages/{matter-react => shaders-react}/README.md (97%) rename packages/{matter-react => shaders-react}/package.json (98%) rename packages/{matter-react => shaders-react}/src/components/fallback-boundary/fallback-boundary.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/fallback-boundary/fallback-boundary.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/index.ts (100%) rename packages/{matter-react => shaders-react}/src/components/shader-monitor/shader-monitor.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/shader-monitor/shader-monitor.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/shader-poster/poster-context.test.ts (100%) rename packages/{matter-react => shaders-react}/src/components/shader-poster/poster-context.ts (100%) rename packages/{matter-react => shaders-react}/src/components/shader-poster/shader-poster.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/shader-poster/shader-poster.tsx (100%) rename packages/{matter-react => shaders-react}/src/components/shader-scene/shader-scene.test.tsx (94%) rename packages/{matter-react => shaders-react}/src/components/shader-scene/shader-scene.tsx (97%) rename packages/{matter-react => shaders-react}/src/context/shader-context.ts (100%) create mode 100644 packages/shaders-react/src/errors/index.ts rename packages/{matter-react/src/errors/matter-error.test.ts => shaders-react/src/errors/shaders-error.test.ts} (55%) create mode 100644 packages/shaders-react/src/errors/shaders-error.ts rename packages/{matter-react => shaders-react}/src/gamut.test.ts (100%) rename packages/{matter-react => shaders-react}/src/gamut.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/animatable-signal/animatable-signal.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/index.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-point/use-animatable-point.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-point/use-animatable-point.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-speed/use-animatable-speed.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-animatable-uniform/use-animatable-uniform.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-base-pass-uv/use-base-pass-uv.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-base-pass-uv/use-base-pass-uv.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-cursor/use-cursor.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-cursor/use-cursor.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-display-gamut/use-display-gamut.test.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-display-gamut/use-display-gamut.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-overlay-pass/use-overlay-pass.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-overlay-pass/use-overlay-pass.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-resize/use-resize.test.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-resize/use-resize.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-scroll/use-scroll.test.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-scroll/use-scroll.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-shader-context/use-shader-context.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-shader-material/use-shader-material.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-shader-material/use-shader-material.ts (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-static-hint/use-static-hint.test.tsx (100%) rename packages/{matter-react => shaders-react}/src/hooks/use-static-hint/use-static-hint.ts (100%) rename packages/{matter-react => shaders-react}/src/index.ts (100%) rename packages/{matter-react => shaders-react}/src/internal/create-signal.ts (100%) rename packages/{matter-react => shaders-react}/src/poster.test.ts (100%) rename packages/{matter-react => shaders-react}/src/poster.ts (100%) rename packages/{matter-react => shaders-react}/src/test-setup.ts (100%) rename packages/{matter-react => shaders-react}/tsconfig.json (100%) rename packages/{matter-react => shaders-react}/tsup.config.ts (100%) rename packages/{matter-react => shaders-react}/vitest.config.ts (100%) rename packages/{matter => shaders}/CHANGELOG.md (98%) rename packages/{matter => shaders}/LICENSE (100%) rename packages/{matter => shaders}/README.md (100%) rename packages/{matter => shaders}/package.json (97%) rename packages/{matter => shaders}/src/color.test.ts (100%) rename packages/{matter => shaders}/src/color.ts (100%) rename packages/{matter => shaders}/src/index.ts (100%) rename packages/{matter => shaders}/src/inputs/cursor-input/cursor-input.test.ts (100%) rename packages/{matter => shaders}/src/inputs/cursor-input/cursor-input.ts (100%) rename packages/{matter => shaders}/src/primitives/color-ramp/color-ramp.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-ramp/color-ramp.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/color-space-export.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/cpu-convert.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/cpu-convert.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/cpu-transfer.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/cpu-transfer.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/hsl.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/hsv.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/hue.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/index.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/lch.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/linear.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/mix-color.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/mix-color.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/oklab.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/oklch.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/registry.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/transfer.test.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/transfer.ts (100%) rename packages/{matter => shaders}/src/primitives/color-space/types.ts (100%) rename packages/{matter => shaders}/src/primitives/cursor-ripple/cursor-ripple.test.ts (100%) rename packages/{matter => shaders}/src/primitives/cursor-ripple/cursor-ripple.ts (100%) rename packages/{matter => shaders}/src/primitives/displace/displace.ts (100%) rename packages/{matter => shaders}/src/primitives/dither-pattern/blue-noise-tile.ts (100%) rename packages/{matter => shaders}/src/primitives/dither-pattern/dither-pattern.test.ts (100%) rename packages/{matter => shaders}/src/primitives/dither-pattern/dither-pattern.ts (100%) rename packages/{matter => shaders}/src/primitives/dither/dither.test.ts (100%) rename packages/{matter => shaders}/src/primitives/dither/dither.ts (100%) rename packages/{matter => shaders}/src/primitives/fbm/fbm.test.ts (100%) rename packages/{matter => shaders}/src/primitives/fbm/fbm.ts (100%) rename packages/{matter => shaders}/src/primitives/grain/grain.test.ts (100%) rename packages/{matter => shaders}/src/primitives/grain/grain.ts (100%) rename packages/{matter => shaders}/src/primitives/metaballs/metaballs.test.ts (100%) rename packages/{matter => shaders}/src/primitives/metaballs/metaballs.ts (100%) rename packages/{matter => shaders}/src/primitives/noise/noise.test.ts (100%) rename packages/{matter => shaders}/src/primitives/noise/noise.ts (100%) rename packages/{matter => shaders}/src/primitives/quantize/quantize.test.ts (100%) rename packages/{matter => shaders}/src/primitives/quantize/quantize.ts (100%) rename packages/{matter => shaders}/src/primitives/sdf-circle/sdf-circle.test.ts (100%) rename packages/{matter => shaders}/src/primitives/sdf-circle/sdf-circle.ts (100%) rename packages/{matter => shaders}/src/primitives/stable-hash/stable-hash.test.ts (100%) rename packages/{matter => shaders}/src/primitives/stable-hash/stable-hash.ts (100%) rename packages/{matter => shaders}/src/primitives/time/time.test.ts (100%) rename packages/{matter => shaders}/src/primitives/time/time.ts (100%) rename packages/{matter => shaders}/src/primitives/voronoi/voronoi-cells.test.ts (100%) rename packages/{matter => shaders}/src/primitives/voronoi/voronoi-cells.ts (100%) rename packages/{matter => shaders}/src/primitives/voronoi/voronoi.test.ts (100%) rename packages/{matter => shaders}/src/primitives/voronoi/voronoi.ts (100%) rename packages/{matter => shaders}/src/runtime/clock/reset-clock.test.ts (100%) rename packages/{matter => shaders}/src/runtime/clock/reset-clock.ts (100%) rename packages/{matter => shaders}/src/runtime/create-renderer/create-renderer.ts (100%) rename packages/{matter => shaders}/src/runtime/create-renderer/gamut.test.ts (100%) rename packages/{matter => shaders}/src/runtime/create-renderer/gamut.ts (100%) rename packages/{matter => shaders}/src/runtime/frame-scheduler/frame-scheduler.test.ts (100%) rename packages/{matter => shaders}/src/runtime/frame-scheduler/frame-scheduler.ts (100%) rename packages/{matter => shaders}/src/runtime/intersection/intersection.test.ts (100%) rename packages/{matter => shaders}/src/runtime/intersection/intersection.ts (100%) rename packages/{matter => shaders}/src/runtime/reduced-motion/reduced-motion.test.ts (100%) rename packages/{matter => shaders}/src/runtime/reduced-motion/reduced-motion.ts (100%) rename packages/{matter => shaders}/src/runtime/runtime-integration/runtime-integration.test.ts (100%) rename packages/{matter => shaders}/src/runtime/visibility/visibility.test.ts (100%) rename packages/{matter => shaders}/src/runtime/visibility/visibility.ts (100%) rename packages/{matter => shaders}/tsconfig.json (100%) rename packages/{matter => shaders}/tsup.config.ts (100%) rename packages/{matter => shaders}/vitest.config.ts (100%) diff --git a/.claude/skills/resolve-coderabbit-feedback/SKILL.md b/.claude/skills/resolve-coderabbit-feedback/SKILL.md index 93d4b8da..be19053d 100644 --- a/.claude/skills/resolve-coderabbit-feedback/SKILL.md +++ b/.claude/skills/resolve-coderabbit-feedback/SKILL.md @@ -267,7 +267,7 @@ pnpm test --filter Four repo traps apply here: -- If a fix changed source under `packages/matter` or `packages/matter-react`, run `pnpm --filter @mattermix/shaders build`. The docs site consumes `dist`, so an unbuilt fix looks like no fix at all. +- If a fix changed source under `packages/shaders` or `packages/shaders-react`, run `pnpm --filter @mattermix/shaders build`. The docs site consumes `dist`, so an unbuilt fix looks like no fix at all. - If a fix changed a dependency in any `package.json`, commit the updated `pnpm-lock.yaml` with it, and check that the lockfile still pins `node@runtime` at `version: 22.22.2` with `hasBin: true`. Every pnpm resolution step rewrites that entry to `0.0.0`, and CI then dies at install in every job. - Never run `pnpm snap` as part of this workflow. Ask first. It needs Docker and Node 22, it takes a long time, and it corrupts a running docs or editor dev server. - If you ran Playwright or `pnpm snap` for any reason, tell the user to restart the dev server before trusting the browser. The procedure is in `AGENTS.md` under the environment gotchas. diff --git a/.fallowrc.json b/.fallowrc.json index b3032ff3..9d793107 100644 --- a/.fallowrc.json +++ b/.fallowrc.json @@ -13,7 +13,7 @@ "apps/docs/content/**", "**/*.mdx", "apps/playground/**", - "packages/matter-cli/src/test-fixtures/**" + "packages/shaders-cli/src/test-fixtures/**" ], "ignoreDependencies": [ "@tweakpane/core", diff --git a/.prettierignore b/.prettierignore index 7dce3e67..f60fadbd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -22,4 +22,4 @@ pnpm-lock.yaml # Isolated workspaces / vendored fixtures .worktrees/ .fallow/ -packages/matter-cli/src/test-fixtures/ +packages/shaders-cli/src/test-fixtures/ diff --git a/AGENTS.md b/AGENTS.md index 786b785b..0aebe1cc 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -138,7 +138,7 @@ These rules exist because Matter doubles as a shader-learning project for its au 17. **Output dithering is scene-wide, in display space.** `ShaderScene` builds `outputNode = dither(renderOutput(composed))` with `outputColorTransform = false`. Never add per-component `dither()` in a `colorNode`. It double-dithers and runs in linear space. The exported `dither()` primitive is for Mode 2 only. Gamut, like dither, is scene-level, so keep both off per-component panels. 18. **Light-emitting transparent layers need `material.premultipliedAlpha = true`.** Any component whose colorNode emits light-contribution rgb with coverage alpha, aurora-style, double-multiplies by alpha under default NormalBlending. Soft wisps dim quadratically as a result. 19. **When the shader looks cropped, compressed, or zoomed, check `renderer.getSize()` against the canvas client size FIRST**, not uv or camera math. The renderer once stuck at the 300×150 canvas default, and a logical-size guard plus a ResizeObserver fixed it. Headless Playwright falls back to WebGL2 here, where `navigator.gpu` is truthy but device init fails. -20. **Wide-gamut P3 output reaches into renderer internals**, because three 0.170 has no native WebGPU P3 path. We register the ColorSpaces addon through `ColorManagement.define` and manually re-`configure()` the `GPUCanvasContext` in `packages/matter/src/runtime/create-renderer/gamut.ts`. A future Three.js version bump should delete the manual reconfigure. You can't pixel-assert P3 output in headless Playwright. `parseColorString` unit tests prove the decode, and you validate the widening by eye on a P3 display. The `hsl` and `hsv` color spaces clamp to sRGB first, because a negative-channel `pow()` breaks WGSL const-eval otherwise. +20. **Wide-gamut P3 output reaches into renderer internals**, because three 0.170 has no native WebGPU P3 path. We register the ColorSpaces addon through `ColorManagement.define` and manually re-`configure()` the `GPUCanvasContext` in `packages/shaders/src/runtime/create-renderer/gamut.ts`. A future Three.js version bump should delete the manual reconfigure. You can't pixel-assert P3 output in headless Playwright. `parseColorString` unit tests prove the decode, and you validate the widening by eye on a P3 display. The `hsl` and `hsv` color spaces clamp to sRGB first, because a negative-channel `pow()` breaks WGSL const-eval otherwise. 21. **Colors commit on release in the demo panels, numbers commit live.** The registry components pass literal stops to `colorRamp` and rebuild their `NodeMaterial` when colors change, covered in the colorRamp gotcha, where the primitive can take uniform-driven stops now but the components haven't been migrated. A continuously-firing color drag would therefore recompile the shader every frame. `ColorInput` holds a draft and writes to the store on pointer release. `SliderInput` writes on every change, because numeric props ride stable `uniform(...)` nodes. 22. **Subscribing to a container in the demo control store (docs demo panels) re-renders everything under it.** `writeAtPath` rebuilds every object and array along the written path, so a component that subscribes to the root params object, or to a list's array, re-renders on every write anywhere inside it. The control components are deliberately unmemoized, so that re-render cascades. The cascade bit three separate times on one branch before the pattern below stuck. Subscribe to a leaf, or to a stable primitive like a list's `length`, and read containers non-reactively at event time through `useControlStore()`. See `ControlPanel`'s copy buttons and `ListInput`'s add and remove. 23. **Never build a running minimum or argmin as an unrolled JS select() chain, because the tab hangs before the shader compiles.** A select-based accumulator references itself twice per step, once in the comparison and once in the else-branch, and three's `getNodeType` recursion has no cross-reference memoization, so type resolution goes exponential in chain depth. `voronoiCells`' 34-step chain froze headless Chromium indefinitely at first render, with a CDP-interrupted stack showing nothing but `getNodeType`. Adding `.toVar()` per step does NOT help, because VarNode delegates its type lookup inward. Additive chains such as fbm and wave-lines are safe, because they reference the accumulator once per step. The fix is TSL's imperative side: `Fn` plus `Loop` or `If` plus `.assign()`. That emits a real GPU `for` loop. See `voronoiCells`. Three's own MaterialX worley uses the same pattern, and it works on both WebGPU and the WebGL2 fallback with fixed integer bounds. The fbm caveat about "no clean loop primitive" is about dynamic counts like uniform-driven octaves, not about this. @@ -147,7 +147,7 @@ These rules exist because Matter doubles as a shader-learning project for its au ## Color system (shipped) -- **`colorSpace` prop** (the interpolation space) on the six components that blend two colors: `Aurora`, `LinearGradient`, `MeshGradient`, `SimplexNoise`, and `WaveLines` all go through `colorRamp`, and `Vignette` goes through `mixColor`. The default is `oklab` on all six. `DotField` and `Grain` don't take it, because they never compute a midpoint. The primitive defaults differ from each other: `colorRamp` defaults to `linear`, and `mixColor` defaults to `oklab`. It lives in `packages/matter/src/primitives/color-space/`. +- **`colorSpace` prop** (the interpolation space) on the six components that blend two colors: `Aurora`, `LinearGradient`, `MeshGradient`, `SimplexNoise`, and `WaveLines` all go through `colorRamp`, and `Vignette` goes through `mixColor`. The default is `oklab` on all six. `DotField` and `Grain` don't take it, because they never compute a midpoint. The primitive defaults differ from each other: `colorRamp` defaults to `linear`, and `mixColor` defaults to `oklab`. It lives in `packages/shaders/src/primitives/color-space/`. - **`hueInterpolation` prop** on five of those six. `WaveLines` omits it and takes `colorRamp`'s default arc. Only the cylindrical spaces read it: `oklch`, `lch`, `hsl`, and `hsv`. - **`gamut` prop** on ``, typed `'auto' | 'srgb' | 'p3'` and defaulting to `auto`, which detects through `(color-gamut: p3)` and re-resolves on monitor change. - **Separate concerns.** `colorSpace` is the mixing math and `gamut` is the output framebuffer. Wide-gamut **input** is just the decode, where `oklch()` and `oklab()` strings go through `parseColor` to unclamped linear-sRGB, and it needs zero mixing props. Aurora is additive but still blends along a depth-indexed ramp, and that is why it takes `colorSpace`. Being additive is not the test. Computing a midpoint is. diff --git a/README.md b/README.md index b71e1bd7..c96df31b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ React shader components powered by WebGPU and Three.js TSL. -> **Status:** v0.1.0 shipped to npm. `npm install -D @mattermix/shaders-cli && npx matter-cli init && npx matter-cli add linear-gradient` to scaffold your first component. +> **Status:** v0.1.0 shipped to npm. `npm install -D @mattermix/shaders-cli && npx shaders-cli init && npx shaders-cli add linear-gradient` to scaffold your first component. ## What is Matter? @@ -16,9 +16,9 @@ apps/ └── playground/ # @shaders/playground — Vite app with M1 manual harnesses packages/ -├── matter/ # @mattermix/shaders — engine: TSL primitives, renderer, scheduler -├── matter-react/ # @mattermix/shaders-react — React binding -└── matter-cli/ # @mattermix/shaders-cli — copy-paste CLI +├── shaders/ # @mattermix/shaders — engine: TSL primitives, renderer, scheduler +├── shaders-react/ # @mattermix/shaders-react — React binding +└── shaders-cli/ # @mattermix/shaders-cli — copy-paste CLI registry/ # @shaders/registry — Tier 1 component source files (CLI consumes) diff --git a/apps/docs-tests/visual/gamut.spec.ts b/apps/docs-tests/visual/gamut.spec.ts index 92d60471..57359b23 100644 --- a/apps/docs-tests/visual/gamut.spec.ts +++ b/apps/docs-tests/visual/gamut.spec.ts @@ -13,7 +13,7 @@ import { waitForShader } from './helpers'; * the P3-vs-sRGB difference we'd want to measure. So output-widening is validated * by eye on a P3 display; the deterministic automated proof that wide-gamut colors * decode to extended linear-sRGB lives in the `parseColorString` unit tests - * (`packages/matter`). This spec guards that the P3 output path itself stays alive + * (`packages/shaders`). This spec guards that the P3 output path itself stays alive * (the manual context.configure into Display P3 doesn't throw or blank the canvas). */ test('gamut probe — sRGB and P3 output paths both render without error', async ({ page }) => { diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index fce59083..00b09172 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -13,7 +13,7 @@ Matter ships as three coordinated npm packages: `@mattermix/shaders` (engine), ` **Breaking change — `Waves` is now `WaveLines`.** -The old name read as water. The component draws glowing lines, so it's renamed to match: add it with `matter-cli add wave-lines`, import `WaveLines`, and pass `lines` instead of `layers` (the per-line type is `WaveLine`, formerly `WaveLayer`). Nothing else moved: same props, same rendering, no visual change. +The old name read as water. The component draws glowing lines, so it's renamed to match: add it with `shaders-cli add wave-lines`, import `WaveLines`, and pass `lines` instead of `layers` (the per-line type is `WaveLine`, formerly `WaveLayer`). Nothing else moved: same props, same rendering, no visual change. Components ship by copy-paste, so installed copies keep working under the old name; re-add `wave-lines` through the CLI to pick up the new one. @@ -93,7 +93,7 @@ shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. The default regist ### v1 components -Available via `matter-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, `waves`. Each lands in your project as a regular `.tsx` file — you own and edit it from that point. +Available via `shaders-cli add `: `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `simplex-noise`, `waves`. Each lands in your project as a regular `.tsx` file — you own and edit it from that point. ### Requirements @@ -102,5 +102,5 @@ Available via `matter-cli add `: `linear-gradient`, `mesh-gradient`, `auro - React ^19, Three.js ^0.170. - Detailed per-package changelogs live in the repo: [`packages/matter/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter/CHANGELOG.md), [`packages/matter-react/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter-react/CHANGELOG.md), [`packages/matter-cli/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/matter-cli/CHANGELOG.md). + Detailed per-package changelogs live in the repo: [`packages/shaders/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders/CHANGELOG.md), [`packages/shaders-react/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders-react/CHANGELOG.md), [`packages/shaders-cli/CHANGELOG.md`](https://github.com/mattermix/shaders/blob/main/packages/shaders-cli/CHANGELOG.md). diff --git a/apps/docs/content/docs/cli.mdx b/apps/docs/content/docs/cli.mdx index 3103dc26..77955d34 100644 --- a/apps/docs/content/docs/cli.mdx +++ b/apps/docs/content/docs/cli.mdx @@ -21,10 +21,10 @@ Requires Node 22+. ### `init` -Run once per project to write a `matter.config.json`: +Run once per project to write a `shaders.config.json`: ```bash -npx matter-cli init +npx shaders-cli init ``` Default config: @@ -43,7 +43,7 @@ The `${ref}` placeholder resolves to the CLI's published version tag (e.g. `v0.1 ### `list` ```bash -npx matter-cli list +npx shaders-cli list ``` Prints the components in the configured registry. @@ -51,8 +51,8 @@ Prints the components in the configured registry. ### `add` ```bash -npx matter-cli add linear-gradient -npx matter-cli add aurora dot-field wave-lines +npx shaders-cli add linear-gradient +npx shaders-cli add aurora dot-field wave-lines ``` Copies the component file (and any utility files it depends on) into `componentsDir`. The fetched source is byte-identical to what's documented on this site. @@ -60,8 +60,8 @@ Copies the component file (and any utility files it depends on) into `components ### `update` ```bash -npx matter-cli update linear-gradient # one component -npx matter-cli update --force # refresh all, overwriting local edits +npx shaders-cli update linear-gradient # one component +npx shaders-cli update --force # refresh all, overwriting local edits ``` Without `--force`, `update` refuses to overwrite a file you've modified — you keep your edits unless you explicitly ask to discard them. @@ -71,5 +71,5 @@ Without `--force`, `update` refuses to overwrite a file you've modified — you Tier 1 components (``, ``, etc.) aren't published to npm. They live in [the registry](https://github.com/mattermix/shaders/tree/main/registry) and get copied into your project, where you can edit the shader, swap props, or refactor the JSX freely. The two packages you do depend on at runtime — `@mattermix/shaders` and `@mattermix/shaders-react` — provide the primitives, hooks, and `` that those components call into. - There is no hosted registry endpoint. The CLI fetches sources from GitHub raw URLs at the pinned `${ref}`. If you want to host your own fork, change `registryUrl` in `matter.config.json` to point at your fork's raw URL. + There is no hosted registry endpoint. The CLI fetches sources from GitHub raw URLs at the pinned `${ref}`. If you want to host your own fork, change `registryUrl` in `shaders.config.json` to point at your fork's raw URL. diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx index d67c1ef8..bc266c05 100644 --- a/apps/docs/content/docs/getting-started.mdx +++ b/apps/docs/content/docs/getting-started.mdx @@ -33,10 +33,10 @@ Requirements:
  • - **Initialize the project** to write a `matter.config.json` at your repo root: + **Initialize the project** to write a `shaders.config.json` at your repo root: ```bash - npx matter-cli init + npx shaders-cli init ``` This creates a config with sensible defaults — components land in `src/components/matter/`, the registry tracks the CLI's published version tag, and TSX is enabled. @@ -45,14 +45,14 @@ Requirements: **List available components:** ```bash - npx matter-cli list + npx shaders-cli list ```
  • **Copy your first component into your project:** ```bash - npx matter-cli add linear-gradient + npx shaders-cli add linear-gradient ``` The component lands in `src/components/matter/linear-gradient.tsx`. From that point on, the file is yours — edit it however you want. diff --git a/apps/docs/content/docs/react/api.mdx b/apps/docs/content/docs/react/api.mdx index b0aace47..06b450dd 100644 --- a/apps/docs/content/docs/react/api.mdx +++ b/apps/docs/content/docs/react/api.mdx @@ -35,7 +35,7 @@ import { ShaderScene } from '@mattermix/shaders-react' | `style` | `CSSProperties` | — | Forwarded to the canvas container. | | `className` | `string` | — | Forwarded to the canvas container. | | `children` | `ReactNode` | — | One or more Matter components. | -| `onError` | `(error: MatterError) => void` | — | Called once if renderer init fails (e.g. no GPU backend). Receives a `MatterError` with `code: 'renderer-init'` and the original error on `.cause`. | +| `onError` | `(error: ShadersError) => void` | — | Called once if renderer init fails (e.g. no GPU backend). Receives a `ShadersError` with `code: 'renderer-init'` and the original error on `.cause`. | ## `useShaderMaterial` diff --git a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx index a6cd5f33..c9118e2b 100644 --- a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx +++ b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx @@ -126,7 +126,7 @@ To show something in its place, wrap it in ``: the poster stays up ``` -`onError` receives a `MatterError` with `code: 'renderer-init'`; the original thrown error is on `.cause`. This is separate from ``, which covers SSR and hydration — not renderer failure. +`onError` receives a `ShadersError` with `code: 'renderer-init'`; the original thrown error is on `.cause`. This is separate from ``, which covers SSR and hydration — not renderer failure. ## What gets server-rendered diff --git a/apps/docs/src/app/components/page.tsx b/apps/docs/src/app/components/page.tsx index c136c300..f397281c 100644 --- a/apps/docs/src/app/components/page.tsx +++ b/apps/docs/src/app/components/page.tsx @@ -4,7 +4,7 @@ import { getComponentsCatalog } from '@/content/catalog'; export const metadata = { title: 'Components', - description: 'Tier 1 shader components delivered shadcn-style via matter-cli add .', + description: 'Tier 1 shader components delivered shadcn-style via shaders-cli add .', }; export default async function ComponentsIndex() { @@ -15,7 +15,7 @@ export default async function ComponentsIndex() {

    Components

    Tier 1 — polished shader components delivered shadcn-style via{' '} - matter-cli add <name>. Each component is yours to edit after copy-in. + shaders-cli add <name>. Each component is yours to edit after copy-in. Each page below has a live demo, a props playground, and the byte-identical source the CLI copies into your project.

    diff --git a/apps/docs/vitest.config.ts b/apps/docs/vitest.config.ts index b8b59dc9..1e7a51ff 100644 --- a/apps/docs/vitest.config.ts +++ b/apps/docs/vitest.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vitest/config'; export default defineConfig({ - // Mirrors packages/matter/vitest.config.ts: Vite 8 OXC cannot resolve + // Mirrors packages/shaders/vitest.config.ts: Vite 8 OXC cannot resolve // ${configDir} in our shared tsconfig, so the essential option is inline. // @ts-expect-error -- oxc is not in UserConfig types yet; this is the documented workaround oxc: { tsconfig: { compilerOptions: { verbatimModuleSyntax: true } } }, diff --git a/eslint.config.js b/eslint.config.js index 4c3430cc..a6f08338 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -26,7 +26,7 @@ export default defineConfig([ 'apps/editor/out/**', 'apps/editor/.next/**', 'apps/editor/next-env.d.ts', - 'packages/matter-cli/src/test-fixtures/**', + 'packages/shaders-cli/src/test-fixtures/**', ]), { files: ['**/*.{js,mjs,cjs,jsx}'], @@ -57,8 +57,8 @@ export default defineConfig([ parserOptions: { projectService: { allowDefaultProject: [ - 'packages/matter/*.config.{ts,mts,cts}', - 'packages/matter-react/*.config.{ts,mts,cts}', + 'packages/shaders/*.config.{ts,mts,cts}', + 'packages/shaders-react/*.config.{ts,mts,cts}', 'apps/docs/vitest.config.ts', 'apps/editor/vitest.config.ts', 'packages/*/posters/*.{ts,tsx}', diff --git a/packages/matter-cli/src/config/matterConfig.test.ts b/packages/matter-cli/src/config/matterConfig.test.ts deleted file mode 100644 index 177f9c4c..00000000 --- a/packages/matter-cli/src/config/matterConfig.test.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'; -import { tmpdir } from 'node:os'; -import { join } from 'node:path'; -import { afterEach, beforeEach, describe, expect, it } from 'vitest'; - -import { - DEFAULT_MATTER_CONFIG, - type MatterConfig, - readMatterConfig, - writeMatterConfig, -} from './matterConfig.js'; - -describe('DEFAULT_MATTER_CONFIG.registryUrl', () => { - it('points at the mattermix/shaders org (NOT lovo/matter — that is a 404)', () => { - expect(DEFAULT_MATTER_CONFIG.registryUrl).toContain('/mattermix/shaders/'); - expect(DEFAULT_MATTER_CONFIG.registryUrl).not.toMatch(/\/lovo\/matter\//); - }); - - it('contains the ${ref} placeholder for resolveRef substitution', () => { - expect(DEFAULT_MATTER_CONFIG.registryUrl).toContain('${ref}'); - }); - - it('targets the registry/ subdirectory', () => { - expect(DEFAULT_MATTER_CONFIG.registryUrl).toMatch(/\/registry$|\/registry\/$/); - }); -}); - -let dir: string; - -beforeEach(async () => { - dir = await mkdtemp(join(tmpdir(), 'matter-config-test-')); -}); - -afterEach(async () => { - await rm(dir, { recursive: true, force: true }); -}); - -describe('matterConfig', () => { - it('writes the default config when none exists', async () => { - await writeMatterConfig(dir, DEFAULT_MATTER_CONFIG); - const raw = await readFile(join(dir, 'matter.config.json'), 'utf-8'); - - expect(JSON.parse(raw)).toEqual(DEFAULT_MATTER_CONFIG); - }); - - it('reads back what it wrote', async () => { - const matterConfig: MatterConfig = { - ...DEFAULT_MATTER_CONFIG, - componentsDir: 'app/matter', - }; - - await writeMatterConfig(dir, matterConfig); - const read = await readMatterConfig(dir); - - expect(read).toEqual(matterConfig); - }); - - it('throws a clear error when matter.config.json is missing', async () => { - await expect(readMatterConfig(dir)).rejects.toThrow(/matter\.config\.json not found/); - }); - - it('throws a clear error when matter.config.json is malformed JSON', async () => { - await writeFile(join(dir, 'matter.config.json'), '{ bad json }', 'utf-8'); - await expect(readMatterConfig(dir)).rejects.toThrow(/not valid JSON/); - }); - - it('throws when required fields are missing', async () => { - await writeFile(join(dir, 'matter.config.json'), JSON.stringify({}), 'utf-8'); - await expect(readMatterConfig(dir)).rejects.toThrow(/componentsDir/); - }); -}); diff --git a/packages/matter-react/src/errors/index.ts b/packages/matter-react/src/errors/index.ts deleted file mode 100644 index 8f8fef67..00000000 --- a/packages/matter-react/src/errors/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { MatterError } from './matter-error.js'; -export type { MatterErrorCode } from './matter-error.js'; diff --git a/packages/matter-react/src/errors/matter-error.ts b/packages/matter-react/src/errors/matter-error.ts deleted file mode 100644 index 99768ddb..00000000 --- a/packages/matter-react/src/errors/matter-error.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Discriminator for a MatterError. Open union — new codes may be added - * without a breaking change. Only 'renderer-init' is emitted today. - */ -export type MatterErrorCode = 'renderer-init'; - -/** - * A typed error surfaced by @mattermix/shaders-react. The original thrown value is - * always available on `cause`. - */ -export class MatterError extends Error { - readonly code: MatterErrorCode; - - constructor(code: MatterErrorCode, message: string, options?: { cause?: unknown }) { - super(message, options); - this.name = 'MatterError'; - this.code = code; - } -} diff --git a/packages/matter-cli/.tsbuildinfo-tooling b/packages/shaders-cli/.tsbuildinfo-tooling similarity index 100% rename from packages/matter-cli/.tsbuildinfo-tooling rename to packages/shaders-cli/.tsbuildinfo-tooling diff --git a/packages/matter-cli/CHANGELOG.md b/packages/shaders-cli/CHANGELOG.md similarity index 95% rename from packages/matter-cli/CHANGELOG.md rename to packages/shaders-cli/CHANGELOG.md index 08937f94..97168bc5 100644 --- a/packages/matter-cli/CHANGELOG.md +++ b/packages/shaders-cli/CHANGELOG.md @@ -74,11 +74,11 @@ - `list`/`add`/`update`: `--ref` → `--reference` - `poster`: `--from` → `--source`, `--out` → `--output`, `--type` → `--format`, `--export` → `--export-name`, `--time` → `--capture-delay` - - `matter.config.json`: removed the `tsx` boolean key (it was validated but never read by any command) + - `shaders.config.json`: removed the `tsx` boolean key (it was validated but never read by any command) Kept: `--registry`, `--quality`, `--width`, `--height`, `--force`, and the config keys `componentsDir`, `registryUrl`, `aliases`. - Migration: update any scripts that pass the old flags. You can delete the `tsx` key from your `matter.config.json` if present — it is no longer used (unknown keys are ignored). Re-running `matter-cli init` regenerates a config without it. + Migration: update any scripts that pass the old flags. You can delete the `tsx` key from your `shaders.config.json` if present — it is no longer used (unknown keys are ignored). Re-running `shaders-cli init` regenerates a config without it. ## 0.4.1 @@ -104,6 +104,6 @@ **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. - **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. diff --git a/packages/matter-cli/LICENSE b/packages/shaders-cli/LICENSE similarity index 100% rename from packages/matter-cli/LICENSE rename to packages/shaders-cli/LICENSE diff --git a/packages/matter-cli/README.md b/packages/shaders-cli/README.md similarity index 89% rename from packages/matter-cli/README.md rename to packages/shaders-cli/README.md index fc43604e..ec793e06 100644 --- a/packages/matter-cli/README.md +++ b/packages/shaders-cli/README.md @@ -16,10 +16,10 @@ Requires Node 22+. ### One-time setup ```bash -npx matter-cli init +npx shaders-cli init ``` -Writes `matter.config.json` to your project root with sensible defaults: +Writes `shaders.config.json` to your project root with sensible defaults: ```json { @@ -34,15 +34,15 @@ The `${ref}` placeholder is auto-substituted with the CLI's published version ta ### List available components ```bash -npx matter-cli list +npx shaders-cli list ``` ### Copy a component into your project ```bash -npx matter-cli add linear-gradient +npx shaders-cli add linear-gradient # or multiple at once: -npx matter-cli add linear-gradient aurora dot-field +npx shaders-cli add linear-gradient aurora dot-field ``` The component lands in `componentsDir` (default `src/components/matter/`) — you own it from that point forward. @@ -51,10 +51,10 @@ The component lands in `componentsDir` (default `src/components/matter/`) — yo ```bash # Refresh one (errors if you have local edits): -npx matter-cli update linear-gradient +npx shaders-cli update linear-gradient # Refresh all, overwriting local edits: -npx matter-cli update --force +npx shaders-cli update --force ``` ### Render a static fallback image @@ -62,7 +62,7 @@ npx matter-cli update --force Render a Matter component tree to an image for use as the `poster` in `` — eliminates the visible blank canvas during WebGPU initialization. ```bash -npx matter-cli poster --source --output [options] +npx shaders-cli poster --source --output [options] ``` | Flag | Default | Description | @@ -100,13 +100,13 @@ pnpm exec playwright install chromium ```bash # Default — writes ./public/hero.jpg (JPEG q80) -npx matter-cli poster --source ./src/components/matter/hero.tsx --output ./public/hero.jpg +npx shaders-cli poster --source ./src/components/matter/hero.tsx --output ./public/hero.jpg # Posterized shader — PNG compresses smaller -npx matter-cli poster --source ./gradient.tsx --output ./public/gradient.png --format png +npx shaders-cli poster --source ./gradient.tsx --output ./public/gradient.png --format png # Higher quality JPEG -npx matter-cli poster --source ./aurora.tsx --output ./public/aurora.jpg --quality 92 +npx shaders-cli poster --source ./aurora.tsx --output ./public/aurora.jpg --quality 92 ``` Wire it up: diff --git a/packages/matter-cli/package.json b/packages/shaders-cli/package.json similarity index 95% rename from packages/matter-cli/package.json rename to packages/shaders-cli/package.json index 8e21dee4..b258385e 100644 --- a/packages/matter-cli/package.json +++ b/packages/shaders-cli/package.json @@ -19,10 +19,10 @@ "repository": { "type": "git", "url": "git+https://github.com/mattermix/shaders.git", - "directory": "packages/matter-cli" + "directory": "packages/shaders-cli" }, "bin": { - "matter-cli": "./dist/index.js" + "shaders-cli": "./dist/index.js" }, "files": [ "dist", diff --git a/packages/matter-cli/src/commands/add.test.ts b/packages/shaders-cli/src/commands/add.test.ts similarity index 97% rename from packages/matter-cli/src/commands/add.test.ts rename to packages/shaders-cli/src/commands/add.test.ts index 0cf36267..36b4cbab 100644 --- a/packages/matter-cli/src/commands/add.test.ts +++ b/packages/shaders-cli/src/commands/add.test.ts @@ -4,7 +4,7 @@ import { join } from 'node:path'; import { fileURLToPath } from 'node:url'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { DEFAULT_MATTER_CONFIG, writeMatterConfig } from '../config/matterConfig.js'; +import { DEFAULT_SHADERS_CONFIG, writeShadersConfig } from '../config/shadersConfig.js'; import { runAdd } from './add.js'; const FIXTURE_BASE = `file://${fileURLToPath( @@ -22,9 +22,9 @@ afterEach(async () => { await rm(dir, { recursive: true, force: true }); }); -async function seedConfig(overrides: Partial = {}) { - await writeMatterConfig(dir, { - ...DEFAULT_MATTER_CONFIG, +async function seedConfig(overrides: Partial = {}) { + await writeShadersConfig(dir, { + ...DEFAULT_SHADERS_CONFIG, registryUrl: FIXTURE_BASE, componentsDir: 'src/components/matter', ...overrides, @@ -349,7 +349,7 @@ describe('runAdd (multi-component + dedup + alias rewriting)', () => { await rm(inlineDir, { recursive: true, force: true }); }); - it('rewrites @matter-internal imports per matter.config.json aliases', async () => { + it('rewrites @matter-internal imports per shaders.config.json aliases', async () => { await seedConfig({ aliases: { '@matter-internal/': '@/lib/matter/' } }); await runAdd(['synthetic-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() }); const target = join(dir, 'src/components/matter/synthetic-component.tsx'); diff --git a/packages/matter-cli/src/commands/add.ts b/packages/shaders-cli/src/commands/add.ts similarity index 93% rename from packages/matter-cli/src/commands/add.ts rename to packages/shaders-cli/src/commands/add.ts index 5bf0f944..1a6a7824 100644 --- a/packages/matter-cli/src/commands/add.ts +++ b/packages/shaders-cli/src/commands/add.ts @@ -1,4 +1,4 @@ -// `matter-cli add`: the copy-paste flow the whole Tier 1 model is built on. +// `shaders-cli add`: the copy-paste flow the whole Tier 1 model is built on. // Fetch the registry index, resolve each requested slug to a source file, // download it, rewrite its import specifiers for the user's project (see // transforms/rewriteImports), write it into componentsDir, and finish by @@ -6,7 +6,7 @@ import { lstat, mkdir, readFile, realpath } from 'node:fs/promises'; import { dirname, resolve, sep } from 'node:path'; -import { readMatterConfig, resolveRegistryUrl } from '../config/matterConfig.js'; +import { readShadersConfig, resolveRegistryUrl } from '../config/shadersConfig.js'; import { writeFileNoFollow } from '../fs/writeFileNoFollow.js'; import { fetchComponentSource, @@ -38,9 +38,9 @@ export async function runAdd( throw new Error('add: at least one component name is required'); } - const matterConfig = await readMatterConfig(io.cwd); + const shadersConfig = await readShadersConfig(io.cwd); const ref = resolveRef(opts.ref, opts.cliVersion); - const registryUrl = resolveRegistryUrl(matterConfig, { registry: opts.registry, ref }); + const registryUrl = resolveRegistryUrl(shadersConfig, { registry: opts.registry, ref }); const registry = await fetchRegistry(registryUrl); const resolved = components.map((slug) => resolveComponent(slug, registry, registryUrl)); @@ -56,7 +56,7 @@ export async function runAdd( // `../` in an entry would otherwise read and write outside the project. The // separator on the prefix check matters — it keeps `matter` from matching a // sibling directory named `matter-elsewhere`. - const componentsRoot = resolve(io.cwd, matterConfig.componentsDir); + const componentsRoot = resolve(io.cwd, shadersConfig.componentsDir); const targets = sourceFiles.map((file) => { const targetPath = resolve(componentsRoot, file); @@ -74,7 +74,10 @@ export async function runAdd( const planned = await Promise.all( targets.map(async ({ file, targetPath }) => ({ targetPath, - contents: rewriteImports(await fetchComponentSource(registryUrl, file), matterConfig.aliases), + contents: rewriteImports( + await fetchComponentSource(registryUrl, file), + shadersConfig.aliases, + ), })), ); @@ -175,7 +178,7 @@ function resolveComponent( if (!entry) { throw new Error( - `Component "${slug}" not found in registry at ${registryUrl}. Run \`matter-cli list\` to see available components.`, + `Component "${slug}" not found in registry at ${registryUrl}. Run \`shaders-cli list\` to see available components.`, ); } diff --git a/packages/matter-cli/src/commands/init.test.ts b/packages/shaders-cli/src/commands/init.test.ts similarity index 59% rename from packages/matter-cli/src/commands/init.test.ts rename to packages/shaders-cli/src/commands/init.test.ts index 0ed0d012..c4d070c8 100644 --- a/packages/matter-cli/src/commands/init.test.ts +++ b/packages/shaders-cli/src/commands/init.test.ts @@ -16,27 +16,27 @@ afterEach(async () => { }); describe('runInit', () => { - it('writes matter.config.json with defaults', async () => { + it('writes shaders.config.json with defaults', async () => { await runInit({}, { cwd: dir, log: vi.fn() }); - const raw = await readFile(join(dir, 'matter.config.json'), 'utf-8'); - const matterConfig = JSON.parse(raw); + const raw = await readFile(join(dir, 'shaders.config.json'), 'utf-8'); + const shadersConfig = JSON.parse(raw); - expect(matterConfig.componentsDir).toBe('src/components/matter'); - expect(matterConfig.registryUrl).toContain('mattermix/shaders'); + expect(shadersConfig.componentsDir).toBe('src/components/matter'); + expect(shadersConfig.registryUrl).toContain('mattermix/shaders'); }); it('refuses to overwrite an existing config without --force', async () => { - await writeFile(join(dir, 'matter.config.json'), '{}', 'utf-8'); + await writeFile(join(dir, 'shaders.config.json'), '{}', 'utf-8'); await expect(runInit({}, { cwd: dir, log: vi.fn() })).rejects.toThrow(/already exists/); }); it('overwrites with --force', async () => { - await writeFile(join(dir, 'matter.config.json'), '{}', 'utf-8'); + await writeFile(join(dir, 'shaders.config.json'), '{}', 'utf-8'); await runInit({ force: true }, { cwd: dir, log: vi.fn() }); - const raw = await readFile(join(dir, 'matter.config.json'), 'utf-8'); - const matterConfig = JSON.parse(raw); + const raw = await readFile(join(dir, 'shaders.config.json'), 'utf-8'); + const shadersConfig = JSON.parse(raw); - expect(matterConfig.componentsDir).toBe('src/components/matter'); + expect(shadersConfig.componentsDir).toBe('src/components/matter'); }); it('logs a confirmation message after writing', async () => { @@ -45,6 +45,6 @@ describe('runInit', () => { await runInit({}, { cwd: dir, log }); const output = log.mock.calls.map((c) => c[0]).join('\n'); - expect(output).toMatch(/created matter\.config\.json/i); + expect(output).toMatch(/created shaders\.config\.json/i); }); }); diff --git a/packages/matter-cli/src/commands/init.ts b/packages/shaders-cli/src/commands/init.ts similarity index 63% rename from packages/matter-cli/src/commands/init.ts rename to packages/shaders-cli/src/commands/init.ts index f0c8f316..0b84da74 100644 --- a/packages/matter-cli/src/commands/init.ts +++ b/packages/shaders-cli/src/commands/init.ts @@ -1,12 +1,12 @@ -// `matter-cli init`: one-time setup — writes the starter matter.config.json +// `shaders-cli init`: one-time setup — writes the starter shaders.config.json // (components directory, registry URL template, import aliases) into the // user's project and points them at the fields worth editing. import { configExists, configPath, - DEFAULT_MATTER_CONFIG, - writeMatterConfig, -} from '../config/matterConfig.js'; + DEFAULT_SHADERS_CONFIG, + writeShadersConfig, +} from '../config/shadersConfig.js'; export interface InitOptions { force?: boolean; @@ -24,10 +24,10 @@ export async function runInit( const exists = await configExists(io.cwd); if (exists && opts.force !== true) { - throw new Error(`matter.config.json already exists in ${io.cwd}. Pass --force to overwrite.`); + throw new Error(`shaders.config.json already exists in ${io.cwd}. Pass --force to overwrite.`); } - await writeMatterConfig(io.cwd, DEFAULT_MATTER_CONFIG); - io.log(`Created matter.config.json at ${configPath(io.cwd)}`); + await writeShadersConfig(io.cwd, DEFAULT_SHADERS_CONFIG); + io.log(`Created shaders.config.json at ${configPath(io.cwd)}`); io.log( 'Edit `componentsDir` if your project uses a different layout, ' + 'and adjust `aliases` to match your tsconfig paths.', diff --git a/packages/matter-cli/src/commands/list.test.ts b/packages/shaders-cli/src/commands/list.test.ts similarity index 79% rename from packages/matter-cli/src/commands/list.test.ts rename to packages/shaders-cli/src/commands/list.test.ts index ee78fe5e..60558f5e 100644 --- a/packages/matter-cli/src/commands/list.test.ts +++ b/packages/shaders-cli/src/commands/list.test.ts @@ -29,12 +29,13 @@ describe('runList', () => { expect(output).toContain('tier 1'); }); - it('reads matter.config.json when --registry is not supplied', async () => { + it('reads shaders.config.json when --registry is not supplied', async () => { // Write a minimal config pointing at the fixture (with ${ref} placeholder). - const { writeMatterConfig, DEFAULT_MATTER_CONFIG } = await import('../config/matterConfig.js'); + const { writeShadersConfig, DEFAULT_SHADERS_CONFIG } = + await import('../config/shadersConfig.js'); - await writeMatterConfig(dir, { - ...DEFAULT_MATTER_CONFIG, + await writeShadersConfig(dir, { + ...DEFAULT_SHADERS_CONFIG, registryUrl: FIXTURE_BASE, // no ${ref} — stays literal }); const log = vi.fn(); @@ -45,12 +46,12 @@ describe('runList', () => { expect(output).toContain('synthetic-component'); }); - it('propagates errors when matter.config.json is malformed (does NOT silently fall back)', async () => { - // Pre-fix, runList caught everything and fell back to DEFAULT_MATTER_CONFIG + it('propagates errors when shaders.config.json is malformed (does NOT silently fall back)', async () => { + // Pre-fix, runList caught everything and fell back to DEFAULT_SHADERS_CONFIG // — silently masking malformed config. After the fix, the error propagates. const { writeFile } = await import('node:fs/promises'); - await writeFile(join(dir, 'matter.config.json'), '{ this is not valid json', 'utf-8'); + await writeFile(join(dir, 'shaders.config.json'), '{ this is not valid json', 'utf-8'); await expect(runList({ cliVersion: '0.0.0' }, { cwd: dir, log: vi.fn() })).rejects.toThrow( /not valid JSON/, ); diff --git a/packages/matter-cli/src/commands/list.ts b/packages/shaders-cli/src/commands/list.ts similarity index 74% rename from packages/matter-cli/src/commands/list.ts rename to packages/shaders-cli/src/commands/list.ts index b878bd89..df79c21c 100644 --- a/packages/matter-cli/src/commands/list.ts +++ b/packages/shaders-cli/src/commands/list.ts @@ -1,8 +1,12 @@ -// `matter-cli list`: prints the registry's component catalog (slug, +// `shaders-cli list`: prints the registry's component catalog (slug, // description, tier). Unlike the other commands it works without a -// matter.config.json — it falls back to the default registry URL so users +// shaders.config.json — it falls back to the default registry URL so users // can browse before running init. -import { configExists, DEFAULT_MATTER_CONFIG, readMatterConfig } from '../config/matterConfig.js'; +import { + configExists, + DEFAULT_SHADERS_CONFIG, + readShadersConfig, +} from '../config/shadersConfig.js'; import { fetchRegistry } from '../registry/fetchRegistry.js'; import { resolveRef } from '../registry/ref.js'; @@ -26,11 +30,11 @@ export async function runList( if (opts.registry !== undefined && opts.registry !== '') { baseUrl = opts.registry; } else if (await configExists(io.cwd)) { - const matterConfig = await readMatterConfig(io.cwd); + const shadersConfig = await readShadersConfig(io.cwd); - baseUrl = matterConfig.registryUrl; + baseUrl = shadersConfig.registryUrl; } else { - baseUrl = DEFAULT_MATTER_CONFIG.registryUrl; + baseUrl = DEFAULT_SHADERS_CONFIG.registryUrl; } const ref = resolveRef(opts.ref, opts.cliVersion); diff --git a/packages/matter-cli/src/commands/poster.test.ts b/packages/shaders-cli/src/commands/poster.test.ts similarity index 100% rename from packages/matter-cli/src/commands/poster.test.ts rename to packages/shaders-cli/src/commands/poster.test.ts diff --git a/packages/matter-cli/src/commands/poster.ts b/packages/shaders-cli/src/commands/poster.ts similarity index 98% rename from packages/matter-cli/src/commands/poster.ts rename to packages/shaders-cli/src/commands/poster.ts index 7d18f474..bf9bf624 100644 --- a/packages/matter-cli/src/commands/poster.ts +++ b/packages/shaders-cli/src/commands/poster.ts @@ -1,4 +1,4 @@ -// `matter-cli poster`: renders a user's shader component to a static image +// `shaders-cli poster`: renders a user's shader component to a static image // for use as a stand-in. This file validates the flags and // runs the four-stage pipeline, each stage its own module: // 1. poster/bundle.ts — esbuild the harness + user file, in memory diff --git a/packages/matter-cli/src/commands/update.test.ts b/packages/shaders-cli/src/commands/update.test.ts similarity index 90% rename from packages/matter-cli/src/commands/update.test.ts rename to packages/shaders-cli/src/commands/update.test.ts index 3fa2f1aa..6f3b9e7d 100644 --- a/packages/matter-cli/src/commands/update.test.ts +++ b/packages/shaders-cli/src/commands/update.test.ts @@ -4,7 +4,7 @@ import { join } from 'node:path'; import { fileURLToPath } from 'node:url'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { DEFAULT_MATTER_CONFIG, writeMatterConfig } from '../config/matterConfig.js'; +import { DEFAULT_SHADERS_CONFIG, writeShadersConfig } from '../config/shadersConfig.js'; import { runUpdate } from './update.js'; const FIXTURE_BASE = `file://${fileURLToPath(new URL('../test-fixtures/registry/', import.meta.url))}`; @@ -20,8 +20,8 @@ afterEach(async () => { }); async function seedConfigAndComponent() { - await writeMatterConfig(dir, { - ...DEFAULT_MATTER_CONFIG, + await writeShadersConfig(dir, { + ...DEFAULT_SHADERS_CONFIG, registryUrl: FIXTURE_BASE, }); await mkdir(join(dir, 'src/components/matter'), { recursive: true }); @@ -61,8 +61,8 @@ describe('runUpdate', () => { }); it('errors clearly when componentsDir is empty and no names are given', async () => { - await writeMatterConfig(dir, { - ...DEFAULT_MATTER_CONFIG, + await writeShadersConfig(dir, { + ...DEFAULT_SHADERS_CONFIG, registryUrl: FIXTURE_BASE, }); await mkdir(join(dir, 'src/components/matter'), { recursive: true }); @@ -72,8 +72,8 @@ describe('runUpdate', () => { }); it('errors clearly when a named component is not present in componentsDir', async () => { - await writeMatterConfig(dir, { - ...DEFAULT_MATTER_CONFIG, + await writeShadersConfig(dir, { + ...DEFAULT_SHADERS_CONFIG, registryUrl: FIXTURE_BASE, }); await mkdir(join(dir, 'src/components/matter'), { recursive: true }); diff --git a/packages/matter-cli/src/commands/update.ts b/packages/shaders-cli/src/commands/update.ts similarity index 87% rename from packages/matter-cli/src/commands/update.ts rename to packages/shaders-cli/src/commands/update.ts index 94a2384e..f676470c 100644 --- a/packages/matter-cli/src/commands/update.ts +++ b/packages/shaders-cli/src/commands/update.ts @@ -1,4 +1,4 @@ -// `matter-cli update`: re-fetch components that already live in +// `shaders-cli update`: re-fetch components that already live in // componentsDir (all of them when no names are given). After figuring out // which local files correspond to registry entries, it delegates the actual // fetching and writing to `add` — update IS add, restricted to components @@ -7,7 +7,7 @@ import type { Dirent } from 'node:fs'; import { readdir } from 'node:fs/promises'; import { basename, extname, join } from 'node:path'; -import { readMatterConfig, resolveRegistryUrl } from '../config/matterConfig.js'; +import { readShadersConfig, resolveRegistryUrl } from '../config/shadersConfig.js'; import { fetchRegistry, type Registry } from '../registry/fetchRegistry.js'; import { resolveRef } from '../registry/ref.js'; import { runAdd } from './add.js'; @@ -29,11 +29,11 @@ export async function runUpdate( opts: UpdateOptions, io: UpdateIO = { cwd: process.cwd(), log: console.log }, ): Promise { - const matterConfig = await readMatterConfig(io.cwd); + const shadersConfig = await readShadersConfig(io.cwd); const ref = resolveRef(opts.ref, opts.cliVersion); - const registryUrl = resolveRegistryUrl(matterConfig, { registry: opts.registry, ref }); + const registryUrl = resolveRegistryUrl(shadersConfig, { registry: opts.registry, ref }); - const componentsDir = join(io.cwd, matterConfig.componentsDir); + const componentsDir = join(io.cwd, shadersConfig.componentsDir); const localEntries = await safeReaddir(componentsDir); // Recognize both layouts: top-level `.tsx` AND subdir `/.tsx` // (the latter is how multi-file components like aurora and linear-gradient live). @@ -53,7 +53,7 @@ export async function runUpdate( if (components.length === 0) { if (localSlugs.length === 0) { throw new Error( - `No components found in ${componentsDir}. Run \`matter-cli add \` first.`, + `No components found in ${componentsDir}. Run \`shaders-cli add \` first.`, ); } toUpdate = localSlugs.filter((slug) => slugIsInRegistry(slug, registry)); @@ -69,7 +69,7 @@ export async function runUpdate( if (!present) { throw new Error( - `Component "${slug}" is not present in ${componentsDir}. Use \`matter-cli add ${slug}\` instead.`, + `Component "${slug}" is not present in ${componentsDir}. Use \`shaders-cli add ${slug}\` instead.`, ); } } diff --git a/packages/shaders-cli/src/config/shadersConfig.test.ts b/packages/shaders-cli/src/config/shadersConfig.test.ts new file mode 100644 index 00000000..11879c2e --- /dev/null +++ b/packages/shaders-cli/src/config/shadersConfig.test.ts @@ -0,0 +1,71 @@ +import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'; +import { tmpdir } from 'node:os'; +import { join } from 'node:path'; +import { afterEach, beforeEach, describe, expect, it } from 'vitest'; + +import { + DEFAULT_SHADERS_CONFIG, + readShadersConfig, + type ShadersConfig, + writeShadersConfig, +} from './shadersConfig.js'; + +describe('DEFAULT_SHADERS_CONFIG.registryUrl', () => { + it('points at the mattermix/shaders org (NOT lovo/matter — that is a 404)', () => { + expect(DEFAULT_SHADERS_CONFIG.registryUrl).toContain('/mattermix/shaders/'); + expect(DEFAULT_SHADERS_CONFIG.registryUrl).not.toMatch(/\/lovo\/matter\//); + }); + + it('contains the ${ref} placeholder for resolveRef substitution', () => { + expect(DEFAULT_SHADERS_CONFIG.registryUrl).toContain('${ref}'); + }); + + it('targets the registry/ subdirectory', () => { + expect(DEFAULT_SHADERS_CONFIG.registryUrl).toMatch(/\/registry$|\/registry\/$/); + }); +}); + +let dir: string; + +beforeEach(async () => { + dir = await mkdtemp(join(tmpdir(), 'matter-config-test-')); +}); + +afterEach(async () => { + await rm(dir, { recursive: true, force: true }); +}); + +describe('shadersConfig', () => { + it('writes the default config when none exists', async () => { + await writeShadersConfig(dir, DEFAULT_SHADERS_CONFIG); + const raw = await readFile(join(dir, 'shaders.config.json'), 'utf-8'); + + expect(JSON.parse(raw)).toEqual(DEFAULT_SHADERS_CONFIG); + }); + + it('reads back what it wrote', async () => { + const shadersConfig: ShadersConfig = { + ...DEFAULT_SHADERS_CONFIG, + componentsDir: 'app/matter', + }; + + await writeShadersConfig(dir, shadersConfig); + const read = await readShadersConfig(dir); + + expect(read).toEqual(shadersConfig); + }); + + it('throws a clear error when shaders.config.json is missing', async () => { + await expect(readShadersConfig(dir)).rejects.toThrow(/shaders\.config\.json not found/); + }); + + it('throws a clear error when shaders.config.json is malformed JSON', async () => { + await writeFile(join(dir, 'shaders.config.json'), '{ bad json }', 'utf-8'); + await expect(readShadersConfig(dir)).rejects.toThrow(/not valid JSON/); + }); + + it('throws when required fields are missing', async () => { + await writeFile(join(dir, 'shaders.config.json'), JSON.stringify({}), 'utf-8'); + await expect(readShadersConfig(dir)).rejects.toThrow(/componentsDir/); + }); +}); diff --git a/packages/matter-cli/src/config/matterConfig.ts b/packages/shaders-cli/src/config/shadersConfig.ts similarity index 70% rename from packages/matter-cli/src/config/matterConfig.ts rename to packages/shaders-cli/src/config/shadersConfig.ts index a31fe4e8..16ace5de 100644 --- a/packages/matter-cli/src/config/matterConfig.ts +++ b/packages/shaders-cli/src/config/shadersConfig.ts @@ -1,4 +1,4 @@ -// matter.config.json: the one file the CLI reads from a user's project. +// shaders.config.json: the one file the CLI reads from a user's project. // Where copied components land (componentsDir), where they come from // (registryUrl — a template whose ${ref} slot is filled with a git tag, // branch, or commit at fetch time), and how import specifiers get rewritten @@ -7,21 +7,21 @@ import { access, readFile, writeFile } from 'node:fs/promises'; import { join } from 'node:path'; -import { validateMatterConfig } from './validate.js'; +import { validateShadersConfig } from './validate.js'; -export interface MatterConfig { +export interface ShadersConfig { componentsDir: string; registryUrl: string; aliases: Record; } -export const DEFAULT_MATTER_CONFIG: MatterConfig = { +export const DEFAULT_SHADERS_CONFIG: ShadersConfig = { componentsDir: 'src/components/matter', registryUrl: 'https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry', aliases: { '@/': 'src/' }, }; -const CONFIG_FILENAME = 'matter.config.json'; +const CONFIG_FILENAME = 'shaders.config.json'; export function configPath(projectRoot: string): string { return join(projectRoot, CONFIG_FILENAME); @@ -37,7 +37,7 @@ export async function configExists(projectRoot: string): Promise { } } -export async function readMatterConfig(projectRoot: string): Promise { +export async function readShadersConfig(projectRoot: string): Promise { const path = configPath(projectRoot); let raw: string; @@ -46,7 +46,7 @@ export async function readMatterConfig(projectRoot: string): Promise { const path = configPath(projectRoot); - const json = `${JSON.stringify(matterConfig, null, 2)}\n`; + const json = `${JSON.stringify(shadersConfig, null, 2)}\n`; await writeFile(path, json, 'utf-8'); } diff --git a/packages/matter-cli/src/config/validate.ts b/packages/shaders-cli/src/config/validate.ts similarity index 83% rename from packages/matter-cli/src/config/validate.ts rename to packages/shaders-cli/src/config/validate.ts index 9b952063..c31afac4 100644 --- a/packages/matter-cli/src/config/validate.ts +++ b/packages/shaders-cli/src/config/validate.ts @@ -1,12 +1,12 @@ -// Field-by-field validation of a parsed matter.config.json, with error +// Field-by-field validation of a parsed shaders.config.json, with error // messages prefixed by the file path so a bad config points at itself. -import type { MatterConfig } from './matterConfig.js'; +import type { ShadersConfig } from './shadersConfig.js'; function isRecord(value: unknown): value is Record { return typeof value === 'object' && value !== null; } -export function validateMatterConfig(parsed: unknown, path: string): MatterConfig { +export function validateShadersConfig(parsed: unknown, path: string): ShadersConfig { if (!isRecord(parsed)) { throw new Error(`${path}: expected an object`); } diff --git a/packages/matter-cli/src/fs/writeFileNoFollow.test.ts b/packages/shaders-cli/src/fs/writeFileNoFollow.test.ts similarity index 100% rename from packages/matter-cli/src/fs/writeFileNoFollow.test.ts rename to packages/shaders-cli/src/fs/writeFileNoFollow.test.ts diff --git a/packages/matter-cli/src/fs/writeFileNoFollow.ts b/packages/shaders-cli/src/fs/writeFileNoFollow.ts similarity index 100% rename from packages/matter-cli/src/fs/writeFileNoFollow.ts rename to packages/shaders-cli/src/fs/writeFileNoFollow.ts diff --git a/packages/matter-cli/src/harness/frameReady.ts b/packages/shaders-cli/src/harness/frameReady.ts similarity index 100% rename from packages/matter-cli/src/harness/frameReady.ts rename to packages/shaders-cli/src/harness/frameReady.ts diff --git a/packages/matter-cli/src/harness/index.html b/packages/shaders-cli/src/harness/index.html similarity index 100% rename from packages/matter-cli/src/harness/index.html rename to packages/shaders-cli/src/harness/index.html diff --git a/packages/matter-cli/src/harness/index.tsx b/packages/shaders-cli/src/harness/index.tsx similarity index 100% rename from packages/matter-cli/src/harness/index.tsx rename to packages/shaders-cli/src/harness/index.tsx diff --git a/packages/matter-cli/src/harness/tsconfig.json b/packages/shaders-cli/src/harness/tsconfig.json similarity index 100% rename from packages/matter-cli/src/harness/tsconfig.json rename to packages/shaders-cli/src/harness/tsconfig.json diff --git a/packages/matter-cli/src/index.ts b/packages/shaders-cli/src/index.ts similarity index 91% rename from packages/matter-cli/src/index.ts rename to packages/shaders-cli/src/index.ts index f908e9b1..09175bda 100644 --- a/packages/matter-cli/src/index.ts +++ b/packages/shaders-cli/src/index.ts @@ -1,5 +1,5 @@ // The CLI's entry point: just the command table. Each action lazy-imports -// its implementation so `matter-cli --help` stays instant and poster's heavy +// its implementation so `shaders-cli --help` stays instant and poster's heavy // dependencies (esbuild, the user's playwright) load only when actually // used. Real logic lives in ./commands/*; each run* function takes an // injectable IO (cwd + log) so tests can run commands against a temp @@ -19,14 +19,14 @@ function fail(caughtError: unknown): never { const program = new Command(); program - .name('matter-cli') + .name('shaders-cli') .description('CLI for Matter — copy-paste components from the registry into your project') .version(__VERSION__); program .command('init') - .description('one-time project setup — writes matter.config.json') - .option('--force', 'overwrite an existing matter.config.json') + .description('one-time project setup — writes shaders.config.json') + .option('--force', 'overwrite an existing shaders.config.json') .action(async (opts: { force?: boolean }) => { try { const { runInit } = await import('./commands/init.js'); @@ -40,7 +40,7 @@ program program .command('list') .description('show available components in the registry') - .option('--registry ', 'override the registryUrl from matter.config.json') + .option('--registry ', 'override the registryUrl from shaders.config.json') .option('--reference ', 'tag, branch, or commit (defaults to the CLI version)') .action(async (opts: { registry?: string; reference?: string }) => { try { @@ -56,7 +56,7 @@ program .command('add') .description('copy one or more components from the registry into componentsDir') .argument('', 'component slugs (e.g. "linear-gradient")') - .option('--registry ', 'override the registryUrl from matter.config.json') + .option('--registry ', 'override the registryUrl from shaders.config.json') .option('--reference ', 'tag, branch, or commit (defaults to the CLI version)') .option('--force', 'overwrite existing files in componentsDir') .action( @@ -83,7 +83,7 @@ program .command('update') .description('re-fetch a previously-added component (or all, if no name given)') .argument('[components...]', 'component slugs; omit to update every component in componentsDir') - .option('--registry ', 'override the registryUrl from matter.config.json') + .option('--registry ', 'override the registryUrl from shaders.config.json') .option('--reference ', 'tag, branch, or commit (defaults to the CLI version)') .option('--force', 'overwrite files even if they have local edits') .action( diff --git a/packages/matter-cli/src/poster/bundle.test.ts b/packages/shaders-cli/src/poster/bundle.test.ts similarity index 96% rename from packages/matter-cli/src/poster/bundle.test.ts rename to packages/shaders-cli/src/poster/bundle.test.ts index 1f7cff6e..c2439438 100644 --- a/packages/matter-cli/src/poster/bundle.test.ts +++ b/packages/shaders-cli/src/poster/bundle.test.ts @@ -12,7 +12,7 @@ describe('bundlePoster', () => { const result = await bundlePoster({ from: `${FIXTURE_DIR}trivial.tsx`, exportName: 'default', - projectRoot: new URL('../../', import.meta.url).pathname, // matter-cli's own root, has react installed + projectRoot: new URL('../../', import.meta.url).pathname, // shaders-cli's own root, has react installed }); expect(result.js).toContain('hello'); diff --git a/packages/matter-cli/src/poster/bundle.ts b/packages/shaders-cli/src/poster/bundle.ts similarity index 100% rename from packages/matter-cli/src/poster/bundle.ts rename to packages/shaders-cli/src/poster/bundle.ts diff --git a/packages/matter-cli/src/poster/e2e.test.ts b/packages/shaders-cli/src/poster/e2e.test.ts similarity index 100% rename from packages/matter-cli/src/poster/e2e.test.ts rename to packages/shaders-cli/src/poster/e2e.test.ts diff --git a/packages/matter-cli/src/poster/playwright.test.ts b/packages/shaders-cli/src/poster/playwright.test.ts similarity index 91% rename from packages/matter-cli/src/poster/playwright.test.ts rename to packages/shaders-cli/src/poster/playwright.test.ts index 1ede1a25..37ac6db7 100644 --- a/packages/matter-cli/src/poster/playwright.test.ts +++ b/packages/shaders-cli/src/poster/playwright.test.ts @@ -4,7 +4,7 @@ import { resolvePlaywright } from './playwright.js'; describe('resolvePlaywright', () => { it('returns the playwright module if installed in the project', async () => { - // matter-cli itself has playwright as a devDep, so resolution from its own + // shaders-cli itself has playwright as a devDep, so resolution from its own // project root must succeed. const cliRoot = new URL('../../', import.meta.url).pathname; const pw = await resolvePlaywright(cliRoot); diff --git a/packages/matter-cli/src/poster/playwright.ts b/packages/shaders-cli/src/poster/playwright.ts similarity index 100% rename from packages/matter-cli/src/poster/playwright.ts rename to packages/shaders-cli/src/poster/playwright.ts diff --git a/packages/matter-cli/src/poster/projectRoot.test.ts b/packages/shaders-cli/src/poster/projectRoot.test.ts similarity index 100% rename from packages/matter-cli/src/poster/projectRoot.test.ts rename to packages/shaders-cli/src/poster/projectRoot.test.ts diff --git a/packages/matter-cli/src/poster/projectRoot.ts b/packages/shaders-cli/src/poster/projectRoot.ts similarity index 100% rename from packages/matter-cli/src/poster/projectRoot.ts rename to packages/shaders-cli/src/poster/projectRoot.ts diff --git a/packages/matter-cli/src/poster/server.test.ts b/packages/shaders-cli/src/poster/server.test.ts similarity index 100% rename from packages/matter-cli/src/poster/server.test.ts rename to packages/shaders-cli/src/poster/server.test.ts diff --git a/packages/matter-cli/src/poster/server.ts b/packages/shaders-cli/src/poster/server.ts similarity index 100% rename from packages/matter-cli/src/poster/server.ts rename to packages/shaders-cli/src/poster/server.ts diff --git a/packages/matter-cli/src/registry/fetchRegistry.test.ts b/packages/shaders-cli/src/registry/fetchRegistry.test.ts similarity index 100% rename from packages/matter-cli/src/registry/fetchRegistry.test.ts rename to packages/shaders-cli/src/registry/fetchRegistry.test.ts diff --git a/packages/matter-cli/src/registry/fetchRegistry.ts b/packages/shaders-cli/src/registry/fetchRegistry.ts similarity index 100% rename from packages/matter-cli/src/registry/fetchRegistry.ts rename to packages/shaders-cli/src/registry/fetchRegistry.ts diff --git a/packages/matter-cli/src/registry/readUrl.test.ts b/packages/shaders-cli/src/registry/readUrl.test.ts similarity index 100% rename from packages/matter-cli/src/registry/readUrl.test.ts rename to packages/shaders-cli/src/registry/readUrl.test.ts diff --git a/packages/matter-cli/src/registry/readUrl.ts b/packages/shaders-cli/src/registry/readUrl.ts similarity index 100% rename from packages/matter-cli/src/registry/readUrl.ts rename to packages/shaders-cli/src/registry/readUrl.ts diff --git a/packages/matter-cli/src/registry/ref.test.ts b/packages/shaders-cli/src/registry/ref.test.ts similarity index 100% rename from packages/matter-cli/src/registry/ref.test.ts rename to packages/shaders-cli/src/registry/ref.test.ts diff --git a/packages/matter-cli/src/registry/ref.ts b/packages/shaders-cli/src/registry/ref.ts similarity index 100% rename from packages/matter-cli/src/registry/ref.ts rename to packages/shaders-cli/src/registry/ref.ts diff --git a/packages/matter-cli/src/registry/registryManifest.test.ts b/packages/shaders-cli/src/registry/registryManifest.test.ts similarity index 100% rename from packages/matter-cli/src/registry/registryManifest.test.ts rename to packages/shaders-cli/src/registry/registryManifest.test.ts diff --git a/packages/matter-cli/src/test-fixtures/README.md b/packages/shaders-cli/src/test-fixtures/README.md similarity index 100% rename from packages/matter-cli/src/test-fixtures/README.md rename to packages/shaders-cli/src/test-fixtures/README.md diff --git a/packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx b/packages/shaders-cli/src/test-fixtures/posters/aurora-with-time.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/posters/aurora-with-time.tsx rename to packages/shaders-cli/src/test-fixtures/posters/aurora-with-time.tsx diff --git a/packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx b/packages/shaders-cli/src/test-fixtures/posters/gradient-plus-grain.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/posters/gradient-plus-grain.tsx rename to packages/shaders-cli/src/test-fixtures/posters/gradient-plus-grain.tsx diff --git a/packages/matter-cli/src/test-fixtures/posters/named-export.tsx b/packages/shaders-cli/src/test-fixtures/posters/named-export.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/posters/named-export.tsx rename to packages/shaders-cli/src/test-fixtures/posters/named-export.tsx diff --git a/packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx b/packages/shaders-cli/src/test-fixtures/posters/single-linear-gradient.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/posters/single-linear-gradient.tsx rename to packages/shaders-cli/src/test-fixtures/posters/single-linear-gradient.tsx diff --git a/packages/matter-cli/src/test-fixtures/posters/trivial.tsx b/packages/shaders-cli/src/test-fixtures/posters/trivial.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/posters/trivial.tsx rename to packages/shaders-cli/src/test-fixtures/posters/trivial.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/nested-component/nested-component.tsx b/packages/shaders-cli/src/test-fixtures/registry/nested-component/nested-component.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/nested-component/nested-component.tsx rename to packages/shaders-cli/src/test-fixtures/registry/nested-component/nested-component.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/nested-component/shader.tsx b/packages/shaders-cli/src/test-fixtures/registry/nested-component/shader.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/nested-component/shader.tsx rename to packages/shaders-cli/src/test-fixtures/registry/nested-component/shader.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/registry.json b/packages/shaders-cli/src/test-fixtures/registry/registry.json similarity index 80% rename from packages/matter-cli/src/test-fixtures/registry/registry.json rename to packages/shaders-cli/src/test-fixtures/registry/registry.json index faf7a69b..53a819bb 100644 --- a/packages/matter-cli/src/test-fixtures/registry/registry.json +++ b/packages/shaders-cli/src/test-fixtures/registry/registry.json @@ -3,7 +3,7 @@ "components": { "synthetic-component": { "file": "synthetic-component.tsx", - "description": "A tiny synthetic component used by matter-cli tests. Not shipped.", + "description": "A tiny synthetic component used by shaders-cli tests. Not shipped.", "dependencies": ["react"], "uses_primitives": [], "tier": 1 @@ -11,7 +11,7 @@ "nested-component": { "file": "nested-component/nested-component.tsx", "files": ["nested-component/shader.tsx", "utils/color.ts"], - "description": "A multi-file synthetic component used by matter-cli tests. Not shipped.", + "description": "A multi-file synthetic component used by shaders-cli tests. Not shipped.", "dependencies": ["react"], "uses_primitives": [], "tier": 1 diff --git a/packages/matter-cli/src/test-fixtures/registry/sibling-component/shader.tsx b/packages/shaders-cli/src/test-fixtures/registry/sibling-component/shader.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/sibling-component/shader.tsx rename to packages/shaders-cli/src/test-fixtures/registry/sibling-component/shader.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/sibling-component/sibling-component.tsx b/packages/shaders-cli/src/test-fixtures/registry/sibling-component/sibling-component.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/sibling-component/sibling-component.tsx rename to packages/shaders-cli/src/test-fixtures/registry/sibling-component/sibling-component.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/synthetic-component.tsx b/packages/shaders-cli/src/test-fixtures/registry/synthetic-component.tsx similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/synthetic-component.tsx rename to packages/shaders-cli/src/test-fixtures/registry/synthetic-component.tsx diff --git a/packages/matter-cli/src/test-fixtures/registry/utils/color.ts b/packages/shaders-cli/src/test-fixtures/registry/utils/color.ts similarity index 100% rename from packages/matter-cli/src/test-fixtures/registry/utils/color.ts rename to packages/shaders-cli/src/test-fixtures/registry/utils/color.ts diff --git a/packages/matter-cli/src/transforms/rewriteImports.test.ts b/packages/shaders-cli/src/transforms/rewriteImports.test.ts similarity index 100% rename from packages/matter-cli/src/transforms/rewriteImports.test.ts rename to packages/shaders-cli/src/transforms/rewriteImports.test.ts diff --git a/packages/matter-cli/src/transforms/rewriteImports.ts b/packages/shaders-cli/src/transforms/rewriteImports.ts similarity index 93% rename from packages/matter-cli/src/transforms/rewriteImports.ts rename to packages/shaders-cli/src/transforms/rewriteImports.ts index de6a632b..ba6408f3 100644 --- a/packages/matter-cli/src/transforms/rewriteImports.ts +++ b/packages/shaders-cli/src/transforms/rewriteImports.ts @@ -1,6 +1,6 @@ // Copied source must resolve imports inside the USER's project, not the // Matter monorepo. This transform maps import specifiers through the -// aliases in matter.config.json: every specifier starting with an alias key +// aliases in shaders.config.json: every specifier starting with an alias key // gets that prefix swapped for the configured value, in both static // (`from '...'`) and dynamic (`import('...')`) forms. Relative imports and // npm package names match no alias key and pass through untouched. diff --git a/packages/matter-cli/tsconfig.json b/packages/shaders-cli/tsconfig.json similarity index 100% rename from packages/matter-cli/tsconfig.json rename to packages/shaders-cli/tsconfig.json diff --git a/packages/matter-cli/tsconfig.tooling.json b/packages/shaders-cli/tsconfig.tooling.json similarity index 100% rename from packages/matter-cli/tsconfig.tooling.json rename to packages/shaders-cli/tsconfig.tooling.json diff --git a/packages/matter-cli/tsup.config.ts b/packages/shaders-cli/tsup.config.ts similarity index 100% rename from packages/matter-cli/tsup.config.ts rename to packages/shaders-cli/tsup.config.ts diff --git a/packages/matter-cli/vitest.config.ts b/packages/shaders-cli/vitest.config.ts similarity index 100% rename from packages/matter-cli/vitest.config.ts rename to packages/shaders-cli/vitest.config.ts diff --git a/packages/matter-react/CHANGELOG.md b/packages/shaders-react/CHANGELOG.md similarity index 98% rename from packages/matter-react/CHANGELOG.md rename to packages/shaders-react/CHANGELOG.md index 83ca90d8..de9fdd7e 100644 --- a/packages/matter-react/CHANGELOG.md +++ b/packages/shaders-react/CHANGELOG.md @@ -142,6 +142,6 @@ **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. - **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. diff --git a/packages/matter-react/LICENSE b/packages/shaders-react/LICENSE similarity index 100% rename from packages/matter-react/LICENSE rename to packages/shaders-react/LICENSE diff --git a/packages/matter-react/README.md b/packages/shaders-react/README.md similarity index 97% rename from packages/matter-react/README.md rename to packages/shaders-react/README.md index 99f4af16..346177ad 100644 --- a/packages/matter-react/README.md +++ b/packages/shaders-react/README.md @@ -42,8 +42,8 @@ Polished drop-in components (``, ``, ``, ` { expect(() => unmount()).not.toThrow(); }); - it('fires onError with a renderer-init MatterError when init fails', async () => { + it('fires onError with a renderer-init ShadersError when init fails', async () => { vi.spyOn(console, 'error').mockImplementation(() => {}); const cause = new Error('no gpu backend'); @@ -78,9 +78,9 @@ describe('ShaderScene', () => { render(); await waitFor(() => expect(onError).toHaveBeenCalledTimes(1)); - const error = onError.mock.calls[0]?.[0] as MatterError; + const error = onError.mock.calls[0]?.[0] as ShadersError; - expect(error).toBeInstanceOf(MatterError); + expect(error).toBeInstanceOf(ShadersError); expect(error.code).toBe('renderer-init'); expect(error.cause).toBe(cause); }); diff --git a/packages/matter-react/src/components/shader-scene/shader-scene.tsx b/packages/shaders-react/src/components/shader-scene/shader-scene.tsx similarity index 97% rename from packages/matter-react/src/components/shader-scene/shader-scene.tsx rename to packages/shaders-react/src/components/shader-scene/shader-scene.tsx index cb38861b..147b5921 100644 --- a/packages/matter-react/src/components/shader-scene/shader-scene.tsx +++ b/packages/shaders-react/src/components/shader-scene/shader-scene.tsx @@ -29,7 +29,7 @@ import { type ShaderContextValue, type UvTransform, } from '../../context/shader-context.js'; -import { MatterError } from '../../errors/matter-error.js'; +import { ShadersError } from '../../errors/shaders-error.js'; import { type GamutPreference, useDisplayGamut, @@ -45,8 +45,8 @@ export interface ShaderSceneProps { gamut?: GamutPreference; /** Fires once, on the frame after the shader's first content frame is on screen. */ onFirstPaint?: () => void; - /** Fires once with a typed MatterError when renderer init fails. */ - onError?: (error: MatterError) => void; + /** Fires once with a typed ShadersError when renderer init fails. */ + onError?: (error: ShadersError) => void; } const defaultStyle: CSSProperties = { @@ -287,7 +287,7 @@ export function ShaderScene({ } catch (caughtError) { if (cancelled) return; const message = caughtError instanceof Error ? caughtError.message : String(caughtError); - const matterError = new MatterError('renderer-init', message, { cause: caughtError }); + const matterError = new ShadersError('renderer-init', message, { cause: caughtError }); if (process.env.NODE_ENV !== 'production') { console.error('[ShaderScene] renderer init failed:', matterError); diff --git a/packages/matter-react/src/context/shader-context.ts b/packages/shaders-react/src/context/shader-context.ts similarity index 100% rename from packages/matter-react/src/context/shader-context.ts rename to packages/shaders-react/src/context/shader-context.ts diff --git a/packages/shaders-react/src/errors/index.ts b/packages/shaders-react/src/errors/index.ts new file mode 100644 index 00000000..ffe54876 --- /dev/null +++ b/packages/shaders-react/src/errors/index.ts @@ -0,0 +1,2 @@ +export { ShadersError } from './shaders-error.js'; +export type { ShadersErrorCode } from './shaders-error.js'; diff --git a/packages/matter-react/src/errors/matter-error.test.ts b/packages/shaders-react/src/errors/shaders-error.test.ts similarity index 55% rename from packages/matter-react/src/errors/matter-error.test.ts rename to packages/shaders-react/src/errors/shaders-error.test.ts index 01d0ec27..2b853cf7 100644 --- a/packages/matter-react/src/errors/matter-error.test.ts +++ b/packages/shaders-react/src/errors/shaders-error.test.ts @@ -1,15 +1,15 @@ import { describe, expect, it } from 'vitest'; -import { MatterError } from './matter-error.js'; +import { ShadersError } from './shaders-error.js'; -describe('MatterError', () => { +describe('ShadersError', () => { it('carries code, message, and cause', () => { const cause = new Error('boom'); - const error = new MatterError('renderer-init', 'init failed', { cause }); + const error = new ShadersError('renderer-init', 'init failed', { cause }); expect(error).toBeInstanceOf(Error); - expect(error).toBeInstanceOf(MatterError); - expect(error.name).toBe('MatterError'); + expect(error).toBeInstanceOf(ShadersError); + expect(error.name).toBe('ShadersError'); expect(error.code).toBe('renderer-init'); expect(error.message).toBe('init failed'); expect(error.cause).toBe(cause); diff --git a/packages/shaders-react/src/errors/shaders-error.ts b/packages/shaders-react/src/errors/shaders-error.ts new file mode 100644 index 00000000..c70e8abc --- /dev/null +++ b/packages/shaders-react/src/errors/shaders-error.ts @@ -0,0 +1,19 @@ +/** + * Discriminator for a ShadersError. Open union — new codes may be added + * without a breaking change. Only 'renderer-init' is emitted today. + */ +export type ShadersErrorCode = 'renderer-init'; + +/** + * A typed error surfaced by @mattermix/shaders-react. The original thrown value is + * always available on `cause`. + */ +export class ShadersError extends Error { + readonly code: ShadersErrorCode; + + constructor(code: ShadersErrorCode, message: string, options?: { cause?: unknown }) { + super(message, options); + this.name = 'ShadersError'; + this.code = code; + } +} diff --git a/packages/matter-react/src/gamut.test.ts b/packages/shaders-react/src/gamut.test.ts similarity index 100% rename from packages/matter-react/src/gamut.test.ts rename to packages/shaders-react/src/gamut.test.ts diff --git a/packages/matter-react/src/gamut.ts b/packages/shaders-react/src/gamut.ts similarity index 100% rename from packages/matter-react/src/gamut.ts rename to packages/shaders-react/src/gamut.ts diff --git a/packages/matter-react/src/hooks/animatable-signal/animatable-signal.ts b/packages/shaders-react/src/hooks/animatable-signal/animatable-signal.ts similarity index 100% rename from packages/matter-react/src/hooks/animatable-signal/animatable-signal.ts rename to packages/shaders-react/src/hooks/animatable-signal/animatable-signal.ts diff --git a/packages/matter-react/src/hooks/index.ts b/packages/shaders-react/src/hooks/index.ts similarity index 100% rename from packages/matter-react/src/hooks/index.ts rename to packages/shaders-react/src/hooks/index.ts diff --git a/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx b/packages/shaders-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx rename to packages/shaders-react/src/hooks/use-animatable-point/use-animatable-point.test.tsx diff --git a/packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.ts b/packages/shaders-react/src/hooks/use-animatable-point/use-animatable-point.ts similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-point/use-animatable-point.ts rename to packages/shaders-react/src/hooks/use-animatable-point/use-animatable-point.ts diff --git a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx b/packages/shaders-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx rename to packages/shaders-react/src/hooks/use-animatable-speed/use-animatable-speed.test.tsx diff --git a/packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts b/packages/shaders-react/src/hooks/use-animatable-speed/use-animatable-speed.ts similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-speed/use-animatable-speed.ts rename to packages/shaders-react/src/hooks/use-animatable-speed/use-animatable-speed.ts diff --git a/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx b/packages/shaders-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx rename to packages/shaders-react/src/hooks/use-animatable-uniform/use-animatable-uniform.test.tsx diff --git a/packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.ts b/packages/shaders-react/src/hooks/use-animatable-uniform/use-animatable-uniform.ts similarity index 100% rename from packages/matter-react/src/hooks/use-animatable-uniform/use-animatable-uniform.ts rename to packages/shaders-react/src/hooks/use-animatable-uniform/use-animatable-uniform.ts diff --git a/packages/matter-react/src/hooks/use-base-pass-uv/use-base-pass-uv.test.tsx b/packages/shaders-react/src/hooks/use-base-pass-uv/use-base-pass-uv.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-base-pass-uv/use-base-pass-uv.test.tsx rename to packages/shaders-react/src/hooks/use-base-pass-uv/use-base-pass-uv.test.tsx diff --git a/packages/matter-react/src/hooks/use-base-pass-uv/use-base-pass-uv.ts b/packages/shaders-react/src/hooks/use-base-pass-uv/use-base-pass-uv.ts similarity index 100% rename from packages/matter-react/src/hooks/use-base-pass-uv/use-base-pass-uv.ts rename to packages/shaders-react/src/hooks/use-base-pass-uv/use-base-pass-uv.ts diff --git a/packages/matter-react/src/hooks/use-cursor/use-cursor.test.tsx b/packages/shaders-react/src/hooks/use-cursor/use-cursor.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-cursor/use-cursor.test.tsx rename to packages/shaders-react/src/hooks/use-cursor/use-cursor.test.tsx diff --git a/packages/matter-react/src/hooks/use-cursor/use-cursor.ts b/packages/shaders-react/src/hooks/use-cursor/use-cursor.ts similarity index 100% rename from packages/matter-react/src/hooks/use-cursor/use-cursor.ts rename to packages/shaders-react/src/hooks/use-cursor/use-cursor.ts diff --git a/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.test.ts b/packages/shaders-react/src/hooks/use-display-gamut/use-display-gamut.test.ts similarity index 100% rename from packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.test.ts rename to packages/shaders-react/src/hooks/use-display-gamut/use-display-gamut.test.ts diff --git a/packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts b/packages/shaders-react/src/hooks/use-display-gamut/use-display-gamut.ts similarity index 100% rename from packages/matter-react/src/hooks/use-display-gamut/use-display-gamut.ts rename to packages/shaders-react/src/hooks/use-display-gamut/use-display-gamut.ts diff --git a/packages/matter-react/src/hooks/use-overlay-pass/use-overlay-pass.test.tsx b/packages/shaders-react/src/hooks/use-overlay-pass/use-overlay-pass.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-overlay-pass/use-overlay-pass.test.tsx rename to packages/shaders-react/src/hooks/use-overlay-pass/use-overlay-pass.test.tsx diff --git a/packages/matter-react/src/hooks/use-overlay-pass/use-overlay-pass.ts b/packages/shaders-react/src/hooks/use-overlay-pass/use-overlay-pass.ts similarity index 100% rename from packages/matter-react/src/hooks/use-overlay-pass/use-overlay-pass.ts rename to packages/shaders-react/src/hooks/use-overlay-pass/use-overlay-pass.ts diff --git a/packages/matter-react/src/hooks/use-resize/use-resize.test.ts b/packages/shaders-react/src/hooks/use-resize/use-resize.test.ts similarity index 100% rename from packages/matter-react/src/hooks/use-resize/use-resize.test.ts rename to packages/shaders-react/src/hooks/use-resize/use-resize.test.ts diff --git a/packages/matter-react/src/hooks/use-resize/use-resize.ts b/packages/shaders-react/src/hooks/use-resize/use-resize.ts similarity index 100% rename from packages/matter-react/src/hooks/use-resize/use-resize.ts rename to packages/shaders-react/src/hooks/use-resize/use-resize.ts diff --git a/packages/matter-react/src/hooks/use-scroll/use-scroll.test.ts b/packages/shaders-react/src/hooks/use-scroll/use-scroll.test.ts similarity index 100% rename from packages/matter-react/src/hooks/use-scroll/use-scroll.test.ts rename to packages/shaders-react/src/hooks/use-scroll/use-scroll.test.ts diff --git a/packages/matter-react/src/hooks/use-scroll/use-scroll.ts b/packages/shaders-react/src/hooks/use-scroll/use-scroll.ts similarity index 100% rename from packages/matter-react/src/hooks/use-scroll/use-scroll.ts rename to packages/shaders-react/src/hooks/use-scroll/use-scroll.ts diff --git a/packages/matter-react/src/hooks/use-shader-context/use-shader-context.ts b/packages/shaders-react/src/hooks/use-shader-context/use-shader-context.ts similarity index 100% rename from packages/matter-react/src/hooks/use-shader-context/use-shader-context.ts rename to packages/shaders-react/src/hooks/use-shader-context/use-shader-context.ts diff --git a/packages/matter-react/src/hooks/use-shader-material/use-shader-material.test.tsx b/packages/shaders-react/src/hooks/use-shader-material/use-shader-material.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-shader-material/use-shader-material.test.tsx rename to packages/shaders-react/src/hooks/use-shader-material/use-shader-material.test.tsx diff --git a/packages/matter-react/src/hooks/use-shader-material/use-shader-material.ts b/packages/shaders-react/src/hooks/use-shader-material/use-shader-material.ts similarity index 100% rename from packages/matter-react/src/hooks/use-shader-material/use-shader-material.ts rename to packages/shaders-react/src/hooks/use-shader-material/use-shader-material.ts diff --git a/packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx b/packages/shaders-react/src/hooks/use-static-hint/use-static-hint.test.tsx similarity index 100% rename from packages/matter-react/src/hooks/use-static-hint/use-static-hint.test.tsx rename to packages/shaders-react/src/hooks/use-static-hint/use-static-hint.test.tsx diff --git a/packages/matter-react/src/hooks/use-static-hint/use-static-hint.ts b/packages/shaders-react/src/hooks/use-static-hint/use-static-hint.ts similarity index 100% rename from packages/matter-react/src/hooks/use-static-hint/use-static-hint.ts rename to packages/shaders-react/src/hooks/use-static-hint/use-static-hint.ts diff --git a/packages/matter-react/src/index.ts b/packages/shaders-react/src/index.ts similarity index 100% rename from packages/matter-react/src/index.ts rename to packages/shaders-react/src/index.ts diff --git a/packages/matter-react/src/internal/create-signal.ts b/packages/shaders-react/src/internal/create-signal.ts similarity index 100% rename from packages/matter-react/src/internal/create-signal.ts rename to packages/shaders-react/src/internal/create-signal.ts diff --git a/packages/matter-react/src/poster.test.ts b/packages/shaders-react/src/poster.test.ts similarity index 100% rename from packages/matter-react/src/poster.test.ts rename to packages/shaders-react/src/poster.test.ts diff --git a/packages/matter-react/src/poster.ts b/packages/shaders-react/src/poster.ts similarity index 100% rename from packages/matter-react/src/poster.ts rename to packages/shaders-react/src/poster.ts diff --git a/packages/matter-react/src/test-setup.ts b/packages/shaders-react/src/test-setup.ts similarity index 100% rename from packages/matter-react/src/test-setup.ts rename to packages/shaders-react/src/test-setup.ts diff --git a/packages/matter-react/tsconfig.json b/packages/shaders-react/tsconfig.json similarity index 100% rename from packages/matter-react/tsconfig.json rename to packages/shaders-react/tsconfig.json diff --git a/packages/matter-react/tsup.config.ts b/packages/shaders-react/tsup.config.ts similarity index 100% rename from packages/matter-react/tsup.config.ts rename to packages/shaders-react/tsup.config.ts diff --git a/packages/matter-react/vitest.config.ts b/packages/shaders-react/vitest.config.ts similarity index 100% rename from packages/matter-react/vitest.config.ts rename to packages/shaders-react/vitest.config.ts diff --git a/packages/matter/CHANGELOG.md b/packages/shaders/CHANGELOG.md similarity index 98% rename from packages/matter/CHANGELOG.md rename to packages/shaders/CHANGELOG.md index 22fffb71..7116e5eb 100644 --- a/packages/matter/CHANGELOG.md +++ b/packages/shaders/CHANGELOG.md @@ -192,6 +192,6 @@ **`@mattermix/shaders-cli`** — shadcn-style copy-paste CLI: `init`, `list`, `add`, `update`. Default registry tracks the CLI's published version tag (`v0.1.0`) so component code is stable per release. - **v1 components** (via `matter-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. + **v1 components** (via `shaders-cli add `): `linear-gradient`, `mesh-gradient`, `aurora`, `dot-field`, `noise-field`, `waves`. Each component is yours to edit after copy-in. **Requirements:** Node 22+ for the CLI. WebGPU-capable browser (Chromium-based, Safari TP, Firefox Nightly with the flag). Three.js ^0.170. React ^19. diff --git a/packages/matter/LICENSE b/packages/shaders/LICENSE similarity index 100% rename from packages/matter/LICENSE rename to packages/shaders/LICENSE diff --git a/packages/matter/README.md b/packages/shaders/README.md similarity index 100% rename from packages/matter/README.md rename to packages/shaders/README.md diff --git a/packages/matter/package.json b/packages/shaders/package.json similarity index 97% rename from packages/matter/package.json rename to packages/shaders/package.json index e681909f..90c9c8b1 100644 --- a/packages/matter/package.json +++ b/packages/shaders/package.json @@ -22,7 +22,7 @@ "repository": { "type": "git", "url": "git+https://github.com/mattermix/shaders.git", - "directory": "packages/matter" + "directory": "packages/shaders" }, "files": [ "dist", diff --git a/packages/matter/src/color.test.ts b/packages/shaders/src/color.test.ts similarity index 100% rename from packages/matter/src/color.test.ts rename to packages/shaders/src/color.test.ts diff --git a/packages/matter/src/color.ts b/packages/shaders/src/color.ts similarity index 100% rename from packages/matter/src/color.ts rename to packages/shaders/src/color.ts diff --git a/packages/matter/src/index.ts b/packages/shaders/src/index.ts similarity index 100% rename from packages/matter/src/index.ts rename to packages/shaders/src/index.ts diff --git a/packages/matter/src/inputs/cursor-input/cursor-input.test.ts b/packages/shaders/src/inputs/cursor-input/cursor-input.test.ts similarity index 100% rename from packages/matter/src/inputs/cursor-input/cursor-input.test.ts rename to packages/shaders/src/inputs/cursor-input/cursor-input.test.ts diff --git a/packages/matter/src/inputs/cursor-input/cursor-input.ts b/packages/shaders/src/inputs/cursor-input/cursor-input.ts similarity index 100% rename from packages/matter/src/inputs/cursor-input/cursor-input.ts rename to packages/shaders/src/inputs/cursor-input/cursor-input.ts diff --git a/packages/matter/src/primitives/color-ramp/color-ramp.test.ts b/packages/shaders/src/primitives/color-ramp/color-ramp.test.ts similarity index 100% rename from packages/matter/src/primitives/color-ramp/color-ramp.test.ts rename to packages/shaders/src/primitives/color-ramp/color-ramp.test.ts diff --git a/packages/matter/src/primitives/color-ramp/color-ramp.ts b/packages/shaders/src/primitives/color-ramp/color-ramp.ts similarity index 100% rename from packages/matter/src/primitives/color-ramp/color-ramp.ts rename to packages/shaders/src/primitives/color-ramp/color-ramp.ts diff --git a/packages/matter/src/primitives/color-space/color-space-export.test.ts b/packages/shaders/src/primitives/color-space/color-space-export.test.ts similarity index 100% rename from packages/matter/src/primitives/color-space/color-space-export.test.ts rename to packages/shaders/src/primitives/color-space/color-space-export.test.ts diff --git a/packages/matter/src/primitives/color-space/cpu-convert.test.ts b/packages/shaders/src/primitives/color-space/cpu-convert.test.ts similarity index 100% rename from packages/matter/src/primitives/color-space/cpu-convert.test.ts rename to packages/shaders/src/primitives/color-space/cpu-convert.test.ts diff --git a/packages/matter/src/primitives/color-space/cpu-convert.ts b/packages/shaders/src/primitives/color-space/cpu-convert.ts similarity index 100% rename from packages/matter/src/primitives/color-space/cpu-convert.ts rename to packages/shaders/src/primitives/color-space/cpu-convert.ts diff --git a/packages/matter/src/primitives/color-space/cpu-transfer.test.ts b/packages/shaders/src/primitives/color-space/cpu-transfer.test.ts similarity index 100% rename from packages/matter/src/primitives/color-space/cpu-transfer.test.ts rename to packages/shaders/src/primitives/color-space/cpu-transfer.test.ts diff --git a/packages/matter/src/primitives/color-space/cpu-transfer.ts b/packages/shaders/src/primitives/color-space/cpu-transfer.ts similarity index 100% rename from packages/matter/src/primitives/color-space/cpu-transfer.ts rename to packages/shaders/src/primitives/color-space/cpu-transfer.ts diff --git a/packages/matter/src/primitives/color-space/hsl.ts b/packages/shaders/src/primitives/color-space/hsl.ts similarity index 100% rename from packages/matter/src/primitives/color-space/hsl.ts rename to packages/shaders/src/primitives/color-space/hsl.ts diff --git a/packages/matter/src/primitives/color-space/hsv.ts b/packages/shaders/src/primitives/color-space/hsv.ts similarity index 100% rename from packages/matter/src/primitives/color-space/hsv.ts rename to packages/shaders/src/primitives/color-space/hsv.ts diff --git a/packages/matter/src/primitives/color-space/hue.ts b/packages/shaders/src/primitives/color-space/hue.ts similarity index 100% rename from packages/matter/src/primitives/color-space/hue.ts rename to packages/shaders/src/primitives/color-space/hue.ts diff --git a/packages/matter/src/primitives/color-space/index.ts b/packages/shaders/src/primitives/color-space/index.ts similarity index 100% rename from packages/matter/src/primitives/color-space/index.ts rename to packages/shaders/src/primitives/color-space/index.ts diff --git a/packages/matter/src/primitives/color-space/lch.ts b/packages/shaders/src/primitives/color-space/lch.ts similarity index 100% rename from packages/matter/src/primitives/color-space/lch.ts rename to packages/shaders/src/primitives/color-space/lch.ts diff --git a/packages/matter/src/primitives/color-space/linear.ts b/packages/shaders/src/primitives/color-space/linear.ts similarity index 100% rename from packages/matter/src/primitives/color-space/linear.ts rename to packages/shaders/src/primitives/color-space/linear.ts diff --git a/packages/matter/src/primitives/color-space/mix-color.test.ts b/packages/shaders/src/primitives/color-space/mix-color.test.ts similarity index 100% rename from packages/matter/src/primitives/color-space/mix-color.test.ts rename to packages/shaders/src/primitives/color-space/mix-color.test.ts diff --git a/packages/matter/src/primitives/color-space/mix-color.ts b/packages/shaders/src/primitives/color-space/mix-color.ts similarity index 100% rename from packages/matter/src/primitives/color-space/mix-color.ts rename to packages/shaders/src/primitives/color-space/mix-color.ts diff --git a/packages/matter/src/primitives/color-space/oklab.ts b/packages/shaders/src/primitives/color-space/oklab.ts similarity index 100% rename from packages/matter/src/primitives/color-space/oklab.ts rename to packages/shaders/src/primitives/color-space/oklab.ts diff --git a/packages/matter/src/primitives/color-space/oklch.ts b/packages/shaders/src/primitives/color-space/oklch.ts similarity index 100% rename from packages/matter/src/primitives/color-space/oklch.ts rename to packages/shaders/src/primitives/color-space/oklch.ts diff --git a/packages/matter/src/primitives/color-space/registry.ts b/packages/shaders/src/primitives/color-space/registry.ts similarity index 100% rename from packages/matter/src/primitives/color-space/registry.ts rename to packages/shaders/src/primitives/color-space/registry.ts diff --git a/packages/matter/src/primitives/color-space/transfer.test.ts b/packages/shaders/src/primitives/color-space/transfer.test.ts similarity index 100% rename from packages/matter/src/primitives/color-space/transfer.test.ts rename to packages/shaders/src/primitives/color-space/transfer.test.ts diff --git a/packages/matter/src/primitives/color-space/transfer.ts b/packages/shaders/src/primitives/color-space/transfer.ts similarity index 100% rename from packages/matter/src/primitives/color-space/transfer.ts rename to packages/shaders/src/primitives/color-space/transfer.ts diff --git a/packages/matter/src/primitives/color-space/types.ts b/packages/shaders/src/primitives/color-space/types.ts similarity index 100% rename from packages/matter/src/primitives/color-space/types.ts rename to packages/shaders/src/primitives/color-space/types.ts diff --git a/packages/matter/src/primitives/cursor-ripple/cursor-ripple.test.ts b/packages/shaders/src/primitives/cursor-ripple/cursor-ripple.test.ts similarity index 100% rename from packages/matter/src/primitives/cursor-ripple/cursor-ripple.test.ts rename to packages/shaders/src/primitives/cursor-ripple/cursor-ripple.test.ts diff --git a/packages/matter/src/primitives/cursor-ripple/cursor-ripple.ts b/packages/shaders/src/primitives/cursor-ripple/cursor-ripple.ts similarity index 100% rename from packages/matter/src/primitives/cursor-ripple/cursor-ripple.ts rename to packages/shaders/src/primitives/cursor-ripple/cursor-ripple.ts diff --git a/packages/matter/src/primitives/displace/displace.ts b/packages/shaders/src/primitives/displace/displace.ts similarity index 100% rename from packages/matter/src/primitives/displace/displace.ts rename to packages/shaders/src/primitives/displace/displace.ts diff --git a/packages/matter/src/primitives/dither-pattern/blue-noise-tile.ts b/packages/shaders/src/primitives/dither-pattern/blue-noise-tile.ts similarity index 100% rename from packages/matter/src/primitives/dither-pattern/blue-noise-tile.ts rename to packages/shaders/src/primitives/dither-pattern/blue-noise-tile.ts diff --git a/packages/matter/src/primitives/dither-pattern/dither-pattern.test.ts b/packages/shaders/src/primitives/dither-pattern/dither-pattern.test.ts similarity index 100% rename from packages/matter/src/primitives/dither-pattern/dither-pattern.test.ts rename to packages/shaders/src/primitives/dither-pattern/dither-pattern.test.ts diff --git a/packages/matter/src/primitives/dither-pattern/dither-pattern.ts b/packages/shaders/src/primitives/dither-pattern/dither-pattern.ts similarity index 100% rename from packages/matter/src/primitives/dither-pattern/dither-pattern.ts rename to packages/shaders/src/primitives/dither-pattern/dither-pattern.ts diff --git a/packages/matter/src/primitives/dither/dither.test.ts b/packages/shaders/src/primitives/dither/dither.test.ts similarity index 100% rename from packages/matter/src/primitives/dither/dither.test.ts rename to packages/shaders/src/primitives/dither/dither.test.ts diff --git a/packages/matter/src/primitives/dither/dither.ts b/packages/shaders/src/primitives/dither/dither.ts similarity index 100% rename from packages/matter/src/primitives/dither/dither.ts rename to packages/shaders/src/primitives/dither/dither.ts diff --git a/packages/matter/src/primitives/fbm/fbm.test.ts b/packages/shaders/src/primitives/fbm/fbm.test.ts similarity index 100% rename from packages/matter/src/primitives/fbm/fbm.test.ts rename to packages/shaders/src/primitives/fbm/fbm.test.ts diff --git a/packages/matter/src/primitives/fbm/fbm.ts b/packages/shaders/src/primitives/fbm/fbm.ts similarity index 100% rename from packages/matter/src/primitives/fbm/fbm.ts rename to packages/shaders/src/primitives/fbm/fbm.ts diff --git a/packages/matter/src/primitives/grain/grain.test.ts b/packages/shaders/src/primitives/grain/grain.test.ts similarity index 100% rename from packages/matter/src/primitives/grain/grain.test.ts rename to packages/shaders/src/primitives/grain/grain.test.ts diff --git a/packages/matter/src/primitives/grain/grain.ts b/packages/shaders/src/primitives/grain/grain.ts similarity index 100% rename from packages/matter/src/primitives/grain/grain.ts rename to packages/shaders/src/primitives/grain/grain.ts diff --git a/packages/matter/src/primitives/metaballs/metaballs.test.ts b/packages/shaders/src/primitives/metaballs/metaballs.test.ts similarity index 100% rename from packages/matter/src/primitives/metaballs/metaballs.test.ts rename to packages/shaders/src/primitives/metaballs/metaballs.test.ts diff --git a/packages/matter/src/primitives/metaballs/metaballs.ts b/packages/shaders/src/primitives/metaballs/metaballs.ts similarity index 100% rename from packages/matter/src/primitives/metaballs/metaballs.ts rename to packages/shaders/src/primitives/metaballs/metaballs.ts diff --git a/packages/matter/src/primitives/noise/noise.test.ts b/packages/shaders/src/primitives/noise/noise.test.ts similarity index 100% rename from packages/matter/src/primitives/noise/noise.test.ts rename to packages/shaders/src/primitives/noise/noise.test.ts diff --git a/packages/matter/src/primitives/noise/noise.ts b/packages/shaders/src/primitives/noise/noise.ts similarity index 100% rename from packages/matter/src/primitives/noise/noise.ts rename to packages/shaders/src/primitives/noise/noise.ts diff --git a/packages/matter/src/primitives/quantize/quantize.test.ts b/packages/shaders/src/primitives/quantize/quantize.test.ts similarity index 100% rename from packages/matter/src/primitives/quantize/quantize.test.ts rename to packages/shaders/src/primitives/quantize/quantize.test.ts diff --git a/packages/matter/src/primitives/quantize/quantize.ts b/packages/shaders/src/primitives/quantize/quantize.ts similarity index 100% rename from packages/matter/src/primitives/quantize/quantize.ts rename to packages/shaders/src/primitives/quantize/quantize.ts diff --git a/packages/matter/src/primitives/sdf-circle/sdf-circle.test.ts b/packages/shaders/src/primitives/sdf-circle/sdf-circle.test.ts similarity index 100% rename from packages/matter/src/primitives/sdf-circle/sdf-circle.test.ts rename to packages/shaders/src/primitives/sdf-circle/sdf-circle.test.ts diff --git a/packages/matter/src/primitives/sdf-circle/sdf-circle.ts b/packages/shaders/src/primitives/sdf-circle/sdf-circle.ts similarity index 100% rename from packages/matter/src/primitives/sdf-circle/sdf-circle.ts rename to packages/shaders/src/primitives/sdf-circle/sdf-circle.ts diff --git a/packages/matter/src/primitives/stable-hash/stable-hash.test.ts b/packages/shaders/src/primitives/stable-hash/stable-hash.test.ts similarity index 100% rename from packages/matter/src/primitives/stable-hash/stable-hash.test.ts rename to packages/shaders/src/primitives/stable-hash/stable-hash.test.ts diff --git a/packages/matter/src/primitives/stable-hash/stable-hash.ts b/packages/shaders/src/primitives/stable-hash/stable-hash.ts similarity index 100% rename from packages/matter/src/primitives/stable-hash/stable-hash.ts rename to packages/shaders/src/primitives/stable-hash/stable-hash.ts diff --git a/packages/matter/src/primitives/time/time.test.ts b/packages/shaders/src/primitives/time/time.test.ts similarity index 100% rename from packages/matter/src/primitives/time/time.test.ts rename to packages/shaders/src/primitives/time/time.test.ts diff --git a/packages/matter/src/primitives/time/time.ts b/packages/shaders/src/primitives/time/time.ts similarity index 100% rename from packages/matter/src/primitives/time/time.ts rename to packages/shaders/src/primitives/time/time.ts diff --git a/packages/matter/src/primitives/voronoi/voronoi-cells.test.ts b/packages/shaders/src/primitives/voronoi/voronoi-cells.test.ts similarity index 100% rename from packages/matter/src/primitives/voronoi/voronoi-cells.test.ts rename to packages/shaders/src/primitives/voronoi/voronoi-cells.test.ts diff --git a/packages/matter/src/primitives/voronoi/voronoi-cells.ts b/packages/shaders/src/primitives/voronoi/voronoi-cells.ts similarity index 100% rename from packages/matter/src/primitives/voronoi/voronoi-cells.ts rename to packages/shaders/src/primitives/voronoi/voronoi-cells.ts diff --git a/packages/matter/src/primitives/voronoi/voronoi.test.ts b/packages/shaders/src/primitives/voronoi/voronoi.test.ts similarity index 100% rename from packages/matter/src/primitives/voronoi/voronoi.test.ts rename to packages/shaders/src/primitives/voronoi/voronoi.test.ts diff --git a/packages/matter/src/primitives/voronoi/voronoi.ts b/packages/shaders/src/primitives/voronoi/voronoi.ts similarity index 100% rename from packages/matter/src/primitives/voronoi/voronoi.ts rename to packages/shaders/src/primitives/voronoi/voronoi.ts diff --git a/packages/matter/src/runtime/clock/reset-clock.test.ts b/packages/shaders/src/runtime/clock/reset-clock.test.ts similarity index 100% rename from packages/matter/src/runtime/clock/reset-clock.test.ts rename to packages/shaders/src/runtime/clock/reset-clock.test.ts diff --git a/packages/matter/src/runtime/clock/reset-clock.ts b/packages/shaders/src/runtime/clock/reset-clock.ts similarity index 100% rename from packages/matter/src/runtime/clock/reset-clock.ts rename to packages/shaders/src/runtime/clock/reset-clock.ts diff --git a/packages/matter/src/runtime/create-renderer/create-renderer.ts b/packages/shaders/src/runtime/create-renderer/create-renderer.ts similarity index 100% rename from packages/matter/src/runtime/create-renderer/create-renderer.ts rename to packages/shaders/src/runtime/create-renderer/create-renderer.ts diff --git a/packages/matter/src/runtime/create-renderer/gamut.test.ts b/packages/shaders/src/runtime/create-renderer/gamut.test.ts similarity index 100% rename from packages/matter/src/runtime/create-renderer/gamut.test.ts rename to packages/shaders/src/runtime/create-renderer/gamut.test.ts diff --git a/packages/matter/src/runtime/create-renderer/gamut.ts b/packages/shaders/src/runtime/create-renderer/gamut.ts similarity index 100% rename from packages/matter/src/runtime/create-renderer/gamut.ts rename to packages/shaders/src/runtime/create-renderer/gamut.ts diff --git a/packages/matter/src/runtime/frame-scheduler/frame-scheduler.test.ts b/packages/shaders/src/runtime/frame-scheduler/frame-scheduler.test.ts similarity index 100% rename from packages/matter/src/runtime/frame-scheduler/frame-scheduler.test.ts rename to packages/shaders/src/runtime/frame-scheduler/frame-scheduler.test.ts diff --git a/packages/matter/src/runtime/frame-scheduler/frame-scheduler.ts b/packages/shaders/src/runtime/frame-scheduler/frame-scheduler.ts similarity index 100% rename from packages/matter/src/runtime/frame-scheduler/frame-scheduler.ts rename to packages/shaders/src/runtime/frame-scheduler/frame-scheduler.ts diff --git a/packages/matter/src/runtime/intersection/intersection.test.ts b/packages/shaders/src/runtime/intersection/intersection.test.ts similarity index 100% rename from packages/matter/src/runtime/intersection/intersection.test.ts rename to packages/shaders/src/runtime/intersection/intersection.test.ts diff --git a/packages/matter/src/runtime/intersection/intersection.ts b/packages/shaders/src/runtime/intersection/intersection.ts similarity index 100% rename from packages/matter/src/runtime/intersection/intersection.ts rename to packages/shaders/src/runtime/intersection/intersection.ts diff --git a/packages/matter/src/runtime/reduced-motion/reduced-motion.test.ts b/packages/shaders/src/runtime/reduced-motion/reduced-motion.test.ts similarity index 100% rename from packages/matter/src/runtime/reduced-motion/reduced-motion.test.ts rename to packages/shaders/src/runtime/reduced-motion/reduced-motion.test.ts diff --git a/packages/matter/src/runtime/reduced-motion/reduced-motion.ts b/packages/shaders/src/runtime/reduced-motion/reduced-motion.ts similarity index 100% rename from packages/matter/src/runtime/reduced-motion/reduced-motion.ts rename to packages/shaders/src/runtime/reduced-motion/reduced-motion.ts diff --git a/packages/matter/src/runtime/runtime-integration/runtime-integration.test.ts b/packages/shaders/src/runtime/runtime-integration/runtime-integration.test.ts similarity index 100% rename from packages/matter/src/runtime/runtime-integration/runtime-integration.test.ts rename to packages/shaders/src/runtime/runtime-integration/runtime-integration.test.ts diff --git a/packages/matter/src/runtime/visibility/visibility.test.ts b/packages/shaders/src/runtime/visibility/visibility.test.ts similarity index 100% rename from packages/matter/src/runtime/visibility/visibility.test.ts rename to packages/shaders/src/runtime/visibility/visibility.test.ts diff --git a/packages/matter/src/runtime/visibility/visibility.ts b/packages/shaders/src/runtime/visibility/visibility.ts similarity index 100% rename from packages/matter/src/runtime/visibility/visibility.ts rename to packages/shaders/src/runtime/visibility/visibility.ts diff --git a/packages/matter/tsconfig.json b/packages/shaders/tsconfig.json similarity index 100% rename from packages/matter/tsconfig.json rename to packages/shaders/tsconfig.json diff --git a/packages/matter/tsup.config.ts b/packages/shaders/tsup.config.ts similarity index 100% rename from packages/matter/tsup.config.ts rename to packages/shaders/tsup.config.ts diff --git a/packages/matter/vitest.config.ts b/packages/shaders/vitest.config.ts similarity index 100% rename from packages/matter/vitest.config.ts rename to packages/shaders/vitest.config.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd271160..20da163c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,10 +103,10 @@ importers: version: 1.6.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) '@mattermix/shaders': specifier: workspace:* - version: link:../../packages/matter + version: link:../../packages/shaders '@mattermix/shaders-react': specifier: workspace:* - version: link:../../packages/matter-react + version: link:../../packages/shaders-react '@shaders/registry': specifier: workspace:* version: link:../../registry @@ -227,10 +227,10 @@ importers: version: 1.6.0(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) '@mattermix/shaders': specifier: workspace:* - version: link:../../packages/matter + version: link:../../packages/shaders '@mattermix/shaders-react': specifier: workspace:* - version: link:../../packages/matter-react + version: link:../../packages/shaders-react '@xyflow/react': specifier: ^12.11.2 version: 12.11.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5) @@ -272,7 +272,7 @@ importers: specifier: 'catalog:' version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.19.17)(@vitest/ui@4.1.7)(happy-dom@15.11.7)(vite@8.0.14(@types/node@22.19.17)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) - packages/matter: + packages/shaders: devDependencies: '@shaders/tsconfig': specifier: workspace:* @@ -299,7 +299,7 @@ importers: specifier: 'catalog:' version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.19.17)(@vitest/ui@4.1.7)(happy-dom@15.11.7)(vite@8.0.14(@types/node@22.19.17)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) - packages/matter-cli: + packages/shaders-cli: dependencies: commander: specifier: ^12.1.0 @@ -310,10 +310,10 @@ importers: devDependencies: '@mattermix/shaders': specifier: workspace:* - version: link:../matter + version: link:../shaders '@mattermix/shaders-react': specifier: workspace:* - version: link:../matter-react + version: link:../shaders-react '@shaders/registry': specifier: workspace:* version: link:../../registry @@ -351,11 +351,11 @@ importers: specifier: 'catalog:' version: 4.1.7(@opentelemetry/api@1.9.1)(@types/node@22.19.17)(@vitest/ui@4.1.7)(happy-dom@15.11.7)(vite@8.0.14(@types/node@22.19.17)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) - packages/matter-react: + packages/shaders-react: devDependencies: '@mattermix/shaders': specifier: workspace:* - version: link:../matter + version: link:../shaders '@shaders/tsconfig': specifier: workspace:* version: link:../../tooling/tsconfig @@ -403,10 +403,10 @@ importers: dependencies: '@mattermix/shaders': specifier: workspace:* - version: link:../packages/matter + version: link:../packages/shaders '@mattermix/shaders-react': specifier: workspace:* - version: link:../packages/matter-react + version: link:../packages/shaders-react react: specifier: ^19.0.0 version: 19.2.5 diff --git a/scripts/build-posters.sh b/scripts/build-posters.sh index 23bb74e1..1f49c44c 100755 --- a/scripts/build-posters.sh +++ b/scripts/build-posters.sh @@ -8,13 +8,13 @@ set -euo pipefail REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)" cd "$REPO_ROOT" -CLI="node packages/matter-cli/dist/index.js poster" +CLI="node packages/shaders-cli/dist/index.js poster" COMPONENTS_DIR="apps/docs/src/app/components" OUT_DIR="apps/docs/public/posters" WIDTH=1080 HEIGHT=720 -if [ ! -f packages/matter-cli/dist/index.js ]; then +if [ ! -f packages/shaders-cli/dist/index.js ]; then echo "error: CLI not built. Run: pnpm --filter @mattermix/shaders-cli build" >&2 exit 1 fi diff --git a/scripts/generate-blue-noise.mjs b/scripts/generate-blue-noise.mjs index 88d05576..79959e81 100644 --- a/scripts/generate-blue-noise.mjs +++ b/scripts/generate-blue-noise.mjs @@ -1,6 +1,6 @@ // Generates a 64x64 blue-noise threshold tile with the void-and-cluster // method (Ulichney 1993) and writes it as base64 into -// packages/matter/src/primitives/dither-pattern/blue-noise-tile.ts. +// packages/shaders/src/primitives/dither-pattern/blue-noise-tile.ts. // Deterministic (seeded PRNG), so re-running reproduces the same tile. import { writeFileSync } from 'node:fs'; @@ -147,7 +147,7 @@ export const BLUE_NOISE_TILE: Uint8Array = Uint8Array.from( `; writeFileSync( - new URL('../packages/matter/src/primitives/dither-pattern/blue-noise-tile.ts', import.meta.url), + new URL('../packages/shaders/src/primitives/dither-pattern/blue-noise-tile.ts', import.meta.url), output, ); console.log('blue-noise-tile.ts written'); diff --git a/scripts/smoke-test-cli.mjs b/scripts/smoke-test-cli.mjs index 604ea128..cc03691e 100755 --- a/scripts/smoke-test-cli.mjs +++ b/scripts/smoke-test-cli.mjs @@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url'; const __dirname = fileURLToPath(new URL('.', import.meta.url)); const repoRoot = resolve(__dirname, '..'); -const cliDir = join(repoRoot, 'packages/matter-cli'); +const cliDir = join(repoRoot, 'packages/shaders-cli'); const registryFileUrl = `file://${join(repoRoot, 'registry')}/`; function step(label) { @@ -25,7 +25,7 @@ function runQuiet(cmd, opts = {}) { }).toString(); } -const smokeDir = mkdtempSync(join(tmpdir(), 'matter-cli-smoke-')); +const smokeDir = mkdtempSync(join(tmpdir(), 'shaders-cli-smoke-')); let exitCode = 0; try { @@ -44,29 +44,29 @@ try { step(`Initialize a fresh project in ${smokeDir}`); writeFileSync( join(smokeDir, 'package.json'), - JSON.stringify({ name: 'matter-cli-smoke', version: '0.0.0', private: true }, null, 2) + '\n', + JSON.stringify({ name: 'shaders-cli-smoke', version: '0.0.0', private: true }, null, 2) + '\n', ); step(`Install the packed CLI`); run(`npm install --no-save "${tarball}"`, { cwd: smokeDir }); - step(`Run \`matter-cli init\``); + step(`Run \`shaders-cli init\``); run(`node node_modules/@mattermix/shaders-cli/dist/index.js init`, { cwd: smokeDir, }); - step(`Point matter.config.json at the local registry (no GitHub remote yet)`); - const cfgPath = join(smokeDir, 'matter.config.json'); + step(`Point shaders.config.json at the local registry (no GitHub remote yet)`); + const cfgPath = join(smokeDir, 'shaders.config.json'); const cfg = JSON.parse(readFileSync(cfgPath, 'utf-8')); cfg.registryUrl = registryFileUrl; writeFileSync(cfgPath, JSON.stringify(cfg, null, 2) + '\n'); - step(`Run \`matter-cli list\``); + step(`Run \`shaders-cli list\``); run(`node node_modules/@mattermix/shaders-cli/dist/index.js list`, { cwd: smokeDir, }); - step(`Run \`matter-cli add linear-gradient\``); + step(`Run \`shaders-cli add linear-gradient\``); run(`node node_modules/@mattermix/shaders-cli/dist/index.js add linear-gradient`, { cwd: smokeDir, }); @@ -85,7 +85,7 @@ try { } console.log(' ✓ files are byte-identical'); - step(`Edit the copied component and run \`matter-cli update --force\``); + step(`Edit the copied component and run \`shaders-cli update --force\``); writeFileSync( join(smokeDir, 'src/components/matter/linear-gradient/linear-gradient.tsx'), 'export const stale = true\n', diff --git a/scripts/snap.sh b/scripts/snap.sh index f594ef0a..ea8d6ee5 100755 --- a/scripts/snap.sh +++ b/scripts/snap.sh @@ -57,8 +57,8 @@ done # esbuild). Without this, the next host-side `pnpm snap` fails because the # .pnpm store ends up populated with the wrong-platform binaries. NM_MOUNTS=(-v /work/node_modules) -for dir in apps/docs apps/docs-tests apps/editor packages/matter packages/matter-react \ - packages/matter-cli registry tooling/eslint-config tooling/tsconfig; do +for dir in apps/docs apps/docs-tests apps/editor packages/shaders packages/shaders-react \ + packages/shaders-cli registry tooling/eslint-config tooling/tsconfig; do NM_MOUNTS+=(-v "/work/$dir/node_modules") done From cb8e1cf391fc8e7827b2fc7b5337e7c4e450a322 Mon Sep 17 00:00:00 2001 From: Hunter Garrett Date: Thu, 20 Aug 2026 17:55:11 -0400 Subject: [PATCH 3/4] docs: rebrand Matter to Shaders across docs, READMEs, and AGENTS.md --- AGENTS.md | 10 ++-- LICENSE | 2 +- README.md | 6 +-- apps/docs-tests/editor/export-import.spec.ts | 2 +- apps/docs/content/docs/changelog.mdx | 6 +-- apps/docs/content/docs/cli.mdx | 6 +-- apps/docs/content/docs/examples.mdx | 6 +-- apps/docs/content/docs/getting-started.mdx | 22 ++++---- apps/docs/content/docs/guides/animation.mdx | 16 +++--- apps/docs/content/docs/guides/color.mdx | 6 +-- apps/docs/content/docs/guides/perf.mdx | 12 ++--- .../content/docs/guides/shared-scenes.mdx | 8 +-- apps/docs/content/docs/react/api.mdx | 8 +-- .../docs/react/guides/ssr-and-fallbacks.mdx | 14 ++--- .../content/docs/react/guides/three-r3f.mdx | 14 ++--- .../reference/{matter.mdx => shaders.mdx} | 4 +- .../app/components/linear-gradient/page.tsx | 2 +- .../src/app/components/simplex-noise/page.tsx | 2 +- apps/docs/src/app/layout.tsx | 4 +- apps/docs/src/app/page.tsx | 2 +- apps/docs/src/app/palette/PaletteView.tsx | 2 +- apps/docs/src/app/palette/page.tsx | 4 +- apps/editor/src/app/layout.tsx | 2 +- apps/editor/src/app/parity/generated.gen.tsx | 2 +- apps/editor/src/editor/graph/compile.ts | 2 +- apps/editor/src/editor/graph/emit.test.ts | 2 +- apps/editor/src/editor/graph/emit.ts | 42 ++++++++------- apps/editor/src/editor/graph/registry.ts | 2 +- .../src/editor/panels/EditorActions.tsx | 2 +- docs/development/visual-regression.md | 2 +- package.json | 2 +- packages/shaders-cli/LICENSE | 2 +- packages/shaders-cli/README.md | 10 ++-- packages/shaders-cli/package.json | 4 +- packages/shaders-cli/src/commands/add.test.ts | 52 +++++++++---------- .../shaders-cli/src/commands/init.test.ts | 6 +-- .../shaders-cli/src/commands/list.test.ts | 2 +- .../shaders-cli/src/commands/poster.test.ts | 4 +- .../shaders-cli/src/commands/update.test.ts | 14 ++--- .../src/config/shadersConfig.test.ts | 7 ++- .../shaders-cli/src/config/shadersConfig.ts | 2 +- .../src/fs/writeFileNoFollow.test.ts | 2 +- packages/shaders-cli/src/harness/index.html | 2 +- packages/shaders-cli/src/harness/index.tsx | 14 ++--- packages/shaders-cli/src/index.ts | 4 +- .../shaders-cli/src/poster/bundle.test.ts | 2 +- packages/shaders-cli/src/poster/bundle.ts | 4 +- packages/shaders-cli/src/poster/e2e.test.ts | 2 +- .../shaders-cli/src/poster/playwright.test.ts | 2 +- packages/shaders-cli/src/poster/playwright.ts | 2 +- .../src/poster/projectRoot.test.ts | 2 +- packages/shaders-cli/src/poster/server.ts | 2 +- .../src/registry/fetchRegistry.test.ts | 2 +- .../src/transforms/rewriteImports.ts | 2 +- packages/shaders-react/LICENSE | 2 +- packages/shaders-react/README.md | 14 ++--- packages/shaders-react/package.json | 2 +- .../shader-monitor/shader-monitor.test.tsx | 6 +-- .../shader-monitor/shader-monitor.tsx | 8 +-- .../shader-scene/shader-scene.test.tsx | 4 +- .../animatable-signal/animatable-signal.ts | 4 +- packages/shaders-react/src/index.ts | 2 +- packages/shaders/LICENSE | 2 +- packages/shaders/README.md | 8 +-- packages/shaders/package.json | 2 +- .../shaders/src/primitives/color-space/lch.ts | 2 +- .../src/primitives/color-space/oklab.ts | 2 +- .../shaders/src/primitives/dither/dither.ts | 2 +- .../create-renderer/create-renderer.ts | 4 +- .../frame-scheduler/frame-scheduler.ts | 2 +- .../runtime/reduced-motion/reduced-motion.ts | 6 +-- registry/registry.json | 4 +- registry/registry.schema.json | 8 +-- scripts/smoke-test-cli.mjs | 6 +-- 74 files changed, 222 insertions(+), 229 deletions(-) rename apps/docs/content/docs/reference/{matter.mdx => shaders.mdx} (90%) diff --git a/AGENTS.md b/AGENTS.md index 0aebe1cc..61d4b97b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,12 +1,12 @@ -# AGENTS.md: Matter project guide +# AGENTS.md: Shaders project guide -You are working on **Matter**, a React shader component library built on WebGPU and Three.js TSL. This file orients any coding agent at the start of a session, including Claude Code, Codex, Cursor, and Gemini CLI. Read it fully before doing anything else. +You are working on **Shaders**, a React shader component library built on WebGPU and Three.js TSL. This file orients any coding agent at the start of a session, including Claude Code, Codex, Cursor, and Gemini CLI. Read it fully before doing anything else. ## Where to find things | You need… | Read… | | -------------------------------------- | ---------------------------------------------------- | -| The full design, what we're building and why | `docs/superpowers/specs/2026-05-02-matter-design.md` | +| The full design, what we're building and why | `docs/superpowers/specs/2026-05-02-shaders-design.md` | | Feature specs and implementation plans | `docs/superpowers/specs/`, `docs/superpowers/plans/` | > **Note.** `docs/superpowers/` holds the specs and plans, and it is gitignored, so it exists only on machines it has been synced to. On a fresh clone those paths are absent. This file plus git history are the portable orientation. @@ -41,7 +41,7 @@ Read the spec for architecture, public APIs, the component catalog, and the anim ## Shader development process -These rules exist because Matter doubles as a shader-learning project for its author. The author is fluent in React, TypeScript, and build tooling. The gap is GPU concepts: uniforms, sampler space, noise types, domain warping, smoothstep, and render passes. Spend explanation budget there. +These rules exist because Shaders doubles as a shader-learning project for its author. The author is fluent in React, TypeScript, and build tooling. The gap is GPU concepts: uniforms, sampler space, noise types, domain warping, smoothstep, and render passes. Spend explanation budget there. 1. **Rebuilds go step by step.** When you improve or rebuild a shader component, translate the design into TSL one step at a time and explain each TSL and GPU concept as it appears. Don't silently refactor existing TSL. 2. **Target structure is the Aurora split.** Write `registry//.tsx` for the component wrapper, holding props, uniforms, and mesh lifecycle in roughly 80 lines, plus `registry//shader.tsx` for the TSL shader function, isolated and reusable. @@ -155,7 +155,7 @@ These rules exist because Matter doubles as a shader-learning project for its au ## Out of scope (don't drift) -The spec puts all of these at v2 or later, even where they'd be easy: image and video filters, particle systems, 3D objects and materials, text effects, cursor effects, Vue and Svelte bindings, a hosted registry endpoint, audio-reactive primitives, a built-in animation library (Matter accepts MotionValue-shaped signals instead), CSS custom-property theming, and per-component material hooks. +The spec puts all of these at v2 or later, even where they'd be easy: image and video filters, particle systems, 3D objects and materials, text effects, cursor effects, Vue and Svelte bindings, a hosted registry endpoint, audio-reactive primitives, a built-in animation library (Shaders accepts MotionValue-shaped signals instead), CSS custom-property theming, and per-component material hooks. ## Deployment diff --git a/LICENSE b/LICENSE index 7c8ffebb..ef1a0273 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2026 Hunter Garrett / Lovo +Copyright (c) 2026 Hunter Garrett / Mattermix Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index c96df31b..780450e0 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ -# Matter +# Shaders React shader components powered by WebGPU and Three.js TSL. > **Status:** v0.1.0 shipped to npm. `npm install -D @mattermix/shaders-cli && npx shaders-cli init && npx shaders-cli add linear-gradient` to scaffold your first component. -## What is Matter? +## What is Shaders? -Matter is a React component library for shader-driven backgrounds and interactive surfaces. It ships polished drop-in components like ``, ``, and `` for developers who don't want to write shaders, alongside a primitives library and recipe gallery for those who do. +Shaders is a React component library for shader-driven backgrounds and interactive surfaces. It ships polished drop-in components like ``, ``, and `` for developers who don't want to write shaders, alongside a primitives library and recipe gallery for those who do. ## Repository structure diff --git a/apps/docs-tests/editor/export-import.spec.ts b/apps/docs-tests/editor/export-import.spec.ts index f9fe2f43..4d5cfc3b 100644 --- a/apps/docs-tests/editor/export-import.spec.ts +++ b/apps/docs-tests/editor/export-import.spec.ts @@ -25,7 +25,7 @@ test('export, reload, import round-trips the graph', async ({ page }) => { const download = await downloadPromise; - expect(download.suggestedFilename()).toBe('matter-graph.json'); + expect(download.suggestedFilename()).toBe('shaders-graph.json'); const downloadPath = await download.path(); diff --git a/apps/docs/content/docs/changelog.mdx b/apps/docs/content/docs/changelog.mdx index 00b09172..3c916f3f 100644 --- a/apps/docs/content/docs/changelog.mdx +++ b/apps/docs/content/docs/changelog.mdx @@ -1,13 +1,13 @@ --- title: Changelog -description: Notable changes per release across the Matter packages. +description: Notable changes per release across the Shaders packages. section: overview order: 30 --- # Changelog -Matter ships as three coordinated npm packages: `@mattermix/shaders` (engine), `@mattermix/shaders-react` (React binding), and `@mattermix/shaders-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo; this page summarizes the headline changes. +Shaders ships as three coordinated npm packages: `@mattermix/shaders` (engine), `@mattermix/shaders-react` (React binding), and `@mattermix/shaders-cli` (copy-paste CLI). Each package has its own `CHANGELOG.md` in the repo; this page summarizes the headline changes. ## Unreleased @@ -62,7 +62,7 @@ import { time } from '@mattermix/shaders' // still here — reduced-motion-gate All Matter-owned primitives (`fbm`, `noise`, `voronoi`, `colorRamp`, `sdfCircle`, `displace`, `cursorRipple`, `quantize`) remain exported from `@mattermix/shaders` unchanged. Registry component sources at 0.2.0 use the new convention. If you copied a component at 0.1.x, update its imports from `@mattermix/shaders` to `three/tsl` for the dropped symbols (or re-add the component via the CLI to pull the 0.2.0 source). -**Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths — no rename, no added docs, no future-swap benefit. Dropping them clarifies the layer boundary: Matter ships value-add primitives, TSL provides the math. See the [matter engine reference](/reference/matter) for the current public surface. +**Why:** Re-exporting pure TSL primitives provided no value beyond shared import paths — no rename, no added docs, no future-swap benefit. Dropping them clarifies the layer boundary: Matter ships value-add primitives, TSL provides the math. See the [matter engine reference](/reference/shaders) for the current public surface. ## 0.1.0 — Initial public release diff --git a/apps/docs/content/docs/cli.mdx b/apps/docs/content/docs/cli.mdx index 77955d34..efac1152 100644 --- a/apps/docs/content/docs/cli.mdx +++ b/apps/docs/content/docs/cli.mdx @@ -1,13 +1,13 @@ --- title: CLI -description: Copy components from the Matter registry into your project with @mattermix/shaders-cli. +description: Copy components from the Shaders registry into your project with @mattermix/shaders-cli. section: overview order: 20 --- # CLI -`@mattermix/shaders-cli` copies polished shader components from the Matter registry directly into your project. It's a shadcn-style copy-paste workflow — once a component is in your repo, it's yours to edit. There's no runtime CLI dependency; you only need it installed during development. +`@mattermix/shaders-cli` copies polished shader components from the Shaders registry directly into your project. It's a shadcn-style copy-paste workflow — once a component is in your repo, it's yours to edit. There's no runtime CLI dependency; you only need it installed during development. ## Install @@ -31,7 +31,7 @@ Default config: ```json { - "componentsDir": "src/components/matter", + "componentsDir": "src/components/shaders", "registryUrl": "https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry", "aliases": { "@/": "src/" }, "tsx": true diff --git a/apps/docs/content/docs/examples.mdx b/apps/docs/content/docs/examples.mdx index 0d32af57..9933abab 100644 --- a/apps/docs/content/docs/examples.mdx +++ b/apps/docs/content/docs/examples.mdx @@ -1,6 +1,6 @@ --- title: Examples -description: Curated combinations of Matter components in real-world patterns. Coming soon. +description: Curated combinations of Shaders components in real-world patterns. Coming soon. section: overview order: 40 status: draft @@ -14,6 +14,6 @@ In the meantime: - The [component pages](/components) each include a live demo, a props playground, and the exact source the CLI copies into your project. - The [primitives pages](/primitives) show the lower-level TSL building blocks. If you want to write your own shader, start there. -- The [Shared scenes guide](/guides/shared-scenes) shows how to combine multiple Matter components inside one ``. +- The [Shared scenes guide](/guides/shared-scenes) shows how to combine multiple Shaders components inside one ``. -If you build something with Matter, [open a PR on GitHub](https://github.com/mattermix/shaders) — selected examples will land on this page. +If you build something with Shaders, [open a PR on GitHub](https://github.com/mattermix/shaders) — selected examples will land on this page. diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx index bc266c05..fc256d29 100644 --- a/apps/docs/content/docs/getting-started.mdx +++ b/apps/docs/content/docs/getting-started.mdx @@ -1,16 +1,16 @@ --- title: Get Started -description: Install Matter, copy your first component, and render it inside ShaderScene. +description: Install Shaders, copy your first component, and render it inside ShaderScene. section: overview order: 10 --- # Get Started -Matter is a React component library for WebGPU shaders built on Three.js TSL. Components are delivered shadcn-style — the CLI copies polished `.tsx` files into your project, where you own and edit them. +Shaders is a React component library for WebGPU shaders built on Three.js TSL. Components are delivered shadcn-style — the CLI copies polished `.tsx` files into your project, where you own and edit them. - **WebGPU only.** Matter requires a WebGPU-capable browser (recent Chromium, Safari Technology Preview, or Firefox Nightly with the flag). Plan a fallback for users without WebGPU — see [SSR and fallbacks](/react/guides/ssr-and-fallbacks). + **WebGPU only.** Shaders requires a WebGPU-capable browser (recent Chromium, Safari Technology Preview, or Firefox Nightly with the flag). Plan a fallback for users without WebGPU — see [SSR and fallbacks](/react/guides/ssr-and-fallbacks). ## Install @@ -27,7 +27,7 @@ Requirements: - React 19 - Three.js `^0.170` - Node 22+ (for the CLI) -- Next.js 15+ if you're using one (Matter doesn't require Next, but the docs and recipes assume it) +- Next.js 15+ if you're using one (Shaders doesn't require Next, but the docs and recipes assume it) ## Initialize @@ -39,7 +39,7 @@ Requirements: npx shaders-cli init ``` - This creates a config with sensible defaults — components land in `src/components/matter/`, the registry tracks the CLI's published version tag, and TSX is enabled. + This creates a config with sensible defaults — components land in `src/components/shaders/`, the registry tracks the CLI's published version tag, and TSX is enabled.
  • **List available components:** @@ -55,17 +55,17 @@ Requirements: npx shaders-cli add linear-gradient ``` - The component lands in `src/components/matter/linear-gradient.tsx`. From that point on, the file is yours — edit it however you want. + The component lands in `src/components/shaders/linear-gradient.tsx`. From that point on, the file is yours — edit it however you want.
    • ## Render it -Every Matter component is bare — it needs a `` parent to provide the WebGPU canvas. The simplest valid usage: +Every Shaders component is bare — it needs a `` parent to provide the WebGPU canvas. The simplest valid usage: ```tsx import { ShaderScene } from '@mattermix/shaders-react' -import { LinearGradient } from '@/components/matter/linear-gradient' +import { LinearGradient } from '@/components/shaders/linear-gradient' export function Hero() { return ( @@ -76,11 +76,11 @@ export function Hero() { } ``` -`` owns the canvas and the WebGPU renderer. Multiple Matter components can share the same scene — just stack them as children. See [Shared scenes](/guides/shared-scenes). +`` owns the canvas and the WebGPU renderer. Multiple Shaders components can share the same scene — just stack them as children. See [Shared scenes](/guides/shared-scenes). ## What's next - [Animation](/guides/animation) — signal-shaped props for cursor, scroll, and any MotionValue-compatible library. -- [Performance](/guides/perf) — what Matter does for you automatically, and what you can tune. +- [Performance](/guides/perf) — what Shaders does for you automatically, and what you can tune. - [The CLI](/cli) — `add`, `update`, refresh workflows, and registry refs. -- [Three / r3f](/react/guides/three-r3f) — using Matter inside a `` you already own. +- [Three / r3f](/react/guides/three-r3f) — using Shaders inside a `` you already own. diff --git a/apps/docs/content/docs/guides/animation.mdx b/apps/docs/content/docs/guides/animation.mdx index f9ef9567..e0996fca 100644 --- a/apps/docs/content/docs/guides/animation.mdx +++ b/apps/docs/content/docs/guides/animation.mdx @@ -1,13 +1,13 @@ --- title: Animation -description: Signal-shaped props, MotionValue compatibility, and how Matter animates uniforms on the GPU. +description: Signal-shaped props, MotionValue compatibility, and how Shaders animates uniforms on the GPU. section: guides order: 10 --- # Animation -Matter doesn't ship its own animation library. Component props that need to animate accept either a static value or a **signal** — anything with a `get()` and `on('change', callback)` shape. Motion's `MotionValue`, Jotai atoms with a wrapper, custom signal libraries — they all work, because Matter just reads the current value and subscribes to changes. +Shaders doesn't ship its own animation library. Component props that need to animate accept either a static value or a **signal** — anything with a `get()` and `on('change', callback)` shape. Motion's `MotionValue`, Jotai atoms with a wrapper, custom signal libraries — they all work, because Shaders just reads the current value and subscribes to changes. ## The signal contract @@ -20,7 +20,7 @@ interface AnimatableSignal { } ``` -When a Matter component receives a signal as a prop, it: +When a Shaders component receives a signal as a prop, it: 1. Reads `signal.get()` to seed the uniform — on mount, and again whenever the signal is swapped for another. 2. Subscribes with `on('change', …)` and writes each new value into the GPU uniform. @@ -35,7 +35,7 @@ The animation engine doesn't run on the CPU per-frame — values flow straight i ```tsx import { useMotionValue, useTransform, useScroll } from 'motion/react' import { ShaderScene } from '@mattermix/shaders-react' -import { DotField } from '@/components/matter/dot-field' +import { DotField } from '@/components/shaders/dot-field' export function Hero() { const { scrollYProgress } = useScroll() @@ -49,11 +49,11 @@ export function Hero() { } ``` -`reach` is a `MotionValue` — Matter subscribes to it and pipes updates into the `reach` uniform. +`reach` is a `MotionValue` — Shaders subscribes to it and pipes updates into the `reach` uniform. ## Built-in input signals -Matter ships three React hooks that produce ready-to-use signals — they handle the canvas-aware math and Strict Mode lifecycle correctly: +Shaders ships three React hooks that produce ready-to-use signals — they handle the canvas-aware math and Strict Mode lifecycle correctly: - `useCursor()` — returns a `CursorSignal` with `value` ([0,1] across the canvas rect, not the viewport). - `useScroll()` — returns a `ScrollSignal` with normalized scroll progress. @@ -82,10 +82,10 @@ function Cursor() { If you're wiring up a custom shader, `useAnimatableUniform` is the lower-level escape hatch — pass it a static value or a signal and it returns a TSL uniform node that tracks it. `useAnimatablePoint` does the same for `[x, y]` pairs like `center`. See [the React API](/react/api) for the full signatures. -## What Matter does NOT ship +## What Shaders does NOT ship - No built-in spring / keyframe / timeline library. - No ``-style component primitives. - No state machine glue. -Bring your own animation library. Matter just consumes signals. +Bring your own animation library. Shaders just consumes signals. diff --git a/apps/docs/content/docs/guides/color.mdx b/apps/docs/content/docs/guides/color.mdx index 7fd1efc3..87654483 100644 --- a/apps/docs/content/docs/guides/color.mdx +++ b/apps/docs/content/docs/guides/color.mdx @@ -7,7 +7,7 @@ order: 15 # Color -Matter has three color controls that sound related and are not. `colorSpace` decides how two colors blend. `gamut` decides what the framebuffer can hold. Wide-gamut input is neither — it's just what happens when you write a color that sRGB can't express. Most confusion here comes from assuming one of them does another's job. +Shaders has three color controls that sound related and are not. `colorSpace` decides how two colors blend. `gamut` decides what the framebuffer can hold. Wide-gamut input is neither — it's just what happens when you write a color that sRGB can't express. Most confusion here comes from assuming one of them does another's job. ## `colorSpace` — how colors blend @@ -55,7 +55,7 @@ Whatever the gamut, every scene quietly dithers its final output: noise smaller ## Wide-gamut input -This is the part that needs no props at all. Write a color in `oklch()` or `oklab()` and Matter decodes it to unclamped linear-sRGB, so a color outside the sRGB cube stays outside it, all the way to the framebuffer: +This is the part that needs no props at all. Write a color in `oklch()` or `oklab()` and Shaders decodes it to unclamped linear-sRGB, so a color outside the sRGB cube stays outside it, all the way to the framebuffer: ```tsx // Greener than sRGB can express. Survives if the output gamut allows it. @@ -74,4 +74,4 @@ Think of it as a pipeline, one control per stage: They compose independently. A wide-gamut `oklch()` input blended in `oklab` and written to a `p3` framebuffer is the common case, and none of those three choices constrains the others. Reaching for `colorSpace` to fix a color that looks dull on a wide display is the usual mistake — that's stage 3's job. -For the CPU-side functions behind stage 1 — `parseColorString`, the conversions, the gamut helpers — see [the engine reference](/reference/matter#color-math--lovomattercolor). They come from `@mattermix/shaders/color`, which has no path to three, so you can call them wherever you need them: in the browser, or during a server render where the root entry would crash. +For the CPU-side functions behind stage 1 — `parseColorString`, the conversions, the gamut helpers — see [the engine reference](/reference/shaders#color-math--mattermixshaderscolor). They come from `@mattermix/shaders/color`, which has no path to three, so you can call them wherever you need them: in the browser, or during a server render where the root entry would crash. diff --git a/apps/docs/content/docs/guides/perf.mdx b/apps/docs/content/docs/guides/perf.mdx index 0a4feddd..be5fc391 100644 --- a/apps/docs/content/docs/guides/perf.mdx +++ b/apps/docs/content/docs/guides/perf.mdx @@ -1,19 +1,19 @@ --- title: Performance -description: What Matter does automatically and what you can tune for offscreen pausing, DPR, reduced motion, and static renders. +description: What Shaders does automatically and what you can tune for offscreen pausing, DPR, reduced motion, and static renders. section: guides order: 20 --- # Performance -Matter applies five engine-level defaults you don't have to wire up yourself. This page covers what's automatic, what's tunable, and how to opt out when you need to. +Shaders applies five engine-level defaults you don't have to wire up yourself. This page covers what's automatic, what's tunable, and how to opt out when you need to. ## Pause when offscreen Every `` registers an `IntersectionObserver` on its canvas. When the canvas leaves the viewport, the scheduler unsubscribes the scene — no GPU frames are produced. When the canvas re-enters, rendering resumes from where it left off. -This is on by default and applies to all Matter components without per-component code. You don't need to do anything. +This is on by default and applies to all Shaders components without per-component code. You don't need to do anything. If you depend on continuous rendering — for example, you're capturing the canvas as a texture for another effect — opt out of offscreen pause by setting `pauseOffscreen={false}` on ``. @@ -35,11 +35,11 @@ Drop to `dprMax={1}` for the cheapest possible render, or set `dprMax={Infinity} ## Reduced motion -Matter reads `prefers-reduced-motion: reduce` on mount and respects the user's choice automatically. Three policies are available via `setReducedMotionPolicy`: +Shaders reads `prefers-reduced-motion: reduce` on mount and respects the user's choice automatically. Three policies are available via `setReducedMotionPolicy`: - `'respect'` (default) — when the user prefers reduced motion, animation time scales by `0` (effectively pausing time). - `'slow'` — time scales by `0.3`. -- `'ignore'` — Matter ignores the OS hint entirely. +- `'ignore'` — Shaders ignores the OS hint entirely. ```ts import { setReducedMotionPolicy } from '@mattermix/shaders' @@ -51,7 +51,7 @@ This is global to the page and runs once at module init. The hook `useStaticScen ## Static / render-on-demand -For decorative shaders that don't actually need to animate every frame, you can hint to Matter that the scene is "static" — it renders once on mount, then only on prop / signal changes. +For decorative shaders that don't actually need to animate every frame, you can hint to Shaders that the scene is "static" — it renders once on mount, then only on prop / signal changes. ```tsx import { ShaderScene, useStaticSceneHint } from '@mattermix/shaders-react' diff --git a/apps/docs/content/docs/guides/shared-scenes.mdx b/apps/docs/content/docs/guides/shared-scenes.mdx index 6575faf6..799fbf50 100644 --- a/apps/docs/content/docs/guides/shared-scenes.mdx +++ b/apps/docs/content/docs/guides/shared-scenes.mdx @@ -7,14 +7,14 @@ order: 30 # Shared scenes -Every Matter component renders to a WebGPU canvas owned by its parent ``. Components are bare — they don't bring their own canvas. To compose multiple effects, you stack them as children of the same ``. +Every Shaders component renders to a WebGPU canvas owned by its parent ``. Components are bare — they don't bring their own canvas. To compose multiple effects, you stack them as children of the same ``. ## The pattern ```tsx import { ShaderScene } from '@mattermix/shaders-react' -import { Aurora } from '@/components/matter/aurora' -import { DotField } from '@/components/matter/dot-field' +import { Aurora } from '@/components/shaders/aurora' +import { DotField } from '@/components/shaders/dot-field' export function Hero() { return ( @@ -63,4 +63,4 @@ Each component renders to its own quad in the scene — there's no built-in blen ## Multiple scenes on one page -There's no restriction on how many `` instances a page can host. Each owns its own WebGPU device, so they're truly independent. The home-page mock for Matter uses four scenes (hero, feature row, section divider, footer) and pauses each one when it scrolls out of view. +There's no restriction on how many `` instances a page can host. Each owns its own WebGPU device, so they're truly independent. The home-page mock for Shaders uses four scenes (hero, feature row, section divider, footer) and pauses each one when it scrolls out of view. diff --git a/apps/docs/content/docs/react/api.mdx b/apps/docs/content/docs/react/api.mdx index 06b450dd..63572d57 100644 --- a/apps/docs/content/docs/react/api.mdx +++ b/apps/docs/content/docs/react/api.mdx @@ -11,7 +11,7 @@ Everything exported from `@mattermix/shaders-react`. This page is hand-written f ## `` -The scene wrapper. Owns the WebGPU canvas, creates the renderer, runs the scheduler. Every Tier 1 Matter component must render inside one. +The scene wrapper. Owns the WebGPU canvas, creates the renderer, runs the scheduler. Every Tier 1 Shaders component must render inside one. ```tsx import { ShaderScene } from '@mattermix/shaders-react' @@ -34,12 +34,12 @@ import { ShaderScene } from '@mattermix/shaders-react' | `pauseOffscreen` | `boolean` | `true` | Whether to pause rendering when the canvas leaves the viewport. | | `style` | `CSSProperties` | — | Forwarded to the canvas container. | | `className` | `string` | — | Forwarded to the canvas container. | -| `children` | `ReactNode` | — | One or more Matter components. | +| `children` | `ReactNode` | — | One or more Shaders components. | | `onError` | `(error: ShadersError) => void` | — | Called once if renderer init fails (e.g. no GPU backend). Receives a `ShadersError` with `code: 'renderer-init'` and the original error on `.cause`. | ## `useShaderMaterial` -The lower-level hook for users who already own a `` from `@react-three/fiber`. Use this when you want Matter primitives inside your own r3f scene — see [Three / r3f](/react/guides/three-r3f). +The lower-level hook for users who already own a `` from `@react-three/fiber`. Use this when you want Shaders primitives inside your own r3f scene — see [Three / r3f](/react/guides/three-r3f). ```tsx import { useShaderMaterial } from '@mattermix/shaders-react' @@ -111,7 +111,7 @@ Each scheduler tick adds `speed × min(delta, 0.1)` (scaled for `prefers-reduced ## `` -Renders fallback content when WebGPU is unavailable or initialization fails. Wrap any Matter subtree: +Renders fallback content when WebGPU is unavailable or initialization fails. Wrap any Shaders subtree: ```tsx }> diff --git a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx index c9118e2b..390674bc 100644 --- a/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx +++ b/apps/docs/content/docs/react/guides/ssr-and-fallbacks.mdx @@ -7,20 +7,20 @@ order: 10 # SSR and fallbacks -Matter is fundamentally a client runtime — it needs `navigator.gpu`, which doesn't exist on the server. This page covers the patterns for using Matter in Next.js (or any SSR framework) and handling browsers that don't support WebGPU at all. +Shaders is fundamentally a client runtime — it needs `navigator.gpu`, which doesn't exist on the server. This page covers the patterns for using Shaders in Next.js (or any SSR framework) and handling browsers that don't support WebGPU at all. ## The core constraint `three/webgpu` references `self` and `navigator` at module load time. Importing it in a server bundle (RSC, getServerSideProps, etc.) throws. So: -- Matter components are always client components. -- Pages that import them either need `'use client'` themselves, or they need to load Matter via `next/dynamic` with SSR disabled. +- Shaders components are always client components. +- Pages that import them either need `'use client'` themselves, or they need to load Shaders via `next/dynamic` with SSR disabled. That applies to anything reaching the renderer. It does not apply to every export both packages have, which is what the subpaths below are for. ## The three-free subpaths -Some of what Matter ships is plain arithmetic that never touches the GPU: parsing a color string, converting between OKLCH and linear sRGB, asking whether a display can show a color. Those reach `three/webgpu` only because the root entry re-exports the renderer alongside them, so each has a second entry point that doesn't. +Some of what Shaders ships is plain arithmetic that never touches the GPU: parsing a color string, converting between OKLCH and linear sRGB, asking whether a display can show a color. Those reach `three/webgpu` only because the root entry re-exports the renderer alongside them, so each has a second entry point that doesn't. | Import from | Instead of | For | | --- | --- | --- | @@ -91,11 +91,11 @@ This forces every `three` import to resolve to the unified bundle. Same idea app ## Fallback for browsers without WebGPU -Some browsers (Firefox stable, Safari < 18, older Chrome) don't ship WebGPU yet. Wrap any Matter subtree in ``: +Some browsers (Firefox stable, Safari < 18, older Chrome) don't ship WebGPU yet. Wrap any Shaders subtree in ``: ```tsx import { FallbackBoundary, ShaderScene } from '@mattermix/shaders-react' -import { Aurora } from '@/components/matter/aurora' +import { Aurora } from '@/components/shaders/aurora' export function Hero() { return ( @@ -134,4 +134,4 @@ If you wrap a scene in `next/dynamic` with `ssr: false`, nothing from that subtr The subpaths are the exception, and worth remembering when you reach for `ssr: false` reflexively. A page that reads colors with `@mattermix/shaders/color`, or checks the display gamut with `@mattermix/shaders-react/gamut`, or shows a `` while the scene loads, renders all of that on the server normally. Only the scene itself has to wait. -If you have SEO-critical content that's currently hidden behind a Matter component, lift it out into the surrounding RSC. Matter is for decoration; the surrounding page is for content. +If you have SEO-critical content that's currently hidden behind a Shaders component, lift it out into the surrounding RSC. Shaders is for decoration; the surrounding page is for content. diff --git a/apps/docs/content/docs/react/guides/three-r3f.mdx b/apps/docs/content/docs/react/guides/three-r3f.mdx index 371c06a0..cb7494de 100644 --- a/apps/docs/content/docs/react/guides/three-r3f.mdx +++ b/apps/docs/content/docs/react/guides/three-r3f.mdx @@ -1,16 +1,16 @@ --- title: Three / r3f -description: Use Matter primitives inside a Canvas you already own (Mode 2). +description: Use Shaders primitives inside a Canvas you already own (Mode 2). section: react.guides order: 20 --- # Three / r3f -Matter has two rendering modes: +Shaders has two rendering modes: -- **Mode 1: Matter-managed scene.** `` owns the canvas. Tier 1 components (``, ``, etc.) only work in Mode 1. This is what [Get Started](/getting-started) covers. -- **Mode 2: Bring your own Canvas.** You already have an `@react-three/fiber` `` for a 3D scene, and you want Matter's TSL primitives in a material. This page is for Mode 2. +- **Mode 1: Shaders-managed scene.** `` owns the canvas. Tier 1 components (``, ``, etc.) only work in Mode 1. This is what [Get Started](/getting-started) covers. +- **Mode 2: Bring your own Canvas.** You already have an `@react-three/fiber` `` for a 3D scene, and you want Shaders' TSL primitives in a material. This page is for Mode 2. Mode 2 doesn't auto-detect r3f — it's an explicit opt-in via the `useShaderMaterial` hook. @@ -44,13 +44,13 @@ export function Scene() { } ``` -The material plays by r3f's rules — dispose, frameloop, demand-rendering all work as r3f expects. Matter just provides the TSL math; r3f provides the scene graph. +The material plays by r3f's rules — dispose, frameloop, demand-rendering all work as r3f expects. Shaders just provides the TSL math; r3f provides the scene graph. ## When to use Mode 2 - You're building a 3D scene (geometry, lights, cameras) that also wants shader-y materials. - You need fine control over the render loop (custom frameloop, post-processing chain). -- You want to use Matter primitives (`fractalNoise`, `voronoi`, `colorRamp`, …) without the constraints of a single full-bleed 2D quad. +- You want to use Shaders primitives (`fractalNoise`, `voronoi`, `colorRamp`, …) without the constraints of a single full-bleed 2D quad. ## What you lose in Mode 2 @@ -63,5 +63,5 @@ The material plays by r3f's rules — dispose, frameloop, demand-rendering all w Default to Mode 1. Mode 2 exists for the case where you already have an r3f scene and the alternative is duplicating shader work in two canvases. If you're not building a 3D scene, you don't need Mode 2 — `` does everything you want. - Matter and r3f can coexist on the same page in separate canvases — one `` for your hero shader, one r3f `` for a 3D model below it. They don't interfere. Mode 2 is only relevant when you want to *combine* them in one canvas. + Shaders and r3f can coexist on the same page in separate canvases — one `` for your hero shader, one r3f `` for a 3D model below it. They don't interfere. Mode 2 is only relevant when you want to *combine* them in one canvas. diff --git a/apps/docs/content/docs/reference/matter.mdx b/apps/docs/content/docs/reference/shaders.mdx similarity index 90% rename from apps/docs/content/docs/reference/matter.mdx rename to apps/docs/content/docs/reference/shaders.mdx index e800acff..c67286d4 100644 --- a/apps/docs/content/docs/reference/matter.mdx +++ b/apps/docs/content/docs/reference/shaders.mdx @@ -25,13 +25,13 @@ TSL building blocks for writing shader expressions. Each primitive is documented ## Layering and `elapsedTime` -Matter sits on top of Three.js's TSL. Pure TSL primitives (`uv`, `vec2`, `vec3`, `vec4`, `uniform`, `mix`, `smoothstep`, `mod`, `sin`, `cos`, `length`, `dot`, `normalize`, `max`, `min`) live in `three/tsl` — import them directly from there: +Shaders sits on top of Three.js's TSL. Pure TSL primitives (`uv`, `vec2`, `vec3`, `vec4`, `uniform`, `mix`, `smoothstep`, `mod`, `sin`, `cos`, `length`, `dot`, `normalize`, `max`, `min`) live in `three/tsl` — import them directly from there: ```ts import { uv, vec3, uniform, mix } from 'three/tsl' ``` -Matter exports one TSL node of its own: **`elapsedTime`**. It's the TSL built-in `time` multiplied by an engine-owned reduced-motion scale uniform, so every component that animates against `elapsedTime` from `@mattermix/shaders` automatically respects `prefers-reduced-motion` and the policy override set via `setReducedMotionPolicy`. +Shaders exports one TSL node of its own: **`elapsedTime`**. It's the TSL built-in `time` multiplied by an engine-owned reduced-motion scale uniform, so every component that animates against `elapsedTime` from `@mattermix/shaders` automatically respects `prefers-reduced-motion` and the policy override set via `setReducedMotionPolicy`. ```ts import { elapsedTime } from '@mattermix/shaders' diff --git a/apps/docs/src/app/components/linear-gradient/page.tsx b/apps/docs/src/app/components/linear-gradient/page.tsx index 32591ad1..9a1868cd 100644 --- a/apps/docs/src/app/components/linear-gradient/page.tsx +++ b/apps/docs/src/app/components/linear-gradient/page.tsx @@ -94,7 +94,7 @@ export default function LinearGradientPage() {

    <LinearGradient />

    -

    Animated linear gradient. The simplest, foundational Matter component.

    +

    Animated linear gradient. The simplest, foundational Shaders component.

                 {`import { ShaderScene } from '@mattermix/shaders-react'
-import { SimplexNoise } from '@/components/matter/simplex-noise'
+import { SimplexNoise } from '@/components/shaders/simplex-noise'
 
 
   
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
index 19e4dd64..4a6e69a9 100644
--- a/apps/docs/src/app/layout.tsx
+++ b/apps/docs/src/app/layout.tsx
@@ -8,7 +8,7 @@ import './globals.css';
 import { Providers } from './providers';
 
 export const metadata = {
-  title: 'Matter — React shader components',
+  title: 'Shaders — React shader components',
   description: 'WebGPU + TSL shader components for React.',
 };
 
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             }}
           >
             
-              Matter
+              Shaders
             
             
    
               
diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
index 58fd8514..3b71e2bf 100644
--- a/apps/docs/src/app/page.tsx
+++ b/apps/docs/src/app/page.tsx
@@ -13,7 +13,7 @@ const COMPONENTS = [
 export default function Home() {
   return (
     
    
-      
    Matter
    
+      
    Shaders
    
       
    React shader components powered by WebGPU and Three.js TSL.
    
       
    Status: pre-release, M3 complete — six v1 components live.
    
       
    Components
    
diff --git a/apps/docs/src/app/palette/PaletteView.tsx b/apps/docs/src/app/palette/PaletteView.tsx
index 71f98bd6..b0612e64 100644
--- a/apps/docs/src/app/palette/PaletteView.tsx
+++ b/apps/docs/src/app/palette/PaletteView.tsx
@@ -281,7 +281,7 @@ export function PaletteView() {
           }}
         >
           
    
-            
    Matter palette
    
+            
    Shaders palette
    
             
    
               Gray, moss, and all twelve accents share one twelve-step lightness ladder; the brand
               lime scale runs a ladder of its own.
diff --git a/apps/docs/src/app/palette/page.tsx b/apps/docs/src/app/palette/page.tsx
index 1ddd4e59..8ceeb580 100644
--- a/apps/docs/src/app/palette/page.tsx
+++ b/apps/docs/src/app/palette/page.tsx
@@ -1,8 +1,8 @@
 import { PaletteView } from './PaletteView';
 
 export const metadata = {
-  title: 'Palette — Matter',
-  description: 'The brand-aligned color palette used by every Matter example.',
+  title: 'Palette — Shaders',
+  description: 'The brand-aligned color palette used by every Shaders example.',
 };
 
 export default function PalettePage() {
diff --git a/apps/editor/src/app/layout.tsx b/apps/editor/src/app/layout.tsx
index ad614763..6d9e3d3a 100644
--- a/apps/editor/src/app/layout.tsx
+++ b/apps/editor/src/app/layout.tsx
@@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
 // styles.
 import '@/controls/controls.css';
 
-export const metadata = { title: 'Matter Editor' };
+export const metadata = { title: 'Shaders Editor' };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/apps/editor/src/app/parity/generated.gen.tsx b/apps/editor/src/app/parity/generated.gen.tsx
index a6116a68..d401b6e2 100644
--- a/apps/editor/src/app/parity/generated.gen.tsx
+++ b/apps/editor/src/app/parity/generated.gen.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-// Generated by the Matter editor. A bare Matter component: mount it inside a
+// Generated by the Shaders editor. A bare Shaders component: mount it inside a
 // ShaderScene. Fields are functions of the sample position — warping is
 // calling a field at a shifted point — and every editor dial arrived below
 // as a prop with the editor's value as its default.
diff --git a/apps/editor/src/editor/graph/compile.ts b/apps/editor/src/editor/graph/compile.ts
index a7ee848d..9734d004 100644
--- a/apps/editor/src/editor/graph/compile.ts
+++ b/apps/editor/src/editor/graph/compile.ts
@@ -1,5 +1,5 @@
 // The graph-to-TSL compiler: walks the card graph from an Output node
-// backward and assembles a TSL color expression from Matter's Tier 2
+// backward and assembles a TSL color expression from Shaders' Tier 2
 // primitives. The core representation: a compiled field is a FUNCTION of the
 // sample position, `(p) => value`, not a value — that's what lets Warp work,
 // because warping IS calling the upstream field at a shifted position. Slider
diff --git a/apps/editor/src/editor/graph/emit.test.ts b/apps/editor/src/editor/graph/emit.test.ts
index 87096a1a..4b9397f4 100644
--- a/apps/editor/src/editor/graph/emit.test.ts
+++ b/apps/editor/src/editor/graph/emit.test.ts
@@ -172,7 +172,7 @@ describe('emitComponentSource on the starter graph', () => {
   });
 
   it('says it was generated by the editor', () => {
-    expect(source).toContain('Generated by the Matter editor');
+    expect(source).toContain('Generated by the Shaders editor');
   });
 });
 
diff --git a/apps/editor/src/editor/graph/emit.ts b/apps/editor/src/editor/graph/emit.ts
index 19a9f47a..164d5dac 100644
--- a/apps/editor/src/editor/graph/emit.ts
+++ b/apps/editor/src/editor/graph/emit.ts
@@ -54,8 +54,8 @@ class Emission {
   hookLines: string[] = [];
   props: PropLine[] = [];
   /** Named imports actually used, per module, so the file imports stay clean. */
-  matterImports = new Set();
-  matterReactImports = new Set(['useShaderContext']);
+  shadersImports = new Set();
+  shadersReactImports = new Set(['useShaderContext']);
   tslImports = new Set();
   usesParseColor = false;
   usesColorSpaces = false;
@@ -105,7 +105,7 @@ function grainBlendOf(node: GraphNode): string {
 
 /**
  * Emits a complete, drop-in component file for the subgraph feeding
- * `outputId`. The result is a bare Matter component (mount inside a
+ * `outputId`. The result is a bare Shaders component (mount inside a
  * ShaderScene); unwired inputs fall back exactly like the runtime compiler,
  * so the generated file renders the same image as the Output card.
  */
@@ -224,7 +224,7 @@ export function emitComponentSource(
 
     const propName = claimDialProp(node, baseName, 'speed');
 
-    emission.matterReactImports.add('useAnimatableSpeed');
+    emission.shadersReactImports.add('useAnimatableSpeed');
     emission.hookLines.push(`const ${propName}Phase = useAnimatableSpeed(${propName});`);
     dialNames.set(dialKey, `${propName}Phase`);
     speedPropNames.set(node.id, propName);
@@ -251,7 +251,7 @@ export function emitComponentSource(
 
     const gateName = emission.claim(`${propName}Uniform`);
 
-    emission.matterReactImports.add('useAnimatableUniform');
+    emission.shadersReactImports.add('useAnimatableUniform');
     emission.hookLines.push(`const ${gateName} = useAnimatableUniform(${propName});`);
     speedGateNames.set(node.id, gateName);
 
@@ -389,7 +389,7 @@ export function emitComponentSource(
         const balance = emitDial(node, base, 'balance');
         const phase = emitSpeedDial(node, base);
 
-        emission.matterImports.add('simplexNoise');
+        emission.shadersImports.add('simplexNoise');
         for (const used of ['clamp', 'vec3']) emission.tslImports.add(used);
         emission.helperLines.push(
           `// 3D simplex with the animation phase on z: the pattern morphs in`,
@@ -424,7 +424,7 @@ export function emitComponentSource(
         const style = fractalStyleOf(node);
         const { stretch, lift } = FRACTAL_STYLE_REMAP[style];
 
-        emission.matterImports.add('fractalNoise');
+        emission.shadersImports.add('fractalNoise');
         for (const used of ['clamp', 'float', 'mix', 'vec3']) emission.tslImports.add(used);
         emission.helperLines.push(
           `// The detail dial maps onto fBm gain — the per-octave amplitude`,
@@ -467,7 +467,7 @@ export function emitComponentSource(
         const drift = emitDial(node, base, 'drift');
         const phase = emitSpeedDial(node, base);
 
-        emission.matterImports.add('voronoiCells');
+        emission.shadersImports.add('voronoiCells');
         for (const used of ['clamp', 'mix']) emission.tslImports.add(used);
         emission.helperLines.push(
           `// Two fields from one cell walk, blended by shading: edgeDistance`,
@@ -502,7 +502,7 @@ export function emitComponentSource(
         const centerY = emitDial(node, base, 'center.y');
         const phase = emitSpeedDial(node, base);
 
-        emission.matterImports.add('metaballs');
+        emission.shadersImports.add('metaballs');
         for (const used of ['float', 'fwidth', 'smoothstep', 'vec2']) emission.tslImports.add(used);
         emission.helperLines.push(
           `// metaballs wants centered pattern space — subtracting center puts`,
@@ -561,7 +561,7 @@ export function emitComponentSource(
     const name = `${base}Field`;
     const amount = emitDial(node, base, 'amount');
 
-    emission.matterImports.add('displace');
+    emission.shadersImports.add('displace');
     emission.tslImports.add('vec2');
     emission.helperLines.push(
       `// Domain warp: two far-apart taps of the driver become the x/y of a`,
@@ -728,7 +728,7 @@ export function emitComponentSource(
         const centerY = emitDial(node, base, 'center.y');
         const tint = emitColorDial(node, base, 'color');
 
-        emission.matterImports.add('mixColor');
+        emission.shadersImports.add('mixColor');
         for (const used of ['vec2', 'vec3', 'uv', 'length', 'smoothstep', 'max', 'screenSize'])
           emission.tslImports.add(used);
         emission.helperLines.push(
@@ -755,7 +755,7 @@ export function emitComponentSource(
         const phase = emitSpeedDial(node, base);
         const subtractive = grainBlendOf(node) === 'subtractive';
 
-        emission.matterImports.add('grain');
+        emission.shadersImports.add('grain');
         for (const used of [subtractive ? 'sub' : 'add', 'floor', 'vec3'])
           emission.tslImports.add(used);
         emission.helperLines.push(
@@ -794,7 +794,7 @@ export function emitComponentSource(
           const base = emission.claim('ramp');
           const name = `${base}Color`;
 
-          emission.matterImports.add('colorRamp');
+          emission.shadersImports.add('colorRamp');
           emission.usesParseColor = true;
           emission.tslImports.add('vec3');
           emission.tslImports.add('uv');
@@ -878,11 +878,11 @@ export function emitComponentSource(
 // ---------------------------------------------------------------------------
 
 function assembleFile(emission: Emission, finalColorExpr: string): string {
-  if (emission.usesColorSpaces) emission.matterImports.add('colorSpaces');
+  if (emission.usesColorSpaces) emission.shadersImports.add('colorSpaces');
 
   const sortedTsl = [...emission.tslImports].sort();
-  const sortedMatter = [...emission.matterImports].sort();
-  const sortedMatterReact = [...emission.matterReactImports].sort();
+  const sortedShadersImports = [...emission.shadersImports].sort();
+  const sortedShadersReactImports = [...emission.shadersReactImports].sort();
 
   const propsInterface = emission.props
     .map((prop) => `  /** ${prop.jsdoc} */\n  ${prop.name}?: ${prop.tsType};`)
@@ -955,21 +955,23 @@ function assembleFile(emission: Emission, finalColorExpr: string): string {
     return `import {\n${names.map((name) => `  ${name},`).join('\n')}\n} from '${moduleName}';`;
   };
 
-  const matterImportLine =
-    sortedMatter.length > 0 ? `${importLineOf(sortedMatter, '@mattermix/shaders')}\n` : '';
+  const shadersImportLine =
+    sortedShadersImports.length > 0
+      ? `${importLineOf(sortedShadersImports, '@mattermix/shaders')}\n`
+      : '';
   const parseColorLine = emission.usesParseColor
     ? `import { parseColorString } from '@mattermix/shaders/color';\n`
     : '';
 
   return `'use client';
 
-// Generated by the Matter editor. A bare Matter component: mount it inside a
+// Generated by the Shaders editor. A bare Shaders component: mount it inside a
 // ShaderScene. Fields are functions of the sample position — warping is
 // calling a field at a shifted point — and every editor dial arrived below
 // as a prop with the editor's value as its default.
 import { useEffect } from 'react';
 
-${matterImportLine}${importLineOf(sortedMatterReact, '@mattermix/shaders-react')}
+${shadersImportLine}${importLineOf(sortedShadersReactImports, '@mattermix/shaders-react')}
 ${parseColorLine}${importLineOf(sortedTsl, 'three/tsl')}
 import type { ShaderNodeObject } from 'three/tsl';
 import { Mesh, MeshBasicNodeMaterial, PlaneGeometry } from 'three/webgpu';
diff --git a/apps/editor/src/editor/graph/registry.ts b/apps/editor/src/editor/graph/registry.ts
index e888e71b..849e77b3 100644
--- a/apps/editor/src/editor/graph/registry.ts
+++ b/apps/editor/src/editor/graph/registry.ts
@@ -1,5 +1,5 @@
 // Node vocabulary for the shader editor. Each entry is one "macro node": a
-// whole Matter primitive presented as a single card, never a raw TSL op.
+// whole Shaders primitive presented as a single card, never a raw TSL op.
 // Users only ever see two port types — field (a grayscale value per pixel) and
 // color. Every port carries exactly one small word: "in"/"out" for the main
 // flow, prepositions ("by", "with", "using") for modifier inputs — never vague
diff --git a/apps/editor/src/editor/panels/EditorActions.tsx b/apps/editor/src/editor/panels/EditorActions.tsx
index 7693db92..4a2439c9 100644
--- a/apps/editor/src/editor/panels/EditorActions.tsx
+++ b/apps/editor/src/editor/panels/EditorActions.tsx
@@ -58,7 +58,7 @@ export function EditorActions({
   };
 
   const exportFile = () => {
-    downloadTextFile('matter-graph.json', serializePreset(buildPreset()), 'application/json');
+    downloadTextFile('shaders-graph.json', serializePreset(buildPreset()), 'application/json');
   };
 
   const importFile = (event: ChangeEvent) => {
diff --git a/docs/development/visual-regression.md b/docs/development/visual-regression.md
index 0a8d47a4..967fcf99 100644
--- a/docs/development/visual-regression.md
+++ b/docs/development/visual-regression.md
@@ -1,6 +1,6 @@
 # Visual regression testing
 
-Matter's shader components are validated by Playwright visual regression
+Shader components are validated by Playwright visual regression
 tests that live in [`apps/docs-tests/visual/`](../../apps/docs-tests/visual/).
 Each test navigates to a deterministic visual-test route on the docs site
 (`/components/?visualTest=1`), screenshots the canvas, and compares
diff --git a/package.json b/package.json
index 806a7845..28c3b08f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "shaders-monorepo",
   "version": "0.0.0",
   "private": true,
-  "description": "Monorepo root for Matter — React shader components on WebGPU + TSL",
+  "description": "Monorepo root for Shaders — React shader components on WebGPU + TSL",
   "license": "MIT",
   "type": "module",
   "scripts": {
diff --git a/packages/shaders-cli/LICENSE b/packages/shaders-cli/LICENSE
index 7c8ffebb..ef1a0273 100644
--- a/packages/shaders-cli/LICENSE
+++ b/packages/shaders-cli/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Hunter Garrett / Lovo
+Copyright (c) 2026 Hunter Garrett / Mattermix
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/packages/shaders-cli/README.md b/packages/shaders-cli/README.md
index ec793e06..e498413f 100644
--- a/packages/shaders-cli/README.md
+++ b/packages/shaders-cli/README.md
@@ -1,6 +1,6 @@
 # @mattermix/shaders-cli
 
-shadcn-style copy-paste CLI for **Matter** — fetch polished shader components from the registry into your project, where they're yours to edit.
+shadcn-style copy-paste CLI for **Shaders** — fetch polished shader components from the registry into your project, where they're yours to edit.
 
 ## Install
 
@@ -23,7 +23,7 @@ Writes `shaders.config.json` to your project root with sensible defaults:
 
 ```json
 {
-  "componentsDir": "src/components/matter",
+  "componentsDir": "src/components/shaders",
   "registryUrl": "https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry",
   "aliases": { "@/": "src/" }
 }
@@ -45,7 +45,7 @@ npx shaders-cli add linear-gradient
 npx shaders-cli add linear-gradient aurora dot-field
 ```
 
-The component lands in `componentsDir` (default `src/components/matter/`) — you own it from that point forward.
+The component lands in `componentsDir` (default `src/components/shaders/`) — you own it from that point forward.
 
 ### Refresh a previously-added component
 
@@ -59,7 +59,7 @@ npx shaders-cli update --force
 
 ### Render a static fallback image
 
-Render a Matter component tree to an image for use as the `poster` in `` — eliminates the visible blank canvas during WebGPU initialization.
+Render a Shaders component tree to an image for use as the `poster` in `` — eliminates the visible blank canvas during WebGPU initialization.
 
 ```bash
 npx shaders-cli poster --source  --output  [options]
@@ -100,7 +100,7 @@ pnpm exec playwright install chromium
 
 ```bash
 # Default — writes ./public/hero.jpg (JPEG q80)
-npx shaders-cli poster --source ./src/components/matter/hero.tsx --output ./public/hero.jpg
+npx shaders-cli poster --source ./src/components/shaders/hero.tsx --output ./public/hero.jpg
 
 # Posterized shader — PNG compresses smaller
 npx shaders-cli poster --source ./gradient.tsx --output ./public/gradient.png --format png
diff --git a/packages/shaders-cli/package.json b/packages/shaders-cli/package.json
index b258385e..4384c5d5 100644
--- a/packages/shaders-cli/package.json
+++ b/packages/shaders-cli/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@mattermix/shaders-cli",
   "version": "3.9.0",
-  "description": "CLI for Matter — copy-paste components from the registry into your project.",
+  "description": "CLI for Shaders — copy-paste components from the registry into your project.",
   "keywords": [
     "cli",
     "components",
-    "matter",
+    "shaders",
     "scaffold",
     "shadcn",
     "shader"
diff --git a/packages/shaders-cli/src/commands/add.test.ts b/packages/shaders-cli/src/commands/add.test.ts
index 36b4cbab..48bef677 100644
--- a/packages/shaders-cli/src/commands/add.test.ts
+++ b/packages/shaders-cli/src/commands/add.test.ts
@@ -15,7 +15,7 @@ const VERSION = '0.0.0';
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-add-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-add-test-'));
 });
 
 afterEach(async () => {
@@ -26,7 +26,7 @@ async function seedConfig(overrides: Partial = {}
   await writeShadersConfig(dir, {
     ...DEFAULT_SHADERS_CONFIG,
     registryUrl: FIXTURE_BASE,
-    componentsDir: 'src/components/matter',
+    componentsDir: 'src/components/shaders',
     ...overrides,
   });
 }
@@ -35,7 +35,7 @@ describe('runAdd (single component, no aliases)', () => {
   it('writes the component source to componentsDir/.tsx', async () => {
     await seedConfig();
     await runAdd(['synthetic-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
-    const target = join(dir, 'src/components/matter/synthetic-component.tsx');
+    const target = join(dir, 'src/components/shaders/synthetic-component.tsx');
     const written = await readFile(target, 'utf-8');
 
     expect(written).toContain('SyntheticComponent');
@@ -43,9 +43,9 @@ describe('runAdd (single component, no aliases)', () => {
   });
 
   it('creates componentsDir if it does not exist', async () => {
-    await seedConfig({ componentsDir: 'app/very/nested/matter' });
+    await seedConfig({ componentsDir: 'app/very/nested/shaders' });
     await runAdd(['synthetic-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
-    const target = join(dir, 'app/very/nested/matter/synthetic-component.tsx');
+    const target = join(dir, 'app/very/nested/shaders/synthetic-component.tsx');
     const written = await readFile(target, 'utf-8');
 
     expect(written).toContain('SyntheticComponent');
@@ -53,9 +53,9 @@ describe('runAdd (single component, no aliases)', () => {
 
   it('refuses to overwrite an existing file without --force', async () => {
     await seedConfig();
-    await mkdir(join(dir, 'src/components/matter'), { recursive: true });
+    await mkdir(join(dir, 'src/components/shaders'), { recursive: true });
     await writeFile(
-      join(dir, 'src/components/matter/synthetic-component.tsx'),
+      join(dir, 'src/components/shaders/synthetic-component.tsx'),
       'existing',
       'utf-8',
     );
@@ -66,15 +66,15 @@ describe('runAdd (single component, no aliases)', () => {
 
   it('overwrites with --force', async () => {
     await seedConfig();
-    await mkdir(join(dir, 'src/components/matter'), { recursive: true });
-    await writeFile(join(dir, 'src/components/matter/synthetic-component.tsx'), 'old', 'utf-8');
+    await mkdir(join(dir, 'src/components/shaders'), { recursive: true });
+    await writeFile(join(dir, 'src/components/shaders/synthetic-component.tsx'), 'old', 'utf-8');
     await runAdd(
       ['synthetic-component'],
       { force: true, cliVersion: VERSION },
       { cwd: dir, log: vi.fn() },
     );
     const written = await readFile(
-      join(dir, 'src/components/matter/synthetic-component.tsx'),
+      join(dir, 'src/components/shaders/synthetic-component.tsx'),
       'utf-8',
     );
 
@@ -105,7 +105,7 @@ describe('runAdd (multi-file components)', () => {
   it('writes every file the entry lists, not just the entry point', async () => {
     await seedConfig();
     await runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     expect(await readFile(join(base, 'nested-component/nested-component.tsx'), 'utf-8')).toContain(
       'NestedComponent',
@@ -118,7 +118,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('refuses the whole set when a non-entry file already exists, writing nothing', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     await mkdir(join(base, 'nested-component'), { recursive: true });
     await writeFile(join(base, 'nested-component/shader.tsx'), 'mine', 'utf-8');
@@ -158,7 +158,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('skips a file already on disk with identical content, so a later add succeeds', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     // Last week: add one component, which brings utils/color.ts with it.
     await runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
@@ -180,7 +180,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('refuses when a file on disk has diverged from the registry copy', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     await runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
     await writeFile(join(base, 'utils/color.ts'), '// my own edits\n', 'utf-8');
@@ -196,7 +196,7 @@ describe('runAdd (multi-file components)', () => {
   });
 
   it('refuses a registry entry whose file escapes componentsDir', async () => {
-    const inlineDir = await mkdtemp(join(tmpdir(), 'matter-escape-fixture-'));
+    const inlineDir = await mkdtemp(join(tmpdir(), 'shaders-escape-fixture-'));
 
     await writeFile(
       join(inlineDir, 'registry.json'),
@@ -226,7 +226,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('treats a file differing only in line endings as unchanged', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     await runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
 
@@ -254,11 +254,11 @@ describe('runAdd (multi-file components)', () => {
       await rm(join(dir, 'src'), { recursive: true, force: true });
       await seedConfig();
       await mkdir(outside, { recursive: true });
-      await mkdir(join(dir, 'src/components/matter/utils'), { recursive: true });
+      await mkdir(join(dir, 'src/components/shaders/utils'), { recursive: true });
       if (name === 'existing') await writeFile(linkTarget, '// theirs\n', 'utf-8');
       // A dangling link is the sharper case: the existence check reads through
       // it, finds nothing, and would happily create the file outside.
-      await symlink(linkTarget, join(dir, 'src/components/matter/utils/color.ts'));
+      await symlink(linkTarget, join(dir, 'src/components/shaders/utils/color.ts'));
 
       await expect(
         runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() }),
@@ -274,7 +274,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('refuses to write through a symlink that escapes componentsDir', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
     const outside = join(dir, 'outside');
 
     await mkdir(outside, { recursive: true });
@@ -296,7 +296,7 @@ describe('runAdd (multi-file components)', () => {
 
   it('overwrites a diverged file with --force', async () => {
     await seedConfig();
-    const base = join(dir, 'src/components/matter');
+    const base = join(dir, 'src/components/shaders');
 
     await runAdd(['nested-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
     await writeFile(join(base, 'utils/color.ts'), '// my own edits\n', 'utf-8');
@@ -313,7 +313,7 @@ describe('runAdd (multi-file components)', () => {
 
 describe('runAdd (multi-component + dedup + alias rewriting)', () => {
   it('writes multiple components in one invocation against a custom registry', async () => {
-    const inlineDir = await mkdtemp(join(tmpdir(), 'matter-multi-fixture-'));
+    const inlineDir = await mkdtemp(join(tmpdir(), 'shaders-multi-fixture-'));
 
     await writeFile(
       join(inlineDir, 'registry.json'),
@@ -334,8 +334,8 @@ describe('runAdd (multi-component + dedup + alias rewriting)', () => {
 
     await runAdd(['alpha', 'beta'], { cliVersion: VERSION }, { cwd: dir, log });
 
-    const a = await readFile(join(dir, 'src/components/matter/alpha.tsx'), 'utf-8');
-    const b = await readFile(join(dir, 'src/components/matter/beta.tsx'), 'utf-8');
+    const a = await readFile(join(dir, 'src/components/shaders/alpha.tsx'), 'utf-8');
+    const b = await readFile(join(dir, 'src/components/shaders/beta.tsx'), 'utf-8');
 
     expect(a).toContain('alpha = 1');
     expect(b).toContain('beta = 2');
@@ -352,7 +352,7 @@ describe('runAdd (multi-component + dedup + alias rewriting)', () => {
   it('rewrites @matter-internal imports per shaders.config.json aliases', async () => {
     await seedConfig({ aliases: { '@matter-internal/': '@/lib/matter/' } });
     await runAdd(['synthetic-component'], { cliVersion: VERSION }, { cwd: dir, log: vi.fn() });
-    const target = join(dir, 'src/components/matter/synthetic-component.tsx');
+    const target = join(dir, 'src/components/shaders/synthetic-component.tsx');
     const written = await readFile(target, 'utf-8');
 
     expect(written).toContain(`from '@/lib/matter/lib'`);
@@ -362,7 +362,7 @@ describe('runAdd (multi-component + dedup + alias rewriting)', () => {
 
 describe('runAdd (--ref handling)', () => {
   it('substitutes ${ref} into the registry URL when present', async () => {
-    const inlineDir = await mkdtemp(join(tmpdir(), 'matter-ref-fixture-'));
+    const inlineDir = await mkdtemp(join(tmpdir(), 'shaders-ref-fixture-'));
 
     await mkdir(join(inlineDir, 'main'), { recursive: true });
     await writeFile(
@@ -392,7 +392,7 @@ describe('runAdd (--ref handling)', () => {
       { ref: 'main', cliVersion: VERSION },
       { cwd: dir, log: vi.fn() },
     );
-    const target = join(dir, 'src/components/matter/synthetic-component.tsx');
+    const target = join(dir, 'src/components/shaders/synthetic-component.tsx');
     const written = await readFile(target, 'utf-8');
 
     expect(written).toContain('function X');
diff --git a/packages/shaders-cli/src/commands/init.test.ts b/packages/shaders-cli/src/commands/init.test.ts
index c4d070c8..5b620f72 100644
--- a/packages/shaders-cli/src/commands/init.test.ts
+++ b/packages/shaders-cli/src/commands/init.test.ts
@@ -8,7 +8,7 @@ import { runInit } from './init.js';
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-init-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-init-test-'));
 });
 
 afterEach(async () => {
@@ -21,7 +21,7 @@ describe('runInit', () => {
     const raw = await readFile(join(dir, 'shaders.config.json'), 'utf-8');
     const shadersConfig = JSON.parse(raw);
 
-    expect(shadersConfig.componentsDir).toBe('src/components/matter');
+    expect(shadersConfig.componentsDir).toBe('src/components/shaders');
     expect(shadersConfig.registryUrl).toContain('mattermix/shaders');
   });
 
@@ -36,7 +36,7 @@ describe('runInit', () => {
     const raw = await readFile(join(dir, 'shaders.config.json'), 'utf-8');
     const shadersConfig = JSON.parse(raw);
 
-    expect(shadersConfig.componentsDir).toBe('src/components/matter');
+    expect(shadersConfig.componentsDir).toBe('src/components/shaders');
   });
 
   it('logs a confirmation message after writing', async () => {
diff --git a/packages/shaders-cli/src/commands/list.test.ts b/packages/shaders-cli/src/commands/list.test.ts
index 60558f5e..e5f81f7f 100644
--- a/packages/shaders-cli/src/commands/list.test.ts
+++ b/packages/shaders-cli/src/commands/list.test.ts
@@ -11,7 +11,7 @@ const FIXTURE_BASE = `file://${fileURLToPath(new URL('../test-fixtures/registry/
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-list-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-list-test-'));
 });
 
 afterEach(async () => {
diff --git a/packages/shaders-cli/src/commands/poster.test.ts b/packages/shaders-cli/src/commands/poster.test.ts
index 6f513419..e0835933 100644
--- a/packages/shaders-cli/src/commands/poster.test.ts
+++ b/packages/shaders-cli/src/commands/poster.test.ts
@@ -168,9 +168,9 @@ describe('runPoster — --background threading', () => {
 
   beforeEach(async () => {
     launchAndScreenshotMock.mockClear();
-    sourceDir = await mkdtemp(join(tmpdir(), 'matter-poster-test-'));
+    sourceDir = await mkdtemp(join(tmpdir(), 'shaders-poster-test-'));
     sourceFile = join(sourceDir, 'scene.tsx');
-    await writeFile(join(sourceDir, 'package.json'), '{"name":"matter-poster-test-fixture"}');
+    await writeFile(join(sourceDir, 'package.json'), '{"name":"shaders-poster-test-fixture"}');
     await writeFile(sourceFile, 'export default function Scene() { return null; }');
   });
 
diff --git a/packages/shaders-cli/src/commands/update.test.ts b/packages/shaders-cli/src/commands/update.test.ts
index 6f3b9e7d..27c0e3ce 100644
--- a/packages/shaders-cli/src/commands/update.test.ts
+++ b/packages/shaders-cli/src/commands/update.test.ts
@@ -12,7 +12,7 @@ const FIXTURE_BASE = `file://${fileURLToPath(new URL('../test-fixtures/registry/
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-update-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-update-test-'));
 });
 
 afterEach(async () => {
@@ -24,9 +24,9 @@ async function seedConfigAndComponent() {
     ...DEFAULT_SHADERS_CONFIG,
     registryUrl: FIXTURE_BASE,
   });
-  await mkdir(join(dir, 'src/components/matter'), { recursive: true });
+  await mkdir(join(dir, 'src/components/shaders'), { recursive: true });
   await writeFile(
-    join(dir, 'src/components/matter/synthetic-component.tsx'),
+    join(dir, 'src/components/shaders/synthetic-component.tsx'),
     'export const STALE = true\n',
     'utf-8',
   );
@@ -41,7 +41,7 @@ describe('runUpdate', () => {
       { cwd: dir, log: vi.fn() },
     );
     const written = await readFile(
-      join(dir, 'src/components/matter/synthetic-component.tsx'),
+      join(dir, 'src/components/shaders/synthetic-component.tsx'),
       'utf-8',
     );
 
@@ -53,7 +53,7 @@ describe('runUpdate', () => {
     await seedConfigAndComponent();
     await runUpdate([], { force: true, cliVersion: '0.0.0' }, { cwd: dir, log: vi.fn() });
     const written = await readFile(
-      join(dir, 'src/components/matter/synthetic-component.tsx'),
+      join(dir, 'src/components/shaders/synthetic-component.tsx'),
       'utf-8',
     );
 
@@ -65,7 +65,7 @@ describe('runUpdate', () => {
       ...DEFAULT_SHADERS_CONFIG,
       registryUrl: FIXTURE_BASE,
     });
-    await mkdir(join(dir, 'src/components/matter'), { recursive: true });
+    await mkdir(join(dir, 'src/components/shaders'), { recursive: true });
     await expect(
       runUpdate([], { force: true, cliVersion: '0.0.0' }, { cwd: dir, log: vi.fn() }),
     ).rejects.toThrow(/no components/i);
@@ -76,7 +76,7 @@ describe('runUpdate', () => {
       ...DEFAULT_SHADERS_CONFIG,
       registryUrl: FIXTURE_BASE,
     });
-    await mkdir(join(dir, 'src/components/matter'), { recursive: true });
+    await mkdir(join(dir, 'src/components/shaders'), { recursive: true });
     await expect(
       runUpdate(
         ['synthetic-component'],
diff --git a/packages/shaders-cli/src/config/shadersConfig.test.ts b/packages/shaders-cli/src/config/shadersConfig.test.ts
index 11879c2e..2d31e255 100644
--- a/packages/shaders-cli/src/config/shadersConfig.test.ts
+++ b/packages/shaders-cli/src/config/shadersConfig.test.ts
@@ -11,9 +11,8 @@ import {
 } from './shadersConfig.js';
 
 describe('DEFAULT_SHADERS_CONFIG.registryUrl', () => {
-  it('points at the mattermix/shaders org (NOT lovo/matter — that is a 404)', () => {
+  it('points at the mattermix/shaders org', () => {
     expect(DEFAULT_SHADERS_CONFIG.registryUrl).toContain('/mattermix/shaders/');
-    expect(DEFAULT_SHADERS_CONFIG.registryUrl).not.toMatch(/\/lovo\/matter\//);
   });
 
   it('contains the ${ref} placeholder for resolveRef substitution', () => {
@@ -28,7 +27,7 @@ describe('DEFAULT_SHADERS_CONFIG.registryUrl', () => {
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-config-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-config-test-'));
 });
 
 afterEach(async () => {
@@ -46,7 +45,7 @@ describe('shadersConfig', () => {
   it('reads back what it wrote', async () => {
     const shadersConfig: ShadersConfig = {
       ...DEFAULT_SHADERS_CONFIG,
-      componentsDir: 'app/matter',
+      componentsDir: 'app/shaders',
     };
 
     await writeShadersConfig(dir, shadersConfig);
diff --git a/packages/shaders-cli/src/config/shadersConfig.ts b/packages/shaders-cli/src/config/shadersConfig.ts
index 16ace5de..0dbdec01 100644
--- a/packages/shaders-cli/src/config/shadersConfig.ts
+++ b/packages/shaders-cli/src/config/shadersConfig.ts
@@ -16,7 +16,7 @@ export interface ShadersConfig {
 }
 
 export const DEFAULT_SHADERS_CONFIG: ShadersConfig = {
-  componentsDir: 'src/components/matter',
+  componentsDir: 'src/components/shaders',
   registryUrl: 'https://raw.githubusercontent.com/mattermix/shaders/${ref}/registry',
   aliases: { '@/': 'src/' },
 };
diff --git a/packages/shaders-cli/src/fs/writeFileNoFollow.test.ts b/packages/shaders-cli/src/fs/writeFileNoFollow.test.ts
index 7a2d4db0..a3631146 100644
--- a/packages/shaders-cli/src/fs/writeFileNoFollow.test.ts
+++ b/packages/shaders-cli/src/fs/writeFileNoFollow.test.ts
@@ -8,7 +8,7 @@ import { writeFileNoFollow } from './writeFileNoFollow.js';
 let dir: string;
 
 beforeEach(async () => {
-  dir = await mkdtemp(join(tmpdir(), 'matter-nofollow-test-'));
+  dir = await mkdtemp(join(tmpdir(), 'shaders-nofollow-test-'));
 });
 
 afterEach(async () => {
diff --git a/packages/shaders-cli/src/harness/index.html b/packages/shaders-cli/src/harness/index.html
index fd0ff710..bece75de 100644
--- a/packages/shaders-cli/src/harness/index.html
+++ b/packages/shaders-cli/src/harness/index.html
@@ -2,7 +2,7 @@
 
   
     
-    matter poster
+    shaders poster