mbkbucket 3.8.2 → 4.0.0

package/lib/public/mbkbucket-helper-demo.html

@@ -29,33 +29,13 @@
     body {
       font-family: var(--font);
       font-size: 14px;
-      line-height: 1.6;
+      line-height: 1.5;
       color: var(--text);
-      background:
-        radial-gradient(circle at 12% 14%, rgba(16, 185, 129, 0.1), transparent 44%),
-        radial-gradient(circle at 88% 8%,  rgba(15, 118, 110, 0.08), transparent 40%),
-        linear-gradient(160deg, #eef7f2 0%, #f8fbf7 52%, #eaf2ef 100%);
+      background: var(--body-bg, #f8fafc);
       min-height: 100vh;
       overflow-x: hidden;
-    }
-
-    /* Ambient blobs */
-    body::before, body::after {
-      content: '';
-      position: fixed;
-      border-radius: 50%;
-      pointer-events: none;
-      z-index: 0;
-    }
-    body::before {
-      width: 280px; height: 280px;
-      top: 10vh; left: -80px;
-      background: radial-gradient(circle, rgba(15,118,110,0.14) 0, transparent 70%);
-    }
-    body::after {
-      width: 320px; height: 320px;
-      bottom: 8vh; right: -100px;
-      background: radial-gradient(circle, rgba(16,185,129,0.1) 0, transparent 70%);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
 
     /* ── Top nav ───────────────────────────────────────────────── */

package/lib/public/mbkbucket-helper.css

@@ -13,55 +13,49 @@
 /* ─── Standalone design tokens (fallbacks via @property-like approach) ──────── */
 :root {
   /* Colours */
-  --mbkh-primary:       var(--primary-color-ml,      #0f766e);
-  --mbkh-primary-lt:    var(--primary-light-color-ml, #d7f4ee);
-  --mbkh-primary-dk:    var(--primary-dark-color-ml,  #0b4f4a);
-  --mbkh-primary-hover: var(--primary-hover,          #0d635c);
+  --mbkh-primary:       var(--primary-color-ml,       #0f766e);
+  --mbkh-primary-lt:    var(--primary-light-color-ml,  #f0fdfa);
+  --mbkh-primary-dk:    var(--primary-dark-color-ml,   #115e59);
+  --mbkh-primary-hover: var(--primary-hover,           #134e4a);
 
-  --mbkh-danger:        var(--danger-color-ml,   #dc2626);
-  --mbkh-success:       var(--success-color-ml,  #16a34a);
-  --mbkh-warning:       var(--warning-color-ml,  #d97706);
+  --mbkh-danger:        var(--danger-color-ml,   #ef4444);
+  --mbkh-success:       var(--success-color-ml,  #10b981);
+  --mbkh-warning:       var(--warning-color-ml,  #f59e0b);
 
   /* Backgrounds */
-  --mbkh-body-bg:       var(--body-bg,                #f4f7f3);
-  --mbkh-surface:       var(--bg-surface,             rgba(255,255,255,0.85));
-  --mbkh-surface2:      var(--bg-surface-secondary,   rgba(244,247,243,0.85));
-  --mbkh-surface3:      var(--bg-surface-tertiary,    #e2ede8);
+  --mbkh-body-bg:       var(--body-bg,                #f8fafc);
+  --mbkh-surface:       var(--bg-surface,             #ffffff);
+  --mbkh-surface2:      var(--bg-surface-secondary,   #f8fafc);
+  --mbkh-surface3:      var(--bg-surface-tertiary,    #f1f5f9);
 
   /* Borders */
-  --mbkh-border:        var(--border-color,            rgba(15,118,110,0.16));
-  --mbkh-border-lt:     var(--border-color-light,      rgba(15,118,110,0.08));
-  --mbkh-border-active: rgba(15,118,110,0.45);
+  --mbkh-border:        var(--border-color,            #e2e8f0);
+  --mbkh-border-lt:     var(--border-color-light,      #f1f5f9);
+  --mbkh-border-active: rgba(15, 118, 110, 0.35);
 
   /* Text */
-  --mbkh-text:          var(--text,          #1f2a2a);
-  --mbkh-text-sec:      var(--text-secondary, #425855);
-  --mbkh-text-muted:    var(--text-muted,    #667c79);
-  --mbkh-text-dim:      var(--text-disabled, #a0b2af);
+  --mbkh-text:          var(--text,          #0f172a);
+  --mbkh-text-sec:      var(--text-secondary, #475569);
+  --mbkh-text-muted:    var(--text-muted,    #64748b);
+  --mbkh-text-dim:      var(--text-disabled, #94a3b8);
 
   /* Typography */
-  --mbkh-font:          var(--font,          "IBM Plex Sans", "Segoe UI", sans-serif);
-  --mbkh-font-heading:  var(--font-headings, "Sora",          "Segoe UI", sans-serif);
-  --mbkh-font-mono:     var(--font-mono,     "JetBrains Mono", Consolas,  monospace);
+  --mbkh-font:          var(--font,          "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif);
+  --mbkh-font-heading:  var(--font-headings, "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif);
+  --mbkh-font-mono:     var(--font-mono,     "Segoe UI Mono", "Cascadia Code", Consolas, "Courier New", monospace);
 
   /* Shape */
-  --mbkh-radius:        var(--radius-lg, 14px);
+  --mbkh-radius:        var(--radius-lg, 12px);
   --mbkh-radius-md:     var(--radius,     8px);
   --mbkh-radius-sm:     var(--radius-sm,  6px);
 
   /* Shadows */
-  --mbkh-shadow:        var(--shadow-lg,
-                          0 20px 40px rgba(15,118,110,0.12),
-                          0 4px 12px rgba(0,0,0,0.06));
-  --mbkh-shadow-sm:     var(--shadow-md,
-                          0 8px 20px rgba(15,118,110,0.08),
-                          0 2px 6px rgba(0,0,0,0.04));
-  --mbkh-shadow-dropdown: var(--shadow-dropdown,
-                          0 12px 30px rgba(15,42,42,0.14),
-                          0 4px 10px rgba(0,0,0,0.05));
+  --mbkh-shadow:        var(--shadow-dropdown, 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04));
+  --mbkh-shadow-sm:     var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04));
+  --mbkh-shadow-dropdown: var(--shadow-dropdown, 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04));
 
   /* Transition */
-  --mbkh-transition:    0.15s ease-in-out;
+  --mbkh-transition:    0.12s ease;
 }
 
 /* ─── Reset inside helper components ───────────────────────────────────────── */
@@ -82,14 +76,14 @@
   position: fixed;
   inset: 0;
   z-index: 99990;
-  background: rgba(15, 42, 42, 0.45);
+  background: rgba(15, 23, 42, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
-  animation: mbkh-fade-in 0.18s ease;
+  animation: mbkh-fade-in 0.15s ease;
 }
 
 @keyframes mbkh-fade-in { from { opacity: 0; } to { opacity: 1; } }

package/lib/public/mbkbucket-helper.js

@@ -151,9 +151,10 @@
     close:  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
     search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
     grid:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>`,
-    list:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
-    upload: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>`,
-    plus:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`,
+    list:     `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
+    upload:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
+    download: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`,
+    plus:     `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`,
     check:  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
     warn:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
     info:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,

package/lib/src/config/validation.js

@@ -1,73 +1,86 @@
-const TRUE_VALUES = new Set(['true', 't', '1', 'yes', 'y', 'on']);
-const FALSE_VALUES = new Set(['false', 'f', '0', 'no', 'n', 'off']);
-const REQUIRED_BUCKET_FIELDS = ['BUCKET_NAME', 'ACCESS_KEY_ID', 'SECRET_ACCESS_KEY', 'ENDPOINT'];
-
-export function normalizeBooleanLike(value) {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') {
-    const norm = value.trim().toLowerCase();
-    if (TRUE_VALUES.has(norm)) return true;
-    if (FALSE_VALUES.has(norm)) return false;
-  }
-  return value;
-}
-
-export function parseAndValidateMbkbucketVar(rawValue) {
-  let parsed;
-  try {
-    parsed = rawValue ? JSON.parse(rawValue) : {};
-  } catch {
-    throw new Error('Invalid JSON in process.env.mbkbucketVar');
-  }
-
-  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-    throw new Error('mbkbucketVar must be a valid object');
-  }
-
-  const defaults = { p_view_inline: true, publiView_enabled: false };
-  for (const [key, defaultVal] of Object.entries(defaults)) {
-    const val = parsed[key];
-    if (val === undefined || (typeof val === 'string' && val.trim() === '')) {
-      parsed[key] = defaultVal;
-    }
-  }
-
-  parsed.p_view_inline = normalizeBooleanLike(parsed.p_view_inline);
-  parsed.publiView_enabled = normalizeBooleanLike(parsed.publiView_enabled);
-
-  const errors = [];
-  if (typeof parsed.p_view_inline !== 'boolean') errors.push('mbkbucketVar.p_view_inline must be a boolean if provided');
-  if (typeof parsed.publiView_enabled !== 'boolean') errors.push('mbkbucketVar.publiView_enabled must be a boolean if provided');
-  if (errors.length) throw new Error(errors.join(' | '));
-
-  return parsed;
-}
-
-export function parseAndValidateBucketConnection(rawValue) {
-  if (!rawValue) return null;
-
-  let parsed;
-  try {
-    parsed = JSON.parse(rawValue);
-  } catch {
-    throw new Error('BucketConnection is not valid JSON');
-  }
-
-  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed) || !Object.keys(parsed).length) {
-    throw new Error('BucketConnection must be a non-empty object');
-  }
-
-  for (const [bucketName, config] of Object.entries(parsed)) {
-    if (!config || typeof config !== 'object' || Array.isArray(config)) {
-      throw new Error(`Bucket '${bucketName}' configuration must be an object, not a string. Remove quotes around the inner JSON object.`);
-    }
-
-    const missingFields = REQUIRED_BUCKET_FIELDS.filter(field => !config[field]);
-    if (missingFields.length) {
-      throw new Error(`Bucket '${bucketName}' is missing required fields: ${missingFields.join(', ')}`);
-    }
-  }
-
-  return parsed;
-}
-
+const TRUE_VALUES = new Set(['true', 't', '1', 'yes', 'y', 'on']);
+const FALSE_VALUES = new Set(['false', 'f', '0', 'no', 'n', 'off']);
+const REQUIRED_S3_FIELDS = ['BUCKET_NAME', 'ACCESS_KEY_ID', 'SECRET_ACCESS_KEY', 'ENDPOINT'];
+
+export function normalizeBooleanLike(value) {
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'string') {
+    const norm = value.trim().toLowerCase();
+    if (TRUE_VALUES.has(norm)) return true;
+    if (FALSE_VALUES.has(norm)) return false;
+  }
+  return value;
+}
+
+export function parseAndValidateMbkbucketVar(rawValue) {
+  let parsed;
+  try {
+    parsed = rawValue ? JSON.parse(rawValue) : {};
+  } catch {
+    throw new Error('Invalid JSON in process.env.mbkbucketVar');
+  }
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error('mbkbucketVar must be a valid object');
+  }
+
+  const defaults = { p_view_inline: true, publiView_enabled: false };
+  for (const [key, defaultVal] of Object.entries(defaults)) {
+    const val = parsed[key];
+    if (val === undefined || (typeof val === 'string' && val.trim() === '')) {
+      parsed[key] = defaultVal;
+    }
+  }
+
+  parsed.p_view_inline = normalizeBooleanLike(parsed.p_view_inline);
+  parsed.publiView_enabled = normalizeBooleanLike(parsed.publiView_enabled);
+
+  const errors = [];
+  if (typeof parsed.p_view_inline !== 'boolean') errors.push('mbkbucketVar.p_view_inline must be a boolean if provided');
+  if (typeof parsed.publiView_enabled !== 'boolean') errors.push('mbkbucketVar.publiView_enabled must be a boolean if provided');
+  if (errors.length) throw new Error(errors.join(' | '));
+
+  return parsed;
+}
+
+export function parseAndValidateBucketConnection(rawValue) {
+  if (!rawValue) return null;
+
+  let parsed;
+  try {
+    parsed = JSON.parse(rawValue);
+  } catch {
+    throw new Error('BucketConnection is not valid JSON');
+  }
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed) || !Object.keys(parsed).length) {
+    throw new Error('BucketConnection must be a non-empty object');
+  }
+
+  for (const [bucketName, config] of Object.entries(parsed)) {
+    if (!config || typeof config !== 'object' || Array.isArray(config)) {
+      throw new Error(`Bucket '${bucketName}' configuration must be an object, not a string. Remove quotes around the inner JSON object.`);
+    }
+
+    const providerType = String(config.type || config.provider || '').toLowerCase();
+
+    if (providerType === 'gdrive' || providerType === 'google-drive' || providerType === 'googledrive') {
+      const hasOAuth = Boolean(config.client_id && config.client_secret && (config.refresh_token || config.access_token || config.code));
+      const hasServiceAccount = Boolean((config.client_email || config.service_account_email) && (config.private_key || config.service_account_key));
+      const hasAccessTokenOnly = Boolean(config.access_token);
+      const hasServiceAccountKeyObj = Boolean(config.service_account && typeof config.service_account === 'object');
+
+      if (!hasOAuth && !hasServiceAccount && !hasAccessTokenOnly && !hasServiceAccountKeyObj) {
+        throw new Error(`Google Drive connection '${bucketName}' requires OAuth credentials (client_id, client_secret, refresh_token) or Service Account credentials (client_email, private_key).`);
+      }
+    } else {
+      // Default is S3-compatible provider
+      const missingFields = REQUIRED_S3_FIELDS.filter(field => !config[field]);
+      if (missingFields.length) {
+        throw new Error(`Bucket '${bucketName}' is missing required fields: ${missingFields.join(', ')}`);
+      }
+    }
+  }
+
+  return parsed;
+}