update next

Author: huozhi

.gitignore

@@ -1,3 +1,5 @@
 .next
 node_modules
 dist
+.DS_Store
+

package.json

@@ -4,7 +4,10 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
-    "./gl": "./dist/gl.js",
+    "./gl": {
+      "types": "./dist/gl.d.ts",
+      "default": "./dist/gl.js"
+    },
     "./package.json": "./package.json"
   },
   "license": "MIT",
@@ -35,9 +38,9 @@
     "bunchee": "^6.3.3",
     "codice": "^1.5.4",
     "devjar": "link:",
-    "next": "^16.0.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "next": "^16.0.7",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "typescript": "^5.7.3"
   },
   "packageManager": "[email protected]"

pnpm-lock.yaml

@@ -39,7 +39,7 @@ void main() {
 }
 `
 
-const glRuntimeExample = `import { useGL } from 'devjar'
+const glRuntimeExample = `import { useGL } from 'devjar/gl'
 import { useRef } from 'react'
 
 function Shader() {
@@ -79,7 +79,7 @@ export default function GlPage() {
           <div className="usage-example">
             <h3>GL Runtime</h3>
             <p>
-              Import <code>useGL</code> from <code>devjar</code> and call it with your fragment shader code, 
+              Import <code>useGL</code> from <code>devjar/gl</code> and call it with your fragment shader code, 
               a canvas ref, and an optional error callback. The hook handles WebGL setup, shader compilation, 
               and provides automatic uniforms for time, resolution, and mouse position.
             </p>

site/app/gl/page.tsx

@@ -120,15 +120,21 @@ footer > p {
 }
 
 .examples-section {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
+  padding: 1rem 0;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
 }
 
 .examples-label {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
   color: #9ca3af;
   text-transform: uppercase;
@@ -143,11 +149,11 @@ footer > p {
 }
 
 .example-tab {
-  padding: 8px 20px;
+  padding: 10px 24px;
   border: none;
   background: none;
   cursor: pointer;
-  font-size: 15px;
+  font-size: 17px;
   font-weight: 400;
   font-family: inherit;
   color: #374151;
@@ -160,7 +166,7 @@ footer > p {
 .example-tab:link,
 .example-tab:visited {
   font-family: inherit;
-  font-size: 15px;
+  font-size: 17px;
   font-weight: 400;
 }
 

site/styles.css

@@ -2,7 +2,7 @@
 
 import { Editor } from 'codice'
 import { useRef, useState } from 'react'
-import { useGL } from 'devjar'
+import { useGL } from 'devjar/gl'
 import './codesandbox.css'
 import './glsl-sandbox.css'
 

site/ui/glsl-sandbox.tsx

@@ -1,6 +1,2 @@
 export { useLiveCode } from './core'
 export { DevJar } from './render'
-export { 
-  useGL, 
-  type UseGlslRendererOptions
-} from './gl'