impr: Use named tgpu export

README.md

@@ -118,7 +118,7 @@ compute shaders, and `@abc/plot` is a library for plots and visualization using
 WebGPU.
 
 ```ts
-import tgpu from 'typegpu';
+import { tgpu } from 'typegpu';
 import gen from '@xyz/gen';
 import plot from '@abc/plot';
 

apps/bun-example/index.ts

@@ -1,4 +1,4 @@
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 import { randf } from '@typegpu/noise';
 
 const Boid = d.struct({

apps/resolution-time/procedural.ts

@@ -1,6 +1,6 @@
 import { writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import tgpu, { d, std, type TgpuComptime } from 'typegpu';
+import { tgpu, d, std, type TgpuComptime } from 'typegpu';
 
 interface ProcGenConfig {
   mainBranching: number;

apps/treeshake-test/tests/importEntireLibrary.ts

@@ -1,4 +1,4 @@
-import tgpu from 'typegpu/$built$';
+import { tgpu } from 'typegpu/$built$';
 import * as d from 'typegpu/data/$built$';
 import * as std from 'typegpu/std/$built$';
 

apps/treeshake-test/tests/importEntireLibraryUnused.ts

@@ -1,3 +1,3 @@
-import tgpu from 'typegpu/$built$';
+import { tgpu } from 'typegpu/$built$';
 import * as d from 'typegpu/data/$built$';
 import * as std from 'typegpu/std/$built$';

apps/treeshake-test/tests/tgpuImportEverything.ts

@@ -1,3 +1,3 @@
-import tgpu from 'typegpu/$built$';
+import { tgpu } from 'typegpu/$built$';
 
 console.log(tgpu);

apps/treeshake-test/tests/tgpuImportOne.ts

@@ -1,3 +1,3 @@
-import tgpu from 'typegpu/$built$';
+import { tgpu } from 'typegpu/$built$';
 
 console.log(tgpu.resolve([]));

apps/typegpu-docs/src/components/ComputeShadersArrayExample.tsx

@@ -10,7 +10,7 @@ import {
 const VALUE_COUNT = 16;
 const ValuesSchema = d.arrayOf(d.u32, VALUE_COUNT);
 
-export const COMPUTE_SHADER_ARRAY_SNIPPET = `import tgpu, { d } from 'typegpu';
+export const COMPUTE_SHADER_ARRAY_SNIPPET = `import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/components/ComputeShadersBindGroupsExample.tsx

@@ -14,7 +14,7 @@ const BUFFER_OPTIONS: readonly BufferOption[] = [
   { colorCss: '#bef264', label: 'Buffer C', name: 'Burst' },
 ];
 
-export const COMPUTE_SHADER_BIND_GROUPS_SNIPPET = `import tgpu, { d, std } from 'typegpu';
+export const COMPUTE_SHADER_BIND_GROUPS_SNIPPET = `import { tgpu, d, std } from 'typegpu';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/components/ComputeShadersBindGroupsRuntime.ts

@@ -1,5 +1,5 @@
 import { sdBox2d } from '@typegpu/sdf';
-import tgpu, { common, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { createExampleRoot } from './runnable/index.ts';
 
 const PARTICLE_COUNT = 96;

apps/typegpu-docs/src/components/ComputeShadersGridExample.tsx

@@ -11,7 +11,7 @@ const GRID_WIDTH = 8;
 const GRID_HEIGHT = 6;
 const GridSchema = d.arrayOf(d.arrayOf(d.u32, GRID_HEIGHT), GRID_WIDTH);
 
-export const COMPUTE_SHADER_GRID_SNIPPET = `import tgpu, { d } from 'typegpu';
+export const COMPUTE_SHADER_GRID_SNIPPET = `import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/components/FirstGpuProgramExample.tsx

@@ -8,7 +8,7 @@ const CounterState = d.struct({
 });
 
 export const FIRST_GPU_PROGRAM_SNIPPETS = {
-  consoleLog: `import tgpu, { d } from 'typegpu';
+  consoleLog: `import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 
@@ -31,7 +31,7 @@ export function execute() {
 }
 `,
 
-  readValue: `import tgpu, { d } from 'typegpu';
+  readValue: `import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 
@@ -54,7 +54,7 @@ export async function execute() {
 }
 `,
 
-  updateIncrementBy: `import tgpu, { d } from 'typegpu';
+  updateIncrementBy: `import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/components/runnable/RunnableSnippet.tsx

@@ -1,6 +1,6 @@
 import { Play } from 'lucide-react';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import tgpu, { type TgpuRoot } from 'typegpu';
+import { tgpu, type TgpuRoot } from 'typegpu';
 import { useConsoleCapture } from './useConsoleCapture.ts';
 
 const unsupportedMessage =

apps/typegpu-docs/src/components/translator/lib/constants.ts

@@ -20,7 +20,7 @@ fn fs_main() -> @location(0) vec4<f32> {
   return vec4<f32>(1.0, 0.0, 0.0, 1.0);
 }`;
 
