designnn 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designnn",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Trend-driven design prompt engine for Figma AI. Generate high-quality UI/UX prompts powered by real-time design trend analysis.",
   "type": "module",
   "bin": {

package/public/app.js

@@ -1,5 +1,6 @@
 // ============================================
-// DESIGNNN Web UI — Client Application
+// DESIGNNN Web UI v0.4.0 — Client Application
+// i18n-enabled (EN / JA auto-detect + toggle)
 // ============================================
 
 (function () {
@@ -8,6 +9,11 @@
   // --- State ---
   let trends = [];
   let currentFilter = "all";
+  let searchQuery = "";
+
+  // --- i18n Init ---
+  currentLang = detectLanguage();
+  setLanguage(currentLang);
 
   // --- DOM References ---
   const navBtns = document.querySelectorAll(".nav-btn");
@@ -15,15 +21,100 @@
   const chatInput = document.getElementById("chat-input");
   const chatSubmit = document.getElementById("chat-submit");
   const chatResult = document.getElementById("chat-result");
-  const quickBtns = document.querySelectorAll(".quick-btn");
+  const quickPromptsContainer = document.getElementById("quick-prompts");
   const filterBtns = document.querySelectorAll(".filter-btn");
   const trendsGrid = document.getElementById("trends-grid");
   const exploreResult = document.getElementById("explore-result");
+  const exploreSearch = document.getElementById("explore-search");
+  const trendsCountLabel = document.getElementById("trends-count-label");
   const mixSelect1 = document.getElementById("mix-select-1");
   const mixSelect2 = document.getElementById("mix-select-2");
   const mixContext = document.getElementById("mix-context");
   const mixSubmit = document.getElementById("mix-submit");
   const mixResult = document.getElementById("mix-result");
+  const statsContainer = document.getElementById("stats-container");
+  const langToggle = document.getElementById("lang-toggle");
+  const langLabel = document.getElementById("lang-label");
+
+  // ============================================
+  // i18n — Apply translations to DOM
+  // ============================================
+  function applyI18n() {
+    // Update lang label
+    langLabel.textContent = currentLang.toUpperCase();
+    document.documentElement.lang = currentLang === "ja" ? "ja" : "en";
+
+    // Set font family for Japanese
+    if (currentLang === "ja") {
+      document.body.style.fontFamily = "'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
+    } else {
+      document.body.style.fontFamily = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
+    }
+
+    // data-i18n: text content
+    document.querySelectorAll("[data-i18n]").forEach((el) => {
+      const key = el.getAttribute("data-i18n");
+      el.textContent = t(key);
+    });
+
+    // data-i18n-html: innerHTML (for spans with highlights)
+    document.querySelectorAll("[data-i18n-html]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-html");
+      const trendCount = trends.length || "65+";
+      el.innerHTML = t(key, { count: trendCount });
+    });
+
+    // data-i18n-placeholder: input placeholders
+    document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-placeholder");
+      el.placeholder = t(key);
+    });
+
+    // Quick prompts
+    renderQuickPrompts();
+
+    // Footer
+    const footerText = document.getElementById("footer-text");
+    if (footerText) {
+      footerText.textContent = t("footerText", { version: "0.4.0" });
+    }
+
+    // Re-render dynamic content
+    if (trends.length > 0) {
+      renderTrends(getFilteredTrends());
+      populateMixSelects(trends);
+    }
+  }
+
+  function renderQuickPrompts() {
+    const prompts = t("chatQuickPrompts");
+    if (!Array.isArray(prompts)) return;
+
+    // Keep the label, remove old buttons
+    const label = quickPromptsContainer.querySelector(".quick-label");
+    quickPromptsContainer.innerHTML = "";
+    if (label) quickPromptsContainer.appendChild(label);
+
+    prompts.forEach((p) => {
+      const btn = document.createElement("button");
+      btn.className = "quick-btn";
+      btn.dataset.prompt = p.prompt;
+      btn.textContent = p.label;
+      btn.addEventListener("click", () => {
+        chatInput.value = p.prompt;
+        handleChat(p.prompt);
+      });
+      quickPromptsContainer.appendChild(btn);
+    });
+  }
+
+  // Language toggle
+  langToggle.addEventListener("click", () => {
+    const newLang = currentLang === "en" ? "ja" : "en";
+    currentLang = newLang;
+    setLanguage(newLang);
+    applyI18n();
+  });
 
   // --- Tab Navigation ---
   navBtns.forEach((btn) => {
@@ -33,43 +124,50 @@
       tabContents.forEach((t) => t.classList.remove("active"));
       btn.classList.add("active");
       document.getElementById(`tab-${tab}`).classList.add("active");
+      if (tab === "stats") loadStats();
     });
   });
 
