@tosk/gen-ui 1.0.2 → 1.0.4

package/gen-ui.js

@@ -17,72 +17,84 @@ class GenUi extends HTMLElement {
   static SELECTORS = {
     loadingOverlay: '#loading-overlay',
     previewOutput: '#preview-output',
-    editBtn: '#edit-btn',
-    completeBtn: '#complete-btn',
     chatWindow: '#chat-window',
     chatInput: '#chat-input',
     chatSubmit: '#chat-submit',
     chatCancel: '#chat-cancel',
-    connectBtn: '#connect-btn',
     uiTitle: '#ui-title',
+    contextMenu: '#context-menu',
+    ctxInsert: '#ctx-insert',
+    ctxCopy: '#ctx-copy',
+    ctxEdit: '#ctx-edit',
   };
 
   static TEMPLATE = (() => {
     const template = document.createElement('template');
     template.innerHTML = `
       <style>
-        :host { display: block; width: 100%; height: 100vh; background: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
-        #container { display: flex; flex-direction: column; height: 100%; }
-        header { height: 64px; background: #ffffff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); z-index: 50; box-sizing: border-box; }
-        .header-left { flex: 1; }
-        .header-center { flex: 2; display: flex; align-items: center; justify-content: center; }
-        #ui-title { background-color: #f0f0f0; padding: 8px 24px; border-radius: 8px; font-weight: 600; color: #333; font-size: 1rem; min-width: 200px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s ease; }
-        #ui-title.loading { color: #888; background-color: #f5f5f5; animation: pulse 1.5s infinite ease-in-out; }
-        @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
-        .header-right { flex: 1; display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
-        .icon-btn { background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; padding: 10px 14px; font-size: 1.2rem; color: #555; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
-        .icon-btn:hover { background-color: #f3f4f6; color: #111; }
-        .icon-btn:active { background-color: #e5e7eb; }
-        .btn-connect.active { color: #3b82f6; background: #eff6ff; border-color: #bfdbfe; }
-        .btn-complete { color: #2ecc71; font-weight: bold; }
-        .btn-complete:hover { background: #f0fdf4; color: #22c55e; }
-        .content-area { flex: 1; position: relative; overflow: hidden; width: 100%; }
+        :host { display: block; width: 100%; height: 100vh; background: transparent; font-family: sans-serif; }
         iframe { width: 100%; height: 100%; border: none; display: block; }
-        .loading-overlay { position: absolute; inset: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; z-index: 20; }
+
+        .loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 20; }
         .spinner { width: 24px; height: 24px; border: 3px solid rgba(0, 0, 0, 0.1); border-left-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
         @keyframes spin { to { transform: rotate(360deg); } }
-        .chat-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
+
+        .chat-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
         .chat-box { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 10px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
         .chat-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; resize: vertical; min-height: 100px; box-sizing: border-box; }
         .chat-actions { display: flex; justify-content: flex-end; gap: 10px; }
+
         button.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
         .btn-primary { background: #3b82f6; color: white; }
         .btn-primary:hover { opacity: 0.9; }
         .btn-cancel { background: #eee; color: #333; }
+
         .hidden { display: none !important; }
+
+        .context-menu {
+          position: absolute;
+          background: white;
+          border: 1px solid #e0e0e0;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          border-radius: 8px;
+          padding: 4px 0;
+          z-index: 1000;
+          min-width: 160px;
+          display: none;
+          flex-direction: column;
+        }
+        .context-menu.visible { display: flex; }
+        .context-menu-item {
+          padding: 8px 16px;
+          cursor: pointer;
+          font-size: 0.9rem;
+          color: #333;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          transition: background 0.2s;
+        }
+        .context-menu-item:hover { background: #f5f5f5; }
+
+        #ui-title { display: none; }
       </style>
-      <div id="container">
-        <header>
-          <div class="header-left"></div>
-          <div class="header-center"><div id="ui-title"></div></div>
-          <div class="header-right">
-            <button id="connect-btn" class="icon-btn btn-connect" title="ファイル連携">🔗</button>
-            <button id="edit-btn" class="icon-btn" title="修正指示">✏️</button>
-            <button id="complete-btn" class="icon-btn btn-complete" title="確定">✅</button>
-          </div>
-        </header>
-        <div class="content-area">
-          <div id="loading-overlay" class="loading-overlay hidden"><div class="spinner"></div></div>
-          <iframe id="preview-output" title="Generated UI"></iframe>
-        </div>
-        <div id="chat-window" class="chat-overlay hidden">
-          <div class="chat-box">
-            <p style="margin:0; font-weight:bold; color:#555;">修正指示を入力</p>
-            <textarea id="chat-input" class="chat-input" placeholder="例: 背景を暗くして、文字を大きくして"></textarea>
-            <div class="chat-actions">
-              <button id="chat-cancel" class="btn btn-cancel">閉じる</button>
-              <button id="chat-submit" class="btn btn-primary">修正する</button>
-            </div>
+      <div id="loading-overlay" class="loading-overlay hidden"><div class="spinner"></div></div>
+      <iframe id="preview-output" title="Generated UI"></iframe>
+      <div id="ui-title"></div>
+
+      <div id="context-menu" class="context-menu">
+        <div id="ctx-insert" class="context-menu-item">挿入</div>
+        <div id="ctx-copy" class="context-menu-item">コピー</div>
+        <div id="ctx-edit" class="context-menu-item">修正</div>
+      </div>
+
+      <div id="chat-window" class="chat-overlay hidden">
+        <div class="chat-box">
+          <p style="margin:0; font-weight:bold; color:#555;">修正指示を入力</p>
+          <textarea id="chat-input" class="chat-input" placeholder="例: 背景を暗くして、文字を大きくして"></textarea>
+          <div class="chat-actions">
+            <button id="chat-cancel" class="btn btn-cancel">閉じる</button>
+            <button id="chat-submit" class="btn btn-primary">修正する</button>
           </div>
         </div>
       </div>
@@ -139,8 +151,8 @@ class GenUi extends HTMLElement {
     this.#saveKey = this.getAttribute('save-key');
     this.#originalHtml = this.innerHTML.trim();
 
-    if (!this.#apiKey) return console.error('GenUi: "api-key" attribute is required.');
     if (this.#loadKey) return this.#loadFromFirestore();
+    if (!this.#apiKey) return console.error('GenUi: "api-key" attribute is required for generation.');
     if (this.#requestPrompt) this.#processRequest();
   }
 
@@ -148,15 +160,10 @@ class GenUi extends HTMLElement {
   // Event Handlers
   // ==================================================================================
   #setupInteractions() {
-    const { editBtn, completeBtn, chatWindow, chatCancel, chatSubmit, chatInput, connectBtn } = this.#elements;
-
-    editBtn.addEventListener('click', () => {
-      chatWindow.classList.remove('hidden');
-      chatInput.focus();
-    });
+    const { chatWindow, chatCancel, chatSubmit, chatInput } = this.#elements;
+    const { ctxInsert, ctxCopy, ctxEdit } = this.#elements;
 
     chatCancel.addEventListener('click', () => chatWindow.classList.add('hidden'));
-
     chatSubmit.addEventListener('click', () => {
       const instruction = chatInput.value.trim();
       if (!instruction) return;
@@ -165,35 +172,57 @@ class GenUi extends HTMLElement {
       this.#processRefinement(instruction);
     });
 
-    connectBtn.addEventListener('click', () => this.#handleFileConnect());
-    completeBtn.addEventListener('click', () => this.#handleCompletion());
-  }
+    this.shadowRoot.addEventListener('click', (e) => {
+      if (!e.target.closest('#context-menu')) {
+        this.#hideContextMenu();
+      }
+    });
 
-  async #handleFileConnect() {
-    try {
-      const [handle] = await window.showOpenFilePicker({
-        types: [{ description: 'HTML Files', accept: { 'text/html': ['.html'] } }],
-        multiple: false,
-      });
-      this.#fileHandle = handle;
-      this.#elements.connectBtn.classList.add('active');
-      this.#elements.connectBtn.title = `連携中: ${handle.name}`;
-      alert(`「${handle.name}」と連携しました。\n確定ボタンを押すと、このファイルが自動的に書き換えられます。`);
-    } catch (err) { /* Cancelled */ }
+    ctxInsert.addEventListener('click', async () => {
+      this.#hideContextMenu();
+      try {
+        const [handle] = await window.showOpenFilePicker({
+          types: [{ description: 'HTML Files', accept: { 'text/html': ['.html'] } }],
+          multiple: false,
+        });
+
+        if (confirm(`${handle.name} に挿入しますか？`)) {
+          this.#fileHandle = handle;
+          await this.#directWriteToFile();
+        } 
+      } catch (err) {
+      }
+    });
+
+    ctxCopy.addEventListener('click', () => {
+      this.#hideContextMenu();
+      this.#copyToClipboard();
+      alert('コピーしました。');
+    });
+
+    ctxEdit.addEventListener('click', () => {
+      this.#hideContextMenu();
+      chatWindow.classList.remove('hidden');
+      chatInput.focus();
+    });
   }
 
-  async #handleCompletion() {
-    const msg = this.#fileHandle
-      ? '連携中のファイルを書き換えますか？\n（Git等でバックアップを推奨）'
-      : 'クリップボードにコピーしますか？';
-    if (!confirm(msg)) return;
+  #showContextMenu(x, y) {
+    const menu = this.#elements.contextMenu;
+    const rect = this.getBoundingClientRect();
 
-    if (this.#fileHandle) {
-      await this.#directWriteToFile();
-    } else {
-      await this.#copyToClipboard();
-      alert('コピーしました。');
-    }
+    let left = x;
+    let top = y;
+    if (left + 160 > rect.width) left = rect.width - 160;
+    if (top + 120 > rect.height) top = rect.height - 120;
+
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.classList.add('visible');
+  }
+
+  #hideContextMenu() {
+    this.#elements.contextMenu.classList.remove('visible');
   }
 
   // ==================================================================================
@@ -336,8 +365,33 @@ ${html}
 
   #renderPreview(html, css, javascript, title) {
     this.#currentCode = { html, css, javascript };
-    this.#elements.previewOutput.srcdoc = `<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><style>body{margin:0;padding:20px;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f5;}*,*::before,*::after{box-sizing:border-box;}${css}</style></head><body>${html}<script>try{${javascript||''}}catch(e){console.error(e)}<\/script></body></html>`;
+    
+    // --- 変更点: iframe内のbodyスタイルからflex中央揃えを削除 ---
+    const iframeCss = `body{margin:0;padding:0;min-height:100vh;background:#fff;}*,*::before,*::after{box-sizing:border-box;}${css}`;
+    
+    this.#elements.previewOutput.srcdoc = `<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><style>${iframeCss}</style></head><body>${html}<script>try{${javascript||''}}catch(e){console.error(e)}<\/script></body></html>`;
     this.#elements.uiTitle.textContent = title || this.#requestPrompt || 'No Title';
+
+    // --- 追加点: iframe内での右クリック検知 ---
+    this.#elements.previewOutput.onload = () => {
+        try {
+            const doc = this.#elements.previewOutput.contentDocument;
+            
+            // 右クリックでメニュー表示
+            doc.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                const iframeRect = this.#elements.previewOutput.getBoundingClientRect();
+                const x = e.clientX + iframeRect.left;
+                const y = e.clientY + iframeRect.top;
+                this.#showContextMenu(x, y);
+            });
+            
+            // 左クリックでメニューを閉じる
+            doc.addEventListener('click', () => this.#hideContextMenu());
+        } catch (e) {
+            console.warn("Context menu access denied", e);
+        }
+    };
   }
 
   // ==================================================================================
@@ -370,15 +424,16 @@ ${html}
   }
 
   async #processRequest() {
