@gallop.software/studio 0.1.21 → 0.1.22

package/dist/{StudioUI-WRFD73YR.mjs → StudioUI-3VFEM3VE.mjs}

@@ -1,4 +1,10 @@
 "use client";
+import {
+  baseReset,
+  colors,
+  fontSize,
+  fontStack
+} from "./chunk-R5WKNVEV.mjs";
 
 // src/components/StudioUI.tsx
 import { useEffect as useEffect3, useCallback as useCallback2, useState as useState6 } from "react";
@@ -54,18 +60,6 @@ import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 // src/components/StudioModal.tsx
 import { css, keyframes } from "@emotion/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var colors = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  danger: "#df1b41",
-  dangerHover: "#c41535"
-};
 var fadeIn = keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -91,8 +85,10 @@ var styles = {
     justify-content: center;
     z-index: 10000;
     animation: ${fadeIn} 0.15s ease-out;
+    font-family: ${fontStack};
   `,
   modal: css`
+    ${baseReset}
     background-color: ${colors.surface};
     border-radius: 12px;
     box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
@@ -105,7 +101,7 @@ var styles = {
     padding: 24px 24px 0;
   `,
   title: css`
-    font-size: 17px;
+    font-size: ${fontSize.lg};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
@@ -115,7 +111,7 @@ var styles = {
     padding: 12px 24px 24px;
   `,
   message: css`
-    font-size: 14px;
+    font-size: ${fontSize.base};
     color: ${colors.textSecondary};
     margin: 0;
     line-height: 1.6;
@@ -130,7 +126,7 @@ var styles = {
   `,
   btn: css`
     padding: 10px 18px;
-    font-size: 14px;
+    font-size: ${fontSize.base};
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
@@ -144,7 +140,7 @@ var styles = {
     
     &:hover {
       background-color: ${colors.surfaceHover};
-      border-color: #d0d5dd;
+      border-color: ${colors.borderHover};
     }
   `,
   btnConfirm: css`
@@ -208,19 +204,6 @@ function AlertModal({
 
 // src/components/StudioToolbar.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
-var colors2 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#ffffff",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  danger: "#df1b41",
-  dangerLight: "#fff5f7"
-};
 var spin = keyframes2`
   to { transform: rotate(360deg); }
 `;
@@ -230,13 +213,13 @@ var styles2 = {
     align-items: center;
     justify-content: space-between;
     padding: 12px 24px;
-    background-color: ${colors2.background};
-    border-bottom: 1px solid ${colors2.border};
+    background-color: ${colors.surface};
+    border-bottom: 1px solid ${colors.border};
   `,
   left: css2`
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
   `,
   right: css2`
     display: flex;
@@ -247,20 +230,20 @@ var styles2 = {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 6px 12px;
+    padding: 8px 14px;
     border-radius: 6px;
-    font-size: 13px;
+    font-size: ${fontSize.base};
     font-weight: 500;
-    background: ${colors2.surface};
-    border: 1px solid ${colors2.border};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
     cursor: pointer;
     transition: all 0.15s ease;
-    color: ${colors2.text};
+    color: ${colors.text};
     letter-spacing: -0.01em;
     
     &:hover:not(:disabled) {
-      background-color: ${colors2.surfaceHover};
-      border-color: #d0d5dd;
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
     
     &:disabled {
@@ -269,52 +252,43 @@ var styles2 = {
     }
   `,
   btnPrimary: css2`
-    background: ${colors2.primary};
-    border-color: ${colors2.primary};
+    background: ${colors.primary};
+    border-color: ${colors.primary};
     color: white;
     
     &:hover:not(:disabled) {
-      background: ${colors2.primaryHover};
-      border-color: ${colors2.primaryHover};
+      background: ${colors.primaryHover};
+      border-color: ${colors.primaryHover};
     }
   `,
   btnDanger: css2`
-    color: ${colors2.danger};
+    color: ${colors.danger};
     
     &:hover:not(:disabled) {
-      background-color: ${colors2.dangerLight};
-      border-color: ${colors2.danger};
-    }
-  `,
-  btnGhost: css2`
-    border-color: transparent;
-    background: transparent;
-    
-    &:hover:not(:disabled) {
-      background-color: ${colors2.surfaceHover};
-      border-color: transparent;
+      background-color: ${colors.dangerLight};
+      border-color: ${colors.danger};
     }
   `,
   icon: css2`
-    width: 14px;
-    height: 14px;
+    width: 15px;
+    height: 15px;
   `,
   iconSpin: css2`
     animation: ${spin} 1s linear infinite;
   `,
   selectionCount: css2`
-    font-size: 13px;
-    color: ${colors2.textSecondary};
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
     display: flex;
     align-items: center;
     gap: 8px;
   `,
   clearBtn: css2`
-    color: ${colors2.primary};
+    color: ${colors.primary};
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 13px;
+    font-size: ${fontSize.base};
     font-weight: 500;
     padding: 0;
     
@@ -324,14 +298,15 @@ var styles2 = {
   `,
   divider: css2`
     width: 1px;
-    height: 20px;
-    background: ${colors2.border};
+    height: 24px;
+    background: ${colors.border};
     margin: 0 4px;
   `,
   viewToggle: css2`
     display: flex;
     align-items: center;
-    background-color: ${colors2.surfaceHover};
+    background-color: ${colors.surfaceHover};
+    border: 1px solid ${colors.border};
     border-radius: 6px;
     padding: 2px;
   `,
@@ -341,20 +316,20 @@ var styles2 = {
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    color: ${colors2.textSecondary};
+    color: ${colors.textSecondary};
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     
     &:hover {
-      color: ${colors2.text};
+      color: ${colors.text};
     }
   `,
   viewBtnActive: css2`
-    background-color: ${colors2.surface};
-    color: ${colors2.text};
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    background-color: ${colors.surface};
+    color: ${colors.text};
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   `
 };
 function StudioToolbar() {
@@ -505,7 +480,7 @@ function StudioToolbar() {
         /* @__PURE__ */ jsxs2(
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: styles2.btn,
             onClick: handleReprocess,
             disabled: !hasSelection,
             children: [
@@ -517,7 +492,7 @@ function StudioToolbar() {
         /* @__PURE__ */ jsxs2(
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost, styles2.btnDanger],
+            css: [styles2.btn, styles2.btnDanger],
             onClick: handleDeleteClick,
             disabled: !hasSelection,
             children: [
@@ -529,7 +504,7 @@ function StudioToolbar() {
         /* @__PURE__ */ jsxs2(
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: styles2.btn,
             onClick: handleSyncCdn,
             disabled: !hasSelection,
             children: [
@@ -538,7 +513,7 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs2("button", { css: [styles2.btn, styles2.btnGhost], onClick: handleScan, children: [
+        /* @__PURE__ */ jsxs2("button", { css: styles2.btn, onClick: handleScan, children: [
           /* @__PURE__ */ jsx2(ScanIcon, {}),
           "Scan"
         ] })
@@ -552,7 +527,7 @@ function StudioToolbar() {
         /* @__PURE__ */ jsx2(
           "button",
           {
-            css: [styles2.btn, styles2.btnGhost],
+            css: styles2.btn,
             onClick: handleRefresh,
             children: /* @__PURE__ */ jsx2(RefreshIcon, { spinning: refreshing })
           }
@@ -606,30 +581,19 @@ function ListIcon() {
 // src/components/StudioBreadcrumb.tsx
 import { css as css3 } from "@emotion/react";
 import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
-var colors3 = {
-  primary: "#635bff",
-  background: "#ffffff",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2"
-};
 var styles3 = {
   container: css3`
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 24px;
-    background-color: ${colors3.surface};
-    border-bottom: 1px solid ${colors3.borderLight};
+    background-color: ${colors.surface};
+    border-bottom: 1px solid ${colors.borderLight};
   `,
   backBtn: css3`
     padding: 6px;
-    background: none;
-    border: none;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -638,19 +602,20 @@ var styles3 = {
     justify-content: center;
     
     &:hover {
-      background-color: ${colors3.surfaceHover};
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
   backIcon: css3`
     width: 16px;
     height: 16px;
-    color: ${colors3.textSecondary};
+    color: ${colors.textSecondary};
   `,
   nav: css3`
     display: flex;
     align-items: center;
     gap: 2px;
-    font-size: 13px;
+    font-size: ${fontSize.base};
   `,
   item: css3`
     display: flex;
@@ -658,7 +623,7 @@ var styles3 = {
     gap: 2px;
   `,
   separator: css3`
-    color: ${colors3.textMuted};
+    color: ${colors.textMuted};
     margin: 0 2px;
   `,
   btn: css3`
@@ -668,22 +633,22 @@ var styles3 = {
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.15s ease;
-    font-size: 13px;
+    font-size: ${fontSize.base};
     letter-spacing: -0.01em;
     
     &:hover {
-      background-color: ${colors3.surfaceHover};
+      background-color: ${colors.surfaceHover};
     }
   `,
   btnActive: css3`
-    color: ${colors3.text};
+    color: ${colors.text};
     font-weight: 600;
   `,
   btnInactive: css3`
-    color: ${colors3.textSecondary};
+    color: ${colors.textSecondary};
     
     &:hover {
-      color: ${colors3.text};
+      color: ${colors.text};
     }
   `
 };
@@ -714,21 +679,6 @@ function StudioBreadcrumb() {
 import { useEffect, useState as useState2 } from "react";
 import { css as css4, keyframes as keyframes3 } from "@emotion/react";
 import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var colors4 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d",
-  successLight: "#e6f7ef"
-};
 var spin2 = keyframes3`
   to { transform: rotate(360deg); }
 `;
@@ -743,8 +693,8 @@ var styles4 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 3px solid ${colors4.border};
-    border-top-color: ${colors4.primary};
+    border: 3px solid ${colors.border};
+    border-top-color: ${colors.primary};
     animation: ${spin2} 0.8s linear infinite;
   `,
   empty: css4`
@@ -753,7 +703,7 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: ${colors4.textSecondary};
+    color: ${colors.textSecondary};
   `,
   emptyIcon: css4`
     width: 48px;
@@ -762,12 +712,12 @@ var styles4 = {
     opacity: 0.5;
   `,
   emptyText: css4`
-    font-size: 14px;
+    font-size: ${fontSize.base};
     margin: 0 0 4px 0;
     
     &:last-child {
-      color: ${colors4.textMuted};
-      font-size: 13px;
+      color: ${colors.textMuted};
+      font-size: ${fontSize.sm};
     }
   `,
   grid: css4`
@@ -783,11 +733,11 @@ var styles4 = {
   item: css4`
     position: relative;
     border-radius: 8px;
-    border: 1px solid ${colors4.border};
+    border: 1px solid ${colors.border};
     overflow: hidden;
     cursor: pointer;
     transition: all 0.15s ease;
-    background-color: ${colors4.surface};
+    background-color: ${colors.surface};
     user-select: none;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     
@@ -797,11 +747,11 @@ var styles4 = {
     }
   `,
   itemSelected: css4`
-    border-color: ${colors4.primary};
-    box-shadow: 0 0 0 1px ${colors4.primary};
+    border-color: ${colors.primary};
+    box-shadow: 0 0 0 1px ${colors.primary};
     
     &:hover {
-      border-color: ${colors4.primary};
+      border-color: ${colors.primary};
     }
   `,
   checkboxWrapper: css4`
@@ -815,7 +765,7 @@ var styles4 = {
   checkbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: ${colors4.primary};
+    accent-color: ${colors.primary};
     cursor: pointer;
   `,
   cdnBadge: css4`
@@ -823,8 +773,8 @@ var styles4 = {
     top: 8px;
     right: 8px;
     z-index: 10;
-    background-color: ${colors4.successLight};
-    color: ${colors4.success};
+    background-color: ${colors.successLight};
+    color: ${colors.success};
     font-size: 11px;
     font-weight: 500;
     padding: 2px 8px;
@@ -836,7 +786,7 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     padding: 16px;
-    background: ${colors4.background};
+    background: ${colors.background};
   `,
   folderIcon: css4`
     width: 56px;
@@ -846,7 +796,7 @@ var styles4 = {
   fileIcon: css4`
     width: 40px;
     height: 40px;
-    color: ${colors4.textMuted};
+    color: ${colors.textMuted};
   `,
   image: css4`
     max-width: 100%;
@@ -856,8 +806,8 @@ var styles4 = {
   `,
   label: css4`
     padding: 10px 12px;
-    background-color: ${colors4.surface};
-    border-top: 1px solid ${colors4.borderLight};
+    background-color: ${colors.surface};
+    border-top: 1px solid ${colors.borderLight};
   `,
   labelRow: css4`
     display: flex;
@@ -870,9 +820,9 @@ var styles4 = {
     min-width: 0;
   `,
   name: css4`
-    font-size: 13px;
+    font-size: ${fontSize.sm};
     font-weight: 500;
-    color: ${colors4.text};
+    color: ${colors.text};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -880,24 +830,25 @@ var styles4 = {
     letter-spacing: -0.01em;
   `,
   size: css4`
-    font-size: 12px;
-    color: ${colors4.textMuted};
+    font-size: ${fontSize.xs};
+    color: ${colors.textMuted};
     margin: 2px 0 0 0;
   `,
   openBtn: css4`
     flex-shrink: 0;
-    font-size: 12px;
+    font-size: ${fontSize.xs};
     font-weight: 500;
-    color: ${colors4.primary};
-    background: none;
-    border: none;
-    padding: 4px 8px;
+    color: ${colors.primary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 4px 10px;
     cursor: pointer;
     border-radius: 4px;
-    transition: background-color 0.15s ease;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: ${colors4.primaryLight};
+      background-color: ${colors.primaryLight};
+      border-color: ${colors.primary};
     }
   `,
   selectAllRow: css4`
@@ -905,27 +856,27 @@ var styles4 = {
     align-items: center;
     margin-bottom: 16px;
     padding: 12px 16px;
-    background: ${colors4.surface};
+    background: ${colors.surface};
     border-radius: 8px;
-    border: 1px solid ${colors4.border};
+    border: 1px solid ${colors.border};
   `,
   selectAllLabel: css4`
     display: flex;
     align-items: center;
     gap: 10px;
-    font-size: 13px;
+    font-size: ${fontSize.base};
     font-weight: 500;
-    color: ${colors4.textSecondary};
+    color: ${colors.textSecondary};
     cursor: pointer;
     
     &:hover {
-      color: ${colors4.text};
+      color: ${colors.text};
     }
   `,
   selectAllCheckbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: ${colors4.primary};
+    accent-color: ${colors.primary};
   `
 };
 function StudioFileGrid() {
@@ -1083,19 +1034,6 @@ function formatFileSize(bytes) {
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { css as css5, keyframes as keyframes4 } from "@emotion/react";
 import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
-var colors5 = {
-  primary: "#635bff",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d"
-};
 var spin3 = keyframes4`
   to { transform: rotate(360deg); }
 `;
@@ -1110,8 +1048,8 @@ var styles5 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 3px solid ${colors5.border};
-    border-top-color: ${colors5.primary};
+    border: 3px solid ${colors.border};
+    border-top-color: ${colors.primary};
     animation: ${spin3} 0.8s linear infinite;
   `,
   empty: css5`
@@ -1120,12 +1058,12 @@ var styles5 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: ${colors5.textSecondary};
+    color: ${colors.textSecondary};
   `,
   tableWrapper: css5`
-    background: ${colors5.surface};
+    background: ${colors.surface};
     border-radius: 8px;
-    border: 1px solid ${colors5.border};
+    border: 1px solid ${colors.border};
     overflow: hidden;
   `,
   table: css5`
@@ -1135,13 +1073,13 @@ var styles5 = {
   th: css5`
     text-align: left;
     font-size: 11px;
-    color: ${colors5.textMuted};
+    color: ${colors.textMuted};
     text-transform: uppercase;
     letter-spacing: 0.05em;
     padding: 12px 16px;
     font-weight: 600;
-    background: ${colors5.background};
-    border-bottom: 1px solid ${colors5.border};
+    background: ${colors.background};
+    border-bottom: 1px solid ${colors.border};
   `,
   thCheckbox: css5`
     width: 48px;
@@ -1162,18 +1100,18 @@ var styles5 = {
     user-select: none;
     
     &:hover {
-      background-color: ${colors5.surfaceHover};
+      background-color: ${colors.surfaceHover};
     }
     
     &:not(:last-child) td {
-      border-bottom: 1px solid ${colors5.borderLight};
+      border-bottom: 1px solid ${colors.borderLight};
     }
   `,
   rowSelected: css5`
-    background-color: ${colors5.primaryLight};
+    background-color: ${colors.primaryLight};
     
     &:hover {
-      background-color: ${colors5.primaryLight};
+      background-color: ${colors.primaryLight};
     }
   `,
   td: css5`
@@ -1186,7 +1124,7 @@ var styles5 = {
   checkbox: css5`
     width: 16px;
     height: 16px;
-    accent-color: ${colors5.primary};
+    accent-color: ${colors.primary};
     cursor: pointer;
   `,
   nameCell: css5`
@@ -1203,7 +1141,7 @@ var styles5 = {
   fileIcon: css5`
     width: 20px;
     height: 20px;
-    color: ${colors5.textMuted};
+    color: ${colors.textMuted};
     flex-shrink: 0;
   `,
   thumbnail: css5`
@@ -1212,47 +1150,48 @@ var styles5 = {
     object-fit: cover;
     border-radius: 6px;
     flex-shrink: 0;
-    border: 1px solid ${colors5.borderLight};
+    border: 1px solid ${colors.borderLight};
   `,
   name: css5`
-    font-size: 14px;
+    font-size: ${fontSize.base};
     font-weight: 500;
-    color: ${colors5.text};
+    color: ${colors.text};
     letter-spacing: -0.01em;
   `,
   meta: css5`
-    font-size: 13px;
-    color: ${colors5.textSecondary};
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
   `,
   cdnBadge: css5`
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 12px;
+    font-size: ${fontSize.xs};
     font-weight: 500;
-    color: ${colors5.success};
+    color: ${colors.success};
   `,
   cdnIcon: css5`
     width: 12px;
     height: 12px;
   `,
   cdnEmpty: css5`
-    font-size: 13px;
-    color: ${colors5.textMuted};
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
   `,
   openBtn: css5`
-    font-size: 12px;
+    font-size: ${fontSize.xs};
     font-weight: 500;
-    color: ${colors5.primary};
-    background: none;
-    border: none;
-    padding: 4px 10px;
+    color: ${colors.primary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 4px 12px;
     cursor: pointer;
     border-radius: 4px;
-    transition: background-color 0.15s ease;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: ${colors5.primaryLight};
+      background-color: ${colors.primaryLight};
+      border-color: ${colors.primary};
     }
   `
 };
@@ -1408,43 +1347,26 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var colors6 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  primaryLight: "#f0f0ff",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2",
-  success: "#0d7d4d",
-  successLight: "#e6f7ef",
-  danger: "#df1b41",
-  dangerLight: "#fff5f7"
-};
 var styles6 = {
   panel: css6`
     width: 320px;
-    border-left: 1px solid ${colors6.border};
-    background-color: ${colors6.surface};
+    border-left: 1px solid ${colors.border};
+    background-color: ${colors.surface};
     padding: 20px;
     overflow: auto;
   `,
   title: css6`
-    font-size: 13px;
+    font-size: ${fontSize.sm};
     font-weight: 600;
-    color: ${colors6.textSecondary};
+    color: ${colors.textSecondary};
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin: 0 0 16px 0;
   `,
   imageContainer: css6`
-    background-color: ${colors6.background};
+    background-color: ${colors.background};
     border-radius: 8px;
-    border: 1px solid ${colors6.border};
+    border: 1px solid ${colors.border};
     padding: 12px;
     margin-bottom: 20px;
   `,
@@ -1461,13 +1383,13 @@ var styles6 = {
   row: css6`
     display: flex;
     justify-content: space-between;
-    font-size: 13px;
+    font-size: ${fontSize.sm};
   `,
   label: css6`
-    color: ${colors6.textSecondary};
+    color: ${colors.textSecondary};
   `,
   value: css6`
-    color: ${colors6.text};
+    color: ${colors.text};
     font-weight: 500;
   `,
   valueTruncate: css6`
@@ -1479,12 +1401,12 @@ var styles6 = {
   section: css6`
     padding-top: 12px;
     margin-top: 4px;
-    border-top: 1px solid ${colors6.borderLight};
+    border-top: 1px solid ${colors.borderLight};
   `,
   sectionTitle: css6`
-    font-size: 11px;
+    font-size: ${fontSize.xs};
     font-weight: 600;
-    color: ${colors6.textMuted};
+    color: ${colors.textMuted};
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin: 0 0 10px 0;
@@ -1493,8 +1415,8 @@ var styles6 = {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 13px;
-    color: ${colors6.success};
+    font-size: ${fontSize.sm};
+    color: ${colors.success};
     font-weight: 500;
   `,
   cdnIcon: css6`
@@ -1503,9 +1425,9 @@ var styles6 = {
   `,
   copyBtn: css6`
     margin-top: 8px;
-    font-size: 13px;
+    font-size: ${fontSize.sm};
     font-weight: 500;
-    color: ${colors6.primary};
+    color: ${colors.primary};
     background: none;
     border: none;
     cursor: pointer;
@@ -1519,7 +1441,7 @@ var styles6 = {
     margin-top: 8px;
     height: 32px;
     border-radius: 6px;
-    border: 1px solid ${colors6.border};
+    border: 1px solid ${colors.border};
   `,
   emptyState: css6`
     display: flex;
@@ -1530,8 +1452,8 @@ var styles6 = {
     text-align: center;
   `,
   emptyText: css6`
-    font-size: 13px;
-    color: ${colors6.textMuted};
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
     margin: 0;
   `,
   filePlaceholder: css6`
@@ -1539,13 +1461,13 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     height: 120px;
-    background: ${colors6.background};
+    background: ${colors.background};
     border-radius: 6px;
   `,
   fileIcon: css6`
     width: 56px;
     height: 56px;
-    color: ${colors6.textMuted};
+    color: ${colors.textMuted};
   `,
   folderIcon: css6`
     width: 56px;
@@ -1560,7 +1482,7 @@ var styles6 = {
   actions: css6`
     margin-top: 20px;
     padding-top: 20px;
-    border-top: 1px solid ${colors6.border};
+    border-top: 1px solid ${colors.border};
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -1568,26 +1490,26 @@ var styles6 = {
   actionBtn: css6`
     width: 100%;
     padding: 10px 14px;
-    font-size: 13px;
+    font-size: ${fontSize.base};
     font-weight: 500;
-    background-color: ${colors6.surface};
-    border: 1px solid ${colors6.border};
+    background-color: ${colors.surface};
+    border: 1px solid ${colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
-    color: ${colors6.text};
+    color: ${colors.text};
     
     &:hover {
-      background-color: ${colors6.surfaceHover};
+      background-color: ${colors.surfaceHover};
       border-color: #d0d5dd;
     }
   `,
   actionBtnDanger: css6`
-    color: ${colors6.danger};
+    color: ${colors.danger};
     
     &:hover {
-      background-color: ${colors6.dangerLight};
-      border-color: ${colors6.danger};
+      background-color: ${colors.dangerLight};
+      border-color: ${colors.danger};
     }
   `
 };
@@ -1787,20 +1709,24 @@ import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@emotion/reac
 var styles7 = {
   btn: css7`
     padding: 8px;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
   icon: css7`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
+    width: 18px;
+    height: 18px;
+    color: ${colors.textSecondary};
   `,
   overlay: css7`
     position: fixed;
@@ -1812,20 +1738,15 @@ var styles7 = {
     display: flex;
     align-items: center;
     justify-content: center;
-  `,
-  backdrop: css7`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(26, 31, 54, 0.4);
+    backdrop-filter: blur(4px);
   `,
   panel: css7`
+    ${baseReset}
     position: relative;
-    background-color: white;
+    background-color: ${colors.surface};
     border-radius: 12px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 512px;
     padding: 24px;
@@ -1837,19 +1758,26 @@ var styles7 = {
     margin-bottom: 24px;
   `,
   title: css7`
-    font-size: 18px;
+    font-size: ${fontSize.xl};
     font-weight: 600;
+    color: ${colors.text};
     margin: 0;
+    letter-spacing: -0.02em;
   `,
   closeBtn: css7`
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    padding: 6px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
   sections: css7`
@@ -1858,23 +1786,24 @@ var styles7 = {
     gap: 24px;
   `,
   sectionTitle: css7`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
+    font-size: ${fontSize.base};
+    font-weight: 600;
+    color: ${colors.text};
     margin: 0 0 12px 0;
   `,
   description: css7`
-    font-size: 12px;
-    color: #6b7280;
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
     margin: 0 0 12px 0;
   `,
   code: css7`
-    background-color: #f9fafb;
+    background-color: ${colors.background};
     border-radius: 8px;
     padding: 12px;
-    font-family: monospace;
-    font-size: 12px;
-    color: #4b5563;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: ${fontSize.xs};
+    color: ${colors.textSecondary};
+    border: 1px solid ${colors.border};
   `,
   codeLine: css7`
     margin: 0 0 4px 0;
@@ -1885,14 +1814,22 @@ var styles7 = {
   `,
   input: css7`
     width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 14px;
+    padding: 10px 14px;
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    color: ${colors.text};
+    background: ${colors.surface};
+    transition: all 0.15s ease;
     
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 2px #a855f7;
+      border-color: ${colors.primary};
+      box-shadow: 0 0 0 3px ${colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${colors.textMuted};
     }
   `,
   grid: css7`
@@ -1901,41 +1838,50 @@ var styles7 = {
     gap: 12px;
   `,
   label: css7`
-    font-size: 12px;
-    color: #6b7280;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.textSecondary};
     display: block;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
   `,
   footer: css7`
     margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid ${colors.border};
     display: flex;
     justify-content: flex-end;
     gap: 12px;
   `,
   cancelBtn: css7`
-    padding: 8px 16px;
-    font-size: 14px;
-    color: #4b5563;
-    background: none;
-    border: none;
-    border-radius: 8px;
+    padding: 10px 18px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.text};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
   saveBtn: css7`
-    padding: 8px 16px;
-    font-size: 14px;
+    padding: 10px 18px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
     color: white;
-    background-color: #9333ea;
-    border: none;
-    border-radius: 8px;
+    background-color: ${colors.primary};
+    border: 1px solid ${colors.primary};
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #7c3aed;
+      background-color: ${colors.primaryHover};
+      border-color: ${colors.primaryHover};
     }
   `
 };
@@ -1963,92 +1909,75 @@ function StudioSettings() {
   ] });
 }
 function SettingsPanel({ onClose }) {
-  return /* @__PURE__ */ jsxs7("div", { css: styles7.overlay, children: [
-    /* @__PURE__ */ jsx7("div", { css: styles7.backdrop, onClick: onClose }),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.panel, children: [
-      /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
-        /* @__PURE__ */ jsx7("h2", { css: styles7.title, children: "Settings" }),
-        /* @__PURE__ */ jsx7("button", { css: styles7.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx7("svg", { css: styles7.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+  return /* @__PURE__ */ jsx7("div", { css: styles7.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs7("div", { css: styles7.panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
+      /* @__PURE__ */ jsx7("h2", { css: styles7.title, children: "Settings" }),
+      /* @__PURE__ */ jsx7("button", { css: styles7.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx7("svg", { css: styles7.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { css: styles7.sections, children: [
+      /* @__PURE__ */ jsxs7("section", { children: [
+        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Cloudflare R2" }),
+        /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Configure in .env.local file:" }),
+        /* @__PURE__ */ jsxs7("div", { css: styles7.code, children: [
+          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+          /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { css: styles7.sections, children: [
-        /* @__PURE__ */ jsxs7("section", { children: [
-          /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Cloudflare R2" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Configure in .env.local file:" }),
-          /* @__PURE__ */ jsxs7("div", { css: styles7.code, children: [
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs7("section", { children: [
-          /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Custom CDN URL" }),
-          /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Override the default R2 URL with a custom domain:" }),
-          /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
-        ] }),
-        /* @__PURE__ */ jsxs7("section", { children: [
-          /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Thumbnail Sizes" }),
-          /* @__PURE__ */ jsxs7("div", { css: styles7.grid, children: [
-            /* @__PURE__ */ jsxs7("div", { children: [
-              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Small" }),
-              /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 300 })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { children: [
-              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
-              /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 700 })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { children: [
-              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Large" }),
-              /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 1400 })
-            ] })
+      /* @__PURE__ */ jsxs7("section", { children: [
+        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Custom CDN URL" }),
+        /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Override the default R2 URL with a custom domain:" }),
+        /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
+      ] }),
+      /* @__PURE__ */ jsxs7("section", { children: [
+        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Thumbnail Sizes" }),
+        /* @__PURE__ */ jsxs7("div", { css: styles7.grid, children: [
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Small" }),
+            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 300 })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
+            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 700 })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Large" }),
+            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 1400 })
           ] })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { css: styles7.footer, children: [
-        /* @__PURE__ */ jsx7("button", { css: styles7.cancelBtn, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx7("button", { css: styles7.saveBtn, children: "Save Changes" })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { css: styles7.footer, children: [
+      /* @__PURE__ */ jsx7("button", { css: styles7.cancelBtn, onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx7("button", { css: styles7.saveBtn, children: "Save Changes" })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/components/StudioUI.tsx
 import { jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var colors7 = {
-  primary: "#635bff",
-  primaryHover: "#5851e5",
-  background: "#f6f9fc",
-  surface: "#ffffff",
-  surfaceHover: "#f6f9fc",
-  border: "#e3e8ee",
-  borderLight: "#eef1f6",
-  text: "#1a1f36",
-  textSecondary: "#697386",
-  textMuted: "#8792a2"
-};
 var styles8 = {
   container: css8`
+    ${baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;
-    background: ${colors7.background};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    background: ${colors.background};
   `,
   header: css8`
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 24px;
-    background: ${colors7.surface};
-    border-bottom: 1px solid ${colors7.border};
+    background: ${colors.surface};
+    border-bottom: 1px solid ${colors.border};
   `,
   title: css8`
-    font-size: 17px;
+    font-size: ${fontSize.xl};
     font-weight: 600;
-    color: ${colors7.text};
+    color: ${colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
@@ -2059,8 +1988,8 @@ var styles8 = {
   `,
   closeBtn: css8`
     padding: 8px;
-    background: none;
-    border: none;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -2069,13 +1998,14 @@ var styles8 = {
     justify-content: center;
     
     &:hover {
-      background-color: ${colors7.surfaceHover};
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
     }
   `,
   closeIcon: css8`
     width: 18px;
     height: 18px;
-    color: ${colors7.textSecondary};
+    color: ${colors.textSecondary};
   `,
   content: css8`
     flex: 1;
@@ -2232,4 +2162,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-WRFD73YR.mjs.map
+//# sourceMappingURL=StudioUI-3VFEM3VE.mjs.map