-  // --- Utility: Show Loading ---
+  // ============================================
+  // Utility Functions
+  // ============================================
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
   function showLoading(container) {
     container.classList.remove("hidden");
     container.innerHTML = `
       <div class="loading-indicator">
-        <div class="loading-dots">
-          <span></span><span></span><span></span>
-        </div>
-        <span>Generating prompt...</span>
+        <div class="loading-spinner"></div>
+        <span>${t("chatLoading")}</span>
       </div>
     `;
   }
 
-  // --- Utility: Show Result ---
   function showResult(container, prompt, label) {
     container.classList.remove("hidden");
+    const wordCount = prompt.split(/\s+/).length;
     container.innerHTML = `
       <div class="result-header">
-        <div class="result-title">${label || "Generated Prompt"}</div>
+        <div class="result-title">${label || t("resultGenerated")}</div>
         <button class="btn-copy" onclick="copyPrompt(this)">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
-          Copy
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+          ${t("resultCopy")}
         </button>
       </div>
       <div class="result-body">
         <pre>${escapeHtml(prompt)}</pre>
       </div>
       <div class="result-footer">
-        Paste this prompt into Figma AI (Ctrl+I / Cmd+I)
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
+        ${t("resultPasteHint")} &middot; ${wordCount} ${t("resultWords")}
       </div>
     `;
   }
 
-  // --- Utility: Show Error ---
   function showError(container, message) {
     container.classList.remove("hidden");
     container.innerHTML = `
@@ -77,13 +175,6 @@
     `;
   }
 
