@malto/sdk 0.1.1 → 0.1.3

package/dist/index.js

@@ -176,10 +176,12 @@ function upsert(id, css) {
 function buildCss(opts) {
   const primary = opts.primary;
   const tones = derivePalette(primary);
-  const radiusScale = opts.radius === "sm" ? "10px" : opts.radius === "lg" ? "22px" : "16px";
-  const appearance = opts.appearance ?? "auto";
+  const radiusScale = opts.radius === "sm" ? "12px" : opts.radius === "lg" ? "24px" : "20px";
+  const appearance = opts.appearance ?? "light";
   const overrides = opts.cssVars ?? {};
   return `
+    @import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
+
     :where(.malto-root, .malto-root *) {
       box-sizing: border-box;
     }
@@ -192,21 +194,21 @@ function buildCss(opts) {
       --malto-primary-600: ${tones.shade600};
       --malto-primary-rgb: ${tones.rgb};
       --malto-surface: ${overrides.surface ?? "#ffffff"};
-      --malto-surface-muted: ${overrides.surfaceMuted ?? "#fbfaff"};
-      --malto-surface-elevated: rgba(255,255,255,0.85);
-      --malto-border: ${overrides.border ?? "rgba(15, 13, 35, 0.06)"};
-      --malto-border-strong: rgba(15, 13, 35, 0.1);
-      --malto-text: ${overrides.text ?? "#0f0d23"};
+      --malto-surface-muted: ${overrides.surfaceMuted ?? "#f2eeff"};
+      --malto-surface-elevated: rgba(255,255,255,0.92);
+      --malto-border: ${overrides.border ?? "#e2e8f0"};
+      --malto-border-strong: #cbd1de;
+      --malto-text: ${overrides.text ?? "#0a0a0a"};
       --malto-text-muted: ${overrides.textMuted ?? "#5b5871"};
-      --malto-text-subtle: rgba(15, 13, 35, 0.45);
+      --malto-text-subtle: rgba(10, 10, 10, 0.5);
       --malto-radius: ${overrides.radius ?? radiusScale};
-      --malto-radius-sm: 10px;
+      --malto-radius-sm: 12px;
       --malto-radius-pill: 999px;
-      --malto-shadow-sm: ${overrides.shadow ?? "0 4px 12px -4px rgba(15, 13, 35, 0.08)"};
-      --malto-shadow-md: 0 12px 32px -8px rgba(15, 13, 35, 0.16);
-      --malto-shadow-lg: 0 30px 60px -20px rgba(15, 13, 35, 0.28);
-      --malto-shadow-glow: 0 12px 24px -8px rgba(var(--malto-primary-rgb), 0.45);
-      --malto-font: ${overrides.font ?? "-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif"};
+      --malto-shadow-sm: ${overrides.shadow ?? "0 4px 12px -6px rgba(25, 24, 56, 0.12)"};
+      --malto-shadow-md: 0 10px 30px -10px rgba(25, 24, 56, 0.15);
+      --malto-shadow-lg: 0 30px 60px -20px rgba(25, 24, 56, 0.25);
+      --malto-shadow-glow: 0 8px 20px -6px rgba(var(--malto-primary-rgb), 0.45);
+      --malto-font: ${overrides.font ?? "'Google Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"};
       --malto-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
       --malto-ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
     }
@@ -267,12 +269,12 @@ function buildCss(opts) {
 
     .malto-trigger {
       display: inline-flex; align-items: center; gap: 8px;
-      padding: 9px 18px;
+      padding: 10px 20px;
       border-radius: var(--malto-radius-pill);
       background: var(--malto-primary);
       color: var(--malto-primary-contrast);
       border: none; cursor: pointer;
-      font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
+      font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
       box-shadow: var(--malto-shadow-glow);
       transition: transform .25s var(--malto-ease-spring), box-shadow .2s ease;
     }
@@ -298,7 +300,8 @@ function buildCss(opts) {
     .malto-modal {
       background: var(--malto-surface);
       width: 100%;
-      max-width: 460px;
+      max-width: 1152px;
+      height: 720px;
       max-height: 92vh;
       border-radius: var(--malto-radius) var(--malto-radius) 0 0;
       box-shadow: var(--malto-shadow-lg);
@@ -326,23 +329,23 @@ function buildCss(opts) {
     /* \u2500\u2500\u2500\u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500 */
     .malto-header {
       display: flex; align-items: center; justify-content: space-between;
-      padding: 18px 22px 14px;
+      padding: 22px 24px 16px;
       position: relative;
       flex: none;
     }
     .malto-header h3 {
       margin: 0;
-      font-size: 16px; font-weight: 600;
+      font-size: 17px; font-weight: 600;
       color: var(--malto-text);
-      letter-spacing: -0.015em;
+      letter-spacing: -0.02em;
     }
     .malto-header-meta {
       display: flex; align-items: center; gap: 10px;
     }
     .malto-board-logo {
       width: 28px; height: 28px;
-      border-radius: 8px;
-      background: var(--malto-primary-100);
+      border-radius: 10px;
+      background: var(--malto-surface-muted);
       display: flex; align-items: center; justify-content: center;
       color: var(--malto-primary);
       font-size: 12px; font-weight: 700;
@@ -360,7 +363,7 @@ function buildCss(opts) {
       transition: background .15s ease, color .15s ease;
     }
     .malto-close:hover {
-      background: var(--malto-primary-50);
+      background: var(--malto-surface-muted);
       color: var(--malto-text);
     }
 
@@ -368,8 +371,8 @@ function buildCss(opts) {
     .malto-tabs {
       display: flex;
       padding: 4px;
-      margin: 0 18px 14px;
-      background: var(--malto-primary-50);
+      margin: 0 24px 16px;
+      background: var(--malto-surface-muted);
       border-radius: var(--malto-radius-sm);
       flex: none;
     }
@@ -395,7 +398,7 @@ function buildCss(opts) {
     .malto-body {
       flex: 1;
       overflow-y: auto;
-      padding: 4px 18px 18px;
+      padding: 4px 24px 22px;
       background: var(--malto-surface);
       scroll-behavior: smooth;
     }
@@ -410,7 +413,7 @@ function buildCss(opts) {
     /* \u2500\u2500\u2500\u2500\u2500\u2500 Feedback row \u2500\u2500\u2500\u2500\u2500\u2500 */
     .malto-item {
       display: flex; gap: 12px;
-      padding: 12px;
+      padding: 14px;
       border-radius: 12px;
       background: var(--malto-surface);
       border: 1px solid var(--malto-border);
@@ -421,15 +424,15 @@ function buildCss(opts) {
     .malto-item:hover {
       border-color: var(--malto-border-strong);
       transform: translateY(-1px);
-      box-shadow: var(--malto-shadow-sm);
+      box-shadow: 0 6px 16px -8px rgba(25, 24, 56, 0.12);
     }
     .malto-vote {
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       min-width: 44px; padding: 6px 4px;
-      border-radius: 10px;
+      border-radius: 12px;
       border: 1px solid var(--malto-border);
-      background: var(--malto-surface-muted);
+      background: var(--malto-surface);
       cursor: pointer;
       font-size: 11px; color: var(--malto-text-muted);
       transition: all .2s var(--malto-ease-spring);
@@ -516,10 +519,10 @@ function buildCss(opts) {
     }
     .malto-input, .malto-textarea {
       width: 100%;
-      padding: 11px 14px;
-      border: 1px solid var(--malto-border-strong);
+      padding: 12px 14px;
+      border: 1px solid var(--malto-border);
       border-radius: 12px;
-      font-size: 13.5px;
+      font-size: 14px;
       color: var(--malto-text);
       background: var(--malto-surface);
       outline: none;
@@ -531,7 +534,7 @@ function buildCss(opts) {
     }
     .malto-input:focus, .malto-textarea:focus {
       border-color: var(--malto-primary);
-      box-shadow: 0 0 0 4px rgba(var(--malto-primary-rgb), 0.1);
+      box-shadow: 0 0 0 4px rgba(var(--malto-primary-rgb), 0.12);
     }
     .malto-textarea {
       min-height: 110px;
@@ -539,13 +542,13 @@ function buildCss(opts) {
       line-height: 1.5;
     }
     .malto-button {
-      padding: 11px 18px;
+      padding: 12px 20px;
       border-radius: 12px;
       background: var(--malto-primary);
       color: var(--malto-primary-contrast);
       border: none; cursor: pointer;
-      font-size: 13px; font-weight: 600;
-      letter-spacing: -0.005em;
+      font-size: 14px; font-weight: 600;
+      letter-spacing: -0.01em;
       box-shadow: var(--malto-shadow-glow);
       transition: transform .2s var(--malto-ease-spring), box-shadow .2s ease, opacity .2s ease;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
@@ -554,13 +557,13 @@ function buildCss(opts) {
     .malto-button:active { transform: scale(0.97); }
     .malto-button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
     .malto-secondary {
-      padding: 9px 14px;
-      border-radius: 10px;
+      padding: 10px 16px;
+      border-radius: 12px;
       background: transparent;
       color: var(--malto-text);
-      border: 1px solid var(--malto-border-strong);
+      border: 1px solid var(--malto-border);
       cursor: pointer;
-      font-size: 13px; font-weight: 500;
+      font-size: 13.5px; font-weight: 500;
       transition: all .2s ease;
     }
     .malto-secondary:hover {
@@ -653,7 +656,7 @@ function buildCss(opts) {
 
     /* \u2500\u2500\u2500\u2500\u2500\u2500 Releases / changelog \u2500\u2500\u2500\u2500\u2500\u2500 */
     .malto-release {
-      padding: 14px;
+      padding: 16px;
       border: 1px solid var(--malto-border);
       border-radius: 12px;
       margin-bottom: 8px;
@@ -723,10 +726,10 @@ function buildCss(opts) {
     /* \u2500\u2500\u2500\u2500\u2500\u2500 Footer banner (sign-in CTA) \u2500\u2500\u2500\u2500\u2500\u2500 */
     .malto-footer-banner {
       flex: none;
-      padding: 12px 18px;
+      padding: 14px 24px;
       background: var(--malto-surface-muted);
       border-top: 1px solid var(--malto-border);
-      font-size: 12px;
+      font-size: 12.5px;
       color: var(--malto-text-muted);
       display: flex; align-items: center; justify-content: space-between;
       gap: 10px;
@@ -746,7 +749,207 @@ function buildCss(opts) {
     }
     .malto-back:hover {
       color: var(--malto-text);
-      background: var(--malto-primary-50);
+      background: var(--malto-surface-muted);
+    }
+
+    /* \u2500\u2500\u2500\u2500\u2500\u2500 Kanban (roadmap) \u2500\u2500\u2500\u2500\u2500\u2500 */
+    .malto-kanban {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 16px;
+      align-items: start;
+    }
+    @media (max-width: 960px) {
+      .malto-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    @media (max-width: 560px) {
+      .malto-kanban { grid-template-columns: 1fr; }
+    }
+    .malto-kanban-col {
+      display: flex; flex-direction: column;
+      gap: 12px;
+      min-width: 0;
+    }
+    .malto-kanban-head {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0 4px;
+    }
+    .malto-kanban-title {
+      margin: 0;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--malto-text-muted);
+    }
+    .malto-kanban-count {
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--malto-text-subtle);
+      letter-spacing: 0.04em;
+    }
+    .malto-kanban-list {
+      display: flex; flex-direction: column;
+      gap: 12px;
+    }
+    .malto-kanban-empty {
+      padding: 14px 12px;
+      font-size: 12px;
+      color: var(--malto-text-subtle);
+      border: 1px dashed var(--malto-border);
+      border-radius: 12px;
+      text-align: center;
+      background: var(--malto-surface-muted);
+    }
+
+    /* Card \u2014 mirrors malto-web FeedbackCard */
+    .malto-card {
+      display: block;
+      text-decoration: none;
+      color: inherit;
+      position: relative;
+      padding: 16px;
+      background: var(--malto-surface);
+      border: 1px solid rgba(200, 196, 216, 0.18);
+      border-radius: 12px;
+      box-shadow: 0 0 40px rgba(var(--malto-primary-rgb), 0.06),
+                  0 0 80px rgba(var(--malto-primary-rgb), 0.02);
+      transition: transform .2s var(--malto-ease-spring),
+                  box-shadow .2s ease, border-color .2s ease;
+      cursor: pointer;
+    }
+    .malto-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 50px rgba(var(--malto-primary-rgb), 0.14),
+                  0 0 90px rgba(var(--malto-primary-rgb), 0.04);
+      border-color: rgba(var(--malto-primary-rgb), 0.2);
+    }
+    .malto-card-top {
+      display: flex; align-items: flex-start; justify-content: space-between;
+      gap: 8px;
+    }
+    .malto-card-cat {
+      display: inline-flex; align-items: center;
+      padding: 3px 9px;
+      border-radius: 999px;
+      background: rgba(var(--malto-primary-rgb), 0.1);
+      color: var(--malto-primary-600);
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      line-height: 1.4;
+    }
+    .malto-card-votes {
+      display: inline-flex; flex-direction: column;
+      align-items: center;
+      padding: 4px 8px;
+      border: 1px solid var(--malto-border);
+      border-radius: 8px;
+      background: var(--malto-surface);
+      color: var(--malto-text);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+      transition: border-color .2s ease, background .2s ease;
+    }
+    .malto-card:hover .malto-card-votes {
+      border-color: rgba(var(--malto-primary-rgb), 0.3);
+      background: rgba(var(--malto-primary-rgb), 0.05);
+    }
+    .malto-card-votes svg {
+      color: var(--malto-text-muted);
+      margin-bottom: 2px;
+    }
+    .malto-card-title {
+      margin: 12px 0 0;
+      font-size: 14.5px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      line-height: 1.35;
+      color: var(--malto-text);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .malto-card-desc {
+      margin: 6px 0 0;
+      font-size: 12.5px;
+      line-height: 1.45;
+      color: var(--malto-text-muted);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .malto-card-foot {
+      display: flex; align-items: center; justify-content: space-between;
+      gap: 8px;
+      margin-top: 14px;
+      padding-top: 12px;
+      border-top: 1px solid rgba(var(--malto-primary-rgb), 0.08);
+      font-size: 11px;
+      color: var(--malto-text-subtle);
+    }
+    .malto-card-who {
+      display: flex; align-items: center; gap: 6px;
+      min-width: 0;
+      flex: 1;
+    }
+    .malto-card-avatar {
+      flex: none;
+      width: 20px; height: 20px;
+      border-radius: 999px;
+      display: flex; align-items: center; justify-content: center;
+      color: #ffffff;
+      font-size: 9px;
+      font-weight: 700;
+      overflow: hidden;
+    }
+    .malto-card-avatar img {
+      width: 100%; height: 100%;
+      object-fit: cover;
+    }
+    .malto-avatar-bg-0 { background: #5f4ff8; }
+    .malto-avatar-bg-1 { background: #ec4899; }
+    .malto-avatar-bg-2 { background: #0ea5e9; }
+    .malto-avatar-bg-3 { background: #10b981; }
+    .malto-avatar-bg-4 { background: #f59e0b; }
+    .malto-avatar-bg-5 { background: #7e2eaa; }
+    .malto-avatar-bg-6 { background: #ef4444; }
+    .malto-avatar-bg-7 { background: #06b6d4; }
+    .malto-card-author {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--malto-text-muted);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .malto-card-dot {
+      color: var(--malto-border-strong);
+      flex: none;
+    }
+    .malto-card-time {
+      color: var(--malto-text-muted);
+      flex: none;
+    }
+    .malto-card-comments {
+      display: inline-flex; align-items: center; gap: 4px;
+      color: var(--malto-text-muted);
+      font-weight: 500;
+      flex: none;
+    }
+    .malto-card-skeleton {
+      cursor: default;
+      box-shadow: none;
+    }
+    .malto-card-skeleton:hover {
+      transform: none;
+      box-shadow: none;
+      border-color: rgba(200, 196, 216, 0.18);
     }
 
     /* \u2500\u2500\u2500\u2500\u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -838,6 +1041,11 @@ var MaltoWidget = class {
     this.container = null;
     this.trigger = null;
     this.board = null;
+    this.shellEl = null;
+    this.bodyEl = null;
+    this.tabRefs = {};
+    this.bannerEl = null;
+    this.initialLoaded = false;
     if (!config.apiKey) throw new Error("Malto: apiKey is required");
     this.apiKeyPrefix = config.apiKey.slice(0, 16);
     this.config = {
@@ -850,7 +1058,7 @@ var MaltoWidget = class {
       cssVars: config.cssVars,
       customCss: config.customCss,
       radius: config.radius ?? "md",
-      appearance: config.appearance ?? "auto",
+      appearance: config.appearance ?? "light",
       zIndex: config.zIndex ?? 2147483600,
       views: config.views,
       identify: config.identify,
@@ -861,10 +1069,9 @@ var MaltoWidget = class {
     const session = readSession(this.apiKeyPrefix);
     this.state = {
       open: false,
-      view: "list",
-      loading: false,
+      view: "roadmap",
+      loading: true,
       error: null,
-      feedbacks: [],
       roadmap: {},
       releases: [],
       selectedFeedback: null,
@@ -897,17 +1104,28 @@ var MaltoWidget = class {
         await this.runIdentify(this.config.identify);
       }
       this.renderHost(this.resolvedMode);
+      this.ensureInitialLoad();
       this.config.onReady?.();
     } catch (err) {
       this.config.onError?.(err);
     }
   }
+  ensureInitialLoad() {
+    if (this.initialLoaded) return;
+    this.initialLoaded = true;
+    if (this.state.view === "roadmap") void this.loadRoadmap();
+    else if (this.state.view === "changelog") void this.loadReleases();
+  }
   unmount() {
     this.root?.parentElement?.removeChild(this.root);
     this.trigger?.parentElement?.removeChild(this.trigger);
     this.root = null;
     this.trigger = null;
     this.container = null;
+    this.shellEl = null;
+    this.bodyEl = null;
+    this.tabRefs = {};
+    this.bannerEl = null;
   }
   open() {
     this.state.open = true;
@@ -1016,24 +1234,39 @@ var MaltoWidget = class {
     if (!this.root) return;
     if (this.resolvedMode === "inline") {
       if (!this.container) return;
-      this.container.innerHTML = "";
-      this.container.appendChild(this.buildPanelBody());
+      if (!this.shellEl || this.shellEl.parentElement !== this.container) {
+        this.container.innerHTML = "";
+        this.shellEl = this.buildShell();
+        this.container.appendChild(this.shellEl);
+      }
+      this.refreshShell();
       return;
     }
-    this.root.innerHTML = "";
-    if (!this.state.open) return;
-    const overlay = document.createElement("div");
-    overlay.className = "malto-overlay";
-    overlay.addEventListener("click", (e) => {
-      if (e.target === overlay) this.close();
-    });
-    const modal = document.createElement("div");
-    modal.className = "malto-modal";
-    modal.appendChild(this.buildPanelBody());
-    overlay.appendChild(modal);
-    this.root.appendChild(overlay);
+    if (!this.state.open) {
+      this.root.innerHTML = "";
+      this.shellEl = null;
+      this.bodyEl = null;
+      this.tabRefs = {};
+      this.bannerEl = null;
+      return;
+    }
+    if (!this.shellEl || this.shellEl.parentElement === null) {
+      this.root.innerHTML = "";
+      const overlay = document.createElement("div");
+      overlay.className = "malto-overlay";
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) this.close();
+      });
+      const modal = document.createElement("div");
+      modal.className = "malto-modal";
+      this.shellEl = this.buildShell();
+      modal.appendChild(this.shellEl);
+      overlay.appendChild(modal);
+      this.root.appendChild(overlay);
+    }
+    this.refreshShell();
   }
-  buildPanelBody() {
+  buildShell() {
     const wrap = document.createElement("div");
     wrap.style.display = "flex";
     wrap.style.flexDirection = "column";
@@ -1043,23 +1276,39 @@ var MaltoWidget = class {
     wrap.appendChild(this.buildTabs());
     const body = document.createElement("div");
     body.className = "malto-body";
-    body.appendChild(this.buildView());
+    this.bodyEl = body;
     wrap.appendChild(body);
-    if (this.state.view !== "auth" && !this.state.email) {
-      const banner = document.createElement("div");
-      banner.className = "malto-footer-banner";
-      const txt = document.createElement("span");
-      txt.innerHTML = `Sign in to vote, comment, or submit ideas.`;
-      const link = document.createElement("button");
-      link.className = "malto-link";
-      link.textContent = "Sign in";
-      link.addEventListener("click", () => this.go("auth"));
-      banner.appendChild(txt);
-      banner.appendChild(link);
-      wrap.appendChild(banner);
-    }
+    const banner = document.createElement("div");
+    banner.className = "malto-footer-banner";
+    banner.style.display = "none";
+    const txt = document.createElement("span");
+    txt.innerHTML = `Sign in to vote, comment, or submit ideas.`;
+    const link = document.createElement("button");
+    link.className = "malto-link";
+    link.textContent = "Sign in";
+    link.addEventListener("click", () => this.go("auth"));
+    banner.appendChild(txt);
+    banner.appendChild(link);
+    this.bannerEl = banner;
+    wrap.appendChild(banner);
     return wrap;
   }
+  refreshShell() {
+    for (const [name, btn] of Object.entries(this.tabRefs)) {
+      btn?.setAttribute(
+        "aria-selected",
+        name === this.state.view ? "true" : "false"
+      );
+    }
+    if (this.bodyEl) {
+      this.bodyEl.innerHTML = "";
+      this.bodyEl.appendChild(this.buildView());
+    }
+    if (this.bannerEl) {
+      const showBanner = this.state.view !== "auth" && !this.state.email;
+      this.bannerEl.style.display = showBanner ? "" : "none";
+    }
+  }
   buildHeader() {
     const header = document.createElement("div");
     header.className = "malto-header";
@@ -1096,14 +1345,14 @@ var MaltoWidget = class {
   buildTabs() {
     const tabs = document.createElement("div");
     tabs.className = "malto-tabs";
+    this.tabRefs = {};
     const enabled = this.allowedViews();
-    if (enabled.includes("list")) tabs.appendChild(this.tabBtn("Feed", "list"));
-    if (enabled.includes("submit"))
-      tabs.appendChild(this.tabBtn("New", "submit"));
     if (enabled.includes("roadmap"))
       tabs.appendChild(this.tabBtn("Roadmap", "roadmap"));
     if (enabled.includes("changelog"))
       tabs.appendChild(this.tabBtn("Updates", "changelog"));
+    if (enabled.includes("submit"))
+      tabs.appendChild(this.tabBtn("New", "submit"));
     return tabs;
   }
   tabBtn(label, view) {
@@ -1115,13 +1364,16 @@ var MaltoWidget = class {
     );
     btn.textContent = label;
     btn.addEventListener("click", () => this.go(view));
+    this.tabRefs[view] = btn;
     return btn;
   }
   go(view) {
     this.state.view = view;
     this.state.error = null;
+    if (view === "roadmap" || view === "changelog" || view === "detail" && this.state.selectedFeedback) {
+      this.state.loading = true;
+    }
     this.render();
-    if (view === "list") void this.loadFeedbacks();
     if (view === "roadmap") void this.loadRoadmap();
     if (view === "changelog") void this.loadReleases();
     if (view === "detail" && this.state.selectedFeedback) {
@@ -1129,21 +1381,12 @@ var MaltoWidget = class {
     }
   }
   allowedViews() {
-    const settings = this.board?.widget.enabledFeatures ?? [
-      "list",
-      "submit",
-      "vote",
-      "comment",
-      "roadmap",
-      "changelog"
-    ];
-    const requested = this.config.views ?? [
-      "list",
-      "submit",
-      "roadmap",
-      "changelog"
-    ];
-    return requested.filter((v) => settings.includes(v));
+    const TABS = ["roadmap", "submit", "changelog"];
+    const settings = this.board?.widget.enabledFeatures ?? TABS;
+    const requested = this.config.views ?? TABS;
+    return TABS.filter(
+      (v) => settings.includes(v) && requested.includes(v)
+    );
   }
   buildView() {
     const wrap = document.createElement("div");
@@ -1154,12 +1397,6 @@ var MaltoWidget = class {
       wrap.appendChild(e);
     }
     switch (this.state.view) {
-      case "list":
-        wrap.appendChild(this.viewList());
-        if (this.state.feedbacks.length === 0 && !this.state.loading) {
-          void this.loadFeedbacks();
-        }
-        break;
       case "submit":
         wrap.appendChild(this.viewSubmit());
         break;
@@ -1168,15 +1405,9 @@ var MaltoWidget = class {
         break;
       case "roadmap":
         wrap.appendChild(this.viewRoadmap());
-        if (Object.keys(this.state.roadmap).length === 0 && !this.state.loading) {
-          void this.loadRoadmap();
-        }
         break;
       case "changelog":
         wrap.appendChild(this.viewChangelog());
-        if (this.state.releases.length === 0 && !this.state.loading) {
-          void this.loadReleases();
-        }
         break;
       case "detail":
         wrap.appendChild(this.viewDetail());
@@ -1184,30 +1415,6 @@ var MaltoWidget = class {
     }
     return wrap;
   }
-  viewList() {
-    const wrap = document.createElement("div");
-    if (this.state.loading) {
-      wrap.appendChild(this.skeletonList(4));
-      return wrap;
-    }
-    if (this.state.feedbacks.length === 0) {
-      wrap.appendChild(
-        this.emptyState(
-          "\u{1F4A1}",
-          "No requests yet",
-          "Be the first to share an idea or report something."
-        )
-      );
-      return wrap;
-    }
-    const list = document.createElement("div");
-    list.className = "malto-list";
-    for (const fb of this.state.feedbacks) {
-      list.appendChild(this.feedbackRow(fb));
-    }
-    wrap.appendChild(list);
-    return wrap;
-  }
   feedbackRow(fb) {
     const row = document.createElement("div");
     row.className = "malto-item";
@@ -1287,8 +1494,7 @@ var MaltoWidget = class {
         });
         titleInput.value = "";
         descInput.value = "";
-        await this.loadFeedbacks();
-        this.go("list");
+        this.go("roadmap");
       } catch (err) {
         this.state.error = err.message;
         submit.removeAttribute("disabled");
@@ -1312,7 +1518,7 @@ var MaltoWidget = class {
         clearSession(this.apiKeyPrefix);
         this.state.email = null;
         this.state.name = null;
-        this.go("list");
+        this.go("roadmap");
       });
       wrap.appendChild(p);
       wrap.appendChild(out);
@@ -1347,7 +1553,7 @@ var MaltoWidget = class {
           this.state.email = session.user.email;
           this.state.name = session.user.name;
           this.state.authStatus = "idle";
-          this.go("list");
+          this.go("roadmap");
         } catch (err) {
           this.state.error = err.message;
           verifyBtn.removeAttribute("disabled");
@@ -1408,40 +1614,57 @@ var MaltoWidget = class {
   }
   viewRoadmap() {
     const wrap = document.createElement("div");
+    wrap.className = "malto-kanban";
     if (this.state.loading) {
-      wrap.appendChild(this.skeletonList(3));
+      for (let i = 0; i < 4; i++) {
+        const col = document.createElement("div");
+        col.className = "malto-kanban-col";
+        const h = document.createElement("h5");
+        h.className = "malto-kanban-title";
+        h.textContent = "Loading";
+        col.appendChild(h);
+        col.appendChild(this.skeletonCards(2));
+        wrap.appendChild(col);
+      }
       return wrap;
     }
-    const labels = {
-      PLANNED: "Planned",
-      IN_PROGRESS: "In Progress",
-      COMPLETED: "Done"
-    };
+    const cols = [
+      { status: "BACKLOG", title: "Backlog" },
+      { status: "PLANNED", title: "Planned" },
+      { status: "IN_PROGRESS", title: "In Progress" },
+      { status: "UNDER_REVIEW", title: "Under Review" }
+    ];
     let any = false;
-    for (const status of ["PLANNED", "IN_PROGRESS", "COMPLETED"]) {
+    for (const { status, title } of cols) {
       const items = this.state.roadmap[status] ?? [];
+      if (items.length > 0) any = true;
       const col = document.createElement("div");
-      col.className = "malto-roadmap-col";
+      col.className = "malto-kanban-col";
+      const head = document.createElement("div");
+      head.className = "malto-kanban-head";
       const h = document.createElement("h5");
-      h.textContent = labels[status] ?? status;
+      h.className = "malto-kanban-title";
+      h.textContent = title;
       const c = document.createElement("span");
-      c.className = "malto-roadmap-count";
-      c.textContent = String(items.length);
-      h.appendChild(c);
-      col.appendChild(h);
+      c.className = "malto-kanban-count";
+      c.textContent = pad2(items.length);
+      head.appendChild(h);
+      head.appendChild(c);
+      col.appendChild(head);
+      const list = document.createElement("div");
+      list.className = "malto-kanban-list";
       if (items.length === 0) {
         const empty = document.createElement("div");
-        empty.className = "malto-empty-desc";
-        empty.style.padding = "8px 0 12px";
-        empty.textContent = "Nothing here yet.";
-        col.appendChild(empty);
+        empty.className = "malto-kanban-empty";
+        empty.textContent = "Nothing here.";
+        list.appendChild(empty);
       } else {
-        any = true;
-        for (const fb of items) col.appendChild(this.feedbackRow(fb));
+        for (const fb of items) list.appendChild(this.feedbackCard(fb));
       }
+      col.appendChild(list);
       wrap.appendChild(col);
     }
-    if (!any && Object.keys(this.state.roadmap).length === 0) {
+    if (!any) {
       wrap.innerHTML = "";
       wrap.appendChild(
         this.emptyState(
@@ -1453,6 +1676,102 @@ var MaltoWidget = class {
     }
     return wrap;
   }
+  feedbackCard(fb) {
+    const url = fb.url ?? "";
+    const card = document.createElement(url ? "a" : "div");
+    card.className = "malto-card";
+    if (url) {
+      card.href = url;
+      card.target = "_blank";
+      card.rel = "noopener noreferrer";
+    }
+    const top = document.createElement("div");
+    top.className = "malto-card-top";
+    const cat = document.createElement("span");
+    cat.className = "malto-card-cat";
+    cat.textContent = fb.category ?? "General";
+    const votes = document.createElement("span");
+    votes.className = "malto-card-votes";
+    votes.innerHTML = `<svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 7 6 4 9 7"/></svg><span>${formatCount(fb.votes ?? 0)}</span>`;
+    top.appendChild(cat);
+    top.appendChild(votes);
+    card.appendChild(top);
+    const title = document.createElement("h4");
+    title.className = "malto-card-title";
+    title.textContent = fb.title;
+    card.appendChild(title);
+    if (fb.description) {
+      const desc = document.createElement("p");
+      desc.className = "malto-card-desc";
+      desc.textContent = fb.description;
+      card.appendChild(desc);
+    }
+    const foot = document.createElement("div");
+    foot.className = "malto-card-foot";
+    const who = document.createElement("div");
+    who.className = "malto-card-who";
+    const avatarUrl = safeImageUrl(fb.author?.avatarUrl);
+    const avatar = document.createElement("span");
+    avatar.className = "malto-card-avatar";
+    if (avatarUrl) {
+      const img = document.createElement("img");
+      img.src = avatarUrl;
+      img.alt = "";
+      img.referrerPolicy = "no-referrer";
+      img.crossOrigin = "anonymous";
+      avatar.appendChild(img);
+    } else {
+      avatar.classList.add(`malto-avatar-bg-${avatarBgIndex(fb.author?.name ?? fb.title)}`);
+      avatar.textContent = initialsOf(fb.author?.name);
+    }
+    who.appendChild(avatar);
+    const name = document.createElement("span");
+    name.className = "malto-card-author";
+    name.textContent = fb.author?.name ?? "Anon";
+    who.appendChild(name);
+    const dot = document.createElement("span");
+    dot.className = "malto-card-dot";
+    dot.textContent = "\xB7";
+    who.appendChild(dot);
+    const time = document.createElement("span");
+    time.className = "malto-card-time";
+    time.textContent = relativeTime(fb.createdAt);
+    who.appendChild(time);
+    const comments = document.createElement("span");
+    comments.className = "malto-card-comments";
+    comments.innerHTML = `<svg viewBox="0 0 14 14" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9a1.5 1.5 0 0 1-1.5 1.5H5l-3 3v-9A1.5 1.5 0 0 1 3.5 3h7A1.5 1.5 0 0 1 12 4.5z"/></svg><span>${fb.commentCount ?? 0}</span>`;
+    foot.appendChild(who);
+    foot.appendChild(comments);
+    card.appendChild(foot);
+    return card;
+  }
+  skeletonCards(count) {
+    const wrap = document.createElement("div");
+    wrap.className = "malto-kanban-list";
+    for (let i = 0; i < count; i++) {
+      const card = document.createElement("div");
+      card.className = "malto-card malto-card-skeleton";
+      const top = document.createElement("div");
+      top.className = "malto-skeleton";
+      top.style.height = "14px";
+      top.style.width = "60px";
+      const t = document.createElement("div");
+      t.className = "malto-skeleton";
+      t.style.height = "12px";
+      t.style.width = "85%";
+      t.style.marginTop = "10px";
+      const d = document.createElement("div");
+      d.className = "malto-skeleton";
+      d.style.height = "10px";
+      d.style.width = "70%";
+      d.style.marginTop = "6px";
+      card.appendChild(top);
+      card.appendChild(t);
+      card.appendChild(d);
+      wrap.appendChild(card);
+    }
+    return wrap;
+  }
   viewChangelog() {
     const wrap = document.createElement("div");
     if (this.state.loading) {
@@ -1489,18 +1808,20 @@ var MaltoWidget = class {
     const fb = this.state.selectedFeedback;
     if (!fb) {
       wrap.appendChild(
-        this.emptyState("\u{1F4ED}", "Nothing selected", "Pick a request from Feed.")
+        this.emptyState("\u{1F4ED}", "Nothing selected", "Pick a request from the roadmap.")
       );
       return wrap;
     }
     const back = document.createElement("button");
     back.className = "malto-back";
     back.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> Back';
-    back.addEventListener("click", () => this.go("list"));
+    back.addEventListener("click", () => this.go("roadmap"));
     wrap.appendChild(back);
     wrap.appendChild(this.feedbackRow(fb));
-    const allowed = this.allowedViews();
-    if (allowed.includes("comment")) {
+    const commentEnabled = this.board?.widget.enabledFeatures.includes(
+      "comment"
+    ) ?? true;
+    if (commentEnabled) {
       const commentsHeader = document.createElement("h5");
       commentsHeader.textContent = "Comments";
       commentsHeader.style.cssText = "margin: 16px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--malto-text-muted); font-weight: 600;";
@@ -1634,18 +1955,6 @@ var MaltoWidget = class {
     wrap.appendChild(d);
     return wrap;
   }
-  async loadFeedbacks() {
-    this.state.loading = true;
-    this.render();
-    try {
-      this.state.feedbacks = await this.client.listFeedbacks();
-    } catch (err) {
-      this.state.error = err.message;
-    } finally {
-      this.state.loading = false;
-      this.render();
-    }
-  }
   async loadRoadmap() {
     this.state.loading = true;
     this.render();
@@ -1717,6 +2026,22 @@ function statusPill(status) {
   pill.appendChild(txt);
   return pill;
 }
+function initialsOf(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
+  return (first + last).toUpperCase() || "?";
+}
+function avatarBgIndex(seedStr) {
+  let h = 0;
+  for (let i = 0; i < seedStr.length; i++) h = h * 31 + seedStr.charCodeAt(i) >>> 0;
+  return h % 8;
+}
+function pad2(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
 function formatCount(n) {
   if (n < 1e3) return String(n);
   if (n < 1e4) return (n / 1e3).toFixed(1).replace(/\.0$/, "") + "k";