@gallop.software/studio 0.1.41 → 0.1.43

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.
Files changed (9) hide show
  1. package/dist/{StudioUI-ENDN62RA.mjs → StudioUI-NYRJEXTT.mjs} +147 -225
  2. package/dist/StudioUI-NYRJEXTT.mjs.map +1 -0
  3. package/dist/{StudioUI-G37N5ORG.js → StudioUI-R5J5RSL2.js} +147 -225
  4. package/dist/StudioUI-R5J5RSL2.js.map +1 -0
  5. package/dist/index.js +1 -1
  6. package/dist/index.mjs +1 -1
  7. package/package.json +1 -1
  8. package/dist/StudioUI-ENDN62RA.mjs.map +0 -1
  9. package/dist/StudioUI-G37N5ORG.js.map +0 -1
package/dist/{StudioUI-G37N5ORG.js → StudioUI-R5J5RSL2.js} RENAMED
@@ -1113,6 +1113,7 @@ var styles3 = {
1113
1113
  border-radius: 4px;
1114
1114
  `,
1115
1115
  content: _react3.css`
1116
+ position: relative;
1116
1117
  aspect-ratio: 1;
1117
1118
  display: flex;
1118
1119
  align-items: center;
@@ -1123,7 +1124,7 @@ var styles3 = {
1123
1124
  folderIcon: _react3.css`
1124
1125
  width: 56px;
1125
1126
  height: 56px;
1126
- color: #f5a623;
1127
+ color: #697386;
1127
1128
  `,
1128
1129
  imagesFolderIcon: _react3.css`
1129
1130
  width: 56px;
@@ -1198,21 +1199,19 @@ var styles3 = {
1198
1199
  labelRow: _react3.css`
1199
1200
  display: flex;
1200
1201
  flex-direction: column;
1201
- gap: 6px;
1202
+ gap: 2px;
1202
1203
  `,
1203
1204
  labelText: _react3.css`
1204
1205
  flex: 1;
1205
1206
  min-width: 0;
1206
1207
  `,
1207
- buttonRow: _react3.css`
1208
- display: flex;
1209
- gap: 6px;
1210
- `,
1211
1208
  copyBtn: _react3.css`
1212
- position: relative;
1213
- flex-shrink: 0;
1214
- height: 28px;
1215
- width: 28px;
1209
+ position: absolute;
1210
+ top: 8px;
1211
+ right: 8px;
1212
+ z-index: 10;
1213
+ height: 24px;
1214
+ width: 24px;
1216
1215
  font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
1217
1216
  color: ${_chunkUFCWGUAGjs.colors.textSecondary};
1218
1217
  background: ${_chunkUFCWGUAGjs.colors.surface};
@@ -1221,9 +1220,10 @@ var styles3 = {
1221
1220
  cursor: pointer;
1222
1221
  border-radius: 4px;
1223
1222
  transition: all 0.15s ease;
1224
- display: inline-flex;
1223
+ display: flex;
1225
1224
  align-items: center;
1226
1225
  justify-content: center;
1226
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
1227
1227
 
1228
1228
  &:hover {
1229
1229
  background: ${_chunkUFCWGUAGjs.colors.surfaceHover};
@@ -1232,32 +1232,36 @@ var styles3 = {
1232
1232
  }
1233
1233
  `,
1234
1234
  copyIcon: _react3.css`
1235
- width: 14px;
1236
- height: 14px;
1235
+ width: 12px;
1236
+ height: 12px;
1237
1237
  `,
1238
- tooltip: _react3.css`
1238
+ copyBtnFlash: _react3.css`
1239
+ background: ${_chunkUFCWGUAGjs.colors.successLight};
1240
+ border-color: ${_chunkUFCWGUAGjs.colors.success};
1241
+ color: ${_chunkUFCWGUAGjs.colors.success};
1242
+ `,
1243
+ openBtn: _react3.css`
1239
1244
  position: absolute;
1240
- bottom: 100%;
1241
- left: 50%;
1242
- transform: translateX(-50%);
1243
- background: #1a1f36;
1244
- color: white;
1245
- padding: 4px 8px;
1245
+ bottom: 8px;
1246
+ right: 8px;
1247
+ z-index: 10;
1248
+ height: 28px;
1249
+ font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
1250
+ font-weight: 500;
1251
+ color: ${_chunkUFCWGUAGjs.colors.primary};
1252
+ background: ${_chunkUFCWGUAGjs.colors.surface};
1253
+ border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
1254
+ padding: 0 8px;
1255
+ cursor: pointer;
1246
1256
  border-radius: 4px;
1247
- font-size: 12px;
1248
- white-space: nowrap;
1249
- margin-bottom: 6px;
1250
- pointer-events: none;
1251
- z-index: 100;
1257
+ transition: all 0.15s ease;
1258
+ display: flex;
1259
+ align-items: center;
1260
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
1252
1261
 
1253
- &::after {
1254
- content: '';
1255
- position: absolute;
1256
- top: 100%;
1257
- left: 50%;
1258
- transform: translateX(-50%);
1259
- border: 4px solid transparent;
1260
- border-top-color: #1a1f36;
1262
+ &:hover {
1263
+ background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
1264
+ border-color: ${_chunkUFCWGUAGjs.colors.primary};
1261
1265
  }
1262
1266
  `,
1263
1267
  name: _react3.css`
@@ -1275,26 +1279,6 @@ var styles3 = {
1275
1279
  color: ${_chunkUFCWGUAGjs.colors.textMuted};
1276
1280
  margin: 2px 0 0 0;
1277
1281
  `,
1278
- openBtn: _react3.css`
1279
- flex-shrink: 0;
1280
- height: 28px;
1281
- font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
1282
- font-weight: 500;
1283
- color: ${_chunkUFCWGUAGjs.colors.primary};
1284
- background: ${_chunkUFCWGUAGjs.colors.surface};
1285
- border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
1286
- padding: 0 10px;
1287
- cursor: pointer;
1288
- border-radius: 4px;
1289
- transition: all 0.15s ease;
1290
- display: inline-flex;
1291
- align-items: center;
1292
-
1293
- &:hover {
1294
- background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
1295
- border-color: ${_chunkUFCWGUAGjs.colors.primary};
1296
- }
1297
- `,
1298
1282
  selectAllRow: _react3.css`
1299
1283
  display: flex;
1300
1284
  align-items: center;
@@ -1489,67 +1473,62 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
1489
1473
  }
1490
1474
  ),
1491
1475
  item.cdnSynced && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.cdnBadge, children: "CDN" }),
1492
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.content, children: isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.imagesFolderWrapper, children: [
1493
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
1494
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
1495
- ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1496
- "img",
1497
- {
1498
- css: styles3.image,
1499
- src: item.thumbnail,
1500
- alt: item.name,
1501
- loading: "lazy"
1502
- }
1503
- ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1504
- "button",
1505
- {
1506
- css: styles3.noThumbnail,
1507
- onClick: (e) => {
1508
- e.stopPropagation();
1509
- onGenerateThumbnail();
1510
- },
1511
- title: "Generate thumbnail",
1512
- children: [
1513
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
1514
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.noThumbnailText, children: "Generate" })
1515
- ]
1516
- }
1517
- ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
1518
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelRow, children: [
1519
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelText, children: [
1520
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: truncateMiddle(item.name) }),
1521
- isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles3.size, children: [
1522
- item.fileCount !== void 0 ? `${item.fileCount} files` : "",
1523
- item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
1524
- item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
1525
- ] }) : item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.size, children: formatFileSize(item.size) })
1526
- ] }),
1527
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.buttonRow, children: [
1528
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1529
- "button",
1530
- {
1531
- css: styles3.copyBtn,
1532
- onClick: handleCopyPath,
1533
- title: "Copy file path",
1534
- children: [
1535
- showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.tooltip, children: "Copied!" }),
1536
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
1537
- ]
1538
- }
1539
- ),
1540
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1541
- "button",
1542
- {
1543
- css: styles3.openBtn,
1544
- onClick: (e) => {
1545
- e.stopPropagation();
1546
- onOpen();
1547
- },
1548
- children: "Open"
1549
- }
1550
- )
1551
- ] })
1552
- ] }) })
1476
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.content, children: [
1477
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1478
+ "button",
1479
+ {
1480
+ css: [styles3.copyBtn, showCopied && styles3.copyBtnFlash],
1481
+ onClick: handleCopyPath,
1482
+ title: "Copy file path",
1483
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
1484
+ }
1485
+ ),
1486
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1487
+ "button",
1488
+ {
1489
+ css: styles3.openBtn,
1490
+ onClick: (e) => {
1491
+ e.stopPropagation();
1492
+ onOpen();
1493
+ },
1494
+ children: "Open"
1495
+ }
1496
+ ),
1497
+ isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.imagesFolderWrapper, children: [
1498
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
1499
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
1500
+ ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1501
+ "img",
1502
+ {
1503
+ css: styles3.image,
1504
+ src: item.thumbnail,
1505
+ alt: item.name,
1506
+ loading: "lazy"
1507
+ }
1508
+ ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1509
+ "button",
1510
+ {
1511
+ css: styles3.noThumbnail,
1512
+ onClick: (e) => {
1513
+ e.stopPropagation();
1514
+ onGenerateThumbnail();
1515
+ },
1516
+ title: "Generate thumbnail",
1517
+ children: [
1518
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
1519
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.noThumbnailText, children: "Generate" })
1520
+ ]
1521
+ }
1522
+ ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
1523
+ ] }),
1524
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.labelRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelText, children: [
1525
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: truncateMiddle(item.name) }),
1526
+ isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles3.size, children: [
1527
+ item.fileCount !== void 0 ? `${item.fileCount} files` : "",
1528
+ item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
1529
+ item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
1530
+ ] }) : item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.size, children: formatFileSize(item.size) })
1531
+ ] }) }) })
1553
1532
  ]
1554
1533
  }
1555
1534
  );
@@ -1680,11 +1659,16 @@ var styles4 = {
1680
1659
  cursor: pointer;
1681
1660
  display: block;
1682
1661
  `,
1662
+ actionsCell: _react3.css`
1663
+ display: flex;
1664
+ align-items: center;
1665
+ justify-content: flex-end;
1666
+ gap: 8px;
1667
+ `,
1683
1668
  copyBtn: _react3.css`
1684
- position: relative;
1685
1669
  flex-shrink: 0;
1686
- height: 28px;
1687
- width: 28px;
1670
+ height: 32px;
1671
+ width: 32px;
1688
1672
  font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
1689
1673
  color: ${_chunkUFCWGUAGjs.colors.textSecondary};
1690
1674
  background: ${_chunkUFCWGUAGjs.colors.surface};
@@ -1703,34 +1687,14 @@ var styles4 = {
1703
1687
  color: ${_chunkUFCWGUAGjs.colors.text};
1704
1688
  }
1705
1689
  `,
1706
- copyIcon: _react3.css`
1707
- width: 14px;
1708
- height: 14px;
1690
+ copyBtnFlash: _react3.css`
1691
+ background: ${_chunkUFCWGUAGjs.colors.successLight};
1692
+ border-color: ${_chunkUFCWGUAGjs.colors.success};
1693
+ color: ${_chunkUFCWGUAGjs.colors.success};
1709
1694
  `,
1710
- tooltip: _react3.css`
1711
- position: absolute;
1712
- bottom: 100%;
1713
- left: 50%;
1714
- transform: translateX(-50%);
1715
- background: #1a1f36;
1716
- color: white;
1717
- padding: 4px 8px;
1718
- border-radius: 4px;
1719
- font-size: 12px;
1720
- white-space: nowrap;
1721
- margin-bottom: 6px;
1722
- pointer-events: none;
1723
- z-index: 100;
1724
-
1725
- &::after {
1726
- content: '';
1727
- position: absolute;
1728
- top: 100%;
1729
- left: 50%;
1730
- transform: translateX(-50%);
1731
- border: 4px solid transparent;
1732
- border-top-color: #1a1f36;
1733
- }
1695
+ copyIcon: _react3.css`
1696
+ width: 16px;
1697
+ height: 16px;
1734
1698
  `,
1735
1699
  nameCell: _react3.css`
1736
1700
  display: flex;
@@ -1756,7 +1720,7 @@ var styles4 = {
1756
1720
  folderIcon: _react3.css`
1757
1721
  width: 24px;
1758
1722
  height: 24px;
1759
- color: #f5a623;
1723
+ color: #697386;
1760
1724
  `,
1761
1725
  imagesFolderWrapper: _react3.css`
1762
1726
  width: 48px;
@@ -1851,19 +1815,18 @@ var styles4 = {
1851
1815
  color: ${_chunkUFCWGUAGjs.colors.textMuted};
1852
1816
  `,
1853
1817
  openBtn: _react3.css`
1854
- height: 28px;
1855
- font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
1818
+ height: 32px;
1819
+ font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
1856
1820
  font-weight: 500;
1857
1821
  color: ${_chunkUFCWGUAGjs.colors.primary};
1858
1822
  background: ${_chunkUFCWGUAGjs.colors.surface};
1859
1823
  border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
1860
- padding: 0 12px;
1824
+ padding: 0 14px;
1861
1825
  cursor: pointer;
1862
1826
  border-radius: 4px;
1863
1827
  transition: all 0.15s ease;
1864
1828
  display: inline-flex;
1865
1829
  align-items: center;
1866
- margin-left: auto;
1867
1830
 
1868
1831
  &:hover {
1869
1832
  background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
@@ -2046,29 +2009,28 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
2046
2009
  }
2047
2010
  ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
2048
2011
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, title: item.name, children: truncateMiddle2(item.name) }),
2049
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
2050
- "button",
2051
- {
2052
- css: styles4.copyBtn,
2053
- onClick: handleCopyPath,
2054
- title: "Copy file path",
2055
- children: [
2056
- showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.tooltip, children: "Copied!" }),
2057
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
2058
- ]
2059
- }
2060
- ),
2061
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2062
- "button",
2063
- {
2064
- css: styles4.openBtn,
2065
- onClick: (e) => {
2066
- e.stopPropagation();
2067
- onOpen();
2068
- },
2069
- children: "Open"
2070
- }
2071
- )
2012
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.actionsCell, children: [
2013
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2014
+ "button",
2015
+ {
2016
+ css: [styles4.copyBtn, showCopied && styles4.copyBtnFlash],
2017
+ onClick: handleCopyPath,
2018
+ title: "Copy file path",
2019
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
2020
+ }
2021
+ ),
2022
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2023
+ "button",
2024
+ {
2025
+ css: styles4.openBtn,
2026
+ onClick: (e) => {
2027
+ e.stopPropagation();
2028
+ onOpen();
2029
+ },
2030
+ children: "Open"
2031
+ }
2032
+ )
2033
+ ] })
2072
2034
  ] }) }),
