@gallop.software/studio 0.1.20 → 0.1.22

package/dist/{StudioUI-T4M7A6BP.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";
@@ -61,92 +67,100 @@ 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;
     z-index: 10000;
     animation: ${fadeIn} 0.15s ease-out;
+    font-family: ${fontStack};
   `,
   modal: css`
-    background-color: white;
+    ${baseReset}
+    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: ${fontSize.lg};
     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;
+    font-size: ${fontSize.base};
+    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;
-    font-size: 14px;
+    padding: 10px 18px;
+    font-size: ${fontSize.base};
     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: ${colors.borderHover};
     }
   `,
   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};
     }
   `
 };
@@ -199,8 +213,8 @@ var styles2 = {
     align-items: center;
     justify-content: space-between;
     padding: 12px 24px;
-    background-color: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
+    background-color: ${colors.surface};
+    border-bottom: 1px solid ${colors.border};
   `,
   left: css2`
     display: flex;
@@ -210,86 +224,112 @@ var styles2 = {
   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: 8px 14px;
+    border-radius: 6px;
+    font-size: ${fontSize.base};
     font-weight: 500;
-    background: none;
-    border: none;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
     cursor: pointer;
-    transition: background-color 0.15s;
+    transition: all 0.15s ease;
+    color: ${colors.text};
+    letter-spacing: -0.01em;
+    
+    &:hover:not(:disabled) {
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+    }
     
     &:disabled {
       cursor: not-allowed;
       opacity: 0.5;
     }
   `,
-  btnDefault: css2`
-    color: #374151;
+  btnPrimary: css2`
+    background: ${colors.primary};
+    border-color: ${colors.primary};
+    color: white;
     
     &:hover:not(:disabled) {
-      background-color: white;
+      background: ${colors.primaryHover};
+      border-color: ${colors.primaryHover};
     }
   `,
   btnDanger: css2`
-    color: #dc2626;
+    color: ${colors.danger};
     
     &:hover:not(:disabled) {
-      background-color: #fef2f2;
+      background-color: ${colors.dangerLight};
+      border-color: ${colors.danger};
     }
   `,
   icon: css2`
-    width: 16px;
-    height: 16px;
+    width: 15px;
+    height: 15px;
   `,
   iconSpin: css2`
     animation: ${spin} 1s linear infinite;
   `,
   selectionCount: css2`
-    font-size: 14px;
-    color: #4b5563;
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
+    display: flex;
+    align-items: center;
+    gap: 8px;
   `,
   clearBtn: css2`
-    margin-left: 8px;
-    color: #9333ea;
+    color: ${colors.primary};
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 14px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    padding: 0;
     
     &:hover {
       text-decoration: underline;
     }
   `,
+  divider: css2`
+    width: 1px;
+    height: 24px;
+    background: ${colors.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: ${colors.surfaceHover};
+    border: 1px solid ${colors.border};
+    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: ${colors.textSecondary};
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
     &:hover {
-      background-color: #f9fafb;
+      color: ${colors.text};
     }
   `,
   viewBtnActive: css2`
-    background-color: #f3e8ff;
-    color: #7c3aed;
+    background-color: ${colors.surface};
+    color: ${colors.text};
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   `
 };
 function StudioToolbar() {
@@ -418,50 +458,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,
             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.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,
             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, onClick: handleScan, children: [
+          /* @__PURE__ */ jsx2(ScanIcon, {}),
+          "Scan"
+        ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { css: styles2.right, children: [
         hasSelection && /* @__PURE__ */ jsxs2("span", { css: styles2.selectionCount, children: [
@@ -470,12 +525,11 @@ function StudioToolbar() {
           /* @__PURE__ */ jsx2("button", { css: styles2.clearBtn, onClick: clearSelection, children: "Clear" })
         ] }),
         /* @__PURE__ */ jsx2(
-          ToolbarButton,
+          "button",
           {
+            css: styles2.btn,
             onClick: handleRefresh,
-            icon: "reload",
-            label: "Refresh",
-            spinning: refreshing
+            children: /* @__PURE__ */ jsx2(RefreshIcon, { spinning: refreshing })
           }
         ),
         /* @__PURE__ */ jsxs2("div", { css: styles2.viewToggle, children: [
@@ -502,44 +556,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" }) });
@@ -556,62 +586,69 @@ var styles3 = {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 24px;
-    background-color: white;
-    border-bottom: 1px solid #f3f4f6;
+    padding: 10px 24px;
+    background-color: ${colors.surface};
+    border-bottom: 1px solid ${colors.borderLight};
   `,
   backBtn: css3`
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 4px;
+    padding: 6px;
+    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};
     }
   `,
   backIcon: css3`
     width: 16px;
     height: 16px;
-    color: #6b7280;
+    color: ${colors.textSecondary};
   `,
   nav: css3`
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: 14px;
+    gap: 2px;
+    font-size: ${fontSize.base};
   `,
   item: css3`
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
   `,
   separator: css3`
-    color: #d1d5db;
+    color: ${colors.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: ${fontSize.base};
+    letter-spacing: -0.01em;
     
     &:hover {
-      background-color: #f3f4f6;
+      background-color: ${colors.surfaceHover};
     }
   `,
   btnActive: css3`
-    color: #111827;
-    font-weight: 500;
+    color: ${colors.text};
+    font-weight: 600;
   `,
   btnInactive: css3`
-    color: #6b7280;
+    color: ${colors.textSecondary};
     
     &:hover {
-      color: #374151;
+      color: ${colors.text};
     }
   `
 };
@@ -656,9 +693,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 ${colors.border};
+    border-top-color: ${colors.primary};
+    animation: ${spin2} 0.8s linear infinite;
   `,
   empty: css4`
     display: flex;
@@ -666,21 +703,27 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: #6b7280;
+    color: ${colors.textSecondary};
   `,
   emptyIcon: css4`
     width: 48px;
     height: 48px;
     margin-bottom: 16px;
+    opacity: 0.5;
   `,
   emptyText: css4`
-    font-size: 14px;
-    margin: 0;
+    font-size: ${fontSize.base};
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      color: ${colors.textMuted};
+      font-size: ${fontSize.sm};
+    }
   `,
   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 +733,25 @@ var styles4 = {
   item: css4`
     position: relative;
     border-radius: 8px;
-    border: 2px solid transparent;
+    border: 1px solid ${colors.border};
     overflow: hidden;
     cursor: pointer;
-    transition: all 0.15s;
-    background-color: #f9fafb;
+    transition: all 0.15s ease;
+    background-color: ${colors.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: ${colors.primary};
+    box-shadow: 0 0 0 1px ${colors.primary};
     
     &:hover {
-      border-color: #a855f7;
+      border-color: ${colors.primary};
     }
   `,
   checkboxWrapper: css4`
@@ -720,7 +765,7 @@ var styles4 = {
   checkbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: #9333ea;
+    accent-color: ${colors.primary};
     cursor: pointer;
   `,
   cdnBadge: css4`
@@ -728,11 +773,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: ${colors.successLight};
+    color: ${colors.success};
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 4px;
   `,
   content: css4`
     aspect-ratio: 1;
@@ -740,16 +786,17 @@ var styles4 = {
     align-items: center;
     justify-content: center;
     padding: 16px;
+    background: ${colors.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: ${colors.textMuted};
   `,
   image: css4`
     max-width: 100%;
@@ -758,70 +805,78 @@ var styles4 = {
     border-radius: 4px;
   `,
   label: css4`
-    padding: 6px 8px;
-    background-color: white;
-    border-top: 1px solid #e5e7eb;
+    padding: 10px 12px;
+    background-color: ${colors.surface};
+    border-top: 1px solid ${colors.borderLight};
   `,
   labelRow: css4`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 4px;
+    gap: 8px;
   `,
   labelText: css4`
     flex: 1;
     min-width: 0;
   `,
   name: css4`
-    font-size: 12px;
-    color: #374151;
+    font-size: ${fontSize.sm};
+    font-weight: 500;
+    color: ${colors.text};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 0;
+    letter-spacing: -0.01em;
   `,
   size: css4`
-    font-size: 12px;
-    color: #9ca3af;
-    margin: 0;
+    font-size: ${fontSize.xs};
+    color: ${colors.textMuted};
+    margin: 2px 0 0 0;
   `,
   openBtn: css4`
     flex-shrink: 0;
-    font-size: 11px;
-    color: #9333ea;
-    background: none;
-    border: none;
-    padding: 2px 6px;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.primary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 4px 10px;
     cursor: pointer;
     border-radius: 4px;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #f3e8ff;
+      background-color: ${colors.primaryLight};
+      border-color: ${colors.primary};
     }
   `,
   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: ${colors.surface};
+    border-radius: 8px;
+    border: 1px solid ${colors.border};
   `,
   selectAllLabel: css4`
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: #6b7280;
+    gap: 10px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.textSecondary};
     cursor: pointer;
     
     &:hover {
-      color: #374151;
+      color: ${colors.text};
     }
   `,
   selectAllCheckbox: css4`
     width: 16px;
     height: 16px;
-    accent-color: #9333ea;
+    accent-color: ${colors.primary};
   `
 };
 function StudioFileGrid() {
@@ -993,9 +1048,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 ${colors.border};
+    border-top-color: ${colors.primary};
+    animation: ${spin3} 0.8s linear infinite;
   `,
   empty: css5`
     display: flex;
@@ -1003,7 +1058,13 @@ var styles5 = {
     align-items: center;
     justify-content: center;
     height: 256px;
-    color: #6b7280;
+    color: ${colors.textSecondary};
+  `,
+  tableWrapper: css5`
+    background: ${colors.surface};
+    border-radius: 8px;
+    border: 1px solid ${colors.border};
+    overflow: hidden;
   `,
   table: css5`
     width: 100%;
@@ -1011,15 +1072,17 @@ var styles5 = {
   `,
   th: css5`
     text-align: left;
-    font-size: 12px;
-    color: #6b7280;
+    font-size: 11px;
+    color: ${colors.textMuted};
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    padding-bottom: 8px;
-    font-weight: normal;
+    padding: 12px 16px;
+    font-weight: 600;
+    background: ${colors.background};
+    border-bottom: 1px solid ${colors.border};
   `,
   thCheckbox: css5`
-    width: 32px;
+    width: 48px;
   `,
   thSize: css5`
     width: 96px;
@@ -1030,95 +1093,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: ${colors.surfaceHover};
+    }
+    
+    &:not(:last-child) td {
+      border-bottom: 1px solid ${colors.borderLight};
     }
   `,
   rowSelected: css5`
-    background-color: #faf5ff;
+    background-color: ${colors.primaryLight};
     
     &:hover {
-      background-color: #faf5ff;
+      background-color: ${colors.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: ${colors.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: ${colors.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 ${colors.borderLight};
   `,
   name: css5`
-    font-size: 14px;
-    color: #111827;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.text};
+    letter-spacing: -0.01em;
   `,
   meta: css5`
-    font-size: 14px;
-    color: #6b7280;
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
   `,
   cdnBadge: css5`
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 12px;
-    color: #15803d;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.success};
   `,
   cdnIcon: css5`
     width: 12px;
     height: 12px;
   `,
   cdnEmpty: css5`
-    font-size: 12px;
-    color: #9ca3af;
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
   `,
   openBtn: css5`
-    font-size: 12px;
-    color: #9333ea;
-    background: none;
-    border: none;
-    padding: 2px 8px;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.primary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 4px 12px;
     cursor: pointer;
     border-radius: 4px;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: #f3e8ff;
+      background-color: ${colors.primaryLight};
+      border-color: ${colors.primary};
     }
   `
 };
@@ -1277,67 +1350,74 @@ function isVideoFile(filename) {
 var styles6 = {
   panel: css6`
     width: 320px;
-    border-left: 1px solid #e5e7eb;
-    background-color: #f9fafb;
-    padding: 16px;
+    border-left: 1px solid ${colors.border};
+    background-color: ${colors.surface};
+    padding: 20px;
     overflow: auto;
   `,
   title: css6`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
+    font-size: ${fontSize.sm};
+    font-weight: 600;
+    color: ${colors.textSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     margin: 0 0 16px 0;
   `,
   imageContainer: css6`
-    background-color: white;
+    background-color: ${colors.background};
     border-radius: 8px;
-    border: 1px solid #e5e7eb;
-    padding: 8px;
-    margin-bottom: 16px;
+    border: 1px solid ${colors.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: ${fontSize.sm};
   `,
   label: css6`
-    color: #6b7280;
+    color: ${colors.textSecondary};
   `,
   value: css6`
-    color: #111827;
+    color: ${colors.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 ${colors.borderLight};
   `,
   sectionTitle: css6`
-    font-size: 12px;
-    font-weight: 500;
-    color: #6b7280;
-    margin: 0 0 8px 0;
+    font-size: ${fontSize.xs};
+    font-weight: 600;
+    color: ${colors.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: ${fontSize.sm};
+    color: ${colors.success};
+    font-weight: 500;
   `,
   cdnIcon: css6`
     width: 16px;
@@ -1345,8 +1425,9 @@ var styles6 = {
   `,
   copyBtn: css6`
     margin-top: 8px;
-    font-size: 12px;
-    color: #9333ea;
+    font-size: ${fontSize.sm};
+    font-weight: 500;
+    color: ${colors.primary};
     background: none;
     border: none;
     cursor: pointer;
@@ -1359,17 +1440,20 @@ var styles6 = {
   colorSwatch: css6`
     margin-top: 8px;
     height: 32px;
-    border-radius: 4px;
+    border-radius: 6px;
+    border: 1px solid ${colors.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: ${fontSize.sm};
+    color: ${colors.textMuted};
     margin: 0;
   `,
   filePlaceholder: css6`
@@ -1377,50 +1461,55 @@ var styles6 = {
     align-items: center;
     justify-content: center;
     height: 120px;
+    background: ${colors.background};
+    border-radius: 6px;
   `,
   fileIcon: css6`
-    width: 64px;
-    height: 64px;
-    color: #9ca3af;
+    width: 56px;
+    height: 56px;
+    color: ${colors.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 ${colors.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: ${fontSize.base};
+    font-weight: 500;
+    background-color: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
     cursor: pointer;
-    transition: background-color 0.15s;
-    color: #374151;
+    transition: all 0.15s ease;
+    color: ${colors.text};
     
     &:hover {
-      background-color: #f9fafb;
+      background-color: ${colors.surfaceHover};
+      border-color: #d0d5dd;
     }
   `,
   actionBtnDanger: css6`
-    color: #dc2626;
+    color: ${colors.danger};
     
     &:hover {
-      background-color: #fef2f2;
+      background-color: ${colors.dangerLight};
+      border-color: ${colors.danger};
     }
   `
 };
@@ -1620,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;
@@ -1645,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;
@@ -1670,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`
@@ -1691,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;
@@ -1718,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`
@@ -1734,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};
     }
   `
 };
@@ -1796,77 +1909,77 @@ 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 styles8 = {
   container: css8`
+    ${baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: ${colors.background};
   `,
   header: css8`
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 24px;
-    border-bottom: 1px solid #e5e7eb;
+    background: ${colors.surface};
+    border-bottom: 1px solid ${colors.border};
   `,
   title: css8`
-    font-size: 20px;
+    font-size: ${fontSize.xl};
     font-weight: 600;
-    color: #111827;
+    color: ${colors.text};
     margin: 0;
+    letter-spacing: -0.02em;
   `,
   headerActions: css8`
     display: flex;
@@ -1875,20 +1988,24 @@ var styles8 = {
   `,
   closeBtn: css8`
     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};
     }
   `,
   closeIcon: css8`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
+    width: 18px;
+    height: 18px;
+    color: ${colors.textSecondary};
   `,
   content: css8`
     flex: 1;
@@ -1899,7 +2016,7 @@ var styles8 = {
     flex: 1;
     min-width: 0;
     overflow: auto;
-    padding: 16px;
+    padding: 20px 24px;
   `
 };
 function StudioUI({ onClose }) {
@@ -2045,4 +2162,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-T4M7A6BP.mjs.map
+//# sourceMappingURL=StudioUI-3VFEM3VE.mjs.map