@gallop.software/studio 1.6.4 → 1.6.6
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/app/{layout.js → layout.tsx} +9 -2
- package/app/next.config.mjs +11 -0
- package/app/page.tsx +93 -0
- package/bin/studio.mjs +143 -5
- package/package.json +7 -2
- package/app/page.js +0 -77
- /package/app/api/studio/[...path]/{route.js → route.ts} +0 -0
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
import type { Metadata } from 'next'
|
|
2
|
+
import type { ReactNode } from 'react'
|
|
3
|
+
|
|
4
|
+
export const metadata: Metadata = {
|
|
2
5
|
title: 'Studio - Media Manager',
|
|
3
6
|
description: 'Manage images and media files for your project',
|
|
4
7
|
}
|
|
5
8
|
|
|
6
|
-
export default function RootLayout({
|
|
9
|
+
export default function RootLayout({
|
|
10
|
+
children,
|
|
11
|
+
}: {
|
|
12
|
+
children: ReactNode
|
|
13
|
+
}) {
|
|
7
14
|
return (
|
|
8
15
|
<html lang="en">
|
|
9
16
|
<body style={{ margin: 0, padding: 0, backgroundColor: '#0a0a0a' }}>
|
package/app/page.tsx
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
'use client'
|
|
3
|
+
|
|
4
|
+
import dynamic from 'next/dynamic'
|
|
5
|
+
import { css, keyframes } from '@emotion/react'
|
|
6
|
+
|
|
7
|
+
const colors = {
|
|
8
|
+
background: '#0a0a0a',
|
|
9
|
+
primary: '#635bff',
|
|
10
|
+
border: '#2a2a2a',
|
|
11
|
+
textSecondary: '#888888',
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const fontStack = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
|
|
15
|
+
|
|
16
|
+
const spin = keyframes`
|
|
17
|
+
to {
|
|
18
|
+
transform: rotate(360deg);
|
|
19
|
+
}
|
|
20
|
+
`
|
|
21
|
+
|
|
22
|
+
const styles = {
|
|
23
|
+
container: css`
|
|
24
|
+
position: fixed;
|
|
25
|
+
top: 0;
|
|
26
|
+
left: 0;
|
|
27
|
+
right: 0;
|
|
28
|
+
bottom: 0;
|
|
29
|
+
background: ${colors.background};
|
|
30
|
+
font-family: ${fontStack};
|
|
31
|
+
`,
|
|
32
|
+
loading: css`
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
height: 100vh;
|
|
37
|
+
background: ${colors.background};
|
|
38
|
+
font-family: ${fontStack};
|
|
39
|
+
`,
|
|
40
|
+
loadingContent: css`
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: 16px;
|
|
45
|
+
`,
|
|
46
|
+
spinner: css`
|
|
47
|
+
width: 36px;
|
|
48
|
+
height: 36px;
|
|
49
|
+
border-radius: 50%;
|
|
50
|
+
border: 3px solid ${colors.border};
|
|
51
|
+
border-top-color: ${colors.primary};
|
|
52
|
+
animation: ${spin} 0.8s linear infinite;
|
|
53
|
+
`,
|
|
54
|
+
loadingText: css`
|
|
55
|
+
color: ${colors.textSecondary};
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
margin: 0;
|
|
59
|
+
`,
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function LoadingState() {
|
|
63
|
+
return (
|
|
64
|
+
<div css={styles.loading}>
|
|
65
|
+
<div css={styles.loadingContent}>
|
|
66
|
+
<div css={styles.spinner} />
|
|
67
|
+
<p css={styles.loadingText}>Loading Studio...</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const StudioUI = dynamic(
|
|
74
|
+
() => import('@gallop.software/studio').then((m) => m.StudioUI),
|
|
75
|
+
{
|
|
76
|
+
ssr: false,
|
|
77
|
+
loading: () => <LoadingState />,
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
|
|
81
|
+
export default function StudioPage() {
|
|
82
|
+
const workspace = process.env.NEXT_PUBLIC_STUDIO_WORKSPACE || 'Unknown'
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<div css={styles.container}>
|
|
86
|
+
<StudioUI
|
|
87
|
+
isVisible={true}
|
|
88
|
+
standaloneMode={true}
|
|
89
|
+
workspacePath={workspace}
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
)
|
|
93
|
+
}
|
package/bin/studio.mjs
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { spawn } from 'child_process'
|
|
4
|
+
import { resolve, dirname, join } from 'path'
|
|
5
|
+
import { fileURLToPath } from 'url'
|
|
6
|
+
import { existsSync, mkdirSync, cpSync, symlinkSync, rmSync, writeFileSync } from 'fs'
|
|
7
|
+
import { tmpdir } from 'os'
|
|
8
|
+
|
|
9
|
+
const __filename = fileURLToPath(import.meta.url)
|
|
10
|
+
const __dirname = dirname(__filename)
|
|
5
11
|
|
|
6
12
|
// Parse command line arguments
|
|
7
13
|
const args = process.argv.slice(2)
|
|
@@ -58,6 +64,138 @@ console.log(`
|
|
|
58
64
|
└─────────────────────────────────────┘
|
|
59
65
|
`)
|
|
60
66
|
|
|
61
|
-
//
|
|
62
|
-
|
|
63
|
-
|
|
67
|
+
// Set up paths
|
|
68
|
+
const studioRoot = resolve(__dirname, '..')
|
|
69
|
+
const tempDir = join(tmpdir(), 'gallop-studio-' + Date.now())
|
|
70
|
+
|
|
71
|
+
// Clean up any old temp directories
|
|
72
|
+
const tempBase = join(tmpdir(), 'gallop-studio-')
|
|
73
|
+
// Note: We don't clean up old dirs here to avoid race conditions with other instances
|
|
74
|
+
|
|
75
|
+
// Create temp directory
|
|
76
|
+
mkdirSync(tempDir, { recursive: true })
|
|
77
|
+
|
|
78
|
+
console.log('Setting up Studio...')
|
|
79
|
+
|
|
80
|
+
// Copy app files to temp directory
|
|
81
|
+
cpSync(join(studioRoot, 'app'), join(tempDir, 'app'), { recursive: true })
|
|
82
|
+
|
|
83
|
+
// Move next.config.mjs from app/ to root of temp dir
|
|
84
|
+
const nextConfigSrc = join(tempDir, 'app', 'next.config.mjs')
|
|
85
|
+
const nextConfigDest = join(tempDir, 'next.config.mjs')
|
|
86
|
+
if (existsSync(nextConfigSrc)) {
|
|
87
|
+
cpSync(nextConfigSrc, nextConfigDest)
|
|
88
|
+
rmSync(nextConfigSrc)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Create package.json for the temp app
|
|
92
|
+
const packageJson = {
|
|
93
|
+
name: 'studio-standalone',
|
|
94
|
+
private: true,
|
|
95
|
+
type: 'module',
|
|
96
|
+
}
|
|
97
|
+
writeFileSync(join(tempDir, 'package.json'), JSON.stringify(packageJson, null, 2))
|
|
98
|
+
|
|
99
|
+
// Create tsconfig.json for TypeScript support
|
|
100
|
+
const tsconfig = {
|
|
101
|
+
compilerOptions: {
|
|
102
|
+
target: 'ES2020',
|
|
103
|
+
lib: ['ES2020', 'DOM', 'DOM.Iterable'],
|
|
104
|
+
module: 'ESNext',
|
|
105
|
+
moduleResolution: 'bundler',
|
|
106
|
+
jsx: 'preserve',
|
|
107
|
+
jsxImportSource: '@emotion/react',
|
|
108
|
+
strict: true,
|
|
109
|
+
noEmit: true,
|
|
110
|
+
esModuleInterop: true,
|
|
111
|
+
skipLibCheck: true,
|
|
112
|
+
forceConsistentCasingInFileNames: true,
|
|
113
|
+
resolveJsonModule: true,
|
|
114
|
+
isolatedModules: true,
|
|
115
|
+
allowJs: true,
|
|
116
|
+
},
|
|
117
|
+
include: ['app/**/*'],
|
|
118
|
+
exclude: ['node_modules'],
|
|
119
|
+
}
|
|
120
|
+
writeFileSync(join(tempDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2))
|
|
121
|
+
|
|
122
|
+
// Symlink node_modules from studioRoot
|
|
123
|
+
const nodeModulesSource = join(studioRoot, 'node_modules')
|
|
124
|
+
const nodeModulesTarget = join(tempDir, 'node_modules')
|
|
125
|
+
|
|
126
|
+
try {
|
|
127
|
+
symlinkSync(nodeModulesSource, nodeModulesTarget, 'junction')
|
|
128
|
+
} catch (e) {
|
|
129
|
+
// If symlink fails (e.g., on some Windows configs), fall back to copying
|
|
130
|
+
console.log('Creating node_modules link...')
|
|
131
|
+
cpSync(nodeModulesSource, nodeModulesTarget, { recursive: true })
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// Find the next binary
|
|
135
|
+
const nextBin = join(nodeModulesTarget, '.bin', 'next')
|
|
136
|
+
|
|
137
|
+
if (!existsSync(nextBin)) {
|
|
138
|
+
console.error('Error: Next.js not found in Studio package.')
|
|
139
|
+
console.error('This is likely a package installation issue.')
|
|
140
|
+
rmSync(tempDir, { recursive: true, force: true })
|
|
141
|
+
process.exit(1)
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Set up environment
|
|
145
|
+
const env = {
|
|
146
|
+
...process.env,
|
|
147
|
+
STUDIO_WORKSPACE: workspace,
|
|
148
|
+
NODE_ENV: 'development',
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Start Next.js dev server from temp directory
|
|
152
|
+
const child = spawn(nextBin, ['dev', '-p', '3001'], {
|
|
153
|
+
stdio: 'inherit',
|
|
154
|
+
cwd: tempDir,
|
|
155
|
+
env,
|
|
156
|
+
})
|
|
157
|
+
|
|
158
|
+
// Open browser if requested
|
|
159
|
+
if (shouldOpen) {
|
|
160
|
+
setTimeout(async () => {
|
|
161
|
+
try {
|
|
162
|
+
const open = (await import('open')).default
|
|
163
|
+
open('http://localhost:3001')
|
|
164
|
+
} catch {
|
|
165
|
+
// open package might not be available
|
|
166
|
+
}
|
|
167
|
+
}, 3000)
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// Handle process termination
|
|
171
|
+
const cleanup = () => {
|
|
172
|
+
child.kill('SIGINT')
|
|
173
|
+
// Clean up temp directory
|
|
174
|
+
setTimeout(() => {
|
|
175
|
+
try {
|
|
176
|
+
rmSync(tempDir, { recursive: true, force: true })
|
|
177
|
+
} catch {
|
|
178
|
+
// Ignore cleanup errors
|
|
179
|
+
}
|
|
180
|
+
}, 1000)
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
process.on('SIGINT', () => {
|
|
184
|
+
cleanup()
|
|
185
|
+
process.exit(0)
|
|
186
|
+
})
|
|
187
|
+
|
|
188
|
+
process.on('SIGTERM', () => {
|
|
189
|
+
cleanup()
|
|
190
|
+
process.exit(0)
|
|
191
|
+
})
|
|
192
|
+
|
|
193
|
+
child.on('close', (code) => {
|
|
194
|
+
// Clean up temp directory
|
|
195
|
+
try {
|
|
196
|
+
rmSync(tempDir, { recursive: true, force: true })
|
|
197
|
+
} catch {
|
|
198
|
+
// Ignore cleanup errors
|
|
199
|
+
}
|
|
200
|
+
process.exit(code || 0)
|
|
201
|
+
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gallop.software/studio",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.6",
|
|
4
4
|
"description": "Media manager for Gallop templates - upload, process, and sync images to CDN",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -61,8 +61,13 @@
|
|
|
61
61
|
"@emotion/react": "^11.14.0",
|
|
62
62
|
"blurhash": "^2.0.5",
|
|
63
63
|
"clsx": "^2.1.1",
|
|
64
|
+
"next": "^15.1.0",
|
|
65
|
+
"open": "^10.1.0",
|
|
66
|
+
"react": "^19.0.0",
|
|
67
|
+
"react-dom": "^19.0.0",
|
|
64
68
|
"react-dropzone": "^14.3.5",
|
|
65
|
-
"sharp": "^0.33.5"
|
|
69
|
+
"sharp": "^0.33.5",
|
|
70
|
+
"typescript": "^5.7.2"
|
|
66
71
|
},
|
|
67
72
|
"devDependencies": {
|
|
68
73
|
"@types/node": "^22.10.5",
|
package/app/page.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import dynamic from 'next/dynamic'
|
|
4
|
-
|
|
5
|
-
const StudioUI = dynamic(
|
|
6
|
-
() => import('@gallop.software/studio').then((m) => m.StudioUI),
|
|
7
|
-
{
|
|
8
|
-
ssr: false,
|
|
9
|
-
loading: () => (
|
|
10
|
-
<div style={styles.loading}>
|
|
11
|
-
<div style={styles.loadingContent}>
|
|
12
|
-
<div style={styles.spinner} />
|
|
13
|
-
<p style={styles.loadingText}>Loading Studio...</p>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
),
|
|
17
|
-
}
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
const styles = {
|
|
21
|
-
container: {
|
|
22
|
-
position: 'fixed',
|
|
23
|
-
top: 0,
|
|
24
|
-
left: 0,
|
|
25
|
-
right: 0,
|
|
26
|
-
bottom: 0,
|
|
27
|
-
background: '#0a0a0a',
|
|
28
|
-
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`,
|
|
29
|
-
},
|
|
30
|
-
loading: {
|
|
31
|
-
display: 'flex',
|
|
32
|
-
alignItems: 'center',
|
|
33
|
-
justifyContent: 'center',
|
|
34
|
-
height: '100vh',
|
|
35
|
-
background: '#0a0a0a',
|
|
36
|
-
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`,
|
|
37
|
-
},
|
|
38
|
-
loadingContent: {
|
|
39
|
-
display: 'flex',
|
|
40
|
-
flexDirection: 'column',
|
|
41
|
-
alignItems: 'center',
|
|
42
|
-
gap: '16px',
|
|
43
|
-
},
|
|
44
|
-
spinner: {
|
|
45
|
-
width: '36px',
|
|
46
|
-
height: '36px',
|
|
47
|
-
borderRadius: '50%',
|
|
48
|
-
border: '3px solid #2a2a2a',
|
|
49
|
-
borderTopColor: '#635bff',
|
|
50
|
-
animation: 'spin 0.8s linear infinite',
|
|
51
|
-
},
|
|
52
|
-
loadingText: {
|
|
53
|
-
color: '#888888',
|
|
54
|
-
fontSize: '14px',
|
|
55
|
-
fontWeight: 500,
|
|
56
|
-
margin: 0,
|
|
57
|
-
},
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export default function StudioPage() {
|
|
61
|
-
const workspace = process.env.NEXT_PUBLIC_STUDIO_WORKSPACE || 'Unknown'
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<div style={styles.container}>
|
|
65
|
-
<style>{`
|
|
66
|
-
@keyframes spin {
|
|
67
|
-
to { transform: rotate(360deg); }
|
|
68
|
-
}
|
|
69
|
-
`}</style>
|
|
70
|
-
<StudioUI
|
|
71
|
-
isVisible={true}
|
|
72
|
-
standaloneMode={true}
|
|
73
|
-
workspacePath={workspace}
|
|
74
|
-
/>
|
|
75
|
-
</div>
|
|
76
|
-
)
|
|
77
|
-
}
|
|
File without changes
|