@gallop.software/studio 0.1.19 → 0.1.21

package/dist/{StudioUI-ZCQOVAGT.mjs → StudioUI-WRFD73YR.mjs}

@@ -54,6 +54,18 @@ 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; }
@@ -61,18 +73,19 @@ var fadeIn = keyframes`
 var slideIn = keyframes`
   from { 
     opacity: 0;
-    transform: scale(0.95);
+    transform: translateY(-8px) scale(0.98);
   }
   to { 
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0) scale(1);
   }
 `;
 var styles = {
   overlay: css`
     position: fixed;
     inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(26, 31, 54, 0.4);
+    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -80,73 +93,78 @@ var styles = {
     animation: ${fadeIn} 0.15s ease-out;
   `,
   modal: css`
-    background-color: white;
+    background-color: ${colors.surface};
     border-radius: 12px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    max-width: 400px;
+    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
+    max-width: 420px;
     width: 90%;
-    animation: ${slideIn} 0.15s ease-out;
+    animation: ${slideIn} 0.2s ease-out;
+    overflow: hidden;
   `,
   header: css`
-    padding: 20px 24px 0;
+    padding: 24px 24px 0;
   `,
   title: css`
-    font-size: 18px;
+    font-size: 17px;
     font-weight: 600;
-    color: #111827;
+    color: ${colors.text};
     margin: 0;
+    letter-spacing: -0.02em;
   `,
   body: css`
     padding: 12px 24px 24px;
   `,
   message: css`
     font-size: 14px;
-    color: #6b7280;
+    color: ${colors.textSecondary};
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.6;
   `,
   footer: css`
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     padding: 16px 24px;
-    border-top: 1px solid #e5e7eb;
-    background-color: #f9fafb;
-    border-radius: 0 0 12px 12px;
+    border-top: 1px solid ${colors.border};
+    background-color: ${colors.background};
   `,
   btn: css`
-    padding: 8px 16px;
+    padding: 10px 18px;
     font-size: 14px;
     font-weight: 500;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: all 0.15s ease;
+    letter-spacing: -0.01em;
   `,
   btnCancel: css`
-    background-color: white;
-    border: 1px solid #d1d5db;
-    color: #374151;
+    background-color: ${colors.surface};
+    border: 1px solid ${colors.border};
+    color: ${colors.text};
     
     &:hover {
-      background-color: #f9fafb;
+      background-color: ${colors.surfaceHover};
+      border-color: #d0d5dd;
     }
   `,
   btnConfirm: css`
-    background-color: #9333ea;
-    border: 1px solid #9333ea;
+    background-color: ${colors.primary};
+    border: 1px solid ${colors.primary};
     color: white;
     
     &:hover {
-      background-color: #7c3aed;
+      background-color: ${colors.primaryHover};
+      border-color: ${colors.primaryHover};
     }
   `,
   btnDanger: css`
-    background-color: #dc2626;
-    border: 1px solid #dc2626;
+    background-color: ${colors.danger};
+    border: 1px solid ${colors.danger};
     color: white;
     
     &:hover {
-      background-color: #b91c1c;
+      background-color: ${colors.dangerHover};
+      border-color: ${colors.dangerHover};
     }
   `
 };
@@ -190,6 +208,19 @@ 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); }
 `;
@@ -199,97 +230,131 @@ var styles2 = {
     align-items: center;
     justify-content: space-between;
     padding: 12px 24px;
-    background-color: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
+    background-color: ${colors2.background};
+    border-bottom: 1px solid ${colors2.border};
   `,
   left: css2`
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
   `,
   right: css2`
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 12px;
   `,
   btn: css2`
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    font-size: 14px;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 13px;
     font-weight: 500;
-    background: none;
-    border: none;
+    background: ${colors2.surface};
+    border: 1px solid ${colors2.border};
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: all 0.15s ease;
+    color: ${colors2.text};
+    letter-spacing: -0.01em;
+    
+    &:hover:not(:disabled) {
+      background-color: ${colors2.surfaceHover};
+      border-color: #d0d5dd;
+    }
     
     &:disabled {
       cursor: not-allowed;
       opacity: 0.5;
     }
   `,
-  btnDefault: css2`
-    color: #374151;
+  btnPrimary: css2`
+    background: ${colors2.primary};
+    border-color: ${colors2.primary};
+    color: white;
     
     &:hover:not(:disabled) {
-      background-color: white;
+      background: ${colors2.primaryHover};
+      border-color: ${colors2.primaryHover};
     }
   `,
   btnDanger: css2`
-    color: #dc2626;
+    color: ${colors2.danger};
     
     &:hover:not(:disabled) {
-      background-color: #fef2f2;
+      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;
     }
   `,
   icon: css2`
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
   `,
   iconSpin: css2`
     animation: ${spin} 1s linear infinite;
   `,
   selectionCount: css2`
-    font-size: 14px;
-    color: #4b5563;
+    font-size: 13px;
+    color: ${colors2.textSecondary};
+    display: flex;
+    align-items: center;
+    gap: 8px;
   `,
   clearBtn: css2`
-    margin-left: 8px;
-    color: #9333ea;
+    color: ${colors2.primary};
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 0;
     
     &:hover {
       text-decoration: underline;
     }
   `,
+  divider: css2`
+    width: 1px;
+    height: 20px;
+    background: ${colors2.border};
+    margin: 0 4px;
+  `,
   viewToggle: css2`
     display: flex;
     align-items: center;
-    background-color: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    overflow: hidden;
+    background-color: ${colors2.surfaceHover};
+    border-radius: 6px;
+    padding: 2px;
   `,
   viewBtn: css2`
-    padding: 8px;
-    background: none;
+    padding: 6px 8px;
+    background: transparent;
     border: none;
+    border-radius: 4px;
     cursor: pointer;
-    color: #6b7280;
-    transition: all 0.15s;
+    color: ${colors2.textSecondary};
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      background-color: #f9fafb;
+      color: ${colors2.text};
     }
   `,
   viewBtnActive: css2`
-    background-color: #f3e8ff;
-    color: #7c3aed;
+    background-color: ${colors2.surface};
+    color: ${colors2.text};
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   `
 };
 function StudioToolbar() {
@@ -418,50 +483,65 @@ function StudioToolbar() {
           ref: fileInputRef,
           type: "file",
           multiple: true,
-          accept: "image/*",
+          accept: "image/*,video/*,audio/*,.pdf",
           onChange: handleFileChange,
           style: { display: "none" }
         }
       ),
       /* @__PURE__ */ jsxs2("div", { css: styles2.left, children: [
-        /* @__PURE__ */ jsx2(
-          ToolbarButton,
+        /* @__PURE__ */ jsxs2(
+          "button",
           {
+            css: [styles2.btn, styles2.btnPrimary],
             onClick: handleUpload,
-            icon: "upload",
-            label: uploading ? "Uploading..." : "Upload",
-            disabled: uploading || isInImagesFolder
+            disabled: uploading || isInImagesFolder,
+            children: [
+              /* @__PURE__ */ jsx2(UploadIcon, {}),
+              uploading ? "Uploading..." : "Upload"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx2(
-          ToolbarButton,
+        /* @__PURE__ */ jsx2("div", { css: styles2.divider }),
+        /* @__PURE__ */ jsxs2(
+          "button",
           {
+            css: [styles2.btn, styles2.btnGhost],
             onClick: handleReprocess,
-            icon: "refresh",
-            label: "Reprocess",
-            disabled: !hasSelection
+            disabled: !hasSelection,
+            children: [
+              /* @__PURE__ */ jsx2(RefreshIcon, {}),
+              "Reprocess"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx2(
-          ToolbarButton,
+        /* @__PURE__ */ jsxs2(
+          "button",
           {
+            css: [styles2.btn, styles2.btnGhost, styles2.btnDanger],
             onClick: handleDeleteClick,
-            icon: "trash",
-            label: "Delete",
             disabled: !hasSelection,
-            variant: "danger"
+            children: [
+              /* @__PURE__ */ jsx2(TrashIcon, {}),
+              "Delete"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx2(
-          ToolbarButton,
+        /* @__PURE__ */ jsxs2(
+          "button",
           {
+            css: [styles2.btn, styles2.btnGhost],
             onClick: handleSyncCdn,
-            icon: "cloud",
-            label: "Sync CDN",
-            disabled: !hasSelection
+            disabled: !hasSelection,
+            children: [
+              /* @__PURE__ */ jsx2(CloudIcon, {}),
+              "Sync CDN"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx2(ToolbarButton, { onClick: handleScan, icon: "scan", label: "Scan" })
+        /* @__PURE__ */ jsxs2("button", { css: [styles2.btn, styles2.btnGhost], onClick: handleScan, children: [
+          /* @__PURE__ */ jsx2(ScanIcon, {}),
+          "Scan"
+        ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { css: styles2.right, children: [
         hasSelection && /* @__PURE__ */ jsxs2("span", { css: styles2.selectionCount, children: [
@@ -470,12 +550,11 @@ function StudioToolbar() {
           /* @__PURE__ */ jsx2("button", { css: styles2.clearBtn, onClick: clearSelection, children: "Clear" })
         ] }),
         /* @__PURE__ */ jsx2(
-          ToolbarButton,
+          "button",
           {
+            css: [styles2.btn, styles2.btnGhost],
             onClick: handleRefresh,
-            icon: "reload",
-            label: "Refresh",
-            spinning: refreshing
+            children: /* @__PURE__ */ jsx2(RefreshIcon, { spinning: refreshing })
           }
         ),
         /* @__PURE__ */ jsxs2("div", { css: styles2.viewToggle, children: [
@@ -502,44 +581,20 @@ function StudioToolbar() {
     ] })
   ] });
 }
-function ToolbarButton({
-  onClick,
-  icon,
-  label,
-  disabled,
-  variant = "default",
-  spinning
-}) {
-  return /* @__PURE__ */ jsxs2(
-    "button",
-    {
-      css: [styles2.btn, variant === "danger" ? styles2.btnDanger : styles2.btnDefault],
-      onClick,
-      disabled,
-      children: [
-        /* @__PURE__ */ jsx2(IconComponent, { icon, spinning }),
-        label
-      ]
-    }
-  );
+function UploadIcon() {
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
 }
-function IconComponent({ icon, spinning }) {
-  switch (icon) {
-    case "upload":
-      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
-    case "refresh":
-      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
-    case "trash":
-      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
-    case "cloud":
-      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
-    case "scan":
-      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
-    case "reload":
-      return /* @__PURE__ */ jsx2("svg", { css: [styles2.icon, spinning && styles2.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
-    default:
-      return null;
-  }
+function RefreshIcon({ spinning }) {
+  return /* @__PURE__ */ jsx2("svg", { css: [styles2.icon, spinning && styles2.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
+}
+function CloudIcon() {
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
 }
 function GridIcon() {
   return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
@@ -551,67 +606,84 @@ 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: 8px 24px;
-    background-color: white;
-    border-bottom: 1px solid #f3f4f6;
+    padding: 10px 24px;
+    background-color: ${colors3.surface};
+    border-bottom: 1px solid ${colors3.borderLight};
   `,
   backBtn: css3`
-    padding: 4px;
+    padding: 6px;
     background: none;
     border: none;
-    border-radius: 4px;
+    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: ${colors3.surfaceHover};
     }
   `,
   backIcon: css3`
     width: 16px;
     height: 16px;
-    color: #6b7280;
+    color: ${colors3.textSecondary};
   `,
   nav: css3`
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: 14px;
+    gap: 2px;
+    font-size: 13px;
   `,
   item: css3`
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
   `,
   separator: css3`
-    color: #d1d5db;
+    color: ${colors3.textMuted};
+    margin: 0 2px;
   `,
   btn: css3`
-    padding: 2px 4px;
+    padding: 4px 8px;
     background: none;
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: all 0.15s ease;
+    font-size: 13px;
+    letter-spacing: -0.01em;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${colors3.surfaceHover};
     }
   `,
   btnActive: css3`
-    color: #111827;
-    font-weight: 500;
+    color: ${colors3.text};
+    font-weight: 600;
   `,
   btnInactive: css3`
-    color: #6b7280;
+    color: ${colors3.textSecondary};
     
     &:hover {
-      color: #374151;
+      color: ${colors3.text};
     }
   `
 };
@@ -642,6 +714,21 @@ 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); }
 `;
@@ -656,9 +743,9 @@ var styles4 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 2px solid transparent;
-    border-bottom-color: #9333ea;
-    animation: ${spin2} 1s linear infinite;
+    border: 3px solid ${colors4.border};
+    border-top-color: ${colors4.primary};
+    animation: ${spin2} 0.8s linear infinite;
   `,
   empty: css4`
     display: flex;
@@ -666,21 +753,27 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: #6b7280;
+    color: ${colors4.textSecondary};
   `,
   emptyIcon: css4`
     width: 48px;
     height: 48px;
     margin-bottom: 16px;
+    opacity: 0.5;
   `,
   emptyText: css4`
     font-size: 14px;
-    margin: 0;
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      color: ${colors4.textMuted};
+      font-size: 13px;
+    }
   `,
   grid: css4`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
+    gap: 12px;
     
     @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); }
     @media (min-width: 768px) { grid-template-columns: repeat(4, 1fr); }
@@ -690,23 +783,25 @@ var styles4 = {
   item: css4`
     position: relative;
     border-radius: 8px;
-    border: 2px solid transparent;
+    border: 1px solid ${colors4.border};
     overflow: hidden;
     cursor: pointer;
-    transition: all 0.15s;
-    background-color: #f9fafb;
+    transition: all 0.15s ease;
+    background-color: ${colors4.surface};
     user-select: none;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     
     &:hover {
-      border-color: #e5e7eb;
+      border-color: #d0d5dd;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
     }
   `,
   itemSelected: css4`
-    border-color: #a855f7;
-    background-color: #faf5ff;
+    border-color: ${colors4.primary};
+    box-shadow: 0 0 0 1px ${colors4.primary};
     
     &:hover {
-      border-color: #a855f7;
+      border-color: ${colors4.primary};
     }
   `,
   checkboxWrapper: css4`
@@ -720,7 +815,7 @@ var styles4 = {
   checkbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: #9333ea;
+    accent-color: ${colors4.primary};
     cursor: pointer;
   `,
   cdnBadge: css4`
@@ -728,11 +823,12 @@ var styles4 = {
     top: 8px;
     right: 8px;
     z-index: 10;
-    background-color: #dcfce7;
-    color: #15803d;
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 9999px;
+    background-color: ${colors4.successLight};
+    color: ${colors4.success};
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 4px;
   `,
   content: css4`
     aspect-ratio: 1;
@@ -740,16 +836,17 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     padding: 16px;
+    background: ${colors4.background};
   `,
   folderIcon: css4`
-    width: 64px;
-    height: 64px;
-    color: #facc15;
+    width: 56px;
+    height: 56px;
+    color: #f5a623;
   `,
   fileIcon: css4`
-    width: 48px;
-    height: 48px;
-    color: #9ca3af;
+    width: 40px;
+    height: 40px;
+    color: ${colors4.textMuted};
   `,
   image: css4`
     max-width: 100%;
@@ -758,46 +855,77 @@ var styles4 = {
     border-radius: 4px;
   `,
   label: css4`
-    padding: 6px 8px;
-    background-color: white;
-    border-top: 1px solid #e5e7eb;
+    padding: 10px 12px;
+    background-color: ${colors4.surface};
+    border-top: 1px solid ${colors4.borderLight};
+  `,
+  labelRow: css4`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  `,
+  labelText: css4`
+    flex: 1;
+    min-width: 0;
   `,
   name: css4`
-    font-size: 12px;
-    color: #374151;
+    font-size: 13px;
+    font-weight: 500;
+    color: ${colors4.text};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
+    letter-spacing: -0.01em;
   `,
   size: css4`
     font-size: 12px;
-    color: #9ca3af;
-    margin: 0;
+    color: ${colors4.textMuted};
+    margin: 2px 0 0 0;
+  `,
+  openBtn: css4`
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 500;
+    color: ${colors4.primary};
+    background: none;
+    border: none;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+    
+    &:hover {
+      background-color: ${colors4.primaryLight};
+    }
   `,
   selectAllRow: css4`
     display: flex;
     align-items: center;
-    margin-bottom: 12px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #e5e7eb;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: ${colors4.surface};
+    border-radius: 8px;
+    border: 1px solid ${colors4.border};
   `,
   selectAllLabel: css4`
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: #6b7280;
+    gap: 10px;
+    font-size: 13px;
+    font-weight: 500;
+    color: ${colors4.textSecondary};
     cursor: pointer;
     
     &:hover {
-      color: #374151;
+      color: ${colors4.text};
     }
   `,
   selectAllCheckbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: #9333ea;
+    accent-color: ${colors4.primary};
   `
 };
 function StudioFileGrid() {
@@ -842,7 +970,7 @@ function StudioFileGrid() {
       toggleSelection(item.path);
     }
   };
-  const handleItemDoubleClick = (item) => {
+  const handleOpenFolder = (item) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
     }
@@ -880,20 +1008,19 @@ function StudioFileGrid() {
         item,
         isSelected: selectedItems.has(item.path),
         onClick: (e) => handleItemClick(item, e),
-        onDoubleClick: () => handleItemDoubleClick(item)
+        onOpen: () => handleOpenFolder(item)
       },
       item.path
     )) })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onDoubleClick }) {
+function GridItem({ item, isSelected, onClick, onOpen }) {
   const isFolder = item.type === "folder";
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       css: [styles4.item, isSelected && styles4.itemSelected],
       onClick,
-      onDoubleClick,
       children: [
         /* @__PURE__ */ jsx4(
           "div",
@@ -921,14 +1048,27 @@ function GridItem({ item, isSelected, onClick, onDoubleClick }) {
             loading: "lazy"
           }
         ) : /* @__PURE__ */ jsx4("svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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" }) }) }),
-        /* @__PURE__ */ jsxs4("div", { css: styles4.label, children: [
-          /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: item.name }),
-          isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
-            item.fileCount !== void 0 ? `${item.fileCount} files` : "",
-            item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
-            item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
-          ] }) : item.size !== void 0 && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
-        ] })
+        /* @__PURE__ */ jsx4("div", { css: styles4.label, children: /* @__PURE__ */ jsxs4("div", { css: styles4.labelRow, children: [
+          /* @__PURE__ */ jsxs4("div", { css: styles4.labelText, children: [
+            /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: item.name }),
+            isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
+              item.fileCount !== void 0 ? `${item.fileCount} files` : "",
+              item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
+              item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
+            ] }) : item.size !== void 0 && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
+          ] }),
+          isFolder && /* @__PURE__ */ jsx4(
+            "button",
+            {
+              css: styles4.openBtn,
+              onClick: (e) => {
+                e.stopPropagation();
+                onOpen();
+              },
+              children: "Open"
+            }
+          )
+        ] }) })
       ]
     }
   );
@@ -943,6 +1083,19 @@ 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); }
 `;
@@ -957,9 +1110,9 @@ var styles5 = {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    border: 2px solid transparent;
-    border-bottom-color: #9333ea;
-    animation: ${spin3} 1s linear infinite;
+    border: 3px solid ${colors5.border};
+    border-top-color: ${colors5.primary};
+    animation: ${spin3} 0.8s linear infinite;
   `,
   empty: css5`
     display: flex;
@@ -967,7 +1120,13 @@ var styles5 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: #6b7280;
+    color: ${colors5.textSecondary};
+  `,
+  tableWrapper: css5`
+    background: ${colors5.surface};
+    border-radius: 8px;
+    border: 1px solid ${colors5.border};
+    overflow: hidden;
   `,
   table: css5`
     width: 100%;
@@ -975,15 +1134,17 @@ var styles5 = {
   `,
   th: css5`
     text-align: left;
-    font-size: 12px;
-    color: #6b7280;
+    font-size: 11px;
+    color: ${colors5.textMuted};
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    padding-bottom: 8px;
-    font-weight: normal;
+    padding: 12px 16px;
+    font-weight: 600;
+    background: ${colors5.background};
+    border-bottom: 1px solid ${colors5.border};
   `,
   thCheckbox: css5`
-    width: 32px;
+    width: 48px;
   `,
   thSize: css5`
     width: 96px;
@@ -994,83 +1155,105 @@ var styles5 = {
   thCdn: css5`
     width: 96px;
   `,
-  tbody: css5`
-    border-top: 1px solid #f3f4f6;
-  `,
+  tbody: css5``,
   row: css5`
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: background-color 0.15s ease;
     user-select: none;
     
     &:hover {
-      background-color: #f9fafb;
+      background-color: ${colors5.surfaceHover};
+    }
+    
+    &:not(:last-child) td {
+      border-bottom: 1px solid ${colors5.borderLight};
     }
   `,
   rowSelected: css5`
-    background-color: #faf5ff;
+    background-color: ${colors5.primaryLight};
     
     &:hover {
-      background-color: #faf5ff;
+      background-color: ${colors5.primaryLight};
     }
   `,
   td: css5`
-    padding: 8px 0;
-    border-bottom: 1px solid #f3f4f6;
+    padding: 12px 16px;
   `,
   checkboxCell: css5`
-    padding: 8px 12px;
+    padding: 12px 16px;
     cursor: pointer;
   `,
   checkbox: css5`
     width: 16px;
     height: 16px;
-    accent-color: #9333ea;
+    accent-color: ${colors5.primary};
     cursor: pointer;
   `,
   nameCell: css5`
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
   `,
   folderIcon: css5`
     width: 20px;
     height: 20px;
-    color: #facc15;
+    color: #f5a623;
+    flex-shrink: 0;
   `,
   fileIcon: css5`
     width: 20px;
     height: 20px;
-    color: #9ca3af;
+    color: ${colors5.textMuted};
+    flex-shrink: 0;
   `,
   thumbnail: css5`
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     object-fit: cover;
-    border-radius: 4px;
+    border-radius: 6px;
     flex-shrink: 0;
+    border: 1px solid ${colors5.borderLight};
   `,
   name: css5`
     font-size: 14px;
-    color: #111827;
+    font-weight: 500;
+    color: ${colors5.text};
+    letter-spacing: -0.01em;
   `,
   meta: css5`
-    font-size: 14px;
-    color: #6b7280;
+    font-size: 13px;
+    color: ${colors5.textSecondary};
   `,
   cdnBadge: css5`
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
-    color: #15803d;
+    font-weight: 500;
+    color: ${colors5.success};
   `,
   cdnIcon: css5`
     width: 12px;
     height: 12px;
   `,
   cdnEmpty: css5`
+    font-size: 13px;
+    color: ${colors5.textMuted};
+  `,
+  openBtn: css5`
     font-size: 12px;
-    color: #9ca3af;
+    font-weight: 500;
+    color: ${colors5.primary};
+    background: none;
+    border: none;
+    padding: 4px 10px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.15s ease;
+    
+    &:hover {
+      background-color: ${colors5.primaryLight};
+    }
   `
 };
 function StudioFileList() {
@@ -1111,7 +1294,7 @@ function StudioFileList() {
       toggleSelection(item.path);
     }
   };
-  const handleItemDoubleClick = (item) => {
+  const handleOpenFolder = (item) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
     }
@@ -1150,20 +1333,19 @@ function StudioFileList() {
         item,
         isSelected: selectedItems.has(item.path),
         onClick: (e) => handleItemClick(item, e),
-        onDoubleClick: () => handleItemDoubleClick(item)
+        onOpen: () => handleOpenFolder(item)
       },
       item.path
     )) })
   ] });
 }
-function ListRow({ item, isSelected, onClick, onDoubleClick }) {
+function ListRow({ item, isSelected, onClick, onOpen }) {
   const isFolder = item.type === "folder";
   return /* @__PURE__ */ jsxs5(
     "tr",
     {
       css: [styles5.row, isSelected && styles5.rowSelected],
       onClick,
-      onDoubleClick,
       children: [
         /* @__PURE__ */ jsx5(
           "td",
@@ -1183,7 +1365,18 @@ function ListRow({ item, isSelected, onClick, onDoubleClick }) {
         ),
         /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
           isFolder ? /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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" }) }) : item.thumbnail ? /* @__PURE__ */ jsx5("img", { css: styles5.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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" }) }),
-          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: item.name })
+          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: item.name }),
+          isFolder && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              css: styles5.openBtn,
+              onClick: (e) => {
+                e.stopPropagation();
+                onOpen();
+              },
+              children: "Open"
+            }
+          )
         ] }) }),
         /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
         /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
@@ -1215,70 +1408,94 @@ 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 #e5e7eb;
-    background-color: #f9fafb;
-    padding: 16px;
+    border-left: 1px solid ${colors6.border};
+    background-color: ${colors6.surface};
+    padding: 20px;
     overflow: auto;
   `,
   title: css6`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
+    font-size: 13px;
+    font-weight: 600;
+    color: ${colors6.textSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     margin: 0 0 16px 0;
   `,
   imageContainer: css6`
-    background-color: white;
+    background-color: ${colors6.background};
     border-radius: 8px;
-    border: 1px solid #e5e7eb;
-    padding: 8px;
-    margin-bottom: 16px;
+    border: 1px solid ${colors6.border};
+    padding: 12px;
+    margin-bottom: 20px;
   `,
   image: css6`
     width: 100%;
     height: auto;
-    border-radius: 4px;
+    border-radius: 6px;
   `,
   info: css6`
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
   `,
   row: css6`
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: 13px;
   `,
   label: css6`
-    color: #6b7280;
+    color: ${colors6.textSecondary};
   `,
   value: css6`
-    color: #111827;
+    color: ${colors6.text};
+    font-weight: 500;
   `,
   valueTruncate: css6`
-    max-width: 128px;
+    max-width: 140px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   `,
   section: css6`
-    padding-top: 8px;
-    border-top: 1px solid #e5e7eb;
+    padding-top: 12px;
+    margin-top: 4px;
+    border-top: 1px solid ${colors6.borderLight};
   `,
   sectionTitle: css6`
-    font-size: 12px;
-    font-weight: 500;
-    color: #6b7280;
-    margin: 0 0 8px 0;
+    font-size: 11px;
+    font-weight: 600;
+    color: ${colors6.textMuted};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0 0 10px 0;
   `,
   cdnStatus: css6`
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 12px;
-    color: #16a34a;
+    font-size: 13px;
+    color: ${colors6.success};
+    font-weight: 500;
   `,
   cdnIcon: css6`
     width: 16px;
@@ -1286,8 +1503,9 @@ var styles6 = {
   `,
   copyBtn: css6`
     margin-top: 8px;
-    font-size: 12px;
-    color: #9333ea;
+    font-size: 13px;
+    font-weight: 500;
+    color: ${colors6.primary};
     background: none;
     border: none;
     cursor: pointer;
@@ -1300,17 +1518,20 @@ var styles6 = {
   colorSwatch: css6`
     margin-top: 8px;
     height: 32px;
-    border-radius: 4px;
+    border-radius: 6px;
+    border: 1px solid ${colors6.border};
   `,
   emptyState: css6`
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 200px;
+    text-align: center;
   `,
   emptyText: css6`
-    font-size: 14px;
-    color: #9ca3af;
+    font-size: 13px;
+    color: ${colors6.textMuted};
     margin: 0;
   `,
   filePlaceholder: css6`
@@ -1318,50 +1539,55 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     height: 120px;
+    background: ${colors6.background};
+    border-radius: 6px;
   `,
   fileIcon: css6`
-    width: 64px;
-    height: 64px;
-    color: #9ca3af;
+    width: 56px;
+    height: 56px;
+    color: ${colors6.textMuted};
   `,
   folderIcon: css6`
-    width: 64px;
-    height: 64px;
-    color: #facc15;
+    width: 56px;
+    height: 56px;
+    color: #f5a623;
   `,
   video: css6`
     width: 100%;
     height: auto;
-    border-radius: 4px;
+    border-radius: 6px;
   `,
   actions: css6`
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid ${colors6.border};
     display: flex;
     flex-direction: column;
     gap: 8px;
   `,
   actionBtn: css6`
     width: 100%;
-    padding: 8px 12px;
-    font-size: 14px;
-    background-color: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    font-weight: 500;
+    background-color: ${colors6.surface};
+    border: 1px solid ${colors6.border};
+    border-radius: 6px;
     cursor: pointer;
-    transition: background-color 0.15s;
-    color: #374151;
+    transition: all 0.15s ease;
+    color: ${colors6.text};
     
     &:hover {
-      background-color: #f9fafb;
+      background-color: ${colors6.surfaceHover};
+      border-color: #d0d5dd;
     }
   `,
   actionBtnDanger: css6`
-    color: #dc2626;
+    color: ${colors6.danger};
     
     &:hover {
-      background-color: #fef2f2;
+      background-color: ${colors6.dangerLight};
+      border-color: ${colors6.danger};
     }
   `
 };
@@ -1789,25 +2015,42 @@ function SettingsPanel({ onClose }) {
 
 // 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`
     display: flex;
     flex-direction: column;
     height: 100%;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    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;
   `,
   header: css8`
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 24px;
-    border-bottom: 1px solid #e5e7eb;
+    background: ${colors7.surface};
+    border-bottom: 1px solid ${colors7.border};
   `,
   title: css8`
-    font-size: 20px;
+    font-size: 17px;
     font-weight: 600;
-    color: #111827;
+    color: ${colors7.text};
     margin: 0;
+    letter-spacing: -0.02em;
   `,
   headerActions: css8`
     display: flex;
@@ -1818,18 +2061,21 @@ var styles8 = {
     padding: 8px;
     background: none;
     border: none;
-    border-radius: 8px;
+    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: ${colors7.surfaceHover};
     }
   `,
   closeIcon: css8`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
+    width: 18px;
+    height: 18px;
+    color: ${colors7.textSecondary};
   `,
   content: css8`
     flex: 1;
@@ -1840,7 +2086,7 @@ var styles8 = {
     flex: 1;
     min-width: 0;
     overflow: auto;
-    padding: 16px;
+    padding: 20px 24px;
   `
 };
 function StudioUI({ onClose }) {
@@ -1986,4 +2232,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-ZCQOVAGT.mjs.map
+//# sourceMappingURL=StudioUI-WRFD73YR.mjs.map