Skip to content

Commit 7b21c05

Browse files
itsmeadarsh2008itsmeadarsh2008
committed
final
1 parent 33c7203 commit 7b21c05

File tree

24 files changed

+271
-106
lines changed

24 files changed

+271
-106
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,12 @@ Contributions are welcome! Please feel free to submit a Pull Request.
267267

268268
---
269269

270+
## AI Assistance
271+
272+
Need help with Warper? You can use **Context7 MCP** to get up-to-date documentation and code examples directly in your AI coding assistant. Context7 provides real-time access to Warper's API reference and usage patterns.
273+
274+
---
275+
270276
## License
271277

272278
MIT License - see [LICENSE](./LICENSE) for details.

‎context7.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"url": "https://context7.com/warper-org/warper",
3+
"public_key": "pk_sQ4f40DspwBvHXlHvHKik"
4+
}

‎copilot-instructions.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,3 +215,9 @@ The AI should:
215215
* Organize code per the structure
216216
* Include debug overlay and SSR strategy
217217
* Follow ultra-performance best practices
218+
219+
---
220+
221+
### 🤖 AI Assistance with Context7
222+
223+
For up-to-date documentation and code examples, use **Context7 MCP** in your AI coding assistant. Context7 provides real-time access to Warper's latest API reference, usage patterns, and best practices directly in your development workflow.

‎core/wasm.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* ⚡ WARPER v6.0 QUANTUM WASM Integration ⚡
2+
* ⚡ WARPER v7.0 QUANTUM WASM Integration ⚡
33
*
44
* THE WORLD'S FASTEST virtualization powered by WebAssembly
55
* Optimized for 120+ FPS with zero-copy typed arrays