-  // --- Utility: Escape HTML ---
-  function escapeHtml(text) {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
   // --- Copy to Clipboard ---
   window.copyPrompt = function (btn) {
     const pre = btn.closest(".result-area").querySelector("pre");
@@ -91,14 +182,14 @@
     navigator.clipboard.writeText(pre.textContent).then(() => {
       btn.classList.add("copied");
       btn.innerHTML = `
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
-        Copied!
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+        ${t("resultCopied")}
       `;
       setTimeout(() => {
         btn.classList.remove("copied");
         btn.innerHTML = `
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
-          Copy
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+          ${t("resultCopy")}
         `;
       }, 2000);
     });
@@ -110,7 +201,7 @@
   async function handleChat(message) {
     if (!message.trim()) return;
     chatSubmit.disabled = true;
-    chatSubmit.textContent = "Generating...";
+    chatSubmit.innerHTML = `<div class="loading-spinner" style="width:16px;height:16px;border-width:2px"></div> ${t("chatGenerating")}`;
     showLoading(chatResult);
 
     try {
@@ -120,13 +211,13 @@
         body: JSON.stringify({ message }),
       });
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Failed to generate");
-      showResult(chatResult, data.prompt, `Prompt for: "${message}"`);
+      if (!res.ok) throw new Error(data.error || t("errorFailed"));
+      showResult(chatResult, data.prompt, t("resultPromptFor", { message }));
     } catch (err) {
       showError(chatResult, err.message);
     } finally {
       chatSubmit.disabled = false;
-      chatSubmit.textContent = "Generate";
+      chatSubmit.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg> <span data-i18n="chatGenerate">${t("chatGenerate")}</span>`;
     }
   }
 
@@ -135,16 +226,23 @@
     if (e.key === "Enter") handleChat(chatInput.value);
   });
 
-  quickBtns.forEach((btn) => {
-    btn.addEventListener("click", () => {
-      chatInput.value = btn.dataset.prompt;
-      handleChat(btn.dataset.prompt);
-    });
-  });
-
   // ============================================
   // EXPLORE
   // ============================================
+  function getTrendDescription(trend) {
+    if (currentLang === "ja" && window.TREND_DESC_JA && window.TREND_DESC_JA[trend.id]) {
+      return window.TREND_DESC_JA[trend.id];
+    }
+    return trend.description;
+  }
+
+  function getCategoryLabel(category) {
+    if (currentLang === "ja" && window.CATEGORY_JA && window.CATEGORY_JA[category]) {
+      return window.CATEGORY_JA[category];
+    }
+    return category;
+  }
+
   async function loadTrends() {
     try {
       const res = await fetch("/api/trends");
@@ -152,32 +250,64 @@
       trends = data.trends;
       renderTrends(trends);
       populateMixSelects(trends);
+      // Apply i18n after trends loaded
+      applyI18n();
     } catch (err) {
-      trendsGrid.innerHTML = `<div class="error-message">Failed to load trends</div>`;
+      trendsGrid.innerHTML = `<div class="error-message">${t("errorLoadTrends")}</div>`;
+    }
+  }
+
+  function getFilteredTrends() {
+    let filtered = trends;
+    if (currentFilter !== "all") {
+      filtered = filtered.filter((t) => t.category === currentFilter);
+    }
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (t) =>
+          t.name.toLowerCase().includes(q) ||
+          t.description.toLowerCase().includes(q) ||
+          t.keywords.some((k) => k.toLowerCase().includes(q)) ||
+          (currentLang === "ja" && window.TREND_DESC_JA && window.TREND_DESC_JA[t.id] && window.TREND_DESC_JA[t.id].includes(q))
+      );
     }
+    return filtered;
   }
 
   function renderTrends(list) {
+    trendsCountLabel.textContent = t("exploreShowing", { shown: list.length, total: trends.length });
+
+    if (list.length === 0) {
+      trendsGrid.innerHTML = `<div class="error-message" style="grid-column:1/-1;text-align:center">${t("exploreNoResults")}</div>`;
+      return;
+    }
+
     trendsGrid.innerHTML = list
       .map(
-        (t) => `
-      <div class="trend-card" data-id="${t.id}">
+        (trend) => `
+      <div class="trend-card" data-id="${trend.id}">
         <div class="trend-card-header">
-          <span class="trend-name">${escapeHtml(t.name)}</span>
-          <span class="trend-category">${t.category}</span>
+          <span class="trend-name">${escapeHtml(trend.name)}</span>
+          <span>
+            <span class="trend-category">${getCategoryLabel(trend.category)}</span>
+            ${trend.source === "ai-generated" ? '<span class="trend-source">AI</span>' : ""}
+          </span>
         </div>
-        <div class="trend-desc">${escapeHtml(t.description)}</div>
-        <div class="trend-popularity">
-          <div class="popularity-bar">
-            <div class="popularity-fill" style="width: ${t.popularity}%"></div>
+        <div class="trend-desc">${escapeHtml(getTrendDescription(trend))}</div>
+        <div class="trend-meta">
+          <div class="trend-popularity">
+            <div class="popularity-bar">
+              <div class="popularity-fill" style="width: ${trend.popularity}%"></div>
+            </div>
+            <span class="popularity-value">${trend.popularity}</span>
           </div>
-          <span class="popularity-value">${t.popularity}%</span>
         </div>
         <div class="trend-keywords">
-          ${t.keywords.map((k) => `<span class="keyword-tag">${escapeHtml(k)}</span>`).join("")}
+          ${trend.keywords.slice(0, 4).map((k) => `<span class="keyword-tag">${escapeHtml(k)}</span>`).join("")}
         </div>
         <div class="trend-card-action">
-          <button class="btn-generate" onclick="generateFromTrend('${t.id}')">Generate Prompt</button>
+          <button class="btn-generate" onclick="generateFromTrend('${trend.id}')">${t("exploreGenerateBtn")}</button>
         </div>
       </div>
     `
@@ -190,19 +320,20 @@
       currentFilter = btn.dataset.category;
       filterBtns.forEach((b) => b.classList.remove("active"));
       btn.classList.add("active");
-
-      if (currentFilter === "all") {
-        renderTrends(trends);
-      } else {
-        renderTrends(trends.filter((t) => t.category === currentFilter));
-      }
+      renderTrends(getFilteredTrends());
       exploreResult.classList.add("hidden");
     });
   });
 