2073
2035
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
2074
2036
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
@@ -2176,29 +2138,12 @@ var styles5 = {
2176
2138
  height: 20px;
2177
2139
  color: ${_chunkUFCWGUAGjs.colors.textSecondary};
2178
2140
  `,
2179
- tooltip: _react3.css`
2180
- position: absolute;
2181
- bottom: 100%;
2182
- left: 50%;
2183
- transform: translateX(-50%);
2184
- background: #1a1f36;
2185
- color: white;
2186
- padding: 4px 8px;
2187
- border-radius: 4px;
2188
- font-size: 12px;
2189
- white-space: nowrap;
2190
- margin-bottom: 6px;
2191
- pointer-events: none;
2192
- z-index: 100;
2141
+ copyBtnFlash: _react3.css`
2142
+ background: ${_chunkUFCWGUAGjs.colors.successLight};
2143
+ border-color: ${_chunkUFCWGUAGjs.colors.success};
2193
2144
 
2194
- &::after {
2195
- content: '';
2196
- position: absolute;
2197
- top: 100%;
2198
- left: 50%;
2199
- transform: translateX(-50%);
2200
- border: 4px solid transparent;
2201
- border-top-color: #1a1f36;
2145
+ svg {
2146
+ color: ${_chunkUFCWGUAGjs.colors.success};
2202
2147
  }
2203
2148
  `,
2204
2149
  mainCloseBtn: _react3.css`
@@ -2451,10 +2396,7 @@ function StudioDetailView() {
2451
2396
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.overlay, onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.container, onClick: (e) => e.stopPropagation(), children: [
2452
2397
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.main, children: [
2453
2398
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.headerButtons, children: [
2454
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
2455
- showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.tooltip, children: "Copied!" }),
2456
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
2457
- ] }),
2399
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles5.copyBtn, showCopied && styles5.copyBtnFlash], onClick: handleCopyPath, title: "Copy file path", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) }),
2458
2400
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles5.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
2459
2401
  ] }),
2460
2402
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.mediaWrapper, children: renderMedia() })
@@ -2647,29 +2589,12 @@ var styles6 = {
2647
2589
  border-color: ${_chunkUFCWGUAGjs.colors.borderHover};
2648
2590
  }
2649
2591
  `,
2650
- tooltip: _react3.css`
2651
- position: absolute;
2652
- bottom: 100%;
2653
- left: 50%;
2654
- transform: translateX(-50%);
2655
- background: #1a1f36;
2656
- color: white;
2657
- padding: 4px 8px;
2658
- border-radius: 4px;
2659
- font-size: 12px;
2660
- white-space: nowrap;
2661
- margin-bottom: 6px;
2662
- pointer-events: none;
2663
- z-index: 100;
2592
+ copyBtnFlash: _react3.css`
2593
+ background: ${_chunkUFCWGUAGjs.colors.successLight};
2594
+ border-color: ${_chunkUFCWGUAGjs.colors.success};
2664
2595
 
2665
- &::after {
2666
- content: '';
2667
- position: absolute;
2668
- top: 100%;
2669
- left: 50%;
2670
- transform: translateX(-50%);
2671
- border: 4px solid transparent;
2672
- border-top-color: #1a1f36;
2596
+ svg {
2597
+ color: ${_chunkUFCWGUAGjs.colors.success};
2673
2598
  }
2674
2599
  `,
2675
2600
  copyIcon: _react3.css`
@@ -2802,10 +2727,7 @@ function SettingsPanel({ onClose }) {
2802
2727
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Cloudflare R2" }),
2803
2728
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.description, children: "Configure in .env.local file:" }),
2804
2729
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.codeWrapper, children: [
2805
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles6.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
2806
- copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.tooltip, children: "Copied!" }),
2807
- copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
2808
- ] }),
2730
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles6.copyBtn, copied && styles6.copyBtnFlash], onClick: handleCopy, title: "Copy to clipboard", children: copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) }),
2809
2731
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.code, children: [
2810
2732
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
2811
2733
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
@@ -3136,4 +3058,4 @@ var StudioUI_default = StudioUI;
3136
3058
 
3137
3059
 
3138
3060
  exports.StudioUI = StudioUI; exports.default = StudioUI_default;
3139
- //# sourceMappingURL=StudioUI-G37N5ORG.js.map
3061
+ //# sourceMappingURL=StudioUI-R5J5RSL2.js.map