‎examples/chat/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>⚡ WARPER - Chat Messages</title>
7+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23818cf8'/%3E%3Cstop offset='50%25' stop-color='%23c084fc'/%3E%3Cstop offset='100%25' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='100' height='100' rx='22' fill='%23030303'/%3E%3Cpath d='M58 12L22 54h28l-6 34 36-42H52l6-34z' fill='url(%23a)' filter='url(%23glow)'/%3E%3C/svg%3E">
78
<style>
89
* { margin: 0; padding: 0; box-sizing: border-box; }
910
html, body { height: 100%; background: #0a0a0f; }

‎examples/grid/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>⚡ WARPER NECROMANCER - Grid Example</title>
6+
<title>⚡ WARPER - Grid Example</title>
7+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23818cf8'/%3E%3Cstop offset='50%25' stop-color='%23c084fc'/%3E%3Cstop offset='100%25' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='100' height='100' rx='22' fill='%23030303'/%3E%3Cpath d='M58 12L22 54h28l-6 34 36-42H52l6-34z' fill='url(%23a)' filter='url(%23glow)'/%3E%3C/svg%3E">
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
910
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

‎examples/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"description": "Ultra-fast React virtualization library powered by Rust and WebAssembly. Render 10M+ items at 120+ FPS with O(1) lookups. Only ~6KB gzipped.",
5353
"url": "https://warper-org.github.io/warper/",
5454
"downloadUrl": "https://www.npmjs.com/package/@itsmeadarsh/warper",
55-
"softwareVersion": "6.0.0",
55+
"softwareVersion": "7.0.0",
5656
"author": {
5757
"@type": "Organization",
5858
"name": "Warper Team",
@@ -2130,7 +2130,7 @@
21302130
<section class="hero">
21312131
<div class="hero-badge">
21322132
<span>Open Source · MIT License</span>
2133-
<span class="version">v6.0</span>
2133+
<span class="version">v7.0</span>
21342134
</div>
21352135

21362136
<h1>

‎examples/list/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>⚡ WARPER NECROMANCER - List Example</title>
6+
<title>⚡ WARPER - List Example</title>
7+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23818cf8'/%3E%3Cstop offset='50%25' stop-color='%23c084fc'/%3E%3Cstop offset='100%25' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='100' height='100' rx='22' fill='%23030303'/%3E%3Cpath d='M58 12L22 54h28l-6 34 36-42H52l6-34z' fill='url(%23a)' filter='url(%23glow)'/%3E%3C/svg%3E">
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
910
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

‎examples/list/main.tsx‎

Lines changed: 86 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,26 @@ const styles = {
127127
},
128128
};
129129

130+
// ============================================================================
131+
// RESPONSIVE HOOK
132+
// ============================================================================
133+
function useResponsive() {
134+
const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
135+
136+
useEffect(() => {
137+
const handleResize = () => setWidth(window.innerWidth);
138+
window.addEventListener('resize', handleResize);
139+
return () => window.removeEventListener('resize', handleResize);
140+
}, []);
141+
142+
return {
143+
isMobile: width < 480,
144+
isTablet: width >= 480 && width < 768,
145+
isDesktop: width >= 768,
146+
width,
147+
};
148+
}
149+
130150
// ============================================================================
131151
// DATA GENERATION
132152
// ============================================================================
@@ -176,10 +196,34 @@ const DEPT_COLORS: Record<string, string> = {
176196
// ROW COMPONENT
177197
// ============================================================================
178198

179-
const FastEmployeeRow = React.memo(function FastEmployeeRow({ index }: { index: number }) {
199+
const FastEmployeeRow = React.memo(function FastEmployeeRow({ index, isMobile }: { index: number; isMobile?: boolean }) {
180200
const emp = generateEmployee(index);
181201
const perfColor = emp.performance >= 90 ? '#00d4aa' : emp.performance >= 75 ? '#eab308' : '#ef4444';
182202

203+
if (isMobile) {
204+
return (
205+
<div style={{
206+
display: 'grid',
207+
gridTemplateColumns: '1fr 1fr 80px',
208+
alignItems: 'center',
209+
padding: '0 12px',
210+
borderBottom: '1px solid #1a1a24',
211+
fontSize: '12px',
212+
height: '100%',
213+
boxSizing: 'border-box',
214+
color: '#e4e4e7',
215+
gap: '8px',
216+
}}>
217+
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{emp.name}</div>
218+
<div style={{ color: '#a1a1aa', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{emp.email}</div>
219+
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
220+
<span style={DOT_STYLES[emp.status]} />
221+
<span style={{ fontSize: '11px' }}>{emp.status}</span>
222+
</div>
223+
</div>
224+
);
225+
}
226+
183227
return (
184228
<div style={{
185229
display: 'grid',
@@ -212,6 +256,7 @@ const FastEmployeeRow = React.memo(function FastEmployeeRow({ index }: { index:
212256
// ============================================================================
213257

214258
function DataTable() {
259+
const { isMobile, isDesktop } = useResponsive();
215260
const [rowCount, setRowCount] = useState(100000);
216261
const [rowCountInput, setRowCountInput] = useState('100000');
217262
const [isAutoScrolling, setIsAutoScrolling] = useState(false);
@@ -290,16 +335,18 @@ function DataTable() {
290335
}
291336
}, [rowCountInput]);
292337

293-
const presets = [
294-
{ label: '10K', value: 10000 },
295-
{ label: '100K', value: 100000 },
296-
{ label: '500K', value: 500000 },
297-
{ label: '1M', value: 1000000 },
298-
];
338+
const presets = isMobile
339+
? [{ label: '10K', value: 10000 }, { label: '100K', value: 100000 }]
340+
: [
341+
{ label: '10K', value: 10000 },
342+
{ label: '100K', value: 100000 },
343+
{ label: '500K', value: 500000 },
344+
{ label: '1M', value: 1000000 },
345+
];
299346

300347
const renderRow = useCallback((index: number) => (
301-
<FastEmployeeRow index={index} />
302-
), []);
348+
<FastEmployeeRow index={index} isMobile={isMobile} />
349+
), [isMobile]);
303350

304351
return (
305352
<div style={styles.container}>
@@ -310,23 +357,23 @@ function DataTable() {
310357
data_table
311358
<span style={{ color: '#00d4aa' }}>]</span>
312359
<span style={{ color: '#52525b', marginLeft: '8px' }}>
313-
{rowCount.toLocaleString()} records
360+
{rowCount.toLocaleString()} {isMobile ? '' : 'records'}
314361
</span>
315362
</div>
316-
<PerformanceMonitor metrics={metrics} />
363+
{isDesktop && <PerformanceMonitor metrics={metrics} />}
317364
</div>
318365

319366
{/* Table Header */}
320367
<div style={{
321368
...styles.list,
322369
flex: 'none',
323-
margin: '16px 20px 0',
370+
margin: isMobile ? '8px 12px 0' : '16px 20px 0',
324371
borderRadius: '8px 8px 0 0',
325372
marginBottom: 0,
326373
}}>
327374
<div style={{
328375
display: 'grid',
329-
gridTemplateColumns: '100px 140px 1fr 100px 80px 100px 80px',
376+
gridTemplateColumns: isMobile ? '80px 1fr 80px' : '100px 140px 1fr 100px 80px 100px 80px',
330377
alignItems: 'center',
331378
padding: '0 16px',
332379
background: '#0a0a0f',
@@ -337,13 +384,23 @@ function DataTable() {
337384
height: '40px',
338385
gap: '8px',
339386
}}>
340-
<div>id</div>
341-
<div>name</div>
342-
<div>email</div>
343-
<div>dept</div>
344-
<div>status</div>
345-
<div>salary</div>
346-
<div>perf</div>
387+
{isMobile ? (
388+
<>
389+
<div>name</div>
390+
<div>email</div>
391+
<div>status</div>
392+
</>
393+
) : (
394+
<>
395+
<div>id</div>
396+
<div>name</div>
397+
<div>email</div>
398+
<div>dept</div>
399+
<div>status</div>
400+
<div>salary</div>
401+
<div>perf</div>
402+
</>
403+
)}
347404
</div>
348405
</div>
349406

@@ -354,6 +411,7 @@ function DataTable() {
354411
borderRadius: '0 0 8px 8px',
355412
borderTop: 'none',
356413
marginBottom: '80px',
414+
margin: isMobile ? '0 12px 80px' : undefined,
357415
}}>
358416
<WarperComponent
359417
ref={warperRef}
@@ -368,7 +426,14 @@ function DataTable() {
368426
</div>
369427

370428
{/* Floating Control Panel */}
371-
<div style={styles.floatingPanel}>
429+
<div style={{
430+
...styles.floatingPanel,
431+
padding: isMobile ? '10px 14px' : '12px 20px',
432+
gap: isMobile ? '10px' : '16px',
433+
flexWrap: 'wrap' as const,
434+
maxWidth: isMobile ? 'calc(100% - 24px)' : undefined,
435+
justifyContent: 'center',
436+
}}>
372437
{presets.map((preset) => (
373438
<button
374439
key={preset.value}

‎examples/one-million-rows/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>⚡ WARPER NECROMANCER - 1 Million Rows</title>
6+
<title>⚡ WARPER - 1 Million Rows</title>
7+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23818cf8'/%3E%3Cstop offset='50%25' stop-color='%23c084fc'/%3E%3Cstop offset='100%25' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Crect width='100' height='100' rx='22' fill='%23030303'/%3E%3Cpath d='M58 12L22 54h28l-6 34 36-42H52l6-34z' fill='url(%23a)' filter='url(%23glow)'/%3E%3C/svg%3E">
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
910
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">

0 commit comments

Comments
 (0)