From bd5977fc92fc84d7d2e9fd9296114024f4f31fa1 Mon Sep 17 00:00:00 2001
From: M57 <hy4ri@users.noreply.github.com>
Date: Mon, 29 Jun 2026 18:49:10 +0300
Subject: [PATCH] chore: remove sketches directory

---
 sketches/input-bar-chat-screen/index.html | 400 ----------------------
 1 file changed, 400 deletions(-)
 delete mode 100644 sketches/input-bar-chat-screen/index.html

diff --git a/sketches/input-bar-chat-screen/index.html b/sketches/input-bar-chat-screen/index.html
deleted file mode 100644
index 31d4a0e7..00000000
--- a/sketches/input-bar-chat-screen/index.html
+++ /dev/null
@@ -1,400 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>ChatInputBar — Layout (v2)</title>
-<style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-                 "Helvetica Neue", Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    background: #111;
-    color: #eee;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 36px;
-  }
-
-  .label {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: #888;
-    margin-bottom: 6px;
-  }
-
-  .bar {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    width: 100%;
-    max-width: 500px;
-    background: rgba(30,30,35,0.92);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 24px;
-    padding: 4px 8px;
-    backdrop-filter: blur(8px);
-    position: relative;
-  }
-
-  .icon-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    font-size: 18px;
-    flex-shrink: 0;
-    color: #999;
-    transition: background 0.15s;
-  }
-  .icon-btn:hover { background: rgba(255,255,255,0.08); }
-  .icon-btn:disabled { opacity: 0.25; cursor: default; }
-
-  .send-btn {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    transition: all 0.15s;
-    background: var(--btn-bg, rgba(255,255,255,0.08));
-    color: var(--btn-color, #999);
-  }
-  .send-btn.mic      { --btn-bg: rgba(255,255,255,0.08); --btn-color: #ccc; }
-  .send-btn.send     { --btn-bg: #4f8cff;                --btn-color: #fff; }
-  .send-btn.stop     { --btn-bg: #e53935;                --btn-color: #fff; }
-
-  .input-field {
-    flex: 1;
-    border: 1px solid rgba(255,255,255,0.12);
-    border-radius: 20px;
-    background: transparent;
-    padding: 8px 14px;
-    font-size: 14px;
-    color: #eee;
-    outline: none;
-    min-height: 36px;
-    max-height: 120px;
-    transition: border-color 0.15s;
-    font-family: inherit;
-    line-height: 1.5;
-  }
-  .input-field:focus { border-color: #4f8cff; }
-  .input-field::placeholder { color: #666; }
-
-  .input-field:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .chips-row {
-    display: flex;
-    gap: 8px;
-    padding: 4px 12px;
-    max-width: 500px;
-    overflow-x: auto;
-  }
-
-  .chip {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.10);
-    border-radius: 16px;
-    padding: 4px 6px 4px 10px;
-    cursor: pointer;
-    transition: background 0.12s;
-  }
-  .chip:hover { background: rgba(255,255,255,0.10); }
-  .chip .thumb {
-    width: 20px; height: 20px;
-    border-radius: 4px;
-    background: #333;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10px;
-    color: #888;
-  }
-  .chip .name {
-    font-size: 12px;
-    max-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #ccc;
-  }
-  .chip .close {
-    width: 18px; height: 18px;
-    border-radius: 50%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10px;
-    color: #888;
-    flex-shrink: 0;
-  }
-  .chip .close:hover { background: rgba(255,255,255,0.12); }
-
-  /* Dropdown menu */
-  .menu-wrapper {
-    position: relative;
-  }
-  .menu {
-    position: absolute;
-    bottom: 36px;
-    left: 0;
-    min-width: 180px;
-    background: rgba(42,42,50,0.98);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 12px;
-    padding: 4px 0;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
-    z-index: 10;
-    overflow: hidden;
-  }
-  .menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 16px;
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    color: #ddd;
-    font-size: 14px;
-    width: 100%;
-    text-align: left;
-    transition: background 0.1s;
-    font-family: inherit;
-  }
-  .menu-item:hover { background: rgba(255,255,255,0.06); }
-  .menu-item .icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
-
-  .variant { margin-bottom: 8px; }
-
-  .note {
-    font-size: 12px;
-    color: #777;
-    margin-top: 4px;
-    line-height: 1.5;
-  }
-
-  .states {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  /* Simple arrow for "tap here" */
-  .tap-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: rgba(79,140,255,0.12);
-    color: #7aadff;
-    padding: 2px 10px;
-    border-radius: 8px;
-    font-size: 11px;
-    margin-left: 4px;
-  }
-</style>
-</head>
-<body>
-
-<h2 style="color:#ddd; font-weight:500; font-size:18px; margin-bottom:4px;">📱 ChatInputBar (v2)</h2>
-<p style="color:#777; font-size:13px; margin-bottom:20px;">
-  Single 📎 attach button → dropdown menu with Camera / Image / File
-</p>
-
-<div class="states">
-
-  <!-- 1. Empty + menu open -->
-  <div class="variant">
-    <div class="label">1. Empty — mic visible, dropdown open</div>
-    <div class="bar">
-      <div class="menu-wrapper">
-        <button class="icon-btn" title="Attach" style="background:rgba(255,255,255,0.08);">📎</button>
-        <div class="menu">
-          <button class="menu-item"><span class="icon">📷</span> Camera</button>
-          <button class="menu-item"><span class="icon">🖼️</span> Image</button>
-          <button class="menu-item"><span class="icon">📄</span> File</button>
-        </div>
-      </div>
-      <input class="input-field" placeholder="Type a message…" disabled />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn mic" title="Voice input">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-      </button>
-    </div>
-    <div class="note">📎 button opens a Material 3 DropdownMenu with three options. Selecting one fires the launcher and closes the menu.</div>
-  </div>
-
-  <!-- 2. Empty, menu closed -->
-  <div class="variant">
-    <div class="label">2. Empty — normal state</div>
-    <div class="bar">
-      <button class="icon-btn" title="Attach">📎</button>
-      <input class="input-field" placeholder="Type a message…" disabled />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn mic" title="Voice input">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-      </button>
-    </div>
-    <div class="note">Default look — single 📎, no clutter. Mic visible when input is blank &amp; no attachments.</div>
-  </div>
-
-  <!-- 3. Typing -->
-  <div class="variant">
-    <div class="label">3. Typing — send shown</div>
-    <div class="bar">
-      <button class="icon-btn" title="Attach">📎</button>
-      <input class="input-field" placeholder="Type a message…" value="Deploy the new config, but keep the old one as backup" style="color:#eee;" />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn send" title="Send">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-      </button>
-    </div>
-    <div class="note">Mic → Send (blue) when text or attachments present.</div>
-  </div>
-
-  <!-- 4. Attachments -->
-  <div class="variant">
-    <div class="label">4. With attachments — preview chips</div>
-    <div class="chips-row">
-      <div class="chip">
-        <span class="thumb">📷</span>
-        <span class="name">photo_20260629.jpg</span>
-        <button class="close">✕</button>
-      </div>
-      <div class="chip">
-        <span class="thumb">📄</span>
-        <span class="name">config.yaml</span>
-        <button class="close">✕</button>
-      </div>
-      <div class="chip">
-        <span class="thumb">📷</span>
-        <span class="name">screenshot.png</span>
-        <button class="close">✕</button>
-      </div>
-    </div>
-    <div class="bar" style="margin-top:0;">
-      <button class="icon-btn" title="Attach">📎</button>
-      <input class="input-field" placeholder="Type a message…" value="Here's what I'm looking at" style="color:#eee;" />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn send" title="Send">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-      </button>
-    </div>
-    <div class="note">Image chips → AsyncImage thumbnail. File chips → file icon. Close ✕ removes.</div>
-  </div>
-
-  <!-- 5. Listening -->
-  <div class="variant">
-    <div class="label">5. Listening — stop shown</div>
-    <div class="bar">
-      <button class="icon-btn" title="Attach" disabled>📎</button>
-      <input class="input-field" placeholder="Type a message…" disabled />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn stop" title="Stop listening">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
-      </button>
-    </div>
-    <div class="note">While listening, input + attach disabled. Red Stop replaces Mic.</div>
-  </div>
-
-  <!-- 6. Disconnected -->
-  <div class="variant">
-    <div class="label">6. Disconnected — everything disabled</div>
-    <div class="bar" style="opacity:0.5;">
-      <button class="icon-btn" disabled title="Attach">📎</button>
-      <input class="input-field" placeholder="Not connected" disabled />
-      <div style="width:4px;flex-shrink:0;"></div>
-      <button class="send-btn mic" disabled title="Voice input">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
-      </button>
-    </div>
-    <div class="note">Everything dimmed, placeholder "Not connected".</div>
-  </div>
-
-</div>
-
-<!-- Full structural diagram -->
-<hr style="border-color:rgba(255,255,255,0.06); margin: 28px 0 16px;" />
-
-<h3 style="color:#ddd; font-weight:500; font-size:14px; margin-bottom:12px;">📐 Structural hierarchy</h3>
-
-<pre style="font-size:12px; color:#aaa; line-height:1.6; background:rgba(255,255,255,0.03); padding:16px; border-radius:12px; max-width:600px;">
-Card (roundedCornerShape(24dp), surface alpha 0.85)
- └ Column
-    ├ [conditional] Slash command suggestions
-    │  └ LazyColumn (maxHeight 200dp)
-    ├ [conditional] Attachment preview chips
-    │  └ Row
-    │     └ AttachmentChip × N
-    │        └ Surface (roundedCorner 16dp)
-    │           ├ [if image] AsyncImage(20dp)
-    │           ├ [else]      Icon(InsertDriveFile, 16dp)
-    │           └ name + Close IconButton(18dp)
-    └ Row (main input area)
-       ├ Box (positioned for dropdown)
-       │  ├ IconButton 📎 AttachFile (36dp)
-       │  └ DropdownMenu (expanded = showAttachmentMenu)
-       │     ├ DropdownMenuItem: 📷 Camera   → onCameraTap()
-       │     ├ DropdownMenuItem: 🖼️ Image    → onImageTap()  → launch("image/*")
-       │     └ DropdownMenuItem: 📄 File     → onFileTap()   → launch("*/*")
-       ├ OutlinedTextField (weight=1f, maxLines=4, rounded 20dp)
-       ├ Spacer(4dp)
-       └ AnimatedContent (mic ↔ send ↔ listening)
-          ├ mic:        FilledTonalButton(Mic icon, 40dp, circle)
-          ├ send:       FilledTonalButton(Send icon, 40dp, circle, blue)
-          └ listening:  FilledTonalButton(Stop icon, 40dp, circle, red)
-</pre>
-
-<hr style="border-color:rgba(255,255,255,0.06); margin: 28px 0 16px;" />
-
-<h3 style="color:#ddd; font-weight:500; font-size:14px; margin-bottom:12px;">🎯 What each dropdown option does</h3>
-
-<table style="font-size:13px; color:#ccc; border-collapse: collapse; max-width:600px;">
-<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
-  <th style="padding:8px 12px; text-align:left; color:#888;">Option</th>
-  <th style="padding:8px 12px; text-align:left; color:#888;">Launcher</th>
-  <th style="padding:8px 12px; text-align:left; color:#888;">MIME</th>
-</tr>
-<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
-  <td style="padding:8px 12px;">📷 Camera</td>
-  <td style="padding:8px 12px;"><code>TakePicture</code> → temp FileProvider URI</td>
-  <td style="padding:8px 12px;">image/jpeg</td>
-</tr>
-<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
-  <td style="padding:8px 12px;">🖼️ Image</td>
-  <td style="padding:8px 12px;"><code>GetContent("image/*")</code></td>
-  <td style="padding:8px 12px;">image/* (gallery picker)</td>
-</tr>
-<tr>
-  <td style="padding:8px 12px;">📄 File</td>
-  <td style="padding:8px 12px;"><code>GetContent("*/*")</code></td>
-  <td style="padding:8px 12px;">*/* (system file picker)</td>
-</tr>
-</table>
-
-</body>
-</html>