+  if (exploreSearch) {
+    exploreSearch.addEventListener("input", (e) => {
+      searchQuery = e.target.value;
+      renderTrends(getFilteredTrends());
+    });
+  }
+
   window.generateFromTrend = async function (trendId) {
     showLoading(exploreResult);
-    // Scroll to result
     exploreResult.scrollIntoView({ behavior: "smooth", block: "nearest" });
 
     try {
@@ -212,8 +343,8 @@
         body: JSON.stringify({ trendId }),
       });
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Failed to generate");
-      showResult(exploreResult, data.prompt, `Trend: ${data.trend.name}`);
+      if (!res.ok) throw new Error(data.error || t("errorFailed"));
+      showResult(exploreResult, data.prompt, t("resultTrend", { name: data.trend.name }));
     } catch (err) {
       showError(exploreResult, err.message);
     }
@@ -223,12 +354,24 @@
   // MIX
   // ============================================
   function populateMixSelects(list) {
-    const options = list
-      .map((t) => `<option value="${t.id}">${t.name} [${t.category}]</option>`)
+    const grouped = {};
+    list.forEach((t) => {
+      if (!grouped[t.category]) grouped[t.category] = [];
+      grouped[t.category].push(t);
+    });
+
+    const optionsHtml = Object.entries(grouped)
+      .map(
+        ([cat, items]) =>
+          `<optgroup label="${getCategoryLabel(cat)}">` +
+          items.map((t) => `<option value="${t.id}">${t.name}</option>`).join("") +
+          `</optgroup>`
+      )
       .join("");
-    const placeholder = `<option value="">Select a trend...</option>`;
-    mixSelect1.innerHTML = placeholder + options;
-    mixSelect2.innerHTML = placeholder + options;
+
+    const placeholder = `<option value="">${t("mixSelectPlaceholder")}</option>`;
+    mixSelect1.innerHTML = placeholder + optionsHtml;
+    mixSelect2.innerHTML = placeholder + optionsHtml;
   }
 
   async function handleMix() {
@@ -237,41 +380,104 @@
     const ctx = mixContext.value;
 
     if (!t1 || !t2) {
-      showError(mixResult, "Please select two trends to mix.");
+      showError(mixResult, t("mixErrorSelect"));
       return;
     }
     if (t1 === t2) {
-      showError(mixResult, "Please select two different trends.");
+      showError(mixResult, t("mixErrorSame"));
       return;
     }
 
     mixSubmit.disabled = true;
-    mixSubmit.textContent = "Mixing...";
+    mixSubmit.innerHTML = `<div class="loading-spinner" style="width:16px;height:16px;border-width:2px"></div> ${t("mixMixing")}`;
     showLoading(mixResult);
 
     try {
       const res = await fetch("/api/mix", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ trend1Id: t1, trend2Id: t2, context: ctx || undefined }),
+        body: JSON.stringify({ trend1Id: t1, trend2Id: t2, context: ctx }),
       });
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Failed to mix");
+      if (!res.ok) throw new Error(data.error || t("errorFailed"));
       showResult(
         mixResult,
         data.prompt,
-        `Mix: ${data.trend1.name} × ${data.trend2.name}`
+        t("resultMix", { name1: data.trend1.name, name2: data.trend2.name })
       );
     } catch (err) {
       showError(mixResult, err.message);
     } finally {
       mixSubmit.disabled = false;
-      mixSubmit.textContent = "Mix & Generate";
+      mixSubmit.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg> <span data-i18n="mixGenerate">${t("mixGenerate")}</span>`;
     }
   }
 
   mixSubmit.addEventListener("click", handleMix);
 
+  // ============================================
+  // STATS
+  // ============================================
+  async function loadStats() {
+    try {
+      const res = await fetch("/api/stats");
+      const data = await res.json();
+      renderStats(data);
+    } catch (err) {
+      statsContainer.innerHTML = `<div class="error-message">${t("errorLoadStats")}</div>`;
+    }
+  }
+
+  function renderStats(data) {
+    const maxCat = Math.max(...Object.values(data.categories));
+
+    const categoryBars = Object.entries(data.categories)
+      .sort((a, b) => b[1] - a[1])
+      .map(
+        ([cat, count]) => `
+        <div class="stat-bar-row">
+          <span class="stat-bar-label">${getCategoryLabel(cat)}</span>
+          <div class="stat-bar-track">
+            <div class="stat-bar-fill" style="width: ${(count / maxCat) * 100}%"></div>
+          </div>
+          <span class="stat-bar-count">${count}</span>
+        </div>
+      `
+      )
+      .join("");
+
+    statsContainer.innerHTML = `
+      <div class="stat-card accent">
+        <div class="stat-value">${data.total}</div>
+        <div class="stat-label">${t("statsTotalTrends")}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">${data.builtin}</div>
+        <div class="stat-label">${t("statsBuiltin")}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">${data.custom}</div>
+        <div class="stat-label">${t("statsAiGenerated")}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">${Object.keys(data.categories).length}</div>
+        <div class="stat-label">${t("statsCategories")}</div>
+      </div>
+      <div class="stat-bar-container">
+        <div class="stat-bar-title">${t("statsByCategory")}</div>
+        ${categoryBars}
+      </div>
+    `;
+  }
+
   // --- Init ---
   loadTrends();
+
+  // Keyboard shortcut: / to focus search
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "/" && document.activeElement.tagName !== "INPUT" && document.activeElement.tagName !== "TEXTAREA") {
+      e.preventDefault();
+      chatInput.focus();
+    }
+  });
 })();

package/public/i18n-trends.js

@@ -0,0 +1,92 @@
+// ============================================
+// DESIGNNN i18n — Trend Descriptions (Japanese)
+// ============================================
+
+const TREND_DESC_JA = {
+  // === STYLES ===
+  "bento-ui": "日本の弁当箱にインスパイアされたグリッドレイアウト。異なるサイズのカードを非対称に配置し、視覚的な階層と情報密度を実現する。",
+  "glassmorphism": "すりガラス効果を用いたデザイン。背景ぼかし、透明度、繊細なボーダーでUIに奥行きとレイヤー感を生み出す。",
+  "neubrutalism": "太いボーダー、強いシャドウ、ハイコントラストな配色が特徴の大胆で荒削りな美学。ミニマリズムへのアンチテーゼ。",
+  "organic-shapes": "幾何学的な直線を避け、自然界の曲線やブロブ形状を取り入れたデザイン。親しみやすさと柔らかさを演出する。",
+  "dark-mode-first": "ダークモードを前提に設計されたUI。目の疲れを軽減し、有機ELディスプレイの省電力にも貢献する。",
+  "kinetic-typography": "動きのあるタイポグラフィ。スクロールやインタラクションに連動して文字が変形・移動し、ダイナミックな表現を実現する。",
+  "aurora-gradients": "オーロラのような多色グラデーション。メッシュグラデーションで幻想的な背景やアクセントを生み出す。",
+  "claymorphism": "3Dの粘土のような質感。ぷっくりとした丸みのある要素に、内側のシャドウと柔らかい色彩で立体感を表現する。",
+  "retro-pixel": "8ビット・16ビット時代のピクセルアートを現代UIに融合。ノスタルジックな魅力とモダンな機能性を両立する。",
+  "minimalist-mono": "モノクロ配色と極限まで削ぎ落としたミニマルデザイン。タイポグラフィと余白で洗練された印象を与える。",
+  "grain-texture": "フィルムグレインやノイズテクスチャを加えた温かみのあるデザイン。デジタルの冷たさを和らげ、手触り感を演出する。",
+  "neumorphism-v2": "ニューモーフィズムの進化版。ソフトな凹凸表現にアクセシビリティを改善し、実用的なUIコンポーネントとして昇華。",
+  "ai-native-aesthetic": "AI時代のビジュアル言語。グラデーションのオーブ、パーティクル、データフローの視覚化でAIの存在を表現する。",
+  "japandi-design": "日本の侘び寂びと北欧デザインの融合。自然素材の質感、落ち着いたアースカラー、機能美を重視する。",
+  "maximalism": "「多いほど良い」の美学。大胆な色使い、パターンの重ね合わせ、装飾的な要素で視覚的なインパクトを最大化する。",
+  "3d-immersive": "WebGLによる3Dオブジェクト、スクロール連動の3Dアニメーション、ARプレビュー。静的な画像を超えた奥行きとインタラクション。",
+  "y2k-vibrant-palette": "Y2Kノスタルジアにインスパイアされた鮮やかな配色。ネオングラデーション、ハイコントラスト、ドーパミンデザイン。",
+  "retrofuturism": "レトロが描いた未来像。ネオンアクセント、クロームテクスチャ、ピクセルアート、SF・アーケードを彷彿とさせる大胆なグラデーション。",
+  "collage-design": "スクラップブック風のクリエイティブ表現。ステッカー、破れたテクスチャ、切り抜き写真、手描き要素を意図的に散りばめる。",
+  "sensory-maximalism": "五感を刺激するデザイン。リッチなテクスチャ、大胆な色彩、ダイナミックなモーション、没入感のある高エネルギーな構成。",
+  "variable-fonts": "バリアブルフォントを活用した動的タイポグラフィ。インタラクションやスクロールに応じてウェイトや幅が流動的に変化する。",
+
+  // === COMPONENTS ===
+  "floating-action-bar": "画面下部に浮遊するアクションバー。コンテキストに応じたツールやアクションにすばやくアクセスできる。",
+  "skeleton-loading": "コンテンツ読み込み中にレイアウトの骨格を表示するプレースホルダー。体感的な待ち時間を短縮する。",
+  "command-palette": "Cmd+Kで呼び出すコマンドパレット。検索、ナビゲーション、アクション実行を一箇所に集約するパワーユーザー向け機能。",
+  "toast-notification": "画面端に一時的に表示される通知メッセージ。操作の成功・エラー・情報をユーザーの作業を中断せずに伝える。",
+  "avatar-stack": "複数のアバターを重ねて表示するコンポーネント。チームメンバーやコラボレーターの存在を視覚的に示す。",
+  "data-table": "ソート、フィルター、ページネーション、インライン編集を備えた高機能データテーブル。大量データの管理に不可欠。",
+  "empty-state": "データがない状態を魅力的に表示するデザイン。イラストとCTAでユーザーを次のアクションに導く。",
+  "ai-chat-interface": "AIチャットボットのインターフェース。メッセージバブル、タイピングインジケーター、リッチレスポンス、コンテキスト表示を含む。",
+  "stepper-progress": "マルチステップフォームの進捗表示。番号付きステップ、進行バー、バリデーション状態でユーザーを案内する。",
+  "contextual-menu": "右クリックやロングプレスで表示されるコンテキストメニュー。アイコン、キーボードショートカット、ネストされたサブメニューを含む。",
+  "voice-ui": "音声操作のインターフェース要素。波形ビジュアライザー、音声コマンドインジケーター、会話型音声アシスタント。",
+
+  // === PATTERNS ===
+  "saas-pricing": "SaaS料金ページのデザインパターン。プランの比較表、推奨プランのハイライト、FAQ、年額/月額の切り替えを含む。",
+  "onboarding-flow": "新規ユーザー向けのオンボーディングフロー。プログレスバー、スキップ可能なステップ、パーソナライズ設定を含む。",
+  "dashboard-analytics": "KPIカード、チャート、リアルタイムデータを備えた分析ダッシュボード。日付フィルターとエクスポート機能付き。",
+  "auth-minimal": "ミニマルな認証画面。ソーシャルログイン、パスワードレス認証、2段階認証を含むモダンなログイン/登録フォーム。",
+  "settings-page": "設定画面のデザインパターン。セクション分け、トグルスイッチ、フォームバリデーション、変更の自動保存を含む。",
+  "ecommerce-pdp": "ECサイトの商品詳細ページ。画像ギャラリー、バリエーション選択、レビュー、カート追加ボタンを含む。コンバージョン最適化済み。",
+  "notification-center": "カテゴリ分けされた通知パネル。既読/未読の状態管理、アクション可能な通知項目を含む。",
+  "kanban-board": "カラムベースのタスク管理ボード。ドラッグ＆ドロップ対応のカード、ラベル、担当者、期日、スイムレーンを含む。",
+  "file-upload": "ドラッグ＆ドロップ対応のファイルアップロードエリア。進捗インジケーター、ファイル形式の検証、アップロードキューを含む。",
+  "scrollytelling": "スクロールベースのナラティブ体験。ユーザーのスクロールに合わせてコンテンツが展開し、モーション・テキスト・ビジュアルを物語として融合する。",
+  "gamified-design": "ゲームメカニクスをUIに応用。ポイント、レベル、バッジ、プログレスバー、リーダーボード、マイクロリワードでエンゲージメントを向上。",
+  "sustainable-web": "エコ意識のデザイン。最適化されたアセット、データ転送量の削減、省エネのダークテーマ、アクセシビリティファーストのアプローチ。",
+  "agentic-ai-ui": "自律型AIエージェントのUI。タスク委任、進捗モニタリング、承認ワークフロー、マルチステップのエージェントパイプラインを含む。",
+  "tactile-ui": "物理的な反応を感じさせるUI要素。バウンスアニメーション、弾性変形、圧力感知のインタラクションを含む。",
+  "ai-design-system": "AIが動的にコンポーネントを適応・生成するデザインシステム。自己進化するトークン、自動生成バリアント、スマートテーマ。",
+
+  // === LAYOUTS ===
+  "landing-page-saas": "SaaSランディングページの完全構成。ヒーロー、機能紹介、ソーシャルプルーフ、料金、CTAセクションを含む。コンバージョン最適化済み。",
+  "hero-split": "2カラムに分割されたヒーローセクション。片側にテキストとCTA、もう片側にビジュアル（画像、イラスト、3D）を配置する。",
+  "sidebar-nav": "アイコンのみモードに折りたためるサイドバーナビゲーション。SaaSやダッシュボードアプリケーションの標準的なパターン。",
+  "mobile-bottom-sheet": "モバイルインターフェース用のドラッグ可能なボトムパネル。従来のモーダルを、より自然で親指操作しやすいインタラクションに置き換える。",
+  "responsive-cards": "ビューポートに応じてマルチカラムからシングルカラムに自動リフローするカードレイアウト。モダンなコンテンツレイアウトの基盤。",
+  "masonry-layout": "高さの異なるカードを効率的に配置するレンガ壁のようなレイアウト。画像中心のコンテンツやポートフォリオに最適。",
+  "sticky-header": "スクロール時に固定されるナビゲーションヘッダー。スクロールに応じて縮小、ぼかし追加、背景色変更などのビジュアル遷移を含む。",
+  "full-bleed-sections": "ライトとダークの背景を交互に配置するフルワイドコンテンツセクション。視覚的なリズムと明確なコンテンツ区分を生み出す。",
+  "z-pattern-layout": "画像左/テキスト右と、テキスト左/画像右を交互に配置するレイアウト。ページを下に向かってZ字パターンで視線を誘導する。",
+  "experimental-navigation": "非線形のナビゲーションパターン。ラジアルメニュー、隠しドロワー、インタラクティブマップ、探索型のジャーニーを含む。",
+  "spatial-design": "空間コンピューティング向けデザイン。フローティングウィンドウ、深度レイヤー、ガラスマテリアル、Apple Vision Pro向けの視線追跡インタラクション。",
+
+  // === INTERACTIONS ===
+  "micro-interactions": "フィードバック、ガイド、楽しさを提供する小さく目的のあるアニメーション。ボタンホバー、トグルスイッチ、成功状態など。",
+  "scroll-animations": "スクロールに応じて要素がアニメーションで表示される。フェードイン、スライドアップ、パララックス効果で魅力的なスクロール体験を実現。",
+  "gesture-navigation": "スワイプ、ピンチ、ドラッグによるモバイルナビゲーション。ボタンタップを自然なタッチ操作に置き換える。",
+  "haptic-feedback-design": "触覚フィードバックの視覚的表現。ボタン押下、トグル、確認操作などの物理的な反応を示唆するデザインキュー。",
+  "dark-light-toggle": "ダークモードとライトモードのスムーズな切り替え。アニメーション付きトグルスイッチとシームレスな配色遷移を含む。",
+  "infinite-scroll": "スクロールに応じてコンテンツを連続的に読み込む。ローディングインジケーター、スケルトン表示、コンテンツ終端のメッセージを含む。",
+  "drag-reorder": "ドラッグで並び替え可能なリストアイテム。グラブハンドル、ドロップインジケーター、スムーズな再配置を含む。",
+};
+
+// Category name translations
+const CATEGORY_JA = {
+  "style": "スタイル",
+  "component": "コンポーネント",
+  "pattern": "パターン",
+  "layout": "レイアウト",
+  "interaction": "インタラクション",
+};
+
+window.TREND_DESC_JA = TREND_DESC_JA;
+window.CATEGORY_JA = CATEGORY_JA;