-export const DEFAULT_TGSL = `import tgpu, { d } from 'typegpu';
+export const DEFAULT_TGSL = `import { tgpu, d } from 'typegpu';
 
 const Particle = d.struct({
   position: d.vec3f,

apps/typegpu-docs/src/components/translator/lib/tgslExecutor.ts

@@ -20,7 +20,7 @@ async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
       '/shader.ts': { content: tgslCode },
       '/index.ts': {
         content: `
-          import tgpu from 'typegpu';
+          import { tgpu } from 'typegpu';
           import * as exports from './shader.ts';
 
           const shaderCode = tgpu.resolve({ externals: exports });

apps/typegpu-docs/src/content/docs/apis/accessors.mdx

@@ -6,7 +6,7 @@ description: Accessors are schema-aware typed placeholders for GPU resources, al
 When writing reusable GPU functions in TypeGPU, you often need to reference "some global value" without coupling to a specific buffer, texture or variable. [Slots](/TypeGPU/apis/slots) seem like the right tool for the job, but they encode the delivery mechanism into the slot type (e.g. a buffer or texture), making it inflexible for reusable functions.
 
 ```ts twoslash
-import tgpu, { type TgpuUniform, d } from 'typegpu';
+import { tgpu, type TgpuUniform, d } from 'typegpu';
 // ---cut---
 // 👎 only works with JS literals
 const staticColorSlot = tgpu.slot<d.v3f>();
@@ -28,7 +28,7 @@ const colorAccess = tgpu.accessor(d.vec3f);
 Create an accessor with `tgpu.accessor(schema)`. Optionally pass a default value as the second argument:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 // No default — must be bound before resolving.
 const colorAccess = tgpu.accessor(d.vec3f);
@@ -40,7 +40,7 @@ const colorWithDefault = tgpu.accessor(d.vec3f, d.vec3f(1, 0, 0));
 Inside a GPU function, read the accessor's value using `.$`:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const colorAccess = tgpu.accessor(d.vec3f, d.vec3f(1, 0, 0));
 // ---cut---
@@ -58,7 +58,7 @@ Accessing it outside GPU context throws a runtime error.
 If no default is set and no binding is provided at resolution time, TypeGPU throws a descriptive error:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const colorAccess = tgpu.accessor(d.vec3f);
 
@@ -79,7 +79,7 @@ tgpu.resolve([getColor]);
 Use `.with(accessor, value)` on a function or pipeline — the same pattern as [slots](/apis/slots):
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const RED = d.vec3f(1, 0, 0);
 const GREEN = d.vec3f(0, 1, 0);
@@ -112,7 +112,7 @@ fn getColor_1() -> vec3f {
 You can also override on a pipeline:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
@@ -136,7 +136,7 @@ Accessors accept several types of GPU resources as values.
 The simplest binding — the value is resolved at compile time and inlined directly into the WGSL:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const colorAccess = tgpu.accessor(d.vec3f);
 const multiplierAccess = tgpu.accessor(d.f32);
@@ -168,7 +168,7 @@ Notice how, because the values are known at compile time, the result is precompu
 Resolves to a function call in the generated WGSL:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const colorAccess = tgpu.accessor(d.vec3f, () => {
   'use gpu';
@@ -196,7 +196,7 @@ fn getColor() -> vec3f {
 Resolves to the WGSL variable declaration for that buffer binding:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 const RED = d.vec3f(1, 0, 0);
@@ -225,7 +225,7 @@ fn getColor() -> vec3f {
 A common pattern for library-style code: use a bind group layout entry as the default, making it easy to swap the resource via `.with()`:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const ImageData = (count: number) =>
   d.struct({
@@ -247,7 +247,7 @@ const imageAccess = tgpu.accessor(ImageData, () => layout.$.image);
 Bind a private or workgroup variable:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const colorAccess = tgpu.accessor(d.vec3f);
 
@@ -280,7 +280,7 @@ fn getColor_1() -> vec3f {
 ### Constant
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const colorAccess = tgpu.accessor(d.vec3f);
 
@@ -304,7 +304,7 @@ fn getColor() -> vec3f {
 ### Texture view
 
 ```ts twoslash
-import tgpu, { d, std } from 'typegpu';
+import { tgpu, d, std } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
@@ -335,7 +335,7 @@ fn main() {
 Because accessors know the schema of their resource, you can access struct fields directly through `.$`:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 // ---cut---
 const ImageData = (count: number) =>
   d.struct({
@@ -379,7 +379,7 @@ fn getPixel(x: i32, y: i32) -> vec4f {
 You can also access deeply nested references — e.g., a specific element of a buffer's array field:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 
@@ -415,7 +415,7 @@ fn main() {
 Use `tgpu.mutableAccessor` when you need to *write* to the resource:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
@@ -447,7 +447,7 @@ The split between `tgpu.accessor` and `tgpu.mutableAccessor` is useful, as the r
 You can also mutate fields of a non-primitive struct:
 
 ```ts twoslash
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/content/docs/apis/bind-groups.mdx

@@ -12,7 +12,7 @@ A bind group is a collection of resources that are bound to a shader. These reso
 It's a way to define what resources are available to a shader and how they are accessed.
 
 ```ts
-import tgpu, { d } from 'typegpu';
+import { tgpu, d } from 'typegpu';
 
 // Defining the layout of resources we want the shader to
 // have access to.