-    await this.#executeGemini((html) => this.#buildPrompt(`<style>${Array.from(document.querySelectorAll('style')).map(s=>s.textContent).join('\n')}</style>${html}`, this.#requestPrompt));
+    await this.#executeGemini((html) => this.#buildPrompt(`<style>${Array.from(document.querySelectorAll('style')).map(s=>s.textContent).join('\n')}</style>${html}`, this.#requestPrompt, document.body.innerHTML));
   }
 
   async #processRefinement(instruction) {
-    await this.#executeGemini(() => this.#buildPrompt(this.#currentCode.html, instruction));
+    await this.#executeGemini(() => this.#buildPrompt(this.#currentCode.html, instruction, document.body.innerHTML));
   }
 
   async #executeGemini(promptBuilder) {
     this.#updateUIState('LOADING');
+
     this.#abortController = new AbortController();
     try {
       const prompt = promptBuilder(this.#originalHtml);
@@ -404,8 +459,10 @@ ${html}
     }
   }
 
-  #buildPrompt(html, request) {
-    const htmlContent = html ? `${html}` : `なし。指示に基づき新規生成`;
+  #buildPrompt(html, request, parent) {
+    const targetHtml = html ? `${html}` : `なし。指示に基づき新規生成`;
+    const parentHtml = parent ? `${parent}` : `なし`;
+
     return `
     ## 命令
     あなたは世界トップクラスのUIエンジニアです。
@@ -415,15 +472,18 @@ ${html}
     ### HTML
     1. 「対象HTML」があれば、セマンティックHTML(\`main\`や\`header\`等)を使用して意味的に正しくリファクタリングしてください。
     2. 「対象HTML」がなければ、指示に基づき最適なHTMLを新規生成してください。
-    3. 正しいARIAロールと属性を必ず使用してください。
-    4. 純粋に装飾目的の画像、またはスクリーンリーダーにとって繰り返しになる場合を除き、すべての画像に代替テキストを追加してください。
-    5. 配置用の親要素（divやwrapper等）で囲まず、コンポーネント本体をルート要素として出力してください。
+    3. 「親ページのHTML」があれば、デザインとレイアウトの整合性を取るために参照してください。ただし生成するコードに含めないでください。
+    4. 正しいARIAロールと属性を必ず使用してください。
+    5. 純粋に装飾目的の画像、またはスクリーンリーダーにとって繰り返しになる場合を除き、すべての画像に代替テキストを追加してください。
+    6. 配置用の親要素（divやwrapper等）で囲まず、コンポーネント本体をルート要素として出力してください。
 
     ### CSS
     1. CSSはマテリアルデザインの原則に従ってください。
     2. CSSはレスポンシブデザインを実装してください。
-    3. 画像は、アスペクト比を維持し、画像全体が表示されるようにしてください。意図しないトリミングが発生する \`object-fit: cover;\` は避け、必要であれば \`object-fit: contain;\` や \`height: auto;\` を使用して、画像が途切れないようにしてください。
-    4. \`object-fit: contain;\` や \`height: auto;\` を使用して画像が途切れないようにする場合、画像コンテナの背景色は、コンポーネント全体の背景色（通常は \`#ffffff\`）と一致させるか、透明 (\`transparent\`) に設定し、余白部分の色が浮かないようにしてください。
+    3. 画像の表示（\`object-fit\`）は、画像の役割に応じて以下のように使い分けてください
+        - 背景・装飾・風景・アバター: コンテナ全体を埋めるために \`object-fit: cover;\` を使用し、余白が出ないようにしてください。
+        - 商品・図解・グラフ: 全体が見えることが重要な場合は \`object-fit: contain;\` を使用してください。ただし、その場合は余白が目立たないよう、画像コンテナの背景色を調整（透明または画像と馴染む色）してください。
+    4. 画像エリアは、レイアウト崩れを防ぐために適切な高さ指定（\`height\`）またはアスペクト比（\`aspect-ratio\`）を設定してください。
     5. CSSセレクタは、可能な限り特定のクラス名を使用し、bodyやhtmlタグへの直接的なスタイル適用は避けてください。
     6. 画面中央揃えやbodyへのレイアウト指定は禁止です。コンポーネント内部のスタイルのみ記述してください。
 
@@ -433,6 +493,22 @@ ${html}
     3. コードは \`document.addEventListener('DOMContentLoaded', () => { ... })\` 内に記述し、DOM読み込み後に実行されるようにしてください。
     4. エラーハンドリング（try-catch等）を適切に行い、コンソールエラーが出ないように配慮してください。
 
+    ### 画像リソースのルール
+    画像（imgタグやbackground-image等）の扱いは、以下の優先順位とルールを厳守してください。
+    1. 既存パスの維持（最優先）:
+      - 「対象HTML」に既に記述されている画像パスは、そのまま出力してください。
+    2. 新規ダミー画像の生成:
+      - 指示により新しく画像要素を追加する場合や、元画像のパスが空の場合に限り、以下のURL形式を使用してください。
+      A. 一般的な画像（背景、商品、記事等）:
+        - 書式: "https://picsum.photos/seed/{seed_id}/{width}/{height}"
+        - {width}, {height} は必要なサイズ（例: 800/600）に置き換える。
+        - {seed_id} には画像の文脈を表す固定の英単語（例: "nature", "city", "food"）を入れてください。
+        - 例: <img src="https://picsum.photos/seed/nature/400/300" alt="風景">
+      B. ユーザープロフィール画像（アバター・アイコン）:
+        - 書式: "https://i.pravatar.cc/{size}?u={unique_id}"
+        - {size} はサイズ（例: 150）。uパラメータには固定の文字列を入れる。
+        - 例: <img src="https://i.pravatar.cc/150?u=user1" alt="ユーザーアイコン" style="border-radius: 50%;">
+
     ### 制約条件
     1. CSSは、外部のライブラリやフレームワーク（Tailwind CSS や Bootstrap等）に依存してはいけません。
     2. CSS内に外部リソース (@import等) を含めないでください。
@@ -441,7 +517,8 @@ ${html}
 
     ## 入力データ
     - ユーザーからの指示: ${request}
-    - 対象HTML: ${htmlContent}
+    - 対象HTML: ${targetHtml}
+    - 親ページのHTML: ${parentHtml}
 
     ## 出力指示子
     - 回答は必ずJSON形式でなければなりません。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tosk/gen-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "gen-ui.js",
   "files": [
     "gen-ui.js"