create-gridland 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "create-gridland",
3
+ "version": "0.2.0",
4
+ "description": "Create a new Gridland project",
5
+ "type": "module",
6
+ "bin": {
7
+ "create-gridland": "./dist/index.js"
8
+ },
9
+ "files": [
10
+ "dist",
11
+ "templates"
12
+ ],
13
+ "scripts": {
14
+ "build": "tsup",
15
+ "test": "bun test src/__tests__/scaffold.test.ts src/__tests__/helpers.test.ts src/__tests__/cli.test.ts",
16
+ "test:e2e": "bun test src/__tests__/e2e.test.ts --timeout 120000"
17
+ },
18
+ "dependencies": {
19
+ "@opentui/core": "^0.1.86",
20
+ "@opentui/react": "^0.1.86",
21
+ "react": "^19.0.0"
22
+ },
23
+ "devDependencies": {
24
+ "@gridland/ui": "workspace:*",
25
+ "@types/react": "^19.0.0",
26
+ "commander": "^13.0.0",
27
+ "picocolors": "^1.1.0",
28
+ "tsup": "^8.0.0",
29
+ "typescript": "^5.7.0"
30
+ }
31
+ }
@@ -0,0 +1,18 @@
1
+ import type { Metadata } from "next"
2
+
3
+ export const metadata: Metadata = {
4
+ title: "Gridland App",
5
+ description: "A Gridland project powered by Next.js",
6
+ }
7
+
8
+ export default function RootLayout({
9
+ children,
10
+ }: {
11
+ children: React.ReactNode
12
+ }) {
13
+ return (
14
+ <html lang="en">
15
+ <body style={{ margin: 0, backgroundColor: "#1e2029" }}>{children}</body>
16
+ </html>
17
+ )
18
+ }
@@ -0,0 +1,74 @@
1
+ "use client"
2
+
3
+ import { TUI } from "@gridland/web"
4
+
5
+ function GridlandDemo() {
6
+ return (
7
+ <box flexDirection="column" width="100%" height="100%" padding={1}>
8
+ <box
9
+ border
10
+ borderStyle="rounded"
11
+ borderColor="#88c0d0"
12
+ backgroundColor="#2e3440"
13
+ title=" Gridland App "
14
+ titleAlignment="center"
15
+ flexDirection="column"
16
+ padding={1}
17
+ >
18
+ <text fg="#a3be8c">Welcome to Gridland!</text>
19
+ <text fg="#81a1c1">
20
+ This is rendered directly to an HTML5 Canvas.
21
+ </text>
22
+ <text fg="#b48ead">
23
+ No xterm.js. No terminal emulator. Just pixels.
24
+ </text>
25
+ <text fg="#ebcb8b">Running inside Next.js with SSR safety built in.</text>
26
+ </box>
27
+ <box flexDirection="row" gap={1} marginTop={1}>
28
+ <box
29
+ border
30
+ borderStyle="rounded"
31
+ borderColor="#5e81ac"
32
+ backgroundColor="#2e3440"
33
+ flexGrow={1}
34
+ flexDirection="column"
35
+ padding={1}
36
+ >
37
+ <text fg="#d8dee9" bold>
38
+ Features
39
+ </text>
40
+ <text fg="#81a1c1">• Canvas-based rendering</text>
41
+ <text fg="#81a1c1">• React reconciler</text>
42
+ <text fg="#81a1c1">• SSR-safe component</text>
43
+ <text fg="#81a1c1">• No dynamic imports needed</text>
44
+ <text fg="#81a1c1">• Auto-resize</text>
45
+ </box>
46
+ <box
47
+ border
48
+ borderStyle="rounded"
49
+ borderColor="#bf616a"
50
+ backgroundColor="#2e3440"
51
+ flexGrow={1}
52
+ flexDirection="column"
53
+ padding={1}
54
+ >
55
+ <text fg="#d8dee9" bold>
56
+ Stack
57
+ </text>
58
+ <text fg="#81a1c1">• React 19</text>
59
+ <text fg="#81a1c1">• Next.js 15</text>
60
+ <text fg="#81a1c1">• TypeScript</text>
61
+ <text fg="#81a1c1">• yoga-layout</text>
62
+ </box>
63
+ </box>
64
+ </box>
65
+ )
66
+ }
67
+
68
+ export default function Home() {
69
+ return (
70
+ <TUI style={{ width: "100vw", height: "100vh" }}>
71
+ <GridlandDemo />
72
+ </TUI>
73
+ )
74
+ }
@@ -0,0 +1,5 @@
1
+ /// <reference types="next" />
2
+ /// <reference types="next/image-types/global" />
3
+
4
+ // NOTE: This file should not be edited
5
+ // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -0,0 +1,3 @@
1
+ import { withGridland } from "@gridland/web/next-plugin"
2
+
3
+ export default withGridland()
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "{{PROJECT_NAME}}",
3
+ "private": true,
4
+ "scripts": {
5
+ "dev": "next dev",
6
+ "build": "next build",
7
+ "start": "next start"
8
+ },
9
+ "dependencies": {
10
+ "@gridland/web": "^0.1.0",
11
+ "next": "^15.0.0",
12
+ "react": "^19.0.0",
13
+ "react-dom": "^19.0.0"
14
+ },
15
+ "devDependencies": {
16
+ "@types/node": "^22.0.0",
17
+ "@types/react": "^19.0.0",
18
+ "@types/react-dom": "^19.0.0",
19
+ "typescript": "^5.7.0"
20
+ }
21
+ }
@@ -0,0 +1,20 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2017",
4
+ "lib": ["dom", "dom.iterable", "esnext"],
5
+ "allowJs": true,
6
+ "skipLibCheck": true,
7
+ "strict": true,
8
+ "noEmit": true,
9
+ "esModuleInterop": true,
10
+ "module": "esnext",
11
+ "moduleResolution": "bundler",
12
+ "resolveJsonModule": true,
13
+ "isolatedModules": true,
14
+ "jsx": "preserve",
15
+ "incremental": true,
16
+ "plugins": [{ "name": "next" }]
17
+ },
18
+ "include": ["next-env.d.ts", "gridland-jsx.d.ts", "**/*.ts", "**/*.tsx"],
19
+ "exclude": ["node_modules"]
20
+ }
@@ -0,0 +1,6 @@
1
+ node_modules
2
+ dist
3
+ .DS_Store
4
+ *.tsbuildinfo
5
+ .vite
6
+ .next
@@ -0,0 +1,36 @@
1
+ // Gridland uses a custom React reconciler, not the DOM.
2
+ // Augment React's element attribute interfaces to accept any props,
3
+ // since HTML/SVG type constraints don't apply.
4
+
5
+ import "react"
6
+ import "csstype"
7
+
8
+ declare module "react" {
9
+ // Allow any props on all HTML elements
10
+ interface HTMLAttributes<T> {
11
+ [key: string]: any
12
+ }
13
+ // Allow any props on all SVG elements
14
+ interface SVGAttributes<T> {
15
+ [key: string]: any
16
+ }
17
+ // Allow any CSS properties (style prop accepts custom renderer props)
18
+ interface CSSProperties {
19
+ [key: string]: any
20
+ }
21
+ namespace JSX {
22
+ interface IntrinsicElements {
23
+ // Add custom elements not in React's definitions
24
+ box: Record<string, any>
25
+ scrollbox: Record<string, any>
26
+ "ascii-font": Record<string, any>
27
+ }
28
+ }
29
+ }
30
+
31
+ // Also augment csstype since React uses it for style typing
32
+ declare module "csstype" {
33
+ interface Properties<TLength, TTime> {
34
+ [key: string]: any
35
+ }
36
+ }
@@ -0,0 +1,16 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Gridland App</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ html, body, #root { width: 100%; height: 100%; background: #1e1e2e; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <div id="root"></div>
14
+ <script type="module" src="/src/main.tsx"></script>
15
+ </body>
16
+ </html>
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "{{PROJECT_NAME}}",
3
+ "private": true,
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "dependencies": {
11
+ "@gridland/web": "^0.1.0",
12
+ "react": "^19.0.0",
13
+ "react-dom": "^19.0.0"
14
+ },
15
+ "devDependencies": {
16
+ "@types/react": "^19.0.0",
17
+ "@types/react-dom": "^19.0.0",
18
+ "@vitejs/plugin-react": "^4.3.4",
19
+ "typescript": "^5.7.0",
20
+ "vite": "^6.0.0"
21
+ }
22
+ }
@@ -0,0 +1,68 @@
1
+ import { TUI } from "@gridland/web"
2
+
3
+ function GridlandDemo() {
4
+ return (
5
+ <box
6
+ flexDirection="column"
7
+ width="100%"
8
+ height="100%"
9
+ padding={1}
10
+ >
11
+ <box
12
+ border={true}
13
+ borderStyle="rounded"
14
+ borderColor="#88c0d0"
15
+ backgroundColor="#2e3440"
16
+ title=" Gridland App "
17
+ titleAlignment="center"
18
+ flexDirection="column"
19
+ padding={1}
20
+ >
21
+ <text fg="#a3be8c">Welcome to Gridland!</text>
22
+ <text fg="#81a1c1">This is rendered directly to an HTML5 Canvas.</text>
23
+ <text fg="#b48ead">No xterm.js. No terminal emulator. Just pixels.</text>
24
+ </box>
25
+
26
+ <box marginTop={1} flexDirection="row" gap={2}>
27
+ <box
28
+ border={true}
29
+ borderStyle="single"
30
+ borderColor="#5e81ac"
31
+ flexGrow={1}
32
+ padding={1}
33
+ flexDirection="column"
34
+ >
35
+ <text fg="#ebcb8b" bold={true}>Features</text>
36
+ <text fg="#d8dee9">• Canvas-based rendering</text>
37
+ <text fg="#d8dee9">• React reconciler</text>
38
+ <text fg="#d8dee9">• Yoga layout engine</text>
39
+ <text fg="#d8dee9">• Keyboard input</text>
40
+ <text fg="#d8dee9">• Auto-resize</text>
41
+ </box>
42
+
43
+ <box
44
+ border={true}
45
+ borderStyle="single"
46
+ borderColor="#bf616a"
47
+ flexGrow={1}
48
+ padding={1}
49
+ flexDirection="column"
50
+ >
51
+ <text fg="#ebcb8b" bold={true}>Stack</text>
52
+ <text fg="#d8dee9">• React 19</text>
53
+ <text fg="#d8dee9">• Vite 6</text>
54
+ <text fg="#d8dee9">• TypeScript</text>
55
+ <text fg="#d8dee9">• yoga-layout</text>
56
+ </box>
57
+ </box>
58
+ </box>
59
+ )
60
+ }
61
+
62
+ export function App() {
63
+ return (
64
+ <TUI style={{ width: "100vw", height: "100vh" }}>
65
+ <GridlandDemo />
66
+ </TUI>
67
+ )
68
+ }
@@ -0,0 +1,4 @@
1
+ import { createRoot } from "react-dom/client"
2
+ import { App } from "./App"
3
+
4
+ createRoot(document.getElementById("root")!).render(<App />)
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ESNext",
4
+ "module": "ESNext",
5
+ "moduleResolution": "bundler",
6
+ "jsx": "react-jsx",
7
+ "strict": true,
8
+ "esModuleInterop": true,
9
+ "skipLibCheck": true,
10
+ "outDir": "dist"
11
+ },
12
+ "include": ["src", "gridland-jsx.d.ts"]
13
+ }
@@ -0,0 +1,13 @@
1
+ import { defineConfig } from "vite"
2
+ import react from "@vitejs/plugin-react"
3
+ import { gridlandWebPlugin } from "@gridland/web/vite-plugin"
4
+
5
+ export default defineConfig({
6
+ plugins: [
7
+ ...gridlandWebPlugin(),
8
+ react(),
9
+ ],
10
+ build: { target: "esnext" },
11
+ esbuild: { target: "esnext" },
12
+ optimizeDeps: { esbuildOptions: { target: "esnext" } },
13
+ })