@gallop.software/studio 1.6.4 → 1.6.5
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.
|
@@ -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/package.json
CHANGED
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
|