@gallop.software/studio 1.6.3 → 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.
- package/app/{layout.js → layout.tsx} +9 -2
- package/app/next.config.mjs +11 -0
- package/app/page.tsx +93 -0
- package/dist/{StudioUI-QZ54STXE.mjs → StudioUI-B2DX5RW6.mjs} +26 -9
- package/dist/StudioUI-B2DX5RW6.mjs.map +1 -0
- package/dist/{StudioUI-GJK45R3T.js → StudioUI-XZSXU52A.js} +26 -9
- package/dist/StudioUI-XZSXU52A.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/app/page.js +0 -77
- package/dist/StudioUI-GJK45R3T.js.map +0 -1
- package/dist/StudioUI-QZ54STXE.mjs.map +0 -1
- /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
|
+
}
|
|
@@ -5986,6 +5986,15 @@ var styles11 = {
|
|
|
5986
5986
|
height: 16px;
|
|
5987
5987
|
color: ${colors.textSecondary};
|
|
5988
5988
|
`,
|
|
5989
|
+
workspacePath: css11`
|
|
5990
|
+
font-size: ${fontSize.sm};
|
|
5991
|
+
color: ${colors.textMuted};
|
|
5992
|
+
padding: 0 12px;
|
|
5993
|
+
white-space: nowrap;
|
|
5994
|
+
overflow: hidden;
|
|
5995
|
+
text-overflow: ellipsis;
|
|
5996
|
+
max-width: 200px;
|
|
5997
|
+
`,
|
|
5989
5998
|
content: css11`
|
|
5990
5999
|
flex: 1;
|
|
5991
6000
|
display: flex;
|
|
@@ -6028,7 +6037,14 @@ var styles11 = {
|
|
|
6028
6037
|
height: 48px;
|
|
6029
6038
|
`
|
|
6030
6039
|
};
|
|
6031
|
-
function StudioUI({
|
|
6040
|
+
function StudioUI({
|
|
6041
|
+
onClose,
|
|
6042
|
+
isVisible = true,
|
|
6043
|
+
standaloneMode = false,
|
|
6044
|
+
workspacePath
|
|
6045
|
+
}) {
|
|
6046
|
+
const handleClose = onClose || (() => {
|
|
6047
|
+
});
|
|
6032
6048
|
const [currentPath, setCurrentPathInternal] = useState11("public");
|
|
6033
6049
|
const [selectedItems, setSelectedItems] = useState11(/* @__PURE__ */ new Set());
|
|
6034
6050
|
const [lastSelectedPath, setLastSelectedPath] = useState11(null);
|
|
@@ -6154,12 +6170,12 @@ function StudioUI({ onClose, isVisible = true }) {
|
|
|
6154
6170
|
}
|
|
6155
6171
|
if (focusedItem) {
|
|
6156
6172
|
setFocusedItem(null);
|
|
6157
|
-
} else {
|
|
6158
|
-
|
|
6173
|
+
} else if (!standaloneMode) {
|
|
6174
|
+
handleClose();
|
|
6159
6175
|
}
|
|
6160
6176
|
}
|
|
6161
6177
|
},
|
|
6162
|
-
[
|
|
6178
|
+
[handleClose, focusedItem, standaloneMode]
|
|
6163
6179
|
);
|
|
6164
6180
|
useEffect5(() => {
|
|
6165
6181
|
if (isVisible) {
|
|
@@ -6175,8 +6191,8 @@ function StudioUI({ onClose, isVisible = true }) {
|
|
|
6175
6191
|
isOpen: true,
|
|
6176
6192
|
openStudio: () => {
|
|
6177
6193
|
},
|
|
6178
|
-
closeStudio:
|
|
6179
|
-
toggleStudio:
|
|
6194
|
+
closeStudio: handleClose,
|
|
6195
|
+
toggleStudio: handleClose,
|
|
6180
6196
|
currentPath,
|
|
6181
6197
|
setCurrentPath,
|
|
6182
6198
|
navigateUp,
|
|
@@ -6228,12 +6244,13 @@ function StudioUI({ onClose, isVisible = true }) {
|
|
|
6228
6244
|
/* @__PURE__ */ jsx11("div", { css: styles11.headerLeft, children: /* @__PURE__ */ jsx11("h1", { css: styles11.title, children: "Studio" }) }),
|
|
6229
6245
|
/* @__PURE__ */ jsx11("div", { css: styles11.headerCenter, children: /* @__PURE__ */ jsx11(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
|
|
6230
6246
|
/* @__PURE__ */ jsxs11("div", { css: styles11.headerActions, children: [
|
|
6247
|
+
standaloneMode && workspacePath && /* @__PURE__ */ jsx11("span", { css: styles11.workspacePath, title: workspacePath, children: workspacePath.length > 30 ? "..." + workspacePath.slice(-27) : workspacePath }),
|
|
6231
6248
|
/* @__PURE__ */ jsx11(StudioSettings, {}),
|
|
6232
|
-
/* @__PURE__ */ jsx11(
|
|
6249
|
+
!standaloneMode && /* @__PURE__ */ jsx11(
|
|
6233
6250
|
"button",
|
|
6234
6251
|
{
|
|
6235
6252
|
css: styles11.headerBtn,
|
|
6236
|
-
onClick:
|
|
6253
|
+
onClick: handleClose,
|
|
6237
6254
|
"aria-label": "Close Studio",
|
|
6238
6255
|
children: /* @__PURE__ */ jsx11(CloseIcon, {})
|
|
6239
6256
|
}
|
|
@@ -6497,4 +6514,4 @@ export {
|
|
|
6497
6514
|
StudioUI,
|
|
6498
6515
|
StudioUI_default as default
|
|
6499
6516
|
};
|
|
6500
|
-
//# sourceMappingURL=StudioUI-
|
|
6517
|
+
//# sourceMappingURL=StudioUI-B2DX5RW6.mjs.map
|